https://timex.com/cdn/shop/t/1782/assets/component-collection-filter-drawer.js?v=34295746258025337471790746142

1import{LitElement,html}from"@hh/global.js";class CollectionFilterDrawer extends LitElement{static properties={open:{type:Boolean}};constructor(){super()}connectedCallback(){super.connectedCallback(),this.handleCloseTrigger(),this.handleShowMoreButtons(),this.handleTooltips(),this.handleEscKey(),document.addEventListener("plp:filter-update",()=>{this.handleCloseTrigger(),this.handleShowMoreButtons(),this.handleTooltips()})}disconnectedCallback(){super.disconnectedCallback()}isMobile(){return!window.matchMedia("(min-width: 768px)").matches}updated(){this.open&&this.isMobile()?document.body.classList.add("overflow-hidden"):!this.open&&this.isMobile()&&document.body.classList.remove("overflow-hidden")}hideAllTooltips(){Array.from(document.querySelectorAll("[data-filter-option-tooltip-content-mobile], [data-filter-option-tooltip-content-desktop]")).filter(tooltip=>tooltip.parentNode===document.body).forEach(tooltip=>{tooltip._originalParent&&(tooltip._originalParent.appendChild(tooltip),tooltip._originalParent=null),tooltip.style.display="none"}),this.querySelectorAll("[data-filter-option-tooltip-content-mobile], [data-filter-option-tooltip-content-desktop]").forEach(tooltip=>{tooltip.style.display="none"})}closeDrawer(){const filterButtonsEl=document.querySelectorAll(".js-toggle-filter-button"),filterDrawerEl=document.querySelector("collection-filter-drawer"),productGridContainer=document.querySelector("[data-collection-product-grid]");filterDrawerEl?.removeAttribute("open"),productGridContainer?.classList.remove("collection-product-grid__narrow"),filterButtonsEl?.forEach(el=>{el.classList.remove("is-show")}),this.hideAllTooltips()}handleCloseTrigger(){this.querySelectorAll(".js-collection-filter-drawer-close")?.forEach(el=>{el.addEventListener("click",()=>{this.closeDrawer()})})}handleShowMoreButtons(){this.querySelectorAll("[data-show-more-options-button]").forEach(button=>{const newButton=button.cloneNode(!0);button.parentNode.replaceChild(newButton,button),newButton.addEventListener("click",e=>{e.preventDefault();const filterId=newButton.dataset.filterId,filterDetail=this.querySelector(`.js-filter[data-filter-id="${filterId}"]`);if(!filterDetail)return;filterDetail.querySelectorAll("[data-initally-hidden-filter-item]").forEach(item=>{item.classList.remove("collection-filter-drawer__filter-item--hidden")}),newButton.style.display="none"})})}showTooltip({icon,tooltipContent,device,filterItem,event}){tooltipContent._originalParent=filterItem,document.body.appendChild(tooltipContent),tooltipContent.style.display="block";const isToplevelTooltip=icon.hasAttribute("data-filter-option-toplevel-tooltip");if(isToplevelTooltip&&device==="mobile"&&event.preventDefault(),device==="desktop")if(isToplevelTooltip){const iconRect=icon.getBoundingClientRect();tooltipContent.style.left=`${iconRect.right}px`,tooltipContent.style.top=`${iconRect.top+iconRect.height/2-tooltipContent.offsetHeight/2}px`}else{const rect=filterItem.getBoundingClientRect();tooltipContent.style.left=`${rect.right}px`,tooltipContent.style.top=`${rect.top+rect.height/2-tooltipContent.offsetHeight/2}px`}}handleTooltips(){const tooltipIcons=this.querySelectorAll("[data-filter-option-tooltip-icon-desktop]");this.querySelectorAll("[data-filter-option-tooltip-icon-mobile]").forEach(icon=>{const filterItem=icon.closest("[data-tooltip-parent]"),tooltipContent=filterItem?.querySelector("[data-filter-option-tooltip-content-mobile]");tooltipContent&&icon.addEventListener("click",e=>this.showTooltip({icon,tooltipContent,device:"mobile",filterItem,event:e}))}),tooltipIcons.forEach(icon=>{const filterItem=icon.closest("[data-tooltip-parent]"),tooltipContent=filterItem?.querySelector("[data-filter-option-tooltip-content-desktop]");if(!tooltipContent)return;let hideTimeoutId=null;const hideTooltip=()=>{hideTimeoutId&&(clearTimeout(hideTimeoutId),hideTimeoutId=null),tooltipContent.parentNode===document.body&&filterItem.appendChild(tooltipContent),tooltipContent.style.display="none"},scheduleHide=event=>{const relatedTarget=event?.relatedTarget,isMovingToTooltip=relatedTarget&&tooltipContent.contains(relatedTarget),isMovingToIcon=relatedTarget&&icon.contains(relatedTarget);isMovingToTooltip||isMovingToIcon||(hideTimeoutId&&clearTimeout(hideTimeoutId),hideTimeoutId=setTimeout(hideTooltip,100))},cancelScheduledHide=()=>{hideTimeoutId&&(clearTimeout(hideTimeoutId),hideTimeoutId=null)};icon.addEventListener("focus",e=>this.showTooltip({icon,tooltipContent,device:"desktop",filterItem,event:e})),icon.addEventListener("blur",scheduleHide),icon.addEventListener("mouseenter",e=>{cancelScheduledHide(),this.showTooltip({icon,tooltipContent,device:"desktop",filterItem,event:e})}),icon.addEventListener("mouseleave",scheduleHide),tooltipContent.addEventListener("mouseenter",cancelScheduledHide),tooltipContent.addEventListener("mouseleave",scheduleHide)}),this.setupTooltipClickOutsideHandler()}setupTooltipClickOutsideHandler(){this._tooltipClickOutsideBound||(this._tooltipClickOutsideBound=!0,document.addEventListener("click",e=>{const isClickOnTooltipOrIcon=e.target.closest("[data-filter-option-tooltip-content-desktop], [data-filter-option-tooltip-icon-desktop]"),hasVisibleDesktopTooltip=document.querySelector('[data-filter-option-tooltip-content-desktop][style*="display: block"]');!isClickOnTooltipOrIcon&&hasVisibleDesktopTooltip&&this.hideAllTooltips()},!0),window.addEventListener("blur",()=>this.hideAllTooltips()))}handleEscKey(){this.addEventListener("keydown",e=>{e.key==="Escape"&&this.closeDrawer()})}render(){return html`<hh-focus-trap active="${!!this.open}" style="height: 100%">
2      <slot></slot>
3    </hh-focus-trap>`}}customElements.define("collection-filter-drawer",CollectionFilterDrawer);
4//# sourceMappingURL=/cdn/shop/t/1782/assets/component-collection-filter-drawer.js.map?v=34295746258025337471790746142