https://www.lyleandscott.com/cdn/shop/t/458/assets/lyle-product-gallery.js?v=4662228329595072841788364388

1import Splide from"@splidejs/splide";const CAROUSEL_CONFIG={arrows:!1,classes:{page:"splide__pagination__page product-gallery__page",pagination:"splide__pagination product-gallery__pagination"},pagination:!0,rewind:!0,speed:800,type:"fade"},MOBILE_MQ="(max-width: 1023px)";class LyleProductGallery extends HTMLElement{#carousel=null;#mobileMql=null;#mqlHandler=null;#clickHandler=null;#keyHandler=null;#variantHandler=null;#openHandler=null;#closeHandler=null;#observer=null;#pinchZoom=null;#pinchZoomPromise=null;#pinchActive=!1;connectedCallback(){this.#mobileMql=window.matchMedia(MOBILE_MQ),this.#mqlHandler=e=>{e.matches?this.#mountCarousel():this.#destroyCarousel(),this.#syncZoomLists()},this.#mobileMql.addEventListener("change",this.#mqlHandler),this.#mobileMql.matches&&this.#mountCarousel(),this.#syncZoomLists(),this.#clickHandler=e=>{if(e.target.closest("[data-product-gallery-close]")){this.#closeDialog();return}const pinchTrigger=e.target.closest("[data-zoom-pinch-src]");if(pinchTrigger&&this.#mobileMql.matches){e.preventDefault(),this.#openPinchZoom(pinchTrigger.dataset.zoomPinchSrc);return}const trigger=e.target.closest("[data-gallery-trigger], [data-slide-index]");trigger&&this.#openDialog(trigger.dataset.mediaId)},this.addEventListener("click",this.#clickHandler),this.#keyHandler=e=>{if(e.key==="Escape"){if(this.#pinchActive){this.#destroyPinchZoom();return}this.#closeDialog()}},this.addEventListener("keydown",this.#keyHandler),this.#variantHandler=e=>{const{mediaId}=e.detail;mediaId&&this.#syncVariant(String(mediaId))},document.addEventListener("product-gallery:variant",this.#variantHandler),this.#openHandler=e=>{this.#openDialog(e.detail?.mediaId)},document.addEventListener("product-gallery:open",this.#openHandler);const dialog=this.querySelector("[data-product-gallery-dialog]");this.#closeHandler=()=>{this.#destroyPinchZoom(),this.#teardownZoomObserver()},dialog?.addEventListener("close",this.#closeHandler);const initialMediaId=this.dataset.initialMediaId;initialMediaId&&this.#syncVariant(initialMediaId)}disconnectedCallback(){this.#destroyCarousel(),this.#destroyPinchZoom(),this.#teardownZoomObserver(),this.#mobileMql&&this.#mqlHandler&&this.#mobileMql.removeEventListener("change",this.#mqlHandler),this.#mobileMql=null,this.#mqlHandler=null,this.#clickHandler&&(this.removeEventListener("click",this.#clickHandler),this.#clickHandler=null),this.#keyHandler&&(this.removeEventListener("keydown",this.#keyHandler),this.#keyHandler=null),this.#variantHandler&&(document.removeEventListener("product-gallery:variant",this.#variantHandler),this.#variantHandler=null),this.#openHandler&&(document.removeEventListener("product-gallery:open",this.#openHandler),this.#openHandler=null);const dialog=this.querySelector("[data-product-gallery-dialog]");dialog&&this.#closeHandler&&dialog.removeEventListener("close",this.#closeHandler),this.#closeHandler=null}#mountCarousel(){if(this.#carousel)return;const el=this.querySelector("[data-product-gallery-carousel]");if(!el)return;const list=el.querySelector(".splide__list");if(!list||list.children.length===0)return;const count=list.children.length;this.#carousel=new Splide(el,{...CAROUSEL_CONFIG,drag:count>1,pagination:count>1,rewind:count>1}),this.#carousel.mount()}#destroyCarousel(){this.#carousel&&(this.#carousel.destroy(),this.#carousel=null)}#activeZoomList(){const mobileList=this.querySelector('[data-zoom-list="mobile"]');return mobileList&&this.#mobileMql?.matches?mobileList:this.querySelector('[data-zoom-list="desktop"]')}#syncZoomLists(){const desktopList=this.querySelector('[data-zoom-list="desktop"]'),mobileList=this.querySelector('[data-zoom-list="mobile"]');if(!mobileList){desktopList?.removeAttribute("hidden");return}this.#mobileMql?.matches?(desktopList?.setAttribute("hidden",""),mobileList.removeAttribute("hidden")):(mobileList.setAttribute("hidden",""),desktopList?.removeAttribute("hidden"))}#openDialog(mediaId){const dialog=this.querySelector("[data-product-gallery-dialog]");dialog&&(this.#syncZoomLists(),dialog.showModal(),this.#setupZoomObserver(),this.#scrollToZoomImage(mediaId))}#closeDialog(){this.#destroyPinchZoom(),this.querySelector("[data-product-gallery-dialog]")?.close()}#scrollToZoomImage(mediaId){const list=this.#activeZoomList();if(!list)return;let target=null;mediaId&&(target=list.querySelector(`[data-media-id="${CSS.escape(String(mediaId))}"]`)),target||(target=list.querySelector("[data-zoom-observed]")),target&&requestAnimationFrame(()=>{setTimeout(()=>{target.scrollIntoView({block:"start",inline:"nearest",behavior:"smooth"})},50)})}#setupZoomObserver(){this.#teardownZoomObserver();const list=this.#activeZoomList();if(!list)return;const items=list.querySelectorAll("[data-zoom-observed]");if(items.length!==0){this.#observer=new IntersectionObserver(entries=>

1{for(const entry of entries){if(!entry.isIntersecting)continue;const mediaId=entry.target.dataset.mediaId;mediaId&&this.#syncVariant(mediaId)}},{root:null,rootMargin:"-50% 0% -50% 0%",threshold:0});for(const item of items)this.#observer.observe(item)}}#teardownZoomObserver(){this.#observer&&(this.#observer.disconnect(),this.#observer=null)}async#openPinchZoom(src){if(this.#pinchActive||!src)return;this.#pinchZoomPromise||(this.#pinchZoomPromise=import("pinch-zoom-js"));const{default:PinchZoom}=await this.#pinchZoomPromise;if(!this.isConnected||this.#pinchActive)return;const viewport=this.querySelector("[data-pinch-viewport]"),image=this.querySelector("[data-pinch-image]");!viewport||!image||(image.src=src,viewport.hidden=!1,this.#pinchActive=!0,this.classList.add("is-pinch-active"),this.#pinchZoom=new PinchZoom(image,{animationDuration:50,minZoom:1,setOffsetsOnce:!0,use2d:!1,onDoubleTap:()=>{this.#destroyPinchZoom()}}))}#destroyPinchZoom(){const viewport=this.querySelector("[data-pinch-viewport]");let image=this.querySelector("[data-pinch-image]");if(this.#pinchZoom){const el=this.#pinchZoom.el,container=this.#pinchZoom.container;container?.parentNode&&el&&container.parentNode.insertBefore(el,container),this.#pinchZoom.destroy(),this.#pinchZoom=null,image=el||image}this.#pinchActive=!1,this.classList.remove("is-pinch-active"),viewport&&(viewport.hidden=!0),image&&image.removeAttribute("src")}#syncVariant(mediaId){if(this.#carousel){const slides=this.querySelectorAll("[data-product-gallery-carousel] [data-media-id]");let targetIndex=-1;slides.forEach((slide,i)=>{slide.dataset.mediaId===mediaId&&(targetIndex=i)}),targetIndex>=0&&this.#carousel.go(targetIndex);return}

1this.querySelector(`[data-product-gallery-grid] [data-media-id="${CSS.escape(mediaId)}"]`)?.scrollIntoView({behavior:"smooth",block:"nearest"})}}customElements.get("lyle-product-gallery")||customElements.define("lyle-product-gallery",LyleProductGallery);
2//# sourceMappingURL=/cdn/shop/t/458/assets/lyle-product-gallery.js.map?v=4662228329595072841788364388