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"]'),bubble:this.querySelector(".hidden-thumb-count-bubble")},this.mql=window.matchMedia("(min-width: 750x)"),this.variantChangeHandler=null,this.colorFallbackHandler=null,this.addEventListeners(),this.setupVariantDotHandler(),this.elements.thumbnails&&(this.setupThumbnailImages(),this.elements.viewer.addEventListener("slideChanged",debounce(this.onSlideChanged.bind(this),500)),this.elements.thumbnails.querySelectorAll("[data-target]").forEach(mediaToSwitch=>{mediaToSwitch.querySelector("button").addEventListener("click",()=>{const targetId=mediaToSwitch.dataset.target;this.setActiveMedia(targetId,!1);const opener=this.elements.viewer.querySelector(`[data-media-id="${targetId}"] .product__media-toggle`);if(opener){const{indexPosition}=opener.dataset,modalSelector=opener.closest("modal-opener")?.getAttribute("data-modal");if(opener.click(),indexPosition&&modalSelector){const modal=document.querySelector(modalSelector);modal&&requestAnimationFrame(()=>{requestAnimationFrame(()=>{if(!modal.hasAttribute("open"))return;const modalImage=modal.querySelector(`.product-media-modal__media:not(.hidden) [data-index="modal-media-${indexPosition}"]`)||modal.querySelector(`[data-index="modal-media-${indexPosition}"]`);if(!modalImage)return;const imageRect=modalImage.getBoundingClientRect();if(imageRect.width===0||imageRect.height===0)return;const modalContent=modal.querySelector(".product-media-modal__content");if(!modalContent)return;const contentRect=modalContent.getBoundingClientRect(),contentScrollTop=modalContent.scrollTop,imageTopRelative=imageRect.top-contentRect.top+contentScrollTop,contentHeight=modalContent.clientHeight,imageHeight=imageRect.height,centerOffset=contentHeight/2,imageCenter=imageHeight/2;modalContent.scrollTop=imageTopRelative-centerOffset+imageCenter})})}}})}),this.dataset.desktopLayout.includes("thumbnail")&&this.mql.matches&&this.removeListSemantic())}setupVariantDotHandler(){const sliderElement=this.elements.viewer.querySelector('[id^="Slider-"]');if(!sliderElement)return;if(this.elements.viewer.querySelector("[data-variant-dots-group]")){sliderElement.addEventListener("scroll",debounce(this.updateVariantDots.bind(this),50));const sliderComponent=this.elements.viewer;sliderComponent&&sliderComponent.updateDots&&(sliderComponent.updateDots=()=>{})}}updateVariantDots(){const sliderElement=this.elements.viewer.querySelector('[id^="Slider-"]');if(!sliderElement)return;const firstVisibleSlide=this.elements.viewer.querySelector("[data-variant-slider-group]:not(.hidden)");if(!firstVisibleSlide)return;const variantId=firstVisibleSlide.dataset.variantSliderGroup,variantDotsGroup=this.elements.viewer.querySelector(`[data-variant-dots-group="${variantId}"]`);if(!variantDotsGroup)return;const dots=variantDotsGroup.querySelectorAll(".slider-dot");if(!dots.length)return;const slides=Array.from(this.elements.viewer.querySelectorAll(`[data-variant-slider-group="${variantId}"]`)).filter(slide=>slide.clientWidth>0);if(!slides.length)return;const slideWidth=slides[0].clientWidth,scrollLeft=sliderElement.scrollLeft,activeIndex=Math.round(scrollLeft/slideWidth);dots.forEach((dot,index)=>{index===activeIndex?dot.classList.add("slider-dot--active"):dot.classList.remove("slider-dot--active")})}setupThumbnailImages(){this.elements.thumbnails.querySelectorAll(".thumbnail img").forEach(img=>{img.complete?this.handleThumbnailImageLoad(img):img.addEventListener("load",()=>this.handleThumbnailImageLoad(img))}),this.updateHiddenThumbnailCountBubble(),this.updateThumbnailWrapperVisibility()}updateThumbnailWrapperVisibility(){if(!this.elements.thumbnails)return;const wrapper=this.querySelector(".thumbnail-slider-wrapper");if(!wrapper)return;const items=this.elements.thumbnails.querySelectorAll(".thumbnail-list__item");Array.from(items).filter(item=>!item.classList.contains("hidden")).length>1?(wrapper.classList.remove("hidden"),wrapper.removeAttribute("hidden")):(wrapper.classList.add("hidden"),wrapper.setAttribute("hidden",""))}updateHiddenThumbnailCountBubble(){const hiddenCount=this.gethiddenThumbnailCount();this.elements.bubble&&(hiddenCount>0?(this.elements.bubble.textContent=`+${hiddenCount}`,_.removeClass(this.elements.bubble,"hidden")):_.addClass(this.elements.bubble,"hidden"))}gethiddenThumbnailCount(){const thumbnailItems=this.elements.thumbnails.querySelectorAll(".thumbnail-list__item");return Array.from(thumbnailItems).filter(item=>{if(item.classList.contains("hidden"))return!1;const img=item.querySelector("img");if(!img)return!1;const rect=img.getBoundingClientRect(),parentRect=this.elements.thumbnails.parentElement.getBoundingClientRect();return rect.right>parentRect.right}).length}addEventListeners(){const gallery=this.elements.viewer,isGmProduct=this.elements.liveRegion?.dataset.gmProduct==="true";if(!gallery)return;const slides=gallery.querySelectorAll(".slider__slide"),hasVariantGroups=gallery.querySelector("[data-variant-slider-group]");this.variantChangeHandler=event=>{const{variant}=event.detail,variantOption=variant?variant.title.replace(/\s+/g,"-").toLowerCase():null;if(!variantOption)return;hasVariantGroups&&(this.showVariantMedia(variant.id),this.showVariantThumbnails(variant.id));const slideToShow=Array.from(slides).find(s=>s.dataset.variantOption===variantOption);slideToShow&&this.setActiveMedia(slideToShow.dataset.mediaId,!0,!1)},document.addEventListener("variant:change",this.variantChangeHandler),hasVariantGroups&&(this.colorFallbackHandler=event=>{const{variantId}=event.detail;variantId&&(this.showVariantMedia(variantId),this.showVariantThumbnails(variantId))},document.addEventListener("variant:color-fallback",this.colorFallbackHandler))}disconnectedCallback(){this.variantChangeHandler&&document.removeEventListener("variant:change",this.variantChangeHandler),this.colorFallbackHandler&&document.removeEventListener("variant:color-fallback",this.colorFallbackHandler)}showVariantMedia(variantId){if(!variantId)return;const variantIdStr=variantId.toString();this.elements.viewer.querySelectorAll("[data-variant-dots-group]").forEach(group=>{group.dataset.variantDotsGroup===variantIdStr?group.style.display="contents":group.style.display="none"});const sliderElement=this.elements.viewer.querySelector('[id^="Slider-"]');sliderElement&&sliderElement.scrollTo({left:0,behavior:"instant"});const variantSlides=this.elements.viewer.querySelectorAll("[data-variant-slider-group]");
1let firstVisibleSlide=null;variantSlides.forEach(slide=>{slide.dataset.variantSliderGroup===variantIdStr?(slide.classList.remove("hidden"),firstVisibleSlide||(firstVisibleSlide=slide)):slide.classList.add("hidden")}),this.elements.viewer.querySelectorAll(".slider__slide").forEach(slide=>slide.classList.remove("is-active")),firstVisibleSlide&&firstVisibleSlide.classList.add("is-active"),this.elements.viewer.slider&&this.elements.viewer.slider.resetPages&&this.elements.viewer.slider.resetPages(),this.updateVariantDots()}showVariantThumbnails(variantId){if(!this.elements.thumbnails||!variantId)return;const variantIdStr=variantId.toString();this.elements.thumbnails.querySelectorAll(".thumbnail-list__item[data-variant-id]").forEach(thumbnail=>{thumbnail.dataset.variantId===variantIdStr?thumbnail.classList.remove("hidden"):thumbnail.classList.add("hidden")}),this.updateHiddenThumbnailCountBubble(),this.updateThumbnailWrapperVisibility()}getCurrentVariantId(){try{const selectedVariantEl=document.querySelector("variant-selects [data-selected-variant]");if(!selectedVariantEl)return null;const json=selectedVariantEl.textContent||selectedVariantEl.innerHTML||"";return JSON.parse(json)?.id?.toString()||null}catch(e){return console.warn("Could not find selected variant",e),null}}handleThumbnailImageLoad(img){const isWide=img.naturalWidth>img.naturalHeight;img.style.objectFit=isWide?"cover":"contain"}onSlideChanged(event){const thumbnail=this.elements.thumbnails.querySelector(`[data-target="${event.detail.currentElement.dataset.mediaId}"]`);this.setActiveThumbnail(thumbnail)}setActiveMedia(mediaId,prepend,shouldScroll=!0){let activeMedia=this.elements.viewer.querySelector(`[data-variant-slider-group]:not(.hidden)[data-media-id="${mediaId}"]`)||this.elements.viewer.querySelector(`[data-media-id="${mediaId}"]`)||this.elements.viewer.querySelector("[data-media-id]");if(!activeMedia)return;if(this.elements.viewer.querySelectorAll("[data-media-id]").forEach(element=>{element.classList.remove("is-active")}),activeMedia?.classList?.add("is-active"),prepend){if(activeMedia.parentElement.firstChild!==activeMedia&&activeMedia.parentElement.prepend(activeMedia),this.elements.thumbnails){const activeThumbnail2=this.elements.thumbnails.querySelector(`[data-target="${mediaId}"]`);activeThumbnail2?.parentElement?.firstChild!==activeThumbnail2&&activeThumbnail2?.parentElement?.prepend(activeThumbnail2)}this.elements.viewer.slider&&this.elements.viewer.resetPages()}if(this.preventStickyHeader(),window.setTimeout(()=>{if((!this.mql.matches||this.elements.thumbnails)&&activeMedia.parentElement.scrollTo({left:activeMedia.offsetLeft}),!shouldScroll)return;const activeMediaRect=activeMedia.getBoundingClientRect();if(activeMediaRect.top>-.5)return;const top=activeMediaRect.top+window.scrollY;window.scrollTo({top,behavior:"smooth"})}),this.playActiveMedia(activeMedia),!this.elements.thumbnails)return;const activeThumbnail=this.elements.thumbnails.querySelector(`[data-target="${mediaId}"]`);this.setActiveThumbnail(activeThumbnail),activeThumbnail&&this.announceLiveRegion(activeMedia,activeThumbnail.dataset.mediaPosition)}setActiveThumbnail(thumbnail){!this.elements.thumbnails||!thumbnail||(this.elements.thumbnails.querySelectorAll("button").forEach(element=>element.removeAttribute("aria-current")),thumbnail.querySelector("button").setAttribute("aria-current",!0))}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.forEac
1h(slide=>slide.setAttribute("role","presentation")))}}); 2//# sourceMappingURL=/cdn/shop/t/1082/assets/media-gallery.js.map?v=87280445689171045441790166654
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.