https://monocle.com/wp-content/themes/monocle/dist/js/monocle-fe-p…duct-lightbox.8d4eaedfd42f840db762.chunk.js

1"use strict";(self.webpackChunkmonocle_theme=self.webpackChunkmonocle_theme||[]).push([[2054],{3560:function(e,t,l){l.r(t),l.d(t,{buildRenditionUrl:function(){return i}});var r=l(7535),n=l(7077);const o="product-lightbox",a="c-product-lightbox--fullscreen",i=(e,t,l)=>{if(!e)return"";const r=Number(l)||0;if(r<=0)return e;const n=Number(t)||0,o=n>0?Math.min(Math.round(n),r):r,a=e.includes("?")?"&":"?";return`${e}${a}width=${o}`},c=(e,t,l)=>e.replace("%1$s",String(t)).replace("%2$s",String(l)),d=(e,t)=>{e.innerHTML="",t.forEach((t=>e.appendChild(t)))},s=e=>e&&Number(new URL(e,window.location.href).searchParams.get("width"))||0,u=(e,t,l)=>{let r=null,n=0,o=0;e.addEventListener("pointerdown",(e=>{r=e.target.closest?.(t)??null,n=e.clientX,o=e.clientY})),e.addEventListener("pointerup",(e=>{const a=e.target.closest?.(t)??null;if(!r||!a||a!==r)return void(r=null);const i=Math.hypot(e.clientX-n,e.clientY-o);r=null,i<=10&&l(a,e)}))};t.default=()=>{const e=document.getElementById(o);if(!e)return;const t=e.querySelector(".c-product-lightbox__overlay"),h=e.querySelector(".c-product-lightbox__splide"),g=h?h.querySelector(".splide__list"):null;if(!t||!h||!g||!g.children.length)return;const m=e.querySelector(".c-product-lightbox__close"),p=e.querySelector(".c-product-lightbox__arrows"),b=e.querySelector(".c-product-lightbox__thumbnails"),f=e.querySelector(".c-product-lightbox__fullscreen"),y=e.querySelector(".c-product-lightbox__fullscreen-pane"),_=e.querySelector(".c-product-lightbox__fullscreen-image"),x=e.querySelector(".c-product-lightbox__fullscreen-close"),w={slide:e.dataset.slideLabel||"",thumbnail:e.dataset.thumbnailLabel||"",alt:e.dataset.imageAlt||""};let v=Array.from(g.children),S=b?Array.from(b.querySelectorAll(".c-product-lightbox__thumbnail")):[],E=v.length>1,A=null,L=null,k=null;const q=()=>{g.querySelectorAll(".splide__spinner").forEach((e=>e.remove())),g.querySelectorAll("img[src]").forEach((e=>{e.style.display=""}))},N=e=>{S.forEach(((t,l)=>{const r=l===e;t.classList.toggle("c-product-lightbox__thumbnail--active",r),t.setAttribute("aria-current",r?"true":"false"),r&&t.scrollIntoView?.({block:"nearest",inline:"nearest"})}))},C=()=>e.classList.contains(a),W=()=>{C()&&!k&&_.naturalWidth&&l.e(7717).then(l.bind(l,5251)).then((({default:e})=>{if(!C()||k)return;const t=_.getBoundingClientRect(),l=(y||f).getBoundingClientRect(),r=t.width>=l.width&&t.height>=l.height;k=e(_,{maxScale:4,minScale:1,...r?{contain:"outside"}:{panOnlyWhenZoomed:!0}})}))},I=()=>{if(!C())return;e.classList.remove(a),f&&(f.hidden=!0),k&&(k.destroy(),k=null),_&&(_.removeEventListener("load",W),_.style.transform="",_.removeAttribute("src"),delete _.dataset.upgradeTo,_.style.maxWidth="",_.style.maxHeight="",_.alt="");const t=v[A?A.index:0];t?.focus?.({preventScroll:!0})},U=t=>{if(!f||!_)return;const l=t.dataset.fullUrl||"",r=Number(t.dataset.fullWidth)||0,n=Number(t.dataset.fullHeight)||0;if(!l)return;const o="function"===typeof window.matchMedia&&window.matchMedia("(pointer: coarse)").matches,c=window.devicePixelRatio||1;e.classList.toggle("c-product-lightbox--touch",o);let d=window.innerWidth*c;o&&r>0&&n>0&&(d=window.innerHeight*c*(r/n)*2);const u=t.querySelector("img"),h=i(l,d,r),g=u?.currentSrc||u?.src||"";_.src=g||h,_.alt=u?.alt||"",g!==h&&s(h)>=1.25*s(g)&&(e=>{const t=new window.Image;_.dataset.upgradeTo=e,t.addEventListener("load",(()=>{C()&&_.dataset.upgradeTo===e&&(_.src=e)})),t.src=e})(h),o?_.style.maxHeight=n>0?`${n}px`:"":_.style.maxWidth=r>0?`${r}px`:"",_.style.transform="",f.hidden=!1,e.classList.add(a),o&&(_.complete&&_.naturalWidth?W():_.addEventListener("load",W,{once:!0})),x?.focus?.()},$={disableFocus:!1,disableScroll:!0,awaitOpenAnimation:!1,awaitCloseAnimation:!1,onClose:()=>{I(),A&&(A.destroy(),A=null,q()),L&&"function"===typeof L.focus&&L.focus()}},H=e=>{A&&A.destroy(),q(),A=new r.Ay(h,{type:E?"loop":"slide",speed:400,arrows:E,pagination:!1,perPage:1,start:e,lazyLoad:"nearby",preloadPages:1,keyboard:"global",drag:E}),A.on("mounted",(()=>N(A.index))),A.on("move",(e=>N(e))),A.mount()},M=t=>{L=e.ownerDocument.activeElement,n.A.show(o,$),H(t)},T=e=>{const t=(Array.isArray(e)?e:[]).filter((e=>e?.url));if(!t.length)return;const l=Boolean(A);l&&(I(),A.destroy(),A=null);const r=t.length;E=r>1,d(g,t.map(((e,t)=>((e,t,l,r)=>{const n=document.createElement("li");n.className="splide__slide c-product-lightbox__slide",n.setAttribute("role","group"),n.setAttribute("aria-roledescription","slide"),n.setAttribute("aria-label",c(r.label,t+1,l)),n.dataset.fullUrl=e.url,n.dataset.fullWidth=String(Number(e.width)||0),n.dataset.fullHeight=String(Number(e.height)||0);const o=document.createElement("img");return o.setAttribute("data-splide-lazy",i(e.url,1600,e.width)),o.alt=e.alt||r.alt,n.appendChild(o),n})(e,t,r,{label:w.slide,alt:w.alt})))),v=Array.from(g.children),b&&(d(b,t.map(((e,t)=>((e,t,l,r)=>{const n=document.createElement("button");

1n.type="button",n.className="c-product-lightbox__thumbnail",n.dataset.thumbnailIndex=String(t),n.setAttribute("aria-label",c(r.label,t+1,l));const o=document.createElement("img");return o.src=i(e.url,210,e.width),o.alt=e.alt||r.alt,o.loading="lazy",o.decoding="async",n.appendChild(o),n})(e,t,r,{label:w.thumbnail,alt:w.alt})))),S=Array.from(b.querySelectorAll(".c-product-lightbox__thumbnail")),b.hidden=!E),p&&(p.hidden=!E),l&&H(0)},B=()=>{n.A.close(o)};u(document,".js-product-lightbox-trigger",(e=>{M(Number(e.dataset.lightboxIndex)||0)})),document.addEventListener("keydown",(e=>{if("Enter"!==e.key&&" "!==e.key)return;const t=e.target.closest?.(".js-product-lightbox-trigger");t&&("BUTTON"===t.tagName&&e.target!==t||(e.preventDefault(),M(Number(t.dataset.lightboxIndex)||0)))})),m?.addEventListener("click",B),t.addEventListener("click",(e=>{e.target===t&&B()})),b?.addEventListener("click",(e=>{const t=e.target.closest?.(".c-product-lightbox__thumbnail");t&&A?.go(Number(t.dataset.thumbnailIndex)||0)})),window.addEventListener("monocle:pdp-images-change",(e=>{T(e.detail?.images)})),u(h,".c-product-lightbox__slide img",(e=>{if(C())return;const t=e.closest(".c-product-lightbox__slide"),l=v[A?A.index:0];t!==l&&t?.dataset.fullUrl!==l?.dataset.fullUrl||U(l)})),u(y||e,".c-product-lightbox__fullscreen-image",(()=>{k&&k.getScale()>1.001||I()})),x?.addEventListener("click",I),document.addEventListener("keydown",(e=>{"Escape"===e.key&&C()&&(e.preventDefault(),e.stopPropagation(),I())}),!0)}}}]);