` listItem.insertAdjacentHTML('beforeend', arrowIcon); } else { const viewAllLink = self.createLinkElement(categoryLabel, level, list); listItem.appendChild(viewAllLink); } list.appendChild(listItem); } for (const category of categories) { if (this.skipCategories.includes(category.label)) { continue; } const item = document.createElement('li'); let categoryLabel = category.label.trim(); const link = self.createLinkElement(categoryLabel, level, item); item.appendChild(link); if (category.children.length > 0) { item.classList.add('has-subnav'); if (level === 0) { item.classList.add('top-navigation', 'w-full', 'max-w-[276px]', 'mx-2'); } let subnavList = self.createCategoryList(category.children, level + 1, categoryLabel); subnavList.classList.add('subnav-list'); if (level + 1 > 1) { subnavList.classList.add('hidden'); } item.appendChild(subnavList); } else if ( level === 1 && !this.skipSubCategories.includes(categoryLabel) ) { const subnavList = self.createCategoryList([], level + 1); subnavList.classList.add('subnav-list', 'hidden'); item.appendChild(subnavList); } list.appendChild(item); } return list; }, createLinkElement(categoryLabel = null, level, item) { const self = this; const link = document.createElement('a'); link.setAttribute('data-selector', 'search-mega-menu-link'); link.textContent = 'View All'; if (categoryLabel !== null) { link.textContent = categoryLabel; } if (level) { link.setAttribute('href', '#'); link.classList.add('block', 'mb-1.5', 'hover:font-bold'); } else { link.classList.add('block', 'font-bold', 'mb-3'); } link.dataset.level = level; if (level) { link.addEventListener('click', function (e) { if (e.target.getAttribute('href') === '#') { e.preventDefault(); } else { self.closeMenu(); } }); link.addEventListener('mousedown', function (e) { let subnav = item.querySelector('.subnav-list'); let currentLevel = e.target.dataset.level; const linkLabel = e.target.textContent.trim(); if (parseInt(currentLevel) === 1) { self.unselectPreviousMenu(e.target, currentLevel); e.target.classList.toggle('font-bold'); const previousLevel = parseInt(currentLevel) - 1; const parentTopNav = e.target.closest('li.top-navigation'); const parentLevel = parentTopNav.querySelector('[data-level="' + previousLevel.toString() + '"]'); self.categoriesLabel = []; self.categoriesLabel.push(parentLevel.textContent.trim()); } if (subnav && categoryLabel !== null && level < self.maxCategoryLevel) { self.categoriesLabel.push(linkLabel); subnav.classList.add('pl-3', 'mb-3', 'pb-1.5', 'border-b', 'border-mbgray-110'); subnav.classList.toggle('hidden'); e.preventDefault(); } else { let labelText = ''; const customer = JSON.parse(localStorage.getItem('mage-cache-storage') || '{}')?.customer || {}; for (const label of self.categoriesLabel) { if (labelText.length < 1) { labelText = label; } else { labelText = label + ' > ' + labelText; } } labelText = 'Products' + ' > ' + labelText + ' > ' + (categoryLabel || 'View All'); const obj = { 'event': 'main_nav_interaction', 'interaction_element': labelText, 'active_project_name': customer?.current_project_name, 'active_project_id': customer?.current_project }; mitGTM.sendEvent(obj); self.redirectLink(categoryLabel, e.target); } }); } return link; }, redirectLink(lastLabel = null, element) { const baseUrl = BASE_URL; const taxonomyFilter = 'search?q=#/filter:taxonomy:'; const endOfUrl = `#/page:1#/megaMenuLink=true`; let categoriesLabel = this.categoriesLabel.join('$253E'); categoriesLabel = categoriesLabel.replace(/\s+/g, '$2520'); if (lastLabel) { categoriesLabel += '$253E' + lastLabel.replace(/\s+/g, '$2520'); } // Remove saved SS query, to prevent taxonomy redirect with query and wrong results sessionStorage.removeItem('persistentQuery'); document.dispatchEvent(new CustomEvent('megaMenuClick', {})); const customCategory = this.categoriesLabel.find(element => element in this.customCategories); // Category page entrypoint // https://materialbank.atlassian.net/browse/MB20F-6159 if ( ( customCategory && lastLabel === this.exploreAllLabel ) || this.customCategories[lastLabel] ) { element.href = `${baseUrl}` + this.customCategories[customCategory || lastLabel]; } else { element.href = baseUrl + taxonomyFilter + categoriesLabel + endOfUrl; } }, redirectToSearch($event) { const target = $event.target; this.closeMenu(); if (target.classList.contains('backdrop')) { window.location.href = BASE_URL + 'search#/page:1'; } }, setMenuBanner() { if (this.menuBanner !== null) { return; } const bannerEl = document.getElementById('megamenu_banner'); if (bannerEl) { const banner = this.setAndReturnBanner(); if (!banner || typeof banner.img_url === 'undefined') { return; } this.menuBanner = banner; bannerEl.style.backgroundImage = `url('${MEDIA_URL}${banner.img_url}')`; } }, getBannerId() { const bannerIds = Object.keys(this.menuGraphics); if (!bannerIds.length) { return; } const lastBannerId = hyva.getBrowserStorage().getItem('megamenu-latest-banner-id'); if (lastBannerId) { const idIndex = bannerIds.findIndex(bannerId => bannerId === lastBannerId); if (idIndex >= 0) { // Check if there's a next banner ID, if not, return the first banner return bannerIds.length > idIndex + 1 ? bannerIds[idIndex + 1] : bannerIds[0]; } } return bannerIds[0]; }, setAndReturnBanner() { const bannerId = this.getBannerId(); if (!bannerId) { return; } return this.menuGraphics[bannerId]; }, setCurrentBannerId() { if (!this.menuBanner && !this.setAndReturnBanner()) { return; } hyva.getBrowserStorage().setItem('megamenu-latest-banner-id', this.menuBanner.id); }, } }
