https://www.trafalgarstore.com/cdn/shop/t/261/assets/media-gallery.js?v=97683487398261243881790570060

1customElements.get("media-gallery")||customElements.define("media-gallery",class extends HTMLElement{constructor(){super(),this.selectors={viewer:'[id^="GalleryViewer"]',thumbnails:'[id^="GalleryThumbnails"]',mediaList:'[id^="Slider-Gallery"]',mediaItems:[".product__media-item"]},this.initialized=!1,this.sliderInstance=!1,this.thumbsInstance=!1}connectedCallback(){FoxTheme.Motion.inView(this,this.init.bind(this))}init(){if(this.initialized===!0)return;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.context=this.dataset.context,this.setSliderOptions(),this.resolveColorGroups();const mql=window.matchMedia(FoxTheme.config.mediaQueryMobile);mql.onchange=this.updateMediaLayout.bind(this),this.updateMediaLayout(),this.enableImageZoom&&this.initImageZoom(),this.initialized=!0}setSliderOptions(){const mediaItemGap=parseInt(this.dataset.mediaItemGap),mediaItemGapMobile=parseInt(this.dataset.mediaItemGapMobile);switch(this.sliderOptions={init:!1,slidesPerView:this.enableMobileThumbnails?1:"auto",spaceBetween:mediaItemGapMobile,loop:!1,grabCursor:!0,allowTouchMove:!0,autoHeight:!0,breakpoints:{768:{spaceBetween:mediaItemGap}},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,direction:"horizontal"}},spaceBetween:mediaItemGapMobile,loop:!1,freeMode:!0,watchSlidesProgress:!0,threshold:2,breakpoints:{768:{spaceBetween:mediaItemGap}}},this.mediaLayout){case"vertical-carousel":this.thumbsOptions.breakpoints={...this.thumbsOptions.breakpoints,768:{direction:"vertical",slidesPerView:"auto",spaceBetween:mediaItemGap}};break;case"carousel":this.thumbsOptions.breakpoints={...this.thumbsOptions.breakpoints,1024:{slidesPerView:5},1536:{slidesPerView:7}};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.sliderInstance.slider.init())}destroySlider(){typeof this.sliderInstance=="object"&&(this.sliderInstance.slider.destroy(),this.sliderInstance=!1)}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=>{const{mediaType,mediaIndex,src,pswpWidth,pswpHeight}=media.dataset;let source={id:mediaIndex,mediaType};switch(mediaType){case"model":case"video":case"external_video":const htmlTag=mediaType==="model"?"product-model":"video-element";source={...source,html:`<div class="pswp__item--${mediaType}">${media.querySelector(htmlTag).outerHTML}</div>`};break;default:source={...source,src,width:pswpWidth,height:pswpHeight};break}dataSource.push(source)}),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)=>{const slider=this.sliderInstance?.slider;if(slider){const{slides,activeIndex}=slider;if(slides[activeIndex]){const el=slides[activeIndex].querySelector("img");if(el)return el}}return thumbEl}),this.lightbox.addFilter("placeholderSrc",(placeholderSrc,{data:{id}})=>

1{const slider=this.sliderInstance?.slider;if(slider){const{slides,activeIndex}=slider;if(slides[activeIndex]){const el=slides[activeIndex].querySelector("img");if(el)return el.src}}return placeholderSrc}),this.lightbox.on("change",()=>{window.pauseAllMedia(this)});let lastLightboxIndex=null;this.lightbox.on("close",()=>{this.lightbox?.pswp?.currIndex&&(lastLightboxIndex=this.lightbox.pswp.currIndex)}),this.lightbox.on("destroy",()=>{const slider=this.sliderInstance?.slider;if(slider&&lastLightboxIndex!==null){const targetIndex=lastLightboxIndex;targetIndex>=0&&targetIndex<slider.slides.length&&slider.activeIndex!==targetIndex&&requestAnimationFrame(()=>{slider.slideTo(targetIndex,0)}),lastLightboxIndex=null}}),this.lightbox.on("pointerDown",e=>{this.lightbox?.pswp?.currSlide?.data?.mediaType!="image"&&e.preventDefault()}),this.lightbox.on("uiRegister",()=>{const lightboxUI=this.lightbox?.pswp?.ui;lightboxUI&&(this.onlyImage||(lightboxUI.registerElement({name:"next",ariaLabel:"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()}}),lightboxUI.registerElement({name:"prev",ariaLabel:"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()}})),lightboxUI.registerElement({name:"close-zoom",ariaLabel:"Close zoom image",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.init(),FoxTheme.utils.addEventDelegate({selector:".js-photoswipe--zoom",context:this,handler:(e,media)=>{if(media.dataset?.mediaType==="image"){const index=Number(media.dataset.mediaIndex)||0;this.lightbox.loadAndOpen(index)}}})}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)return;let featuredMedia=variant.featured_media;if(!featuredMedia&&variant.featured_image&&(featuredMedia={id:variant.featured_image.id,position:variant.featured_image.position||0,media_type:"image"}),this.applyColorFilter(variant),!!featuredMedia)if(this.sliderInstance.slider){const slides=this.sliderInstance.slider.slides;if(!slides.length)return;let slideIndex=0;slides.forEach((slide,index)=>{slide.dataset.mediaId==featuredMedia.id&&(slideIndex=index)}),this.sliderInstance.slider.slideTo(slideIndex,0,!1)}else this.sortMediaItems(variant,featuredMedia)}resolveColorGroups(){this.colorFilterReady=!1,this.activeColorCode=null,this.colorCodeByMediaId=new Map,this.colorOptionIndex=-1,this.allMediaItems=[...this.querySelectorAll(".product__media-item")],this.allThumbItems=[...this.querySelectorAll(".product__thumbs-item")],this.thumbsWrapper=this.querySelector('[id^="Slider-Thumbnails"]');const{optionNames,variants}=this.getVariantsData();variants.length&&(this.colorFilterReady=this.resolveAltColorGroups(optionNames,variants)

1)}handleize(value){return String(value??"").toLowerCase().replace(/['’]/g,"").replace(/[^a-z0-9]+/g,"-").replace(/^-+|-+$/g,"")}resolveAltColorGroups(optionNames,variants){const altByMediaId=new Map;this.allMediaItems.forEach(node=>{const alt=this.handleize(node.dataset.alt);alt&&altByMediaId.set(node.dataset.mediaId,alt)});const altCodes=new Set(altByMediaId.values()),optionCount=variants[0]?.options?.length||0;let colorIndex=(optionNames||[]).findIndex(name=>/\b(colou?r|farbe|couleur|colore)\b/i.test(String(name)));if(colorIndex===-1){let bestMatches=0;for(let i=0;i<optionCount;i++){const values=new Set(variants.map(v=>this.handleize(v.options[i])));let matches=0;values.forEach(value=>altCodes.has(value)&&matches++),matches>bestMatches&&(bestMatches=matches,colorIndex=i)}}return colorIndex===-1?!1:(this.colorOptionIndex=colorIndex,this.colorCodeByMediaId=altByMediaId,!0)}getVariantsData(){const empty={optionNames:[],variants:[]},node=this.querySelector("[data-media-variants]");if(!node)return empty;try{const data=JSON.parse(node.textContent);return!data||!Array.isArray(data.variants)?empty:{optionNames:Array.isArray(data.option_names)?data.option_names:[],variants:data.variants}}catch{return empty}}applyColorFilter(variant){if(!this.colorFilterReady)return;const targetCode=this.resolveTargetColorCode(variant);!targetCode||targetCode===this.activeColorCode||(this.activeColorCode=targetCode,this.rebuildVisibleMedia())}resolveTargetColorCode(variant){return this.handleize(variant.options?.[this.colorOptionIndex])||null}isCodeVisible(code){return code===this.activeColorCode}rebuildVisibleMedia(){const visibleMedia=this.allMediaItems.filter(node=>this.isCodeVisible(this.colorCodeByMediaId.get(node.dataset.mediaId)));this.destroyAllSliders(),this.elements.mediaList.replaceChildren(...visibleMedia),this.elements.mediaItems=visibleMedia,this.thumbsWrapper&&this.thumbsWrapper.replaceChildren(...this.allThumbItems.filter(node=>this.isCodeVisible(this.colorCodeByMediaId.get(node.dataset.target)))),this.updateMediaLayout()}destroyAllSliders(){typeof this.sliderInstance=="object"&&(this.sliderInstance.slider.destroy(!0,!0),this.sliderInstance=!1),typeof this.thumbsInstance=="object"&&(this.thumbsInstance.slider.destroy(!0,!0),this.thumbsInstance=!1)}sortMediaItems(variant,featuredMedia){if(featuredMedia||(featuredMedia=variant.featured_media||(variant.featured_image?{id:variant.featured_image.id,position:variant.featured_image.position||0,media_type:"image"}:null)),!featuredMedia)return;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==featuredMedia.id){const[element]=newMedias.splice(index,1);return newMedias.unshift(element),!0}}),this.elements.mediaList.innerHTML="",newMedias.forEach(media=>{this.elements.mediaList.appendChild(media)}),!FoxTheme.config.mqlMobile&&this.context!=="quickview"){const selectedMedia=this.querySelector(`[data-media-id="${featuredMedia.id}"]`);selectedMedia&&window.scrollTo({top:selectedMedia.offsetTop,behavior:"smooth"})}}});
2//# sourceMappingURL=/cdn/shop/t/261/assets/media-gallery.js.map?v=97683487398261243881790570060