@openeuropa/bcl-theme-joinup 1.10.5 → 1.10.7

package/js/oe-bcl-joinup.umd.js

@@ -4834,6 +4834,191 @@
     }
   }
 
+  class MainNavigation {
+    constructor(toggler) {
+      this.toggler = toggler;
+      this.top = 0;
+      this.target = this.getTargetFromToggler(toggler);
+      if (!this.target) return;
+      this.addListeners();
+    }
+    getTargetFromToggler(toggler) {
+      const selector = toggler.getAttribute("data-bs-target");
+      if (!selector) return null;
+      try {
+        return document.querySelector(selector);
+      } catch {
+        return null;
+      }
+    }
+    addListeners() {
+      EventHandler.on(this.target, "show.bs.collapse", () => {
+        window.scrollTo(0, this.top);
+      });
+    }
+    static init(selector = ".bcl-toggler", options) {
+      const togglers = SelectorEngine.find(selector);
+      togglers.forEach(toggler => new MainNavigation(toggler, options));
+    }
+  }
+  document.addEventListener("DOMContentLoaded", () => {
+    // Run for all .bcl-toggler buttons
+    MainNavigation.init(".bcl-navbar-toggler");
+  });
+
+  class MegaMenu {
+    constructor(root) {
+      this.root = root;
+      this.backButton = SelectorEngine.findOne(".back-button", this.root);
+      this.trigger = SelectorEngine.findOne(':scope > .dropdown-toggle[data-bs-toggle="dropdown"]', this.root);
+      this.ul = SelectorEngine.findOne('.bcl-mega-menu__items.__level-1', this.root);
+      this.addSubmenuTriggerListeners();
+      this.addBackButtonListener();
+      this.addTriggerListeners();
+      this.addEscapeKeyHandler();
+    }
+    getPanelForTrigger(trigger) {
+      const id = trigger.getAttribute('aria-controls');
+      return id ? document.getElementById(id) : null;
+    }
+    getFocusableChildren(container) {
+      if (!container) return [];
+      return Array.from(container.querySelectorAll('a[href], button:not([disabled]):not(.back-button), [tabindex]:not([tabindex="-1"])')).filter(el => !el.hasAttribute('disabled') && el.tabIndex !== -1);
+    }
+    focusFirstItemInPanel(trigger) {
+      const panel = this.getPanelForTrigger(trigger);
+      if (!panel) return;
+      const list = SelectorEngine.findOne('ul.bcl-mega-menu__items', panel);
+      if (!list) return;
+      const first = this.getFocusableChildren(list)[0];
+      if (first) first.focus();
+    }
+    addEscapeKeyHandler() {
+      // Bootstrap attaches its dropdown keydown listener on `document` in the capture phase.
+      // By listening on `window` in the capture phase, our handler runs *before* Bootstrap’s.
+      // This lets us intercept Esc inside mega menu submenus and stop Bootstrap from closing
+      // the entire dropdown.
+      window.addEventListener('keydown', e => {
+        if (e.key !== 'Escape') return;
+
+        // Only act if Esc originated inside THIS mega menu's open submenu
+        const panel = e.target.closest('.bcl-mega-menu__submenu');
+        if (!panel || panel.hidden || !this.root.contains(panel)) {
+          // Not our submenu: let Bootstrap handle it normally
+          return;
+        }
+
+        // Stop the event BEFORE it reaches Bootstrap's document-capture handler
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        e.stopPropagation();
+
+        // Close only this submenu and focus its trigger
+        const triggerId = panel.getAttribute('aria-labelledby');
+        const trigger = triggerId ? document.getElementById(triggerId) : null;
+        if (trigger) {
+          this.closeSubmenu(trigger);
+          trigger.focus();
+        }
+      }, true);
+    }
+    addTriggerListeners() {
+      if (!this.trigger) return;
+
+      // When the mega menu is opened, focus the first item in the menu.
+      EventHandler.on(this.trigger, 'shown.bs.dropdown', () => {
+        const panelId = this.trigger.getAttribute('aria-controls');
+        const panel = panelId ? document.getElementById(panelId) : null;
+        const firstFocusable = panel ? this.getFocusableChildren(panel)[0] : null;
+        if (firstFocusable) firstFocusable.focus();
+      });
+
+      // When the mega menu is closed, close all submenus.
+      EventHandler.on(this.trigger, 'hide.bs.dropdown', () => {
+        this.closeAllSubmenus();
+      });
+    }
+    addSubmenuTriggerListeners() {
+      // Clicking/activating a parent item button toggles the submenu.
+      SelectorEngine.find(':scope li > button[aria-expanded]', this.root).forEach(trigger => {
+        EventHandler.on(trigger, "click", () => {
+          const expanded = trigger.getAttribute('aria-expanded') === 'true';
+          if (expanded) {
+            // Close this submenu.
+            this.closeSubmenu(trigger);
+          } else {
+            this.openSubmenu(trigger);
+            // The back button is only visible in mobile / narrow viewport.
+            if (this.backButton && this.backButton.offsetParent !== null) {
+              this.backButton.focus();
+            } else {
+              this.focusFirstItemInPanel(trigger);
+            }
+          }
+        });
+      });
+    }
+    addBackButtonListener() {
+      // Clicking a back button closes the submenu or the menu itself.
+      if (!this.backButton) {
+        return;
+      }
+      EventHandler.on(this.backButton, "click", () => {
+        const submenusThatWereOpen = this.closeAllSubmenus();
+        if (submenusThatWereOpen.length > 0) {
+          // Focus the submenu trigger, to allow quick reopen by keystroke.
+          submenusThatWereOpen[0].focus();
+          return;
+        }
+        // Close the mega menu itself.
+        if (this.trigger) {
+          // Close using the Bootstrap dropdown API.
+          Dropdown.getOrCreateInstance(this.trigger).hide();
+          // Focus the main trigger, to allow quick reopen by keystroke.
+          this.trigger.focus();
+        }
+      });
+    }
+    openSubmenu(trigger) {
+      // Close all submenus, then open the current submenu.
+      this.closeAllSubmenus();
+      trigger.setAttribute('aria-expanded', 'true');
+      const panel = this.getPanelForTrigger(trigger);
+      if (panel) panel.hidden = false;
+    }
+
+    /**
+     * Closes all submenus.
+     *
+     * This is simple while there is only one submenu level.
+     *
+     * @returns {HTMLElement[]}
+     *   Triggers for submenus that were closed.
+     *   Usually this is either exactly one, or none.
+     */
+    closeAllSubmenus() {
+      if (!this.ul) {
+        return;
+      }
+      const triggers = SelectorEngine.find(':scope > li > button[aria-expanded="true"]', this.ul);
+      // Use arrow fn to keep `this` bound.
+      triggers.forEach(t => this.closeSubmenu(t));
+      return triggers;
+    }
+    closeSubmenu(trigger) {
+      trigger.setAttribute('aria-expanded', 'false');
+      const panel = this.getPanelForTrigger(trigger);
+      if (panel) panel.hidden = true;
+    }
+    static init(selector = ".bcl-mega-menu") {
+      const megaMenus = SelectorEngine.find(selector);
+      megaMenus.forEach(menuEl => new MegaMenu(menuEl));
+    }
+  }
+  document.addEventListener("DOMContentLoaded", () => {
+    MegaMenu.init();
+  });
+
   /**
    * --------------------------------------------------------------------------
    * Bootstrap util/sanitizer.js
@@ -6748,6 +6933,8 @@
     Dropdown,
     Gallery,
     Modal,
+    MainNavigation,
+    MegaMenu,
     AccessibleToggle,
     AccordionToggle,
     Offcanvas,