https://mejimeji.co/cdn/shop/t/9/assets/product-gallery.js?v=145786932919009271151789845368

1class ProductGallery extends HTMLElement{constructor(){super(),this.imageContainers=[],this.images=[],this.thumbnailContainer=null}connectedCallback(){setTimeout(()=>this.init(),0)}init(){this.imageContainers=Array.from(this.querySelectorAll(".image-container")),this.images=this.imageContainers.map(container=>container.querySelector("img")),this.images.length>1&&(this.createThumbnails(),this.setupZoom(),this.setupActiveThumbnailObserver())}createThumbnails(){this.thumbnailContainer=document.createElement("div"),this.thumbnailContainer.className="thumbnails-picker",this.images.forEach((img,index)=>{const thumb=document.createElement("div");thumb.className="thumbnail",index===0&&thumb.classList.add("active");const thumbImg=document.createElement("img");thumbImg.src=img.src,thumb.appendChild(thumbImg),thumb.addEventListener("click",()=>{this.scrollToIndex(index)}),this.thumbnailContainer.appendChild(thumb)}),this.appendChild(this.thumbnailContainer)}setupZoom(){this.imageContainers.forEach(container=>{const img=container.querySelector("img");img&&(container.addEventListener("click",e=>{if(window.innerWidth<1024)return;const isCurrentlyZoomed=container.classList.contains("is-zoomed");this.imageContainers.forEach(otherContainer=>{otherContainer!==container&&(otherContainer.classList.remove("is-zoomed"),this.removeZoomLens(otherContainer))}),isCurrentlyZoomed?(container.classList.remove("is-zoomed"),this.removeZoomLens(container)):(container.classList.add("is-zoomed"),this.createZoomLens(container,img),this.updateZoom(e,container))}),container.addEventListener("mousemove",e=>{window.innerWidth<1024||container.classList.contains("is-zoomed")&&this.updateZoom(e,container)}),container.addEventListener("mouseleave",()=>{container.classList.remove("is-zoomed"),this.removeZoomLens(container)}))})}createZoomLens(container,img){const lens=document.createElement("div");lens.className="zoom-lens",lens.style.backgroundImage=`url(${img.src})`,lens.style.backgroundSize=`${container.offsetWidth*2}px ${container.offsetHeight*2}px`,container.appendChild(lens)}updateZoom(e,container){const lens=container.querySelector(".zoom-lens");if(!lens)return;const rect=container.getBoundingClientRect(),x=e.clientX-rect.left,y=e.clientY-rect.top,xPercent=x/rect.width*100,yPercent=y/rect.height*100;lens.style.backgroundPosition=`${xPercent}% ${yPercent}%`;const lensWidth=lens.offsetWidth,lensHeight=lens.offsetHeight;let left=x-lensWidth/2,top=y-lensHeight/2;left=Math.max(0,Math.min(left,rect.width-lensWidth)),top=Math.max(0,Math.min(top,rect.height-lensHeight)),lens.style.left=`${left}px`,lens.style.top=`${top}px`}removeZoomLens(container){const lens=container.querySelector(".zoom-lens");lens&&lens.remove()}setupActiveThumbnailObserver(){const options={root:null,threshold:.5},observer=new IntersectionObserver(entries=>{entries.forEach(entry=>{if(entry.isIntersecting){const index=this.imageContainers.indexOf(entry.target);this.updateActiveThumbnail(index)}})},options);this.imageContainers.forEach(container=>observer.observe(container))}updateActiveThumbnail(index){if(!this.thumbnailContainer)return;this.thumbnailContainer.querySelectorAll(".thumbnail").forEach((thumb,i)=>{thumb.classList.toggle("active",i===index)})}cleanFilename(url){if(!url)return"";const withoutQuery=url.split("?")[0].split("#")[0];return withoutQuery.substring(withoutQuery.lastIndexOf("/")+1).replace(/(_\d+x\d*|_\d*x\d+|_pico|_icon|_thumb|_small|_compact|_medium|_large|_grande|_1024x1024|_2048x2048|_master)(\.[a-zA-Z0-9]+)?$/,"").replace(/\.[a-zA-Z0-9]+$/,"").toLowerCase()}scrollToIndex(index){if(index<0||index>=this.imageContainers.length)return;const targetContainer=this.imageContainers[index];if(!targetContainer)return;window.innerWidth<768||this.scrollWidth>this.clientWidth?this.scrollTo({left:targetContainer.offsetLeft,behavior:"smooth"}):targetContainer.scrollIntoView({behavior:"smooth",block:"start"}),this.updateActiveThumbnail(index)}scrollToVariantImage(featuredImage){if(!featuredImage)return!1;(!this.imageContainers||this.imageContainers.length===0)&&this.init();let imageId=null,cleanVariantSrc="";if(typeof featuredImage=="string")cleanVariantSrc=this.cleanFilename(featuredImage);else if(typeof featuredImage=="number")imageId=String(featuredImage);else if(typeof featuredImage=="object"){featuredImage.id&&(imageId=String(featuredImage.id));const src=featuredImage.src||featuredImage.preview_image&&featuredImage.preview_image.src||"";src&&(cleanVariantSrc=this.cleanFilename(src))}let targetIndex=-1;if(imageId&&(targetIndex=this.imageContainers.findIndex(c=>c.dataset.imageId===imageId)),targetIndex===-1&&cleanVariantSrc&&(targetIndex=this.imageContainers.findIndex(c=>{const cSrc=c.dataset.imageSrc||"";if(cSrc&&this.cleanFilename(cSrc)===cleanVariantSrc)return!0;const img=c.querySelector("img");return img?!!(this.cleanFilename(img.src)===cleanVariantSrc||img.srcset&&img.srcset.includes(cleanVariantSrc)):!1})),targetIndex!==-1)return this.scrollToIndex(targetIndex),!0;if(typeof product<"u"&&product&&product.images&&product.images.length>0){const firstImg=product.images[0];if((imageId&&String(firstImg.id)===imageId||cleanVariantSrc&&this.cleanFilename(typeof firstImg=="string"?firstImg:firstImg.src)===cleanVariantSrc)&&this.imageContainers.length>0)return this.scrollToIndex(0),!0}return!1}}customElements.define("product-gallery",ProductGallery);
2//# sourceMappingURL=/cdn/shop/t/9/assets/product-gallery.js.map?v=145

2786932919009271151789845368