https://me2beauty.com/cdn/shop/t/22/assets/menu-dropdown.js?v=120745870356944387831778797772

1class DropdownMenu extends HTMLElement{constructor(){super(),this.classes={hover:"is-hover",active:"is-active",animate:"show-from-bottom"},this.selectors={header:".shopify-section-header",background:".header-background",topMenuItem:".header__menu-item--top",menus:"dropdown-menu, mega-menu",wrapper:".list-menu",childAnimate:".list-menu-dropdown > .list-menu"},this.timeout,this.addEventListener("mouseenter",this.handleMouseover.bind(this)),this.addEventListener("keydown",this.handleKeydown.bind(this)),this.addEventListener("focusin",this.handleFocusIn.bind(this))}handleMouseover(){this.classList.contains(this.classes.active)||(this.bindEvent(),this.removeClasses(),this.addClasses(),this.resetBackground(),this.animateMenu())}handleMouseleave(){this.header&&(this.reset(),this.resetBackground(),this.header.classList.remove(this.classes.hover),this.wrapper.removeEventListener("mouseleave",this.onHeaderMouseLeaveEvent))}bindEvent(){this.onHeaderMouseLeaveEvent=this.onHeaderMouseLeaveEvent||this.handleMouseleave.bind(this),this.header=this.header||document.querySelector(this.selectors.header),this.wrapper=this.closest(this.selectors.wrapper),this.wrapper.addEventListener("mouseleave",this.onHeaderMouseLeaveEvent)}addClasses(){const isTopLevel=this.querySelector(this.selectors.topMenuItem);let delay=0;isTopLevel&&!this.isHover()&&(delay=150,(this.closest(".header--top-center")||this.closest(".header--top-left"))&&(delay=200)),this.timeout=setTimeout(()=>{this.isHover()&&this.classList.add(this.classes.active)},delay),this.header.classList.add(this.classes.hover)}removeClasses(){this.header.querySelectorAll(this.selectors.menus).forEach(menu=>{let found=!1;menu.querySelectorAll("dropdown-menu").forEach(element=>{if(element===this){found=!0;return}}),found||menu.reset()})}isHover(){return this.header.classList.contains(this.classes.hover)}reset(){this.classList.remove(this.classes.active);const childAnimate=this.querySelector(this.selectors.childAnimate);childAnimate&&childAnimate.classList.remove(this.classes.animate),clearTimeout(this.timeout)}resetBackground(){this.header.querySelector(this.selectors.background).classList.remove(this.classes.active)}animateMenu(){const childAnimate=this.querySelector(this.selectors.childAnimate);childAnimate&&setTimeout(()=>{childAnimate.classList.add(this.classes.animate)},150)}close(){this.handleMouseleave()}handleKeydown(event){const ARROW_UP=["ArrowUp","Up"],ARROW_DOWN=["ArrowDown","Down"],ARROW_LEFT=["ArrowLeft","Left"],ARROW_RIGHT=["ArrowRight","Right"],items=Array.from(this.querySelectorAll('a, button, [tabindex]:not([tabindex="-1"])')),activeElement=document.activeElement,currentIndex=items.indexOf(activeElement);if(currentIndex!==-1){if(ARROW_DOWN.includes(event.key)){event.preventDefault();const nextIndex=(currentIndex+1)%items.length;items[nextIndex].focus()}else if(ARROW_UP.includes(event.key)){event.preventDefault();const prevIndex=(currentIndex-1+items.length)%items.length;items[prevIndex].focus()}else if(ARROW_RIGHT.includes(event.key)){event.preventDefault();const nextColumn=activeElement.closest(".mega-menu__item, .list-menu-dropdown")?.nextElementSibling;if(nextColumn){const nextFocusable=nextColumn.querySelector('a, button, [tabindex]:not([tabindex="-1"])');nextFocusable&&nextFocusable.focus()}}else if(ARROW_LEFT.includes(event.key)){event.preventDefault();const prevColumn=activeElement.closest(".mega-menu__item, .list-menu-dropdown")?.previousElementSibling;if(prevColumn){const prevFocusable=prevColumn.querySelector('a, button, [tabindex]:not([tabindex="-1"])');prevFocusable&&prevFocusable.focus()}}}}handleFocusIn(event){this.classList.contains(this.classes.active)||(this.bindEvent(),this.removeClasses(),this.addClasses(),this.resetBackground(),this.animateMenu())}}customElements.define("dropdown-menu",DropdownMenu);class MegaMenu extends HTMLElement{constructor(){super(),this.classes={hover:"is-hover",active:"is-active",animate:"show-from-bottom"},this.selectors={header:".shopify-section-header",background:".header-background",dropdown:".list-menu-dropdown",menus:"dropdown-menu, mega-menu",wrapper:".list-menu",childAnimate:".mega-menu__item, .mega-menu__promo"},this.timeout=[],this.addEventListener("mouseenter",this.handleMouseover.bind(this)),this.addEventListener("keydown",this.handleKeydown.bind(this)),this.addEventListener("focusin",this.handleFocusIn.bind(this))}handleMouseover(){this.classList.contains(this.classes.active)||(this.bindEvent(),this.removeClasses(),this.addClasses(),this.updateHeaderHeight(),this.showSublist())}handleMouseleave(){this.header&&(this.reset(),this.resetBackgroun

1d(),this.header.classList.remove(this.classes.hover),this.wrapper.removeEventListener("mouseleave",this.onHeaderMouseLeaveEvent))}handleTouchMoveOutside(ev){if(!this.header)return;(!ev.targetTouches[0].target.closest(this.selectors.header)||this.header.classList.contains("shopify-section-header-hidden"))&&(this.reset(),this.resetBackground(),this.header.classList.remove(this.classes.hover),document.removeEventListener("touchmove",this.onHeaderTouchMoveOutsideEvent))}bindEvent(){this.onHeaderMouseLeaveEvent=this.onHeaderMouseLeaveEvent||this.handleMouseleave.bind(this),this.onHeaderTouchMoveOutsideEvent=this.onHeaderTouchMoveOutsideEvent||this.handleTouchMoveOutside.bind(this),this.header=this.header||document.querySelector(this.selectors.header),this.wrapper=this.closest(this.selectors.wrapper),this.wrapper.addEventListener("mouseleave",this.onHeaderMouseLeaveEvent),document.addEventListener("touchmove",this.onHeaderTouchMoveOutsideEvent)}showSublist(){const dropdown=this.querySelector(this.selectors.dropdown),background=this.header.querySelector(this.selectors.background);background.style.setProperty("--height",this.header.clientHeight+dropdown.clientHeight+"px"),background.classList.add(this.classes.active)}addClasses(){this.classList.add(this.classes.active);const childAnimate=this.querySelectorAll(this.selectors.childAnimate),delay=childAnimate.length>5?75:150;childAnimate.forEach((element,index)=>{const timeout=setTimeout(()=>{element.classList.add(this.classes.animate)},delay*index+100);this.timeout.push(timeout)}),this.header.classList.add(this.classes.hover)}removeClasses(){this.header.querySelectorAll(this.selectors.menus).forEach(menu=>{menu.reset()})}reset(){this.classList.remove(this.classes.active),this.querySelectorAll(this.selectors.childAnimate).forEach(element=>{element.classList.remove(this.classes.animate)}),this.timeout.forEach(timeout=>{clearTimeout(timeout)})}resetBackground(){this.header.querySelector(this.selectors.background).classList.remove(this.classes.active)}close(){this.handleMouseleave()}handleKeydown(event){const ARROW_UP=["ArrowUp","Up"],ARROW_DOWN=["ArrowDown","Down"],ARROW_LEFT=["ArrowLeft","Left"],ARROW_RIGHT=["ArrowRight","Right"],items=Array.from(this.querySelectorAll('a, button, [tabindex]:not([tabindex="-1"])')),activeElement=document.activeElement,currentIndex=items.indexOf(activeElement);if(currentIndex!==-1){if(ARROW_DOWN.includes(event.key)){event.preventDefault();const nextIndex=(currentIndex+1)%items.length;items[nextIndex].focus()}else if(ARROW_UP.includes(event.key)){event.preventDefault();const prevIndex=(currentIndex-1+items.length)%items.length;items[prevIndex].focus()}else if(ARROW_RIGHT.includes(event.key)){event.preventDefault();const nextColumn=activeElement.closest(".mega-menu__item, .list-menu-dropdown")?.nextElementSibling;if(nextColumn){const nextFocusable=nextColumn.querySelector('a, button, [tabindex]:not([tabindex="-1"])');nextFocusable&&nextFocusable.focus()}}else if(ARROW_LEFT.includes(event.key)){event.preventDefault();const prevColumn=activeElement.closest(".mega-menu__item, .list-menu-dropdown")?.previousElementSibling;if(prevColumn){const prevFocusable=prevColumn.querySelector('a, button, [tabindex]:not([tabindex="-1"])');prevFocusable&&prevFocusable.focus()}}}}handleFocusIn(event){this.classList.contains(this.classes.active)||(this.bindEvent(),this.removeClasses(),this.addClasses(),this.updateHeaderHeight(),this.showSublist())}updateHeaderHeight(){const headerGroups=document.querySelectorAll(".shopify-section-group-header-group");let totalHeaderHeight=0;headerGroups.forEach(headerGroup=>{totalHeaderHeight+=headerGroup.offsetHeight}),totalHeaderHeight>0&&document.documentElement.style.setProperty("--header-height",`${totalHeaderHeight}px`)}}customElements.define("mega-menu",MegaMenu);
2//# sourceMappingURL=/cdn/shop/t/22/assets/menu-dropdown.js.map?v=120745870356944387831778797772