function updateMobileClass(minWidth = MegaMenuCONFIG.minWidth) { const classList = document.documentElement.classList; const viewportWidth = document.documentElement.clientWidth; const isMobile = viewportWidth < minWidth; if (isMobile) { classList.add('dwc-mobile'); } else { classList.remove('dwc-mobile'); } } updateMobileClass(); // Centered Logo functionality class CenteredLogoController { constructor(config = {}) { this.config = { enable: config.enable ?? CenteredLogoCONFIG.enable, allowOddItems: config.allowOddItems ?? CenteredLogoCONFIG.allowOddItems, forceCenteredLogo: config.forceCenteredLogo ?? CenteredLogoCONFIG.forceCenteredLogo, centerNudge: config.centerNudge ?? CenteredLogoCONFIG.centerNudge, roundOffFactor: config.roundOffFactor || CenteredLogoCONFIG.roundOffFactor, headerSelector: config.headerSelector || MegaMenuCONFIG.headerSelector }; this.logoListItem = null; this.listItems = []; this.resizedFinished = null; this.isInitialized = false; } // Method to check if DOM elements are ready checkDOMReady() { const headerLogo = document.querySelector(`${this.config.headerSelector} .dwc-nest-menu__logo`); const headerInner = document.querySelector(`${this.config.headerSelector} .dwc-nest-header__container`); const menu = document.querySelector(`${this.config.headerSelector} .dwc-nest-menu`); const listParent = document.querySelector(`${this.config.headerSelector} .brx-nav-nested-items`); return headerLogo && headerInner && menu && listParent; } // Early initialization attempt initializeEarly() { if (!this.config.enable || this.isInitialized) return; // Try immediate initialization if elements are ready if (this.checkDOMReady()) { document.body.classList.add('dom-ready') this.setupElements(); this.initialize(); return; } // If not ready, use polling with shorter intervals for faster response const pollForElements = () => { if (this.checkDOMReady()) { this.setupElements(); this.initialize(); return; } // Poll every 10ms for very fast response setTimeout(pollForElements, 10); }; pollForElements(); } setupElements() { this.elements = { headerLogo: document.querySelector(`${this.config.headerSelector} .dwc-nest-menu__logo`), headerInner: document.querySelector(`${this.config.headerSelector} .dwc-nest-header__container`), menu: document.querySelector(`${this.config.headerSelector} .dwc-nest-menu`), listParent: document.querySelector(`${this.config.headerSelector} .brx-nav-nested-items`) }; } initialize() { if (!this.config.enable || this.isInitialized) { return; } // Ensure elements are set up before proceeding if (!this.elements) { this.setupElements(); } // Check if all required elements exist if (!this.elements.headerLogo || !this.elements.headerInner || !this.elements.menu || !this.elements.listParent) { return; } this.isInitialized = true; // Create logo list item this.logoListItem = document.createElement('li'); this.logoListItem.classList.add('dwc-header-logo-item'); // Get list items excluding those with toggle divs, and exclude empty li this.listItems = Array.from(this.elements.listParent.children).filter(item => { const hasToggleDiv = item.querySelector('.brx-toggle-div'); const isEmpty = item.matches('li:empty'); return !hasToggleDiv && !isEmpty; }); // Calculate position const halfIndex = this.listItems.length / 2; const logoOrder = this.roundHalfIndex(halfIndex, this.config.roundOffFactor); this.logoListItem.style.order = logoOrder; // Apply centering immediately this.centerLogo(logoOrder); // Add resize listener window.addEventListener('resize', this.centerLogo.bind(this, logoOrder)); } roundHalfIndex(halfIndex, roundOffFactor) { if (roundOffFactor === 'before') { return Math.floor(halfIndex + 1); } else { return Math.ceil(halfIndex + 1); } } centerLogo(logoOrder) { if (!this.config.allowOddItems && this.listItems.length % 2 !== 0) { return; } clearTimeout(this.resizedFinished); this.resizedFinished = setTimeout(() => { const isDesktop = window.innerWidth >= MegaMenuCONFIG.minWidth; if (isDesktop) { document.body.classList.add('desktop-centered') let listID = 1; // Set order for list items this.listItems.forEach(listItem => { if (!listItem.dataset.id) { listItem.dataset.id = listID++; } this.logoListItem.style.order = logoOrder; listItem.style.order = listItem.getAttribute('data-id'); }); if (!this.elements.listParent.contains(this.logoListItem) || !this.elements.listParent.contains(this.elements.headerLogo)) { this.elements.listParent.prepend(this.logoListItem); this.logoListItem.append(this.elements.headerLogo); this.elements.headerInner.classList.add('dwc-logo-is-centered'); const logoBounds = this.elements.headerLogo.getBoundingClientRect(); const viewportWidth = document.documentElement.clientWidth; const logoWidth = this.elements.headerLogo.offsetWidth; const distanceRight = logoBounds.x; // Force center if needed if (this.config.forceCenteredLogo) { const rightOffset = ((distanceRight + (logoWidth / 2)) + this.config.centerNudge) - (viewportWidth / 2); const offsetMargin = rightOffset * 2; this.elements.menu.style.marginRight = offsetMargin + 'px'; } if (CenteredLogoCONFIG.centerGuide) { if (document.body.classList.contains('logged-in')) { // Check if the indicator already exists if (!document.querySelector('.dwc-center-guide')) { const indicatorEl = document.createElement('div') indicatorEl.classList.add('dwc-center-guide') indicatorEl.style.width = this.elements.headerLogo.offsetWidth + 'px'; document.body.appendChild(indicatorEl) } } } } } else { document.body.classList.remove('desktop-centered'); this.elements.headerInner.classList.add('dwc-logo-is-centered'); this.elements.menu.style.marginRight = null; this.elements.headerInner.prepend(this.elements.headerLogo); this.logoListItem.style.order = null; this.listItems.forEach(listItem => { listItem.style.order = null; }); } }, 500); } } class MenuAnimationController { constructor(config = {}) { this.config = { minWidthThreshold: config.minWidthThreshold || MegaMenuCONFIG.minWidth, stripeStyle: config.stripeStyle ?? MegaMenuCONFIG.stripeStyle, adaptiveHeight: config.adaptiveHeight ?? MegaMenuCONFIG.adaptiveHeight, toolTip: config.toolTip ?? MegaMenuCONFIG.toolTip, menuAutoExpansion: config.menuAutoExpansion ?? MegaMenuCONFIG.menuAutoExpansion, headerSelector: config.headerSelector || MegaMenuCONFIG.headerSelector, navTopLinksSelector: `${config.headerSelector || MegaMenuCONFIG.headerSelector} .brxe-dropdown.brx-has-megamenu`, offCanvasSelector: `${config.headerSelector || MegaMenuCONFIG.headerSelector} .dwc-nest-menu[data-offcanvas="true"]`, shiftFactor: config.shiftFactor ?? MegaMenuCONFIG.shiftFactor, // Added shiftFactor minOverflow: config.minOverflow ?? MegaMenuCONFIG.minOverflow // Added minOverflow }; this.navTopLinks = document.querySelectorAll(this.config.navTopLinksSelector); this.header = document.querySelector(this.config.headerSelector); this.maxMenuWidth = 0; this.maxMenuHeight = 0; this.headerTimeoutId = null; this.mobileMenuTimeoutId = null; this.applyConfigClasses(); } applyConfigClasses() { if (MegaMenuCONFIG.stripeStyle) { document.body.classList.add('dwc-stripe-style'); } if (MegaMenuCONFIG.adaptiveHeight) { document.body.classList.add('dwc-adaptive-height'); } if (this.header) { this.header.style.setProperty('--stripe-style-enabled', this.config.stripeStyle ? '1' : '0'); this.header.style.setProperty('--height-animation-enabled', this.config.adaptiveHeight ? '1' : '0'); } } /* isAboveMinWidth() { return window.innerWidth >= this.config.minWidthThreshold; } */ getViewportWidth() { // Check if window exists (for SSR/Node environments) if (typeof window === 'undefined') return 0; return window.innerWidth || document.documentElement?.clientWidth || document.body?.clientWidth || 0; } isAboveMinWidth() { return this.getViewportWidth() >= this.config.minWidthThreshold; } isOffCanvas() { return !!document.querySelector(this.config.offCanvasSelector); } hasHeaderClass() { return document.body.classList.contains('brx-header-left') || document.body.classList.contains('brx-header-right'); } updateMenuVariables() { if (!this.isAboveMinWidth() || !this.header) return; let menuOpened = false; let menuWidth = 0; let menuHeight = 0; let menuLeftOffset = 0; this.navTopLinks.forEach(link => { if (link.classList.contains('open')) { requestAnimationFrame(() => { let dropdownMenu = link.querySelector('.brx-dropdown-content'); let nestHeader = link.closest(this.config.headerSelector); if (dropdownMenu) { menuWidth = dropdownMenu.offsetWidth; menuHeight = dropdownMenu.offsetHeight; menuLeftOffset = Number(dropdownMenu.getBoundingClientRect().left) - Number(nestHeader.getBoundingClientRect().left) + window.scrollX; this.maxMenuWidth = Math.max(this.maxMenuWidth, menuWidth); this.maxMenuHeight = Math.max(this.maxMenuHeight, menuHeight); let scaleX = menuWidth / this.maxMenuWidth; let scaleY = menuHeight / this.maxMenuHeight; if (this.config.adaptiveHeight || this.config.stripeStyle) { this.header.style.setProperty('--dropdown-menu-height', `${menuHeight}px`); } if (this.config.stripeStyle) { this.header.style.setProperty('--dropdown-menu-x', `${menuLeftOffset}px`); this.header.style.setProperty('--dropdown-menu-width', `${menuWidth}px`); this.header.style.setProperty('--dropdown-menu-max-width', `${this.maxMenuWidth}px`); this.header.style.setProperty('--dropdown-menu-max-height', `${this.maxMenuHeight}px`); this.header.style.setProperty('--dropdown-menu-scale-x', scaleX.toString()); this.header.style.setProperty('--dropdown-menu-scale-y', scaleY.toString()); } } }); menuOpened = true; this.header.classList.add('show-menu-animation'); this.header.classList.remove('hide-menu-animation'); } }); if (!menuOpened) { const hasAdaptiveHeight = document.body.classList.contains('dwc-adaptive-height'); const hasStripeStyle = document.body.classList.contains('dwc-stripe-style'); if (hasAdaptiveHeight && !hasStripeStyle) { this.header.style.setProperty('--dropdown-menu-height', '0px'); } this.header.style.setProperty('--dropdown-menu-scale-y', '0'); if (this.header) { this.header.classList.add('hide-menu-animation'); this.header.classList.remove('show-menu-animation'); } } } updateDropdownPositions() { const viewportWidth = document.documentElement.clientWidth; if (viewportWidth < this.config.minWidthThreshold) return; // Run only on desktop const dropdowns = document.querySelectorAll(`${this.config.headerSelector} .dwc-nest-menu .brx-has-megamenu .brx-dropdown-content`); const defaultElement = document.querySelector('#brx-header'); const defaultRect = defaultElement ? defaultElement.getBoundingClientRect() : null; requestAnimationFrame(() => { dropdowns.forEach((dropdown) => { // Check for individual data-content-width attribute const localSelector = dropdown.getAttribute('data-content-width'); if (localSelector) { // Check if it's a number (integer only) if (/^\d+$/.test(localSelector)) { // Use the number directly as pixel value dropdown.style.setProperty('--dropdown-content-width', `${localSelector}px`); } else { // Treat as selector and look for the element in document const targetElement = document.querySelector(localSelector); if (targetElement) { // Get the width of the target element and set it as CSS variable const targetWidth = targetElement.getBoundingClientRect().width; dropdown.style.setProperty('--dropdown-content-width', `${targetWidth}px`); } } } else { // Check for global data-global-content-width on .dwc-nest-menu const nestMenu = document.querySelector('.dwc-nest-menu'); const globalSelector = nestMenu ? nestMenu.getAttribute('data-global-content-width') : null; if (globalSelector) { // Check if it's a number (integer only) if (/^\d+$/.test(globalSelector)) { // Use the number directly as pixel value dropdown.style.setProperty('--dropdown-content-width', `${globalSelector}px`); } else { // Treat as selector and look for the element in document const globalTargetElement = document.querySelector(globalSelector); if (globalTargetElement) { // Get the width of the global target element and set it as CSS variable const globalTargetWidth = globalTargetElement.getBoundingClientRect().width; dropdown.style.setProperty('--dropdown-content-width', `${globalTargetWidth}px`); } } } } const computedStyle = getComputedStyle(dropdown); const contentWidth = parseInt(computedStyle.getPropertyValue('--dropdown-content-width'), 10); // Extract scale factor from transform const transform = computedStyle.transform || computedStyle.webkitTransform; let scaleX = 1; if (transform && transform !== 'none') { const matrix = transform.match(/^matrix\((.+)\)$/); if (matrix) { const values = matrix[1].split(', '); scaleX = parseFloat(values[0]); } } const parentLi = dropdown.closest('.brx-has-megamenu.brxe-dropdown'); if (!parentLi) return; const contentAlign = dropdown.getAttribute('data-content-align'); const validAlignments = ['left', 'center', 'right']; const hasValidAlignment = contentAlign && validAlignments.includes(contentAlign); let leftPosition; const liRect = parentLi.getBoundingClientRect(); const dropdownRect = dropdown.getBoundingClientRect(); // Calculate actual width by dividing by the scale factor const actualDropdownWidth = dropdownRect.width / scaleX; if (!hasValidAlignment) { if (defaultRect) { // Account for window scroll and parent container position const headerElement = defaultElement; const headerRect = headerElement ? headerElement.getBoundingClientRect() : null; if (headerRect) { const headerLeftOffset = headerRect.left + window.scrollX; leftPosition = (defaultRect.width - actualDropdownWidth) / 2 - (liRect.left - headerLeftOffset); } else { leftPosition = 0; } } else { leftPosition = 0; } } else { switch (contentAlign) { case 'left': leftPosition = 0; const rightEdge = liRect.left + actualDropdownWidth; if (rightEdge >= viewportWidth) { let overflow = rightEdge - viewportWidth; if (overflow > 0 && overflow < this.config.minOverflow) overflow = this.config.minOverflow; leftPosition -= overflow * this.config.shiftFactor; } break; case 'right': leftPosition = liRect.width - actualDropdownWidth; const leftEdge = liRect.left + leftPosition; if (leftEdge <= 0) { let overflow = -leftEdge; if (overflow > 0 && overflow < this.config.minOverflow) overflow = this.config.minOverflow; leftPosition += overflow * this.config.shiftFactor; } break; case 'center': leftPosition = (liRect.width - actualDropdownWidth) / 2; break; } } dropdown.style.setProperty('--left-position', `${leftPosition}px`); if (!dropdown.style.getPropertyValue('--left-position')) { dropdown.style.setProperty('--left-position', '0px'); } }); }); } setCurrentPageDropdownActive() { if (!this.config.menuAutoExpansion) return; const isDesktop = window.innerWidth >= this.config.minWidthThreshold; const hasSpecialHeader = document.body.classList.contains('brx-header-left') || document.body.classList.contains('brx-header-right'); const isOffCanvas = !!document.querySelector(this.config.offCanvasSelector); if (isDesktop && !hasSpecialHeader && !isOffCanvas) return; const currentPageLink = document.querySelector('[aria-current="page"]'); if (currentPageLink) { const parentDropdown = currentPageLink.closest('.brxe-dropdown'); if (parentDropdown) { setTimeout(() => { parentDropdown.classList.add('open', 'active'); const submenuToggle = parentDropdown.querySelector('.brx-submenu-toggle'); let button = submenuToggle ? submenuToggle.querySelector('button') : null; const menuToggle = document.querySelector('.dwc-nest-menu .brxe-toggle'); if (button) { menuToggle.addEventListener('click', () => { setTimeout(() => { const submenuIsOpen = parentDropdown.classList.contains('open', 'active'); if (submenuIsOpen) { button.setAttribute('aria-expanded', 'true'); } }, 100) }); } setTimeout(() => { currentPageLink.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); }, 600); }, 700); } } } updateChevronPosition(targetLink) { if (!this.config.stripeStyle) return; requestAnimationFrame(() => { let headerElement = document.querySelector(this.config.headerSelector); if (!headerElement) { console.error('Chevron parent element not found.'); return; } let linkRect = targetLink.getBoundingClientRect(); let linkMidpoint = linkRect.left + linkRect.width / 2; let headerRect = headerElement.getBoundingClientRect(); let headerLeftOffset = headerRect.left + window.scrollX; headerElement.style.setProperty('--chevron-parent-width', `${headerRect.width}px`); headerElement.style.setProperty('--chevron-parent-left', `${headerLeftOffset}px`); headerElement.style.setProperty('--navlink-midpoint', `${linkMidpoint - headerLeftOffset}px`); headerElement.style.setProperty('--navlink-left', `${linkRect.left - headerLeftOffset}px`); headerElement.style.setProperty('--navlink-width', `${linkRect.width}px`); }); } updateHeaderHeight() { if (this.headerTimeoutId) { clearTimeout(this.headerTimeoutId); } requestAnimationFrame(() => { if (this.header) { this.headerTimeoutId = setTimeout(() => { let headerHeight = this.header.offsetHeight; document.body.style.setProperty('--dwc-nest-header-height', `${headerHeight}px`); }, 300); } }); } setMobileMenuTopHeight() { if (this.mobileMenuTimeoutId) { clearTimeout(this.mobileMenuTimeoutId); } let mobileMenuTop = document.querySelector('.dwc-nest-menu-top'); if (!mobileMenuTop) { console.error('Mobile menu top element not found'); return; } this.mobileMenuTimeoutId = setTimeout(() => { let menuTopHeight = mobileMenuTop.offsetHeight; document.body.style.setProperty('--mobile-menu-top-height', `${menuTopHeight}px`); }, 1000); } updateMobileLogo() { let mobileLogo = document.querySelector('.dwc-nest-menu__mobile-logo'); let desktopLogo = document.querySelector('.dwc-nest-menu__logo'); if (!mobileLogo) { console.error('Mobile logo container not found'); return; } if (!desktopLogo) { console.error('Desktop logo container not found'); return; } // Updated to check for either img or svg in desktop logo let desktopLogoElement = desktopLogo.querySelector('img, svg'); if (!desktopLogoElement) return; // Check if mobile logo has an image or SVG const currentMobileLogo = mobileLogo.querySelector('img, svg'); // Store original logo data if not already stored if (!mobileLogo.hasAttribute('data-original-logo-type') && currentMobileLogo) { // Get logo type (img or svg) const logoType = currentMobileLogo.tagName.toLowerCase(); mobileLogo.setAttribute('data-original-logo-type', logoType); if (logoType === 'img') { mobileLogo.setAttribute('data-original-logo-src', currentMobileLogo.src); mobileLogo.setAttribute('data-original-logo-alt', currentMobileLogo.alt || ''); mobileLogo.setAttribute('data-original-logo-class', currentMobileLogo.className || ''); } else if (logoType === 'svg') { // Store SVG content as a string mobileLogo.setAttribute('data-original-logo-content', currentMobileLogo.outerHTML); mobileLogo.setAttribute('data-original-logo-class', currentMobileLogo.getAttribute('class') || ''); } } if (this.isAboveMinWidth()) { if (currentMobileLogo) { mobileLogo.removeChild(currentMobileLogo); } // Clone desktop logo (either img or svg) let newLogo = desktopLogoElement.cloneNode(true); newLogo.removeAttribute('id'); // mobileLogo.appendChild(newLogo); } else { // For mobile view const originalLogoType = mobileLogo.getAttribute('data-original-logo-type'); if (!currentMobileLogo) { // If no current logo, clone desktop logo let mobileLogoElement = desktopLogoElement.cloneNode(true); mobileLogoElement.removeAttribute('id'); mobileLogo.appendChild(mobileLogoElement); } else if (originalLogoType) { mobileLogo.removeChild(currentMobileLogo); if (originalLogoType === 'img') { // Restore original img let mobileLogoImage = document.createElement('img'); mobileLogoImage.src = mobileLogo.getAttribute('data-original-logo-src'); mobileLogoImage.alt = mobileLogo.getAttribute('data-original-logo-alt') || ''; mobileLogoImage.className = mobileLogo.getAttribute('data-original-logo-class') || ''; mobileLogo.appendChild(mobileLogoImage); } else if (originalLogoType === 'svg') { // Restore original SVG const svgContent = mobileLogo.getAttribute('data-original-logo-content'); if (svgContent) { const tempContainer = document.createElement('div'); tempContainer.innerHTML = svgContent; const svgElement = tempContainer.querySelector('svg'); if (svgElement) { mobileLogo.appendChild(svgElement.cloneNode(true)); } } } } } } initDesktopNav() { if (this.isOffCanvas() || !this.header || this.hasHeaderClass()) return; let menuElement = this.header.querySelector('.dwc-nest-menu'); if (menuElement) { menuElement.classList.remove('brx-open'); menuElement.querySelectorAll('.brxe-dropdown').forEach(dropdown => { dropdown.classList.remove('active', 'open'); }); } } initializeMaxDimensions() { if (!this.isAboveMinWidth()) return; this.navTopLinks.forEach(link => { let dropdown = link.querySelector('.dwc-nest-nav-list'); if (dropdown) { this.maxMenuWidth = Math.max(this.maxMenuWidth, dropdown.offsetWidth); this.maxMenuHeight = Math.max(this.maxMenuHeight, dropdown.offsetHeight + 10); } }); this.header.style.setProperty('--dropdown-menu-max-width', `${this.maxMenuWidth}px`); this.header.style.setProperty('--dropdown-menu-max-height', `${this.maxMenuHeight}px`); this.header.style.setProperty('--dropdown-menu-scale-x', '0'); this.header.style.setProperty('--dropdown-menu-scale-y', '0'); } resetForMobile() { this.header.style.setProperty('--dropdown-menu-scale-x', '0'); this.header.style.setProperty('--dropdown-menu-scale-y', '0'); this.header.style.setProperty('--dropdown-menu-width', '0'); if (this.header) { this.header.classList.remove('show-menu-animation', 'hide-menu-animation'); } } setBoxedWidthVariable() { // Check if body has the brx-boxed class if (document.body.classList.contains('brx-boxed')) { // Get computed style for the body const computedStyle = window.getComputedStyle(document.body); // Get the max-width value const maxWidth = computedStyle.getPropertyValue('max-width'); // Set the max-width as a CSS variable on the body document.body.style.setProperty('--boxed-width', maxWidth); return maxWidth; } else { return null; } } closeNavOnClick() { const menuItemLinks = document.querySelectorAll('.dwc-nest-menu a'); const menuToggle = document.querySelector('.dwc-nest-menu .brxe-toggle'); // Always remove existing event listeners first menuItemLinks.forEach(link => { const storedHandler = link._clickHandler; if (storedHandler) { link.removeEventListener('click', storedHandler); delete link._clickHandler; } }); // Check condition - if true, exit without adding new listeners if (this.isAboveMinWidth() && !this.isOffCanvas()) return; // Helper function to check if element has excluded classes const hasExcludedClass = (element) => { if (!MegaMenuCONFIG.closeNavOnClickExclude) return false; const excludedClasses = MegaMenuCONFIG.closeNavOnClickExclude .split(',') .map(className => className.trim()); return excludedClasses.some(excludedClass => element.classList.contains(excludedClass) ); }; // Only add new event listeners if the condition is false menuItemLinks.forEach(link => { // Skip this link if it has any excluded classes if (hasExcludedClass(link)) return; const clickHandler = () => { if (menuToggle) { menuToggle.click(); } }; link._clickHandler = clickHandler; link.addEventListener('click', clickHandler); }); } } class TooltipManager { constructor(config) { this.config = { toolTip: config.toolTip || false }; this.targetButton = null; this.tooltipProcessed = false; } setBackText() { let menuElement = document.querySelector('.dwc-nest-menu'); let forcedBackText = menuElement.getAttribute('data-back-text') document.querySelectorAll('.brx-submenu-toggle').forEach(submenu => { const textContent = submenu.textContent.trim(); const button = submenu.querySelector('.brx-submenu-toggle > button'); if (button) { button.setAttribute('data-text', textContent); button.setAttribute('data-back-text', forcedBackText); } }); } updateTooltipDataText(button) { if (!this.config.toolTip) return; let menuElement = document.querySelector('.dwc-nest-menu'); let toolTipBackText = menuElement.getAttribute('data-tooltip-back-text') const closestUl = button.closest('.brx-nav-nested-items'); if (closestUl) { const tooltip = closestUl.querySelector('.dwc-nest-tooltip'); if (tooltip) { const buttonText = button.getAttribute('data-text'); tooltip.setAttribute('data-text', buttonText); tooltip.innerText = toolTipBackText + ' ' + buttonText; } } } addTooltip(button) { if (!this.config.toolTip) return; let menuElement = document.querySelector('.dwc-nest-menu'); let toolTipBackText = menuElement.getAttribute('data-tooltip-back-text') const closestUl = button.closest('ul'); if (!closestUl) return; this.removeTooltipFrom(closestUl); const tooltip = document.createElement('div'); tooltip.className = 'dwc-nest-tooltip'; tooltip.innerText = toolTipBackText; tooltip.style.position = 'fixed'; tooltip.style.bottom = '12px'; tooltip.style.left = '12px'; tooltip.style.background = 'rgb(0 0 0 / 30%)'; tooltip.style.color = 'white'; tooltip.style.padding = '5px 10px'; tooltip.style.borderRadius = '5px'; tooltip.style.fontSize = '12px'; tooltip.style.zIndex = '9999'; tooltip.style.opacity = '0'; tooltip.style.transition = 'opacity 1.5s'; tooltip.style.pointerEvents = 'none'; closestUl.appendChild(tooltip); requestAnimationFrame(() => { tooltip.style.opacity = '1'; }); } removeAllTooltips() { document.querySelectorAll('.dwc-nest-tooltip').forEach(tooltip => tooltip.remove()); } removeTooltipFrom(ulElement) { const existingTooltip = ulElement.querySelector('.dwc-nest-tooltip'); if (existingTooltip) existingTooltip.remove(); } setupTooltipObserver() { const tooltipObserver = new MutationObserver((mutationsList) => { if (this.tooltipProcessed) return; for (const mutation of mutationsList) { if (mutation.type === 'childList') { for (const node of mutation.addedNodes) { if (node.nodeType === Node.ELEMENT_NODE && node.classList.contains('dwc-nest-tooltip') && !this.tooltipProcessed) { const button = document.querySelector('.open.active > .brx-submenu-toggle > button:not(.open .open button)'); if (button) { this.updateTooltipDataText(button); this.tooltipProcessed = true; return; } } } } } }); tooltipObserver.observe(document.body, { childList: true, subtree: true }); } } class SwipeGestureHandler { constructor(config) { this.config = { swipeToClose: config.swipeToClose || false }; this.targetButton = null; this.startX = 0; this.startY = 0; this.endX = 0; this.endY = 0; } initialize() { if (!this.config.swipeToClose) return; document.addEventListener('touchstart', this.handleTouchStart.bind(this)); document.addEventListener('touchend', this.handleTouchEnd.bind(this)); } handleTouchStart(event) { if (!this.isMobileMenuOpen()) return; this.startX = event.touches[0].clientX; this.startY = event.touches[0].clientY; } handleTouchEnd(event) { if (!this.isMobileMenuOpen()) return; this.endX = event.changedTouches[0].clientX; this.endY = event.changedTouches[0].clientY; let diffX = this.endX - this.startX; let diffY = Math.abs(this.endY - this.startY); if (diffX > 50 && diffY < 30 && this.targetButton) { this.targetButton.click(); this.targetButton = null; } } isMobileMenuOpen() { return document.querySelector('.dwc-nest-menu')?.classList.contains('brx-open'); } setTargetButton(button) { this.targetButton = button; } } class OffcanvasMenuHandler { constructor(config) { this.config = config || {}; } applyMobileStyles() { let offcanvasMenu = document.querySelector(this.config.offCanvasSelector); let hasHeaderPosition = ['brx-header-left', 'brx-header-right'].some(cls => document.body.classList.contains(cls) ); if (!offcanvasMenu && !hasHeaderPosition) return; let styleSheet = document.querySelector('[data-stylesheet]'); if (!styleSheet) return; let styleElement = styleSheet.querySelector('style'); if (!styleElement) return; let originalStyles = styleElement.textContent || styleElement.innerText; let modifiedStyles = originalStyles.replace(/\(max-width:\s*\d+px\)/g, '(max-width: 5000px)'); let newStyleElement = document.createElement('style'); newStyleElement.id = 'dwc-offcanvas-styles'; newStyleElement.textContent = modifiedStyles; document.head.appendChild(newStyleElement); setTimeout(() => { document.body.classList.add('show-nav'); }, 100); styleSheet.remove(); } } class MobileMenuScrollReset { constructor(config = {}) { this.config = { minWidthThreshold: config.minWidthThreshold || MegaMenuCONFIG.minWidth, headerSelector: config.headerSelector || MegaMenuCONFIG.headerSelector, scrollResetDelay: config.scrollResetDelay || 300 }; this.menuElement = null; this.nestedItemsElement = null; this.scrollResetTimeout = null; this.isInitialized = false; } initialize() { if (this.isInitialized) return; this.menuElement = document.querySelector(`${this.config.headerSelector} .dwc-nest-menu`); this.nestedItemsElement = document.querySelector(`${this.config.headerSelector} .brx-nav-nested-items`); if (!this.menuElement || !this.nestedItemsElement) { console.warn('Mobile menu scroll reset: Required elements not found'); return; } this.setupMutationObserver(); this.isInitialized = true; } setupMutationObserver() { const observer = new MutationObserver((mutations) => { mutations.forEach((mutation) => { if (mutation.type === 'attributes' && mutation.attributeName === 'class') { this.handleMenuClassChange(); } }); }); observer.observe(this.menuElement, { attributes: true, attributeFilter: ['class'] }); } handleMenuClassChange() { // Only run on mobile if (!this.isMobile()) return; const isMenuOpen = this.menuElement.classList.contains('brx-open'); // If menu is now closed, set timeout to reset scroll if (!isMenuOpen) { this.scheduleScrollReset(); } else { // If menu is opened, cancel any pending scroll reset this.cancelScrollReset(); } } scheduleScrollReset() { // Clear any existing timeout this.cancelScrollReset(); // Set new timeout this.scrollResetTimeout = setTimeout(() => { this.resetScroll(); }, this.config.scrollResetDelay); } cancelScrollReset() { if (this.scrollResetTimeout) { clearTimeout(this.scrollResetTimeout); this.scrollResetTimeout = null; } } resetScroll() { if (this.nestedItemsElement && this.isMobile()) { this.nestedItemsElement.scrollTop = 0; } } isMobile() { return window.innerWidth < this.config.minWidthThreshold; } // Method to reinitialize (useful for your reinitialize functionality) reinitialize() { this.cancelScrollReset(); this.isInitialized = false; this.initialize(); } } class MenuSystem { constructor(config = {}) { this.config = { minWidthThreshold: config.minWidthThreshold || MegaMenuCONFIG.minWidth, stripeStyle: config.stripeStyle ?? MegaMenuCONFIG.stripeStyle, adaptiveHeight: config.adaptiveHeight ?? MegaMenuCONFIG.adaptiveHeight, toolTip: config.toolTip ?? MegaMenuCONFIG.toolTip, swipeToClose: config.swipeToClose ?? MegaMenuCONFIG.swipeToClose, headerSelector: config.headerSelector || MegaMenuCONFIG.headerSelector, navTopLinksSelector: `${config.headerSelector || MegaMenuCONFIG.headerSelector} .dwc-nest-nav-top-link.brx-has-megamenu`, offCanvasSelector: `${config.headerSelector || MegaMenuCONFIG.headerSelector} .dwc-nest-menu[data-offcanvas="true"]`, shiftFactor: config.shiftFactor ?? MegaMenuCONFIG.shiftFactor, minOverflow: config.minOverflow ?? MegaMenuCONFIG.minOverflow }; this.animationController = new MenuAnimationController(this.config); this.tooltipManager = new TooltipManager(this.config); this.swipeHandler = new SwipeGestureHandler(this.config); this.offcanvasHandler = new OffcanvasMenuHandler(this.config); this.centeredLogoController = new CenteredLogoController(this.config); this.mobileScrollReset = new MobileMenuScrollReset(this.config); // Flag to track if updateDropdownPositions has been called via user interaction this.hasUpdatedDropdowns = false; this.centeredLogoController.initializeEarly(); } // New method to handle the DOMContentLoaded logic, replaces former menuSystem.initialize() setupMenu() { let overlay = document.querySelector('.dwc-nest-menu-overlay'); if (!overlay) { overlay = document.createElement('nav-overlay'); overlay.className = 'dwc-nest-menu-overlay'; const header = document.querySelector('#brx-header'); let mainContent = document.querySelector('main'); if (header) { header.parentNode.insertBefore(overlay, header); } else if (mainContent) { mainContent.parentNode.insertBefore(overlay, mainContent); } } this.offcanvasHandler.applyMobileStyles(); this.animationController.updateHeaderHeight(); this.animationController.initializeMaxDimensions(); this.animationController.setMobileMenuTopHeight(); this.animationController.updateMobileLogo(); this.animationController.setCurrentPageDropdownActive(); this.tooltipManager.setBackText(); this.tooltipManager.setupTooltipObserver(); this.animationController.closeNavOnClick(); this.centeredLogoController.initialize(); this.mobileScrollReset.initialize(); if (this.animationController.isAboveMinWidth()) { this.setupDesktopBehavior(); } else { this.swipeHandler.initialize(); } this.setupEventListeners(); if (!this.animationController.isAboveMinWidth()) { this.animationController.resetForMobile(); } setTimeout(() => { document.body.classList.add('show-nav'); this.animationController.updateHeaderHeight(); }, 200); setTimeout(() => { document.body.classList.add('adaptive-height-active'); if (this.animationController.isAboveMinWidth()) { this.animationController.updateDropdownPositions(); this.animationController.setBoxedWidthVariable(); } }, 1200); } // Original initialize method (unchanged) now calls the setupMenu() initialize() { updateMobileClass(this.config.minWidthThreshold); document.addEventListener('DOMContentLoaded', () => { this.setupMenu(); }); return this; } // Updated reinitialize method - to call: mainMenu.reinitialize(); reinitialize() { // Reset critical states this.centeredLogoController.isInitialized = false; this.animationController.maxMenuWidth = 0; this.animationController.maxMenuHeight = 0; this.tooltipManager.tooltipProcessed = false; // Clear existing timeouts if (this.animationController.headerTimeoutId) { clearTimeout(this.animationController.headerTimeoutId); } if (this.animationController.mobileMenuTimeoutId) { clearTimeout(this.animationController.mobileMenuTimeoutId); } if (this.centeredLogoController.resizedFinished) { clearTimeout(this.centeredLogoController.resizedFinished); } // Remove added DOM elements and classes const overlay = document.querySelector('.dwc-nest-menu-overlay'); if (overlay) overlay.remove(); document.body.classList.remove('show-nav', 'adaptive-height-active', 'desktop-centered', 'dom-ready'); this.tooltipManager.removeAllTooltips(); const offcanvasStyles = document.querySelector('#dwc-offcanvas-styles'); if (offcanvasStyles) offcanvasStyles.remove(); // Reset mobile logo const mobileLogo = document.querySelector('.dwc-nest-menu__mobile-logo'); if (mobileLogo) { const currentMobileLogo = mobileLogo.querySelector('img, svg'); if (currentMobileLogo) currentMobileLogo.remove(); } // Re-run setup updateMobileClass(this.config.minWidthThreshold); this.setupMenu(); this.mobileScrollReset.reinitialize(); console.log('Mega Menu Pro reinitialized...') } setupDesktopBehavior() { this.animationController.navTopLinks.forEach(link => { link.removeEventListener('mouseenter', this.handleMouseEnter); link.addEventListener('mouseenter', this.handleMouseEnter); }); } handleMouseEnter = (event) => { this.animationController.updateChevronPosition(event.target); // Call updateDropdownPositions on mouseenter if not already called via interaction if (this.animationController.isAboveMinWidth() && !this.hasUpdatedDropdowns) { this.animationController.updateDropdownPositions(); this.animationController.updateMenuVariables(); this.hasUpdatedDropdowns = true; } }; setupEventListeners() { let observer = new MutationObserver(mutations => { mutations.forEach(mutation => { if (mutation.type === 'attributes' && mutation.attributeName === 'class') { this.animationController.updateMenuVariables(); } }); }); this.animationController.navTopLinks.forEach(link => observer.observe(link, { attributes: true }) ); document.addEventListener('click', event => { let submenuToggle = event.target.closest('.brx-submenu-toggle'); if (submenuToggle) { setTimeout(() => { let openButtons = document.querySelectorAll('.brxe-dropdown.open.active button'); let targetButton = Array.from(openButtons).find(button => { let parentDropdown = button.closest('.brxe-dropdown.open.active'); return parentDropdown && parentDropdown.tagName.toLowerCase() === 'li' && !parentDropdown.querySelector('.brxe-dropdown.open.active:not(:scope)'); }); if (targetButton) { this.swipeHandler.setTargetButton(targetButton); if (this.config.toolTip) { this.tooltipManager.removeAllTooltips(); this.tooltipManager.addTooltip(targetButton); this.tooltipManager.updateTooltipDataText(targetButton); } } }, 50); } }); window.addEventListener('resize', this.debounce(() => { updateMobileClass(this.config.minWidthThreshold); this.animationController.updateHeaderHeight(); this.animationController.initializeMaxDimensions(); this.animationController.setMobileMenuTopHeight(); this.animationController.updateMobileLogo(); this.animationController.closeNavOnClick(); if (this.animationController.isAboveMinWidth()) { this.animationController.updateMenuVariables(); this.animationController.initDesktopNav(); this.setupDesktopBehavior(); // Reset flag on resize to desktop and call updateDropdownPositions this.hasUpdatedDropdowns = false; this.animationController.updateDropdownPositions(); } else { this.animationController.resetForMobile(); this.swipeHandler.initialize(); // Reset flag on resize to mobile this.hasUpdatedDropdowns = false; } }, 300)); } debounce(func, delay) { let timeoutId; return function (...args) { clearTimeout(timeoutId); timeoutId = setTimeout(() => func.apply(this, args), delay); }; } } const mainMenu = new MenuSystem().initialize(); // RECALCULATE DROPDOWN POSITION ON LAYOUT SHIFTS const debouncedUpdate = mainMenu.debounce(() => { //console.log('updated') mainMenu.animationController.updateDropdownPositions(); mainMenu.animationController.updateMenuVariables(); if (!mainMenu.animationController.menuOpened) { mainMenu.animationController.header.style.setProperty('--dropdown-menu-width', '100px'); // console.log('less') } }, 300); if (window.visualViewport) { window.visualViewport.addEventListener('resize', debouncedUpdate); } //==== HEADER INSTANCE EXPERIMENTAL ==== /* const secondaryMenu = new MenuSystem({ headerSelector: '.second.dwc-nest-header', adaptiveHeight: 1, stripeStyle: 0, shiftFactor: 1.5, // Example override minOverflow: 300 // Example override }).initialize(); */ /* BREAKOUT LINK & BREAKIN FUNCTIONALITY */ // Use WeakMap for better garbage collection const originalParents = new WeakMap(); const itemStates = new WeakMap(); // Track individual item states const breakinOriginalParents = new WeakMap(); // Track original parents for breakin items const breakinOriginalIndexes = new WeakMap(); // Track original child indexes for breakin items const breakinItemStates = new WeakMap(); // Track individual breakin item states let isMobileView = null; let resizeTimer; let breakinContainer = null; function ensureBreakInContainer() { // Check if any breakin elements exist in the header first const hasBreakInElements = document.querySelector('#brx-header [data-breakin]'); if (!hasBreakInElements) return null; const navWrapper = document.querySelector('.dwc-nav-wrapper'); if (!navWrapper) return null; if (!breakinContainer) { breakinContainer = navWrapper.querySelector('.breakin-container'); if (!breakinContainer) { breakinContainer = document.createElement('div'); breakinContainer.className = 'breakin-container'; navWrapper.appendChild(breakinContainer); } } return breakinContainer; } function handleBreakInItems() { const currentWidth = window.innerWidth; const container = ensureBreakInContainer(); if (!container) return; // Get all breakin items from both original locations and breakin container const breakinItemsInOriginal = document.querySelectorAll('#brx-header [data-breakin]:not(.breakin-container [data-breakin])'); const breakinItemsInContainer = container.querySelectorAll('[data-breakin]'); // Combine both nodelets into a single array const breakinItems = [...breakinItemsInOriginal, ...breakinItemsInContainer]; breakinItems.forEach(item => { const breakpointAttr = item.getAttribute('data-breakpoint'); // Skip if no breakpoint defined if (!breakpointAttr || breakpointAttr.trim() === '') { return; } const breakpoint = parseInt(breakpointAttr, 10); if (isNaN(breakpoint)) { return; // Invalid breakpoint } // Determine if item should be in mobile state (moved into container) const shouldBeInContainer = currentWidth <= breakpoint; // Get current state of this breakin item const currentItemState = breakinItemStates.get(item); // Only process if this item's state changed if (currentItemState !== shouldBeInContainer) { breakinItemStates.set(item, shouldBeInContainer); if (shouldBeInContainer) { // Move to breakin container // Store original parent and index if not already stored if (!breakinOriginalParents.has(item)) { const originalParent = item.parentElement; const originalIndex = Array.from(originalParent.children).indexOf(item); breakinOriginalParents.set(item, originalParent); breakinOriginalIndexes.set(item, originalIndex); } // Move item to breakin container container.appendChild(item); } else { // Move back to original parent at original position const originalParent = breakinOriginalParents.get(item); const originalIndex = breakinOriginalIndexes.get(item); if (originalParent && originalIndex !== undefined) { const children = originalParent.children; if (originalIndex >= children.length) { // Insert at the end if original index is beyond current children originalParent.appendChild(item); } else { // Insert at the original position originalParent.insertBefore(item, children[originalIndex]); } } } } }); } function handleResponsiveMenu() { const currentIsMobile = window.innerWidth < MegaMenuCONFIG.minWidth; const currentWidth = window.innerWidth; const nestMenu = document.querySelector('.dwc-nest-menu'); if (!nestMenu) return; // Get all target items from both original locations and nest menu const targetItemsInOriginal = document.querySelectorAll('.brx-nav-nested-items > .menu-item > [data-breakout-link]'); const targetItemsInNest = nestMenu.querySelectorAll('[data-breakout-link]'); // Combine both nodelets into a single array const targetItems = [...targetItemsInOriginal, ...targetItemsInNest]; let hasStateChange = false; targetItems.forEach(item => { if (item.closest('.dwc-header-logo-item')) return; // don't interfere with centerd logo item const parent = item.parentElement; const breakpointAttr = item.getAttribute('data-breakpoint'); // Determine if item should be in mobile state let shouldBeMobile; if (!breakpointAttr || breakpointAttr.trim() === '') { // No custom breakpoint - use global mobile view logic shouldBeMobile = currentIsMobile; } else { // Custom breakpoint - check if within range const customBreakpoint = parseInt(breakpointAttr, 10); if (isNaN(customBreakpoint)) { // Invalid breakpoint value - fallback to global logic shouldBeMobile = currentIsMobile; } else { // Within custom range: between customBreakpoint and MegaMenuCONFIG.minWidth (exclusive) shouldBeMobile = currentWidth >= customBreakpoint && currentWidth < MegaMenuCONFIG.minWidth; } } // Get current state of this item const currentItemState = itemStates.get(item); // Only process if this item's state changed if (currentItemState !== shouldBeMobile) { hasStateChange = true; itemStates.set(item, shouldBeMobile); if (shouldBeMobile) { // Move to mobile state parent.classList.add('has-breakout-link'); // Store original parent if not already stored if (!originalParents.has(item)) { originalParents.set(item, parent); } // Move item to nest menu nestMenu.insertBefore(item, nestMenu.firstChild); // Hide the original parent parent.style.display = 'none'; } else { // Move to desktop state - restore to original parent const originalParent = originalParents.get(item); if (originalParent) { originalParent.appendChild(item); originalParent.style.display = ''; originalParent.classList.remove('has-breakout-link'); } } } }); // Update global mobile view state only if there was a global state change if (isMobileView !== currentIsMobile) { isMobileView = currentIsMobile; } // Optional: You can add logic here if you need to do something when any state changes if (hasStateChange) { // Any additional logic when items change state } } function handleAllResponsiveElements() { handleResponsiveMenu(); // Handle breakout functionality handleBreakInItems(); // Handle breakin functionality } // Run on page load handleAllResponsiveElements(); // Debounce resize events window.addEventListener('resize', () => { clearTimeout(resizeTimer); resizeTimer = setTimeout(handleAllResponsiveElements, 150); }); // Optional: Add for better initial load behavior document.addEventListener('DOMContentLoaded', handleAllResponsiveElements); // REINITIALIZE ON URL CHANGE if (MegaMenuCONFIG.reinitializeOnURLchange) { console.log('on URL change active') function onUrlChange() { setTimeout(function () { mainMenu.reinitialize(); }, 1500); // Delay execution by 1.5 seconds } // Listen for popstate event (history navigation) window.addEventListener('popstate', onUrlChange); // Listen for hashchange event (URL hash change) window.addEventListener('hashchange', onUrlChange); // Handle pushState and replaceState (function (history) { const pushState = history.pushState; const replaceState = history.replaceState; history.pushState = function (state) { const result = pushState.apply(history, arguments); onUrlChange(); // Call the function when pushState is used return result; }; history.replaceState = function (state) { const result = replaceState.apply(history, arguments); onUrlChange(); // Call the function when replaceState is used return result; }; })(window.history); } console.log('%c', 'color: #b388eb');

Microagujas Nanopore

Beneficios

¿Para quién está indicado?

Toxina Botulínica Full Face