1import{Component}from"@theme/component";import{supportsViewTransitions,startViewTransition,onAnimationEnd,prefersReducedMotion,debounce,preloadImage,isLowPowerDevice}from"@theme/utilities";import{scrollIntoView}from"@theme/scrolling";import{ZoomMediaSelectedEvent}from"@theme/events";import{DialogCloseEvent}from"@theme/dialog";export class ZoomDialog extends Component{requiredRefs=["dialog","media","thumbnails"];#highResImagesLoaded=new Set;connectedCallback(){super.connectedCallback(),this.refs.dialog.addEventListener("scroll",this.handleScroll)}disconnectedCallback(){super.disconnectedCallback(),this.refs.dialog.removeEventListener("scroll",this.handleScroll)}async open(index,event){event.preventDefault();const{dialog,media,thumbnails}=this.refs,targetImage=media[index],targetThumbnail=thumbnails.children[index],open=()=>{dialog.showModal();for(const target of[targetThumbnail,targetImage])target?.scrollIntoView({behavior:"instant"})},sourceImage=event.target instanceof Element?event.target.closest("li,slideshow-slide"):null;if(!supportsViewTransitions()||isLowPowerDevice()||!sourceImage||!targetImage)return open();const transitionName="gallery-item";sourceImage.style.setProperty("view-transition-name",transitionName),await startViewTransition(()=>{open(),sourceImage.style.removeProperty("view-transition-name"),targetImage.style.setProperty("view-transition-name",transitionName)}),targetImage.style.removeProperty("view-transition-name"),this.selectThumbnail(index,{behavior:"instant"})}#loadHighResolutionImage(mediaContainer){if(!mediaContainer.classList.contains("product-media-container--image"))return!1;const image=mediaContainer.querySelector("img.product-media__image");if(!image||!(image instanceof HTMLImageElement))return!1;const highResolutionUrl=image.getAttribute("data_max_resolution");if(!highResolutionUrl||this.#highResImagesLoaded.has(highResolutionUrl))return!1;preloadImage(highResolutionUrl);const newImage=new Image;newImage.className=image.className,newImage.alt=image.alt,newImage.setAttribute("data_max_resolution",highResolutionUrl),newImage.onload=()=>{image.replaceWith(newImage),this.#highResImagesLoaded.add(highResolutionUrl)},newImage.src=highResolutionUrl}handleScroll=debounce(async()=>{const{media,thumbnails}=this.refs,mostVisibleElement=await getMostVisibleElement(media),activeIndex=media.indexOf(mostVisibleElement),targetThumbnail=thumbnails.children[activeIndex];!targetThumbnail||!(targetThumbnail instanceof HTMLElement)||(Array.from(thumbnails.querySelectorAll("button")).forEach((button,i)=>{button.setAttribute("aria-selected",`${i===activeIndex}`)}),this.#loadHighResolutionImage(mostVisibleElement),this.dispatchEvent(new ZoomMediaSelectedEvent(activeIndex)))},50);async close(){const{dialog,media}=this.refs;if(!supportsViewTransitions()||isLowPowerDevice())return this.closeDialog();const mostVisibleElement=await getMostVisibleElement(media),activeIndex=media.indexOf(mostVisibleElement),transitionName="gallery-item",mediaGallery=this.closest("media-gallery"),slide=mediaGallery?.presentation==="carousel"?mediaGallery.slideshow?.slides?.[activeIndex]:mediaGallery?.media?.[activeIndex];if(!slide)return this.closeDialog();dialog.classList.add("dialog--closed"),await onAnimationEnd(this.refs.thumbnails),mostVisibleElement.style.setProperty("view-transition-name",transitionName),await startViewTransition(()=>{mostVisibleElement.style.removeProperty("view-transition-name"),slide.style.setProperty("view-transition-name",transitionName),this.closeDialog()}),slide.style.removeProperty("view-transition-name"),dialog.classList.remove("dialog--closed")}closeDialog(){const{dialog}=this.refs;dialog.close(),window.dispatchEvent(new DialogCloseEvent)}handleKeyDown(event){event.key==="Escape"&&(event.preventDefault(),this.close())}async handleThumbnailClick(index){const behavior=prefersReducedMotion()?"instant":"smooth";this.selectThumbnail(index,{behavior})}async handleThumbnailPointerEnter(index){const{media}=this.refs;media[index]&&this.#loadHighResolutionImage(media[index])}async selectThumbnail(index,options={behavior:"smooth"}){if(!this.refs.thumbnails||!this.refs.thumbnails.children.length||isNaN(index)||index<0||index>=this.refs.thumbnails.children.length)return;const{media,thumbnails}=this.refs,targetThumbnail=thumbnails.children[index];if(!targetThumbnail||!(targetThumbnail instanceof HTMLElement))return;
1Array.from(thumbnails.querySelectorAll("button")).forEach((button,i)=>{button.setAttribute("aria-selected",`${i===index}`)}),scrollIntoView(targetThumbnail,{ancestor:thumbnails,behavior:options.behavior,block:"center",inline:"center"});const targetImage=media[index];targetImage&&(targetImage.scrollIntoView({behavior:options.behavior}),this.#loadHighResolutionImage(targetImage)),this.dispatchEvent(new ZoomMediaSelectedEvent(index))}}customElements.get("zoom-dialog")||customElements.define("zoom-dialog",ZoomDialog);function getMostVisibleElement(elements){return new Promise(resolve=>{const observer=new IntersectionObserver(entries=>{const mostVisible=entries.reduce((prev,current)=>current.intersectionRatio>prev.intersectionRatio?current:prev);observer.disconnect(),resolve(mostVisible.target)},{threshold:Array.from({length:100},(_,i)=>i/100)});for(const element of elements)observer.observe(element)})} 2//# sourceMappingURL=/cdn/shop/t/36/assets/zoom-dialog.js.map?v=82028443406372487331769545191
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.