www.aleph1.co.uk Git - yaffs-website/blob - web/core/modules/quickedit/js/views/ContextualLinkView.es6.js

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