ContextualLinkView.es6.js 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. /**
  2. * @file
  3. * A Backbone View that provides a dynamic contextual link.
  4. */
  5. (function($, Backbone, Drupal) {
  6. Drupal.quickedit.ContextualLinkView = Backbone.View.extend(
  7. /** @lends Drupal.quickedit.ContextualLinkView# */ {
  8. /**
  9. * Define all events to listen to.
  10. *
  11. * @return {object}
  12. * A map of events.
  13. */
  14. events() {
  15. // Prevents delay and simulated mouse events.
  16. function touchEndToClick(event) {
  17. event.preventDefault();
  18. event.target.click();
  19. }
  20. return {
  21. 'click a': function(event) {
  22. event.preventDefault();
  23. this.model.set('state', 'launching');
  24. },
  25. 'touchEnd a': touchEndToClick,
  26. };
  27. },
  28. /**
  29. * Create a new contextual link view.
  30. *
  31. * @constructs
  32. *
  33. * @augments Backbone.View
  34. *
  35. * @param {object} options
  36. * An object with the following keys:
  37. * @param {Drupal.quickedit.EntityModel} options.model
  38. * The associated entity's model.
  39. * @param {Drupal.quickedit.AppModel} options.appModel
  40. * The application state model.
  41. * @param {object} options.strings
  42. * The strings for the "Quick edit" link.
  43. */
  44. initialize(options) {
  45. // Insert the text of the quick edit toggle.
  46. this.$el.find('a').text(options.strings.quickEdit);
  47. // Initial render.
  48. this.render();
  49. // Re-render whenever this entity's isActive attribute changes.
  50. this.listenTo(this.model, 'change:isActive', this.render);
  51. },
  52. /**
  53. * Render function for the contextual link view.
  54. *
  55. * @param {Drupal.quickedit.EntityModel} entityModel
  56. * The associated `EntityModel`.
  57. * @param {bool} isActive
  58. * Whether the in-place editor is active or not.
  59. *
  60. * @return {Drupal.quickedit.ContextualLinkView}
  61. * The `ContextualLinkView` in question.
  62. */
  63. render(entityModel, isActive) {
  64. this.$el.find('a').attr('aria-pressed', isActive);
  65. // Hides the contextual links if an in-place editor is active.
  66. this.$el.closest('.contextual').toggle(!isActive);
  67. return this;
  68. },
  69. },
  70. );
  71. })(jQuery, Backbone, Drupal);