https://punkbunny.com/cdn/shop/t/13/assets/media-gallery.js?v=67973546831909679571786592247

1customElements.get("media-gallery")||customElements.define("media-gallery",class extends HTMLElement{constructor(){super(),this.elements={liveRegion:this.querySelector('[id^="GalleryStatus"]'),viewer:this.querySelector('[id^="GalleryViewer"]'),thumbnails:this.querySelector('[id^="GalleryThumbnails"]'),infinityDots:this.querySelector('[id^="InfinityDots"]')},this.mql=window.matchMedia("(min-width: 750px)"),this.mobileLoopScrollHandler=null,this.mobileLoopNormalizeTimer=null,this.thumbnailClickHandlers=[],this.infinityDotClickHandlers=[],this.elements.viewer&&(this.debouncedSlideChangedHandler=debounce(this.onSlideChanged.bind(this),500),this.infinitySlideChangedHandler=this.onInfinitySlideChanged.bind(this),this.elements.viewer.addEventListener("slideChanged",this.debouncedSlideChangedHandler),this.elements.viewer.addEventListener("slideChanged",this.infinitySlideChangedHandler),this.elements.thumbnails&&this.elements.thumbnails.querySelectorAll("[data-target]").forEach(mediaToSwitch=>{const button=mediaToSwitch.querySelector("button");if(!button)return;const handler=this.setActiveMedia.bind(this,mediaToSwitch.dataset.target,!1);this.thumbnailClickHandlers.push({button,handler}),button.addEventListener("click",handler)}),this.elements.infinityDots&&this.elements.infinityDots.querySelectorAll("[data-infinity-slot]").forEach(dotButton=>{const handler=this.onInfinityDotClick.bind(this);this.infinityDotClickHandlers.push({button:dotButton,handler}),dotButton.addEventListener("click",handler)}),this.handleViewportChange=this.handleViewportChange.bind(this),this.mql.addEventListener("change",this.handleViewportChange),this.handleViewportChange(),this.updateInfinityDots(),this.elements.thumbnails&&this.dataset.desktopLayout.includes("thumbnail")&&this.mql.matches&&this.removeListSemantic())}disconnectedCallback(){this.elements.viewer&&(this.destroyMobileLoop(),this.elements.viewer.removeEventListener("slideChanged",this.debouncedSlideChangedHandler),this.elements.viewer.removeEventListener("slideChanged",this.infinitySlideChangedHandler),this.mql.removeEventListener("change",this.handleViewportChange),this.thumbnailClickHandlers.forEach(({button,handler})=>{button.removeEventListener("click",handler)}),this.infinityDotClickHandlers.forEach(({button,handler})=>{button.removeEventListener("click",handler)}),this.thumbnailClickHandlers=[],this.infinityDotClickHandlers=[])}onSlideChanged(event){if(!this.elements.thumbnails)return;const activeMediaId=event.detail.currentElement.dataset.mediaId||event.detail.currentElement.dataset.cloneOfMediaId,thumbnail=this.elements.thumbnails.querySelector(`[data-target="${activeMediaId}"]`);this.setActiveThumbnail(thumbnail)}handleViewportChange(){if(this.mql.matches){this.destroyMobileLoop(),this.updateInfinityDots();return}this.setupMobileLoop(),this.updateInfinityDots()}setupMobileLoop(){const viewer=this.elements.viewer,slider=viewer?.slider;if(!slider||slider.dataset.mobileLoopReady==="true")return;const realSlides=Array.from(slider.querySelectorAll(".product__media-item")).filter(slide=>!slide.classList.contains("product__media-item--clone"));if(realSlides.length<2)return;const firstRealSlide=realSlides[0],lastRealSlide=realSlides[realSlides.length-1],firstClone=this.createLoopClone(firstRealSlide,"first"),lastClone=this.createLoopClone(lastRealSlide,"last");slider.prepend(lastClone),slider.append(firstClone),viewer.resetPages(),slider.dataset.mobileLoopReady="true",slider.dataset.mobileLoopFirstMediaId=firstRealSlide.dataset.mediaId,slider.dataset.mobileLoopLastMediaId=lastRealSlide.dataset.mediaId,window.requestAnimationFrame(()=>{slider.scrollLeft=firstRealSlide.offsetLeft,viewer.update(),this.updateInfinityDots(firstRealSlide)}),this.mobileLoopScrollHandler=()=>{window.clearTimeout(this.mobileLoopNormalizeTimer),this.mobileLoopNormalizeTimer=window.setTimeout(()=>{const currentElement=viewer.sliderItemsToShow?.[viewer.currentPage-1]||this.getClosestSlide(slider,viewer.sliderItemsToShow);if(!currentElement||!currentElement.classList.contains("product__media-item--clone"))return;const targetMediaId=currentElement.dataset.cloneOfMediaId,targetElement=slider.querySelector(`.product__media-item[data-media-id="${targetMediaId}"]`);if(!targetElement)return;const previousScrollBehavior=slider.style.scrollBehavior;slider.style.scrollBehavior="auto",slider.scrollLeft=targetElement.offsetLeft,viewer.update(

1),slider.style.scrollBehavior=previousScrollBehavior},80)},slider.addEventListener("scroll",this.mobileLoopScrollHandler,{passive:!0})}destroyMobileLoop(){const viewer=this.elements.viewer,slider=viewer?.slider;window.clearTimeout(this.mobileLoopNormalizeTimer),this.mobileLoopNormalizeTimer=null,!(!slider||slider.dataset.mobileLoopReady!=="true")&&(this.mobileLoopScrollHandler&&slider.removeEventListener("scroll",this.mobileLoopScrollHandler),slider.querySelectorAll(".product__media-item--clone").forEach(clone=>clone.remove()),delete slider.dataset.mobileLoopReady,delete slider.dataset.mobileLoopFirstMediaId,delete slider.dataset.mobileLoopLastMediaId,viewer.resetPages(),viewer.update(),this.updateInfinityDots(),this.mobileLoopScrollHandler=null)}createLoopClone(sourceSlide,position){const clone=sourceSlide.cloneNode(!0),cloneOfMediaId=sourceSlide.dataset.mediaId;return clone.id=`${sourceSlide.id}-clone-${position}`,clone.classList.remove("is-active"),clone.classList.add("product__media-item--clone"),clone.removeAttribute("data-media-id"),clone.dataset.cloneOfMediaId=cloneOfMediaId,clone.querySelectorAll("[id]").forEach(node=>{node.id=`${node.id}-clone-${position}`}),clone.querySelectorAll("modal-opener").forEach(modalOpener=>{const button=modalOpener.querySelector("button");button&&button.addEventListener("click",()=>{const modal=document.querySelector(modalOpener.getAttribute("data-modal"));modal&&modal.show(button)})}),clone}getClosestSlide(slider,slideElements){if(!slideElements?.length)return null;const sliderCenter=slider.scrollLeft+slider.clientWidth/2;return slideElements.reduce((closest,slide)=>{const slideCenter=slide.offsetLeft+slide.clientWidth/2;if(!closest)return slide;const closestCenter=closest.offsetLeft+closest.clientWidth/2;return Math.abs(slideCenter-sliderCenter)<Math.abs(closestCenter-sliderCenter)?slide:closest},null)}onInfinitySlideChanged(event){this.updateInfinityDots(event.detail?.currentElement)}onInfinityDotClick(event){const targetMediaId=event.currentTarget.dataset.targetMediaId;targetMediaId&&this.setActiveMedia(targetMediaId,!1)}getRealSlides(){const slider=this.elements.viewer?.slider;return slider?Array.from(slider.querySelectorAll(".product__media-item")).filter(slide=>!slide.classList.contains("product__media-item--clone")):[]}resolveSlideMediaId(slide){return slide?.dataset?.mediaId||slide?.dataset?.cloneOfMediaId||null}getCurrentRealSlideIndex(currentElement){const realSlides=this.getRealSlides();if(!realSlides.length)return-1;const activeMediaId=this.resolveSlideMediaId(currentElement)||this.resolveSlideMediaId(realSlides.find(slide=>slide.classList.contains("is-active")))||this.resolveSlideMediaId(realSlides[0]);return realSlides.findIndex(slide=>slide.dataset.mediaId===activeMediaId)}updateInfinityDots(currentElement=null){if(!this.elements.infinityDots)return;const shouldShowInfinityDots=this.dataset.mobileLayout==="infinity_carousel"&&!this.mql.matches;if(this.elements.infinityDots.hidden=!shouldShowInfinityDots,!shouldShowInfinityDots)return;const realSlides=this.getRealSlides(),mediaCount=realSlides.length;if(mediaCount<=1){this.elements.infinityDots.hidden=!0;return}const activeIndex=this.getCurrentRealSlideIndex(currentElement);if(activeIndex<0)return;[{name:"prev",index:(activeIndex-1+mediaCount)%mediaCount},{name:"current",index:activeIndex},{name:"next",index:(activeIndex+1)%mediaCount}].forEach(slot=>{const button=this.elements.infinityDots.querySelector(`[data-infinity-slot="${slot.name}"]`),targetSlide=realSlides[slot.index];if(!button||!targetSlide)return;const isActive=slot.name==="current";button.classList.toggle("is-active",isActive),button.dataset.targetMediaId=targetSlide.dataset.mediaId,button.setAttribute("aria-label",isActive?`Current image ${slot.index+1} of ${mediaCount}`:`Go to image ${slot.index+1} of ${mediaCount}`)})}setActiveMedia(mediaId,prepend){const activeMedia=this.elements.viewer.querySelector(`[data-media-id="${mediaId}"]`)||this.elements.viewer.querySelector("[data-media-id]");if(!activeMedia)return;if(this.elements.viewer.querySelectorAll("[data-media-id]").forEach(element=>{element.classList.remove("is-active")}),activeMedia?.classList?.add("is-active"),prepend){if(activeMedia.parentElement.firstChild!==activeMedia&&activeMedia.parentElement.prepe

1nd(activeMedia),this.elements.thumbnails){const activeThumbnail2=this.elements.thumbnails.querySelector(`[data-target="${mediaId}"]`);activeThumbnail2.parentElement.firstChild!==activeThumbnail2&&activeThumbnail2.parentElement.prepend(activeThumbnail2)}this.elements.viewer.slider&&this.elements.viewer.resetPages()}if(this.preventStickyHeader(),window.setTimeout(()=>{(!this.mql.matches||this.elements.thumbnails)&&activeMedia.parentElement.scrollTo({left:activeMedia.offsetLeft});const activeMediaRect=activeMedia.getBoundingClientRect();if(activeMediaRect.top>-.5)return;const top=activeMediaRect.top+window.scrollY;window.scrollTo({top,behavior:"smooth"})}),this.playActiveMedia(activeMedia),this.updateInfinityDots(activeMedia),!this.elements.thumbnails)return;const activeThumbnail=this.elements.thumbnails.querySelector(`[data-target="${mediaId}"]`);this.setActiveThumbnail(activeThumbnail),this.announceLiveRegion(activeMedia,activeThumbnail.dataset.mediaPosition)}setActiveThumbnail(thumbnail){!this.elements.thumbnails||!thumbnail||(this.elements.thumbnails.querySelectorAll("button").forEach(element=>element.removeAttribute("aria-current")),thumbnail.querySelector("button").setAttribute("aria-current",!0),!this.elements.thumbnails.isSlideVisible(thumbnail,10)&&this.elements.thumbnails.slider.scrollTo({left:thumbnail.offsetLeft}))}announceLiveRegion(activeItem,position){const image=activeItem.querySelector(".product__modal-opener--image img");image&&(image.onload=()=>{this.elements.liveRegion.setAttribute("aria-hidden",!1),this.elements.liveRegion.innerHTML=window.accessibilityStrings.imageAvailable.replace("[index]",position),setTimeout(()=>{this.elements.liveRegion.setAttribute("aria-hidden",!0)},2e3)},image.src=image.src)}playActiveMedia(activeItem){window.pauseAllMedia();const deferredMedia=activeItem.querySelector(".deferred-media");deferredMedia&&deferredMedia.loadContent(!1)}preventStickyHeader(){this.stickyHeader=this.stickyHeader||document.querySelector("sticky-header"),this.stickyHeader&&this.stickyHeader.dispatchEvent(new Event("preventHeaderReveal"))}removeListSemantic(){this.elements.viewer.slider&&(this.elements.viewer.slider.setAttribute("role","presentation"),this.elements.viewer.sliderItems.forEach(sli

1de=>slide.setAttribute("role","presentation")))}});
2//# sourceMappingURL=/cdn/shop/t/13/assets/media-gallery.js.map?v=67973546831909679571786592247