Initial Drupal 11 with DDEV setup

web/core/modules/toolbar/js/toolbar.menu.js

@@ -0,0 +1,256 @@
+/**
+ * @file
+ * Builds a nested accordion widget.
+ *
+ * Invoke on an HTML list element with the jQuery plugin pattern.
+ *
+ * @example
+ * $('.toolbar-menu').drupalToolbarMenu();
+ */
+
+(function ($, Drupal, drupalSettings) {
+  /**
+   * Store the open menu tray.
+   */
+  let activeItem = Drupal.url(drupalSettings.path.currentPath);
+
+  /**
+   * Maintains active tab in horizontal orientation.
+   */
+  $.fn.drupalToolbarMenuHorizontal = function () {
+    let currentPath = drupalSettings.path.currentPath;
+    const menu = once('toolbar-menu-horizontal', this);
+    if (menu.length) {
+      const $menu = $(menu);
+      if (activeItem) {
+        const count = currentPath.split('/').length;
+        // Find the deepest link with its parent info and start
+        // marking active.
+        for (let i = 0; i < count; i++) {
+          const $menuItem = $menu.find(
+            `a[data-drupal-link-system-path="${currentPath}"]`,
+          );
+          if ($menuItem.length !== 0) {
+            $menuItem.closest('a').addClass('is-active');
+            break;
+          }
+          const lastIndex = currentPath.lastIndexOf('/');
+          currentPath = currentPath.slice(0, lastIndex);
+        }
+      }
+    }
+  };
+
+  $.fn.drupalToolbarMenu = function () {
+    const ui = {
+      handleOpen: Drupal.t('Extend'),
+      handleClose: Drupal.t('Collapse'),
+    };
+
+    /**
+     * Toggle the open/close state of a list is a menu.
+     *
+     * @param {jQuery} $item
+     *   The li item to be toggled.
+     *
+     * @param {Boolean} switcher
+     *   A flag that forces toggleClass to add or a remove a class, rather than
+     *   simply toggling its presence.
+     */
+    function toggleList($item, switcher) {
+      const $toggle = $item
+        .children('.toolbar-box')
+        .children('.toolbar-handle');
+      switcher =
+        typeof switcher !== 'undefined' ? switcher : !$item.hasClass('open');
+      // Toggle the item open state.
+      $item.toggleClass('open', switcher);
+      // Twist the toggle.
+      $toggle.toggleClass('open', switcher);
+      // Adjust the toggle text.
+      $toggle.find('.action').each((index, element) => {
+        // Expand Structure, Collapse Structure.
+        element.textContent = switcher ? ui.handleClose : ui.handleOpen;
+      });
+    }
+
+    /**
+     * Handle clicks from the disclosure button on an item with sub-items.
+     *
+     * @param {Object} event
+     *   A jQuery Event object.
+     */
+    function toggleClickHandler(event) {
+      const $toggle = $(event.target);
+      const $item = $toggle.closest('li');
+      // Toggle the list item.
+      toggleList($item);
+      // Close open sibling menus.
+      const $openItems = $item.siblings().filter('.open');
+      toggleList($openItems, false);
+    }
+
+    /**
+     * Handle clicks from a menu item link.
+     *
+     * @param {Object} event
+     *   A jQuery Event object.
+     */
+    function linkClickHandler(event) {
+      // If the toolbar is positioned fixed (and therefore hiding content
+      // underneath), then users expect clicks in the administration menu tray
+      // to take them to that destination but for the menu tray to be closed
+      // after clicking: otherwise the toolbar itself is obstructing the view
+      // of the destination they chose.
+      if (!Drupal.toolbar.models.toolbarModel.get('isFixed')) {
+        Drupal.toolbar.models.toolbarModel.set('activeTab', null);
+      }
+      // Stopping propagation to make sure that once a toolbar-box is clicked
+      // (the whitespace part), the page is not redirected anymore.
+      event.stopPropagation();
+    }
+
+    /**
+     * Add markup to the menu elements.
+     *
+     * Items with sub-elements have a list toggle attached to them. Menu item
+     * links and the corresponding list toggle are wrapped with in a div
+     * classed with .toolbar-box. The .toolbar-box div provides a positioning
+     * context for the item list toggle.
+     *
+     * @param {jQuery} $menu
+     *   The root of the menu to be initialized.
+     */
+    function initItems($menu) {
+      const options = {
+        class: 'toolbar-icon toolbar-handle',
+        action: ui.handleOpen,
+        text: '',
+      };
+      // Initialize items and their links.
+      $menu.find('li > a').wrap('<div class="toolbar-box">');
+      // Add a handle to each list item if it has a menu.
+      $menu.find('li').each((index, element) => {
+        const $item = $(element);
+        if ($item.children('ul.toolbar-menu').length) {
+          const $box = $item.children('.toolbar-box');
+          const $link = $box.find('a');
+          options.text = Drupal.t('@label', {
+            '@label': $link.length ? $link[0].textContent : '',
+          });
+          $item
+            .children('.toolbar-box')
+            .append(
+              $(Drupal.theme('toolbarMenuItemToggle', options))
+                .hide()
+                .fadeIn(150),
+            );
+        }
+      });
+    }
+
+    /**
+     * Adds a level class to each list based on its depth in the menu.
+     *
+     * This function is called recursively on each sub level of lists elements
+     * until the depth of the menu is exhausted.
+     *
+     * @param {jQuery} $lists
+     *   A jQuery object of ul elements.
+     *
+     * @param {number} level
+     *   The current level number to be assigned to the list elements.
+     */
+    function markListLevels($lists, level) {
+      level = !level ? 1 : level;
+      const $lis = $lists.children('li').addClass(`level-${level}`);
+      $lists = $lis.children('ul');
+      if ($lists.length) {
+        markListLevels($lists, level + 1);
+      }
+    }
+
+    /**
+     * On page load, open the active menu item.
+     *
+     * Marks the trail of the active link in the menu back to the root of the
+     * menu with .menu-item--active-trail.
+     *
+     * @param {jQuery} $menu
+     *   The root of the menu.
+     */
+    function openActiveItem($menu) {
+      let currentPath = drupalSettings.path.currentPath;
+      const pathItem = $menu.find(`a[href="${window.location.pathname}"]`);
+      if (pathItem.length && !activeItem) {
+        activeItem = window.location.pathname;
+      }
+      if (activeItem) {
+        const $activeItem = $menu
+          .find(`a[href="${activeItem}"]`)
+          .addClass('menu-item--active');
+        if (pathItem.length === 0 && activeItem) {
+          const count = currentPath.split('/').length;
+          // Find the deepest link with its parent info and start
+          // marking active.
+          for (let i = 0; i < count; i++) {
+            const $menuItem = $menu.find(
+              `a[data-drupal-link-system-path="${currentPath}"]`,
+            );
+            if ($menuItem.length !== 0) {
+              const $activeTrail = $menuItem
+                .parentsUntil('.root', 'li')
+                .addClass('menu-item--active-trail');
+              toggleList($activeTrail, true);
+              break;
+            }
+            const lastIndex = currentPath.lastIndexOf('/');
+            currentPath = currentPath.slice(0, lastIndex);
+          }
+        } else {
+          const $activeTrail = $activeItem
+            .parentsUntil('.root', 'li')
+            .addClass('menu-item--active-trail');
+          toggleList($activeTrail, true);
+        }
+      }
+    }
+
+    // Return the jQuery object.
+    return this.each(function (selector) {
+      const menu = once('toolbar-menu-vertical', this);
+      if (menu.length) {
+        const $menu = $(menu);
+        // Bind event handlers.
+        $menu
+          .on('click.toolbar', '.toolbar-box', toggleClickHandler)
+          .on('click.toolbar', '.toolbar-box a', linkClickHandler);
+
+        $menu.addClass('root');
+        initItems($menu);
+        markListLevels($menu);
+        // Restore previous and active states.
+        openActiveItem($menu);
+      }
+    });
+  };
+
+  /**
+   * A toggle is an interactive element often bound to a click handler.
+   *
+   * @param {object} options
+   *   Options for the button.
+   * @param {string} options.class
+   *   Class to set on the button.
+   * @param {string} options.action
+   *   Action for the button.
+   * @param {string} options.text
+   *   Used as label for the button.
+   *
+   * @return {string}
+   *   A string representing a DOM fragment.
+   */
+  Drupal.theme.toolbarMenuItemToggle = function (options) {
+    return `<button class="${options.class}"><span class="action">${options.action}</span> <span class="label">${options.text}</span></button>`;
+  };
+})(jQuery, Drupal, drupalSettings);