1class productGalleryComponent extends HTMLElement{constructor(){super(),this.initEvents(),this.bindNavigation()}bindNavigation(){this.addEventListener("click",event=>{if(event.target.closest(".swiper-button-next, .swiper-button-prev, .swiper-pagination"))return;const card=this.closest("product-card"),nameLink=card&&card.querySelector("a.product-card__name");nameLink?(event.preventDefault(),nameLink.click()):this.dataset.handle&&(event.preventDefault(),window.location.href="/products/"+this.dataset.handle)})}initEvents(){window.isTouch?this.classList.contains("active")?this.destroy():this.load():hoverintent(this,()=>{this.classList.add("hover"),this.load()},()=>{this.classList.remove("hover"),this.destroy()})}load(){if(!this.classList.contains("active")){if(this.classList.add("active"),this.dataset.media){let media=JSON.parse(this.dataset.media);media.length>1&&this.renderFromMedia(media);return}if(this.dataset.preRendered==="true"&&this.querySelector(".product-gallery__images")){this.querySelector(".product-gallery__images").classList.add("active"),this.classList.add("slide-active"),this.slider||this.initSlider();return}this.classList.add("loading-gallery"),window.theme&&window.theme.product&&typeof window.theme.product.loadProduct=="function"?window.theme.product.loadProduct(this.dataset.handle).then(product=>{if(!product){this.classList.remove("loading-gallery");return}this.render(product),this.classList.remove("loading-gallery"),window.isTouch&&this.addLink(product)}):console.error("Product loading function is not available.")}}render(product){product.images.length>1&&(this.injectImages(product),this.initSlider())}renderFromMedia(media){if(!this.dataset.inject){let div=document.createElement("div");this.offsetHeight==0?div.style.height=this.parentElement.offsetHeight+"px":div.style.height=this.offsetHeight+"px",div.classList.add("product-gallery__images"),div.classList.add("swiper");let html="";html=html+'<div class="swiper-wrapper">';let imageCount=0;const maxImages=4;media.forEach(item=>{imageCount>=maxImages||(item.media_type=="video"?(html=html+`<div class="swiper-slide" style="display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; position: relative;"> 2 <a class="product-card__link product-card__slide-link" href='/products/${this.dataset.handle}' alt='page Link'></a> 3 <video class="product-gallery__video" style="width: 100%; height: 100%; object-fit: cover;" autoplay loop muted playsinline> 4 ${item.sources.map(source=>`<source src="${source.url}" type="${source.mime_type}">`).join("")} 5 Your browser does not support the video tag. 6 </video> 7 </div>`,imageCount++):(html=html+`<div style="width: 100%; display: block; position: relative;" class="swiper-slide product-gallery__images-item"> 8 <a class="product-card__link product-card__slide-link" href='/products/${this.dataset.handle}' alt='page Link'></a> 9 <img loading="lazy" src='${item.src}' alt='Product image'/> 10 </div>`,imageCount++))}),html=html+"</div>",media.length>3?html=html+'<div class="swiper-pagination large"></div><div class="swiper-button-prev transparent-button"></div><div class="swiper-button-next transparent-button"></div>':html=html+'<div class="swiper-pagination"></div><div class="swiper-button-prev transparent-button"></div><div class="swiper-button-next transparent-button"></div>',div.innerHTML=html,this.append(div),this.dataset.inject=!0}this.initSlider(),this.classList.add("slide-active");let element=this.querySelector(".product-gallery__images");element&&element.classList.add("active")}injectImages(product){if(!this.dataset.inject){let div=document.createElement("div");this.offsetHeight==0?div.style.height=this.parentElement.offsetHeight+"px":div.style.height=this.offsetHeight+"px",div.classList.add("product-gallery__images"),div.classList.add("hidden"),div.classList.add("swiper");let html="";html=html+'<div class="swiper-wrapper">';let imageCount=0;const maxImages=4;
10product.images.forEach(image=>{if(!(imageCount>=maxImages))if(image.media_type=="video")html=html+`<div class="swiper-slide" style="display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; position: relative;"> 11 <a class="product-card__link product-card__slide-link" href='/products/${product.handle}' alt='${product.title} page Link'></a> 12 <video class="product-gallery__video" style="width: 100%; height: 100%; object-fit: cover;" autoplay loop muted playsinline> 13 ${image.sources.map(source=>`<source src="${source.url}" type="${source.mime_type}">`).join("")} 14 Your browser does not support the video tag. 15 </video> 16 </div>`,imageCount++;else{let src=image.src;if(this.dataset.size){let ext=window.theme.file.getExtension(src),lastIndex=src.lastIndexOf(ext);lastIndex!==-1&&(image.src=src.substring(0,lastIndex)+"_"+this.dataset.size+"_crop_top"+ext)}html=html+`<div style="width: 100%; display: block; position: relative;" class="swiper-slide product-gallery__images-item"> 17 <a class="product-card__link product-card__slide-link" href='/products/${product.handle}' alt='${product.title} page Link'></a> 18 <img loading="lazy" src='${image.src}' alt='${product.title}'/> 19 </div>`,imageCount++}}),html=html+"</div>",product.images.length>3?html=html+'<div class="swiper-pagination large"></div><div class="swiper-button-prev transparent-button"></div><div class="swiper-button-next transparent-button"></div>':html=html+'<div class="swiper-pagination"></div><div class="swiper-button-prev transparent-button"></div><div class="swiper-button-next transparent-button"></div>',div.innerHTML=html,this.append(div),this.dataset.inject=!0}}initSlider(){this.slider=new Swiper(this.querySelector(".product-gallery__images"),{preloadImages:!1,lazy:{loadPrevNext:!0},watchSlidesProgress:!0,autoHeight:!0,pagination:{el:".swiper-pagination",dynamicMainBullets:3,dynamicBullets:!0},navigation:{nextEl:".swiper-button-next",prevEl:".swiper-button-prev"},on:{init:slide=>{let element=this.querySelector(".product-gallery__images");element.classList.remove("hidden"),element.classList.add("active"),window.isTouch?this.classList.add("slide-active"):setTimeout(()=>{this.classList.contains("hover")&&this.classList.add("slide-active")},400)},slideChange:index=>{}}})}destroy(){if(!(this.dataset.preRendered==="true"||this.dataset.media)&&(this.classList.remove("active"),this.querySelector(".product-gallery__images"))){let element=this.querySelector(".product-gallery__images");element.classList.remove("active"),this.classList.remove("slide-active"),setTimeout(()=>{element.classList.add("hidden"),this.slider&&(this.slider.destroy(),this.classList.remove("slide-active"))},400)}}addLink(product){this.querySelectorAll("img").forEach(image=>{image.addEventListener("click",()=>{window.location.href=window.location.protocol+"//"+window.location.host+"/products/"+product.handle})})}}customElements.define("product-gallery-component",productGalleryComponent); 20//# sourceMappingURL=/cdn/shop/t/465/assets/component-product-gallery.js.map?v=147930064644852143881789990200
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.