https://twillory.com/cdn/shop/t/1072/assets/media-gallery.js?v=178446131626671795561789034710

1customElements.get("media-gallery")||customElements.define("media-gallery",class MediaGallery extends HTMLElement{static focusableSelector="a[href], area[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), iframe, video[controls], [tabindex]";constructor(){super(),this.selectors={viewer:'[id^="GalleryViewer"]',thumbnails:'[id^="GalleryThumbnails"]',mediaList:'[id^="Slider-Gallery"]',mediaItems:[".product__media-item"]},this.sliderInstance=!1,this.thumbsInstance=!1,this.currentFeaturedMediaId=null}connectedCallback(){this.init()}disconnectedCallback(){this.removeBackgroundInert(),this.destroySlider(),typeof this.thumbsInstance=="object"&&(this.thumbsInstance.destroy(),this.thumbsInstance=!1),this.lightbox&&(this.lightbox.destroy(),this.lightbox=null)}init(){this.elements=window.FoxTheme.utils.queryDomNodes(this.selectors,this),this.mediaLayout=this.dataset.mediaLayout,this.onlyImage=this.dataset.onlyImage==="true",this.enableDesktopSlider=this.dataset.enableDesktopSlider==="true",this.enableMobileThumbnails=this.dataset.enableMobileThumbnails==="true",this.enableImageZoom=this.dataset.enableImageZoom==="true",this.setSliderOptions();const mql=window.matchMedia(FoxTheme.config.mediaQueryMobile);mql.onchange=this.updateMediaLayout.bind(this),this.updateMediaLayout(),this.enableImageZoom&&this.initImageZoom()}setSliderOptions(){const mediaItemGap=parseInt(this.dataset.mediaItemGap);switch(this.sliderOptions={init:!1,observeSlideVisibility:!1,slidesPerView:"1.1",spaceBetween:mediaItemGap,loop:!0,grabCursor:!0,allowTouchMove:!0,autoHeight:!0,navigation:{nextEl:this.querySelector(".swiper-button-next"),prevEl:this.querySelector(".swiper-button-prev")},pagination:{el:this.querySelector(".swiper-pagination"),clickable:!0,type:"fraction"},threshold:2},this.thumbsOptions={slidesPerView:4,breakpoints:{461:{slidesPerView:5}},spaceBetween:mediaItemGap,loop:!1,freeMode:!0,watchSlidesProgress:!0,threshold:2},this.mediaLayout){case"vertical-carousel":this.thumbsOptions=Object.assign({},this.thumbsOptions,{breakpoints:{768:{direction:"vertical",slidesPerView:"auto"}}});break;case"slider-freemode":this.sliderOptions=Object.assign({},this.sliderOptions,{slidesPerView:"auto",watchSlidesProgress:!0});break}}updateMediaLayout(){FoxTheme.config.mqlMobile?this.initSlider():this.enableDesktopSlider?this.initSlider():this.destroySlider()}initSlider(){typeof this.sliderInstance!="object"&&((this.enableDesktopSlider||this.enableMobileThumbnails)&&this.elements.thumbnails&&(this.thumbsInstance=new window.FoxTheme.Carousel(this.elements.thumbnails,this.thumbsOptions),this.thumbsInstance.init(),this.sliderOptions.thumbs={swiper:this.thumbsInstance.slider,autoScrollOffset:2}),this.sliderInstance=new window.FoxTheme.Carousel(this.elements.viewer,this.sliderOptions,[FoxTheme.Swiper.Thumbs]),this.sliderInstance.init(),this.handleSliderAfterInit(),this.handleSlideChange(),this.handleSlideAccessibility(),this.sliderInstance.slider.init())}destroySlider(){typeof this.sliderInstance=="object"&&(this.sliderInstance.destroy(),this.sliderInstance=!1,this.resetSlideAccessibility())}handleSlideAccessibility(){const update=swiper=>this.updateSlideAccessibility(swiper);this.sliderInstance.slider.on("afterInit",update),this.sliderInstance.slider.on("slideChange",update),this.sliderInstance.slider.on("transitionEnd",update)}updateSlideAccessibility(swiper){const{slides,activeIndex}=swiper,isFreeMode=this.mediaLayout==="slider-freemode";slides.forEach((slide,index)=>{const isVisible=isFreeMode?slide.classList.contains("swiper-slide-visible"):index===activeIndex;slide.setAttribute("aria-hidden",isVisible?"false":"true"),slide.toggleAttribute("inert",!isVisible),slide.querySelectorAll(MediaGallery.focusableSelector).forEach(element=>{isVisible?element.removeAttribute("tabindex"):element.setAttribute("tabindex","-1")})})}resetSlideAccessibility(){this.querySelectorAll(".product__media-item").forEach(sli

1de=>{slide.removeAttribute("aria-hidden"),slide.removeAttribute("inert"),slide.querySelectorAll(MediaGallery.focusableSelector).forEach(element=>{element.removeAttribute("tabindex")})})}initThumbsSlider(){typeof this.thumbsInstance!="object"&&(this.thumbsInstance=new window.FoxTheme.Carousel(this.selectors.thumbnails,this.thumbsOptions),this.thumbsInstance.init())}initImageZoom(){let dataSource=[];const allMedia=[...this.querySelectorAll(".product__media-item:not(.swiper-slide-duplicate)")];allMedia&&allMedia.forEach(media=>{switch(media.dataset.mediaType){case"model":dataSource.push({id:media.dataset.mediaIndex,html:`<div class="pswp__item--${media.dataset.mediaType}">${media.querySelector("product-model").outerHTML}</div>`,mediaType:media.dataset.mediaType});break;case"video":case"external_video":dataSource.push({id:media.dataset.mediaIndex,html:`<div class="pswp__item--${media.dataset.mediaType}">${media.querySelector("video-element").outerHTML}</div>`,mediaType:media.dataset.mediaType});break;case"image":dataSource.push({id:media.dataset.mediaIndex,src:media.dataset.src,width:media.dataset.pswpWidth,height:media.dataset.pswpHeight,alt:media.dataset.alt,mediaType:media.dataset.mediaType});break}}),this.lightbox=new window.FoxTheme.PhotoSwipeLightbox({dataSource,pswpModule:window.FoxTheme.PhotoSwipe,bgOpacity:1,arrowPrev:!1,arrowNext:!1,zoom:!1,close:!1,counter:!1,preloader:!1}),this.lightbox.addFilter("thumbEl",(thumbEl,{id},index)=>{if(this.sliderInstance&&this.sliderInstance.slider){const{slides,activeIndex}=this.sliderInstance.slider;if(slides[activeIndex]){const el=slides[activeIndex].querySelector("img");if(el)return el}}return thumbEl}),this.lightbox.addFilter("placeholderSrc",(placeholderSrc,{data:{id}})=>{if(this.sliderInstance&&this.sliderInstance.slider){const{slides,activeIndex}=this.sliderInstance.slider;if(slides[activeIndex]){const el=slides[activeIndex].querySelector("img");if(el)return el.src}}return placeholderSrc}),this.lightbox.on("change",()=>{if(window.pauseAllMedia(this),this.sliderInstance&&this.sliderInstance.slider){const{currIndex}=this.lightbox.pswp;this.sliderInstance.slider.realIndex!==currIndex&&this.sliderInstance.slider.slideToLoop(currIndex,100,!1)}}),this.lightbox.on("pointerDown",e=>{this.lightbox.pswp.currSlide.data.mediaType!="image"&&e.preventDefault()}),this.lightbox.on("uiRegister",()=>{this.onlyImage||(this.lightbox.pswp.ui.registerElement({name:"next",ariaLabel:window.FoxTheme.accessibilityStrings&&window.FoxTheme.accessibilityStrings.nextSlide||"Next slide",order:3,isButton:!0,html:'<svg class="pswp-icon-next flip-x" viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 65,90 L 25,50  L 65,10 L 60,0 Z"></path></svg>',onClick:(event,el)=>{this.lightbox.pswp.next()}}),this.lightbox.pswp.ui.registerElement({name:"prev",ariaLabel:window.FoxTheme.accessibilityStrings&&window.FoxTheme.accessibilityStrings.previousSlide||"Previous slide",order:1,isButton:!0,html:'<svg class="pswp-icon-prev rtl-flip-x" viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 65,90 L 25,50  L 65,10 L 60,0 Z"></path></svg>',onClick:(event,el)=>{this.lightbox.pswp.prev()}})),this.lightbox.pswp.ui.registerElement({name:"close-zoom",ariaLabel:window.FoxTheme.accessibilityStrings&&window.FoxTheme.accessibilityStrings.closeGallery||"Close image gallery",order:2,isButton:!0,html:'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" role="presentation" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>',onClick:(event,el)=>{this.lightbox.pswp.close()}})}),this.lightbox.on("bindEvents",()=>{const{element}=this.lightbox.pswp;element.setAttribute("aria-modal","true"),element.setAttribute("aria-label","Product image gallery"),this.setBackgroundInert(element),element.addEventListener("keydown",this.handleModalTab.bind(this))}),this.lightbox.on("afterInit",()=>{const closeButton=this.lightbox.pswp.element.querySelector(".pswp__button--close-zoom");closeButton&&closeButton.focus()}),this.lightbox.on("close",()=>

1{this.removeBackgroundInert()}),this.lightbox.on("destroy",()=>{this.removeBackgroundInert(),this.lastFocusedTrigger&&(this.lastFocusedTrigger.focus(),this.lastFocusedTrigger=null)}),this.lightbox.init(),this.querySelectorAll(".js-photoswipe--zoom").forEach(button=>{let clickCount=0,clickTimer=null;button.addEventListener("click",e=>{if(!(window.innerWidth<=767||"ontouchstart"in window)){if(e.target.dataset.mediaType==="image"){const index=Number(e.target.dataset.mediaIndex)||0;this.lastFocusedTrigger=button,this.lightbox.loadAndOpen(index)}return}if(e.preventDefault(),e.stopPropagation(),clickCount++,clickCount===1)clickTimer=setTimeout(()=>{clickCount=0},300);else if(clickCount===2&&(clearTimeout(clickTimer),clickCount=0,e.target.dataset.mediaType==="image")){const index=Number(e.target.dataset.mediaIndex)||0;this.lastFocusedTrigger=button,this.lightbox.loadAndOpen(index)}})})}setBackgroundInert(modalElement){FoxTheme.a11y.lockBackground(this,[modalElement])}removeBackgroundInert(){FoxTheme.a11y.unlockBackground(this)}handleModalTab(event){if(event.key!=="Tab")return;const modalElement=this.lightbox.pswp&&this.lightbox.pswp.element;if(!modalElement)return;const focusable=FoxTheme.a11y.getFocusableElements(modalElement);if(focusable.length===0)return;const first=focusable[0],last=focusable[focusable.length-1];event.shiftKey&&(document.activeElement===first||document.activeElement===modalElement)?(event.preventDefault(),last.focus()):!event.shiftKey&&document.activeElement===last&&(event.preventDefault(),first.focus())}handleSliderAfterInit(){this.sliderInstance.slider.on("afterInit",swiper=>{const{slides,activeIndex}=swiper;if(slides[activeIndex]){const isModelMediaType=slides[activeIndex].dataset.mediaType==="model";this.toggleSliderDraggableState(!isModelMediaType)}})}handleSlideChange(){this.sliderInstance.slider.on("realIndexChange",swiper=>{const{slides,activeIndex,thumbs}=swiper;if(thumbs.swiper&&thumbs.swiper.slideTo(activeIndex),slides[activeIndex]){this.playActiveMedia(slides[activeIndex]);const isModelMediaType=slides[activeIndex].dataset.mediaType==="model";this.toggleSliderDraggableState(!isModelMediaType)}})}toggleSliderDraggableState(isDraggable){this.sliderInstance.slider.allowTouchMove!==isDraggable&&(this.sliderInstance.slider.allowTouchMove=isDraggable)}playActiveMedia(selected){const deferredMedia=selected.querySelector("product-model");deferredMedia&&deferredMedia.loadContent(!1)}setActiveMedia(variant){if(!variant||!variant.hasOwnProperty("featured_media")||!variant.featured_media)return;const newMediaId=variant.featured_media.id,mediaChanged=this.currentFeaturedMediaId!==newMediaId;if(this.sliderInstance.slider){if(mediaChanged){const slideIndex=variant.featured_media.position||0;this.sliderInstance.slider.slideToLoop(slideIndex-1)}}else this.sortMediaItems(variant,mediaChanged);this.currentFeaturedMediaId=newMediaId}sortMediaItems(variant,mediaChanged=!0){let newMedias=this.elements.mediaItems;if(newMedias.sort(function(a,b){return a.dataset.mediaIndex-b.dataset.mediaIndex}),newMedias.some((media,index)=>{if(media.dataset.mediaId==variant.featured_media.id){const[element]=newMedias.splice(index,1);return newMedias.unshift(element),!0}}),this.elements.mediaList.innerHTML="",newMedias.forEach(media=>{this.elements.mediaList.appendChild(media)}),mediaChanged&&!FoxTheme.config.mqlMobile){const selectedMedia=this.querySelector(`[data-media-id="${variant.featured_media.id}"]`);selectedMedia&&window.scrollTo({top:selectedMedia.offsetTop,behavior:"smooth"})}}});
2//# sourceMappingURL=/cdn/shop/t/1072/assets/media-gallery.js.map?v=178446131626671795561789034710