function throttle(fn,wait=300){let throttleTimeoutId=-1,tick=!1;return()=>{clearTimeout(throttleTimeoutId),throttleTimeoutId=setTimeout(fn,wait),tick||(fn.call(),tick=!0,setTimeout(()=>{tick=!1},wait))}}if(!customElements.get("scrolling-image-list")){class ScrollingImageList extends HTMLElement{constructor(){super(),window.initLazyScript(this,this.init.bind(this))}init(){if(this.images=this.querySelectorAll(".scrolling-image-list__image"),this.images.length>1){this.contentColumn=this.querySelector(".scrolling-image-list__content-column"),this.featureText=this.querySelector(".scrolling-image-list__content-column .feature-text-paired");const mq=window.matchMedia("(min-width: 768px)");this.addListeners(mq),mq.addEventListener("change",event=>{this.removeListeners(),this.addListeners(event)})}this.setAttribute("loaded","")}addListeners(mq){mq.matches?(this.throttledHandleScroll=throttle(this.handleScroll.bind(this),100),window.addEventListener("scroll",this.throttledHandleScroll),this.boundUpdatePositioning=this.updatePositioning.bind(this),window.addEventListener("scroll",this.boundUpdatePositioning),window.addEventListener("resize",this.boundUpdatePositioning),this.throttledHandleScroll(),this.boundUpdatePositioning(),this.contentClickListeners=[],this.querySelectorAll(".scrolling-image-list__image").forEach(el=>{const oc=()=>this.scrollToImage(el.dataset.index);this.contentClickListeners.push({el,oc}),el.addEventListener("click",oc)}),this.delegatedKeydownHandler=theme.addDelegateEventListener(this,"keydown",".scrolling-image-list__image, .scrolling-image-list__content:not(.scrolling-image-list__content--mobile), .scrolling-image-list__content:not(.scrolling-image-list__content--mobile) a",this.handleKeydown.bind(this))):this.addEventListener("on:carousel-slider:select",this.handleSliderSelect.bind(this))}removeListeners(){if(window.removeEventListener("scroll",this.throttledHandleScroll),window.removeEventListener("scroll",this.boundUpdatePositioning),window.removeEventListener("resize",this.boundUpdatePositioning),this.contentClickListeners)for(let i=0;i<this.contentClickListeners.length;i+=1)this.contentClickListeners[i].el.removeEventListener("click",this.contentClickListeners[i].oc);this.removeEventListener("click",this.delegatedKeydownHandler)}handleScroll(){let closestIndex=1,closestDistance=Number.MAX_VALUE;this.images.forEach((el,index)=>{const distance=ScrollingImageList.distanceFromViewportMiddle(el);distance<closestDistance&&(closestIndex=index+1,closestDistance=distance)}),this.dataset.currentIndex=closestIndex}handleKeydown(evt,el){if(evt.code==="Tab"){if(el.classList.contains("scrolling-image-list__image")){if(!evt.shiftKey){evt.preventDefault(),this.querySelector(`.scrolling-image-list__content:not(.scrolling-image-list__content--mobile)[data-index="${el.dataset.index}"]`).focus();return}if(el.dataset.index!=="1"){evt.preventDefault(),this.querySelector(`.scrolling-image-list__image[data-index="${parseInt(el.dataset.index,10)-1}"]`).focus();return}return}if(el.classList.contains("scrolling-image-list__content")){if(evt.shiftKey){evt.preventDefault(),this.querySelector(`.scrolling-image-list__image[data-index="${el.dataset.index}"]`).focus();return}if(el.nextElementSibling!==null){evt.preventDefault(),el.querySelector("a")?el.querySelector("a").focus():this.querySelector(`.scrolling-image-list__image[data-index="${parseInt(el.dataset.index,10)+1}"]`).focus();return}return}if(el.tagName==="A"){const contentContainer=el.closest(".scrolling-image-list__content");contentContainer.nextElementSibling!==null&&[...contentContainer.querySelectorAll("a")].pop()===el&&!evt.shiftKey&&(evt.preventDefault(),this.querySelector(`.scrolling-image-list__image[data-index="${parseInt(contentContainer.dataset.index,10)+1}"]`).focus())}}}updatePositioning(){const containerBcr=this.contentColumn.getBoundingClientRect(),containerOffset=containerBcr.top+window.scrollY,contentHeight=this.featureText.getBoundingClientRect().height;let bcr=this.images[0].getBoundingClientRect();const topImageMid=bcr.top+window.scrollY+bcr.height/2;bcr=this.images[this.images.length-1].getBoundingClientRect();const botImageMid=bcr.top+window.scrollY+bcr.height/2,windowMid=window.scrollY+window.innerHeight/2;windowMid<topImageMid?(this.style.setProperty("--scrolling-image-list-content-offset-y",`${topImageMid-containerOffset-contentHeight/2}px`),this.style.removeProperty("--scrolling-image-list-content-position"),this.style.removeProperty("--scrolling-image-list-content-offset-x"),this.style.removeProperty("--scrolling-image-list-content-width")):windowMid>botImageMid?(this.style.setProperty("--scrolling-image-list-content-offset-y",`${botImageMid-containerOffset-contentHeight/2}px`),this.style.removeProperty("--scrolling-image-list-content-position"),this.style.removeProperty("--scrolling-image-list-content-offset-x"),this.style.removeProperty("--scrolling-image-list-content-width")):(this.style.setProperty("--scrolling-image-list-content-position","fixed"),this.style.setProperty("--scrolling-image-list-content-offset-y",`${window.innerHeight/2-contentHeight/2}px`),this.style.setProperty("--scrolling-image-list-content-offset-x",`${containerBcr.left}px`),this.style.setProperty("--scrolling-image-list-content-width",`${containerBcr.width}px`))}handleSliderSelect(evt){this.dataset.currentIndex=evt.detail.index+1}scrollToImage(index){const image=this.images[index-1];window.scrollTo({left:0,top:theme.getOffsetTopFromDoc(image)-(window.innerHeight-image.clientHeight)/2,behavior:"smooth"})}static distanceFromViewportMiddle(el){const viewportMidY=window.scrollY+window.innerHeight/2,imageMidY=theme.getOffsetTopFromDoc(el)+el.clientHeight/2;return Math.abs(viewportMidY-imageMidY)}}customElements.define("scrolling-image-list",ScrollingImageList)}
//# sourceMappingURL=/cdn/shop/t/9/assets/scrolling-image-list.js.map?v=143095951995490155941734592034