https://sugarbooandco.com/cdn/shop/t/50/assets/zoom-dialog.js?v=96232693877085047991781579151

1/*!
2 * ===================================================
3 * WARNING: DO NOT EDIT THIS FILE DIRECTLY!
4 * This file is automatically generated by the build process.
5 * Any changes made to this file will be overwritten.
6 * ===================================================
7 */
8
9var __defProp=Object.defineProperty;var __typeError=msg=>{throw TypeError(msg)};var __defNormalProp=(obj,key,value)=>key in obj?__defProp(obj,key,{enumerable:!0,configurable:!0,writable:!0,value}):obj[key]=value;var __publicField=(obj,key,value)=>__defNormalProp(obj,typeof key!="symbol"?key+"":key,value),__accessCheck=(obj,member,msg)=>member.has(obj)||__typeError("Cannot "+msg);var __privateGet=(obj,member,getter)=>(__accessCheck(obj,member,"read from private field"),getter?getter.call(obj):member.get(obj)),__privateAdd=(obj,member,value)=>member.has(obj)?__typeError("Cannot add the same private member more than once"):member instanceof WeakSet?member.add(obj):member.set(obj,value);var __privateMethod=(obj,member,method)=>(__accessCheck(obj,member,"access private method"),method);var _highResImagesLoaded,_ZoomDialog_instances,loadHighResolutionImage_fn;import{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";class ZoomDialog extends Component{constructor(){super(...arguments);__privateAdd(this,_ZoomDialog_instances);__publicField(this,"requiredRefs",["dialog","media","thumbnails"]);__privateAdd(this,_highResImagesLoaded,new Set);__publicField(this,"handleScroll",debounce(async()=>{const{media,thumbnails}=this.refs,mostVisibleElement=await getMostVisibleElement(media),activeIndex=media.indexOf(mostVisibleElement),targetThumbnail=thumbnails.children[activeIndex];if(!targetThumbnail||!(targetThumbnail instanceof HTMLElement))return;const previousIndex=Array.from(thumbnails.querySelectorAll("button")).findIndex(btn=>btn.getAttribute("aria-selected")==="true");if(previousIndex!==-1&&previousIndex!==activeIndex){const previousWrapper=media[previousIndex]?.querySelector("drag-zoom-wrapper");previousWrapper&&typeof previousWrapper.resetZoom=="function"&&previousWrapper.resetZoom()}Array.from(thumbnails.querySelectorAll("button")).forEach((button,i)=>{button.setAttribute("aria-selected",`${i===activeIndex}`)}),__privateMethod(this,_ZoomDialog_instances,loadHighResolutionImage_fn).call(this,mostVisibleElement),this.dispatchEvent(new ZoomMediaSelectedEvent(activeIndex))},50))}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"})}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())}

9async handleThumbnailClick(index){const behavior=prefersReducedMotion()?"instant":"smooth";this.selectThumbnail(index,{behavior})}async handleThumbnailPointerEnter(index){const{media}=this.refs;media[index]&&__privateMethod(this,_ZoomDialog_instances,loadHighResolutionImage_fn).call(this,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,currentIndex=Array.from(thumbnails.querySelectorAll("button")).findIndex(btn=>btn.getAttribute("aria-selected")==="true");if(currentIndex!==-1&&currentIndex!==index){const currentWrapper=media[currentIndex]?.querySelector("drag-zoom-wrapper");currentWrapper&&typeof currentWrapper.resetZoom=="function"&&currentWrapper.resetZoom()}const targetThumbnail=thumbnails.children[index];if(!targetThumbnail||!(targetThumbnail instanceof HTMLElement))return;Array.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}),__privateMethod(this,_ZoomDialog_instances,loadHighResolutionImage_fn).call(this,targetImage)),this.dispatchEvent(new ZoomMediaSelectedEvent(index))}}_highResImagesLoaded=new WeakMap,_ZoomDialog_instances=new WeakSet,loadHighResolutionImage_fn=function(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||__privateGet(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),__privateGet(this,_highResImagesLoaded).add(highResolutionUrl)},newImage.src=highResolutionUrl},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)})}export{ZoomDialog};
10//# sourceMappingURL=zoom-dialog.js.map