https://www.thestacksystem.com/cdn/shop/t/60/assets/media-gallery.js?v=165992264703496174221778037099

1if(!customElements.get("media-gallery")){class MediaGallery extends HTMLElement{constructor(){super(),Shopify.designMode?setTimeout(()=>this.init(),200):this.init()}init(){this.setAttribute("loading",""),this.section=this.closest(".js-product"),this.variantPicker=this.section.querySelector("variant-picker"),this.mediaGroupingEnabled=this.variantPicker&&this.hasAttribute("data-media-grouping-enabled")&&this.getMediaGroupData(),this.viewer=this.querySelector(".media-viewer"),this.thumbs=this.querySelector(".media-thumbs"),this.controls=this.querySelector(".media-ctrl"),this.prevBtn=this.querySelector('.media-ctrl__btn[name="prev"]'),this.nextBtn=this.querySelector('.media-ctrl__btn[name="next"]'),this.counterCurrent=this.querySelector(".media-ctrl__current-item"),this.counterTotal=this.querySelector(".media-ctrl__total-items"),this.liveRegion=this.querySelector(".media-gallery__status"),this.hasAttribute("data-zoom-enabled")&&(this.galleryModal=this.querySelector(".js-media-zoom-template").content.firstElementChild.cloneNode(!0)),this.xrButton=this.querySelector(".media-xr-button"),this.mediaGroupingEnabled&&(this.mediaLists=[this.viewer.querySelectorAll(".media-viewer__item")],this.thumbs&&this.mediaLists.push(this.thumbs.querySelectorAll(".media-thumbs__item")),this.setActiveMediaGroup(this.getMediaGroupFromOptionSelectors())),this.dataset.layout==="stacked"&&theme.mediaMatches.md?(this.resizeInitHandler=this.initGallery.bind(this),window.addEventListener("on:debounced-resize",this.resizeInitHandler)):this.initGallery(),this.section.addEventListener("on:variant:change",this.onVariantChange.bind(this)),this.removeAttribute("loading"),this.setAttribute("loaded","")}initGallery(evt){if(this.setVisibleItems(),this.visibleItems.length<=1)return;this.initialised=!0;const activeItem=this.querySelector(".media-viewer__item.is-active");activeItem&&(this.viewer.scrollLeft=activeItem.offsetLeft),this.viewerItemOffset=this.visibleItems[1].offsetLeft-this.visibleItems[0].offsetLeft,activeItem?this.setActiveMedia(activeItem,!1):(this.currentIndex=Math.round(this.viewer.scrollLeft/this.viewerItemOffset),this.currentItem=this.visibleItems[this.currentIndex],this.thumbs&&(this.currentThumb=this.thumbs.querySelector(`[data-media-id="${this.currentItem.dataset.mediaId}"]`))),this.addListeners(),evt&&evt.type==="on:debounced-resize"&&window.removeEventListener("on:debounced-resize",this.resizeInitHandler)}addListeners(){this.viewer.addEventListener("scroll",window.debounce(this.handleScroll.bind(this),200)),this.controls&&this.controls.addEventListener("click",this.handleNavClick.bind(this)),this.thumbs&&this.thumbs.addEventListener("click",this.handleThumbClick.bind(this)),window.addEventListener("on:debounced-resize",this.handleResize.bind(this))}handleScroll(){const newIndex=Math.round(this.viewer.scrollLeft/this.viewerItemOffset);newIndex!==this.currentIndex&&this.visibleItems[1].offsetLeft-this.visibleItems[0].offsetLeft===this.viewerItemOffset&&this.setActiveMedia(this.visibleItems[newIndex],!1,!0)}handleNavClick(evt){if(!evt.target.matches(".media-ctrl__btn"))return;const itemToShow=evt.target===this.nextBtn?this.visibleItems[this.currentIndex+1]:this.visibleItems[this.currentIndex-1];this.viewer.scrollTo({left:itemToShow.offsetLeft,behavior:"smooth"})}handleThumbClick(evt){const thumb=evt.target.closest("[data-media-id]");if(!thumb)return;const itemToShow=this.querySelector(`[data-media-id="${thumb.dataset.mediaId}"]`);

1this.setActiveMedia(itemToShow,!0,!0)}handleResize(){this.viewerItemOffset=this.visibleItems[1].offsetLeft-this.visibleItems[0].offsetLeft,this.thumbs&&this.checkThumbVisibilty(this.currentThumb)}setActiveMedia(mediaItem,scrollToItem=!0,playMedia=!1){mediaItem!==this.currentItem&&(window.pauseAllMedia(this),this.currentItem=mediaItem,this.currentIndex=this.visibleItems.indexOf(this.currentItem),!(this.dataset.layout==="stacked"&&theme.mediaMatches.md)&&(scrollToItem&&this.viewer.scrollTo({left:this.currentItem.offsetLeft}),this.thumbs&&this.setActiveThumb(),this.controls&&(this.prevBtn&&(this.prevBtn.disabled=this.currentIndex===0),this.nextBtn&&(this.nextBtn.disabled=this.currentIndex===this.visibleItems.length-1),this.counterCurrent&&(this.counterCurrent.textContent=this.currentIndex+1)),playMedia&&MediaGallery.playActiveMedia(mediaItem),this.xrButton&&mediaItem.dataset.mediaType==="model"&&(this.xrButton.dataset.shopifyModel3dId=mediaItem.dataset.mediaId),this.announceLiveRegion(this.currentItem,this.currentIndex+1)))}setActiveThumb(){this.currentThumb=this.thumbs.querySelector(`[data-media-id="${this.currentItem.dataset.mediaId}"]`);const btn=this.currentThumb.querySelector("button");this.thumbs.querySelectorAll(".media-thumbs__btn").forEach(el=>{el.classList.remove("is-active"),el.removeAttribute("aria-current")}),btn.classList.add("is-active"),btn.setAttribute("aria-current","true"),this.checkThumbVisibilty(this.currentThumb)}setVisibleItems(){this.viewerItems=this.querySelectorAll(".media-viewer__item"),this.visibleItems=Array.from(this.viewerItems).filter(el=>el.clientWidth>0),this.counterTotal&&(this.counterTotal.textContent=this.visibleItems.length),this.controls&&(this.controls.dataset.totalItems=this.visibleItems.length)}checkThumbVisibilty(thumb){const scrollPos=this.thumbs.scrollLeft,lastVisibleThumbOffset=this.thumbs.clientWidth+scrollPos,thumbOffset=thumb.offsetLeft;(thumbOffset+thumb.clientWidth>lastVisibleThumbOffset||thumbOffset<scrollPos)&&this.thumbs.scrollTo({left:thumbOffset,behavior:"smooth"})}onVariantChange(evt){if(this.mediaGroupingEnabled&&this.setActiveMediaGroup(this.getMediaGroupFromOptionSelectors(evt)),this.viewerItems){if(evt.detail.variant&&evt.detail.variant.featured_media){const mediaId=evt.detail.variant.featured_media.id.toString(),mediaItem=Array.from(this.viewerItems).find(el=>el.dataset.mediaId===mediaId);this.setActiveMedia(mediaItem,!0)}else if(this.mediaGroupChanged){const firstVisibleThumb=this.querySelector(".media-thumbs__item:not([hidden])");if(firstVisibleThumb){const{mediaId}=firstVisibleThumb.dataset,mediaItem=Array.from(this.viewerItems).find(el=>el.dataset.mediaId===mediaId);this.setActiveMedia(mediaItem,!0)}}}}getMediaGroupFromOptionSelectors(evt){return evt?evt.detail.selectedOptions[this.getMediaGroupData().groupOptionIndex]:this.getSelectedOptions()[this.getMediaGroupData().groupOptionIndex]}getMediaGroupData(){if(typeof this.variantMediaData>"u"){const dataEl=this.querySelector(".js-data-variant-media");this.variantMediaData=dataEl?JSON.parse(dataEl.textContent):!1}return this.variantMediaData}setActiveMediaGroup(groupName){if(this.mediaGroupChanged=this.currentMediaGroup!==groupName,this.currentMediaGroup=groupName,!this.mediaGroupChanged)return;const resetVisibility=()=>{this.mediaLists.forEach(list=>{list.forEach(mediaItem=>{mediaItem.hidden=!1})}),this.setVisibleItems()};if(!groupName){resetVisibility(),this.initialised||this.initGallery();return}const mediaGroupData=this.getMediaGroupData();this.mediaLists.forEach(list=>{let anyVisible=!1;if(list.forEach(el=>{const mediaItemGroup=mediaGroupData.media[el.dataset.mediaId].group,showThis=mediaItemGroup===groupName||mediaItemGroup===!0;el.hidden=!showThis,showThis&&(anyVisible=!0)}),anyVisible?([...list].forEach(el=>{mediaGroupData.media[el.dataset.mediaId].group===!0&&(mediaGroupData.media[el.dataset.mediaId].position==="start"?el.parentElement.prepend(el):el.parentElement.append(el))}),[...list].filter(el=>el.hidden).forEach(el=>el.parentElement.append(el))):resetVisibility(),list.length>0){const slider=list[0].closest("carousel-slider");slider&&slider.offsetParent&&slider.refresh()}}),this.currentItem=null,this.setVisibleItems(),this.initialised||this.initGallery()}getSelectedOptions(){const selectedOptions=[];return this.variantPicker.querySelectorAll(".option-selector").forEach(selector=>{selector.dataset.selectorType==="dropdown"?selectedOptions.push(selector.querySelector(".custom-select__btn").textContent.trim()):selectedOptions.push(selector.querySelector("input:checked").value)}),selectedOptions}announceLiveRegion(mediaItem,index){mediaItem.querySelector(".media-viewer img")&&(this.liveRegion.setAttribute("aria-hidden","false"),this.liveRegion.innerHTML=theme.strings.imageAvailable.replace("[index]",index),setTimeout(()=>{this.liveRegion.setAttribute("aria-hidden","true")},2e3))}static playActiveMedia(mediaItem){window.pauseAllMedia();const deferredMedia=mediaItem.querySelector("deferred-media");deferredMedia&&deferredMedia.loadContent()}}customElements.define("media-gallery",MediaGallery)}
2//# sourceMappingURL=/cdn/shop/t/60/assets/media-gallery.js.map?v=165992264703496174221778037099