class ProductMedia extends HTMLElement{constructor(){super(),this.selectors={slider:"[data-slider]",mediaItem:"[data-media-id]",modalOpeners:"[data-modal-opener-id]",zoomContainer:"[data-zoom-container]",zoomImages:"[data-pswp-image]",btnXr:"[data-shopify-xr]",withThumbs:"[data-with-thumbs]"},this.selectedMediaIndex=Number(this.querySelector(this.selectors.slider).querySelector("[data-selected]")?.dataset.index)||0,this.settings={sliderElement:this.querySelector(this.selectors.slider),sliderInstance:null,options:{initialSlide:this.selectedMediaIndex,navigation:{prevEl:this.querySelector(".swiper-button--prev"),nextEl:this.querySelector(".swiper-button--next")},spaceBetween:2,watchOverflow:!0,autoHeight:this.dataset.autoHeight==="true",on:{afterInit:swiper=>{const firstSlide=swiper.slides[0],firstSlideVideo=firstSlide.querySelector("video");firstSlideVideo&&firstSlideVideo.play();const firstSlideYoutube=firstSlide.querySelector(".js-youtube");firstSlideYoutube&&this.playYoutubeVideo(firstSlideYoutube);const firstSlideVimeo=firstSlide.querySelector(".js-vimeo");firstSlideVimeo&&this.playVimeoVideo(firstSlideVimeo)},slideChangeTransitionEnd:swiper=>{this.setActiveModalOpener(swiper)},transitionStart:swiper=>{const videos=swiper.el.querySelectorAll("video");Array.from(videos).forEach(video=>{video.pause()})},transitionEnd:swiper=>{let slideIndex=swiper.activeIndex;const swiperCardWidth=swiper.slides[0].offsetWidth;slideIndex=Math.abs(Math.floor(swiper.translate/[swiperCardWidth])),slideIndex!==0&&(slideIndex=slideIndex-1);const activeSlide=Array.from(swiper.slides).find(sliderSlide=>sliderSlide.classList.contains("swiper-slide-active")),activeSlideVideo=activeSlide.querySelector("video"),nextSlideVideo=activeSlide.nextElementSibling?.querySelector("video"),playVideo=video=>{video&&video.paused?video.play():video&&video.pause()};playVideo(activeSlideVideo),playVideo(nextSlideVideo);const activeSlideYoutube=activeSlide.querySelector(".js-youtube");activeSlideYoutube&&this.playYoutubeVideo(activeSlideYoutube);const activeSlideVimeo=activeSlide.querySelector(".js-vimeo");activeSlideVimeo&&this.playVimeoVideo(activeSlideVimeo)}},slidesPerView:1.15,breakpoints:{990:{slidesPerView:1.4},1920:{slidesPerView:2.5},3840:{slidesPerView:3.5}}}}}playYoutubeVideo(element){element.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}',"*")}playVimeoVideo(element){element.contentWindow.postMessage('{"method":"play"}',"*")}connectedCallback(){this.init()}init(){const[zoomContainerWidth,zoomContainerHeight,closeIcon]=[this.offsetWidth,this.offsetHeight,this.querySelector("[data-close-icon")];function isPhone(){return window.innerWidth<750}const photoSwipeLightboxInstance=new PhotoSwipeLightbox({gallery:this.selectors.zoomImages,appendToEl:this.querySelector(this.selectors.zoomContainer),initialZoomLevel:zoomLevelObject=>isPhone()?zoomLevelObject.vFill:zoomLevelObject.fit,secondaryZoomLevel:zoomLevelObject=>isPhone()?zoomLevelObject.fit:1,maxZoomLevel:2,getViewportSizeFn:function(options,pswp){return{x:zoomContainerWidth,y:zoomContainerHeight}},pswpModule:PhotoSwipe});photoSwipeLightboxInstance.addFilter("uiElement",(element,data)=>(data.name==="close"&&(element.innerHTML=closeIcon.innerHTML),element)),photoSwipeLightboxInstance.init(),this.settings.sliderElement&&(this.settings.sliderInstance=new Swiper(this.settings.sliderElement,this.settings.options))}setActiveMedia(id){const mediaFound=Array.from(this.querySelectorAll(this.selectors.mediaItem)).find(media=>Number(media.dataset.mediaId)===id);mediaFound&&this.settings.sliderInstance.slideTo(Number(mediaFound.dataset.index))}setActiveModalOpener(swiper){const activeSlide=swiper.slides.filter(sliderSlide=>sliderSlide.classList.contains("swiper-slide-active"))[0];if(!activeSlide)return;const activeMediaId=activeSlide.dataset.mediaId;if(this.querySelector(`${this.selectors.modalOpeners}.is-active`)?.classList.remove("is-active"),this.querySelector(`${this.selectors.modalOpeners} [data-media-id="${activeMediaId}"]`)?.parentElement.classList.add("is-active"),!(activeSlide.dataset.mediaType==="model"))return;const btnXr=this.querySelector(this.selectors.btnXr);btnXr.dataset.shopifyModel3dId=activeMediaId}}customElements.define("product-media",ProductMedia);
//# sourceMappingURL=/cdn/shop/t/12/assets/product-media.js.map?v=138111465022491329221684249904
