vistaview 0.3.6 → 0.3.8

package/dist/vistaview.umd.js

@@ -1,11 +1,11 @@
-(function(y,I){typeof exports=="object"&&typeof module<"u"?I(exports):typeof define=="function"&&define.amd?define(["exports"],I):(y=typeof globalThis<"u"?globalThis:y||self,I(y.VistaView={}))})(this,(function(y){"use strict";var at=Object.defineProperty;var lt=(y,I,A)=>I in y?at(y,I,{enumerable:!0,configurable:!0,writable:!0,value:A}):y[I]=A;var w=(y,I,A)=>lt(y,typeof I!="symbol"?I+"":I,A);function I(s){const t=getComputedStyle(s),i=s.getBoundingClientRect();return{objectFit:t.objectFit,borderRadius:t.borderRadius,objectPosition:t.objectPosition,overflow:t.overflow,top:i.top,left:i.left,width:i.width,height:i.height,naturalWidth:s.naturalWidth,naturalHeight:s.naturalHeight}}let A=null;function U(){return A||(window.trustedTypes||(window.trustedTypes={createPolicy:(s,t)=>t}),A=window.trustedTypes.createPolicy("vistaView-policy",{createHTML:s=>s,createScript:()=>{throw new Error("Not implemented")},createScriptURL:()=>{throw new Error("Not implemented")}}),A)}function q(s){const i=U().createHTML(s),n=document.createElement("template");n.innerHTML=i;const e=n.content;return n.remove(),e}function k(s){return s&&!/^0(px|%|r?em|vw|vh|vmin|vmax|cm|mm|in|pt|pc|ex|ch)?$/i.test(s.trim())&&s}function j(s){const i=window.getComputedStyle(s).objectFit||"",{width:n,height:e}=s.getBoundingClientRect(),a=s.naturalWidth,d=s.naturalHeight;if(!i)return{width:n,height:e};if(!a||!d)return{width:n,height:e};const o=a/d,l=n/e;switch(i){case"fill":return{width:n,height:e};case"none":return{width:a,height:d};case"contain":return o>l?{width:n,height:n/o}:{width:e*o,height:e};case"cover":return o<l?{width:n,height:n/o}:{width:e*o,height:e};case"scale-down":{const c={width:a,height:d},r=o>l?{width:n,height:n/o}:{width:e*o,height:e};return r.width<=c.width&&r.height<=c.height?r:c}}return{width:n,height:e}}function W(s){const t=window.innerWidth,i=window.innerHeight,n=s.naturalWidth,e=s.naturalHeight;if(!n||!e)throw console.error("Error",s),new Error("Image natural dimensions are zero");if(n<t&&e<i)return{width:n,height:e};const a=n/e,d=t/i;let o,l;return a>d?(o=t,l=t/a):(l=i,o=i*a),{width:o,height:l}}function O(s,t){const i=window.innerHeight,n=window.innerWidth,e=s,a=t,d=Math.max(0,(e-n)/2)+n/2,o=Math.max(0,(a-i)/2)+i/2,l=-d,c=-o;return{maxDiffX:d,minDiffY:c,maxDiffY:o,minDiffX:l}}const K='<svg viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>',G='<svg viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>',J='<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="11" x2="11" y1="8" y2="14"/><line x1="8" x2="14" y1="11" y2="11"/></svg>',Q='<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="8" x2="14" y1="11" y2="11"/></svg>',tt='<svg viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>',et='<svg viewBox="0 0 24 24"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>';function V(){return{name:"download",icon:et,onClick:async s=>{var a;const t=await fetch(s.src),i=await t.blob(),n=t.url,e=document.createElement("a");e.href=URL.createObjectURL(i),e.download=((a=n.split("/").pop())==null?void 0:a.split("?")[0].split("#")[0])||"download",document.body.appendChild(e),e.click(),document.body.removeChild(e)}}}function it(s){if(typeof s=="string")switch(s){case"zoomIn":return`<button class="vistaview-zoom-in-btn">${J}</button>`;case"zoomOut":return`<button disabled class="vistaview-zoom-out-btn">${Q}</button>`;case"close":return`<button class="vistaview-close-btn">${tt}</button>`;case"indexDisplay":return'<div class="vistaview-index-display"></div>';case"description":return'<div class="vistaview-description"></div>';default:return""}return`<button data-vistaview-custom-control="${s.name}">${s.icon}</button>`}function X(s,t){var r,h;const i=s.imageElm?getComputedStyle(s.imageElm):null,n=(i==null?void 0:i.objectFit)||"",e=((r=s.imageElm)==null?void 0:r.naturalWidth)||"",a=((h=s.imageElm)==null?void 0:h.naturalHeight)||"",d=(i==null?void 0:i.width)||"",o=(i==null?void 0:i.height)||"",l=document.createElement("div");l.className="vistaview-item",l.dataset.vistaviewPos=`${t!==void 0?t:""}`,l.dataset.vistaviewIndex=s.index.toString();const c=q(`<img class="vistaview-image-lowres"
+(function(y,I){typeof exports=="object"&&typeof module<"u"?I(exports):typeof define=="function"&&define.amd?define(["exports"],I):(y=typeof globalThis<"u"?globalThis:y||self,I(y.VistaView={}))})(this,(function(y){"use strict";var at=Object.defineProperty;var lt=(y,I,P)=>I in y?at(y,I,{enumerable:!0,configurable:!0,writable:!0,value:P}):y[I]=P;var w=(y,I,P)=>lt(y,typeof I!="symbol"?I+"":I,P);function I(s){const t=getComputedStyle(s),i=s.getBoundingClientRect();return{objectFit:t.objectFit,borderRadius:t.borderRadius,objectPosition:t.objectPosition,overflow:t.overflow,top:i.top,left:i.left,width:i.width,height:i.height,naturalWidth:s.naturalWidth,naturalHeight:s.naturalHeight}}let P=null;function U(){return P||(window.trustedTypes||(window.trustedTypes={createPolicy:(s,t)=>t}),P=window.trustedTypes.createPolicy("vistaView-policy",{createHTML:s=>s,createScript:()=>{throw new Error("Not implemented")},createScriptURL:()=>{throw new Error("Not implemented")}}),P)}function q(s){const i=U().createHTML(s),n=document.createElement("template");n.innerHTML=i;const e=n.content;return n.remove(),e}function k(s){return s&&!/^0(px|%|r?em|vw|vh|vmin|vmax|cm|mm|in|pt|pc|ex|ch)?$/i.test(s.trim())&&s}function j(s){const i=window.getComputedStyle(s).objectFit||"",{width:n,height:e}=s.getBoundingClientRect(),r=s.naturalWidth,d=s.naturalHeight;if(!i)return{width:n,height:e};if(!r||!d)return{width:n,height:e};const o=r/d,a=n/e;switch(i){case"fill":return{width:n,height:e};case"none":return{width:r,height:d};case"contain":return o>a?{width:n,height:n/o}:{width:e*o,height:e};case"cover":return o<a?{width:n,height:n/o}:{width:e*o,height:e};case"scale-down":{const h={width:r,height:d},l=o>a?{width:n,height:n/o}:{width:e*o,height:e};return l.width<=h.width&&l.height<=h.height?l:h}}return{width:n,height:e}}function W(s){const t=window.innerWidth,i=window.innerHeight,n=s.naturalWidth,e=s.naturalHeight;if(!n||!e)throw console.error("Error",s),new Error("Image natural dimensions are zero");if(n<t&&e<i)return{width:n,height:e};const r=n/e,d=t/i;let o,a;return r>d?(o=t,a=t/r):(a=i,o=i*r),{width:o,height:a}}function O(s,t){const i=window.innerHeight,n=window.innerWidth,e=s,r=t,d=Math.max(0,(e-n)/2)+n/2,o=Math.max(0,(r-i)/2)+i/2,a=-d,h=-o;return{maxDiffX:d,minDiffY:h,maxDiffY:o,minDiffX:a}}const K='<svg viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>',G='<svg viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>',J='<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="11" x2="11" y1="8" y2="14"/><line x1="8" x2="14" y1="11" y2="11"/></svg>',Q='<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="8" x2="14" y1="11" y2="11"/></svg>',tt='<svg viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>',et='<svg viewBox="0 0 24 24"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>';function V(){return{name:"download",icon:et,onClick:async s=>{var r;const t=await fetch(s.src),i=await t.blob(),n=t.url,e=document.createElement("a");e.href=URL.createObjectURL(i),e.download=((r=n.split("/").pop())==null?void 0:r.split("?")[0].split("#")[0])||"download",document.body.appendChild(e),e.click(),document.body.removeChild(e)}}}function it(s){if(typeof s=="string")switch(s){case"zoomIn":return`<button class="vistaview-zoom-in-btn">${J}</button>`;case"zoomOut":return`<button disabled class="vistaview-zoom-out-btn">${Q}</button>`;case"close":return`<button class="vistaview-close-btn">${tt}</button>`;case"indexDisplay":return'<div class="vistaview-index-display"></div>';case"description":return'<div class="vistaview-description"></div>';default:return""}return`<button data-vistaview-custom-control="${s.name}">${s.icon}</button>`}function X(s,t){var l,c;const i=s.imageElm?getComputedStyle(s.imageElm):null,n=(i==null?void 0:i.objectFit)||"",e=((l=s.imageElm)==null?void 0:l.naturalWidth)||"",r=((c=s.imageElm)==null?void 0:c.naturalHeight)||"",d=(i==null?void 0:i.width)||"",o=(i==null?void 0:i.height)||"",a=document.createElement("div");a.className="vistaview-item",a.dataset.vistaviewPos=`${t!==void 0?t:""}`,a.dataset.vistaviewIndex=s.index.toString();const h=q(`<img class="vistaview-image-lowres"
     style="${n?`object-fit:${n};`:""}${d?`width:${d};`:""}${o?`height:${o};`:""}"
     src="${s.thumb||s.src}" 
     alt="${s.alt||""}"
     ${e?`width="${e}"`:""}
-    ${a?`height="${a}"`:""}
+    ${r?`height="${r}"`:""}
   />
-  <img class="vistaview-image-highres" src="${s.src}" alt="${s.alt||""}" />`);return l.appendChild(c),l}function nt({controls:s,isReducedMotion:t}){const i=e=>e?e.map(it).join(""):"";return q(`<div class="vistaview-root${t?" vistaview--reduced-motion":""}" id="vistaview-root">
+  <img class="vistaview-image-highres" src="${s.src}" alt="${s.alt||""}" />`);return a.appendChild(h),a}function nt({controls:s,isReducedMotion:t}){const i=e=>e?e.map(it).join(""):"";return q(`<div class="vistaview-root${t?" vistaview--reduced-motion":""}" id="vistaview-root">
     <div class="vistaview-container">
     <div class="vistaview-image-container"></div>
     <div class="vistaview-top-bar vistaview-ui"><div>${i(s==null?void 0:s.topLeft)}</div><div>${i(s==null?void 0:s.topCenter)}</div><div>${i(s==null?void 0:s.topRight)}</div></div>
@@ -13,4 +13,4 @@
     <div class="vistaview-prev-btn vistaview-ui"><button>${K}</button></div>
     <div class="vistaview-next-btn vistaview-ui"><button>${G}</button></div>
     </div>
-    </div>`)}let $=null,M=null,Z=null,z=null;function Y(s){R(s);const t=s.imageContainerElm,i=s.elements.length;if(!t)return;let n=0,e=0,a=0,d=0,o=null,l=0,c=!1;$=r=>{r.preventDefault(),r.stopPropagation(),s.isZoomed===!1&&(c=!0,n=r.pageX,e=r.pageY,a=r.pageX,d=r.pageY,l=Date.now(),o=null,t.setPointerCapture(r.pointerId))},M=r=>{if(r.preventDefault(),r.stopPropagation(),s.isZoomed!==!1||!c)return;const h=r.pageX-n,m=r.pageY-e;a=r.pageX,d=r.pageY,Math.abs(h)>=Math.abs(m)&&(o===null||o===!0)?(t.style.setProperty("--vistaview-pointer-diff-x",`${h}px`),o=!0):Math.abs(m)>Math.abs(h)&&(o===null||o===!1)&&(t.style.setProperty("--vistaview-pointer-diff-y",`${m}px`),o=!1)},z=r=>{if(r.preventDefault(),r.stopPropagation(),t.releasePointerCapture(r.pointerId),s.isZoomed!==!1||!c)return;c=!1,o=null;const h=Array.from(t.querySelectorAll(".vistaview-item"));t.style.removeProperty("--vistaview-pointer-diff-x"),t.style.removeProperty("--vistaview-pointer-diff-y"),h.forEach(m=>{m.style.transition="",m.style.translate=""})},Z=r=>{if(r.preventDefault(),r.stopPropagation(),t.releasePointerCapture(r.pointerId),s.isZoomed!==!1||!c)return;c=!1;const h=Array.from(t.querySelectorAll(".vistaview-item")),m=a-n,f=d-e,u=Date.now()-l,v=m/u,E=f/u,p=s.options.touchSpeedThreshold||.5,x=h.find(b=>b.dataset.vistaviewPos==="0"),L=Number(x.dataset.vistaviewIndex);function g(){h[0].removeEventListener("transitionend",g),t.style.removeProperty("--vistaview-pointer-diff-x"),t.style.removeProperty("--vistaview-pointer-diff-y"),h.forEach(b=>{b.style.transition="",b.style.translate=""})}function C(b="0%",S="0%"){h.forEach(T=>{T.style.transition=`translate ${s.options.animationDurationBase*.5}ms ease-out`,T.style.translate=`${b} ${S}`})}if(v<-p||v>p){let b=function(){h[0].removeEventListener("transitionend",b),setTimeout(()=>{const S=s.isReducedMotion;s.isReducedMotion=!0,g(),s.view(v<-p?(L+1)%i:(L-1+i)%i,{next:v<-p,prev:v>p}),s.isReducedMotion=S},100)};C(v<-p?"-100%":"100%"),h[0].addEventListener("transitionend",b)}else E<-p||E>p?(s.close(),C("0%","0%")):(h[0].addEventListener("transitionend",g),C("0%"))},t.addEventListener("pointermove",M),t.addEventListener("pointerup",Z),t.addEventListener("pointerdown",$),t.addEventListener("pointercancel",z)}function R(s){const t=s.imageContainerElm;t&&(M&&t.removeEventListener("pointermove",M),Z&&t.removeEventListener("pointerup",Z),$&&t.removeEventListener("pointerdown",$),z&&t.removeEventListener("pointercancel",z))}const B=s=>{Y(s)},_=({htmlElements:{to:s},index:{to:t},elements:i})=>{i instanceof NodeList&&t!==null&&(i.forEach(n=>n.style.opacity="1"),i[t].style.opacity="0"),s&&s.forEach(n=>{const e=Number(n.dataset.vistaviewPos);e!==0?(n.style.zIndex="1",n.style.left=100*e+"%"):n.style.zIndex="2"})},F=async({htmlElements:{from:s,to:t},images:{to:i},via:{next:n,prev:e},options:a,isReducedMotion:d},o)=>{if(console.log("defaultTransition called"),!i)throw new Error("VistaView: images is null in defaultTransition()");const l=s.filter(c=>c.dataset.vistaviewPos==="0"||(n?c.dataset.vistaviewPos==="1":c.dataset.vistaviewPos==="-1"));if(d){console.log("reduced motion, no transition");return}await new Promise((c,r)=>{let h=0;if(o.aborted){console.log("transition aborted before start"),r(new P("Transition aborted"));return}const m=f=>{if(o.aborted){console.log("transition aborted before start"),r(new P("Transition aborted"));return}if(f.currentTarget.removeEventListener("transitionend",m),h++,h<l.length)return;const u=t==null?void 0:t.find(g=>g.dataset.vistaviewPos==="0"),v=u?Number(u.dataset.vistaviewIndex):0,E=l.find(g=>Number(g.dataset.vistaviewIndex)===v),p=E==null?void 0:E.querySelector(".vistaview-image-highres");if(!p){r(new Error("current image element not found"));return}if(!p.classList.contains("vistaview-image-loaded")){console.log("current image not loaded yet"),c(0);return}if(u==null||u.classList.add("vistaview-image-loaded"),p.classList.contains("vistaview-image-settled")){console.log("current image already settled"),u==null||u.classList.add("vistaview-image-settled"),c(0);return}let x=0;console.log("waiting for image to be settled...");const L=setInterval(()=>{if(o.aborted){console.log("transition aborted during wait"),clearInterval(L),r(new P("Transition aborted"));return}if(x++,x>a.animationDurationBase/20*1.5){console.log("timeout waiting for image to be settled"),clearInterval(L),c(0);return}p.classList.contains("vistaview-image-settled")&&(console.log("image settled"),u==null||u.classList.add("vistaview-image-settled"),clearInterval(L),c(0))},20)};l.forEach(f=>{f.style.transition=`translate ${a.animationDurationBase*.5}ms ease-out`,f.style.translate=n?"-100%":e?"100%":"0%",f.addEventListener("transitionend",m)})})},N=s=>{s.elements instanceof NodeList&&s.elements.forEach(t=>t.style.opacity="1"),R(s)};class P extends Error{constructor(t){super(t),this.name="VistaViewTransitionAbortedError"}}const H={detectReducedMotion:!0,animationDurationBase:333,zoomStep:500,maxZoomLevel:2,touchSpeedThreshold:.5,preloads:1,keyboardListeners:!0,arrowOnSmallScreens:!1,controls:{topLeft:["indexDisplay"],topRight:["zoomIn","zoomOut",V(),"close"],bottomCenter:["description"]}},D={somethingOpened:null};class st{constructor(t,i){w(this,"options");w(this,"elements");w(this,"isReducedMotion");w(this,"currentIndex",{_value:null,_vistaView:null,_via:{next:!1,prev:!1},set value(t){var n;const i=this._value;this._value=t,(n=this._vistaView)==null||n.swap(i,this._value)},get value(){return this._value},get via(){return this._via},set via(t){this._via=t}});w(this,"rootElm",null);w(this,"imageContainerElm",null);w(this,"customControls",{});w(this,"currentImages",null);w(this,"currentItems",null);w(this,"navActive",!0);w(this,"isZoomed",!1);w(this,"onClickElements",t=>{t.preventDefault();const i=t.currentTarget;i.dataset.vistaviewIndex&&this.open(parseInt(i.dataset.vistaviewIndex))});w(this,"defaultOnClickHandler",t=>t.preventDefault());w(this,"onResizeHandler",null);w(this,"onKeyDown",null);w(this,"userSetup",_);w(this,"userTransition",F);w(this,"userClose",N);w(this,"userInit",B);w(this,"onZoomedPointerDown",null);w(this,"onZoomedPointerMove",null);w(this,"onZoomedPointerUp",null);w(this,"transitionAbortController",null);this.elements=t,this.currentIndex._vistaView=this,this.options={...H,...i||{},controls:{...H.controls,...(i==null?void 0:i.controls)||{}}},this.options.initFunction&&(this.userInit=this.options.initFunction),this.options.transitionFunction&&(this.userTransition=this.options.transitionFunction),this.options.closeFunction&&(this.userClose=this.options.closeFunction),this.options.initFunction&&(this.userInit=this.options.initFunction),this.isReducedMotion=window.matchMedia("(prefers-reduced-motion: reduce)").matches,this.elements instanceof NodeList&&this.elements.forEach((n,e)=>{n.dataset.vistaviewIndex=e.toString(),n.addEventListener("click",this.defaultOnClickHandler),n.addEventListener("pointerup",this.onClickElements)})}async swap(t,i){var l,c;if(!D.somethingOpened||t===i||t===null)return;if(console.log("Swapping from",t,"to",i),this.transitionAbortController&&this.transitionAbortController.abort(),!this.imageContainerElm)throw new Error("VistaView: imageContainerElm is null in swap()");this.setIndexDisplay(),this.clearZoom();const{images:n,positions:e}=this.getCurrentIndexes(i),a=this.getImages(n),d=a.map((r,h)=>X(r,e[h]));console.log("swap prepared");const o={htmlElements:{from:this.currentItems,to:d},images:{from:this.currentImages,to:a},index:{from:t,to:i},via:this.currentIndex.via,container:this.imageContainerElm,elements:this.elements,isReducedMotion:this.isReducedMotion,navActive:this.navActive,isZoomed:this.isZoomed,options:this.options};this.userSetup(o),this.transitionAbortController=new AbortController;try{await this.userTransition(o,this.transitionAbortController.signal)}catch(r){r instanceof P||console.error(r)}console.log("swap completed"),this.imageContainerElm.innerHTML="",d.forEach(r=>{const h=r.dataset.vistaviewPos,m=r.dataset.vistaviewIndex;if(h==="0"){const f=this.currentItems.find(E=>E.dataset.vistaviewIndex===m),u=r.querySelector(".vistaview-image-highres"),v=f==null?void 0:f.querySelector(".vistaview-image-highres");v&&(u.setAttribute("class",v.getAttribute("class")||""),u.setAttribute("style",v.getAttribute("style")||"")),this.imageContainerElm.appendChild(r)}else this.imageContainerElm.appendChild(r)}),this.setInitialDimPos(),this.currentImages=a,this.currentItems=d,this.loadImages(),this.setCurrentDescription(),this.updateZoomButtonsVisibility(),(c=(l=this.options).onImageView)==null||c.call(l,o)}setZoomed(t){var i,n,e,a,d,o;if(this.isZoomed!==t){if(this.isZoomed){let l=this.isZoomed;if(l.classList.remove("vistaview-image--zooming"),this.onZoomedPointerDown&&((i=l.parentElement)==null||i.removeEventListener("pointerdown",this.onZoomedPointerDown),this.onZoomedPointerDown=null),this.onZoomedPointerMove&&((n=l.parentElement)==null||n.removeEventListener("pointermove",this.onZoomedPointerMove),this.onZoomedPointerMove=null),this.onZoomedPointerUp&&((e=l.parentElement)==null||e.removeEventListener("pointerup",this.onZoomedPointerUp),this.onZoomedPointerUp=null),l==null||l.style.removeProperty("--pointer-diff-x"),l==null||l.style.removeProperty("--pointer-diff-y"),setTimeout(()=>{l==null||l.classList.remove("vistaview-image--zooming")},500),this.isZoomed=!1,!t)return}if(t){this.isZoomed=t,t.classList.add("vistaview-image--zooming"),t==null||t.style.setProperty("--pointer-diff-x","0px"),t==null||t.style.setProperty("--pointer-diff-y","0px");let l=!1,c=0,r=0,h=0,m=0,f=0,u=0;this.onZoomedPointerDown=v=>{v.preventDefault(),v.stopPropagation(),l=!0,c=v.pageX,r=v.pageY,t.setPointerCapture(v.pointerId)},this.onZoomedPointerMove=v=>{if(!l)return;v.preventDefault(),f=v.pageX-c,u=v.pageY-r;const E=parseInt((t==null?void 0:t.dataset.vistaviewCurrentWidth)||"0"),p=parseInt((t==null?void 0:t.dataset.vistaviewCurrentHeight)||"0"),{maxDiffX:x,minDiffY:L,maxDiffY:g,minDiffX:C}=O(E,p),b=Math.min(x,Math.max(C,h+f)),S=Math.min(g,Math.max(L,m+u));f=b-h,u=S-m,t==null||t.style.setProperty("--pointer-diff-x",`${b}px`),t==null||t.style.setProperty("--pointer-diff-y",`${S}px`)},this.onZoomedPointerUp=v=>{l=!1,t.releasePointerCapture(v.pointerId),h+=f,m+=u,f=0,u=0},(a=t==null?void 0:t.parentElement)==null||a.addEventListener("pointerdown",this.onZoomedPointerDown),(d=t==null?void 0:t.parentElement)==null||d.addEventListener("pointermove",this.onZoomedPointerMove),(o=t==null?void 0:t.parentElement)==null||o.addEventListener("pointerup",this.onZoomedPointerUp);return}}}zoomIn(){var a,d,o,l,c;const t=(a=this.rootElm)==null?void 0:a.querySelector('[data-vistaview-pos="0"] .vistaview-image-highres'),i=t.width,n=t.height;t.dataset.vistaviewInitialWidth||(t.dataset.vistaviewInitialWidth=i.toString()),t.dataset.vistaviewInitialHeight||(t.dataset.vistaviewInitialHeight=n.toString()),this.setZoomed(t);const e=(t.naturalWidth||0)*this.options.maxZoomLevel;if(i&&e&&i<e){const r=Math.min(i+this.options.zoomStep,e);t.style.width=`${r}px`;const h=r/i*n;t.style.height=`${h}px`,(o=(d=this.rootElm)==null?void 0:d.querySelector("button.vistaview-zoom-out-btn"))==null||o.removeAttribute("disabled"),t.dataset.vistaviewCurrentWidth=r.toString(),t.dataset.vistaviewCurrentHeight=h.toString(),r===e&&((c=(l=this.rootElm)==null?void 0:l.querySelector("button.vistaview-zoom-in-btn"))==null||c.setAttribute("disabled","true"))}}zoomOut(){var d,o,l,c,r;const t=(d=this.rootElm)==null?void 0:d.querySelector('[data-vistaview-pos="0"] .vistaview-image-highres'),i=t.width,n=t.height,e=t.dataset.vistaviewInitialWidth?parseInt(t.dataset.vistaviewInitialWidth):0,a=h=>{h.target===t&&(t.classList.remove("vistaview-image--zooming-out"),t.removeEventListener("transitionend",a))};if(t.addEventListener("transitionend",a),t.classList.add("vistaview-image--zooming-out"),i&&e&&i>e){const h=Math.max(i-this.options.zoomStep,e);t.style.width=`${h}px`;const m=h/i*n;t.style.height=`${m}px`,(l=(o=this.rootElm)==null?void 0:o.querySelector("button.vistaview-zoom-in-btn"))==null||l.removeAttribute("disabled"),t.dataset.vistaviewCurrentWidth=h.toString(),t.dataset.vistaviewCurrentHeight=m.toString();const{maxDiffX:f,minDiffY:u,maxDiffY:v,minDiffX:E}=O(h,m);let p=parseInt((t==null?void 0:t.style.getPropertyValue("--pointer-diff-x").replace("px",""))||"0"),x=parseInt((t==null?void 0:t.style.getPropertyValue("--pointer-diff-y").replace("px",""))||"0");p=Math.min(f,Math.max(E,p)),x=Math.min(v,Math.max(u,x)),t==null||t.style.setProperty("--pointer-diff-x",`${p}px`),t==null||t.style.setProperty("--pointer-diff-y",`${x}px`),h===e&&((r=(c=this.rootElm)==null?void 0:c.querySelector("button.vistaview-zoom-out-btn"))==null||r.setAttribute("disabled","true"),t.removeAttribute("data-vistaview-current-width"),t.removeAttribute("data-vistaview-current-height"),t.removeAttribute("data-vistaview-initial-width"),t.removeAttribute("data-vistaview-initial-height"),this.setZoomed(!1))}}clearZoom(){}getImages(t){return t.map((i,n)=>{const e=this.elements[i];if(e instanceof HTMLElement){const a=e.querySelector("img"),d=e.getAttribute("href")||"",o=e.getAttribute("src")||"",l=e.dataset.vistaviewSrc||d||o||(a==null?void 0:a.src)||"",c=e.dataset.vistaviewAlt||e.getAttribute("alt")||(a==null?void 0:a.alt)||"",r=e.dataset.vistaviewThumb||(a==null?void 0:a.src)||d||o||"";return{index:t[n],src:l,alt:c,thumb:r,imageElm:e instanceof HTMLImageElement?e:a,anchorElm:e instanceof HTMLAnchorElement?e:void 0}}else return{index:t[n],...e}})}setInitialDimPos(){var c,r;if(!this.rootElm)return;const t=(c=this.rootElm.querySelector('[data-vistaview-pos="0"]'))==null?void 0:c.dataset.vistaviewIndex,i=((r=this.currentImages)==null?void 0:r.find(h=>h.index===Number(t)))||null;if(!i)return;const n=i.imageElm?I(i.imageElm):void 0,e=i.anchorElm?I(i.anchorElm):void 0,a=(e==null?void 0:e.width)||(n==null?void 0:n.width)||0,d=(e==null?void 0:e.height)||(n==null?void 0:n.height)||0,o=((e==null?void 0:e.left)||(n==null?void 0:n.left)||0)+a/2,l=((e==null?void 0:e.top)||(n==null?void 0:n.top)||0)+d/2;this.rootElm.style.setProperty("--vistaview-container-initial-width",a+"px"),this.rootElm.style.setProperty("--vistaview-container-initial-height",d+"px"),this.rootElm.style.setProperty("--vistaview-container-initial-top",l+"px"),this.rootElm.style.setProperty("--vistaview-container-initial-left",o+"px"),this.rootElm.style.setProperty("--vistaview-image-border-radius",k(e==null?void 0:e.borderRadius)||k(n==null?void 0:n.borderRadius)||"0px")}updateZoomButtonsVisibility(){var e;const t=(e=this.rootElm)==null?void 0:e.querySelector('[data-vistaview-pos="0"] img.vistaview-image-highres');if(!t)return;const i=this;function n(){var r,h;const a=(r=i.rootElm)==null?void 0:r.querySelector("button.vistaview-zoom-in-btn"),d=(h=i.rootElm)==null?void 0:h.querySelector("button.vistaview-zoom-out-btn"),o=parseInt(t.style.width)||t.width,l=t.naturalWidth*i.options.maxZoomLevel,c=o<l&&l>0;a&&(a.style.display=c?"":"none"),d&&(d.style.display=c?"":"none")}t.complete&&t.naturalWidth>0?n():t.addEventListener("load",n)}loadImages(){if(!this.rootElm)return;this.rootElm.querySelectorAll(".vistaview-image-highres:not(.vistaview-image-loaded)").forEach((i,n)=>{const e=i,d=this.currentImages[n].imageElm,o={w:0,h:0};if(d){const{width:c,height:r}=j(d);o.w=Math.min(d.width,c),o.h=Math.min(d.height,r)}const l=()=>{var r;const c=()=>{var h;o.w&&o.h&&(e.style.width=`${o.w}px`,e.style.height=`${o.h}px`,e.style.setProperty("--vistaview-fitted-width",`${o.w}px`),e.style.setProperty("--vistaview-fitted-height",`${o.h}px`)),e.classList.add("vistaview-image-loaded"),e.width=e.naturalWidth,e.height=e.naturalHeight,setTimeout(()=>{var E,p;let m=0;const f=()=>{var x,L;m++,!(m<3)&&(e.removeEventListener("transitionend",f),(L=(x=e.parentElement)==null?void 0:x.querySelector(".vistaview-image-lowres"))==null||L.classList.add("vistaview-image--hidden"),e.classList.add("vistaview-image-settled"))};e.addEventListener("transitionend",f);const{width:u,height:v}=W(e);e.style.width=`${u}px`,e.style.height=`${v}px`,o.w&&o.h&&u===o.w&&v===o.h?((p=(E=e.parentElement)==null?void 0:E.querySelector(".vistaview-image-lowres"))==null||p.classList.add("vistaview-image--hidden"),e.classList.add("vistaview-image-settled")):(e.style.width=`${u}px`,e.style.height=`${v}px`)},100),(h=i.parentElement)!=null&&h.matches('[data-vistaview-pos="0"]')&&this.updateZoomButtonsVisibility()};if((r=this.rootElm)!=null&&r.classList.contains("vistaview--opened"))c();else{const h=setInterval(()=>{var m;(m=this.rootElm)!=null&&m.classList.contains("vistaview--opened")&&(clearInterval(h),c())},50)}};e.complete&&e.naturalWidth>0?l():e.onload=l})}setIndexDisplay(){this.elements.length!==1&&(this.rootElm.querySelector(".vistaview-index-display").textContent=`${this.currentIndex.value+1} / ${this.elements.length}`)}setCurrentDescription(){this.rootElm.querySelector(".vistaview-description").textContent=(this.currentImages[1]||this.currentImages[0]).alt||""}getCurrentIndexes(t){const i=this.options.preloads,n=this.elements.length,e=n<1||!i?[t]:[...new Set([...Array.from({length:i},(d,o)=>((t-i+o)%n+n)%n),t,...Array.from({length:i},(d,o)=>(t+1+o)%n)])],a=n<1||!i?[0]:e.map((d,o)=>o-Math.floor(e.length/2));return{images:e,positions:a}}setKeyboardListeners(){this.onKeyDown=t=>{switch(t.key){case"ArrowLeft":t.preventDefault(),this.prev();break;case"ArrowRight":t.preventDefault(),this.next();break;case"ArrowUp":t.preventDefault(),this.zoomIn();break;case"ArrowDown":t.preventDefault(),this.zoomOut();break;case"Escape":t.preventDefault(),this.close();break}},window.addEventListener("keydown",this.onKeyDown)}setResizeListeners(){this.onResizeHandler=()=>{var i;this.setInitialDimPos();const t=(i=this.rootElm)==null?void 0:i.querySelectorAll(".vistaview-image-highres.vistaview-image-loaded");t==null||t.forEach(n=>{const e=n,{width:a,height:d}=W(e);e.classList.contains("vistaview-image--zooming")?(e.dataset.vistaviewInitialWidth=a.toString(),e.dataset.vistaviewInitialHeight=d.toString()):(e.style.width=`${a}px`,e.style.height=`${d}px`)})},window.addEventListener("resize",this.onResizeHandler)}open(t=0){var o,l,c,r,h,m,f,u,v,E,p,x,L;if(D.somethingOpened){console.error("VistaView: another instance is already opened. Returning.");return}if(D.somethingOpened=this,this.currentIndex._value=t,document.body.prepend(nt({controls:this.options.controls,isReducedMotion:this.isReducedMotion})),this.rootElm=document.querySelector("#vistaview-root"),this.imageContainerElm=((o=this.rootElm)==null?void 0:o.querySelector(".vistaview-image-container"))||null,!this.rootElm||!this.imageContainerElm)throw D.somethingOpened=null,new Error("Failed to create VistaView element");this.options.arrowOnSmallScreens||this.rootElm.classList.add("vistaview-no-arrows-sm");const{images:i,positions:n}=this.getCurrentIndexes(t);this.currentImages=this.getImages(i);const e=this.currentImages.map((g,C)=>X(g,n[C]));this.currentItems=e;const a={htmlElements:{from:null,to:this.currentItems},images:{from:null,to:this.currentImages},index:{from:null,to:t},via:this.currentIndex.via,container:this.imageContainerElm,elements:this.elements,isReducedMotion:this.isReducedMotion,navActive:this.navActive,isZoomed:this.isZoomed,options:this.options};this.userSetup(a),this.imageContainerElm.innerHTML="",this.currentItems.forEach(g=>{this.imageContainerElm.appendChild(g)});let d=0;this.rootElm.addEventListener("animationend",g=>{var C;g.currentTarget===this.rootElm&&(d++,d>=2&&((C=this.rootElm)==null||C.classList.add("vistaview--opened")))}),(l=this.rootElm.querySelector(".vistaview-close-btn"))==null||l.addEventListener("click",()=>this.close()),(c=this.rootElm.querySelector(".vistaview-zoom-in-btn"))==null||c.addEventListener("click",()=>this.zoomIn()),(r=this.rootElm.querySelector(".vistaview-zoom-out-btn"))==null||r.addEventListener("click",()=>this.zoomOut()),(h=this.rootElm.querySelector(".vistaview-prev-btn>button"))==null||h.addEventListener("click",()=>this.prev()),(m=this.rootElm.querySelector(".vistaview-next-btn>button"))==null||m.addEventListener("click",()=>this.next()),[...this.options.controls.topLeft||[],...this.options.controls.topRight||[],...this.options.controls.topCenter||[],...this.options.controls.bottomCenter||[],...this.options.controls.bottomLeft||[],...this.options.controls.bottomRight||[]].forEach(g=>{typeof g!="string"&&(this.customControls[g.name]=g)}),this.rootElm.querySelectorAll("button[data-vistaview-custom-control]").forEach(g=>{g.addEventListener("click",C=>{const b=this.customControls[C.currentTarget.dataset.vistaviewCustomControl],S=this.currentImages.find(T=>T.index===this.currentIndex.value);b&&S&&(b.onClick.constructor.name==="AsyncFunction"?(g.classList.add("vistaview-button--loading"),b.onClick(S).finally(()=>{g.classList.remove("vistaview-button--loading")})):b.onClick(S))})}),this.options.animationDurationBase&&this.rootElm.style.setProperty("--vistaview-animation-duration",`${this.options.animationDurationBase}`),this.options.initialZIndex!==void 0&&this.rootElm.style.setProperty("--vistaview-initial-z-index",`${this.options.initialZIndex}`),this.setInitialDimPos(),this.setResizeListeners(),this.options.keyboardListeners&&this.setKeyboardListeners(),this.elements.length===1&&((f=this.rootElm.querySelector(".vistaview-prev-btn"))==null||f.classList.add("vistaview-ui--none"),(u=this.rootElm.querySelector(".vistaview-next-btn"))==null||u.classList.add("vistaview-ui--none"),(v=this.rootElm.querySelector(".vistaview-index-display"))==null||v.classList.add("vistaview-ui--none")),this.rootElm&&this.rootElm.classList.add("vistaview--initialized"),this.loadImages(),this.setCurrentDescription(),this.setIndexDisplay(),this.userInit(this),(p=(E=this.options).onOpen)==null||p.call(E,a),(L=(x=this.options).onImageView)==null||L.call(x,a)}async close(t=!0){var n,e,a;if(D.somethingOpened!==this)return;t&&((n=this.rootElm)==null||n.classList.add("vistaview--closing"),await new Promise(d=>{var l;let o;(l=this.rootElm)==null||l.addEventListener("transitionend",c=>{c.currentTarget===this.rootElm&&(o&&clearTimeout(o),o=setTimeout(()=>{d()},333))})}));const i={htmlElements:{from:this.currentItems,to:null},images:{from:this.currentImages,to:null},index:{from:this.currentIndex.value,to:null},container:this.imageContainerElm,elements:this.elements,via:{prev:!1,next:!1},isReducedMotion:this.isReducedMotion,navActive:this.navActive,isZoomed:this.isZoomed,options:this.options};this.userClose(this),(a=(e=this.options).onClose)==null||a.call(e,i),document.body.removeChild(this.rootElm),this.currentIndex._value=null,this.currentIndex._via={next:!1,prev:!1},this.rootElm=null,this.imageContainerElm=null,this.currentImages=null,this.currentItems=null,this.navActive=!0,this.onResizeHandler&&(window.removeEventListener("resize",this.onResizeHandler),this.onResizeHandler=null),this.onKeyDown&&(window.removeEventListener("keydown",this.onKeyDown),this.onKeyDown=null),(this.onZoomedPointerDown||this.onZoomedPointerMove||this.onZoomedPointerUp)&&(this.setZoomed(!1),this.onZoomedPointerDown=null,this.onZoomedPointerMove=null,this.onZoomedPointerUp=null),this.transitionAbortController&&(this.transitionAbortController.abort(),this.transitionAbortController=null),D.somethingOpened=null}destroy(){this.close(!1),this.elements instanceof NodeList&&this.elements.forEach(t=>{t.dataset.vistaviewIndex&&delete t.dataset.vistaviewIndex,t.removeEventListener("click",this.defaultOnClickHandler),t.removeEventListener("pointerup",this.onClickElements)})}view(t,i){D.somethingOpened===this&&this.navActive&&(t<0&&(t=this.elements.length-1),t>=this.elements.length&&(t=0),this.currentIndex.via=i||{next:!1,prev:!1},this.currentIndex.value=t)}next(){D.somethingOpened===this&&this.view(this.currentIndex.value+1,{next:!0,prev:!1})}prev(){D.somethingOpened===this&&this.view(this.currentIndex.value-1,{next:!1,prev:!0})}getCurrentIndex(){return D.somethingOpened===this?this.currentIndex.value:-1}}function ot(s){let t=null;if(typeof s=="string"?t=document.querySelectorAll(s):s instanceof NodeList&&(t=s),t)for(let i=0;i<t.length;i++){const n=t[i];if(!(n.dataset.vistaviewSrc||n.getAttribute("href")||n.getAttribute("src")||""))return`Element at index ${i} is missing 'src' / 'data-vistaview-src' / 'href' attribute.`}else{const i=s;for(let n=0;n<i.length;n++)if(!i[n].src)return`Element at index ${n} is missing 'src' attribute.`}return t||s}function rt({elements:s,...t}){if(!s)throw new Error("No elements");let i=ot(s);if(typeof i=="string")return console.error(i),console.warn("VistaView: silently returning."),null;const n=new st(i,t);return{open:(e=0)=>n.open(e),close:()=>n.close(),next:()=>n.next(),prev:()=>n.prev(),destroy:()=>n.destroy(),getCurrentIndex:()=>n.getCurrentIndex(),view:e=>{n.view(e)}}}y.DefaultOptions=H,y.VistaViewTransitionAbortedError=P,y.defaultClose=N,y.defaultInit=B,y.defaultSetup=_,y.defaultTransition=F,y.removeTouchActions=R,y.setTouchActions=Y,y.vistaView=rt,y.vistaViewDownload=V,Object.defineProperty(y,Symbol.toStringTag,{value:"Module"})}));
+    </div>`)}let M=null,$=null,Z=null,z=null;function Y(s){R(s);const t=s.imageContainerElm,i=s.elements.length;if(!t)return;let n=0,e=0,r=0,d=0,o=null,a=0,h=!1;M=l=>{l.preventDefault(),l.stopPropagation(),s.isZoomed===!1&&(h=!0,n=l.pageX,e=l.pageY,r=l.pageX,d=l.pageY,a=Date.now(),o=null,t.setPointerCapture(l.pointerId))},$=l=>{if(l.preventDefault(),l.stopPropagation(),s.isZoomed!==!1||!h)return;const c=l.pageX-n,v=l.pageY-e;r=l.pageX,d=l.pageY,Math.abs(c)>=Math.abs(v)&&(o===null||o===!0)?(t.style.setProperty("--vistaview-pointer-diff-x",`${c}px`),o=!0):Math.abs(v)>Math.abs(c)&&(o===null||o===!1)&&(t.style.setProperty("--vistaview-pointer-diff-y",`${v}px`),o=!1)},z=l=>{if(l.preventDefault(),l.stopPropagation(),t.releasePointerCapture(l.pointerId),s.isZoomed!==!1||!h)return;h=!1,o=null;const c=Array.from(t.querySelectorAll(".vistaview-item"));t.style.removeProperty("--vistaview-pointer-diff-x"),t.style.removeProperty("--vistaview-pointer-diff-y"),c.forEach(v=>{v.style.transition="",v.style.translate=""})},Z=l=>{if(l.preventDefault(),l.stopPropagation(),t.releasePointerCapture(l.pointerId),s.isZoomed!==!1||!h)return;h=!1;const c=Array.from(t.querySelectorAll(".vistaview-item")),v=r-n,m=d-e,f=Date.now()-a,u=v/f,E=m/f,p=s.options.touchSpeedThreshold||.5,x=c.find(b=>b.dataset.vistaviewPos==="0"),L=Number(x.dataset.vistaviewIndex);function g(){c[0].removeEventListener("transitionend",g),t.style.removeProperty("--vistaview-pointer-diff-x"),t.style.removeProperty("--vistaview-pointer-diff-y"),c.forEach(b=>{b.style.transition="",b.style.translate=""})}function C(b="0%",S="0%"){c.forEach(T=>{T.style.transition=`translate ${s.options.animationDurationBase*.5}ms ease-out`,T.style.translate=`${b} ${S}`})}if(u<-p||u>p){let b=function(){c[0].removeEventListener("transitionend",b),setTimeout(()=>{const S=s.isReducedMotion;s.isReducedMotion=!0,g(),s.view(u<-p?(L+1)%i:(L-1+i)%i,{next:u<-p,prev:u>p}),s.isReducedMotion=S},100)};C(u<-p?"-100%":"100%"),c[0].addEventListener("transitionend",b)}else E<-p||E>p?(s.close(),C("0%","0%")):(c[0].addEventListener("transitionend",g),C("0%"),u===0&&E===0&&s.zoomIn())},t.addEventListener("pointermove",$),t.addEventListener("pointerup",Z),t.addEventListener("pointerdown",M),t.addEventListener("pointercancel",z)}function R(s){const t=s.imageContainerElm;t&&($&&t.removeEventListener("pointermove",$),Z&&t.removeEventListener("pointerup",Z),M&&t.removeEventListener("pointerdown",M),z&&t.removeEventListener("pointercancel",z))}const _=s=>{Y(s)},B=({htmlElements:{to:s},index:{to:t},elements:i})=>{i instanceof NodeList&&t!==null&&(i.forEach(n=>n.style.opacity="1"),i[t].style.opacity="0"),s&&s.forEach(n=>{const e=Number(n.dataset.vistaviewPos);e!==0?(n.style.zIndex="1",n.style.left=100*e+"%"):n.style.zIndex="2"})},F=async({htmlElements:{from:s,to:t},images:{to:i},via:{next:n,prev:e},options:r,isReducedMotion:d},o)=>{if(!i)throw new Error("VistaView: images is null in defaultTransition()");if(d)return;const a=s.filter(h=>h.dataset.vistaviewPos==="0"||(n?h.dataset.vistaviewPos==="1":h.dataset.vistaviewPos==="-1"));await new Promise((h,l)=>{let c=0;if(o.aborted){l(new A("Transition aborted"));return}const v=m=>{if(o.aborted)return l(new A("Transition aborted"));if(m.currentTarget.removeEventListener("transitionend",v),c++,c<a.length)return;const f=t==null?void 0:t.find(g=>g.dataset.vistaviewPos==="0"),u=f?Number(f.dataset.vistaviewIndex):0,E=a.find(g=>Number(g.dataset.vistaviewIndex)===u),p=E==null?void 0:E.querySelector(".vistaview-image-highres");if(!p)return l(new Error("current image element not found"));if(!p.classList.contains("vistaview-image-loaded")||p.classList.contains("vistaview-image-settled"))return h(0);let x=0;const L=setInterval(()=>{if(o.aborted)return clearInterval(L),l(new A("Transition aborted"));if(x++,x>r.animationDurationBase/20*1.5)return clearInterval(L),h(0);if(p.classList.contains("vistaview-image-settled"))return f==null||f.classList.add("vistaview-image-settled"),clearInterval(L),h(0)},20)};a.forEach(m=>{m.style.transition=`translate ${r.animationDurationBase*.5}ms ease-out`,m.style.translate=n?"-100%":e?"100%":"0%",m.addEventListener("transitionend",v)})})},N=s=>{s.elements instanceof NodeList&&s.elements.forEach(t=>t.style.opacity="1"),R(s)};class A extends Error{constructor(t){super(t),this.name="VistaViewTransitionAbortedError"}}const H={detectReducedMotion:!0,animationDurationBase:333,zoomStep:500,maxZoomLevel:2,touchSpeedThreshold:.5,preloads:1,keyboardListeners:!0,arrowOnSmallScreens:!1,controls:{topLeft:["indexDisplay"],topRight:["zoomIn","zoomOut",V(),"close"],bottomCenter:["description"]}},D={somethingOpened:null};class st{constructor(t,i){w(this,"options");w(this,"elements");w(this,"isReducedMotion");w(this,"currentIndex",{_value:null,_vistaView:null,_via:{next:!1,prev:!1},set value(t){var n,e,r;const i=this._value;this._value=t;for(const d in(n=this._vistaView)==null?void 0:n.transitionAbortControllers)(e=this._vistaView)==null||e.transitionAbortControllers[d].abort();(r=this._vistaView)==null||r.swap(i,this._value)},get value(){return this._value},get via(){return this._via},set via(t){this._via=t}});w(this,"rootElm",null);w(this,"imageContainerElm",null);w(this,"customControls",{});w(this,"currentImages",null);w(this,"currentItems",null);w(this,"navActive",!0);w(this,"isZoomed",!1);w(this,"onClickElements",t=>{t.preventDefault();const i=t.currentTarget;i.dataset.vistaviewIndex&&this.open(parseInt(i.dataset.vistaviewIndex))});w(this,"defaultOnClickHandler",t=>t.preventDefault());w(this,"onResizeHandler",null);w(this,"onKeyDown",null);w(this,"userSetup",B);w(this,"userTransition",F);w(this,"userClose",N);w(this,"userInit",_);w(this,"onZoomedPointerDown",null);w(this,"onZoomedPointerMove",null);w(this,"onZoomedPointerUp",null);w(this,"transitionAbortControllers",{});w(this,"loadImageTimeout",null);this.elements=t,this.currentIndex._vistaView=this,this.options={...H,...i||{},controls:{...H.controls,...(i==null?void 0:i.controls)||{}}},this.options.initFunction&&(this.userInit=this.options.initFunction),this.options.transitionFunction&&(this.userTransition=this.options.transitionFunction),this.options.closeFunction&&(this.userClose=this.options.closeFunction),this.options.initFunction&&(this.userInit=this.options.initFunction),this.isReducedMotion=window.matchMedia("(prefers-reduced-motion: reduce)").matches,this.elements instanceof NodeList&&this.elements.forEach((n,e)=>{n.dataset.vistaviewIndex=e.toString(),n.addEventListener("click",this.defaultOnClickHandler),n.addEventListener("pointerup",this.onClickElements)})}async swap(t,i){var l,c;if(!D.somethingOpened||t===i||t===null)return;if(!this.imageContainerElm)throw new Error("VistaView: imageContainerElm is null in swap()");this.setIndexDisplay(),this.clearZoom();const{images:n,positions:e}=this.getCurrentIndexes(i),r=this.getImages(n),d=r.map((v,m)=>X(v,e[m])),o={htmlElements:{from:this.currentItems,to:d},images:{from:this.currentImages,to:r},index:{from:t,to:i},via:this.currentIndex.via,container:this.imageContainerElm,elements:this.elements,isReducedMotion:this.isReducedMotion,navActive:this.navActive,isZoomed:this.isZoomed,options:this.options};this.userSetup(o);const a=Math.random().toString(36).substring(2,15)+Math.random().toString(36).substring(2,15);this.transitionAbortControllers[a]=new AbortController;try{await this.userTransition(o,this.transitionAbortControllers[a].signal)}catch(v){v instanceof A||console.warn(v)}delete this.transitionAbortControllers[a];const h=d.find(v=>v.dataset.vistaviewPos==="0");if(h){const v=h.dataset.vistaviewIndex,m=this.currentItems.find(u=>u.dataset.vistaviewIndex===v),f=m==null?void 0:m.querySelector(".vistaview-image-highres");if(f){const u=h.querySelector(".vistaview-image-highres");u.setAttribute("class",f.getAttribute("class")||""),u.setAttribute("style",f.getAttribute("style")||""),u.classList.remove("vistaview-image--zooming"),u.classList.remove("vistaview-image-settled")}}this.imageContainerElm.innerHTML="",d.forEach(v=>{this.imageContainerElm.appendChild(v)}),this.setInitialDimPos(),this.currentImages=r,this.currentItems=d,this.setCurrentDescription(),this.updateZoomButtonsVisibility(),(c=(l=this.options).onImageView)==null||c.call(l,o),this.loadImageTimeout&&clearTimeout(this.loadImageTimeout),this.loadImageTimeout=setTimeout(()=>{this.loadImages()},333)}setZoomed(t){var i,n,e,r,d,o;if(this.isZoomed!==t){if(this.isZoomed){let a=this.isZoomed;if(a.classList.remove("vistaview-image--zooming"),this.onZoomedPointerDown&&((i=a.parentElement)==null||i.removeEventListener("pointerdown",this.onZoomedPointerDown),this.onZoomedPointerDown=null),this.onZoomedPointerMove&&((n=a.parentElement)==null||n.removeEventListener("pointermove",this.onZoomedPointerMove),this.onZoomedPointerMove=null),this.onZoomedPointerUp&&((e=a.parentElement)==null||e.removeEventListener("pointerup",this.onZoomedPointerUp),this.onZoomedPointerUp=null),a==null||a.style.removeProperty("--pointer-diff-x"),a==null||a.style.removeProperty("--pointer-diff-y"),setTimeout(()=>{a==null||a.classList.remove("vistaview-image--zooming")},500),this.isZoomed=!1,!t)return}if(t){this.isZoomed=t,t.classList.add("vistaview-image--zooming"),t==null||t.style.setProperty("--pointer-diff-x","0px"),t==null||t.style.setProperty("--pointer-diff-y","0px");let a=!1,h=0,l=0,c=0,v=0,m=0,f=0;this.onZoomedPointerDown=u=>{u.preventDefault(),u.stopPropagation(),a=!0,h=u.pageX,l=u.pageY,t.setPointerCapture(u.pointerId)},this.onZoomedPointerMove=u=>{if(!a)return;u.preventDefault(),m=u.pageX-h,f=u.pageY-l;const E=parseInt((t==null?void 0:t.dataset.vistaviewCurrentWidth)||"0"),p=parseInt((t==null?void 0:t.dataset.vistaviewCurrentHeight)||"0"),{maxDiffX:x,minDiffY:L,maxDiffY:g,minDiffX:C}=O(E,p),b=Math.min(x,Math.max(C,c+m)),S=Math.min(g,Math.max(L,v+f));m=b-c,f=S-v,t==null||t.style.setProperty("--pointer-diff-x",`${b}px`),t==null||t.style.setProperty("--pointer-diff-y",`${S}px`)},this.onZoomedPointerUp=u=>{a=!1,t.releasePointerCapture(u.pointerId),c+=m,v+=f,m=0,f=0},(r=t==null?void 0:t.parentElement)==null||r.addEventListener("pointerdown",this.onZoomedPointerDown),(d=t==null?void 0:t.parentElement)==null||d.addEventListener("pointermove",this.onZoomedPointerMove),(o=t==null?void 0:t.parentElement)==null||o.addEventListener("pointerup",this.onZoomedPointerUp);return}}}zoomIn(){var r,d,o,a,h;const t=(r=this.rootElm)==null?void 0:r.querySelector('[data-vistaview-pos="0"] .vistaview-image-highres'),i=t.width,n=t.height;t.dataset.vistaviewInitialWidth||(t.dataset.vistaviewInitialWidth=i.toString()),t.dataset.vistaviewInitialHeight||(t.dataset.vistaviewInitialHeight=n.toString()),this.setZoomed(t);const e=(t.naturalWidth||0)*this.options.maxZoomLevel;if(i&&e&&i<e){const l=Math.min(i+this.options.zoomStep,e);t.style.width=`${l}px`;const c=l/i*n;t.style.height=`${c}px`,(o=(d=this.rootElm)==null?void 0:d.querySelector("button.vistaview-zoom-out-btn"))==null||o.removeAttribute("disabled"),t.dataset.vistaviewCurrentWidth=l.toString(),t.dataset.vistaviewCurrentHeight=c.toString(),l===e&&((h=(a=this.rootElm)==null?void 0:a.querySelector("button.vistaview-zoom-in-btn"))==null||h.setAttribute("disabled","true"))}}zoomOut(){var d,o,a,h,l;const t=(d=this.rootElm)==null?void 0:d.querySelector('[data-vistaview-pos="0"] .vistaview-image-highres'),i=t.width,n=t.height,e=t.dataset.vistaviewInitialWidth?parseInt(t.dataset.vistaviewInitialWidth):0,r=c=>{c.target===t&&(t.classList.remove("vistaview-image--zooming-out"),t.removeEventListener("transitionend",r))};if(t.addEventListener("transitionend",r),t.classList.add("vistaview-image--zooming-out"),i&&e&&i>e){const c=Math.max(i-this.options.zoomStep,e);t.style.width=`${c}px`;const v=c/i*n;t.style.height=`${v}px`,(a=(o=this.rootElm)==null?void 0:o.querySelector("button.vistaview-zoom-in-btn"))==null||a.removeAttribute("disabled"),t.dataset.vistaviewCurrentWidth=c.toString(),t.dataset.vistaviewCurrentHeight=v.toString();const{maxDiffX:m,minDiffY:f,maxDiffY:u,minDiffX:E}=O(c,v);let p=parseInt((t==null?void 0:t.style.getPropertyValue("--pointer-diff-x").replace("px",""))||"0"),x=parseInt((t==null?void 0:t.style.getPropertyValue("--pointer-diff-y").replace("px",""))||"0");p=Math.min(m,Math.max(E,p)),x=Math.min(u,Math.max(f,x)),t==null||t.style.setProperty("--pointer-diff-x",`${p}px`),t==null||t.style.setProperty("--pointer-diff-y",`${x}px`),c===e&&((l=(h=this.rootElm)==null?void 0:h.querySelector("button.vistaview-zoom-out-btn"))==null||l.setAttribute("disabled","true"),t.removeAttribute("data-vistaview-current-width"),t.removeAttribute("data-vistaview-current-height"),t.removeAttribute("data-vistaview-initial-width"),t.removeAttribute("data-vistaview-initial-height"),this.setZoomed(!1))}}clearZoom(){}getImages(t){return t.map((i,n)=>{const e=this.elements[i];if(e instanceof HTMLElement){const r=e.querySelector("img"),d=e.getAttribute("href")||"",o=e.getAttribute("src")||"",a=e.dataset.vistaviewSrc||d||o||(r==null?void 0:r.src)||"",h=e.dataset.vistaviewAlt||e.getAttribute("alt")||(r==null?void 0:r.alt)||"",l=e.dataset.vistaviewThumb||(r==null?void 0:r.src)||d||o||"";return{index:t[n],src:a,alt:h,thumb:l,imageElm:e instanceof HTMLImageElement?e:r,anchorElm:e instanceof HTMLAnchorElement?e:void 0}}else return{index:t[n],...e}})}setInitialDimPos(){var h,l;if(!this.rootElm)return;const t=(h=this.rootElm.querySelector('[data-vistaview-pos="0"]'))==null?void 0:h.dataset.vistaviewIndex,i=((l=this.currentImages)==null?void 0:l.find(c=>c.index===Number(t)))||null;if(!i)return;const n=i.imageElm?I(i.imageElm):void 0,e=i.anchorElm?I(i.anchorElm):void 0,r=(e==null?void 0:e.width)||(n==null?void 0:n.width)||0,d=(e==null?void 0:e.height)||(n==null?void 0:n.height)||0,o=((e==null?void 0:e.left)||(n==null?void 0:n.left)||0)+r/2,a=((e==null?void 0:e.top)||(n==null?void 0:n.top)||0)+d/2;this.rootElm.style.setProperty("--vistaview-container-initial-width",r+"px"),this.rootElm.style.setProperty("--vistaview-container-initial-height",d+"px"),this.rootElm.style.setProperty("--vistaview-container-initial-top",a+"px"),this.rootElm.style.setProperty("--vistaview-container-initial-left",o+"px"),this.rootElm.style.setProperty("--vistaview-image-border-radius",k(e==null?void 0:e.borderRadius)||k(n==null?void 0:n.borderRadius)||"0px")}updateZoomButtonsVisibility(){var e;const t=(e=this.rootElm)==null?void 0:e.querySelector('[data-vistaview-pos="0"] img.vistaview-image-highres');if(!t)return;const i=this;function n(){var l,c;const r=(l=i.rootElm)==null?void 0:l.querySelector("button.vistaview-zoom-in-btn"),d=(c=i.rootElm)==null?void 0:c.querySelector("button.vistaview-zoom-out-btn"),o=parseInt(t.style.width)||t.width,a=t.naturalWidth*i.options.maxZoomLevel,h=o<a&&a>0;r&&(r.style.display=h?"":"none"),d&&(d.style.display=h?"":"none")}t.complete&&t.naturalWidth>0?n():t.addEventListener("load",n)}loadImages(){if(!this.rootElm)return;this.rootElm.querySelectorAll(".vistaview-image-highres:not(.vistaview-image-loaded)").forEach((i,n)=>{const e=i,d=this.currentImages[n].imageElm,o={w:0,h:0};if(d){const{width:h,height:l}=j(d);o.w=Math.min(d.width,h),o.h=Math.min(d.height,l)}const a=()=>{var l;const h=()=>{var c;o.w&&o.h&&(e.style.width=`${o.w}px`,e.style.height=`${o.h}px`,e.style.setProperty("--vistaview-fitted-width",`${o.w}px`),e.style.setProperty("--vistaview-fitted-height",`${o.h}px`)),e.classList.add("vistaview-image-loaded"),e.width=e.naturalWidth,e.height=e.naturalHeight,setTimeout(()=>{var E,p;let v=0;const m=()=>{var x,L;v++,!(v<3)&&(e.removeEventListener("transitionend",m),(L=(x=e.parentElement)==null?void 0:x.querySelector(".vistaview-image-lowres"))==null||L.classList.add("vistaview-image--hidden"),e.classList.add("vistaview-image-settled"))};e.addEventListener("transitionend",m);const{width:f,height:u}=W(e);e.style.width=`${f}px`,e.style.height=`${u}px`,o.w&&o.h&&f===o.w&&u===o.h?((p=(E=e.parentElement)==null?void 0:E.querySelector(".vistaview-image-lowres"))==null||p.classList.add("vistaview-image--hidden"),e.classList.add("vistaview-image-settled")):(e.style.width=`${f}px`,e.style.height=`${u}px`)},100),(c=i.parentElement)!=null&&c.matches('[data-vistaview-pos="0"]')&&this.updateZoomButtonsVisibility()};if((l=this.rootElm)!=null&&l.classList.contains("vistaview--opened"))h();else{const c=setInterval(()=>{var v;(v=this.rootElm)!=null&&v.classList.contains("vistaview--opened")&&(clearInterval(c),h())},50)}};e.complete&&e.naturalWidth>0?a():e.onload=a})}setIndexDisplay(){this.elements.length!==1&&(this.rootElm.querySelector(".vistaview-index-display").textContent=`${this.currentIndex.value+1} / ${this.elements.length}`)}setCurrentDescription(){this.rootElm.querySelector(".vistaview-description").textContent=(this.currentImages[1]||this.currentImages[0]).alt||""}getCurrentIndexes(t){const i=this.options.preloads,n=this.elements.length,e=n<1||!i?[t]:[...new Set([...Array.from({length:i},(d,o)=>((t-i+o)%n+n)%n),t,...Array.from({length:i},(d,o)=>(t+1+o)%n)])],r=n<1||!i?[0]:e.map((d,o)=>o-Math.floor(e.length/2));return{images:e,positions:r}}setKeyboardListeners(){this.onKeyDown=t=>{switch(t.key){case"ArrowLeft":t.preventDefault(),this.prev();break;case"ArrowRight":t.preventDefault(),this.next();break;case"ArrowUp":t.preventDefault(),this.zoomIn();break;case"ArrowDown":t.preventDefault(),this.zoomOut();break;case"Escape":t.preventDefault(),this.close();break}},window.addEventListener("keydown",this.onKeyDown)}setResizeListeners(){this.onResizeHandler=()=>{var i;this.setInitialDimPos();const t=(i=this.rootElm)==null?void 0:i.querySelectorAll(".vistaview-image-highres.vistaview-image-loaded");t==null||t.forEach(n=>{const e=n,{width:r,height:d}=W(e);e.classList.contains("vistaview-image--zooming")?(e.dataset.vistaviewInitialWidth=r.toString(),e.dataset.vistaviewInitialHeight=d.toString()):(e.style.width=`${r}px`,e.style.height=`${d}px`)})},window.addEventListener("resize",this.onResizeHandler)}open(t=0){var o,a,h,l,c,v,m,f,u,E,p,x,L;if(D.somethingOpened){console.error("VistaView: another instance is already opened. Returning.");return}if(D.somethingOpened=this,this.currentIndex._value=t,document.body.prepend(nt({controls:this.options.controls,isReducedMotion:this.isReducedMotion})),this.rootElm=document.querySelector("#vistaview-root"),this.imageContainerElm=((o=this.rootElm)==null?void 0:o.querySelector(".vistaview-image-container"))||null,!this.rootElm||!this.imageContainerElm)throw D.somethingOpened=null,new Error("Failed to create VistaView element");this.options.arrowOnSmallScreens||this.rootElm.classList.add("vistaview-no-arrows-sm");const{images:i,positions:n}=this.getCurrentIndexes(t);this.currentImages=this.getImages(i);const e=this.currentImages.map((g,C)=>X(g,n[C]));this.currentItems=e;const r={htmlElements:{from:null,to:this.currentItems},images:{from:null,to:this.currentImages},index:{from:null,to:t},via:this.currentIndex.via,container:this.imageContainerElm,elements:this.elements,isReducedMotion:this.isReducedMotion,navActive:this.navActive,isZoomed:this.isZoomed,options:this.options};this.userSetup(r),this.imageContainerElm.innerHTML="",this.currentItems.forEach(g=>{this.imageContainerElm.appendChild(g)});let d=0;this.rootElm.addEventListener("animationend",g=>{var C;g.currentTarget===this.rootElm&&(d++,d>=2&&((C=this.rootElm)==null||C.classList.add("vistaview--opened")))}),(a=this.rootElm.querySelector(".vistaview-close-btn"))==null||a.addEventListener("click",()=>this.close()),(h=this.rootElm.querySelector(".vistaview-zoom-in-btn"))==null||h.addEventListener("click",()=>this.zoomIn()),(l=this.rootElm.querySelector(".vistaview-zoom-out-btn"))==null||l.addEventListener("click",()=>this.zoomOut()),(c=this.rootElm.querySelector(".vistaview-prev-btn>button"))==null||c.addEventListener("click",()=>this.prev()),(v=this.rootElm.querySelector(".vistaview-next-btn>button"))==null||v.addEventListener("click",()=>this.next()),[...this.options.controls.topLeft||[],...this.options.controls.topRight||[],...this.options.controls.topCenter||[],...this.options.controls.bottomCenter||[],...this.options.controls.bottomLeft||[],...this.options.controls.bottomRight||[]].forEach(g=>{typeof g!="string"&&(this.customControls[g.name]=g)}),this.rootElm.querySelectorAll("button[data-vistaview-custom-control]").forEach(g=>{g.addEventListener("click",C=>{const b=this.customControls[C.currentTarget.dataset.vistaviewCustomControl],S=this.currentImages.find(T=>T.index===this.currentIndex.value);b&&S&&(b.onClick.constructor.name==="AsyncFunction"?(g.classList.add("vistaview-button--loading"),b.onClick(S).finally(()=>{g.classList.remove("vistaview-button--loading")})):b.onClick(S))})}),this.options.animationDurationBase&&this.rootElm.style.setProperty("--vistaview-animation-duration",`${this.options.animationDurationBase}`),this.options.initialZIndex!==void 0&&this.rootElm.style.setProperty("--vistaview-initial-z-index",`${this.options.initialZIndex}`),this.setInitialDimPos(),this.setResizeListeners(),this.options.keyboardListeners&&this.setKeyboardListeners(),this.elements.length===1&&((m=this.rootElm.querySelector(".vistaview-prev-btn"))==null||m.classList.add("vistaview-ui--none"),(f=this.rootElm.querySelector(".vistaview-next-btn"))==null||f.classList.add("vistaview-ui--none"),(u=this.rootElm.querySelector(".vistaview-index-display"))==null||u.classList.add("vistaview-ui--none")),this.rootElm&&this.rootElm.classList.add("vistaview--initialized"),this.loadImages(),this.setCurrentDescription(),this.setIndexDisplay(),this.userInit(this),(p=(E=this.options).onOpen)==null||p.call(E,r),(L=(x=this.options).onImageView)==null||L.call(x,r)}async close(t=!0){var n,e,r;if(D.somethingOpened!==this)return;t&&((n=this.rootElm)==null||n.classList.add("vistaview--closing"),await new Promise(d=>{var a;let o;(a=this.rootElm)==null||a.addEventListener("transitionend",h=>{h.currentTarget===this.rootElm&&(o&&clearTimeout(o),o=setTimeout(()=>{d()},333))})}));const i={htmlElements:{from:this.currentItems,to:null},images:{from:this.currentImages,to:null},index:{from:this.currentIndex.value,to:null},container:this.imageContainerElm,elements:this.elements,via:{prev:!1,next:!1},isReducedMotion:this.isReducedMotion,navActive:this.navActive,isZoomed:this.isZoomed,options:this.options};this.userClose(this),(r=(e=this.options).onClose)==null||r.call(e,i),document.body.removeChild(this.rootElm),this.currentIndex._value=null,this.currentIndex._via={next:!1,prev:!1},this.rootElm=null,this.imageContainerElm=null,this.currentImages=null,this.currentItems=null,this.navActive=!0,this.onResizeHandler&&(window.removeEventListener("resize",this.onResizeHandler),this.onResizeHandler=null),this.onKeyDown&&(window.removeEventListener("keydown",this.onKeyDown),this.onKeyDown=null),(this.onZoomedPointerDown||this.onZoomedPointerMove||this.onZoomedPointerUp)&&(this.setZoomed(!1),this.onZoomedPointerDown=null,this.onZoomedPointerMove=null,this.onZoomedPointerUp=null);for(const d in this.transitionAbortControllers)this.transitionAbortControllers[d].abort();this.transitionAbortControllers={},D.somethingOpened=null}destroy(){this.close(!1),this.elements instanceof NodeList&&this.elements.forEach(t=>{t.dataset.vistaviewIndex&&delete t.dataset.vistaviewIndex,t.removeEventListener("click",this.defaultOnClickHandler),t.removeEventListener("pointerup",this.onClickElements)})}view(t,i){D.somethingOpened===this&&this.navActive&&(t<0&&(t=this.elements.length-1),t>=this.elements.length&&(t=0),this.currentIndex.via=i||{next:!1,prev:!1},this.currentIndex.value=t)}next(){D.somethingOpened===this&&this.view(this.currentIndex.value+1,{next:!0,prev:!1})}prev(){D.somethingOpened===this&&this.view(this.currentIndex.value-1,{next:!1,prev:!0})}getCurrentIndex(){return D.somethingOpened===this?this.currentIndex.value:-1}}function ot(s){let t=null;if(typeof s=="string"?t=document.querySelectorAll(s):s instanceof NodeList&&(t=s),t)for(let i=0;i<t.length;i++){const n=t[i];if(!(n.dataset.vistaviewSrc||n.getAttribute("href")||n.getAttribute("src")||""))return`Element at index ${i} is missing 'src' / 'data-vistaview-src' / 'href' attribute.`}else{const i=s;for(let n=0;n<i.length;n++)if(!i[n].src)return`Element at index ${n} is missing 'src' attribute.`}return t||s}function rt({elements:s,...t}){if(!s)throw new Error("No elements");let i=ot(s);if(typeof i=="string")return console.error(i),console.warn("VistaView: silently returning."),null;const n=new st(i,t);return{open:(e=0)=>n.open(e),close:()=>n.close(),next:()=>n.next(),prev:()=>n.prev(),destroy:()=>n.destroy(),getCurrentIndex:()=>n.getCurrentIndex(),view:e=>{n.view(e)}}}y.DefaultOptions=H,y.VistaViewTransitionAbortedError=A,y.defaultClose=N,y.defaultInit=_,y.defaultSetup=B,y.defaultTransition=F,y.removeTouchActions=R,y.setTouchActions=Y,y.vistaView=rt,y.vistaViewDownload=V,Object.defineProperty(y,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vistaview",
-  "version": "0.3.6",
+  "version": "0.3.8",
   "description": "A lightweight, zero-dependency image lightbox library with smooth animations and touch support",
   "keywords": [
     "image",