https://www.heysilo.com/cdn/shop/t/26/assets/media-gallery.js?v=148980217941690044591782404188

1customElements.get("media-gallery")||customElements.define("media-gallery",class extends HTMLElement{constructor(){super(),this.elements={liveRegion:this.querySelector('[id^="GalleryStatus"]'),viewer:this.querySelector('[id^="GalleryViewer"]'),thumbnails:this.querySelector('[id^="GalleryThumbnails"]')},this.mql=window.matchMedia("(min-width: 750px)"),this.track=this.elements.viewer?.querySelector(".product__media-list"),this.initCarousel(),this.elements.thumbnails&&(this.elements.thumbnails.querySelectorAll("[data-target]").forEach(mediaToSwitch=>{mediaToSwitch.querySelector("button")?.addEventListener("click",this.setActiveMedia.bind(this,mediaToSwitch.dataset.target,!1))}),this.dataset.desktopLayout?.includes("thumbnail")&&this.mql.matches&&this.removeListSemantic())}disconnectedCallback(){this._io?.disconnect(),this._io=null}initCarousel(){this.track&&(this.slides=Array.from(this.track.querySelectorAll(".slider__slide")).filter(slide=>slide.offsetParent!==null),this.slides.length&&(this._io=new IntersectionObserver(entries=>{let best=null,bestRatio=0;for(const entry of entries)entry.isIntersecting&&entry.intersectionRatio>bestRatio&&(best=entry.target,bestRatio=entry.intersectionRatio);best&&bestRatio>=.5&&this.onActiveSlide(best)},{root:this.track,threshold:[.5,.75,1]}

1),this.slides.forEach(slide=>this._io.observe(slide)),this.syncDots()))}syncDots(){const pagination=this.querySelector("[data-pagination]");if(!pagination)return;const counter=pagination.querySelector(".slider-counter");pagination.querySelectorAll(".slider-dot").forEach(dot=>dot.remove()),this.slides.forEach((slide,i)=>{const dot=document.createElement("button");dot.type="button",dot.className="slider-dot"+(i===0?" active":""),dot.setAttribute("aria-label",`Slide ${i+1}`),dot.dataset.index=i+1,dot.innerHTML='<svg width="7" height="7" viewBox="0 0 7 7" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="7" height="7" rx="3.5" fill="white"/></svg>',dot.addEventListener("click",()=>this.scrollToSlide(slide)),counter?pagination.insertBefore(dot,counter):pagination.appendChild(dot)})}onActiveSlide(slide){const mediaId=slide.dataset.mediaId;if(!mediaId||slide.classList.contains("is-active")){mediaId&&this.updatePaginationDots(mediaId);return}if(this.elements.viewer.querySelectorAll("[data-media-id]").forEach(el=>el.classList.toggle("is-active",el===slide)),this.updatePaginationDots(mediaId),this.elements.thumbnails){const thumb=this.elements.thumbnails.querySelector(`[data-target="${mediaId}"]`);this.setActiveThumbnail(thumb)}this.playActiveMedia(slide)}scrollToSlide(slide,smooth=!0){!this.track||!slide||this.track.scrollTo({left:slide.offsetLeft,behavior:smooth?"smooth":"auto"})}fadeToSlide(slide){if(!this.track||!slide)return;const targetLeft=slide.offsetLeft;if(Math.abs(this.track.scrollLeft-targetLeft)<2)return;const track=this.track;clearTimeout(this._fadeTimer),track.style.transition="opacity 0.18s ease",track.style.opacity="0";const swap=e=>{if(e&&(e.target!==track||e.propertyName!=="opacity"))return;clearTimeout(this._fadeTimer),track.removeEventListener("transitionend",swap);const prevSnap=track.style.scrollSnapType,prevBehavior=track.style.scrollBehavior;track.style.scrollSnapType="none",track.style.scrollBehavior="auto",track.scrollLeft=slide.offsetLeft,track.offsetWidth,track.style.scrollSnapType=prevSnap,track.style.scrollBehavior=prevBehavior,requestAnimationFrame(()=>{track.style.opacity="1"})};track.addEventListener("transitionend",swap),this._fadeTimer=setTimeout(swap,240)}setActiveMedia(mediaId,prepend,fade){const activeMedia=this.elements.viewer.querySelector(`[data-media-id="${mediaId}"]`)||this.elements.viewer.querySelector("[data-media-id]");if(!activeMedia||(this.updatePaginationDots(activeMedia.dataset.mediaId),this.elements.viewer.querySelectorAll("[data-media-id]").forEach(element=>element.classList.remove("is-active")),activeMedia.classList.add("is-active"),this.preventStickyHeader(),fade?this.fadeToSlide(activeMedia):this.scrollToSlide(activeMedia),this.playActiveMedia(activeMedia),!this.elements.thumbnails))return;const activeThumbnail=this.elements.thumbnails.querySelector(`[data-target="${activeMedia.dataset.mediaId}"]`);typeof this.setActiveThumbnail=="function"&&this.setActiveThumbnail(activeThumbnail),this.announceLiveRegion(activeMedia,activeThumbnail?.dataset.mediaPosition)}updatePaginationDots(mediaId){const pagination=this.querySelector("[data-pagination]");if(!pagination)return;const dots=pagination.querySelectorAll(".slider-dot"),activeIndex=this.slides.findIndex(slide=>slide.dataset.mediaId===mediaId),total=dots.length,MAX=5;let start=activeIndex-Math.floor(MAX/2);start=Math.max(0,Math.min(start,total-MAX));const end=start+MAX-1;dots.forEach((dot,index)=>{dot.classList.toggle("active",index===activeIndex),dot.classList.remove("slider-dot--hidden","slider-dot--edge"),!(total<=MAX)&&(index<start||index>end?dot.classList.add("slider-dot--hidden"):(index===start&&start>0||index===end&&end<total-1)&&dot.classList.add("slider-dot--edge"))});const counter=pagination.querySelector(".slider-counter--current");counter&&(counter.textContent=activeIndex+1)}setActiveThumbnail(thumbnail){!this.elements.thumbnails||!thumbnail||(this.elements.thumbnails.querySelectorAll("button").forEach(element=>element.removeAttribute("aria-current")),thumbnail.querySelector("button")?.setAttribute("aria-current",!0),!this.elements.thumbnails.isSli

1deVisible?.(thumbnail,10)&&this.elements.thumbnails.slider?.scrollTo({left:thumbnail.offsetLeft}))}announceLiveRegion(activeItem,position){const image=activeItem.querySelector(".product__modal-opener--image img");image&&(image.onload=()=>{this.elements.liveRegion.setAttribute("aria-hidden",!1),this.elements.liveRegion.innerHTML=window.accessibilityStrings.imageAvailable.replace("[index]",position),setTimeout(()=>{this.elements.liveRegion.setAttribute("aria-hidden",!0)},2e3)},image.src=image.src)}playActiveMedia(activeItem){window.pauseAllMedia();const deferredMedia=activeItem.querySelector(".deferred-media");deferredMedia&&deferredMedia.loadContent(!1)}preventStickyHeader(){this.stickyHeader=this.stickyHeader||document.querySelector("sticky-header"),this.stickyHeader&&this.stickyHeader.dispatchEvent(new Event("preventHeaderReveal"))}removeListSemantic(){this.elements.viewer.slider&&(this.elements.viewer.slider.setAttribute("role","presentation"),this.elements.viewer.sliderItems.forEach(slide=>slide.setAttribute("role","presentation")))}});
2//# sourceMappingURL=/cdn/shop/t/26/assets/media-gallery.js.map?v=148980217941690044591782404188