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(/** @lends Drupal.quickedit.ContextualLinkView# */{
   8
   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));