edlp_d8/core/modules/quickedit/js/views/ContextualLinkView.es6.js

/**
 * @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));