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