first commit

core/modules/contextual/js/toolbar/models/StateModel.js

@@ -0,0 +1,126 @@
+/**
+ * @file
+ * A Backbone Model for the state of Contextual module's edit toolbar tab.
+ */
+
+(function (Drupal, Backbone) {
+  /**
+   * @deprecated in drupal:9.4.0 and is removed from drupal:12.0.0. There is no
+   *  replacement.
+   */
+  Drupal.contextualToolbar.StateModel = Backbone.Model.extend(
+    /** @lends Drupal.contextualToolbar.StateModel# */ {
+      /**
+       * @type {object}
+       *
+       * @prop {boolean} isViewing
+       * @prop {boolean} isVisible
+       * @prop {number} contextualCount
+       * @prop {Drupal~TabbingContext} tabbingContext
+       */
+      defaults: /** @lends Drupal.contextualToolbar.StateModel# */ {
+        /**
+         * Indicates whether the toggle is currently in "view" or "edit" mode.
+         *
+         * @type {boolean}
+         */
+        isViewing: true,
+
+        /**
+         * Indicates whether the toggle should be visible or hidden. Automatically
+         * calculated, depends on contextualCount.
+         *
+         * @type {boolean}
+         */
+        isVisible: false,
+
+        /**
+         * Tracks how many contextual links exist on the page.
+         *
+         * @type {number}
+         */
+        contextualCount: 0,
+
+        /**
+         * A TabbingContext object as returned by {@link Drupal~TabbingManager}:
+         * the set of tabbable elements when edit mode is enabled.
+         *
+         * @type {?Drupal~TabbingContext}
+         */
+        tabbingContext: null,
+      },
+
+      /**
+       * Models the state of the edit mode toggle.
+       *
+       * @constructs
+       *
+       * @augments Backbone.Model
+       *
+       * @param {object} attrs
+       *   Attributes for the backbone model.
+       * @param {object} options
+       *   An object with the following option:
+       * @param {Backbone.collection} options.contextualCollection
+       *   The collection of {@link Drupal.contextual.StateModel} models that
+       *   represent the contextual links on the page.
+       */
+      initialize(attrs, options) {
+        // Respond to new/removed contextual links.
+        this.listenTo(
+          options.contextualCollection,
+          'reset remove add',
+          this.countContextualLinks,
+        );
+        this.listenTo(
+          options.contextualCollection,
+          'add',
+          this.lockNewContextualLinks,
+        );
+
+        // Automatically determine visibility.
+        this.listenTo(this, 'change:contextualCount', this.updateVisibility);
+
+        // Whenever edit mode is toggled, lock all contextual links.
+        this.listenTo(this, 'change:isViewing', (model, isViewing) => {
+          options.contextualCollection.each((contextualModel) => {
+            contextualModel.set('isLocked', !isViewing);
+          });
+        });
+      },
+
+      /**
+       * Tracks the number of contextual link models in the collection.
+       *
+       * @param {Drupal.contextual.StateModel} contextualModel
+       *   The contextual links model that was added or removed.
+       * @param {Backbone.Collection} contextualCollection
+       *    The collection of contextual link models.
+       */
+      countContextualLinks(contextualModel, contextualCollection) {
+        this.set('contextualCount', contextualCollection.length);
+      },
+
+      /**
+       * Lock newly added contextual links if edit mode is enabled.
+       *
+       * @param {Drupal.contextual.StateModel} contextualModel
+       *   The contextual links model that was added.
+       * @param {Backbone.Collection} [contextualCollection]
+       *    The collection of contextual link models.
+       */
+      lockNewContextualLinks(contextualModel, contextualCollection) {
+        if (!this.get('isViewing')) {
+          contextualModel.set('isLocked', true);
+        }
+      },
+
+      /**
+       * Automatically updates visibility of the view/edit mode toggle.
+       */
+      updateVisibility() {
+        this.set('isVisible', this.get('contextualCount') > 0);
+      },
+    },
+  );
+})(Drupal, Backbone);

core/modules/contextual/js/toolbar/views/AuralView.js

@@ -0,0 +1,122 @@
+/**
+ * @file
+ * A Backbone View that provides the aural view of the edit mode toggle.
+ */
+
+(function ($, Drupal, Backbone, _) {
+  /**
+   * @deprecated in drupal:9.4.0 and is removed from drupal:12.0.0. There is no
+   *  replacement.
+   */
+  Drupal.contextualToolbar.AuralView = Backbone.View.extend(
+    /** @lends Drupal.contextualToolbar.AuralView# */ {
+      /**
+       * Tracks whether the tabbing constraint announcement has been read once.
+       *
+       * @type {boolean}
+       */
+      announcedOnce: false,
+
+      /**
+       * Renders the aural view of the edit mode toggle (screen reader support).
+       *
+       * @constructs
+       *
+       * @augments Backbone.View
+       *
+       * @param {object} options
+       *   Options for the view.
+       */
+      initialize(options) {
+        this.options = options;
+
+        this.listenTo(this.model, 'change', this.render);
+        this.listenTo(this.model, 'change:isViewing', this.manageTabbing);
+
+        $(document).on('keyup', _.bind(this.onKeypress, this));
+        this.manageTabbing();
+      },
+
+      /**
+       * {@inheritdoc}
+       *
+       * @return {Drupal.contextualToolbar.AuralView}
+       *   The current contextual toolbar aural view.
+       */
+      render() {
+        // Render the state.
+        this.$el
+          .find('button')
+          .attr('aria-pressed', !this.model.get('isViewing'));
+
+        return this;
+      },
+
+      /**
+       * Limits tabbing to the contextual links and edit mode toolbar tab.
+       */
+      manageTabbing() {
+        let tabbingContext = this.model.get('tabbingContext');
+        // Always release an existing tabbing context.
+        if (tabbingContext) {
+          // Only announce release when the context was active.
+          if (tabbingContext.active) {
+            Drupal.announce(this.options.strings.tabbingReleased);
+          }
+          tabbingContext.release();
+        }
+        // Create a new tabbing context when edit mode is enabled.
+        if (!this.model.get('isViewing')) {
+          tabbingContext = Drupal.tabbingManager.constrain(
+            $('.contextual-toolbar-tab, .contextual'),
+          );
+          this.model.set('tabbingContext', tabbingContext);
+          this.announceTabbingConstraint();
+          this.announcedOnce = true;
+        }
+      },
+
+      /**
+       * Announces the current tabbing constraint.
+       */
+      announceTabbingConstraint() {
+        const strings = this.options.strings;
+        Drupal.announce(
+          Drupal.formatString(strings.tabbingConstrained, {
+            '@contextualsCount': Drupal.formatPlural(
+              Drupal.contextual.collection.length,
+              '@count contextual link',
+              '@count contextual links',
+            ),
+          }),
+        );
+        Drupal.announce(strings.pressEsc);
+      },
+
+      /**
+       * Responds to esc and tab key press events.
+       *
+       * @param {jQuery.Event} event
+       *   The keypress event.
+       */
+      onKeypress(event) {
+        // The first tab key press is tracked so that an announcement about
+        // tabbing constraints can be raised if edit mode is enabled when the page
+        // is loaded.
+        if (
+          !this.announcedOnce &&
+          event.keyCode === 9 &&
+          !this.model.get('isViewing')
+        ) {
+          this.announceTabbingConstraint();
+          // Set announce to true so that this conditional block won't run again.
+          this.announcedOnce = true;
+        }
+        // Respond to the ESC key. Exit out of edit mode.
+        if (event.keyCode === 27) {
+          this.model.set('isViewing', true);
+        }
+      },
+    },
+  );
+})(jQuery, Drupal, Backbone, _);

core/modules/contextual/js/toolbar/views/VisualView.js

@@ -0,0 +1,85 @@
+/**
+ * @file
+ * A Backbone View that provides the visual view of the edit mode toggle.
+ */
+
+(function (Drupal, Backbone) {
+  /**
+   * @deprecated in drupal:9.4.0 and is removed from drupal:12.0.0. There is no
+   *  replacement.
+   */
+  Drupal.contextualToolbar.VisualView = Backbone.View.extend(
+    /** @lends Drupal.contextualToolbar.VisualView# */ {
+      /**
+       * Events for the Backbone view.
+       *
+       * @return {object}
+       *   A mapping of events to be used in the view.
+       */
+      events() {
+        // Prevents delay and simulated mouse events.
+        const touchEndToClick = function (event) {
+          event.preventDefault();
+          event.target.click();
+        };
+
+        return {
+          click() {
+            this.model.set('isViewing', !this.model.get('isViewing'));
+          },
+          touchend: touchEndToClick,
+        };
+      },
+
+      /**
+       * Renders the visual view of the edit mode toggle.
+       *
+       * Listens to mouse & touch and handles edit mode toggle interactions.
+       *
+       * @constructs
+       *
+       * @augments Backbone.View
+       */
+      initialize() {
+        this.listenTo(this.model, 'change', this.render);
+        this.listenTo(this.model, 'change:isViewing', this.persist);
+      },
+
+      /**
+       * {@inheritdoc}
+       *
+       * @return {Drupal.contextualToolbar.VisualView}
+       *   The current contextual toolbar visual view.
+       */
+      render() {
+        // Render the visibility.
+        this.$el.toggleClass('hidden', !this.model.get('isVisible'));
+        // Render the state.
+        this.$el
+          .find('button')
+          .toggleClass('is-active', !this.model.get('isViewing'));
+
+        return this;
+      },
+
+      /**
+       * Model change handler; persists the isViewing value to localStorage.
+       *
+       * `isViewing === true` is the default, so only stores in localStorage when
+       * it's not the default value (i.e. false).
+       *
+       * @param {Drupal.contextualToolbar.StateModel} model
+       *   A {@link Drupal.contextualToolbar.StateModel} model.
+       * @param {boolean} isViewing
+       *   The value of the isViewing attribute in the model.
+       */
+      persist(model, isViewing) {
+        if (!isViewing) {
+          localStorage.setItem('Drupal.contextualToolbar.isViewing', 'false');
+        } else {
+          localStorage.removeItem('Drupal.contextualToolbar.isViewing');
+        }
+      },
+    },
+  );
+})(Drupal, Backbone);