1import{Component}from"@theme/component";import{debounce,onDocumentLoaded,setHeaderMenuStyle}from"@theme/utilities";import{MegaMenuHoverEvent}from"@theme/events";const HOVER_COMMIT_DELAY_MS=150;class HeaderMenu extends Component{requiredRefs=["overflowMenu"];#submenuMutationObserver=null;#hoverDispatchTimer;connectedCallback(){super.connectedCallback(),onDocumentLoaded(this.#preloadImages),window.addEventListener("resize",this.#resizeListener),this.overflowMenu?.addEventListener("pointerleave",this.#overflowSubmenuListener)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this.#resizeListener),document.body.removeEventListener("pointermove",this.#onPointerMove),this.#state.activeItem&&this.#stopPointerTracking(this.#state.activeItem),this.overflowMenu?.removeEventListener("pointerleave",this.#overflowSubmenuListener),this.#cleanupMutationObserver(),clearTimeout(this.#hoverDispatchTimer),this.#hoverDispatchTimer=void 0}#resizeListener=debounce(()=>{setHeaderMenuStyle()},100);#overflowSubmenuListener=()=>{this.#deactivate()};#state={activeItem:null,activeOverflowItem:null};#pointerIdleTimer;#lastPointer={x:0,y:0};#onPointerMove=event=>{const activeLink=this.#state.activeItem;if(!activeLink)return;this.#lastPointer.x=event.clientX,this.#lastPointer.y=event.clientY;const moving=Math.abs(event.movementX)>=1||event.movementY>=1;activeLink.dataset.safetyBox=`${moving}
1`,clearTimeout(this.#pointerIdleTimer),moving?this.#pointerIdleTimer=setTimeout(()=>{this.#state.activeItem&&(this.#state.activeItem.dataset.safetyBox="false",this.#reconcilePointerTarget())},50):this.#reconcilePointerTarget()};#reconcilePointerTarget(){const{x,y}=this.#lastPointer;requestAnimationFrame(()=>{const target=document.elementFromPoint(x,y);if(!target)return;const listItem=target.closest(".menu-list__list-item");listItem&&!listItem.contains(this.#state.activeItem)&&listItem.dispatchEvent(new PointerEvent("pointerenter",{bubbles:!1}))})}#startPointerTracking(item,previousItem){previousItem?this.#stopPointerTracking(previousItem):document.body.addEventListener("pointermove",this.#onPointerMove);const rect=item.getBoundingClientRect(),boundary=this.headerComponent?.hasAttribute("data-submenu-overlap-bottom-row")?this.headerComponent?.querySelector(".header__row--top"):this.headerComponent;item.style.setProperty("--box-height",`${(boundary?.getBoundingClientRect().bottom??0)-rect.top}px`)}#stopPointerTracking(item){window.clearTimeout(this.#pointerIdleTimer),this.#pointerIdleTimer=void 0,item.style.removeProperty("--box-height"),delete item.dataset.safetyBox}get overflowMenu(){return this.refs.overflowMenu?.shadowRoot?.querySelector('[part="overflow"]')}get overflowListHovered(){return this.refs.overflowMenu?.shadowRoot?.querySelector('[part="overflow-list"]')?.matches(":hover")??!1}#getFirstOverflowMenuItem(){const menuItem=this.refs.overflowMenu?.querySelector('[slot="overflow"] [ref="menuitem"]');return menuItem instanceof HTMLElement?menuItem:null}get headerComponent(){return this.closest("header-component")}activate=event=>{if(!(event.target instanceof Element)||!this.headerComponent)return;const isMoreTrigger=event.target.slot==="more",item=findMenuItem(event.target),overflowItem=isMoreTrigger?this.#getFirstOverflowMenuItem():null;if(!item||item==this.#state.activeItem)return;const isDefaultSlot=event.target.slot==="";this.dataset.overflowExpanded=(!isDefaultSlot).toString();const previouslyActiveItem=this.#state.activeItem,previouslyActiveOverflowItem=this.#state.activeOverflowItem;previouslyActiveItem&&(previouslyActiveItem.ariaExpanded="false"),previouslyActiveOverflowItem&&previouslyActiveOverflowItem!==previouslyActiveItem&&(previouslyActiveOverflowItem.ariaExpanded="false"),this.#state.activeItem=item,this.#state.activeOverflowItem=overflowItem,this.ariaExpanded="true",item.ariaExpanded="true",overflowItem&&overflowItem!==item&&(overflowItem.ariaExpanded="true");const overflowItemSubmenu=isMoreTrigger?findSubmenu(overflowItem):null;let submenu=findSubmenu(item)||(overflowItemSubmenu?this.overflowMenu:null);const hasSubmenu=!!submenu;if(!hasSubmenu&&!isDefaultSlot&&(submenu=this.overflowMenu),submenu){clearTimeout(this.#hoverDispatchTimer),this.#hoverDispatchTimer=void 0;const committedItem=item;event instanceof FocusEvent?this.dispatchEvent(new MegaMenuHoverEvent):this.#hoverDispatchTimer=setTimeout(()=>{this.#hoverDispatchTimer=void 0,this.#state.activeItem===committedItem&&this.dispatchEvent(new MegaMenuHoverEvent)},HOVER_COMMIT_DELAY_MS),submenu.dataset.active="",this.#cleanupMutationObserver(),this.#submenuMutationObserver=new MutationObserver(()=>{requestAnimationFrame(()=>{requestAnimationFrame(()=>{submenu.offsetHeight>0&&(this.headerComponent?.style.setProperty("--submenu-height",`${submenu.offsetHeight}px`),this.#cleanupMutationObserver())})})}),this.#submenuMutationObserver.observe(submenu,{childList:!0,subtree:!0}),setTimeout(()=>{this.#cleanupMutationObserver()},500)}let finalHeight=submenu?.offsetHeight||0;if(!isDefaultSlot){const overflowListHeight=this.#getOverflowListLinksHeight();if(hasSubmenu){const overflowHeight=this.overflowMenu?.offsetHeight||0;finalHeight=Math.max(overflowHeight,overflowListHeight)}else finalHeight=overflowListHeight}submenu||(finalHeight=0);const headerVisibleHeight=this.#getHeaderVisibleHeight();this.headerComponent.style.setProperty("--submenu-height",`${finalHeight}px`),this.#setFullOpenHeaderHeight(finalHeight,headerVisibleHeight),this.style.setProperty("--submenu-opacity","1"),this.#startPointerTracking(item,previouslyActiveItem)};deactivate(event){if(!(event.target instanceof Element))return;const menu=findSubmenu(this.#state.activeItem),isMovingWithinMenu=event.relatedTarget instanceof Node&&menu?.contains(document.activeElement),isMovingToSubmenu=event.relatedTarget instanceof Node&&event.type==="blur"&&menu?.contains(event.relatedTarget),isMovingToOverflowMenu=event.relatedTarget instanceof Element&&!!event.relatedTarget.closest('[slot="overflow"]');if(isMovingWithinMenu||isMovingToOverflowMenu||isMovingToSubmenu){this.#state.activeItem&&this.#stopPointerTracking(this.#state.activeItem);return}this.#deactivate()}#deactivate=(item=this.#state.activeItem)=>{if(!item||item!=this.#state.activeItem||this.overflowListHovered||this.overflowMenu?.matches(":hover"))return;clearTimeout(this.#hoverDispatchTimer),this.#hoverDispatchTimer=void 0,this.headerComponent?.style.setProperty("--submenu-height","0px"),this.#setFullOpenHeaderHeight(0,0),this.style.setProperty("--submenu-opacity","0"),this.dataset.overflowExpanded="false";const submenu=findSubmenu(item)||(item.closest('[slot="more"]')?this.overflowMenu:null),activeOverflowItem=this.#state.activeOverflowItem;document.body.removeEventListener("pointermove",this.#onPointerMove),this.#stopPointerTracking(item),this.#state.activeItem=null,this.#state.activeOverflowItem=null,this.ariaExpanded="false",item.ariaExpanded="false",activeOverflowItem&&activeOverflowItem!==item&&(
1activeOverflowItem.ariaExpanded="false"),submenu&&delete submenu.dataset.active};#getOverflowListLinksHeight(){const slottedMenuLinks=this.overflowMenu?.querySelector("slot")?.assignedElements();if(!slottedMenuLinks)return this.overflowMenu?.offsetHeight||0;const mapSubmenus=cb=>{slottedMenuLinks.forEach(link=>{const submenu=link.querySelector('[ref="submenu[]"]');submenu&&cb(submenu)})};mapSubmenus(submenu=>{submenu.style.setProperty("display","none")});const height=this.overflowMenu?.offsetHeight||0;return mapSubmenus(submenu=>{submenu.style.removeProperty("display")}),height}#getHeaderVisibleHeight(){return this.headerComponent?this.headerComponent.hasAttribute("data-submenu-overlap-bottom-row")&&this.headerComponent.offsetHeight>0?this.headerComponent.querySelector(".header__row--top")?.offsetHeight??0:this.headerComponent.offsetHeight:0}#setFullOpenHeaderHeight(submenuHeight,headerVisibleHeight){if(!this.headerComponent)return;const fullOpenHeaderHeight=submenuHeight===0?0:submenuHeight+headerVisibleHeight;this.headerComponent?.style.setProperty("--full-open-header-height",`${fullOpenHeaderHeight}px`)}#preloadImages=()=>{this.querySelectorAll('img[loading="lazy"]')?.forEach(image=>image.removeAttribute("loading"))};#cleanupMutationObserver(){this.#submenuMutationObserver?.disconnect(),this.#submenuMutationObserver=null}}customElements.get("header-menu")||customElements.define("header-menu",HeaderMenu);function findMenuItem(element){return element instanceof Element?element?.querySelector('[ref="menuitem"]'):null}function findSubmenu(element){const submenu=element?.parentElement?.querySelector('[ref="submenu[]"]');return submenu instanceof HTMLElement?submenu:null} 2//# sourceMappingURL=/cdn/shop/t/282/assets/header-menu.js.map?v=177388175794493903551786473239
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.