@openeuropa/bcl-theme-default 1.10.5 → 1.10.6

package/js/oe-bcl-default.esm.js

@@ -2673,6 +2673,191 @@ enableDismissTrigger(Modal);
 
 defineJQueryPlugin$1(Modal);
 
+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 offcanvas.js
@@ -5066,5 +5251,5 @@ class AccessibleToggle {
   }
 }
 
-export { AccessibleToggle, AccordionToggle, Alert, Button, Carousel, Collapse, Dropdown, Gallery, Modal, Offcanvas, Popover, ScrollSpy, ScrollSpy$1 as ScrollSpyV2, Tab, Toast, Tooltip };
+export { AccessibleToggle, AccordionToggle, Alert, Button, Carousel, Collapse, Dropdown, Gallery, MainNavigation, MegaMenu, Modal, Offcanvas, Popover, ScrollSpy, ScrollSpy$1 as ScrollSpyV2, Tab, Toast, Tooltip };
 //# sourceMappingURL=oe-bcl-default.esm.js.map