https://boloneyewear.com/cdn/shop/t/65/assets/zoom-dialog.js?v=78981923483481471961787792310

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,resolvedIndex=resolveVisibleMediaIndex(media,index);if(resolvedIndex<0)return;const targetImage=media[resolvedIndex],targetThumbnail=thumbnails.children[resolvedIndex],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 itemTransitionName="gallery-item-open";sourceImage.style.setProperty("view-transition-name",itemTransitionName);const focalPoint=sourceImage.dataset.focalPoint;focalPoint&&document.documentElement.style.setProperty("--gallery-media-focal-point",focalPoint),await startViewTransition(()=>{open(),sourceImage.style.removeProperty("view-transition-name"),targetImage.style.setProperty("view-transition-name",itemTransitionName)}),document.documentElement.style.removeProperty("--gallery-media-focal-point"),targetImage.style.removeProperty("view-transition-name"),this.selectThumbnail(resolvedIndex,{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.setAttribute("ref","image"),newImage.onload=()=>{image.replaceWith(newImage),this.#highResImagesLoaded.add(highResolutionUrl)},newImage.src=highResolutionUrl}handleScroll=debounce(async()=>{const{media,thumbnails}=this.refs,visibleMedia=getUnhiddenElements(media);if(!visibleMedia.length)return;const mostVisibleElement=await getMostVisibleElement(visibleMedia),activeIndex=media.indexOf(mostVisibleElement),targetThumbnail=thumbnails.children[activeIndex];!targetThumbnail||!(targetThumbnail instanceof HTMLElement)||targetThumbnail.hasAttribute("hidden")||(Array.from(thumbnails.querySelectorAll("button")).forEach(button=>{if(button.hasAttribute("hidden"))return;const i=Array.prototype.indexOf.call(thumbnails.children,button);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 visibleMedia=getUnhiddenElements(media);if(!visibleMedia.length)return this.closeDialog();const mostVisibleElement=await getMostVisibleElement(visibleMedia),activeIndex=media.indexOf(mostVisibleElement),itemTransitionName="gallery-item-close",mediaGallery=this.closest("media-gallery"),slideshowActive=mediaGallery?.presentation==="carousel",slideshow=mediaGallery?.slideshow,slide=slideshowActive?slideshow?.refs?.slides?.[activeIndex]:mediaGallery?.media?.[activeIndex];if(!slide)return this.closeDialog();const focalPoint=slide.dataset.focalPoint;focalPoint&&document.documentElement.style.setProperty("--gallery-media-focal-point",focalPoint),dialog.classList.add("dialog--closed"),await onAnimationEnd(this.refs.thumbnails),mostVisibleElement.style.setProperty("view-transition-name",itemTransitionName),await startViewTransition(()=>{mostVisibleElement.style.removeProperty("view-transition-name"),slide.style.setProperty("view-transition-name",itemTransitionName),this.closeDialog()}),slide.style.removeProperty("view-transition-name"),dialog.classList.remove("dialog--closed"),document.documentElement.style.removeProperty("--gallery-media-focal-point")}closeDialog(){const{dialog}=this.refs;dialog.close(),window.dispatchEvent(new DialogCloseEvent)}handleKeyDown(event){event.key==="Escape"&&(event.preventDefault(),this.close())}

1async handleThumbnailClick(index){const behavior=prefersReducedMotion()?"instant":"smooth";this.selectThumbnail(index,{behavior})}async handleThumbnailPointerEnter(index){const{media}=this.refs,resolved=resolveVisibleMediaIndex(media,index);resolved<0||!media[resolved]||media[resolved].hasAttribute("hidden")||this.loadHighResolutionImage(media[resolved])}async selectThumbnail(index,options={behavior:"smooth"}){if(!this.refs.thumbnails||!this.refs.thumbnails.children.length)return;const{media,thumbnails}=this.refs,resolvedIndex=resolveVisibleMediaIndex(media,index);if(resolvedIndex<0||resolvedIndex>=thumbnails.children.length)return;const targetThumbnail=thumbnails.children[resolvedIndex];if(!targetThumbnail||!(targetThumbnail instanceof HTMLElement)||targetThumbnail.hasAttribute("hidden"))return;Array.from(thumbnails.querySelectorAll("button")).forEach(button=>{if(button.hasAttribute("hidden"))return;const i=Array.prototype.indexOf.call(thumbnails.children,button);button.setAttribute("aria-selected",`${i===resolvedIndex}`)}),scrollIntoView(targetThumbnail,{ancestor:thumbnails,behavior:options.behavior,block:"center",inline:"center"});const targetImage=media[resolvedIndex];targetImage&&!targetImage.hasAttribute("hidden")&&(targetImage.scrollIntoView({behavior:options.behavior}),this.loadHighResolutionImage(targetImage)),this.dispatchEvent(new ZoomMediaSelectedEvent(resolvedIndex))}}customElements.get("zoom-dialog")||customElements.define("zoom-dialog",ZoomDialog);function getUnhiddenElements(elements){return elements.filter(el=>el&&!el.hasAttribute("hidden"))}function resolveVisibleMediaIndex(media,index){if(!media.length)return-1;if(media[index]&&!media[index].hasAttribute("hidden"))return index;for(let i=index;i<media.length;i++)if(media[i]&&!media[i].hasAttribute("hidden"))return i;for(let i=index-1;i>=0;i--)if(media[i]&&!media[i].hasAttribute("hidden"))return i;return-1}function getMostVisibleElement(elements){return new Promise(resolve=>{if(!elements.length){resolve(document.body);return}const observer=new IntersectionObserver(entries=>{const nonZero=entries.filter(e=>e.intersectionRatio>0),mostVisible=(nonZero.length?nonZero: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/65/assets/zoom-dialog.js.map?v=78981923483481471961787792310