annotate core/modules/quickedit/js/views/ContextualLinkView.es6.js @ 4:a9cd425dd02b

Update, including to Drupal core 8.6.10

/**
 * @file
 * A Backbone View that provides a dynamic contextual link.
 */

(function($, Backbone, Drupal) {
  Drupal.quickedit.ContextualLinkView = Backbone.View.extend(
    /** @lends Drupal.quickedit.ContextualLinkView# */ {
      /**
       * Define all events to listen to.
       *
       * @return {object}
       *   A map of events.
       */
      events() {
        // Prevents delay and simulated mouse events.
        function touchEndToClick(event) {
          event.preventDefault();
          event.target.click();
        }

        return {
          'click a': function(event) {
            event.preventDefault();
            this.model.set('state', 'launching');
          },
          'touchEnd a': touchEndToClick,
        };
      },

      /**
       * Create a new contextual link view.
       *
       * @constructs
       *
       * @augments Backbone.View
       *
       * @param {object} options
       *   An object with the following keys:
       * @param {Drupal.quickedit.EntityModel} options.model
       *   The associated entity's model.
       * @param {Drupal.quickedit.AppModel} options.appModel
       *   The application state model.
       * @param {object} options.strings
       *   The strings for the "Quick edit" link.
       */
      initialize(options) {
        // Insert the text of the quick edit toggle.
        this.$el.find('a').text(options.strings.quickEdit);
        // Initial render.
        this.render();
        // Re-render whenever this entity's isActive attribute changes.
        this.listenTo(this.model, 'change:isActive', this.render);
      },

      /**
       * Render function for the contextual link view.
       *
       * @param {Drupal.quickedit.EntityModel} entityModel
       *   The associated `EntityModel`.
       * @param {bool} isActive
       *   Whether the in-place editor is active or not.
       *
       * @return {Drupal.quickedit.ContextualLinkView}
       *   The `ContextualLinkView` in question.
       */
      render(entityModel, isActive) {
        this.$el.find('a').attr('aria-pressed', isActive);

        // Hides the contextual links if an in-place editor is active.
        this.$el.closest('.contextual').toggle(!isActive);

        return this;
      },
    },
  );
})(jQuery, Backbone, Drupal);