first commit

core/modules/toolbar/js/views/BodyVisualView.js

@@ -0,0 +1,48 @@
+/**
+ * @file
+ * A Backbone view for the body element.
+ */
+
+(function ($, Drupal, Backbone) {
+  Drupal.toolbar.BodyVisualView = Backbone.View.extend(
+    /** @lends Drupal.toolbar.BodyVisualView# */ {
+      /**
+       * Adjusts the body element with the toolbar position and dimension changes.
+       *
+       * @constructs
+       *
+       * @augments Backbone.View
+       */
+      initialize() {
+        this.listenTo(this.model, 'change:activeTray ', this.render);
+        this.listenTo(
+          this.model,
+          'change:isFixed change:isViewportOverflowConstrained',
+          this.isToolbarFixed,
+        );
+      },
+
+      isToolbarFixed() {
+        // When the toolbar is fixed, it will not scroll with page scrolling.
+        const isViewportOverflowConstrained = this.model.get(
+          'isViewportOverflowConstrained',
+        );
+        $('body').toggleClass(
+          'toolbar-fixed',
+          isViewportOverflowConstrained || this.model.get('isFixed'),
+        );
+      },
+
+      /**
+       * {@inheritdoc}
+       */
+      render() {
+        $('body')
+          // Toggle the toolbar-tray-open class on the body element. The class is
+          // applied when a toolbar tray is active. Padding might be applied to
+          // the body element to prevent the tray from overlapping content.
+          .toggleClass('toolbar-tray-open', !!this.model.get('activeTray'));
+      },
+    },
+  );
+})(jQuery, Drupal, Backbone);

core/modules/toolbar/js/views/MenuVisualView.js

@@ -0,0 +1,65 @@
+/**
+ * @file
+ * A Backbone view for the collapsible menus.
+ */
+
+(function ($, Backbone, Drupal) {
+  Drupal.toolbar.MenuVisualView = Backbone.View.extend(
+    /** @lends Drupal.toolbar.MenuVisualView# */ {
+      /**
+       * Backbone View for collapsible menus.
+       *
+       * @constructs
+       *
+       * @augments Backbone.View
+       */
+      initialize() {
+        this.listenTo(this.model, 'change:subtrees', this.render);
+
+        // Render the view immediately on initialization.
+        this.render();
+      },
+
+      /**
+       * {@inheritdoc}
+       */
+      render() {
+        this.renderVertical();
+        this.renderHorizontal();
+      },
+
+      /**
+       * Renders the toolbar menu in horizontal mode.
+       */
+      renderHorizontal() {
+        // Render horizontal.
+        if ('drupalToolbarMenu' in $.fn) {
+          this.$el.children('.toolbar-menu').drupalToolbarMenuHorizontal();
+        }
+      },
+
+      /**
+       * Renders the toolbar menu in vertical mode.
+       */
+      renderVertical() {
+        const subtrees = this.model.get('subtrees');
+
+        // Rendering the vertical menu depends on the subtrees.
+        if (!this.model.get('subtrees')) {
+          return;
+        }
+
+        // Add subtrees.
+        Object.keys(subtrees || {}).forEach((id) => {
+          $(
+            once('toolbar-subtrees', this.$el.find(`#toolbar-link-${id}`)),
+          ).after(subtrees[id]);
+        });
+        // Render the main menu as a nested, collapsible accordion.
+        if ('drupalToolbarMenu' in $.fn) {
+          this.$el.children('.toolbar-menu').drupalToolbarMenu();
+        }
+      },
+    },
+  );
+})(jQuery, Backbone, Drupal);

core/modules/toolbar/js/views/ToolbarAuralView.js

@@ -0,0 +1,80 @@
+/**
+ * @file
+ * A Backbone view for the aural feedback of the toolbar.
+ */
+
+(function (Backbone, Drupal) {
+  Drupal.toolbar.ToolbarAuralView = Backbone.View.extend(
+    /** @lends Drupal.toolbar.ToolbarAuralView# */ {
+      /**
+       * Backbone view for the aural feedback of the toolbar.
+       *
+       * @constructs
+       *
+       * @augments Backbone.View
+       *
+       * @param {object} options
+       *   Options for the view.
+       * @param {object} options.strings
+       *   Various strings to use in the view.
+       */
+      initialize(options) {
+        this.strings = options.strings;
+
+        this.listenTo(
+          this.model,
+          'change:orientation',
+          this.onOrientationChange,
+        );
+        this.listenTo(this.model, 'change:activeTray', this.onActiveTrayChange);
+      },
+
+      /**
+       * Announces an orientation change.
+       *
+       * @param {Drupal.toolbar.ToolbarModel} model
+       *   The toolbar model in question.
+       * @param {string} orientation
+       *   The new value of the orientation attribute in the model.
+       */
+      onOrientationChange(model, orientation) {
+        Drupal.announce(
+          Drupal.t('Tray orientation changed to @orientation.', {
+            '@orientation': orientation,
+          }),
+        );
+      },
+
+      /**
+       * Announces a changed active tray.
+       *
+       * @param {Drupal.toolbar.ToolbarModel} model
+       *   The toolbar model in question.
+       * @param {HTMLElement} tray
+       *   The new value of the tray attribute in the model.
+       */
+      onActiveTrayChange(model, tray) {
+        const relevantTray =
+          tray === null ? model.previous('activeTray') : tray;
+        // Current activeTray and previous activeTray are empty, no state change
+        // to announce.
+        if (!relevantTray) {
+          return;
+        }
+        const action = tray === null ? Drupal.t('closed') : Drupal.t('opened');
+        const trayNameElement =
+          relevantTray.querySelector('.toolbar-tray-name');
+        let text;
+        if (trayNameElement !== null) {
+          text = Drupal.t('Tray "@tray" @action.', {
+            '@tray': trayNameElement.textContent,
+            '@action': action,
+          });
+        } else {
+          text = Drupal.t('Tray @action.', { '@action': action });
+        }
+        Drupal.announce(text);
+      },
+    },
+  );
+})(Backbone, Drupal);

core/modules/toolbar/js/views/ToolbarVisualView.js

@@ -0,0 +1,396 @@
+/**
+ * @file
+ * A Backbone view for the toolbar element. Listens to mouse & touch.
+ */
+
+(function ($, Drupal, drupalSettings, Backbone) {
+  Drupal.toolbar.ToolbarVisualView = Backbone.View.extend(
+    /** @lends Drupal.toolbar.ToolbarVisualView# */ {
+      /**
+       * Event map for the `ToolbarVisualView`.
+       *
+       * @return {object}
+       *   A map of events.
+       */
+      events() {
+        // Prevents delay and simulated mouse events.
+        const touchEndToClick = function (event) {
+          event.preventDefault();
+          event.target.click();
+        };
+
+        return {
+          'click .toolbar-bar .toolbar-tab .trigger': 'onTabClick',
+          'click .toolbar-toggle-orientation button':
+            'onOrientationToggleClick',
+          'touchend .toolbar-bar .toolbar-tab .trigger': touchEndToClick,
+          'touchend .toolbar-toggle-orientation button': touchEndToClick,
+        };
+      },
+
+      /**
+       * Backbone view for the toolbar element. Listens to mouse & touch.
+       *
+       * @constructs
+       *
+       * @augments Backbone.View
+       *
+       * @param {object} options
+       *   Options for the view object.
+       * @param {object} options.strings
+       *   Various strings to use in the view.
+       */
+      initialize(options) {
+        this.strings = options.strings;
+
+        this.listenTo(
+          this.model,
+          'change:activeTab change:orientation change:isOriented change:isTrayToggleVisible',
+          this.render,
+        );
+        this.listenTo(this.model, 'change:mqMatches', this.onMediaQueryChange);
+        this.listenTo(this.model, 'change:offsets', this.adjustPlacement);
+        this.listenTo(
+          this.model,
+          'change:activeTab change:orientation change:isOriented',
+          this.updateToolbarHeight,
+        );
+
+        // Add the tray orientation toggles, but only if there is a menu.
+        this.$el
+          .find('.toolbar-tray .toolbar-lining')
+          .has('.toolbar-menu')
+          .append(Drupal.theme('toolbarOrientationToggle'));
+
+        // Trigger an activeTab change so that listening scripts can respond on
+        // page load. This will call render.
+        this.model.trigger('change:activeTab');
+      },
+
+      /**
+       * Update the toolbar element height.
+       *
+       * @constructs
+       *
+       * @augments Backbone.View
+       */
+      updateToolbarHeight() {
+        const toolbarTabOuterHeight =
+          $('#toolbar-bar').find('.toolbar-tab').outerHeight() || 0;
+        const toolbarTrayHorizontalOuterHeight =
+          $('.is-active.toolbar-tray-horizontal').outerHeight() || 0;
+        this.model.set(
+          'height',
+          toolbarTabOuterHeight + toolbarTrayHorizontalOuterHeight,
+        );
+
+        $('body')[0].style.paddingTop = `${this.model.get('height')}px`;
+        $('html')[0].style.scrollPaddingTop = `${this.model.get('height')}px`;
+
+        this.triggerDisplace();
+      },
+
+      // Trigger a recalculation of viewport displacing elements. Use setTimeout
+      // to ensure this recalculation happens after changes to visual elements
+      // have processed.
+      triggerDisplace() {
+        _.defer(() => {
+          Drupal.displace(true);
+        });
+      },
+
+      /**
+       * {@inheritdoc}
+       *
+       * @return {Drupal.toolbar.ToolbarVisualView}
+       *   The `ToolbarVisualView` instance.
+       */
+      render() {
+        this.updateTabs();
+        this.updateTrayOrientation();
+        this.updateBarAttributes();
+
+        $('[data-toolbar-anti-flicker-loading]').remove();
+        $('html').removeClass([
+          'toolbar-loading',
+          'toolbar-horizontal',
+          'toolbar-vertical',
+          'toolbar-tray-open',
+          'toolbar-fixed',
+          'toolbar-oriented',
+          'toolbar-anti-flicker',
+        ]);
+        $('body').removeClass('toolbar-loading');
+
+        // Load the subtrees if the orientation of the toolbar is changed to
+        // vertical. This condition responds to the case that the toolbar switches
+        // from horizontal to vertical orientation. The toolbar starts in a
+        // vertical orientation by default and then switches to horizontal during
+        // initialization if the media query conditions are met. Simply checking
+        // that the orientation is vertical here would result in the subtrees
+        // always being loaded, even when the toolbar initialization ultimately
+        // results in a horizontal orientation.
+        //
+        // @see Drupal.behaviors.toolbar.attach() where admin menu subtrees
+        // loading is invoked during initialization after media query conditions
+        // have been processed.
+        if (
+          this.model.changed.orientation === 'vertical' ||
+          this.model.changed.activeTab
+        ) {
+          this.loadSubtrees();
+        }
+
+        return this;
+      },
+
+      /**
+       * Responds to a toolbar tab click.
+       *
+       * @param {jQuery.Event} event
+       *   The event triggered.
+       */
+      onTabClick(event) {
+        // If this tab has a tray associated with it, it is considered an
+        // activatable tab.
+        if (event.currentTarget.hasAttribute('data-toolbar-tray')) {
+          const activeTab = this.model.get('activeTab');
+          const clickedTab = event.currentTarget;
+
+          // Set the event target as the active item if it is not already.
+          this.model.set(
+            'activeTab',
+            !activeTab || clickedTab !== activeTab ? clickedTab : null,
+          );
+
+          event.preventDefault();
+          event.stopPropagation();
+        }
+      },
+
+      /**
+       * Toggles the orientation of a toolbar tray.
+       *
+       * @param {jQuery.Event} event
+       *   The event triggered.
+       */
+      onOrientationToggleClick(event) {
+        const orientation = this.model.get('orientation');
+        // Determine the toggle-to orientation.
+        const antiOrientation =
+          orientation === 'vertical' ? 'horizontal' : 'vertical';
+        const locked = antiOrientation === 'vertical';
+        // Remember the locked state.
+        if (locked) {
+          localStorage.setItem('Drupal.toolbar.trayVerticalLocked', 'true');
+        } else {
+          localStorage.removeItem('Drupal.toolbar.trayVerticalLocked');
+        }
+        // Update the model.
+        this.model.set(
+          {
+            locked,
+            orientation: antiOrientation,
+          },
+          {
+            validate: true,
+            override: true,
+          },
+        );
+
+        event.preventDefault();
+        event.stopPropagation();
+      },
+
+      /**
+       * Updates the display of the tabs: toggles a tab and the associated tray.
+       */
+      updateTabs() {
+        const $tab = $(this.model.get('activeTab'));
+        // Deactivate the previous tab.
+        $(this.model.previous('activeTab'))
+          .removeClass('is-active')
+          .prop('aria-pressed', false);
+        // Deactivate the previous tray.
+        $(this.model.previous('activeTray')).removeClass('is-active');
+
+        // The stored active tab is removed as updateTabs() can be called when
+        // a tray is explicitly closed, thus not replaced with a new active tab.
+        localStorage.removeItem('Drupal.toolbar.activeTabID');
+        // Activate the selected tab.
+        if ($tab.length > 0) {
+          $tab
+            .addClass('is-active')
+            // Mark the tab as pressed.
+            .prop('aria-pressed', true);
+          const name = $tab.attr('data-toolbar-tray');
+          // Store the active tab name or remove the setting.
+          const id = $tab.get(0).id;
+          if (id) {
+            localStorage.setItem(
+              'Drupal.toolbar.activeTabID',
+              JSON.stringify(id),
+            );
+          }
+          // Activate the associated tray.
+          const $tray = this.$el.find(
+            `[data-toolbar-tray="${name}"].toolbar-tray`,
+          );
+          if ($tray.length) {
+            $tray.addClass('is-active');
+            this.model.set('activeTray', $tray.get(0));
+          } else {
+            // There is no active tray.
+            this.model.set('activeTray', null);
+          }
+        } else {
+          // There is no active tray.
+          this.model.set('activeTray', null);
+          localStorage.removeItem('Drupal.toolbar.activeTabID');
+        }
+      },
+
+      /**
+       * Update the attributes of the toolbar bar element.
+       */
+      updateBarAttributes() {
+        const isOriented = this.model.get('isOriented');
+        if (isOriented) {
+          this.$el.find('.toolbar-bar').attr('data-offset-top', '');
+        } else {
+          this.$el.find('.toolbar-bar').removeAttr('data-offset-top');
+        }
+        // Toggle between a basic vertical view and a more sophisticated
+        // horizontal and vertical display of the toolbar bar and trays.
+        this.$el.toggleClass('toolbar-oriented', isOriented);
+      },
+
+      /**
+       * Updates the orientation of the active tray if necessary.
+       */
+      updateTrayOrientation() {
+        const orientation = this.model.get('orientation');
+
+        // The antiOrientation is used to render the view of action buttons like
+        // the tray orientation toggle.
+        const antiOrientation =
+          orientation === 'vertical' ? 'horizontal' : 'vertical';
+
+        // Toggle toolbar's parent classes before other toolbar classes to avoid
+        // potential flicker and re-rendering.
+        $('body')
+          .toggleClass('toolbar-vertical', orientation === 'vertical')
+          .toggleClass('toolbar-horizontal', orientation === 'horizontal');
+
+        const removeClass =
+          antiOrientation === 'horizontal'
+            ? 'toolbar-tray-horizontal'
+            : 'toolbar-tray-vertical';
+        const $trays = this.$el
+          .find('.toolbar-tray')
+          .removeClass(removeClass)
+          .addClass(`toolbar-tray-${orientation}`);
+
+        // Update the tray orientation toggle button.
+        const iconClass = `toolbar-icon-toggle-${orientation}`;
+        const iconAntiClass = `toolbar-icon-toggle-${antiOrientation}`;
+        const $orientationToggle = this.$el
+          .find('.toolbar-toggle-orientation')
+          .toggle(this.model.get('isTrayToggleVisible'));
+        const $orientationToggleButton = $orientationToggle.find('button');
+        $orientationToggleButton[0].value = antiOrientation;
+        $orientationToggleButton
+          .attr('title', this.strings[antiOrientation])
+          .removeClass(iconClass)
+          .addClass(iconAntiClass);
+        $orientationToggleButton[0].textContent = this.strings[antiOrientation];
+
+        // Update data offset attributes for the trays.
+        const dir = document.documentElement.dir;
+        const edge = dir === 'rtl' ? 'right' : 'left';
+        // Remove data-offset attributes from the trays so they can be refreshed.
+        $trays.removeAttr('data-offset-left data-offset-right data-offset-top');
+        // If an active vertical tray exists, mark it as an offset element.
+        $trays
+          .filter('.toolbar-tray-vertical.is-active')
+          .attr(`data-offset-${edge}`, '');
+        // If an active horizontal tray exists, mark it as an offset element.
+        $trays
+          .filter('.toolbar-tray-horizontal.is-active')
+          .attr('data-offset-top', '');
+      },
+
+      /**
+       * Sets the tops of the trays so that they align with the bottom of the bar.
+       */
+      adjustPlacement() {
+        const $trays = this.$el.find('.toolbar-tray');
+        if (!this.model.get('isOriented')) {
+          $trays
+            .removeClass('toolbar-tray-horizontal')
+            .addClass('toolbar-tray-vertical');
+        }
+      },
+
+      /**
+       * Calls the endpoint URI that builds an AJAX command with the rendered
+       * subtrees.
+       *
+       * The rendered admin menu subtrees HTML is cached on the client in
+       * localStorage until the cache of the admin menu subtrees on the server-
+       * side is invalidated. The subtreesHash is stored in localStorage as well
+       * and compared to the subtreesHash in drupalSettings to determine when the
+       * admin menu subtrees cache has been invalidated.
+       */
+      loadSubtrees() {
+        const $activeTab = $(this.model.get('activeTab'));
+        const orientation = this.model.get('orientation');
+        // Only load and render the admin menu subtrees if:
+        //   (1) They have not been loaded yet.
+        //   (2) The active tab is the administration menu tab, indicated by the
+        //       presence of the data-drupal-subtrees attribute.
+        //   (3) The orientation of the tray is vertical.
+        if (
+          !this.model.get('areSubtreesLoaded') &&
+          typeof $activeTab.data('drupal-subtrees') !== 'undefined' &&
+          orientation === 'vertical'
+        ) {
+          const subtreesHash = drupalSettings.toolbar.subtreesHash;
+          const theme = drupalSettings.ajaxPageState.theme;
+          const endpoint = Drupal.url(`toolbar/subtrees/${subtreesHash}`);
+          const cachedSubtreesHash = localStorage.getItem(
+            `Drupal.toolbar.subtreesHash.${theme}`,
+          );
+          const cachedSubtrees = JSON.parse(
+            localStorage.getItem(`Drupal.toolbar.subtrees.${theme}`),
+          );
+          const isVertical = this.model.get('orientation') === 'vertical';
+          // If we have the subtrees in localStorage and the subtree hash has not
+          // changed, then use the cached data.
+          if (
+            isVertical &&
+            subtreesHash === cachedSubtreesHash &&
+            cachedSubtrees
+          ) {
+            Drupal.toolbar.setSubtrees.resolve(cachedSubtrees);
+          }
+          // Only make the call to get the subtrees if the orientation of the
+          // toolbar is vertical.
+          else if (isVertical) {
+            // Remove the cached menu information.
+            localStorage.removeItem(`Drupal.toolbar.subtreesHash.${theme}`);
+            localStorage.removeItem(`Drupal.toolbar.subtrees.${theme}`);
+            // The AJAX response's command will trigger the resolve method of the
+            // Drupal.toolbar.setSubtrees Promise.
+            Drupal.ajax({ url: endpoint }).execute();
+            // Cache the hash for the subtrees locally.
+            localStorage.setItem(
+              `Drupal.toolbar.subtreesHash.${theme}`,
+              subtreesHash,
+            );
+          }
+        }
+      },
+    },
+  );
+})(jQuery, Drupal, drupalSettings, Backbone);