first commit

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

@@ -0,0 +1,59 @@
+/**
+ * @file
+ * A Backbone View that provides the aural view of a contextual link.
+ */
+
+(function (Drupal, Backbone) {
+  /**
+   * @deprecated in drupal:9.4.0 and is removed from drupal:12.0.0. There is no
+   *  replacement.
+   */
+  Drupal.contextual.AuralView = Backbone.View.extend(
+    /** @lends Drupal.contextual.AuralView# */ {
+      /**
+       * Renders the aural view of a contextual link (i.e. 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);
+
+        // Initial render.
+        this.render();
+      },
+
+      /**
+       * {@inheritdoc}
+       */
+      render() {
+        const isOpen = this.model.get('isOpen');
+
+        // Set the hidden property of the links.
+        this.$el.find('.contextual-links').prop('hidden', !isOpen);
+
+        // Update the view of the trigger.
+        const $trigger = this.$el.find('.trigger');
+        $trigger
+          .each((index, element) => {
+            element.textContent = Drupal.t(
+              '@action @title configuration options',
+              {
+                '@action': !isOpen
+                  ? this.options.strings.open
+                  : this.options.strings.close,
+                '@title': this.model.get('title'),
+              },
+            );
+          })
+          .attr('aria-pressed', isOpen);
+      },
+    },
+  );
+})(Drupal, Backbone);

core/modules/contextual/js/views/KeyboardView.js

@@ -0,0 +1,62 @@
+/**
+ * @file
+ * A Backbone View that provides keyboard interaction for a contextual link.
+ */
+
+(function (Drupal, Backbone) {
+  /**
+   * @deprecated in drupal:9.4.0 and is removed from drupal:12.0.0. There is no
+   *  replacement.
+   */
+  Drupal.contextual.KeyboardView = Backbone.View.extend(
+    /** @lends Drupal.contextual.KeyboardView# */ {
+      /**
+       * @type {object}
+       */
+      events: {
+        'focus .trigger': 'focus',
+        'focus .contextual-links a': 'focus',
+        'blur .trigger': function () {
+          this.model.blur();
+        },
+        'blur .contextual-links a': function () {
+          // Set up a timeout to allow a user to tab between the trigger and the
+          // contextual links without the menu dismissing.
+          const that = this;
+          this.timer = window.setTimeout(() => {
+            that.model.close().blur();
+          }, 150);
+        },
+      },
+
+      /**
+       * Provides keyboard interaction for a contextual link.
+       *
+       * @constructs
+       *
+       * @augments Backbone.View
+       */
+      initialize() {
+        /**
+         * The timer is used to create a delay before dismissing the contextual
+         * links on blur. This is only necessary when keyboard users tab into
+         * contextual links without edit mode (i.e. without TabbingManager).
+         * That means that if we decide to disable tabbing of contextual links
+         * without edit mode, all this timer logic can go away.
+         *
+         * @type {NaN|number}
+         */
+        this.timer = NaN;
+      },
+
+      /**
+       * Sets focus on the model; Clears the timer that dismisses the links.
+       */
+      focus() {
+        // Clear the timeout that might have been set by blurring a link.
+        window.clearTimeout(this.timer);
+        this.model.focus();
+      },
+    },
+  );
+})(Drupal, Backbone);

core/modules/contextual/js/views/RegionView.js

@@ -0,0 +1,75 @@
+/**
+ * @file
+ * A Backbone View that renders the visual view of a contextual region element.
+ */
+
+(function (Drupal, Backbone) {
+  /**
+   * @deprecated in drupal:9.4.0 and is removed from drupal:12.0.0. There is no
+   *  replacement.
+   */
+  Drupal.contextual.RegionView = Backbone.View.extend(
+    /** @lends Drupal.contextual.RegionView# */ {
+      /**
+       * Events for the Backbone view.
+       *
+       * @return {object}
+       *   A mapping of events to be used in the view.
+       */
+      events() {
+        // Used for tracking the presence of touch events. When true, the
+        // mousemove and mouseenter event handlers are effectively disabled.
+        // This is used instead of preventDefault() on touchstart as some
+        // touchstart events are not cancelable.
+        let touchStart = false;
+        return {
+          touchstart() {
+            // Set to true so the mouseenter and mouseleave events that follow
+            // know to not execute any hover related logic.
+            touchStart = true;
+          },
+          mouseenter() {
+            if (!touchStart) {
+              this.model.set('regionIsHovered', true);
+            }
+          },
+          mouseleave() {
+            if (!touchStart) {
+              this.model.close().blur().set('regionIsHovered', false);
+            }
+          },
+          mousemove() {
+            // Because there are scenarios where there are both touchscreens
+            // and pointer devices, the touchStart flag should be set back to
+            // false after mouseenter and mouseleave complete. It will be set to
+            // true if another touchstart event occurs.
+            touchStart = false;
+          },
+        };
+      },
+
+      /**
+       * Renders the visual view of a contextual region element.
+       *
+       * @constructs
+       *
+       * @augments Backbone.View
+       */
+      initialize() {
+        this.listenTo(this.model, 'change:hasFocus', this.render);
+      },
+
+      /**
+       * {@inheritdoc}
+       *
+       * @return {Drupal.contextual.RegionView}
+       *   The current contextual region view.
+       */
+      render() {
+        this.$el.toggleClass('focus', this.model.get('hasFocus'));
+
+        return this;
+      },
+    },
+  );
+})(Drupal, Backbone);

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

@@ -0,0 +1,109 @@
+/**
+ * @file
+ * A Backbone View that provides the visual view of a contextual link.
+ */
+
+(function (Drupal, Backbone) {
+  /**
+   * @deprecated in drupal:9.4.0 and is removed from drupal:12.0.0. There is no
+   *  replacement.
+   */
+  Drupal.contextual.VisualView = Backbone.View.extend(
+    /** @lends Drupal.contextual.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();
+        };
+
+        // Used for tracking the presence of touch events. When true, the
+        // mousemove and mouseenter event handlers are effectively disabled.
+        // This is used instead of preventDefault() on touchstart as some
+        // touchstart events are not cancelable.
+        let touchStart = false;
+
+        return {
+          touchstart() {
+            // Set to true so the mouseenter events that follows knows to not
+            // execute any hover related logic.
+            touchStart = true;
+          },
+          mouseenter() {
+            // We only want mouse hover events on non-touch.
+            if (!touchStart) {
+              this.model.focus();
+            }
+          },
+          mousemove() {
+            // Because there are scenarios where there are both touchscreens
+            // and pointer devices, the touchStart flag should be set back to
+            // false after mouseenter and mouseleave complete. It will be set to
+            // true if another touchstart event occurs.
+            touchStart = false;
+          },
+          'click .trigger': function () {
+            this.model.toggleOpen();
+          },
+          'touchend .trigger': touchEndToClick,
+          'click .contextual-links a': function () {
+            this.model.close().blur();
+          },
+          'touchend .contextual-links a': touchEndToClick,
+        };
+      },
+
+      /**
+       * Renders the visual view of a contextual link. Listens to mouse & touch.
+       *
+       * @constructs
+       *
+       * @augments Backbone.View
+       */
+      initialize() {
+        this.listenTo(this.model, 'change', this.render);
+      },
+
+      /**
+       * {@inheritdoc}
+       *
+       * @return {Drupal.contextual.VisualView}
+       *   The current contextual visual view.
+       */
+      render() {
+        const isOpen = this.model.get('isOpen');
+        // The trigger should be visible when:
+        //  - the mouse hovered over the region,
+        //  - the trigger is locked,
+        //  - and for as long as the contextual menu is open.
+        const isVisible =
+          this.model.get('isLocked') ||
+          this.model.get('regionIsHovered') ||
+          isOpen;
+
+        this.$el
+          // The open state determines if the links are visible.
+          .toggleClass('open', isOpen)
+          // Update the visibility of the trigger.
+          .find('.trigger')
+          .toggleClass('visually-hidden', !isVisible);
+
+        // Nested contextual region handling: hide any nested contextual triggers.
+        if ('isOpen' in this.model.changed) {
+          this.$el
+            .closest('.contextual-region')
+            .find('.contextual .trigger:not(:first)')
+            .toggle(!isOpen);
+        }
+
+        return this;
+      },
+    },
+  );
+})(Drupal, Backbone);