(function () { 'use strict'; /* ========================================================= SETTINGS ========================================================= */ const CLOSE_DELAY = 350; const hoverDevice = window.matchMedia( '(hover: hover) and (pointer: fine)' ); /* ========================================================= GLOBAL STATE ========================================================= */ let portal = null; let activeTrigger = null; let activeSelect = null; let activeParent = null; let closeTimer = null; let isHoveringTrigger = false; let isHoveringPortal = false; /* ========================================================= SAFE EVENT TARGET ========================================================= */ function getEventElement(event) { if (event.target instanceof Element) { return event.target; } if ( event.target && event.target.parentElement instanceof Element ) { return event.target.parentElement; } return null; } /* ========================================================= COOKIE HELPER ========================================================= */ function getCookie(name) { const cookies = document.cookie.split(';'); for (let i = 0; i < cookies.length; i++) { const cookie = cookies[i].trim(); if (cookie.indexOf(name + '=') === 0) { return decodeURIComponent( cookie.substring(name.length + 1) ); } } return null; } /* ========================================================= CREATE ONE GLOBAL PORTAL ========================================================= */ function createPortal() { /* * Remove old portal copies from previous code. */ document .querySelectorAll('.wmc-portal-dropdown') .forEach(function (oldPortal) { oldPortal.remove(); }); portal = document.createElement('div'); portal.className = 'wmc-portal-dropdown'; portal.setAttribute( 'role', 'listbox' ); portal.setAttribute('hidden', ''); portal.setAttribute('inert', ''); portal.style.setProperty( 'display', 'none', 'important' ); portal.style.setProperty( 'visibility', 'hidden', 'important' ); portal.style.setProperty( 'opacity', '0', 'important' ); portal.style.setProperty( 'pointer-events', 'none', 'important' ); portal.style.setProperty( 'z-index', '2147483647', 'important' ); document.body.appendChild(portal); /* * Keep dropdown open on desktop while * cursor is inside the portal. */ portal.addEventListener( 'mouseenter', function () { if (!hoverDevice.matches) { return; } isHoveringPortal = true; cancelHide(); } ); portal.addEventListener( 'mouseleave', function () { if (!hoverDevice.matches) { return; } isHoveringPortal = false; scheduleHide(); } ); } /* ========================================================= PREPARE ONE CURRENCY SELECT ========================================================= */ function prepareCurrencySelect(select) { if (!(select instanceof HTMLSelectElement)) { return; } const container = select.closest('.wmc-currency'); if (!container) { return; } container.classList.add('transformed'); /* * Find existing trigger. * * If Elementor cloned the markup, this trigger * may have no old event listeners. That's fine, * because this new version uses delegated events. */ let trigger = container.querySelector( '.wmc-custom-switcher' ); /* * Create trigger if it does not exist. */ if (!trigger) { trigger = document.createElement('div'); trigger.className = 'wmc-custom-switcher'; trigger.setAttribute( 'role', 'button' ); trigger.setAttribute( 'tabindex', '0' ); trigger.setAttribute( 'aria-haspopup', 'listbox' ); trigger.setAttribute( 'aria-expanded', 'false' ); trigger.innerHTML = ` `; container.appendChild(trigger); } /* * Determine current currency. */ let currentValue = select.value; const savedCurrency = getCookie('wmc_current_currency'); if (savedCurrency) { const validSavedCurrency = Array.from(select.options).some( function (option) { return ( option.value === savedCurrency ); } ); if (validSavedCurrency) { currentValue = savedCurrency; } } const currentOption = Array.from(select.options).find( function (option) { return ( option.value === currentValue ); } ); const label = trigger.querySelector( '.wmc-current-label' ); if (label && currentOption) { label.textContent = currentOption .textContent .trim(); } /* * Debug marker only. * * IMPORTANT: * We do NOT use this anymore to decide * whether mobile clones should initialize. */ select.dataset.wmcPortalInitialized = '1'; } /* ========================================================= PREPARE ALL CURRENCY SELECTS ========================================================= */ function prepareAllCurrencySelects() { document .querySelectorAll( '.wmc-select-currency-js' ) .forEach( prepareCurrencySelect ); } /* ========================================================= GET SELECT FROM TRIGGER ========================================================= */ function getSelectFromTrigger(trigger) { if (!trigger) { return null; } const container = trigger.closest('.wmc-currency'); if (!container) { return null; } return container.querySelector( '.wmc-select-currency-js' ); } /* ========================================================= BUILD PORTAL OPTIONS ========================================================= */ function buildPortal(select) { if (!portal || !select) { return; } portal.innerHTML = ''; let currentValue = select.value; const savedCurrency = getCookie('wmc_current_currency'); if ( savedCurrency && Array.from(select.options).some( function (option) { return ( option.value === savedCurrency ); } ) ) { currentValue = savedCurrency; } Array.from(select.options).forEach( function (option) { const item = document.createElement('a'); item.href = '#'; item.className = 'wmc-currency-option'; item.dataset.currency = option.value; item.setAttribute( 'role', 'option' ); if ( option.value === currentValue ) { item.classList.add( 'is-current' ); item.setAttribute( 'aria-selected', 'true' ); } else { item.setAttribute( 'aria-selected', 'false' ); } const name = document.createElement('span'); name.className = 'wmc-currency-name'; name.textContent = option.textContent.trim(); item.appendChild(name); portal.appendChild(item); } ); } /* ========================================================= POSITION PORTAL ========================================================= */ function updatePosition() { if ( !portal || !activeTrigger || !document.body.contains(activeTrigger) ) { return; } const rect = activeTrigger.getBoundingClientRect(); if ( rect.width <= 0 || rect.height window.innerWidth - 5 ) { left = Math.max( 5, window.innerWidth - width - 5 ); } portal.style.setProperty( 'position', 'fixed', 'important' ); portal.style.setProperty( 'top', (rect.bottom - 1) + 'px', 'important' ); portal.style.setProperty( 'left', left + 'px', 'important' ); portal.style.setProperty( 'width', width + 'px', 'important' ); portal.style.setProperty( 'min-width', width + 'px', 'important' ); portal.style.setProperty( 'max-width', width + 'px', 'important' ); portal.style.setProperty( 'z-index', '2147483647', 'important' ); } /* ========================================================= TIMER HELPERS ========================================================= */ function cancelHide() { if (closeTimer !== null) { clearTimeout(closeTimer); closeTimer = null; } } function scheduleHide() { cancelHide(); closeTimer = setTimeout( function () { if ( !isHoveringTrigger && !isHoveringPortal ) { closePortal(); } }, CLOSE_DELAY ); } /* ========================================================= OPEN PORTAL ========================================================= */ function openPortal(trigger) { if (!trigger || !portal) { return; } const select = getSelectFromTrigger(trigger); if (!select) { return; } /* * Close visual state of previous trigger. */ if ( activeTrigger && activeTrigger !== trigger ) { activeTrigger.classList.remove( 'is-open' ); activeTrigger.setAttribute( 'aria-expanded', 'false' ); const previousParent = activeTrigger.closest( '.currency-parent-trigger' ); if (previousParent) { previousParent.classList.remove( 'currency-dropdown-open' ); } } activeTrigger = trigger; activeSelect = select; activeParent = trigger.closest( '.currency-parent-trigger' ); cancelHide(); buildPortal(select); updatePosition(); portal.classList.add( 'active' ); trigger.classList.add( 'is-open' ); if (activeParent) { activeParent.classList.add( 'currency-dropdown-open' ); } trigger.setAttribute( 'aria-expanded', 'true' ); /* * Remove accessibility hiding. */ portal.removeAttribute( 'hidden' ); portal.removeAttribute( 'inert' ); /* * FORCE VISIBLE. * * This intentionally overrides conflicting * Elementor/mobile CSS. */ portal.style.setProperty( 'display', 'block', 'important' ); portal.style.setProperty( 'visibility', 'visible', 'important' ); portal.style.setProperty( 'opacity', '1', 'important' ); portal.style.setProperty( 'pointer-events', 'auto', 'important' ); portal.style.setProperty( 'z-index', '2147483647', 'important' ); } /* ========================================================= CLOSE PORTAL ========================================================= */ function closePortal() { cancelHide(); if (portal) { portal.classList.remove( 'active' ); portal.style.setProperty( 'display', 'none', 'important' ); portal.style.setProperty( 'visibility', 'hidden', 'important' ); portal.style.setProperty( 'opacity', '0', 'important' ); portal.style.setProperty( 'pointer-events', 'none', 'important' ); portal.setAttribute( 'hidden', '' ); portal.setAttribute( 'inert', '' ); } if (activeTrigger) { activeTrigger.classList.remove( 'is-open' ); activeTrigger.setAttribute( 'aria-expanded', 'false' ); } if (activeParent) { activeParent.classList.remove( 'currency-dropdown-open' ); } activeTrigger = null; activeSelect = null; activeParent = null; isHoveringTrigger = false; isHoveringPortal = false; } /* ========================================================= SELECT CURRENCY ========================================================= */ function selectCurrency(item) { if ( !item || !activeSelect ) { return; } const value = item.dataset.currency; if (!value) { return; } /* * Preserve references BEFORE closing. */ const select = activeSelect; const trigger = activeTrigger; const selectedOption = Array.from(select.options).find( function (option) { return ( option.value === value ); } ); if (!selectedOption) { return; } /* * Update original select. */ select.value = value; /* * Update visible label. */ if (trigger) { const label = trigger.querySelector( '.wmc-current-label' ); if (label) { label.textContent = selectedOption .textContent .trim(); } } /* * Save selected currency. */ document.cookie = 'wmc_current_currency=' + encodeURIComponent(value) + '; path=/; SameSite=Lax'; /* * Close first. */ closePortal(); /* * Trigger WooCommerce Multi Currency plugin. */ select.dispatchEvent( new Event( 'change', { bubbles: true } ) ); /* * jQuery compatibility. */ if (window.jQuery) { window.jQuery(select).trigger( 'change' ); } } /* ========================================================= DELEGATED CLICK DESKTOP + MOBILE + ELEMENTOR CLONES ========================================================= */ document.addEventListener( 'click', function (event) { const target = getEventElement(event); if (!target) { return; } /* * ----------------------------------------- * CURRENCY OPTION CLICK * ----------------------------------------- */ const currencyOption = target.closest( '.wmc-currency-option' ); if ( currencyOption && portal && portal.contains( currencyOption ) ) { event.preventDefault(); event.stopPropagation(); selectCurrency( currencyOption ); return; } /* * ----------------------------------------- * CURRENCY TRIGGER CLICK * ----------------------------------------- */ let trigger = target.closest( '.wmc-custom-switcher' ); /* * Also allow clicking/tapping the Elementor * currency parent/icon area. */ if (!trigger) { const parent = target.closest( '.currency-parent-trigger' ); if (parent) { trigger = parent.querySelector( '.wmc-custom-switcher' ); } } if (trigger) { event.preventDefault(); event.stopPropagation(); /* * Desktop: * hover normally handles opening, * but clicking keeps it open. */ if (hoverDevice.matches) { openPortal(trigger); return; } /* * Mobile / touch: * tap toggles dropdown. */ if ( activeTrigger === trigger && portal && portal.classList.contains( 'active' ) ) { closePortal(); } else { openPortal(trigger); } return; } /* * ----------------------------------------- * OUTSIDE CLICK * ----------------------------------------- */ if ( portal && !portal.contains(target) ) { closePortal(); } }, true ); /* ========================================================= DESKTOP DELEGATED HOVER ========================================================= */ document.addEventListener( 'mouseover', function (event) { if (!hoverDevice.matches) { return; } const target = getEventElement(event); if (!target) { return; } let hoverArea = target.closest( '.currency-parent-trigger' ); let trigger = null; if (hoverArea) { trigger = hoverArea.querySelector( '.wmc-custom-switcher' ); } else { trigger = target.closest( '.wmc-custom-switcher' ); hoverArea = trigger; } if (!trigger || !hoverArea) { return; } /* * Ignore movement between children * inside the same trigger. */ if ( event.relatedTarget instanceof Node && hoverArea.contains( event.relatedTarget ) ) { return; } isHoveringTrigger = true; cancelHide(); openPortal(trigger); }, true ); document.addEventListener( 'mouseout', function (event) { if (!hoverDevice.matches) { return; } const target = getEventElement(event); if (!target) { return; } let hoverArea = target.closest( '.currency-parent-trigger' ); let trigger = null; if (hoverArea) { trigger = hoverArea.querySelector( '.wmc-custom-switcher' ); } else { trigger = target.closest( '.wmc-custom-switcher' ); hoverArea = trigger; } if (!trigger || !hoverArea) { return; } /* * Ignore movement between children * inside same area. */ if ( event.relatedTarget instanceof Node && hoverArea.contains( event.relatedTarget ) ) { return; } isHoveringTrigger = false; scheduleHide(); }, true ); /* ========================================================= KEYBOARD SUPPORT ========================================================= */ document.addEventListener( 'keydown', function (event) { /* * Escape always closes. */ if (event.key === 'Escape') { closePortal(); return; } if ( event.key !== 'Enter' && event.key !== ' ' ) { return; } const target = getEventElement(event); if (!target) { return; } const trigger = target.closest( '.wmc-custom-switcher' ); if (!trigger) { return; } event.preventDefault(); if ( activeTrigger === trigger && portal && portal.classList.contains( 'active' ) ) { closePortal(); } else { openPortal(trigger); } } ); /* ========================================================= UPDATE POSITION ON SCROLL ========================================================= */ window.addEventListener( 'scroll', function () { if ( portal && portal.classList.contains( 'active' ) ) { updatePosition(); } }, { passive: true, capture: true } ); /* ========================================================= UPDATE POSITION ON RESIZE ========================================================= */ window.addEventListener( 'resize', function () { if ( portal && portal.classList.contains( 'active' ) ) { updatePosition(); } } ); /* ========================================================= ELEMENTOR / AJAX / OFF-CANVAS SUPPORT ========================================================= */ let mutationTimer = null; const observer = new MutationObserver( function (mutations) { let needsCheck = false; for ( let i = 0; i < mutations.length; i++ ) { if ( mutations[i].addedNodes && mutations[i].addedNodes.length ) { needsCheck = true; break; } } if (!needsCheck) { return; } if (mutationTimer) { clearTimeout( mutationTimer ); } mutationTimer = setTimeout( function () { prepareAllCurrencySelects(); }, 100 ); } ); /* ========================================================= START ========================================================= */ function start() { createPortal(); prepareAllCurrencySelects(); observer.observe( document.documentElement, { childList: true, subtree: true } ); } if ( document.readyState === 'loading' ) { document.addEventListener( 'DOMContentLoaded', start ); } else { start(); } })();