https://www.kigili.com/cdn/shop/t/4/assets/product-thumbnails.js?v=160656021490492538041778762622

1if(!customElements.get("product-slider-thumbnails")){const buildPhotoSwipeThumbSrc=(fullSrc,width,height)=>{if(!fullSrc)return fullSrc;try{const url=new URL(fullSrc,window.location.href);return url.searchParams.set("width",String(width)),url.searchParams.set("height",String(height)),url.searchParams.set("crop","center"),fullSrc.startsWith("//")?`//${url.host}${url.pathname}${url.search}`:fullSrc.startsWith("/")?`${url.pathname}${url.search}`:url.toString()}catch{return`${fullSrc.split("?")[0]}?width=${width}&height=${height}&crop=center`}};class ProductSliderThumbnails extends HTMLElement{constructor(){super(),this.addEventListener("change",this.setupProductGallery)}connectedCallback(){this.product_container=this.closest(".thb-product-detail"),this.quickView=this.closest("#Product-Drawer-Content"),this.thumbnail_container=this.product_container.querySelector(".product-thumbnail-container"),this.video_containers=this.querySelectorAll(".product-single__media-external-video--play"),this.setOptions(),this.init()}setOptions(){this.hide_variants=this.dataset.hideVariants=="true",this.thumbnails=this.thumbnail_container?.querySelectorAll(".product-thumbnail"),this.prev_button=this.querySelector(".flickity-prev"),this.next_button=this.querySelector(".flickity-next"),this.options={wrapAround:!0,pageDots:!1,contain:!0,cellAlign:this.quickView?"left":"center",adaptiveHeight:!0,initialIndex:".is-initial-selected",prevNextButtons:!1,fade:!1,cellSelector:".product-images__slide.is-active"},this.quickView&&(this.options.wrapAround=!1)}init(){this.flkty=new Flickity(this,this.options),this.selectedIndex=this.flkty.selectedIndex,this.setupEvents(),this.setupProductGallery()}reInit(imageSetIndex){this.flkty.destroy(),this.setOptions(),this.flkty=new Flickity(this,this.options),this.setupEvents(),this.selectedIndex=this.flkty.selectedIndex}setupEvents(){const _this=this;if(this.prev_button){let prev=this.prev_button.cloneNode(!0);this.prev_button.parentNode.append(prev),this.prev_button.remove(),prev.addEventListener("click",event=>{this.flkty.previous()}),prev.addEventListener("keyup",event=>{this.flkty.previous(),event.preventDefault()})}if(this.next_button){let next=this.next_button.cloneNode(!0);this.next_button.parentNode.append(next),this.next_button.remove(),next.addEventListener("click",event=>{this.flkty.next()}),next.addEventListener("keyup",event=>{this.flkty.next(),event.preventDefault()})}this.video_containers.forEach(container=>{container.querySelector("button").addEventListener("click",function(){container.setAttribute("hidden","")})}),this.flkty.on("settle",function(index){_this.selectedIndex=index}),this.flkty.on("change",index=>{let previous_slide=this.flkty.cells[_this.selectedIndex].element,previous_media=previous_slide.querySelector(".product-single__media");if(this.thumbnail_container){let active_thumbs=Array.from(this.thumbnails).filter(element=>element.classList.contains("is-active")),active_thumb=active_thumbs[index]?active_thumbs[index]:active_thumbs[0];this.thumbnails.forEach((item,i)=>{item.classList.remove("is-initial-selected")}),active_thumb.classList.add("is-initial-selected"),requestAnimationFrame(()=>{if(active_thumb.offsetParent===null)return;const windowHalfHeight=active_thumb.offsetParent.clientHeight/2,windowHalfWidth=active_thumb.offsetParent.clientWidth/2;active_thumb.parentElement.scrollTo({left:active_thumb.offsetLeft-windowHalfWidth+active_thumb.clientWidth/2,top:active_thumb.offsetTop-windowHalfHeight+active_thumb.clientHeight/2,behavior:"smooth"})})}previous_media.classList.contains("product-single__media-external-video")?(previous_media.dataset.provider==="youtube"?previous_media.querySelector("iframe").contentWindow.postMessage(JSON.stringify({event:"command",func:"pauseVideo",args:""}),"*"):previous_media.dataset.provider==="vimeo"&&previous_media.querySelector("iframe").contentWindow.postMessage(JSON.stringify({method:"pause"}),"*"),previous_media.querySelector(".product-single__media-external-video--play").removeAttribute("hidden")):previous_media.classList.contains("product-single__media-native-video")&&previous_media.querySelector("video").pause()}),this.thumbnail_container&&setTimeout(()=>{Array.from(this.thumbnails).filter(element=>element.clientWidth>

10).forEach((thumbnail,index)=>{thumbnail.addEventListener("click",()=>{this.thumbnailClick(thumbnail,index)})})})}thumbnailClick(thumbnail,index){[].forEach.call(this.thumbnails,function(el){el.classList.remove("is-initial-selected")}),thumbnail.classList.add("is-initial-selected"),this.flkty.select(index)}setDraggable(draggable){this.flkty.options.draggable=draggable,this.flkty.updateDraggable()}selectCell(mediaId){this.flkty.selectCell(mediaId)}setupProductGallery(){this.querySelectorAll(".product-single__media-zoom").length&&this.setEventListeners()}buildItems(){return this.activeImages=Array.from(this.querySelectorAll(".product-images__slide.is-active .product-single__media-image")),this.activeImages.map(item=>{let index=[].indexOf.call(item.parentNode.parentNode.children,item.parentNode),activelink=item.querySelector(".product-single__media-zoom");return activelink.dataset.index=index,{src:activelink.getAttribute("href"),msrc:activelink.dataset.msrc,w:activelink.dataset.w,h:activelink.dataset.h}})}setEventListeners(){this.links=this.querySelectorAll(".product-single__media-zoom"),this.pswpElement=document.querySelectorAll(".pswp")[0],this.pswpOptions={maxSpreadZoom:2,loop:!1,allowPanToNext:!1,closeOnScroll:!1,showHideOpacity:!1,arrowKeys:!0,history:!1,captionEl:!1,fullscreenEl:!1,zoomEl:!1,shareEl:!1,counterEl:!0,arrowEl:!1,preloaderEl:!0,getThumbBoundsFn:()=>{const thumbnail=this.querySelector(".product-images__slide.is-selected"),pageYScroll=window.pageYOffset||document.documentElement.scrollTop,rect=thumbnail.getBoundingClientRect();return{x:rect.left,y:rect.top+pageYScroll,w:rect.width}}},this.links.forEach((link=>{link.addEventListener("click",e=>this.zoomClick(e,link))}))}zoomClick(e,link){if(this.items=this.buildItems(),this.pswpOptions.index=parseInt(link.dataset.index,10),typeof PhotoSwipe<"u"){let pswp=new PhotoSwipe(this.pswpElement,PhotoSwipeUI_Default,this.items,this.pswpOptions);pswp.listen("firstUpdate",()=>{pswp.listen("parseVerticalMargin",function(item){item.vGap={top:50,bottom:50}}),this.createThumbnails(pswp,this.items)}),pswp.listen("afterChange",()=>{this.updateActiveThumbnail(pswp)});let keyboardHandler=e2=>{if(pswp.currItem)switch(e2.key){case"ArrowUp":e2.preventDefault(),pswp.prev();break;case"ArrowDown":e2.preventDefault(),pswp.next();break}};pswp.listen("initialZoomIn",()=>{document.addEventListener("keydown",keyboardHandler)}),pswp.listen("close",()=>{document.removeEventListener("keydown",keyboardHandler)}),pswp.init()}e.preventDefault()}createThumbnails(pswp,items){const thumbnailsContainer=this.pswpElement.querySelector(".pswp__thumbnails-container");thumbnailsContainer&&(thumbnailsContainer.innerHTML="",items.forEach((item,index)=>{const thumbEl=document.createElement("div");thumbEl.className="pswp__thumbnail";const thumbSrc=window.innerWidth<=767?buildPhotoSwipeThumbSrc(item.src,100,150):buildPhotoSwipeThumbSrc(item.src,200,300);thumbEl.innerHTML=`<img src="${thumbSrc}" alt="">`,thumbEl.addEventListener("click",()=>{pswp.goTo(index)}),thumbnailsContainer.appendChild(thumbEl)}),this.updateActiveThumbnail(pswp),this.enableThumbnailWheelScroll(thumbnailsContainer))}enableThumbnailWheelScroll(container){container&&container.addEventListener("wheel",e=>{e.stopPropagation()},{passive:!0})}updateActiveThumbnail(pswp){const thumbnails=this.pswpElement.querySelectorAll(".pswp__thumbnail"),thumbnailsContainer=this.pswpElement.querySelector(".pswp__thumbnails-container"),currentIndex=pswp.getCurrentIndex();if(thumbnails.forEach((thumb,index)=>{thumb.classList.toggle("pswp__thumbnail--active",index===currentIndex)}),thumbnails[currentIndex]&&thumbnailsContainer){const activeThumbnail=thumbnails[currentIndex],containerRect=thumbnailsContainer.getBoundingClientRect(),thumbnailRect=activeThumbnail.getBoundingClientRect();if(window.innerWidth<=767){const isLeft=thumbnailRect.left<containerRect.left,isRight=thumbnailRect.right>containerRect.right;if(isLeft||isRight){const thumbnailWidth=activeThumbnail.offsetWidth+8,containerWidth=thumbnailsContainer.clientWidth,visibleThumbnails=Math.floor(containerWidth/thumbnailWidth),centerOffset=Math.floor(visibleThumbnails/2),targetScrollLeft=Math.max(0,(currentIndex-centerOffset)*thumbnailWidth);

1thumbnailsContainer.scrollTo({left:targetScrollLeft,behavior:"smooth"})}}else{const isAbove=thumbnailRect.top<containerRect.top,isBelow=thumbnailRect.bottom>containerRect.bottom;if(isAbove||isBelow){const thumbnailHeight=activeThumbnail.offsetHeight+10,containerHeight=thumbnailsContainer.clientHeight,visibleThumbnails=Math.floor(containerHeight/thumbnailHeight),centerOffset=Math.floor(visibleThumbnails/2),targetScrollTop=Math.max(0,(currentIndex-centerOffset)*thumbnailHeight);thumbnailsContainer.scrollTo({top:targetScrollTop,behavior:"smooth"})}}}}}customElements.define("product-slider-thumbnails",ProductSliderThumbnails)}
2//# sourceMappingURL=/cdn/shop/t/4/assets/product-thumbnails.js.map?v=160656021490492538041778762622