mega-menu.js

  1. /* eslint-disable  class-methods-use-this */
  3. import { queryOne, queryAll } from '@ecl/dom-utils';
  4. import EventManager from '@ecl/event-manager';
  5. import isMobile from 'mobile-device-detect';
  6. import { createFocusTrap } from 'focus-trap';
  8. /**
  9.  * @param {HTMLElement} element DOM element for component instantiation and scope
  10.  * @param {Object} options
  11.  * @param {String} options.openSelector Selector for the hamburger button
  12.  * @param {String} options.backSelector Selector for the back button
  13.  * @param {String} options.innerSelector Selector for the menu inner
  14.  * @param {String} options.itemSelector Selector for the menu item
  15.  * @param {String} options.linkSelector Selector for the menu link
  16.  * @param {String} options.subLinkSelector Selector for the menu sub link
  17.  * @param {String} options.megaSelector Selector for the mega menu
  18.  * @param {String} options.subItemSelector Selector for the menu sub items
  19.  * @param {String} options.labelOpenAttribute The data attribute for open label
  20.  * @param {String} options.labelCloseAttribute The data attribute for close label
  21.  * @param {Boolean} options.attachClickListener Whether or not to bind click events
  22.  * @param {Boolean} options.attachHoverListener Whether or not to bind hover events
  23.  * @param {Boolean} options.attachFocusListener Whether or not to bind focus events
  24.  * @param {Boolean} options.attachKeyListener Whether or not to bind keyboard events
  25.  * @param {Boolean} options.attachResizeListener Whether or not to bind resize events
  26.  */
  27. export class MegaMenu {
  28.   /**
  29.    * @static
  30.    * Shorthand for instance creation and initialisation.
  31.    *
  32.    * @param {HTMLElement} root DOM element for component instantiation and scope
  33.    *
  34.    * @return {Menu} An instance of Menu.
  35.    */
  36.   static autoInit(root, { MEGA_MENU: defaultOptions = {} } = {}) {
  37.     const megaMenu = new MegaMenu(root, defaultOptions);
  38.     megaMenu.init();
  39.     root.ECLMegaMenu = megaMenu;
  40.     return megaMenu;
  41.   }
  43.   /**
  44.    *   @event MegaMenu#onOpen
  45.    */
  46.   /**
  47.    *   @event MegaMenu#onClose
  48.    */
  49.   /**
  50.    *   @event MegaMenu#onOpenPanel
  51.    */
  52.   /**
  53.    *   @event MegaMenu#onBack
  54.    */
  55.   /**
  56.    *   @event MegaMenu#onItemClick
  57.    */
  58.   /**
  59.    *   @event MegaMenu#onFocusTrapToggle
  60.    */
  62.   /**
  63.    * An array of supported events for this component.
  64.    *
  65.    * @type {Array<string>}
  66.    * @memberof MegaMenu
  67.    */
  68.   supportedEvents = ['onOpen', 'onClose'];
  70.   constructor(
  71.     element,
  72.     {
  73.       openSelector = '[data-ecl-mega-menu-open]',
  74.       backSelector = '[data-ecl-mega-menu-back]',
  75.       innerSelector = '[data-ecl-mega-menu-inner]',
  76.       itemSelector = '[data-ecl-mega-menu-item]',
  77.       linkSelector = '[data-ecl-mega-menu-link]',
  78.       subLinkSelector = '[data-ecl-mega-menu-sublink]',
  79.       megaSelector = '[data-ecl-mega-menu-mega]',
  80.       containerSelector = '[data-ecl-has-container]',
  81.       subItemSelector = '[data-ecl-mega-menu-subitem]',
  82.       featuredAttribute = '[data-ecl-mega-menu-featured]',
  83.       featuredLinkAttribute = '[data-ecl-mega-menu-featured-link]',
  84.       labelOpenAttribute = 'data-ecl-mega-menu-label-open',
  85.       labelCloseAttribute = 'data-ecl-mega-menu-label-close',
  86.       attachClickListener = true,
  87.       attachFocusListener = true,
  88.       attachKeyListener = true,
  89.       attachResizeListener = true,
  90.     } = {},
  91.   ) {
  92.     // Check element
  93.     if (!element || element.nodeType !== Node.ELEMENT_NODE) {
  94.       throw new TypeError(
  95.         'DOM element should be given to initialize this widget.',
  96.       );
  97.     }
  99.     this.element = element;
  100.     this.eventManager = new EventManager();
  102.     // Options
  103.     this.openSelector = openSelector;
  104.     this.backSelector = backSelector;
  105.     this.innerSelector = innerSelector;
  106.     this.itemSelector = itemSelector;
  107.     this.linkSelector = linkSelector;
  108.     this.subLinkSelector = subLinkSelector;
  109.     this.megaSelector = megaSelector;
  110.     this.subItemSelector = subItemSelector;
  111.     this.containerSelector = containerSelector;
  112.     this.labelOpenAttribute = labelOpenAttribute;
  113.     this.labelCloseAttribute = labelCloseAttribute;
  114.     this.attachClickListener = attachClickListener;
  115.     this.attachFocusListener = attachFocusListener;
  116.     this.attachKeyListener = attachKeyListener;
  117.     this.attachResizeListener = attachResizeListener;
  118.     this.featuredAttribute = featuredAttribute;
  119.     this.featuredLinkAttribute = featuredLinkAttribute;
  121.     // Private variables
  122.     this.direction = 'ltr';
  123.     this.open = null;
  124.     this.toggleLabel = null;
  125.     this.back = null;
  126.     this.backItemLevel1 = null;
  127.     this.backItemLevel2 = null;
  128.     this.inner = null;
  129.     this.items = null;
  130.     this.links = null;
  131.     this.isOpen = false;
  132.     this.resizeTimer = null;
  133.     this.isKeyEvent = false;
  134.     this.isDesktop = false;
  135.     this.isLarge = false;
  136.     this.lastVisibleItem = null;
  137.     this.currentItem = null;
  138.     this.totalItemsWidth = 0;
  139.     this.breakpointL = 996;
  140.     this.openPanel = { num: 0, item: {} };
  141.     this.infoLinks = null;
  142.     this.seeAllLinks = null;
  143.     this.featuredLinks = null;
  145.     // Bind `this` for use in callbacks
  146.     this.handleClickOnOpen = this.handleClickOnOpen.bind(this);
  147.     this.handleClickOnClose = this.handleClickOnClose.bind(this);
  148.     this.handleClickOnToggle = this.handleClickOnToggle.bind(this);
  149.     this.handleClickOnBack = this.handleClickOnBack.bind(this);
  150.     this.handleClickGlobal = this.handleClickGlobal.bind(this);
  151.     this.handleClickOnItem = this.handleClickOnItem.bind(this);
  152.     this.handleClickOnSubitem = this.handleClickOnSubitem.bind(this);
  153.     this.handleFocusOut = this.handleFocusOut.bind(this);
  154.     this.handleKeyboard = this.handleKeyboard.bind(this);
  155.     this.handleKeyboardGlobal = this.handleKeyboardGlobal.bind(this);
  156.     this.handleResize = this.handleResize.bind(this);
  157.     this.useDesktopDisplay = this.useDesktopDisplay.bind(this);
  158.     this.closeOpenDropdown = this.closeOpenDropdown.bind(this);
  159.     this.checkDropdownHeight = this.checkDropdownHeight.bind(this);
  160.     this.positionMenuOverlay = this.positionMenuOverlay.bind(this);
  161.     this.resetStyles = this.resetStyles.bind(this);
  162.     this.handleFirstPanel = this.handleFirstPanel.bind(this);
  163.     this.handleSecondPanel = this.handleSecondPanel.bind(this);
  164.     this.disableScroll = this.disableScroll.bind(this);
  165.     this.enableScroll = this.enableScroll.bind(this);
  166.   }
  168.   /**
  169.    * Initialise component.
  170.    */
  171.   init() {
  172.     if (!ECL) {
  173.       throw new TypeError('Called init but ECL is not present');
  174.     }
  175.     ECL.components = ECL.components || new Map();
  177.     // Query elements
  178.     this.open = queryOne(this.openSelector, this.element);
  179.     this.back = queryOne(this.backSelector, this.element);
  180.     this.inner = queryOne(this.innerSelector, this.element);
  181.     this.btnPrevious = queryOne(this.buttonPreviousSelector, this.element);
  182.     this.btnNext = queryOne(this.buttonNextSelector, this.element);
  183.     this.items = queryAll(this.itemSelector, this.element);
  184.     this.subItems = queryAll(this.subItemSelector, this.element);
  185.     this.links = queryAll(this.linkSelector, this.element);
  186.     this.header = queryOne('.ecl-site-header', document);
  187.     this.headerBanner = queryOne('.ecl-site-header__banner', document);
  188.     this.headerNotification = queryOne(
  189.       '.ecl-site-header__notification',
  190.       document,
  191.     );
  192.     this.toggleLabel = queryOne('.ecl-button__label', this.open);
  194.     // Check if we should use desktop display (it does not rely only on breakpoints)
  195.     this.isDesktop = this.useDesktopDisplay();
  197.     // Bind click events on buttons
  198.     if (this.attachClickListener) {
  199.       // Open
  200.       if (this.open) {
  201.         this.open.addEventListener('click', this.handleClickOnToggle);
  202.       }
  204.       // Back
  205.       if (this.back) {
  206.         this.back.addEventListener('click', this.handleClickOnBack);
  207.         this.back.addEventListener('keyup', this.handleKeyboard);
  208.       }
  210.       // Global click
  211.       if (this.attachClickListener) {
  212.         document.addEventListener('click', this.handleClickGlobal);
  213.       }
  214.     }
  216.     // Bind event on menu links
  217.     if (this.links) {
  218.       this.links.forEach((link) => {
  219.         if (this.attachFocusListener) {
  220.           link.addEventListener('focusout', this.handleFocusOut);
  221.         }
  222.         if (this.attachKeyListener) {
  223.           link.addEventListener('keyup', this.handleKeyboard);
  224.         }
  225.       });
  226.     }
  228.     // Bind event on sub menu links
  229.     if (this.subItems) {
  230.       this.subItems.forEach((subItem) => {
  231.         const subLink = queryOne('.ecl-mega-menu__sublink', subItem);
  233.         if (this.attachKeyListener && subLink) {
  234.           subLink.addEventListener('click', this.handleClickOnSubitem);
  235.           subLink.addEventListener('keyup', this.handleKeyboard);
  236.         }
  237.         if (this.attachFocusListener && subLink) {
  238.           subLink.addEventListener('focusout', this.handleFocusOut);
  239.         }
  240.       });
  241.     }
  243.     this.infoLinks = queryAll('.ecl-mega-menu__info-link a', this.element);
  244.     if (this.infoLinks.length > 0) {
  245.       this.infoLinks.forEach((infoLink) => {
  246.         if (this.attachKeyListener) {
  247.           infoLink.addEventListener('keyup', this.handleKeyboard);
  248.         }
  249.         if (this.attachFocusListener) {
  250.           infoLink.addEventListener('blur', this.handleFocusOut);
  251.         }
  252.       });
  253.     }
  255.     this.seeAllLinks = queryAll('.ecl-mega-menu__see-all a', this.element);
  256.     if (this.seeAllLinks.length > 0) {
  257.       this.seeAllLinks.forEach((seeAll) => {
  258.         if (this.attachKeyListener) {
  259.           seeAll.addEventListener('keyup', this.handleKeyboard);
  260.         }
  261.         if (this.attachFocusListener) {
  262.           seeAll.addEventListener('blur', this.handleFocusOut);
  263.         }
  264.       });
  265.     }
  267.     this.featuredLinks = queryAll(this.featuredLinkAttribute, this.element);
  268.     if (this.featuredLinks.length > 0 && this.attachFocusListener) {
  269.       this.featuredLinks.forEach((featured) => {
  270.         featured.addEventListener('blur', this.handleFocusOut);
  271.       });
  272.     }
  274.     // Bind global keyboard events
  275.     if (this.attachKeyListener) {
  276.       document.addEventListener('keyup', this.handleKeyboardGlobal);
  277.     }
  279.     // Bind resize events
  280.     if (this.attachResizeListener) {
  281.       window.addEventListener('resize', this.handleResize);
  282.     }
  284.     // Browse first level items
  285.     if (this.items) {
  286.       this.items.forEach((item) => {
  287.         // Check menu item display (right to left, full width, ...)
  288.         this.totalItemsWidth += item.offsetWidth;
  290.         if (
  291.           item.hasAttribute('data-ecl-has-children') ||
  292.           item.hasAttribute('data-ecl-has-container')
  293.         ) {
  294.           // Bind click event on menu links
  295.           const link = queryOne(this.linkSelector, item);
  296.           if (this.attachClickListener && link) {
  297.             link.addEventListener('click', this.handleClickOnItem);
  298.           }
  299.         }
  300.       });
  301.     }
  303.     // Create a focus trap around the menu
  304.     this.focusTrap = createFocusTrap(this.element, {
  305.       onActivate: () =>
  306.         this.element.classList.add('ecl-mega-menu-trap-is-active'),
  307.       onDeactivate: () =>
  308.         this.element.classList.remove('ecl-mega-menu-trap-is-active'),
  309.     });
  311.     this.handleResize();
  312.     // Set ecl initialized attribute
  313.     this.element.setAttribute('data-ecl-auto-initialized', 'true');
  314.     ECL.components.set(this.element, this);
  315.   }
  317.   /**
  318.    * Register a callback function for a specific event.
  319.    *
  320.    * @param {string} eventName - The name of the event to listen for.
  321.    * @param {Function} callback - The callback function to be invoked when the event occurs.
  322.    * @returns {void}
  323.    * @memberof MegaMenu
  324.    * @instance
  325.    *
  326.    * @example
  327.    * // Registering a callback for the 'onOpen' event
  328.    * megaMenu.on('onOpen', (event) => {
  329.    *   console.log('Open event occurred!', event);
  330.    * });
  331.    */
  332.   on(eventName, callback) {
  333.     this.eventManager.on(eventName, callback);
  334.   }
  336.   /**
  337.    * Trigger a component event.
  338.    *
  339.    * @param {string} eventName - The name of the event to trigger.
  340.    * @param {any} eventData - Data associated with the event.
  341.    * @memberof MegaMenu
  342.    */
  343.   trigger(eventName, eventData) {
  344.     this.eventManager.trigger(eventName, eventData);
  345.   }
  347.   /**
  348.    * Destroy component.
  349.    */
  350.   destroy() {
  351.     if (this.attachClickListener) {
  352.       if (this.open) {
  353.         this.open.removeEventListener('click', this.handleClickOnToggle);
  354.       }
  356.       if (this.back) {
  357.         this.back.removeEventListener('click', this.handleClickOnBack);
  358.       }
  360.       if (this.attachClickListener) {
  361.         document.removeEventListener('click', this.handleClickGlobal);
  362.       }
  363.     }
  365.     if (this.links) {
  366.       this.links.forEach((link) => {
  367.         if (this.attachClickListener) {
  368.           link.removeEventListener('click', this.handleClickOnItem);
  369.         }
  370.         if (this.attachFocusListener) {
  371.           link.removeEventListener('focusout', this.handleFocusOut);
  372.         }
  373.         if (this.attachKeyListener) {
  374.           link.removeEventListener('keyup', this.handleKeyboard);
  375.         }
  376.       });
  377.     }
  379.     if (this.subItems) {
  380.       this.subItems.forEach((subItem) => {
  381.         const subLink = queryOne('.ecl-mega-menu__sublink', subItem);
  382.         if (this.attachKeyListener && subLink) {
  383.           subLink.removeEventListener('keyup', this.handleKeyboard);
  384.         }
  385.         if (this.attachClickListener && subLink) {
  386.           subLink.removeEventListener('click', this.handleClickOnSubitem);
  387.         }
  388.         if (this.attachFocusListener && subLink) {
  389.           subLink.removeEventListener('focusout', this.handleFocusOut);
  390.         }
  391.       });
  392.     }
  394.     if (this.infoLinks) {
  395.       this.infoLinks.forEach((infoLink) => {
  396.         if (this.attachFocusListener) {
  397.           infoLink.removeEventListener('blur', this.handleFocusOut);
  398.         }
  399.         if (this.attachKeyListener) {
  400.           infoLink.removeEventListener('keyup', this.handleKeyboard);
  401.         }
  402.       });
  403.     }
  405.     if (this.seeAllLinks) {
  406.       this.seeAllLinks.forEach((seeAll) => {
  407.         if (this.attachFocusListener) {
  408.           seeAll.removeEventListener('blur', this.handleFocusOut);
  409.         }
  410.         if (this.attachKeyListener) {
  411.           seeAll.removeEventListener('keyup', this.handleKeyboard);
  412.         }
  413.       });
  414.     }
  416.     if (this.featuredLinks && this.attachFocusListener) {
  417.       this.featuredLinks.forEach((featuredLink) => {
  418.         featuredLink.removeEventListener('blur', this.handleFocusOut);
  419.       });
  420.     }
  422.     if (this.attachKeyListener) {
  423.       document.removeEventListener('keyup', this.handleKeyboardGlobal);
  424.     }
  426.     if (this.attachResizeListener) {
  427.       window.removeEventListener('resize', this.handleResize);
  428.     }
  430.     this.closeOpenDropdown();
  431.     this.enableScroll();
  433.     if (this.element) {
  434.       this.element.removeAttribute('data-ecl-auto-initialized');
  435.       ECL.components.delete(this.element);
  436.     }
  437.   }
  439.   /**
  440.    * Disable page scrolling
  441.    */
  442.   disableScroll() {
  443.     const scrollBarWidth =
  444.       window.innerWidth - document.documentElement.clientWidth;
  445.     document.body.classList.add('ecl-mega-menu-prevent-scroll');
  446.     document.body.style.paddingRight = `${scrollBarWidth}px`;
  447.   }
  449.   /**
  450.    * Enable page scrolling
  451.    */
  452.   enableScroll() {
  453.     document.body.classList.remove('ecl-mega-menu-prevent-scroll');
  454.     document.body.style.paddingRight = '';
  455.   }
  457.   /**
  458.    * Check if desktop display has to be used
  459.    * - not using a phone or tablet (whatever the screen size is)
  460.    * - not having hamburger menu on screen
  461.    */
  462.   useDesktopDisplay() {
  463.     // Detect mobile devices
  464.     if (isMobile.isMobileOnly) {
  465.       return false;
  466.     }
  468.     // Force mobile display on tablet
  469.     if (isMobile.isTablet) {
  470.       this.element.classList.add('ecl-mega-menu--forced-mobile');
  471.       return false;
  472.     }
  474.     // After all that, check if the hamburger button is displayed
  475.     if (window.innerWidth < this.breakpointL) {
  476.       return false;
  477.     }
  479.     // Everything is fine to use desktop display
  480.     this.element.classList.remove('ecl-mega-menu--forced-mobile');
  481.     return true;
  482.   }
  484.   /**
  485.    * Reset the styles set by the script
  486.    *
  487.    * @param {string} desktop or mobile
  488.    */
  489.   resetStyles(viewport, compact) {
  490.     const infoPanels = queryAll('.ecl-mega-menu__info', this.element);
  491.     const subLists = queryAll('.ecl-mega-menu__sublist', this.element);
  493.     // Remove display:none from the sublists
  494.     if (subLists && viewport === 'mobile') {
  495.       const megaMenus = queryAll(
  496.         '.ecl-mega-menu__item > .ecl-mega-menu__wrapper > .ecl-container > [data-ecl-mega-menu-mega]',
  497.         this.element,
  498.       );
  499.       megaMenus.forEach((menu) => {
  500.         menu.style.height = '';
  501.       });
  503.       // Reset top position and height of the wrappers
  504.       const wrappers = queryAll('.ecl-mega-menu__wrapper', this.element);
  505.       if (wrappers) {
  506.         wrappers.forEach((wrapper) => {
  507.           wrapper.style.top = '';
  508.           wrapper.style.height = '';
  509.         });
  510.       }
  512.       if (this.openPanel.num > 0) {
  513.         if (this.header) {
  514.           if (this.headerBanner) {
  515.             this.headerBanner.style.display = 'none';
  516.           }
  517.           if (this.headerNotification) {
  518.             this.headerNotification.style.display = 'none';
  519.           }
  520.         }
  521.       }
  523.       // Two panels are opened
  524.       if (this.openPanel.num === 2) {
  525.         const subItemExpanded = queryOne(
  526.           '.ecl-mega-menu__subitem--expanded',
  527.           this.element,
  528.         );
  529.         if (subItemExpanded) {
  530.           subItemExpanded.firstChild.classList.add(
  531.             'ecl-mega-menu__parent-link',
  532.           );
  533.         }
  534.         const menuItem = this.openPanel.item;
  535.         // Hide siblings
  536.         const siblings = menuItem.parentNode.childNodes;
  537.         siblings.forEach((sibling) => {
  538.           if (sibling !== menuItem) {
  539.             sibling.style.display = 'none';
  540.           }
  541.         });
  542.       }
  543.     } else if (subLists && viewport === 'desktop' && !compact) {
  544.       // Reset styles for the sublist and subitems
  545.       subLists.forEach((list) => {
  546.         list.classList.remove('ecl-mega-menu__sublist--scrollable');
  547.         list.childNodes.forEach((item) => {
  548.           item.style.display = '';
  549.         });
  550.       });
  552.       infoPanels.forEach((info) => {
  553.         info.style.top = '';
  554.       });
  556.       // Check if we have an open item, if we don't hide the overlay and enable scroll
  557.       const currentItems = [];
  558.       const currentItem = queryOne(
  559.         '.ecl-mega-menu__subitem--expanded',
  560.         this.element,
  561.       );
  562.       if (currentItem) {
  563.         currentItem.firstElementChild.classList.remove(
  564.           'ecl-mega-menu__parent-link',
  565.         );
  566.         currentItems.push(currentItem);
  567.       }
  569.       const currentSubItem = queryOne(
  570.         '.ecl-mega-menu__item--expanded',
  571.         this.element,
  572.       );
  573.       if (currentSubItem) {
  574.         currentItems.push(currentSubItem);
  575.       }
  577.       if (currentItems.length > 0) {
  578.         currentItems.forEach((current) => {
  579.           this.checkDropdownHeight(current);
  580.         });
  581.       } else {
  582.         this.element.setAttribute('aria-expanded', 'false');
  583.         this.element.removeAttribute('data-expanded');
  584.         this.open.setAttribute('aria-expanded', 'false');
  585.         this.enableScroll();
  586.       }
  587.     } else if (viewport === 'desktop' && compact) {
  588.       const currentSubItem = queryOne(
  589.         '.ecl-mega-menu__subitem--expanded',
  590.         this.element,
  591.       );
  592.       if (currentSubItem) {
  593.         currentSubItem.firstElementChild.classList.remove(
  594.           'ecl-mega-menu__parent-link',
  595.         );
  596.       }
  597.       infoPanels.forEach((info) => {
  598.         info.style.height = '';
  599.       });
  600.     }
  602.     if (viewport === 'desktop' && this.header) {
  603.       if (this.headerBanner) {
  604.         this.headerBanner.style.display = 'flex';
  605.       }
  606.       if (this.headerNotification) {
  607.         this.headerNotification.style.display = 'flex';
  608.       }
  609.     }
  610.   }
  612.   /**
  613.    * Trigger events on resize
  614.    * Uses a debounce, for performance
  615.    */
  616.   handleResize() {
  617.     clearTimeout(this.resizeTimer);
  618.     this.resizeTimer = setTimeout(() => {
  619.       const screenWidth = window.innerWidth;
  620.       if (this.prevScreenWidth !== undefined) {
  621.         // Check if the transition involves crossing the L breakpoint
  622.         const isTransition =
  623.           (this.prevScreenWidth <= this.breakpointL &&
  624.             screenWidth > this.breakpointL) ||
  625.           (this.prevScreenWidth > this.breakpointL &&
  626.             screenWidth <= this.breakpointL);
  627.         // If we are moving in or out the L breakpoint, reset the styles
  628.         if (isTransition) {
  629.           this.resetStyles(
  630.             screenWidth > this.breakpointL ? 'desktop' : 'mobile',
  631.           );
  632.         }
  633.         if (this.prevScreenWidth > 1140 && screenWidth > 996) {
  634.           this.resetStyles('desktop', true);
  635.         }
  636.       }
  637.       this.isDesktop = this.useDesktopDisplay();
  638.       this.isLarge = window.innerWidth > 1140;
  639.       // Update previous screen width
  640.       this.prevScreenWidth = screenWidth;
  641.       this.element.classList.remove('ecl-mega-menu--forced-mobile');
  642.       // RTL
  643.       this.direction = getComputedStyle(this.element).direction;
  644.       if (this.direction === 'rtl') {
  645.         this.element.classList.add('ecl-mega-menu--rtl');
  646.       } else {
  647.         this.element.classList.remove('ecl-mega-menu--rtl');
  648.       }
  649.       // Check droopdown height if needed
  650.       const expanded = queryOne('.ecl-mega-menu__item--expanded', this.element);
  651.       if (expanded && this.isDesktop) {
  652.         this.checkDropdownHeight(expanded);
  653.       }
  654.       // Check the menu position
  655.       this.positionMenuOverlay();
  656.     }, 200);
  657.   }
  659.   /**
  660.    * Calculate dropdown height dynamically
  661.    *
  662.    * @param {Node} menuItem
  663.    */
  664.   checkDropdownHeight(menuItem) {
  665.     const infoPanel = queryOne('.ecl-mega-menu__info', menuItem);
  666.     const mainPanel = queryOne('.ecl-mega-menu__mega', menuItem);
  667.     // Hide the panels while calculating their heights
  668.     if (mainPanel && this.isDesktop) {
  669.       mainPanel.style.opacity = 0;
  670.     }
  671.     if (infoPanel && this.isDesktop) {
  672.       infoPanel.style.opacity = 0;
  673.     }
  674.     setTimeout(() => {
  675.       const viewportHeight = window.innerHeight;
  676.       let infoPanelHeight = 0;
  678.       if (this.isDesktop) {
  679.         const heights = [];
  680.         let height = 0;
  681.         let secondPanel = null;
  682.         let featuredPanel = null;
  683.         let itemsHeight = 0;
  684.         let subItemsHeight = 0;
  686.         if (infoPanel) {
  687.           infoPanelHeight = infoPanel.scrollHeight + 16;
  688.         }
  689.         if (infoPanel && this.isLarge) {
  690.           heights.push(infoPanelHeight);
  691.         } else if (infoPanel && this.isDesktop) {
  692.           itemsHeight = infoPanelHeight;
  693.           subItemsHeight = infoPanelHeight;
  694.         }
  696.         if (mainPanel) {
  697.           const mainTop = mainPanel.getBoundingClientRect().top;
  698.           const list = queryOne('.ecl-mega-menu__sublist', mainPanel);
  699.           if (!list) {
  700.             const isContainer = menuItem.classList.contains(
  701.               'ecl-mega-menu__item--has-container',
  702.             );
  703.             if (isContainer) {
  704.               const container = queryOne(
  705.                 '.ecl-mega-menu__mega-container',
  706.                 menuItem,
  707.               );
  708.               if (container) {
  709.                 container.firstElementChild.style.height = `${viewportHeight - mainTop}px`;
  710.                 return;
  711.               }
  712.             }
  713.           } else {
  714.             const items = list.children;
  715.             if (items.length > 0) {
  716.               Array.from(items).forEach((item) => {
  717.                 itemsHeight += item.getBoundingClientRect().height;
  718.               });
  719.               heights.push(itemsHeight);
  720.             }
  721.           }
  722.         }
  723.         const expanded = queryOne(
  724.           '.ecl-mega-menu__subitem--expanded',
  725.           menuItem,
  726.         );
  727.         if (expanded) {
  728.           secondPanel = queryOne('.ecl-mega-menu__mega--level-2', expanded);
  729.           if (secondPanel) {
  730.             const subItems = queryAll(`${this.subItemSelector} a`, secondPanel);
  731.             if (subItems.length > 0) {
  732.               subItems.forEach((item) => {
  733.                 subItemsHeight += item.getBoundingClientRect().height;
  734.               });
  735.             }
  737.             heights.push(subItemsHeight);
  738.             featuredPanel = queryOne('.ecl-mega-menu__featured', expanded);
  739.             if (featuredPanel) {
  740.               heights.push(featuredPanel.scrollHeight);
  741.             }
  742.           }
  743.         }
  745.         const maxHeight = Math.max(...heights);
  746.         const containerBounding = this.inner.getBoundingClientRect();
  747.         const containerBottom = containerBounding.bottom;
  748.         // By requirements, limit the height to the 70% of the available space.
  749.         const availableHeight = (window.innerHeight - containerBottom) * 0.7;
  751.         if (maxHeight > availableHeight) {
  752.           height = availableHeight;
  753.         } else {
  754.           height = maxHeight;
  755.         }
  757.         const wrapper = queryOne('.ecl-mega-menu__wrapper', menuItem);
  758.         if (wrapper) {
  759.           wrapper.style.height = `${height}px`;
  760.         }
  761.         if (mainPanel && this.isLarge) {
  762.           mainPanel.style.height = `${height}px`;
  763.         } else if (mainPanel && infoPanel && this.isDesktop) {
  764.           mainPanel.style.height = `${height - infoPanelHeight}px`;
  765.         }
  766.         if (infoPanel && this.isLarge) {
  767.           infoPanel.style.height = `${height}px`;
  768.         }
  769.         if (secondPanel && this.isLarge) {
  770.           secondPanel.style.height = `${height}px`;
  771.         } else if (secondPanel && this.isDesktop) {
  772.           secondPanel.style.height = `${height - infoPanelHeight}px`;
  773.         }
  774.         if (featuredPanel && this.isLarge) {
  775.           featuredPanel.style.height = `${height}px`;
  776.         } else if (featuredPanel && this.isDesktop) {
  777.           featuredPanel.style.height = `${height - infoPanelHeight}px`;
  778.         }
  779.       }
  780.       if (mainPanel && this.isDesktop) {
  781.         mainPanel.style.opacity = 1;
  782.       }
  783.       if (infoPanel && this.isDesktop) {
  784.         infoPanel.style.opacity = 1;
  785.       }
  786.     }, 100);
  787.   }
  789.   /**
  790.    * Dinamically set the position of the menu overlay
  791.    */
  792.   positionMenuOverlay() {
  793.     const menuOverlay = queryOne('.ecl-mega-menu__overlay', this.element);
  794.     let availableHeight = 0;
  795.     if (!this.isDesktop) {
  796.       // In mobile, we get the bottom position of the site header header
  797.       setTimeout(() => {
  798.         if (this.header) {
  799.           const position = this.header.getBoundingClientRect();
  800.           const bottomPosition = Math.round(position.bottom);
  802.           if (menuOverlay) {
  803.             menuOverlay.style.top = `${bottomPosition}px`;
  804.           }
  805.           if (this.inner) {
  806.             this.inner.style.top = `${bottomPosition}px`;
  807.           }
  808.           const item = queryOne('.ecl-mega-menu__item--expanded', this.element);
  810.           if (item) {
  811.             const subList = queryOne('.ecl-mega-menu__sublist', item);
  812.             if (subList && this.openPanel.num === 1) {
  813.               const info = queryOne('.ecl-mega-menu__info', item);
  814.               if (info) {
  815.                 const bottomRect = info.getBoundingClientRect();
  816.                 const bottomInfo = bottomRect.bottom;
  817.                 availableHeight = window.innerHeight - bottomInfo - 16;
  818.                 subList.classList.add('ecl-mega-menu__sublist--scrollable');
  819.                 subList.style.height = `${availableHeight}px`;
  820.               }
  821.             } else if (subList) {
  822.               subList.classList.remove('ecl-mega-menu__sublist--scrollable');
  823.               subList.style.height = '';
  824.             }
  825.           }
  827.           if (this.openPanel.num === 2) {
  828.             const subItem = queryOne(
  829.               '.ecl-mega-menu__subitem--expanded',
  830.               this.element,
  831.             );
  832.             if (subItem) {
  833.               const subMega = queryOne(
  834.                 '.ecl-mega-menu__mega--level-2',
  835.                 subItem,
  836.               );
  837.               if (subMega) {
  838.                 const subMegaRect = subMega.getBoundingClientRect();
  839.                 const subMegaTop = subMegaRect.top;
  840.                 availableHeight = window.innerHeight - subMegaTop;
  841.                 subMega.style.height = `${availableHeight}px`;
  842.               }
  843.             }
  844.           }
  845.           const wrappers = queryAll('.ecl-mega-menu__wrapper', this.element);
  846.           if (wrappers) {
  847.             wrappers.forEach((wrapper) => {
  848.               wrapper.style.top = '';
  849.               wrapper.style.height = '';
  850.             });
  851.           }
  852.         }
  853.       }, 0);
  854.     } else {
  855.       setTimeout(() => {
  856.         // In desktop we get the bottom position of the whole site header
  857.         const siteHeader = queryOne('.ecl-site-header', document);
  858.         if (siteHeader) {
  859.           const headerRect = siteHeader.getBoundingClientRect();
  860.           const headerBottom = headerRect.bottom;
  861.           const item = queryOne(this.itemSelector, this.element);
  862.           const rect = item.getBoundingClientRect();
  863.           const rectHeight = rect.height;
  864.           const wrappers = queryAll('.ecl-mega-menu__wrapper', this.element);
  866.           if (wrappers) {
  867.             wrappers.forEach((wrapper) => {
  868.               wrapper.style.top = `${rectHeight}px`;
  869.             });
  870.           }
  871.           if (menuOverlay) {
  872.             menuOverlay.style.top = `${headerBottom}px`;
  873.           }
  874.         } else {
  875.           const bottomPosition = this.element.getBoundingClientRect().bottom;
  876.           if (menuOverlay) {
  877.             menuOverlay.style.top = `${bottomPosition}px`;
  878.           }
  879.         }
  880.       }, 0);
  881.     }
  882.   }
  884.   /**
  885.    * Handles keyboard events specific to the menu.
  886.    *
  887.    * @param {Event} e
  888.    */
  889.   handleKeyboard(e) {
  890.     const element = e.target;
  891.     const cList = element.classList;
  892.     const menuExpanded = this.element.getAttribute('aria-expanded');
  894.     // Detect press on Escape
  895.     if (e.key === 'Escape' || e.key === 'Esc') {
  896.       if (document.activeElement === element) {
  897.         element.blur();
  898.       }
  900.       if (menuExpanded === 'false') {
  901.         this.closeOpenDropdown();
  902.       }
  903.       return;
  904.     }
  905.     // Handle Keyboard on the first panel
  906.     if (cList.contains('ecl-mega-menu__info-link')) {
  907.       if (e.key === 'ArrowUp') {
  908.         if (this.isDesktop) {
  909.           // Focus on the expanded nav item
  910.           queryOne(
  911.             '.ecl-mega-menu__item--expanded button',
  912.             this.element,
  913.           ).focus();
  914.         } else if (this.back && !this.isDesktop) {
  915.           // focus on the back button
  916.           this.back.focus();
  917.         }
  918.       }
  919.       if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
  920.         // First item in the open dropdown.
  921.         element.parentElement.parentElement.nextSibling.firstChild.firstChild.firstChild.focus();
  922.       }
  923.     }
  925.     if (cList.contains('ecl-mega-menu__parent-link')) {
  926.       if (e.key === 'ArrowUp') {
  927.         const back = queryOne('.ecl-mega-menu__back', this.element);
  928.         back.focus();
  929.         return;
  930.       }
  931.       if (e.key === 'ArrowDown') {
  932.         const mega = e.target.nextSibling;
  933.         mega.firstElementChild.firstElementChild.firstChild.focus();
  934.         return;
  935.       }
  936.     }
  938.     // Handle keyboard on the see all links
  939.     if (element.parentElement.classList.contains('ecl-mega-menu__see-all')) {
  940.       if (e.key === 'ArrowUp') {
  941.         // Focus on the last element of the sub-list
  942.         element.parentElement.previousSibling.firstChild.focus();
  943.       }
  944.       if (e.key === 'ArrowDown') {
  945.         // Focus on the fi
  946.         const featured = element.parentElement.parentElement.nextSibling;
  947.         if (featured) {
  948.           const focusableSelectors = [
  949.             'a[href]',
  950.             'button:not([disabled])',
  951.             'input:not([disabled])',
  952.             'select:not([disabled])',
  953.             'textarea:not([disabled])',
  954.             '[tabindex]:not([tabindex="-1"])',
  955.           ];
  956.           const focusableElements = queryAll(
  957.             focusableSelectors.join(', '),
  958.             featured,
  959.           );
  960.           if (focusableElements.length > 0) {
  961.             focusableElements[0].focus();
  962.           }
  963.         }
  964.       }
  965.     }
  966.     // Handle keyboard on the back button
  967.     if (cList.contains('ecl-mega-menu__back')) {
  968.       if (e.key === 'ArrowDown') {
  969.         e.preventDefault();
  970.         const expanded = queryOne(
  971.           '[aria-expanded="true"]',
  972.           element.parentElement.nextSibling,
  973.         );
  974.         // We have an opened list
  975.         if (expanded) {
  976.           const innerExpanded = queryOne(
  977.             '.ecl-mega-menu__subitem--expanded',
  978.             expanded.parentElement,
  979.           );
  980.           // We have an opened sub-list
  981.           if (innerExpanded) {
  982.             const parentLink = queryOne(
  983.               '.ecl-mega-menu__parent-link',
  984.               innerExpanded,
  985.             );
  986.             if (parentLink) {
  987.               parentLink.focus();
  988.             }
  989.           } else {
  990.             const infoLink = queryOne(
  991.               '.ecl-mega-menu__info-link',
  992.               expanded.parentElement,
  993.             );
  994.             if (infoLink) {
  995.               infoLink.focus();
  996.             } else {
  997.               queryOne(
  998.                 '.ecl-mega-menu__subitem:first-child .ecl-mega-menu__sublink',
  999.                 expanded.parentElement,
  1000.               ).focus();
  1001.             }
  1002.           }
  1003.         }
  1004.       }
  1005.       if (e.key === 'ArrowUp') {
  1006.         // Focus on the open button
  1007.         this.open.focus();
  1008.       }
  1009.     }
  1010.     // Key actions to navigate between first level menu items
  1011.     if (cList.contains('ecl-mega-menu__link')) {
  1012.       if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
  1013.         e.preventDefault();
  1014.         let prevItem = element.previousSibling;
  1016.         if (prevItem && prevItem.classList.contains('ecl-mega-menu__link')) {
  1017.           prevItem.focus();
  1018.           return;
  1019.         }
  1021.         prevItem = element.parentElement.previousSibling;
  1022.         if (prevItem) {
  1023.           const prevLink = queryOne('.ecl-mega-menu__link', prevItem);
  1025.           if (prevLink) {
  1026.             prevLink.focus();
  1027.             return;
  1028.           }
  1029.         }
  1030.       }
  1031.       if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
  1032.         e.preventDefault();
  1033.         if (
  1034.           element.parentElement.getAttribute('aria-expanded') === 'true' &&
  1035.           e.key === 'ArrowDown'
  1036.         ) {
  1037.           const infoLink = queryOne(
  1038.             '.ecl-mega-menu__info-link',
  1039.             element.parentElement,
  1040.           );
  1041.           if (infoLink) {
  1042.             infoLink.focus();
  1043.             return;
  1044.           }
  1045.         }
  1046.         const nextItem = element.parentElement.nextSibling;
  1047.         if (nextItem) {
  1048.           const nextLink = queryOne('.ecl-mega-menu__link', nextItem);
  1050.           if (nextLink) {
  1051.             nextLink.focus();
  1052.             return;
  1053.           }
  1054.         }
  1055.       }
  1056.     }
  1057.     // Key actions to navigate between the sub-links
  1058.     if (cList.contains('ecl-mega-menu__sublink')) {
  1059.       if (e.key === 'ArrowDown') {
  1060.         e.preventDefault();
  1061.         const nextItem = element.parentElement.nextSibling;
  1062.         let nextLink = '';
  1063.         if (nextItem) {
  1064.           nextLink = queryOne('.ecl-mega-menu__sublink', nextItem);
  1065.           if (
  1066.             !nextLink &&
  1067.             nextItem.classList.contains('ecl-mega-menu__spacer')
  1068.           ) {
  1069.             nextLink = nextItem.nextSibling.firstElementChild;
  1070.           }
  1071.           if (nextLink) {
  1072.             nextLink.focus();
  1073.             return;
  1074.           }
  1075.         }
  1076.       }
  1077.       if (e.key === 'ArrowUp') {
  1078.         e.preventDefault();
  1079.         const prevItem = element.parentElement.previousSibling;
  1080.         if (prevItem) {
  1081.           const prevLink = queryOne('.ecl-mega-menu__sublink', prevItem);
  1083.           if (prevLink) {
  1084.             prevLink.focus();
  1085.           }
  1086.         } else {
  1087.           const moreLink = queryOne(
  1088.             '.ecl-mega-menu__info-link',
  1089.             element.parentElement.parentElement.parentElement.previousSibling,
  1090.           );
  1091.           if (moreLink) {
  1092.             moreLink.focus();
  1093.           } else if (this.openPanel.num === 2) {
  1094.             const parent = e.target.closest(
  1095.               '.ecl-mega-menu__mega',
  1096.             ).previousSibling;
  1097.             if (parent) {
  1098.               parent.focus();
  1099.             }
  1100.           } else if (this.back) {
  1101.             this.back.focus();
  1102.           }
  1103.         }
  1104.       }
  1105.     }
  1106.     if (e.key === 'ArrowRight') {
  1107.       const expanded =
  1108.         element.parentElement.getAttribute('aria-expanded') === 'true';
  1109.       if (expanded) {
  1110.         e.preventDefault();
  1111.         // Focus on the first element in the second panel
  1112.         element.nextSibling.firstElementChild.firstChild.firstChild.focus();
  1113.       }
  1114.     }
  1115.   }
  1117.   /**
  1118.    * Handles global keyboard events, triggered outside of the menu.
  1119.    *
  1120.    * @param {Event} e
  1121.    */
  1122.   handleKeyboardGlobal(e) {
  1123.     // Detect press on Escape
  1124.     if (e.key === 'Escape' || e.key === 'Esc') {
  1125.       if (this.isOpen) {
  1126.         this.closeOpenDropdown(true);
  1127.       }
  1128.     }
  1129.   }
  1131.   /**
  1132.    * Open menu list.
  1133.    *
  1134.    * @param {Event} e
  1135.    *
  1136.    * @fires MegaMenu#onOpen
  1137.    */
  1138.   handleClickOnOpen(e) {
  1139.     if (this.isOpen) {
  1140.       this.handleClickOnClose(e);
  1141.     } else {
  1142.       e.preventDefault();
  1143.       this.disableScroll();
  1144.       this.element.setAttribute('aria-expanded', 'true');
  1145.       this.element.classList.add('ecl-mega-menu--start-panel');
  1146.       this.element.classList.remove(
  1147.         'ecl-mega-menu--one-panel',
  1148.         'ecl-mega-menu--two-panels',
  1149.       );
  1150.       this.open.setAttribute('aria-expanded', 'true');
  1151.       this.inner.setAttribute('aria-hidden', 'false');
  1152.       this.isOpen = true;
  1154.       if (this.header) {
  1155.         this.header.classList.add(
  1156.           'ecl-site-header--open-menu',
  1157.           'ecl-site-header--open-menu-start',
  1158.         );
  1159.       }
  1161.       // Update label
  1162.       const closeLabel = this.element.getAttribute(this.labelCloseAttribute);
  1163.       if (this.toggleLabel && closeLabel) {
  1164.         this.toggleLabel.innerHTML = closeLabel;
  1165.       }
  1167.       this.positionMenuOverlay();
  1169.       // Focus first element
  1170.       if (this.links.length > 0) {
  1171.         this.links[0].focus();
  1172.       }
  1174.       this.trigger('onOpen', e);
  1175.     }
  1176.   }
  1178.   /**
  1179.    * Close menu list.
  1180.    *
  1181.    * @param {Event} e
  1182.    *
  1183.    * @fires Menu#onClose
  1184.    */
  1185.   handleClickOnClose(e) {
  1186.     if (this.element.getAttribute('aria-expanded') === 'true') {
  1187.       this.focusTrap.deactivate();
  1188.       this.closeOpenDropdown();
  1189.       this.trigger('onClose', e);
  1190.     } else {
  1191.       this.handleClickOnOpen(e);
  1192.     }
  1193.   }
  1195.   /**
  1196.    * Toggle menu list.
  1197.    *
  1198.    * @param {Event} e
  1199.    */
  1200.   handleClickOnToggle(e) {
  1201.     e.preventDefault();
  1203.     if (this.isOpen) {
  1204.       this.handleClickOnClose(e);
  1205.     } else {
  1206.       this.handleClickOnOpen(e);
  1207.     }
  1208.   }
  1210.   /**
  1211.    * Get back to previous list (on mobile)
  1212.    *
  1213.    * @fires MegaMenu#onBack
  1214.    */
  1215.   handleClickOnBack() {
  1216.     const infoPanels = queryAll('.ecl-mega-menu__info', this.element);
  1217.     infoPanels.forEach((info) => {
  1218.       info.style.top = '';
  1219.     });
  1220.     const level2 = queryOne('.ecl-mega-menu__subitem--expanded', this.element);
  1221.     if (level2) {
  1222.       this.element.classList.remove(
  1223.         'ecl-mega-menu--two-panels',
  1224.         'ecl-mega-menu--start-panel',
  1225.       );
  1226.       this.element.classList.add('ecl-mega-menu--one-panel');
  1227.       level2.setAttribute('aria-expanded', 'false');
  1228.       level2.classList.remove(
  1229.         'ecl-mega-menu__subitem--expanded',
  1230.         'ecl-mega-menu__subitem--current',
  1231.       );
  1232.       const itemLink = queryOne(this.subLinkSelector, level2);
  1233.       itemLink.setAttribute('aria-expanded', 'false');
  1234.       itemLink.classList.remove('ecl-mega-menu__parent-link');
  1235.       const siblings = level2.parentElement.childNodes;
  1236.       if (siblings) {
  1237.         siblings.forEach((sibling) => {
  1238.           sibling.style.display = '';
  1239.         });
  1240.       }
  1241.       if (this.header) {
  1242.         this.header.classList.remove('ecl-site-header--open-menu-start');
  1243.       }
  1244.       // Move the focus to the previously selected item
  1245.       if (this.backItemLevel2) {
  1246.         this.backItemLevel2.firstElementChild.focus();
  1247.       }
  1248.       this.openPanel.num = 1;
  1249.     } else {
  1250.       if (this.header) {
  1251.         if (this.headerBanner) {
  1252.           this.headerBanner.style.display = 'flex';
  1253.         }
  1254.         if (this.headerNotification) {
  1255.           this.headerNotification.style.display = 'flex';
  1256.         }
  1257.       }
  1258.       // Remove expanded class from inner menu
  1259.       this.inner.classList.remove('ecl-mega-menu__inner--expanded');
  1260.       this.element.classList.remove('ecl-mega-menu--one-panel');
  1261.       // Remove css class and attribute from menu items
  1262.       this.items.forEach((item) => {
  1263.         item.classList.remove(
  1264.           'ecl-mega-menu__item--expanded',
  1265.           'ecl-mega-menu__item--current',
  1266.         );
  1267.         const itemLink = queryOne(this.linkSelector, item);
  1268.         itemLink.setAttribute('aria-expanded', 'false');
  1269.       });
  1270.       // Move the focus to the previously selected item
  1271.       if (this.backItemLevel1) {
  1272.         this.backItemLevel1.firstElementChild.focus();
  1273.       } else {
  1274.         this.items[0].firstElementChild.focus();
  1275.       }
  1276.       this.openPanel.num = 0;
  1277.       if (this.header) {
  1278.         this.header.classList.add('ecl-site-header--open-menu-start');
  1279.       }
  1280.       this.positionMenuOverlay();
  1281.     }
  1283.     this.trigger('onBack', { level: level2 ? 2 : 1 });
  1284.   }
  1286.   /**
  1287.    * Show/hide the first panel
  1288.    *
  1289.    * @param {Node} menuItem
  1290.    * @param {string} op (expand or collapse)
  1291.    *
  1292.    * @fires MegaMenu#onOpenPanel
  1293.    */
  1294.   handleFirstPanel(menuItem, op) {
  1295.     switch (op) {
  1296.       case 'expand': {
  1297.         this.inner.classList.add('ecl-mega-menu__inner--expanded');
  1298.         this.positionMenuOverlay();
  1299.         this.checkDropdownHeight(menuItem);
  1300.         this.element.setAttribute('data-expanded', true);
  1301.         this.element.setAttribute('aria-expanded', 'true');
  1302.         this.element.classList.add('ecl-mega-menu--one-panel');
  1303.         this.element.classList.remove('ecl-mega-menu--start-panel');
  1304.         this.open.setAttribute('aria-expanded', 'true');
  1305.         if (this.header) {
  1306.           this.header.classList.add('ecl-site-header--open-menu');
  1307.           this.header.classList.remove('ecl-site-header--open-menu-start');
  1308.           if (!this.isDesktop) {
  1309.             if (this.headerBanner) {
  1310.               this.headerBanner.style.display = 'none';
  1311.             }
  1312.             if (this.headerNotification) {
  1313.               this.headerNotification.style.display = 'none';
  1314.             }
  1315.           }
  1316.         }
  1317.         this.disableScroll();
  1318.         this.isOpen = true;
  1319.         this.items.forEach((item) => {
  1320.           const itemLink = queryOne(this.linkSelector, item);
  1321.           if (itemLink.hasAttribute('aria-expanded')) {
  1322.             if (item === menuItem) {
  1323.               item.classList.add(
  1324.                 'ecl-mega-menu__item--expanded',
  1325.                 'ecl-mega-menu__item--current',
  1326.               );
  1327.               itemLink.setAttribute('aria-expanded', 'true');
  1328.               this.backItemLevel1 = item;
  1329.             } else {
  1330.               itemLink.setAttribute('aria-expanded', 'false');
  1331.               item.classList.remove(
  1332.                 'ecl-mega-menu__item--current',
  1333.                 'ecl-mega-menu__item--expanded',
  1334.               );
  1335.             }
  1336.           }
  1337.         });
  1339.         if (!this.isDesktop && this.back) {
  1340.           this.back.focus();
  1341.         }
  1343.         this.openPanel = {
  1344.           num: 1,
  1345.           item: menuItem,
  1346.         };
  1347.         const details = { panel: 1, item: menuItem };
  1348.         this.trigger('OnOpenPanel', details);
  1349.         if (this.isDesktop) {
  1350.           const list = queryOne('.ecl-mega-menu__sublist', menuItem);
  1351.           if (list) {
  1352.             // Expand the first item in the sublist if it contains children.
  1353.             const expandedChild = Array.from(
  1354.               list.children,
  1355.             )[0].firstElementChild.hasAttribute('aria-expanded')
  1356.               ? Array.from(list.children)[0]
  1357.               : false;
  1358.             if (expandedChild) {
  1359.               this.handleSecondPanel(expandedChild, 'expand');
  1360.             }
  1361.           }
  1362.         }
  1363.         break;
  1364.       }
  1366.       case 'collapse':
  1367.         this.closeOpenDropdown();
  1368.         break;
  1370.       default:
  1371.     }
  1372.   }
  1374.   /**
  1375.    * Show/hide the second panel
  1376.    *
  1377.    * @param {Node} menuItem
  1378.    * @param {string} op (expand or collapse)
  1379.    *
  1380.    * @fires MegaMenu#onOpenPanel
  1381.    */
  1382.   handleSecondPanel(menuItem, op) {
  1383.     const infoPanel = queryOne(
  1384.       '.ecl-mega-menu__info',
  1385.       menuItem.closest('.ecl-container'),
  1386.     );
  1387.     let siblings;
  1388.     switch (op) {
  1389.       case 'expand': {
  1390.         this.element.classList.remove(
  1391.           'ecl-mega-menu--one-panel',
  1392.           'ecl-mega-menu--start-panel',
  1393.         );
  1394.         this.element.classList.add('ecl-mega-menu--two-panels');
  1395.         this.subItems.forEach((item) => {
  1396.           const itemLink = queryOne(this.subLinkSelector, item);
  1397.           if (item === menuItem) {
  1398.             if (itemLink.hasAttribute('aria-expanded')) {
  1399.               itemLink.setAttribute('aria-expanded', 'true');
  1401.               if (!this.isDesktop) {
  1402.                 // We use this class mainly to recover the default behavior of the link.
  1403.                 itemLink.classList.add('ecl-mega-menu__parent-link');
  1404.                 if (this.back) {
  1405.                   this.back.focus();
  1406.                 }
  1407.               }
  1408.               item.classList.add('ecl-mega-menu__subitem--expanded');
  1409.             }
  1410.             item.classList.add('ecl-mega-menu__subitem--current');
  1411.             this.backItemLevel2 = item;
  1412.           } else {
  1413.             if (itemLink.hasAttribute('aria-expanded')) {
  1414.               itemLink.setAttribute('aria-expanded', 'false');
  1415.               itemLink.classList.remove('ecl-mega-menu__parent-link');
  1416.               item.classList.remove('ecl-mega-menu__subitem--expanded');
  1417.             }
  1418.             item.classList.remove('ecl-mega-menu__subitem--current');
  1419.           }
  1420.         });
  1422.         this.openPanel = { num: 2, item: menuItem };
  1423.         siblings = menuItem.parentNode.childNodes;
  1424.         if (this.isDesktop) {
  1425.           // Reset style for the siblings, in case they were hidden
  1426.           siblings.forEach((sibling) => {
  1427.             if (sibling !== menuItem) {
  1428.               sibling.style.display = '';
  1429.             }
  1430.           });
  1431.         } else {
  1432.           // Hide other items in the sublist
  1433.           siblings.forEach((sibling) => {
  1434.             if (sibling !== menuItem) {
  1435.               sibling.style.display = 'none';
  1436.             }
  1437.           });
  1438.         }
  1439.         this.positionMenuOverlay();
  1440.         const details = { panel: 2, item: menuItem };
  1441.         this.trigger('OnOpenPanel', details);
  1442.         break;
  1443.       }
  1445.       case 'collapse':
  1446.         this.element.classList.remove('ecl-mega-menu--two-panels');
  1447.         this.openPanel = { num: 1 };
  1448.         // eslint-disable-next-line no-case-declarations
  1449.         const itemLink = queryOne(this.subLinkSelector, menuItem);
  1450.         itemLink.setAttribute('aria-expanded', 'false');
  1451.         menuItem.classList.remove(
  1452.           'ecl-mega-menu__subitem--expanded',
  1453.           'ecl-mega-menu__subitem--current',
  1454.         );
  1455.         if (infoPanel) {
  1456.           infoPanel.style.top = '';
  1457.         }
  1458.         break;
  1460.       default:
  1461.     }
  1462.   }
  1464.   /**
  1465.    * Click on a menu item
  1466.    *
  1467.    * @param {Event} e
  1468.    *
  1469.    * @fires MegaMenu#onItemClick
  1470.    */
  1471.   handleClickOnItem(e) {
  1472.     let isInTheContainer = false;
  1473.     const menuItem = e.target.closest('li');
  1475.     const container = queryOne(
  1476.       '.ecl-mega-menu__mega-container-scrollable',
  1477.       menuItem,
  1478.     );
  1479.     if (container) {
  1480.       isInTheContainer = container.contains(e.target);
  1481.     }
  1482.     // We need to ensure that the click doesn't come from a parent link
  1483.     // or from an open container, in that case we do not act.
  1484.     if (
  1485.       !e.target.classList.contains(
  1486.         'ecl-mega-menu__mega-container-scrollable',
  1487.       ) &&
  1488.       !isInTheContainer
  1489.     ) {
  1490.       this.trigger('onItemClick', { item: menuItem, event: e });
  1491.       const hasChildren =
  1492.         menuItem.firstElementChild.getAttribute('aria-expanded');
  1493.       if (hasChildren && menuItem.classList.contains('ecl-mega-menu__item')) {
  1494.         e.preventDefault();
  1495.         e.stopPropagation();
  1496.         if (!this.isDesktop) {
  1497.           this.handleFirstPanel(menuItem, 'expand');
  1498.         } else {
  1499.           const isOpen = hasChildren === 'true';
  1500.           if (isOpen) {
  1501.             this.handleFirstPanel(menuItem, 'collapse');
  1502.           } else {
  1503.             this.closeOpenDropdown();
  1504.             this.handleFirstPanel(menuItem, 'expand');
  1505.           }
  1506.         }
  1507.       }
  1508.     }
  1509.   }
  1511.   /**
  1512.    * Click on a subitem
  1513.    *
  1514.    * @param {Event} e
  1515.    */
  1516.   handleClickOnSubitem(e) {
  1517.     const menuItem = e.target.closest(this.subItemSelector);
  1518.     if (menuItem && menuItem.firstElementChild.hasAttribute('aria-expanded')) {
  1519.       const parentLink = queryOne('.ecl-mega-menu__parent-link', menuItem);
  1520.       if (parentLink) {
  1521.         return;
  1522.       }
  1523.       e.preventDefault();
  1524.       e.stopPropagation();
  1525.       const isExpanded =
  1526.         menuItem.firstElementChild.getAttribute('aria-expanded') === 'true';
  1528.       if (isExpanded) {
  1529.         this.handleSecondPanel(menuItem, 'collapse');
  1530.       } else {
  1531.         this.handleSecondPanel(menuItem, 'expand');
  1532.       }
  1533.     }
  1534.   }
  1536.   /**
  1537.    * Deselect any opened menu item
  1538.    *
  1539.    * @param {boolean} esc, whether the call was originated by a press on Esc
  1540.    *
  1541.    * @fires MegaMenu#onFocusTrapToggle
  1542.    */
  1543.   closeOpenDropdown(esc = false) {
  1544.     if (this.header) {
  1545.       this.header.classList.remove(
  1546.         'ecl-site-header--open-menu',
  1547.         'ecl-site-header--open-menu-start',
  1548.       );
  1549.       if (this.headerBanner) {
  1550.         this.headerBanner.style.display = 'flex';
  1551.       }
  1552.       if (this.headerNotification) {
  1553.         this.headerNotification.style.display = 'flex';
  1554.       }
  1555.     }
  1556.     this.enableScroll();
  1557.     this.element.setAttribute('aria-expanded', 'false');
  1558.     this.element.removeAttribute('data-expanded');
  1559.     this.element.classList.remove(
  1560.       'ecl-mega-menu--start-panel',
  1561.       'ecl-mega-menu--two-panels',
  1562.       'ecl-mega-menu--one-panel',
  1563.     );
  1564.     this.open.setAttribute('aria-expanded', 'false');
  1565.     // Remove css class and attribute from inner menu
  1566.     this.inner.classList.remove('ecl-mega-menu__inner--expanded');
  1568.     // Reset heights
  1569.     const megaMenus = queryAll(
  1570.       '.ecl-mega-menu__item > .ecl-mega-menu__wrapper > .ecl-container > [data-ecl-mega-menu-mega]',
  1571.       this.element,
  1572.     );
  1573.     megaMenus.forEach((mega) => {
  1574.       mega.style.height = '';
  1575.       mega.style.top = '';
  1576.     });
  1577.     let currentItem = false;
  1578.     // Remove css class and attribute from menu items
  1579.     this.items.forEach((item) => {
  1580.       item.classList.remove('ecl-mega-menu__item--current');
  1581.       const itemLink = queryOne(this.linkSelector, item);
  1582.       if (itemLink.getAttribute('aria-expanded') === 'true') {
  1583.         item.classList.remove('ecl-mega-menu__item--expanded');
  1584.         itemLink.setAttribute('aria-expanded', 'false');
  1585.         currentItem = itemLink;
  1586.       }
  1587.     });
  1588.     // Remove css class and attribute from menu subitems
  1589.     this.subItems.forEach((item) => {
  1590.       item.classList.remove('ecl-mega-menu__subitem--current');
  1591.       item.style.display = '';
  1592.       const itemLink = queryOne(this.subLinkSelector, item);
  1593.       if (itemLink.hasAttribute('aria-expanded')) {
  1594.         item.classList.remove('ecl-mega-menu__subitem--expanded');
  1595.         item.style.display = '';
  1596.         itemLink.setAttribute('aria-expanded', 'false');
  1597.         itemLink.classList.remove('ecl-mega-menu__parent-link');
  1598.       }
  1599.     });
  1600.     // Remove styles set for the sublists
  1601.     const sublists = queryAll('.ecl-mega-menu__sublist');
  1602.     if (sublists) {
  1603.       sublists.forEach((sublist) => {
  1604.         sublist.classList.remove(
  1605.           'ecl-mega-menu__sublist--no-border',
  1606.           '.ecl-mega-menu__sublist--scrollable',
  1607.         );
  1608.       });
  1609.     }
  1610.     // Update label
  1611.     const openLabel = this.element.getAttribute(this.labelOpenAttribute);
  1612.     if (this.toggleLabel && openLabel) {
  1613.       this.toggleLabel.innerHTML = openLabel;
  1614.     }
  1615.     this.openPanel = {
  1616.       num: 0,
  1617.       item: false,
  1618.     };
  1619.     // If the focus trap is active, deactivate it
  1620.     this.focusTrap.deactivate();
  1621.     // Focus on the open button in mobile or on the formerly expanded item in desktop.
  1622.     if (!this.isDesktop && this.open && esc) {
  1623.       this.open.focus();
  1624.     } else if (this.isDesktop && currentItem && esc) {
  1625.       currentItem.focus();
  1626.     }
  1627.     this.trigger('onFocusTrapToggle', { active: false });
  1628.     this.isOpen = false;
  1629.   }
  1631.   /**
  1632.    * Focus out of a menu link
  1633.    *
  1634.    * @param {Event} e
  1635.    *
  1636.    * @fires MegaMenu#onFocusTrapToggle
  1637.    */
  1638.   handleFocusOut(e) {
  1639.     const element = e.target;
  1640.     const menuExpanded = this.element.getAttribute('aria-expanded');
  1642.     // Specific focus action for mobile menu
  1643.     // Loop through the items and go back to close button
  1644.     if (menuExpanded === 'true' && !this.isDesktop) {
  1645.       const nextItem = element.parentElement.nextSibling;
  1647.       if (!nextItem) {
  1648.         const nextFocusTarget = e.relatedTarget;
  1649.         if (!this.element.contains(nextFocusTarget)) {
  1650.           // This is the last item, go back to close button
  1651.           this.focusTrap.activate();
  1652.           this.trigger('onFocusTrapToggle', {
  1653.             active: true,
  1654.             lastFocusedEl: element.parentElement,
  1655.           });
  1656.         }
  1657.       }
  1658.     }
  1659.   }
  1661.   /**
  1662.    * Handles global click events, triggered outside of the menu.
  1663.    *
  1664.    * @param {Event} e
  1665.    */
  1666.   handleClickGlobal(e) {
  1667.     if (
  1668.       !e.target.classList.contains(
  1669.         'ecl-mega-menu__mega-container-scrollable',
  1670.       ) &&
  1671.       (e.target.classList.contains('ecl-mega-menu__overlay') ||
  1672.         !this.element.contains(e.target)) &&
  1673.       this.isOpen
  1674.     ) {
  1675.       this.closeOpenDropdown();
  1676.     }
  1677.   }
  1678. }
  1680. export default MegaMenu;