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.     document.body.classList.add('ecl-mega-menu-prevent-scroll');
  444.   }
  446.   /**
  447.    * Enable page scrolling
  448.    */
  449.   enableScroll() {
  450.     document.body.classList.remove('ecl-mega-menu-prevent-scroll');
  451.   }
  453.   /**
  454.    * Check if desktop display has to be used
  455.    * - not using a phone or tablet (whatever the screen size is)
  456.    * - not having hamburger menu on screen
  457.    */
  458.   useDesktopDisplay() {
  459.     // Detect mobile devices
  460.     if (isMobile.isMobileOnly) {
  461.       return false;
  462.     }
  464.     // Force mobile display on tablet
  465.     if (isMobile.isTablet) {
  466.       this.element.classList.add('ecl-mega-menu--forced-mobile');
  467.       return false;
  468.     }
  470.     // After all that, check if the hamburger button is displayed
  471.     if (window.innerWidth < this.breakpointL) {
  472.       return false;
  473.     }
  475.     // Everything is fine to use desktop display
  476.     this.element.classList.remove('ecl-mega-menu--forced-mobile');
  477.     return true;
  478.   }
  480.   /**
  481.    * Reset the styles set by the script
  482.    *
  483.    * @param {string} desktop or mobile
  484.    */
  485.   resetStyles(viewport, compact) {
  486.     const infoPanels = queryAll('.ecl-mega-menu__info', this.element);
  487.     const subLists = queryAll('.ecl-mega-menu__sublist', this.element);
  489.     // Remove display:none from the sublists
  490.     if (subLists && viewport === 'mobile') {
  491.       const megaMenus = queryAll(
  492.         '.ecl-mega-menu__item > .ecl-mega-menu__wrapper > .ecl-container > [data-ecl-mega-menu-mega]',
  493.         this.element,
  494.       );
  495.       megaMenus.forEach((menu) => {
  496.         menu.style.height = '';
  497.       });
  499.       // Reset top position and height of the wrappers
  500.       const wrappers = queryAll('.ecl-mega-menu__wrapper', this.element);
  501.       if (wrappers) {
  502.         wrappers.forEach((wrapper) => {
  503.           wrapper.style.top = '';
  504.           wrapper.style.height = '';
  505.         });
  506.       }
  508.       if (this.openPanel.num > 0) {
  509.         if (this.header) {
  510.           if (this.headerBanner) {
  511.             this.headerBanner.style.display = 'none';
  512.           }
  513.           if (this.headerNotification) {
  514.             this.headerNotification.style.display = 'none';
  515.           }
  516.         }
  517.       }
  519.       // Two panels are opened
  520.       if (this.openPanel.num === 2) {
  521.         const subItemExpanded = queryOne(
  522.           '.ecl-mega-menu__subitem--expanded',
  523.           this.element,
  524.         );
  525.         if (subItemExpanded) {
  526.           subItemExpanded.firstChild.classList.add(
  527.             'ecl-mega-menu__parent-link',
  528.           );
  529.         }
  530.         const menuItem = this.openPanel.item;
  531.         // Hide siblings
  532.         const siblings = menuItem.parentNode.childNodes;
  533.         siblings.forEach((sibling) => {
  534.           if (sibling !== menuItem) {
  535.             sibling.style.display = 'none';
  536.           }
  537.         });
  538.       }
  539.     } else if (subLists && viewport === 'desktop' && !compact) {
  540.       // Reset styles for the sublist and subitems
  541.       subLists.forEach((list) => {
  542.         list.classList.remove('ecl-mega-menu__sublist--scrollable');
  543.         list.childNodes.forEach((item) => {
  544.           item.style.display = '';
  545.         });
  546.       });
  548.       infoPanels.forEach((info) => {
  549.         info.style.top = '';
  550.       });
  552.       // Check if we have an open item, if we don't hide the overlay and enable scroll
  553.       const currentItems = [];
  554.       const currentItem = queryOne(
  555.         '.ecl-mega-menu__subitem--expanded',
  556.         this.element,
  557.       );
  558.       if (currentItem) {
  559.         currentItem.firstElementChild.classList.remove(
  560.           'ecl-mega-menu__parent-link',
  561.         );
  562.         currentItems.push(currentItem);
  563.       }
  565.       const currentSubItem = queryOne(
  566.         '.ecl-mega-menu__item--expanded',
  567.         this.element,
  568.       );
  569.       if (currentSubItem) {
  570.         currentItems.push(currentSubItem);
  571.       }
  573.       if (currentItems.length > 0) {
  574.         currentItems.forEach((current) => {
  575.           this.checkDropdownHeight(current);
  576.         });
  577.       } else {
  578.         this.element.setAttribute('aria-expanded', 'false');
  579.         this.element.removeAttribute('data-expanded');
  580.         this.open.setAttribute('aria-expanded', 'false');
  581.         this.enableScroll();
  582.       }
  583.     } else if (viewport === 'desktop' && compact) {
  584.       const currentSubItem = queryOne(
  585.         '.ecl-mega-menu__subitem--expanded',
  586.         this.element,
  587.       );
  588.       if (currentSubItem) {
  589.         currentSubItem.firstElementChild.classList.remove(
  590.           'ecl-mega-menu__parent-link',
  591.         );
  592.       }
  593.       infoPanels.forEach((info) => {
  594.         info.style.height = '';
  595.       });
  596.     }
  598.     if (viewport === 'desktop' && this.header) {
  599.       if (this.headerBanner) {
  600.         this.headerBanner.style.display = 'flex';
  601.       }
  602.       if (this.headerNotification) {
  603.         this.headerNotification.style.display = 'flex';
  604.       }
  605.     }
  606.   }
  608.   /**
  609.    * Trigger events on resize
  610.    * Uses a debounce, for performance
  611.    */
  612.   handleResize() {
  613.     clearTimeout(this.resizeTimer);
  614.     this.resizeTimer = setTimeout(() => {
  615.       const screenWidth = window.innerWidth;
  616.       if (this.prevScreenWidth !== undefined) {
  617.         // Check if the transition involves crossing the L breakpoint
  618.         const isTransition =
  619.           (this.prevScreenWidth <= this.breakpointL &&
  620.             screenWidth > this.breakpointL) ||
  621.           (this.prevScreenWidth > this.breakpointL &&
  622.             screenWidth <= this.breakpointL);
  623.         // If we are moving in or out the L breakpoint, reset the styles
  624.         if (isTransition) {
  625.           this.resetStyles(
  626.             screenWidth > this.breakpointL ? 'desktop' : 'mobile',
  627.           );
  628.         }
  629.         if (this.prevScreenWidth > 1140 && screenWidth > 996) {
  630.           this.resetStyles('desktop', true);
  631.         }
  632.       }
  633.       this.isDesktop = this.useDesktopDisplay();
  634.       this.isLarge = window.innerWidth > 1140;
  635.       // Update previous screen width
  636.       this.prevScreenWidth = screenWidth;
  637.       this.element.classList.remove('ecl-mega-menu--forced-mobile');
  638.       // RTL
  639.       this.direction = getComputedStyle(this.element).direction;
  640.       if (this.direction === 'rtl') {
  641.         this.element.classList.add('ecl-mega-menu--rtl');
  642.       } else {
  643.         this.element.classList.remove('ecl-mega-menu--rtl');
  644.       }
  645.       // Check droopdown height if needed
  646.       const expanded = queryOne('.ecl-mega-menu__item--expanded', this.element);
  647.       if (expanded && this.isDesktop) {
  648.         this.checkDropdownHeight(expanded);
  649.       }
  650.       // Check the menu position
  651.       this.positionMenuOverlay();
  652.     }, 200);
  653.   }
  655.   /**
  656.    * Calculate dropdown height dynamically
  657.    *
  658.    * @param {Node} menuItem
  659.    */
  660.   checkDropdownHeight(menuItem) {
  661.     setTimeout(() => {
  662.       const viewportHeight = window.innerHeight;
  663.       const infoPanel = queryOne('.ecl-mega-menu__info', menuItem);
  664.       const mainPanel = queryOne('.ecl-mega-menu__mega', menuItem);
  665.       let infoPanelHeight = 0;
  667.       if (this.isDesktop) {
  668.         const heights = [];
  669.         let height = 0;
  670.         let secondPanel = null;
  671.         let featuredPanel = null;
  672.         let itemsHeight = 0;
  673.         let subItemsHeight = 0;
  675.         if (infoPanel) {
  676.           infoPanelHeight = infoPanel.scrollHeight + 16;
  677.         }
  678.         if (infoPanel && this.isLarge) {
  679.           heights.push(infoPanelHeight);
  680.         } else if (infoPanel && this.isDesktop) {
  681.           itemsHeight = infoPanelHeight;
  682.           subItemsHeight = infoPanelHeight;
  683.         }
  685.         if (mainPanel) {
  686.           const mainTop = mainPanel.getBoundingClientRect().top;
  687.           const list = queryOne('.ecl-mega-menu__sublist', mainPanel);
  688.           if (!list) {
  689.             const isContainer = menuItem.classList.contains(
  690.               'ecl-mega-menu__item--has-container',
  691.             );
  692.             if (isContainer) {
  693.               const container = queryOne(
  694.                 '.ecl-mega-menu__mega-container',
  695.                 menuItem,
  696.               );
  697.               if (container) {
  698.                 container.firstElementChild.style.height = `${viewportHeight - mainTop}px`;
  699.                 return;
  700.               }
  701.             }
  702.           } else {
  703.             const items = list.children;
  704.             if (items.length > 0) {
  705.               Array.from(items).forEach((item) => {
  706.                 itemsHeight += item.getBoundingClientRect().height;
  707.               });
  708.               heights.push(itemsHeight);
  709.             }
  710.           }
  711.         }
  712.         const expanded = queryOne(
  713.           '.ecl-mega-menu__subitem--expanded',
  714.           menuItem,
  715.         );
  716.         if (expanded) {
  717.           secondPanel = queryOne('.ecl-mega-menu__mega--level-2', expanded);
  718.           if (secondPanel) {
  719.             const subItems = queryAll(`${this.subItemSelector} a`, secondPanel);
  720.             if (subItems.length > 0) {
  721.               subItems.forEach((item) => {
  722.                 subItemsHeight += item.getBoundingClientRect().height;
  723.               });
  724.             }
  726.             heights.push(subItemsHeight);
  727.             featuredPanel = queryOne('.ecl-mega-menu__featured', expanded);
  728.             if (featuredPanel) {
  729.               heights.push(featuredPanel.scrollHeight);
  730.             }
  731.           }
  732.         }
  734.         const maxHeight = Math.max(...heights);
  735.         const containerBounding = this.inner.getBoundingClientRect();
  736.         const containerBottom = containerBounding.bottom;
  737.         // By requirements, limit the height to the 70% of the available space.
  738.         const availableHeight = (window.innerHeight - containerBottom) * 0.7;
  740.         if (maxHeight > availableHeight) {
  741.           height = availableHeight;
  742.         } else {
  743.           height = maxHeight;
  744.         }
  746.         const wrapper = queryOne('.ecl-mega-menu__wrapper', menuItem);
  747.         if (wrapper) {
  748.           wrapper.style.height = `${height}px`;
  749.         }
  750.         if (mainPanel && this.isLarge) {
  751.           mainPanel.style.height = `${height}px`;
  752.         } else if (mainPanel && infoPanel && this.isDesktop) {
  753.           mainPanel.style.height = `${height - infoPanelHeight}px`;
  754.         }
  755.         if (infoPanel && this.isLarge) {
  756.           infoPanel.style.height = `${height}px`;
  757.         }
  758.         if (secondPanel && this.isLarge) {
  759.           secondPanel.style.height = `${height}px`;
  760.         } else if (secondPanel && this.isDesktop) {
  761.           secondPanel.style.height = `${height - infoPanelHeight}px`;
  762.         }
  763.         if (featuredPanel && this.isLarge) {
  764.           featuredPanel.style.height = `${height}px`;
  765.         } else if (featuredPanel && this.isDesktop) {
  766.           featuredPanel.style.height = `${height - infoPanelHeight}px`;
  767.         }
  768.       }
  769.     }, 100);
  770.   }
  772.   /**
  773.    * Dinamically set the position of the menu overlay
  774.    */
  775.   positionMenuOverlay() {
  776.     const menuOverlay = queryOne('.ecl-mega-menu__overlay', this.element);
  777.     let availableHeight = 0;
  778.     if (!this.isDesktop) {
  779.       // In mobile, we get the bottom position of the site header header
  780.       setTimeout(() => {
  781.         if (this.header) {
  782.           const position = this.header.getBoundingClientRect();
  783.           const bottomPosition = Math.round(position.bottom);
  785.           if (menuOverlay) {
  786.             menuOverlay.style.top = `${bottomPosition}px`;
  787.           }
  788.           if (this.inner) {
  789.             this.inner.style.top = `${bottomPosition}px`;
  790.           }
  791.           const item = queryOne('.ecl-mega-menu__item--expanded', this.element);
  793.           if (item) {
  794.             const subList = queryOne('.ecl-mega-menu__sublist', item);
  795.             if (subList && this.openPanel.num === 1) {
  796.               const info = queryOne('.ecl-mega-menu__info', item);
  797.               if (info) {
  798.                 const bottomRect = info.getBoundingClientRect();
  799.                 const bottomInfo = bottomRect.bottom;
  800.                 availableHeight = window.innerHeight - bottomInfo - 16;
  801.                 subList.classList.add('ecl-mega-menu__sublist--scrollable');
  802.                 subList.style.height = `${availableHeight}px`;
  803.               }
  804.             } else if (subList) {
  805.               subList.classList.remove('ecl-mega-menu__sublist--scrollable');
  806.               subList.style.height = '';
  807.             }
  808.           }
  810.           if (this.openPanel.num === 2) {
  811.             const subItem = queryOne(
  812.               '.ecl-mega-menu__subitem--expanded',
  813.               this.element,
  814.             );
  815.             if (subItem) {
  816.               const subMega = queryOne(
  817.                 '.ecl-mega-menu__mega--level-2',
  818.                 subItem,
  819.               );
  820.               if (subMega) {
  821.                 const subMegaRect = subMega.getBoundingClientRect();
  822.                 const subMegaTop = subMegaRect.top;
  823.                 availableHeight = window.innerHeight - subMegaTop;
  824.                 subMega.style.height = `${availableHeight}px`;
  825.               }
  826.             }
  827.           }
  828.           const wrappers = queryAll('.ecl-mega-menu__wrapper', this.element);
  829.           if (wrappers) {
  830.             wrappers.forEach((wrapper) => {
  831.               wrapper.style.top = '';
  832.               wrapper.style.height = '';
  833.             });
  834.           }
  835.         }
  836.       }, 0);
  837.     } else {
  838.       setTimeout(() => {
  839.         // In desktop we get the bottom position of the whole site header
  840.         const siteHeader = queryOne('.ecl-site-header', document);
  841.         if (siteHeader) {
  842.           const headerRect = siteHeader.getBoundingClientRect();
  843.           const headerBottom = headerRect.bottom;
  844.           const item = queryOne(this.itemSelector, this.element);
  845.           const rect = item.getBoundingClientRect();
  846.           const rectHeight = rect.height;
  847.           const wrappers = queryAll('.ecl-mega-menu__wrapper', this.element);
  849.           if (wrappers) {
  850.             wrappers.forEach((wrapper) => {
  851.               wrapper.style.top = `${rectHeight}px`;
  852.             });
  853.           }
  854.           if (menuOverlay) {
  855.             menuOverlay.style.top = `${headerBottom}px`;
  856.           }
  857.         } else {
  858.           const bottomPosition = this.element.getBoundingClientRect().bottom;
  859.           if (menuOverlay) {
  860.             menuOverlay.style.top = `${bottomPosition}px`;
  861.           }
  862.         }
  863.       }, 0);
  864.     }
  865.   }
  867.   /**
  868.    * Handles keyboard events specific to the menu.
  869.    *
  870.    * @param {Event} e
  871.    */
  872.   handleKeyboard(e) {
  873.     const element = e.target;
  874.     const cList = element.classList;
  875.     const menuExpanded = this.element.getAttribute('aria-expanded');
  877.     // Detect press on Escape
  878.     if (e.key === 'Escape' || e.key === 'Esc') {
  879.       if (document.activeElement === element) {
  880.         element.blur();
  881.       }
  883.       if (menuExpanded === 'false') {
  884.         this.closeOpenDropdown();
  885.       }
  886.       return;
  887.     }
  888.     // Handle Keyboard on the first panel
  889.     if (cList.contains('ecl-mega-menu__info-link')) {
  890.       if (e.key === 'ArrowUp') {
  891.         if (this.isDesktop) {
  892.           // Focus on the expanded nav item
  893.           queryOne(
  894.             '.ecl-mega-menu__item--expanded button',
  895.             this.element,
  896.           ).focus();
  897.         } else if (this.back && !this.isDesktop) {
  898.           // focus on the back button
  899.           this.back.focus();
  900.         }
  901.       }
  902.       if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
  903.         // First item in the open dropdown.
  904.         element.parentElement.parentElement.nextSibling.firstChild.firstChild.firstChild.focus();
  905.       }
  906.     }
  908.     if (cList.contains('ecl-mega-menu__parent-link')) {
  909.       if (e.key === 'ArrowUp') {
  910.         const back = queryOne('.ecl-mega-menu__back', this.element);
  911.         back.focus();
  912.         return;
  913.       }
  914.       if (e.key === 'ArrowDown') {
  915.         const mega = e.target.nextSibling;
  916.         mega.firstElementChild.firstElementChild.firstChild.focus();
  917.         return;
  918.       }
  919.     }
  921.     // Handle keyboard on the see all links
  922.     if (element.parentElement.classList.contains('ecl-mega-menu__see-all')) {
  923.       if (e.key === 'ArrowUp') {
  924.         // Focus on the last element of the sub-list
  925.         element.parentElement.previousSibling.firstChild.focus();
  926.       }
  927.       if (e.key === 'ArrowDown') {
  928.         // Focus on the fi
  929.         const featured = element.parentElement.parentElement.nextSibling;
  930.         if (featured) {
  931.           const focusableSelectors = [
  932.             'a[href]',
  933.             'button:not([disabled])',
  934.             'input:not([disabled])',
  935.             'select:not([disabled])',
  936.             'textarea:not([disabled])',
  937.             '[tabindex]:not([tabindex="-1"])',
  938.           ];
  939.           const focusableElements = queryAll(
  940.             focusableSelectors.join(', '),
  941.             featured,
  942.           );
  943.           if (focusableElements.length > 0) {
  944.             focusableElements[0].focus();
  945.           }
  946.         }
  947.       }
  948.     }
  949.     // Handle keyboard on the back button
  950.     if (cList.contains('ecl-mega-menu__back')) {
  951.       if (e.key === 'ArrowDown') {
  952.         e.preventDefault();
  953.         const expanded = queryOne(
  954.           '[aria-expanded="true"]',
  955.           element.parentElement.nextSibling,
  956.         );
  957.         // We have an opened list
  958.         if (expanded) {
  959.           const innerExpanded = queryOne(
  960.             '.ecl-mega-menu__subitem--expanded',
  961.             expanded.parentElement,
  962.           );
  963.           // We have an opened sub-list
  964.           if (innerExpanded) {
  965.             const parentLink = queryOne(
  966.               '.ecl-mega-menu__parent-link',
  967.               innerExpanded,
  968.             );
  969.             if (parentLink) {
  970.               parentLink.focus();
  971.             }
  972.           } else {
  973.             const infoLink = queryOne(
  974.               '.ecl-mega-menu__info-link',
  975.               expanded.parentElement,
  976.             );
  977.             if (infoLink) {
  978.               infoLink.focus();
  979.             } else {
  980.               queryOne(
  981.                 '.ecl-mega-menu__subitem:first-child .ecl-mega-menu__sublink',
  982.                 expanded.parentElement,
  983.               ).focus();
  984.             }
  985.           }
  986.         }
  987.       }
  988.       if (e.key === 'ArrowUp') {
  989.         // Focus on the open button
  990.         this.open.focus();
  991.       }
  992.     }
  993.     // Key actions to navigate between first level menu items
  994.     if (cList.contains('ecl-mega-menu__link')) {
  995.       if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
  996.         e.preventDefault();
  997.         let prevItem = element.previousSibling;
  999.         if (prevItem && prevItem.classList.contains('ecl-mega-menu__link')) {
  1000.           prevItem.focus();
  1001.           return;
  1002.         }
  1004.         prevItem = element.parentElement.previousSibling;
  1005.         if (prevItem) {
  1006.           const prevLink = queryOne('.ecl-mega-menu__link', prevItem);
  1008.           if (prevLink) {
  1009.             prevLink.focus();
  1010.             return;
  1011.           }
  1012.         }
  1013.       }
  1014.       if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
  1015.         e.preventDefault();
  1016.         if (
  1017.           element.parentElement.getAttribute('aria-expanded') === 'true' &&
  1018.           e.key === 'ArrowDown'
  1019.         ) {
  1020.           const infoLink = queryOne(
  1021.             '.ecl-mega-menu__info-link',
  1022.             element.parentElement,
  1023.           );
  1024.           if (infoLink) {
  1025.             infoLink.focus();
  1026.             return;
  1027.           }
  1028.         }
  1029.         const nextItem = element.parentElement.nextSibling;
  1030.         if (nextItem) {
  1031.           const nextLink = queryOne('.ecl-mega-menu__link', nextItem);
  1033.           if (nextLink) {
  1034.             nextLink.focus();
  1035.             return;
  1036.           }
  1037.         }
  1038.       }
  1039.     }
  1040.     // Key actions to navigate between the sub-links
  1041.     if (cList.contains('ecl-mega-menu__sublink')) {
  1042.       if (e.key === 'ArrowDown') {
  1043.         e.preventDefault();
  1044.         const nextItem = element.parentElement.nextSibling;
  1045.         let nextLink = '';
  1046.         if (nextItem) {
  1047.           nextLink = queryOne('.ecl-mega-menu__sublink', nextItem);
  1048.           if (
  1049.             !nextLink &&
  1050.             nextItem.classList.contains('ecl-mega-menu__spacer')
  1051.           ) {
  1052.             nextLink = nextItem.nextSibling.firstElementChild;
  1053.           }
  1054.           if (nextLink) {
  1055.             nextLink.focus();
  1056.             return;
  1057.           }
  1058.         }
  1059.       }
  1060.       if (e.key === 'ArrowUp') {
  1061.         e.preventDefault();
  1062.         const prevItem = element.parentElement.previousSibling;
  1063.         if (prevItem) {
  1064.           const prevLink = queryOne('.ecl-mega-menu__sublink', prevItem);
  1066.           if (prevLink) {
  1067.             prevLink.focus();
  1068.           }
  1069.         } else {
  1070.           const moreLink = queryOne(
  1071.             '.ecl-mega-menu__info-link',
  1072.             element.parentElement.parentElement.parentElement.previousSibling,
  1073.           );
  1074.           if (moreLink) {
  1075.             moreLink.focus();
  1076.           } else if (this.openPanel.num === 2) {
  1077.             const parent = e.target.closest(
  1078.               '.ecl-mega-menu__mega',
  1079.             ).previousSibling;
  1080.             if (parent) {
  1081.               parent.focus();
  1082.             }
  1083.           } else if (this.back) {
  1084.             this.back.focus();
  1085.           }
  1086.         }
  1087.       }
  1088.     }
  1089.     if (e.key === 'ArrowRight') {
  1090.       const expanded =
  1091.         element.parentElement.getAttribute('aria-expanded') === 'true';
  1092.       if (expanded) {
  1093.         e.preventDefault();
  1094.         // Focus on the first element in the second panel
  1095.         element.nextSibling.firstElementChild.firstChild.firstChild.focus();
  1096.       }
  1097.     }
  1098.   }
  1100.   /**
  1101.    * Handles global keyboard events, triggered outside of the menu.
  1102.    *
  1103.    * @param {Event} e
  1104.    */
  1105.   handleKeyboardGlobal(e) {
  1106.     // Detect press on Escape
  1107.     if (e.key === 'Escape' || e.key === 'Esc') {
  1108.       if (this.isOpen) {
  1109.         this.closeOpenDropdown(true);
  1110.       }
  1111.     }
  1112.   }
  1114.   /**
  1115.    * Open menu list.
  1116.    *
  1117.    * @param {Event} e
  1118.    *
  1119.    * @fires MegaMenu#onOpen
  1120.    */
  1121.   handleClickOnOpen(e) {
  1122.     if (this.isOpen) {
  1123.       this.handleClickOnClose(e);
  1124.     } else {
  1125.       e.preventDefault();
  1126.       this.disableScroll();
  1127.       this.element.setAttribute('aria-expanded', 'true');
  1128.       this.element.classList.add('ecl-mega-menu--start-panel');
  1129.       this.element.classList.remove(
  1130.         'ecl-mega-menu--one-panel',
  1131.         'ecl-mega-menu--two-panels',
  1132.       );
  1133.       this.open.setAttribute('aria-expanded', 'true');
  1134.       this.inner.setAttribute('aria-hidden', 'false');
  1135.       this.isOpen = true;
  1137.       if (this.header) {
  1138.         this.header.classList.add(
  1139.           'ecl-site-header--open-menu',
  1140.           'ecl-site-header--open-menu-start',
  1141.         );
  1142.       }
  1144.       // Update label
  1145.       const closeLabel = this.element.getAttribute(this.labelCloseAttribute);
  1146.       if (this.toggleLabel && closeLabel) {
  1147.         this.toggleLabel.innerHTML = closeLabel;
  1148.       }
  1150.       this.positionMenuOverlay();
  1152.       // Focus first element
  1153.       if (this.links.length > 0) {
  1154.         this.links[0].focus();
  1155.       }
  1157.       this.trigger('onOpen', e);
  1158.     }
  1159.   }
  1161.   /**
  1162.    * Close menu list.
  1163.    *
  1164.    * @param {Event} e
  1165.    *
  1166.    * @fires Menu#onClose
  1167.    */
  1168.   handleClickOnClose(e) {
  1169.     if (this.element.getAttribute('aria-expanded') === 'true') {
  1170.       this.focusTrap.deactivate();
  1171.       this.closeOpenDropdown();
  1172.       this.trigger('onClose', e);
  1173.     } else {
  1174.       this.handleClickOnOpen(e);
  1175.     }
  1176.   }
  1178.   /**
  1179.    * Toggle menu list.
  1180.    *
  1181.    * @param {Event} e
  1182.    */
  1183.   handleClickOnToggle(e) {
  1184.     e.preventDefault();
  1186.     if (this.isOpen) {
  1187.       this.handleClickOnClose(e);
  1188.     } else {
  1189.       this.handleClickOnOpen(e);
  1190.     }
  1191.   }
  1193.   /**
  1194.    * Get back to previous list (on mobile)
  1195.    *
  1196.    * @fires MegaMenu#onBack
  1197.    */
  1198.   handleClickOnBack() {
  1199.     const infoPanels = queryAll('.ecl-mega-menu__info', this.element);
  1200.     infoPanels.forEach((info) => {
  1201.       info.style.top = '';
  1202.     });
  1203.     const level2 = queryOne('.ecl-mega-menu__subitem--expanded', this.element);
  1204.     if (level2) {
  1205.       this.element.classList.remove(
  1206.         'ecl-mega-menu--two-panels',
  1207.         'ecl-mega-menu--start-panel',
  1208.       );
  1209.       this.element.classList.add('ecl-mega-menu--one-panel');
  1210.       level2.setAttribute('aria-expanded', 'false');
  1211.       level2.classList.remove(
  1212.         'ecl-mega-menu__subitem--expanded',
  1213.         'ecl-mega-menu__subitem--current',
  1214.       );
  1215.       const itemLink = queryOne(this.subLinkSelector, level2);
  1216.       itemLink.setAttribute('aria-expanded', 'false');
  1217.       itemLink.classList.remove('ecl-mega-menu__parent-link');
  1218.       const siblings = level2.parentElement.childNodes;
  1219.       if (siblings) {
  1220.         siblings.forEach((sibling) => {
  1221.           sibling.style.display = '';
  1222.         });
  1223.       }
  1224.       if (this.header) {
  1225.         this.header.classList.remove('ecl-site-header--open-menu-start');
  1226.       }
  1227.       // Move the focus to the previously selected item
  1228.       if (this.backItemLevel2) {
  1229.         this.backItemLevel2.firstElementChild.focus();
  1230.       }
  1231.       this.openPanel.num = 1;
  1232.     } else {
  1233.       if (this.header) {
  1234.         if (this.headerBanner) {
  1235.           this.headerBanner.style.display = 'flex';
  1236.         }
  1237.         if (this.headerNotification) {
  1238.           this.headerNotification.style.display = 'flex';
  1239.         }
  1240.       }
  1241.       // Remove expanded class from inner menu
  1242.       this.inner.classList.remove('ecl-mega-menu__inner--expanded');
  1243.       this.element.classList.remove('ecl-mega-menu--one-panel');
  1244.       // Remove css class and attribute from menu items
  1245.       this.items.forEach((item) => {
  1246.         item.classList.remove(
  1247.           'ecl-mega-menu__item--expanded',
  1248.           'ecl-mega-menu__item--current',
  1249.         );
  1250.         const itemLink = queryOne(this.linkSelector, item);
  1251.         itemLink.setAttribute('aria-expanded', 'false');
  1252.       });
  1253.       // Move the focus to the previously selected item
  1254.       if (this.backItemLevel1) {
  1255.         this.backItemLevel1.firstElementChild.focus();
  1256.       } else {
  1257.         this.items[0].firstElementChild.focus();
  1258.       }
  1259.       this.openPanel.num = 0;
  1260.       if (this.header) {
  1261.         this.header.classList.add('ecl-site-header--open-menu-start');
  1262.       }
  1263.       this.positionMenuOverlay();
  1264.     }
  1266.     this.trigger('onBack', { level: level2 ? 2 : 1 });
  1267.   }
  1269.   /**
  1270.    * Show/hide the first panel
  1271.    *
  1272.    * @param {Node} menuItem
  1273.    * @param {string} op (expand or collapse)
  1274.    *
  1275.    * @fires MegaMenu#onOpenPanel
  1276.    */
  1277.   handleFirstPanel(menuItem, op) {
  1278.     switch (op) {
  1279.       case 'expand': {
  1280.         this.inner.classList.add('ecl-mega-menu__inner--expanded');
  1281.         this.positionMenuOverlay();
  1282.         this.checkDropdownHeight(menuItem);
  1283.         this.element.setAttribute('data-expanded', true);
  1284.         this.element.setAttribute('aria-expanded', 'true');
  1285.         this.element.classList.add('ecl-mega-menu--one-panel');
  1286.         this.element.classList.remove('ecl-mega-menu--start-panel');
  1287.         this.open.setAttribute('aria-expanded', 'true');
  1288.         if (this.header) {
  1289.           this.header.classList.add('ecl-site-header--open-menu');
  1290.           this.header.classList.remove('ecl-site-header--open-menu-start');
  1291.           if (!this.isDesktop) {
  1292.             if (this.headerBanner) {
  1293.               this.headerBanner.style.display = 'none';
  1294.             }
  1295.             if (this.headerNotification) {
  1296.               this.headerNotification.style.display = 'none';
  1297.             }
  1298.           }
  1299.         }
  1300.         this.disableScroll();
  1301.         this.isOpen = true;
  1302.         this.items.forEach((item) => {
  1303.           const itemLink = queryOne(this.linkSelector, item);
  1304.           if (itemLink.hasAttribute('aria-expanded')) {
  1305.             if (item === menuItem) {
  1306.               item.classList.add(
  1307.                 'ecl-mega-menu__item--expanded',
  1308.                 'ecl-mega-menu__item--current',
  1309.               );
  1310.               itemLink.setAttribute('aria-expanded', 'true');
  1311.               this.backItemLevel1 = item;
  1312.             } else {
  1313.               itemLink.setAttribute('aria-expanded', 'false');
  1314.               item.classList.remove(
  1315.                 'ecl-mega-menu__item--current',
  1316.                 'ecl-mega-menu__item--expanded',
  1317.               );
  1318.             }
  1319.           }
  1320.         });
  1322.         if (!this.isDesktop && this.back) {
  1323.           this.back.focus();
  1324.         }
  1326.         this.openPanel = {
  1327.           num: 1,
  1328.           item: menuItem,
  1329.         };
  1330.         const details = { panel: 1, item: menuItem };
  1331.         this.trigger('OnOpenPanel', details);
  1332.         if (this.isDesktop) {
  1333.           const list = queryOne('.ecl-mega-menu__sublist', menuItem);
  1334.           if (list) {
  1335.             // Expand the first item in the sublist if it contains children.
  1336.             const expandedChild = Array.from(
  1337.               list.children,
  1338.             )[0].firstElementChild.hasAttribute('aria-expanded')
  1339.               ? Array.from(list.children)[0]
  1340.               : false;
  1341.             if (expandedChild) {
  1342.               this.handleSecondPanel(expandedChild, 'expand');
  1343.             }
  1344.           }
  1345.         }
  1346.         break;
  1347.       }
  1349.       case 'collapse':
  1350.         this.closeOpenDropdown();
  1351.         break;
  1353.       default:
  1354.     }
  1355.   }
  1357.   /**
  1358.    * Show/hide the second panel
  1359.    *
  1360.    * @param {Node} menuItem
  1361.    * @param {string} op (expand or collapse)
  1362.    *
  1363.    * @fires MegaMenu#onOpenPanel
  1364.    */
  1365.   handleSecondPanel(menuItem, op) {
  1366.     const infoPanel = queryOne(
  1367.       '.ecl-mega-menu__info',
  1368.       menuItem.closest('.ecl-container'),
  1369.     );
  1370.     let siblings;
  1371.     switch (op) {
  1372.       case 'expand': {
  1373.         this.element.classList.remove(
  1374.           'ecl-mega-menu--one-panel',
  1375.           'ecl-mega-menu--start-panel',
  1376.         );
  1377.         this.element.classList.add('ecl-mega-menu--two-panels');
  1378.         this.subItems.forEach((item) => {
  1379.           const itemLink = queryOne(this.subLinkSelector, item);
  1380.           if (item === menuItem) {
  1381.             if (itemLink.hasAttribute('aria-expanded')) {
  1382.               itemLink.setAttribute('aria-expanded', 'true');
  1384.               if (!this.isDesktop) {
  1385.                 // We use this class mainly to recover the default behavior of the link.
  1386.                 itemLink.classList.add('ecl-mega-menu__parent-link');
  1387.                 if (this.back) {
  1388.                   this.back.focus();
  1389.                 }
  1390.               }
  1391.               item.classList.add('ecl-mega-menu__subitem--expanded');
  1392.             }
  1393.             item.classList.add('ecl-mega-menu__subitem--current');
  1394.             this.backItemLevel2 = item;
  1395.           } else {
  1396.             if (itemLink.hasAttribute('aria-expanded')) {
  1397.               itemLink.setAttribute('aria-expanded', 'false');
  1398.               itemLink.classList.remove('ecl-mega-menu__parent-link');
  1399.               item.classList.remove('ecl-mega-menu__subitem--expanded');
  1400.             }
  1401.             item.classList.remove('ecl-mega-menu__subitem--current');
  1402.           }
  1403.         });
  1405.         this.openPanel = { num: 2, item: menuItem };
  1406.         siblings = menuItem.parentNode.childNodes;
  1407.         if (this.isDesktop) {
  1408.           // Reset style for the siblings, in case they were hidden
  1409.           siblings.forEach((sibling) => {
  1410.             if (sibling !== menuItem) {
  1411.               sibling.style.display = '';
  1412.             }
  1413.           });
  1414.         } else {
  1415.           // Hide other items in the sublist
  1416.           siblings.forEach((sibling) => {
  1417.             if (sibling !== menuItem) {
  1418.               sibling.style.display = 'none';
  1419.             }
  1420.           });
  1421.         }
  1422.         this.positionMenuOverlay();
  1423.         const details = { panel: 2, item: menuItem };
  1424.         this.trigger('OnOpenPanel', details);
  1425.         break;
  1426.       }
  1428.       case 'collapse':
  1429.         this.element.classList.remove('ecl-mega-menu--two-panels');
  1430.         this.openPanel = { num: 1 };
  1431.         // eslint-disable-next-line no-case-declarations
  1432.         const itemLink = queryOne(this.subLinkSelector, menuItem);
  1433.         itemLink.setAttribute('aria-expanded', 'false');
  1434.         menuItem.classList.remove(
  1435.           'ecl-mega-menu__subitem--expanded',
  1436.           'ecl-mega-menu__subitem--current',
  1437.         );
  1438.         if (infoPanel) {
  1439.           infoPanel.style.top = '';
  1440.         }
  1441.         break;
  1443.       default:
  1444.     }
  1445.   }
  1447.   /**
  1448.    * Click on a menu item
  1449.    *
  1450.    * @param {Event} e
  1451.    *
  1452.    * @fires MegaMenu#onItemClick
  1453.    */
  1454.   handleClickOnItem(e) {
  1455.     let isInTheContainer = false;
  1456.     const menuItem = e.target.closest('li');
  1458.     const container = queryOne(
  1459.       '.ecl-mega-menu__mega-container-scrollable',
  1460.       menuItem,
  1461.     );
  1462.     if (container) {
  1463.       isInTheContainer = container.contains(e.target);
  1464.     }
  1465.     // We need to ensure that the click doesn't come from a parent link
  1466.     // or from an open container, in that case we do not act.
  1467.     if (
  1468.       !e.target.classList.contains(
  1469.         'ecl-mega-menu__mega-container-scrollable',
  1470.       ) &&
  1471.       !isInTheContainer
  1472.     ) {
  1473.       this.trigger('onItemClick', { item: menuItem, event: e });
  1474.       const hasChildren =
  1475.         menuItem.firstElementChild.getAttribute('aria-expanded');
  1476.       if (hasChildren && menuItem.classList.contains('ecl-mega-menu__item')) {
  1477.         e.preventDefault();
  1478.         e.stopPropagation();
  1479.         if (!this.isDesktop) {
  1480.           this.handleFirstPanel(menuItem, 'expand');
  1481.         } else {
  1482.           const isOpen = hasChildren === 'true';
  1483.           if (isOpen) {
  1484.             this.handleFirstPanel(menuItem, 'collapse');
  1485.           } else {
  1486.             this.closeOpenDropdown();
  1487.             this.handleFirstPanel(menuItem, 'expand');
  1488.           }
  1489.         }
  1490.       }
  1491.     }
  1492.   }
  1494.   /**
  1495.    * Click on a subitem
  1496.    *
  1497.    * @param {Event} e
  1498.    */
  1499.   handleClickOnSubitem(e) {
  1500.     const menuItem = e.target.closest(this.subItemSelector);
  1501.     if (menuItem && menuItem.firstElementChild.hasAttribute('aria-expanded')) {
  1502.       const parentLink = queryOne('.ecl-mega-menu__parent-link', menuItem);
  1503.       if (parentLink) {
  1504.         return;
  1505.       }
  1506.       e.preventDefault();
  1507.       e.stopPropagation();
  1508.       const isExpanded =
  1509.         menuItem.firstElementChild.getAttribute('aria-expanded') === 'true';
  1511.       if (isExpanded) {
  1512.         this.handleSecondPanel(menuItem, 'collapse');
  1513.       } else {
  1514.         this.handleSecondPanel(menuItem, 'expand');
  1515.       }
  1516.     }
  1517.   }
  1519.   /**
  1520.    * Deselect any opened menu item
  1521.    *
  1522.    * @param {boolean} esc, whether the call was originated by a press on Esc
  1523.    *
  1524.    * @fires MegaMenu#onFocusTrapToggle
  1525.    */
  1526.   closeOpenDropdown(esc = false) {
  1527.     if (this.header) {
  1528.       this.header.classList.remove(
  1529.         'ecl-site-header--open-menu',
  1530.         'ecl-site-header--open-menu-start',
  1531.       );
  1532.       if (this.headerBanner) {
  1533.         this.headerBanner.style.display = 'flex';
  1534.       }
  1535.       if (this.headerNotification) {
  1536.         this.headerNotification.style.display = 'flex';
  1537.       }
  1538.     }
  1539.     this.enableScroll();
  1540.     this.element.setAttribute('aria-expanded', 'false');
  1541.     this.element.removeAttribute('data-expanded');
  1542.     this.element.classList.remove(
  1543.       'ecl-mega-menu--start-panel',
  1544.       'ecl-mega-menu--two-panels',
  1545.       'ecl-mega-menu--one-panel',
  1546.     );
  1547.     this.open.setAttribute('aria-expanded', 'false');
  1548.     // Remove css class and attribute from inner menu
  1549.     this.inner.classList.remove('ecl-mega-menu__inner--expanded');
  1551.     // Reset heights
  1552.     const megaMenus = queryAll(
  1553.       '.ecl-mega-menu__item > .ecl-mega-menu__wrapper > .ecl-container > [data-ecl-mega-menu-mega]',
  1554.       this.element,
  1555.     );
  1556.     megaMenus.forEach((mega) => {
  1557.       mega.style.height = '';
  1558.       mega.style.top = '';
  1559.     });
  1560.     let currentItem = false;
  1561.     // Remove css class and attribute from menu items
  1562.     this.items.forEach((item) => {
  1563.       item.classList.remove('ecl-mega-menu__item--current');
  1564.       const itemLink = queryOne(this.linkSelector, item);
  1565.       if (itemLink.getAttribute('aria-expanded') === 'true') {
  1566.         item.classList.remove('ecl-mega-menu__item--expanded');
  1567.         itemLink.setAttribute('aria-expanded', 'false');
  1568.         currentItem = itemLink;
  1569.       }
  1570.     });
  1571.     // Remove css class and attribute from menu subitems
  1572.     this.subItems.forEach((item) => {
  1573.       item.classList.remove('ecl-mega-menu__subitem--current');
  1574.       item.style.display = '';
  1575.       const itemLink = queryOne(this.subLinkSelector, item);
  1576.       if (itemLink.hasAttribute('aria-expanded')) {
  1577.         item.classList.remove('ecl-mega-menu__subitem--expanded');
  1578.         item.style.display = '';
  1579.         itemLink.setAttribute('aria-expanded', 'false');
  1580.         itemLink.classList.remove('ecl-mega-menu__parent-link');
  1581.       }
  1582.     });
  1583.     // Remove styles set for the sublists
  1584.     const sublists = queryAll('.ecl-mega-menu__sublist');
  1585.     if (sublists) {
  1586.       sublists.forEach((sublist) => {
  1587.         sublist.classList.remove(
  1588.           'ecl-mega-menu__sublist--no-border',
  1589.           '.ecl-mega-menu__sublist--scrollable',
  1590.         );
  1591.       });
  1592.     }
  1593.     // Update label
  1594.     const openLabel = this.element.getAttribute(this.labelOpenAttribute);
  1595.     if (this.toggleLabel && openLabel) {
  1596.       this.toggleLabel.innerHTML = openLabel;
  1597.     }
  1598.     this.openPanel = {
  1599.       num: 0,
  1600.       item: false,
  1601.     };
  1602.     // If the focus trap is active, deactivate it
  1603.     this.focusTrap.deactivate();
  1604.     // Focus on the open button in mobile or on the formerly expanded item in desktop.
  1605.     if (!this.isDesktop && this.open && esc) {
  1606.       this.open.focus();
  1607.     } else if (this.isDesktop && currentItem && esc) {
  1608.       currentItem.focus();
  1609.     }
  1610.     this.trigger('onFocusTrapToggle', { active: false });
  1611.     this.isOpen = false;
  1612.   }
  1614.   /**
  1615.    * Focus out of a menu link
  1616.    *
  1617.    * @param {Event} e
  1618.    *
  1619.    * @fires MegaMenu#onFocusTrapToggle
  1620.    */
  1621.   handleFocusOut(e) {
  1622.     const element = e.target;
  1623.     const menuExpanded = this.element.getAttribute('aria-expanded');
  1625.     // Specific focus action for mobile menu
  1626.     // Loop through the items and go back to close button
  1627.     if (menuExpanded === 'true' && !this.isDesktop) {
  1628.       const nextItem = element.parentElement.nextSibling;
  1630.       if (!nextItem) {
  1631.         const nextFocusTarget = e.relatedTarget;
  1632.         if (!this.element.contains(nextFocusTarget)) {
  1633.           // This is the last item, go back to close button
  1634.           this.focusTrap.activate();
  1635.           this.trigger('onFocusTrapToggle', {
  1636.             active: true,
  1637.             lastFocusedEl: element.parentElement,
  1638.           });
  1639.         }
  1640.       }
  1641.     }
  1642.   }
  1644.   /**
  1645.    * Handles global click events, triggered outside of the menu.
  1646.    *
  1647.    * @param {Event} e
  1648.    */
  1649.   handleClickGlobal(e) {
  1650.     if (
  1651.       !e.target.classList.contains(
  1652.         'ecl-mega-menu__mega-container-scrollable',
  1653.       ) &&
  1654.       (e.target.classList.contains('ecl-mega-menu__overlay') ||
  1655.         !this.element.contains(e.target)) &&
  1656.       this.isOpen
  1657.     ) {
  1658.       this.closeOpenDropdown();
  1659.     }
  1660.   }
  1661. }
  1663. export default MegaMenu;