vistaview 0.6.5 → 0.7.0

package/dist/vistaview.umd.js

@@ -1,11 +1,11 @@
-(function(v,w){typeof exports=="object"&&typeof module<"u"?w(exports):typeof define=="function"&&define.amd?define(["exports"],w):(v=typeof globalThis<"u"?globalThis:v||self,w(v.VistaView={}))})(this,(function(v){"use strict";var st=Object.defineProperty;var ot=(v,w,$)=>w in v?st(v,w,{enumerable:!0,configurable:!0,writable:!0,value:$}):v[w]=$;var l=(v,w,$)=>ot(v,typeof w!="symbol"?w+"":w,$);function w(s){return s&&!/^0(px|%|r?em|vw|vh|vmin|vmax|cm|mm|in|pt|pc|ex|ch)?$/i.test(s.trim())&&s}function $(s){const e=window.getComputedStyle(s).objectFit||"",{width:i,height:n}=s.getBoundingClientRect(),o=s.naturalWidth,a=s.naturalHeight;if(!e)return{width:i,height:n};if(!o||!a)return{width:i,height:n};const r=o/a,h=i/n;switch(e){case"fill":return{width:i,height:n};case"none":return{width:o,height:a};case"contain":return r>h?{width:i,height:i/r}:{width:n*r,height:n};case"cover":return r<h?{width:i,height:i/r}:{width:n*r,height:n};case"scale-down":{const c={width:o,height:a},m=r>h?{width:i,height:i/r}:{width:n*r,height:n};return m.width<=c.width&&m.height<=c.height?m:c}}return{width:i,height:n}}function H(s){const t=getComputedStyle(s),e=s.getBoundingClientRect();return{objectFit:t.objectFit,borderRadius:t.borderRadius,objectPosition:t.objectPosition,overflow:t.overflow,top:e.top,left:e.left,width:e.width,height:e.height,naturalWidth:s.naturalWidth,naturalHeight:s.naturalHeight}}function P(s){const t=s.imageElm?H(s.imageElm):null,e=s.anchorElm?H(s.anchorElm):null,i=w(t==null?void 0:t.borderRadius),n=e&&w(e==null?void 0:e.borderRadius),o=(n?e==null?void 0:e.borderRadius:i?t==null?void 0:t.borderRadius:"")||"";return{fit:(t==null?void 0:t.objectFit)||(e==null?void 0:e.objectFit)||"",pos:(t==null?void 0:t.objectPosition)||"",br:o,overflow:n?e.overflow:i?t.overflow:"",nw:(t==null?void 0:t.naturalWidth)||0,nh:(t==null?void 0:t.naturalHeight)||0,w:(e==null?void 0:e.width)||(t==null?void 0:t.width)||0,h:(e==null?void 0:e.height)||(t==null?void 0:t.height)||0,top:(e==null?void 0:e.top)||(t==null?void 0:t.top)||0,left:(e==null?void 0:e.left)||(t==null?void 0:t.left)||0}}function M(s,t,e,i=!1){const{fit:n,w:o,h:a,nw:r,nh:h,br:c,top:m,left:f}=P(s),E=Math.min(Math.max(f,-o),window.innerWidth+o)-window.innerWidth/2+o/2,y=Math.min(Math.max(m,-a),window.innerHeight+a)-window.innerHeight/2+a/2,d=e.style;d.width=`${o}px`,d.height=`${a}px`,d.objectFit=n,e.width=r,e.height=h,d.setProperty("--vvw-init-radius",`${c}`),d.setProperty("--vvw-pulse-radius",`calc(1.3 * ${c})`),d.setProperty("--vvw-init-x",`${E}px`),d.setProperty("--vvw-init-y",`${y}px`),i&&(d.setProperty("--vvw-current-x",`${E}px`),d.setProperty("--vvw-current-y",`${y}px`));const g=$(s.imageElm),p=Math.min(o,g.width),x=Math.min(a,g.height),u=t.style;u.setProperty("--vvw-init-radius",`${c}`),u.setProperty("--vvw-init-w",`${p}px`),u.setProperty("--vvw-init-h",`${x}px`),i&&(u.setProperty("--vvw-current-radius",`${c}`),u.setProperty("--vvw-current-w",`${p}px`),u.setProperty("--vvw-current-h",`${x}px`),t.dataset.vvwWidth=p.toString(),t.dataset.vvwHeight=x.toString())}function W(s){const t=window.innerWidth,e=window.innerHeight,i=s.naturalWidth,n=s.naturalHeight;if(!i||!n)throw new Error("Image natural dimensions are zero");if(i<t&&n<e)return{width:i,height:n};const o=i/n,a=t/e;let r,h;return o>a?(r=t,h=t/o):(h=e,r=e*o),{width:r,height:h}}function z(s,t,e){return Math.min(Math.max(s,t),e)}function L(s,t=2){const e=Math.pow(10,t);return Math.round(s*e)/e}const q='<svg viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>',k='<svg viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>',R='<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>',O='<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>',Z='<svg viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>',Y='<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>';let S=null;function X(){return S||(window.trustedTypes||(window.trustedTypes={createPolicy:(s,t)=>t}),S=window.trustedTypes.createPolicy("vistaView-policy",{createHTML:s=>s,createScript:()=>{throw new Error("Not implemented")},createScriptURL:()=>{throw new Error("Not implemented")}}),S)}function A(s){const e=X().createHTML(s),i=document.createElement("template");i.innerHTML=e;const n=i.content;return i.remove(),n}function F(){return{name:"download",icon:Y,onClick:async s=>{var o;const t=await fetch(s.src),e=await t.blob(),i=t.url,n=document.createElement("a");n.href=URL.createObjectURL(e),n.download=((o=i.split("/").pop())==null?void 0:o.split("?")[0].split("#")[0])||"download",document.body.appendChild(n),n.click(),document.body.removeChild(n)}}}function N(s){if(typeof s=="string")switch(s){case"zoomIn":return`<button aria-label="Zoom In" class="vvw-zoom-in vvw-ui">${R}</button>`;case"zoomOut":return`<button aria-label="Zoom Out" disabled class="vvw-zoom-out vvw-ui">${O}</button>`;case"close":return`<button aria-label="Close" class="vvw-close vvw-ui">${Z}</button>`;case"indexDisplay":return'<div class="vvw-index vvw-ui" aria-hidden="true"></div>';case"description":return'<div class="vvw-desc vvw-ui" role="status" aria-live="polite" aria-atomic="true"></div>';default:return""}return`<button aria-label="${s.description||s.name}" data-vvw-control="${s.name}">${s.icon}</button>`}function B(s,t){const e=document.createElement("div");e.className="vvw-item",e.dataset.vvwPos=`${t!==void 0?t:""}`,e.dataset.vvwIdx=s.index.toString(),e.appendChild(A(`<img class="vvw-img-lo" src="${s.thumb||s.src}" alt="${s.alt||""}" />
-      <img class="vvw-img-hi" src="${s.src}" alt="${s.alt||""}" />`));const i=e.querySelector("img.vvw-img-lo"),n=e.querySelector("img.vvw-img-hi");return M(s,n,i,t===0),e}function j({controls:s}){const t=i=>i?i.map(N).join(""):"";return A(`<div class="vvw-root" id="vvw-root">
+(function(v,w){typeof exports=="object"&&typeof module<"u"?w(exports):typeof define=="function"&&define.amd?define(["exports"],w):(v=typeof globalThis<"u"?globalThis:v||self,w(v.VistaView={}))})(this,(function(v){"use strict";var rt=Object.defineProperty;var at=(v,w,I)=>w in v?rt(v,w,{enumerable:!0,configurable:!0,writable:!0,value:I}):v[w]=I;var l=(v,w,I)=>at(v,typeof w!="symbol"?w+"":w,I);function w(o){return o&&!/^0(px|%|r?em|vw|vh|vmin|vmax|cm|mm|in|pt|pc|ex|ch)?$/i.test(o.trim())&&o}function I(o){const e=window.getComputedStyle(o).objectFit||"",{width:n,height:i}=o.getBoundingClientRect(),s=o.naturalWidth,a=o.naturalHeight;if(!e)return{width:n,height:i};if(!s||!a)return{width:n,height:i};const r=s/a,h=n/i;switch(e){case"fill":return{width:n,height:i};case"none":return{width:s,height:a};case"contain":return r>h?{width:n,height:n/r}:{width:i*r,height:i};case"cover":return r<h?{width:n,height:n/r}:{width:i*r,height:i};case"scale-down":{const c={width:s,height:a},m=r>h?{width:n,height:n/r}:{width:i*r,height:i};return m.width<=c.width&&m.height<=c.height?m:c}}return{width:n,height:i}}function W(o){const t=getComputedStyle(o),e=o.getBoundingClientRect();return{objectFit:t.objectFit,borderRadius:t.borderRadius,objectPosition:t.objectPosition,overflow:t.overflow,top:e.top,left:e.left,width:e.width,height:e.height,naturalWidth:o.naturalWidth,naturalHeight:o.naturalHeight}}function k(o){const t=o.imageElm?W(o.imageElm):null,e=o.anchorElm?W(o.anchorElm):null,n=w(t==null?void 0:t.borderRadius),i=e&&w(e==null?void 0:e.borderRadius),s=(i?e==null?void 0:e.borderRadius:n?t==null?void 0:t.borderRadius:"")||"";return{fit:(t==null?void 0:t.objectFit)||(e==null?void 0:e.objectFit)||"",pos:(t==null?void 0:t.objectPosition)||"",br:s,overflow:i?e.overflow:n?t.overflow:"",nw:(t==null?void 0:t.naturalWidth)||0,nh:(t==null?void 0:t.naturalHeight)||0,w:(e==null?void 0:e.width)||(t==null?void 0:t.width)||0,h:(e==null?void 0:e.height)||(t==null?void 0:t.height)||0,top:(e==null?void 0:e.top)||(t==null?void 0:t.top)||0,left:(e==null?void 0:e.left)||(t==null?void 0:t.left)||0}}function P(o,t,e,n=!1){const{fit:i,w:s,h:a,nw:r,nh:h,br:c,top:m,left:f}=k(o),$=Math.min(Math.max(f,-s),window.innerWidth+s)-window.innerWidth/2+s/2,y=Math.min(Math.max(m,-a),window.innerHeight+a)-window.innerHeight/2+a/2,d=e.style;d.width=`${s}px`,d.height=`${a}px`,d.objectFit=i,e.width=r,e.height=h,d.setProperty("--vvw-init-radius",`${c}`),d.setProperty("--vvw-pulse-radius",`calc(1.3 * ${c})`),d.setProperty("--vvw-init-x",`${$}px`),d.setProperty("--vvw-init-y",`${y}px`),n&&(d.setProperty("--vvw-current-x",`${$}px`),d.setProperty("--vvw-current-y",`${y}px`));const u=I(o.imageElm),C=Math.min(s,u.width),x=Math.min(a,u.height),p=t.style;p.setProperty("--vvw-init-radius",`${c}`),p.setProperty("--vvw-init-w",`${C}px`),p.setProperty("--vvw-init-h",`${x}px`),n&&(p.setProperty("--vvw-current-radius",`${c}`),p.setProperty("--vvw-current-w",`${C}px`),p.setProperty("--vvw-current-h",`${x}px`),t.dataset.vvwWidth=C.toString(),t.dataset.vvwHeight=x.toString())}function F(o){const t=window.innerWidth,e=window.innerHeight,n=o.naturalWidth,i=o.naturalHeight;if(!n||!i)throw new Error("Image natural dimensions are zero");if(n<t&&i<e)return{width:n,height:i};const s=n/i,a=t/e;let r,h;return s>a?(r=t,h=t/s):(h=e,r=e*s),{width:r,height:h}}function q(o,t,e){return Math.min(Math.max(o,t),e)}function L(o,t=2){const e=Math.pow(10,t);return Math.round(o*e)/e}const R='<svg viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>',O='<svg viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>',Z='<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>',X='<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>',N='<svg viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>',Y='<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>';let D=null;function B(){return D||(window.trustedTypes||(window.trustedTypes={createPolicy:(o,t)=>t}),D=window.trustedTypes.createPolicy("vistaView-policy",{createHTML:o=>o,createScript:()=>{throw new Error("Not implemented")},createScriptURL:()=>{throw new Error("Not implemented")}}),D)}function A(o){const e=B().createHTML(o),n=document.createElement("template");n.innerHTML=e;const i=n.content;return n.remove(),i}function z(){return{name:"download",icon:Y,onClick:async o=>{var s;const t=await fetch(o.src),e=await t.blob(),n=t.url,i=document.createElement("a");i.href=URL.createObjectURL(e),i.download=((s=n.split("/").pop())==null?void 0:s.split("?")[0].split("#")[0])||"download",document.body.appendChild(i),i.click(),document.body.removeChild(i)}}}function j(o){if(typeof o=="string")switch(o){case"zoomIn":return`<button aria-label="Zoom In" class="vvw-zoom-in vvw-ui">${Z}</button>`;case"zoomOut":return`<button aria-label="Zoom Out" disabled class="vvw-zoom-out vvw-ui">${X}</button>`;case"close":return`<button aria-label="Close" class="vvw-close vvw-ui">${N}</button>`;case"indexDisplay":return'<div class="vvw-index vvw-ui" aria-hidden="true"></div>';case"description":return'<div class="vvw-desc vvw-ui" role="status" aria-live="polite" aria-atomic="true"></div>';default:return""}return`<button class="vvw-ui" aria-label="${o.description||o.name}" data-vvw-control="${o.name}">${o.icon}</button>`}function V(o,t){const e=document.createElement("div");e.className="vvw-item",e.dataset.vvwPos=`${t!==void 0?t:""}`,e.dataset.vvwIdx=o.index.toString(),e.appendChild(A(`<img class="vvw-img-lo" src="${o.thumb||o.src}" alt="${o.alt||""}" />
+      <img class="vvw-img-hi" src="${o.src}" alt="${o.alt||""}" />`));const n=e.querySelector("img.vvw-img-lo"),i=e.querySelector("img.vvw-img-hi");return P(o,i,n,t===0),e}function U({controls:o}){const t=n=>n?n.map(j).join(""):"";return A(`<div class="vvw-root" id="vvw-root">
     <div class="vvw-container">
       <div class="vvw-bg"></div>
       <div class="vvw-image-container"></div>
-      <div class="vvw-top-bar vvw-ui"><div>${t(s==null?void 0:s.topLeft)}</div><div>${t(s==null?void 0:s.topCenter)}</div><div>${t(s==null?void 0:s.topRight)}</div></div>
-      <div class="vvw-bottom-bar vvw-ui"><div>${t(s==null?void 0:s.bottomLeft)}</div><div>${t(s==null?void 0:s.bottomCenter)}</div><div>${t(s==null?void 0:s.bottomRight)}</div></div>
-      <div class="vvw-prev vvw-ui"><button aria-label="Previous">${q}</button></div>
-      <div class="vvw-next vvw-ui"><button aria-label="Next">${k}</button></div>
+      <div class="vvw-top-bar"><div>${t(o==null?void 0:o.topLeft)}</div><div>${t(o==null?void 0:o.topCenter)}</div><div>${t(o==null?void 0:o.topRight)}</div></div>
+      <div class="vvw-bottom-bar"><div>${t(o==null?void 0:o.bottomLeft)}</div><div>${t(o==null?void 0:o.bottomCenter)}</div><div>${t(o==null?void 0:o.bottomRight)}</div></div>
+      <div class="vvw-prev vvw-ui"><button aria-label="Previous">${R}</button></div>
+      <div class="vvw-next vvw-ui"><button aria-label="Next">${O}</button></div>
     </div>
-    </div>`)}const T={animationDurationBase:333,zoomStep:500,maxZoomLevel:2,touchSpeedThreshold:.5,preloads:1,keyboardListeners:!0,arrowOnSmallScreens:!1,rapidLimit:222,controls:{topLeft:["indexDisplay"],topRight:["zoomIn","zoomOut",F(),"close"],bottomLeft:["description"]}};function U(s){}function V(s){const t=s.options.preloads;s.imageContainer.style.width=`${(t*2+1)*100}vw`,s.imageContainer.style.left=`-${t*100}vw`,s.imageContainer.style.display="flex",K(s)}function K(s){let t={x:0,y:0},e={x:0,y:0},i=null;s.registerPointerListener(n=>{if(!n.hasInternalExecution&&!(n.pointers.length>1)){if(n.event==="down"&&(t={x:n.pointer.x,y:n.pointer.y},e={x:n.pointer.x,y:n.pointer.y}),n.event==="move"){e={x:n.pointer.x,y:n.pointer.y};const o=e.x-t.x,a=e.y-t.y;if(!i&&Math.abs(a)>Math.abs(o)||i==="y"){const r=a/window.innerHeight*100;s.imageContainer.style.transition="none",s.imageContainer.style.transform=`translateY(${r}vh)`,i="y"}else if(!i&&Math.abs(o)>Math.abs(a)||i==="x"){const r=o/window.innerWidth*100;s.imageContainer.style.transition="none",s.imageContainer.style.transform=`translateX(${r}vw)`,i="x"}}if(n.event==="up"||n.event==="cancel"){let o=function(a){var r;(r=s.imageContainer)==null||r.addEventListener("transitionend",function h(){var c;(c=s.imageContainer)==null||c.removeEventListener("transitionend",h),s.imageContainer.style.transition="",s.imageContainer.style.transform=""}),s.imageContainer.style.transition="transform 222ms ease",s.imageContainer.style.transform=a};if(i==="y"){const a=e.y-t.y,r=n.pointer.movementY,h=8;s.imageContainer.style.transition="",a>0&&Math.abs(r)>h||a<0&&Math.abs(r)>h?(s.imageContainer.style.transition="transform 222ms ease",s.imageContainer.style.transform="translateY(0vh)",s.close()):o("translateY(0vh)")}if(i==="x"){const a=e.x-t.x,r=n.pointer.movementX,h=8;s.imageContainer.style.transition="",a>0&&Math.abs(r)>h?s.prev():a<0&&Math.abs(r)>h?s.next():o("translateX(0vw)")}i=null,t={x:0,y:0},e={x:0,y:0}}}})}function _(s){}async function G({vistaView:{isReducedMotion:s},htmlElements:{to:t},index:{from:e,to:i},vistaView:{elements:n,imageContainer:o,options:a}},r){if(!t||r.aborted||s||!(Math.abs(i-e)===1||e===0&&i===n.length-1||e===n.length-1&&i===0))return;const c=Math.round(a.animationDurationBase*100)/100;return new Promise(m=>{o.addEventListener("transitionend",()=>{m(()=>{o.style.transition="",o.style.transform=""})},{once:!0});const f=i===e+1||e===n.length-1&&i===0?"translateX(-100vw)":"translateX(100vw)";o.style.transition=`transform ${c}ms ease`,o.style.transform=f})}class J{constructor({elm:t,listeners:e}){l(this,"pointers",[]);l(this,"elm");l(this,"listeners",[]);l(this,"lastPointerDownId",null);l(this,"removeLastPointer",()=>{if(this.pointers.length&&this.lastPointerDownId!==null){const t=this.pointers.findIndex(e=>e.id===this.lastPointerDownId);t!==-1&&this.pointers.splice(t,1)}});l(this,"onPointerDown",t=>{if(!this.listeners.length||t.button!==0)return;t.preventDefault(),this.lastPointerDownId=t.pointerId,window.addEventListener("contextmenu",this.removeLastPointer,{once:!0}),window.addEventListener("auxclick",this.removeLastPointer,{once:!0});let e={x:t.clientX,y:t.clientY,movementX:0,movementY:0,id:t.pointerId};this.pointers.push(e),this.listeners.forEach(i=>i({event:"down",pointer:e,pointers:this.pointers,lastPointerLen:this.pointers.length-1}))});l(this,"onPointerMove",t=>{if(!this.listeners.length)return;t.preventDefault();const e=this.pointers.find(i=>i.id===t.pointerId);e&&(e.movementX=t.movementX,e.movementY=t.movementY,e.x=t.clientX,e.y=t.clientY,this.listeners.forEach(i=>i({event:"move",pointer:e,pointers:this.pointers,lastPointerLen:this.pointers.length-1})))});l(this,"onPointerUp",t=>{if(!this.listeners.length||t.button!==0||(window.removeEventListener("contextmenu",this.removeLastPointer),window.removeEventListener("auxclick",this.removeLastPointer),t.target instanceof Node&&!this.elm.contains(t.target)&&t.target!==document.querySelector("html")&&t.target!==document))return;t.preventDefault();const e=this.pointers.findIndex(o=>o.id===t.pointerId);if(e===-1)return;const i=this.pointers[e];i.x=t.clientX,i.y=t.clientY;const n=this.pointers.length;this.pointers.splice(e,1),this.listeners.forEach(o=>o({event:"up",pointer:i,pointers:this.pointers,lastPointerLen:n}))});l(this,"onPointerCancel",t=>{if(!this.listeners.length||t.target instanceof Node&&!this.elm.contains(t.target)&&t.target!==document.querySelector("html")&&t.target!==document)return;t.preventDefault();const e=this.pointers.findIndex(o=>o.id===t.pointerId);if(e===-1)return;const i=this.pointers[e];i.x=t.clientX,i.y=t.clientY;const n=this.pointers.length;this.pointers.splice(e,1),this.listeners.forEach(o=>o({event:"cancel",pointer:i,pointers:this.pointers,lastPointerLen:n}))});this.elm=t??document,e&&(this.listeners=e),this.startListeners()}startListeners(){this.elm.addEventListener("pointerdown",this.onPointerDown),this.elm.addEventListener("pointermove",this.onPointerMove),document.addEventListener("pointerup",this.onPointerUp),document.addEventListener("pointercancel",this.onPointerCancel)}removeListeners(){this.elm.removeEventListener("pointerdown",this.onPointerDown),this.elm.removeEventListener("pointermove",this.onPointerMove),document.removeEventListener("pointerup",this.onPointerUp),document.removeEventListener("pointercancel",this.onPointerCancel),this.pointers=[]}addEventListener(t){this.listeners.push(t)}removeEventListener(t){this.listeners=this.listeners.filter(e=>e!==t)}getPointerDistance(t,e){const i=t.x-e.x,n=t.y-e.y;return Math.sqrt(i*i+n*n)}getCentroid(){if(this.pointers.length===0)return null;const t=this.pointers.reduce((e,i)=>(e.x+=i.x,e.y+=i.y,e),{x:0,y:0});return{x:t.x/this.pointers.length,y:t.y/this.pointers.length}}}class Q{constructor(t,e){l(this,"maxZoomLevel");l(this,"image",null);l(this,"rect",null);l(this,"initialCenter",{x:0,y:0});l(this,"maxDimension",{width:0});l(this,"minDimension",{initialWidth:0,initialHeight:0,minWidth:0,closingWidth:0});l(this,"accumulatedTranslate",{x:0,y:0});l(this,"scale",1);l(this,"translate",{x:0,y:0});l(this,"onScale",null);l(this,"animationTimestamp",0);this.maxZoomLevel=t,this.onScale=e}clean(){this.image&&(this.image.style.transform="",this.image.style.width="",this.image.style.height="",this.image.style.top="",this.image.style.left="",this.image.style.opacity="")}reset(){this.clean(),this.image=null,this.rect=null,this.initialCenter={x:window.innerWidth/2,y:window.innerHeight/2},this.maxDimension={width:0},this.minDimension={initialWidth:0,initialHeight:0,minWidth:0,closingWidth:0},this.accumulatedTranslate={x:0,y:0},this.scale=1,this.translate={x:0,y:0}}setCurrentImage(t){if(this.rect=null,this.image=t,this.maxDimension={width:t.naturalWidth*this.maxZoomLevel},!t.dataset.vvwWidth||!t.dataset.vvwHeight)throw new Error("VistaImageState: Image dataset vvwWidth or vvwHeight not set.");const e=parseFloat(t.dataset.vvwWidth),i=parseFloat(t.dataset.vvwHeight);this.minDimension={initialWidth:e,initialHeight:i,minWidth:e*.1,closingWidth:e*.5},this.accumulatedTranslate={x:0,y:0}}setInitialCenter(t){this.initialCenter=t||{x:window.innerWidth/2,y:window.innerHeight/2}}move(t){this.image&&(this.rect||(this.rect=this.image.getBoundingClientRect()),this.translate.x=L(t.x-this.initialCenter.x),this.translate.y=L(t.y-this.initialCenter.y),this.image.style.transform=`translate3d(${this.translate.x}px, ${this.translate.y}px, 0px) scale(${this.scale})`)}snapToTargetIfClose(t,e,i=1){return Math.abs(t-e)<=i&&(t=e),t}scaleMove(t,e){if(!this.image)return;this.rect||(this.rect=this.image.getBoundingClientRect()),e||(e=this.initialCenter);const i=this.snapToTargetIfClose(z(this.rect.width*t,this.minDimension.minWidth,this.maxDimension.width),this.minDimension.initialWidth);this.onScale&&this.onScale({scale:i/(this.maxDimension.width/this.maxZoomLevel),isMax:i>=this.maxDimension.width,isMin:i<=this.minDimension.initialWidth}),this.scale=L(i/this.rect.width);const n=this.rect.left+this.rect.width/2,o=this.rect.top+this.rect.height/2,a=this.initialCenter.x-n,r=this.initialCenter.y-o,h=a*(1-this.scale),c=r*(1-this.scale),m=e.x-this.initialCenter.x,f=e.y-this.initialCenter.y;this.translate.x=L(h+m),this.translate.y=L(c+f),this.image.style.transform=`translate3d(${this.translate.x}px, ${this.translate.y}px, 0px) scale(${this.scale})`,i<=this.minDimension.closingWidth?this.image.style.opacity="0.5":this.image.style.opacity=""}moveAndNormalize(t){let e=0,i=!1;const n=({x:o,y:a})=>{if(i)return;if(Math.abs(o)<.001&&Math.abs(a)<.001)return this.normalize();o*=.9,a*=.9;const r=this.image.getBoundingClientRect();this.translate.x=L(this.translate.x+o),this.translate.y=L(this.translate.y+a),r.right<window.innerWidth/2&&(this.translate.x+=(window.innerWidth/2-r.right)*.1,o*=.7),r.left>window.innerWidth/2&&(this.translate.x-=(r.left-window.innerWidth/2)*.1,o*=.7),r.bottom<window.innerHeight/2&&(this.translate.y+=(window.innerHeight/2-r.bottom)*.1,a*=.7),r.top>window.innerHeight/2&&(this.translate.y-=(r.top-window.innerHeight/2)*.1,a*=.7),this.image.style.transform=`translate3d(${this.translate.x}px, ${this.translate.y}px, 0px) scale(${this.scale})`,e=requestAnimationFrame(()=>n({x:o,y:a}))};return n({x:t.movementX,y:t.movementY}),()=>{i=!0,cancelAnimationFrame(e),this.normalize(!1)}}animateZoom(t){if(!this.image)return;this.rect||(this.rect=this.image.getBoundingClientRect());const e=Date.now(),i=this.image;this.rect.width*t<this.minDimension.closingWidth||i.width<Math.floor(this.minDimension.initialWidth)||(i.addEventListener("transitionend",()=>{this.animationTimestamp===e&&i&&(i.style.transition="",this.normalize())},{once:!0}),i.style.transition||(i.style.transition="all 222ms ease"),this.animationTimestamp=e,this.scaleMove(t))}normalize(t=!0){if(!this.image||!this.rect)return;const e=this.snapToTargetIfClose(this.rect.width*this.scale,this.minDimension.initialWidth),i=this.snapToTargetIfClose(this.rect.height*this.scale,this.minDimension.initialHeight);if(this.image.style.width=`${e}px`,this.image.style.height=`${i}px`,this.scale=1,this.image.style.opacity="",this.accumulatedTranslate.x+=this.translate.x,this.accumulatedTranslate.y+=this.translate.y,this.image.style.left=`calc(50% + ${this.accumulatedTranslate.x}px)`,this.image.style.top=`calc(50% + ${this.accumulatedTranslate.y}px)`,this.translate={x:0,y:0},this.image.style.transform="",this.rect=this.image.getBoundingClientRect(),e<=this.minDimension.closingWidth)return this.clean(),!0;if(e<this.minDimension.initialWidth)this.accumulatedTranslate.x=0,this.accumulatedTranslate.y=0,requestAnimationFrame(()=>{const n=this.image;n&&(n.addEventListener("transitionend",()=>{n&&(this.clean(),this.rect=null)},{once:!0}),n.style.transition="all 222ms ease",n.style.width=`${this.minDimension.initialWidth}px`,n.style.height=`${this.minDimension.initialHeight}px`,n.style.left="50%",n.style.top="50%")});else if(t){let n=!1;if(this.rect.right<window.innerWidth/2&&(n=!0,this.accumulatedTranslate.x+=window.innerWidth/2-this.rect.right),this.rect.left>window.innerWidth/2&&(n=!0,this.accumulatedTranslate.x-=this.rect.left-window.innerWidth/2),this.rect.bottom<window.innerHeight/2&&(n=!0,this.accumulatedTranslate.y+=window.innerHeight/2-this.rect.bottom),this.rect.top>window.innerHeight/2&&(n=!0,this.accumulatedTranslate.y-=this.rect.top-window.innerHeight/2),n){const o=this.image;o.addEventListener("transitionend",()=>{o&&(o.style.transition="",this.rect=null)},{once:!0}),o.style.transition="all 222ms ease",o.style.left=`calc(50% + ${this.accumulatedTranslate.x}px)`,o.style.top=`calc(50% + ${this.accumulatedTranslate.y}px)`}else this.rect=null}}}class tt{constructor(){l(this,"fiolast",{})}fio(t,e,i=50){const o=Date.now()-(this.fiolast[e]??0),a=()=>{this.fiolast[e]=Date.now(),t()};if(!this.fiolast[e]){a();return}o>=i&&a()}}const C={somethingOpened:null};class et{constructor(t,e={}){l(this,"options");l(this,"elements");l(this,"isReducedMotion");l(this,"currentIndex",-1);l(this,"currentChildren",null);l(this,"setupFunction",U);l(this,"initFunction",V);l(this,"closeFunction",_);l(this,"transitionFunction",G);l(this,"pointers",null);l(this,"imageState");l(this,"root",null);l(this,"imageContainer",null);l(this,"onClickElements",t=>{t.preventDefault();const e=t.currentTarget;e.dataset.vistaIdx&&this.open(parseInt(e.dataset.vistaIdx))});l(this,"defaultOnClickHandler",t=>t.preventDefault());l(this,"abortController",null);l(this,"throttle",new tt);l(this,"lastSwapTime",0);l(this,"isZoomedIn",!1);l(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}});l(this,"onScroll",t=>{t.preventDefault();const e=t.deltaY;this.imageState.setInitialCenter({x:t.clientX,y:t.clientY}),e<0?this.zoomIn():e>0&&this.zoomOut()});l(this,"onResizeHandler",()=>{this.currentChildren.htmls.forEach((t,e)=>{const i=this.currentChildren.images[e],n=t.querySelector("img.vvw-img-hi"),o=t.querySelector("img.vvw-img-lo");if(M(i,n,o,!1),n.classList.contains("vvw--loaded")){const{width:a,height:r}=W(n);n.style.setProperty("--vvw-current-w",`${a}px`),n.style.setProperty("--vvw-current-h",`${r}px`),n.dataset.vvwWidth=a.toString(),n.dataset.vvwHeight=r.toString()}})});l(this,"pointerListeners",[]);l(this,"getInternalPointerListener",()=>{const t=this.imageState;let e=0,i=!1,n=()=>{};return o=>{if(o.event==="down"){if(n(),this.isZoomedIn&&o.pointers.length===1){const a=this.pointers.getCentroid();t.setInitialCenter(a)}if(o.pointers.length>=2){i=!0;const a=this.pointers.getCentroid();e=this.pointers.getPointerDistance(o.pointers[0],o.pointers[1]),t.setInitialCenter(a)}}else if(o.event==="move"){if(this.isZoomedIn&&o.pointers.length===1&&o.lastPointerLen===0){const a=this.pointers.getCentroid();t.move(a)}if(o.pointers.length>=2&&i){const a=this.pointers.getCentroid(),r=this.pointers.getPointerDistance(o.pointers[0],o.pointers[1]);t.scaleMove(r/e,a)}}else(o.event==="up"||o.event==="cancel")&&(i||this.isZoomedIn)&&(i?(i=!1,t.normalize()&&requestAnimationFrame(()=>{this.close()})):this.isZoomedIn&&o.pointers.length===0&&(n=t.moveAndNormalize(o.pointer)));this.pointerListeners.forEach(a=>a({...o,hasInternalExecution:this.isZoomedIn||i}))}});this.elements=t,this.options={...T,...e,controls:{...T.controls,...e.controls}},this.imageState=new Q(this.options.maxZoomLevel,i=>{var n,o,a,r,h,c;i.isMin?(this.isZoomedIn=!1,(n=this.qs(".vvw-zoom-out"))==null||n.setAttribute("disabled","true"),(o=this.qs('.vvw-item[data-vvw-idx="'+this.currentIndex+'"]'))==null||o.style.setProperty("pointer-events","none")):(this.isZoomedIn=!0,(a=this.qs(".vvw-zoom-out"))==null||a.removeAttribute("disabled"),(r=this.qs('.vvw-item[data-vvw-idx="'+this.currentIndex+'"]'))==null||r.style.setProperty("pointer-events","auto")),i.isMax?(h=this.qs(".vvw-zoom-in"))==null||h.setAttribute("disabled","true"):(c=this.qs(".vvw-zoom-in"))==null||c.removeAttribute("disabled")}),this.options.setupFunction&&(this.setupFunction=this.options.setupFunction),this.options.closeFunction&&(this.closeFunction=this.options.closeFunction),this.options.initFunction&&(this.initFunction=this.options.initFunction),this.options.transitionFunction&&(this.transitionFunction=this.options.transitionFunction),this.isReducedMotion=window.matchMedia("(prefers-reduced-motion: reduce)").matches,this.elements instanceof NodeList&&this.elements.forEach((i,n)=>{i.dataset.vistaIdx=n.toString(),i.addEventListener("click",this.defaultOnClickHandler),i.addEventListener("pointerup",this.onClickElements)})}qs(t){return this.root?this.root.querySelector(t):null}async swap(t,e){const i=this.options.preloads||0,n=this.currentIndex,{htmls:o,images:a}=this.getChildElements(i,n),r=this.imageContainer,h=this.currentChildren,c={htmlElements:{from:h.htmls,to:o},images:{from:h.images,to:a},index:{from:t,to:this.currentIndex},via:e||{next:!1,prev:!1},vistaView:this};this.setupFunction(c),this.currentChildren={htmls:o,images:a},this.displayActiveIndex();const m=this.abortController.signal,f=performance.now(),E=f-this.lastSwapTime<this.options.rapidLimit;let y=null;E||(y=await this.transitionFunction(c,m)),this.lastSwapTime=f;const d=o[Math.floor(o.length/2)].dataset.vvwIdx,g=r.querySelector(`.vvw-item[data-vvw-idx="${d}"] img.vvw-img-hi`),p=g.getAttribute("style")||"",x=g.classList.contains("vvw--loaded"),u=g.width,I=g.height;this.imageState.reset(),r.innerHTML="",y instanceof Function&&y(),o.forEach(D=>{const b=D.querySelector("img.vvw-img-hi");D.dataset.vvwPos==="0"&&!m.aborted&&p&&x&&u&&I&&(b.classList.add("vvw--loaded"),b.classList.add("vvw--ready"),b.setAttribute("style",p),b.width=u,b.height=I,b.dataset.vvwWidth=u.toString(),b.dataset.vvwHeight=I.toString()),r.appendChild(D),b.classList.contains("vvw--ready")&&(this.imageState.setCurrentImage(b),this.imageState.setInitialCenter())}),this.waitForImagesToLoad(),this.options.onImageView&&this.options.onImageView(c)}getChildElements(t,e){const i=[],n=[];for(let o=-t;o<=t;o++){const a=(e+o+this.elements.length)%this.elements.length,r=this.elements[a],h=r instanceof HTMLImageElement?r:r instanceof HTMLAnchorElement&&r.querySelector("img")||void 0,c=r instanceof HTMLElement?{index:a,imageElm:h instanceof HTMLImageElement?h:void 0,anchorElm:r instanceof HTMLAnchorElement?r:void 0,src:r.dataset.vistaviewSrc||r.getAttribute("href")||r.getAttribute("src")||"",thumb:r.dataset.vistaviewThumb||(h instanceof HTMLImageElement?h.getAttribute("src"):void 0)||r.getAttribute("href")||void 0,alt:h instanceof HTMLImageElement&&h.getAttribute("alt")||void 0}:{index:a,...r};n.push(c),i.push(B(c,o))}return{htmls:i,images:n}}zoomIn(){this.throttle.fio(()=>{this.imageState.animateZoom(1.68)},"zoom",222)}zoomOut(){this.throttle.fio(()=>{this.imageState.animateZoom(.68)},"zoom",222)}displayActiveIndex(){var a;const t=this.currentIndex;this.elements instanceof NodeList&&this.elements.forEach((r,h)=>{r.style.opacity="",h===t&&(r.style.opacity="0")});const e=this.qs(".vvw-index"),i=`${t+1}`,n=`${this.elements.length}`;e&&(e.textContent=`${i} / ${n}`);const o=this.qs(".vvw-desc");if(o){const r=(a=this.currentChildren)==null?void 0:a.images.find(c=>c.index===t),h=(r==null?void 0:r.alt)||"";h?(o.textContent=h,o.setAttribute("aria-label",`Image ${i} of ${n}: ${h}`)):(o.textContent="",o.setAttribute("aria-label",`Image ${i} of ${n}`))}}waitForImagesToLoad(){this.imageContainer.querySelectorAll("img.vvw-img-hi:not(.vvw--loaded)").forEach(i=>{const n=i,o=()=>{var r;n.width=n.naturalWidth,n.height=n.naturalHeight;const a=(r=n.parentElement)==null?void 0:r.matches(`[data-vvw-idx="${this.currentIndex}"]`);n.addEventListener("transitionend",()=>{a&&(this.imageState.setCurrentImage(n),this.imageState.setInitialCenter()),n.classList.add("vvw--ready")},{once:!0}),n.classList.add("vvw--loaded"),requestAnimationFrame(()=>{const{width:h,height:c}=W(n);n.style.setProperty("--vvw-current-w",`${h}px`),n.style.setProperty("--vvw-current-h",`${c}px`),n.dataset.vvwWidth=h.toString(),n.dataset.vvwHeight=c.toString(),n.style.setProperty("--vvw-current-radius","0px")})};if(n.complete&&n.naturalWidth!==0){o();return}n.addEventListener("load",()=>{o()}),n.addEventListener("error",()=>{var r;n.classList.add("vvw--loaderror");const a=document.createElement("p");a.className="vvw-img-err",a.setAttribute("role","alert"),a.textContent="Error loading image",(r=n.parentNode)==null||r.appendChild(a)})})}registerPointerListener(t){this.pointerListeners.push(t)}unregisterPointerListeners(){this.pointerListeners=[]}open(t=0){var c,m,f,E,y;if(C.somethingOpened)return;C.somethingOpened=this,this.currentIndex=t,document.body.style.overflow="hidden";const e=j({controls:this.options.controls});if(document.body.prepend(e),this.root=document.body.querySelector("#vvw-root"),!this.root)throw new Error("Failed to setup VistaView root element.");this.imageContainer=this.qs(".vvw-image-container"),this.options.animationDurationBase&&this.root.style.setProperty("--vvw-anim-dur",`${this.options.animationDurationBase}`),this.options.initialZIndex!==void 0&&this.root.style.setProperty("--vvw-init-z",`${this.options.initialZIndex}`);const i=this.options.preloads||0,n=t,{images:o,htmls:a}=this.getChildElements(i,n),r={htmlElements:{from:null,to:a},images:{from:null,to:o},index:{from:null,to:this.currentIndex},via:{next:!1,prev:!1},vistaView:this};this.setupFunction(r),this.currentChildren={htmls:a,images:o},a.forEach(d=>{this.imageContainer.appendChild(d)}),(c=this.qs(".vvw-close"))==null||c.addEventListener("click",()=>this.close()),(m=this.qs(".vvw-zoom-in"))==null||m.addEventListener("click",()=>this.zoomIn()),(f=this.qs(".vvw-zoom-out"))==null||f.addEventListener("click",()=>this.zoomOut()),(E=this.qs(".vvw-prev>button"))==null||E.addEventListener("click",()=>this.prev()),(y=this.qs(".vvw-next>button"))==null||y.addEventListener("click",()=>this.next()),window.addEventListener("keydown",this.onKeyDown),window.addEventListener("wheel",this.onScroll,{passive:!1}),window.addEventListener("resize",this.onResizeHandler),this.pointers=new J({elm:this.imageContainer,listeners:[this.getInternalPointerListener()]});const h={};[...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(d=>{typeof d!="string"&&(h[d.name]=d)}),this.root.querySelectorAll("button[data-vvw-control]").forEach(d=>{const g=d;g.addEventListener("click",p=>{const x=p.currentTarget.dataset.vvwControl,u=h[x],I=this.currentChildren.images.find(D=>D.index===this.currentIndex);u&&I&&(u.onClick.constructor.name==="AsyncFunction"?(g.classList.add("vvw--loading"),u.onClick(I,this).finally(()=>{g.classList.remove("vvw--loading")})):u.onClick(I,this))})}),this.initFunction(this),requestAnimationFrame(()=>{var d;(d=this.root)==null||d.addEventListener("transitionend",()=>{var g,p;(g=this.root)==null||g.classList.add("vvw--settled"),this.waitForImagesToLoad(),(p=this.qs(".vvw-bg"))==null||p.addEventListener("click",x=>{x.preventDefault(),this.close()}),this.imageState.reset()},{once:!0}),this.root.classList.add("vvw--active"),this.displayActiveIndex(),this.options.onOpen&&this.options.onOpen(this),this.options.onImageView&&this.options.onImageView(r)})}async close(t=!0){C.somethingOpened===this&&this.root&&(t?await new Promise(e=>{let n=0;this.root.addEventListener("transitionend",o=>{o.target===this.root&&(n++,n===2&&this.elements instanceof NodeList&&this.elements.forEach(a=>{a.style.opacity=""}),n===3&&e(null))}),this.root.classList.add("vvw--closing")}):this.elements instanceof NodeList&&this.elements.forEach(e=>{e.style.opacity=""}),window.removeEventListener("keydown",this.onKeyDown),window.removeEventListener("resize",this.onResizeHandler),window.removeEventListener("wheel",this.onScroll),this.unregisterPointerListeners(),this.pointers.removeListeners(),this.root.remove(),this.root=null,this.imageContainer=null,this.currentChildren=null,this.currentIndex=-1,document.body.style.overflow="",C.somethingOpened=null,this.closeFunction(this),this.options.onClose&&this.options.onClose(this))}next(){if(C.somethingOpened!==this)return;const t=(this.currentIndex+1)%this.elements.length;this.view(t,{next:!0,prev:!1})}prev(){if(C.somethingOpened!==this)return;const t=(this.currentIndex-1+this.elements.length)%this.elements.length;this.view(t,{next:!1,prev:!0})}destroy(){this.close(!1),this.elements instanceof NodeList&&this.elements.forEach(t=>{t.removeAttribute("data-vista-idx"),t.removeEventListener("click",this.defaultOnClickHandler),t.removeEventListener("pointerup",this.onClickElements)})}getCurrentIndex(){return C.somethingOpened!==this?-1:this.currentIndex}view(t,e){if(C.somethingOpened!==this||t<0||t>=this.elements.length)return;const i=this.currentIndex;this.currentIndex=t;const n=this.abortController;n==null||n.abort(),this.abortController=new AbortController,this.swap(i,e)}}function it(s){let t=null;if(typeof s=="string"?t=document.querySelectorAll(s):s instanceof NodeList&&(t=s),t)for(let e=0;e<t.length;e++){const i=t[e];if(!(i.dataset.vistaviewSrc||i.getAttribute("href")||i.getAttribute("src")||""))return`Element at index ${e} is missing 'src' / 'data-vistaview-src' / 'href' attribute.`}else{const e=s;for(let i=0;i<e.length;i++)if(!e[i].src)return`Element at index ${i} is missing 'src' attribute.`}return t||s}function nt({elements:s,...t}){if(!s)throw new Error("No elements");let e=it(s);if(typeof e=="string")return null;const i=new et(e,t);return{open:(n=0)=>i.open(n),close:()=>i.close(),next:()=>i.next(),prev:()=>i.prev(),destroy:()=>i.destroy(),getCurrentIndex:()=>i.getCurrentIndex(),view:n=>{i.view(n)}}}v.DefaultOptions=T,v.vistaView=nt,v.vistaViewDownload=F,Object.defineProperty(v,Symbol.toStringTag,{value:"Module"})}));
+    </div>`)}const M={animationDurationBase:333,maxZoomLevel:2,preloads:1,keyboardListeners:!0,arrowOnSmallScreens:!1,rapidLimit:222,controls:{topLeft:["indexDisplay"],topRight:["zoomIn","zoomOut",z(),"close"],bottomLeft:["description"]}};function K(o){}function _(o){const t=o.options.preloads;o.imageContainer.style.width=`${(t*2+1)*100}vw`,o.imageContainer.style.left=`-${t*100}vw`,o.imageContainer.style.display="flex",G(o)}function G(o){let t={x:0,y:0},e={x:0,y:0},n=null;o.registerPointerListener(i=>{var s;if(!i.hasInternalExecution&&!(i.pointers.length>1)){if(i.event==="down"&&(t={x:i.pointer.x,y:i.pointer.y},e={x:i.pointer.x,y:i.pointer.y},(s=i.abortController)==null||s.abort()),i.event==="move"){e={x:i.pointer.x,y:i.pointer.y};const a=e.x-t.x,r=e.y-t.y;if(!n&&Math.abs(r)>Math.abs(a)||n==="y"){const h=r/window.innerHeight*100;o.imageContainer.style.transition="none",o.imageContainer.style.transform=`translateY(${h}vh)`,n="y"}else if(!n&&Math.abs(a)>Math.abs(r)||n==="x"){const h=a/window.innerWidth*100;o.imageContainer.style.transition="none",o.imageContainer.style.transform=`translateX(${h}vw)`,n="x"}}if(i.event==="up"||i.event==="cancel"){let a=function(r){var h;(h=o.imageContainer)==null||h.addEventListener("transitionend",function c(){var m;(m=o.imageContainer)==null||m.removeEventListener("transitionend",c),o.imageContainer.style.transition="",o.imageContainer.style.transform=""}),o.imageContainer.style.transition="transform 222ms ease",o.imageContainer.style.transform=r};if(n==="y"){const r=e.y-t.y;Math.abs(r)>144?(o.imageContainer.style.transition="transform 222ms ease",o.imageContainer.style.transform="translateY(0vh)",o.close()):a("translateY(0vh)")}if(n==="x"){const r=e.x-t.x,h=i.pointer.movementX,c=1;o.imageContainer.style.transition="",r>0&&Math.abs(h)>c?o.prev():r<0&&Math.abs(h)>c?o.next():a("translateX(0vw)")}n=null,t={x:0,y:0},e={x:0,y:0}}}})}function J(o){}function Q({vistaView:{isReducedMotion:o},htmlElements:{to:t},index:{from:e,to:n},vistaView:{elements:i,imageContainer:s,options:a}},r){if(!(!t||r.aborted||o||!(Math.abs(n-e)===1||e===0&&n===i.length-1||e===i.length-1&&n===0)))return{cleanup:()=>{s.style.transition="",s.style.transform=""},transitionEnded:new Promise(c=>{s.addEventListener("transitionend",()=>{c()},{once:!0}),s.addEventListener("transitioncancel",()=>{r.aborted&&c()},{once:!0});const m=Math.round(a.animationDurationBase*100)/100,f=n===e+1||e===i.length-1&&n===0?"translateX(-100vw)":"translateX(100vw)";s.style.transition=`transform ${m}ms ease`,s.style.transform=f})}}class tt{constructor({elm:t,listeners:e}){l(this,"pointers",[]);l(this,"elm");l(this,"listeners",[]);l(this,"lastPointerDownId",null);l(this,"removeLastPointer",()=>{if(this.pointers.length&&this.lastPointerDownId!==null){const t=this.pointers.findIndex(e=>e.id===this.lastPointerDownId);t!==-1&&this.pointers.splice(t,1)}});l(this,"onPointerDown",t=>{if(!this.listeners.length||t.button!==0)return;t.preventDefault(),this.lastPointerDownId=t.pointerId,window.addEventListener("contextmenu",this.removeLastPointer,{once:!0}),window.addEventListener("auxclick",this.removeLastPointer,{once:!0});let e={x:t.clientX,y:t.clientY,movementX:0,movementY:0,id:t.pointerId};this.pointers.push(e),this.listeners.forEach(n=>n({event:"down",pointer:e,pointers:this.pointers,lastPointerLen:this.pointers.length-1}))});l(this,"onPointerMove",t=>{if(!this.listeners.length)return;t.preventDefault();const e=this.pointers.find(n=>n.id===t.pointerId);e&&(e.movementX=t.movementX,e.movementY=t.movementY,e.x=t.clientX,e.y=t.clientY,this.listeners.forEach(n=>n({event:"move",pointer:e,pointers:this.pointers,lastPointerLen:this.pointers.length-1})))});l(this,"onPointerUp",t=>{if(!this.listeners.length||t.button!==0||(window.removeEventListener("contextmenu",this.removeLastPointer),window.removeEventListener("auxclick",this.removeLastPointer),t.target instanceof Node&&!this.elm.contains(t.target)&&t.target!==document.querySelector("html")&&t.target!==document))return;t.preventDefault();const e=this.pointers.findIndex(s=>s.id===t.pointerId);if(e===-1)return;const n=this.pointers[e];n.x=t.clientX,n.y=t.clientY;const i=this.pointers.length;this.pointers.splice(e,1),this.listeners.forEach(s=>s({event:"up",pointer:n,pointers:this.pointers,lastPointerLen:i}))});l(this,"onPointerCancel",t=>{if(!this.listeners.length||t.target instanceof Node&&!this.elm.contains(t.target)&&t.target!==document.querySelector("html")&&t.target!==document)return;t.preventDefault();const e=this.pointers.findIndex(s=>s.id===t.pointerId);if(e===-1)return;const n=this.pointers[e];n.x=t.clientX,n.y=t.clientY;const i=this.pointers.length;this.pointers.splice(e,1),this.listeners.forEach(s=>s({event:"cancel",pointer:n,pointers:this.pointers,lastPointerLen:i}))});this.elm=t??document,e&&(this.listeners=e),this.startListeners()}startListeners(){this.elm.addEventListener("pointerdown",this.onPointerDown),this.elm.addEventListener("pointermove",this.onPointerMove),document.addEventListener("pointerup",this.onPointerUp),document.addEventListener("pointercancel",this.onPointerCancel)}removeListeners(){this.elm.removeEventListener("pointerdown",this.onPointerDown),this.elm.removeEventListener("pointermove",this.onPointerMove),document.removeEventListener("pointerup",this.onPointerUp),document.removeEventListener("pointercancel",this.onPointerCancel),this.pointers=[]}addEventListener(t){this.listeners.push(t)}removeEventListener(t){this.listeners=this.listeners.filter(e=>e!==t)}getPointerDistance(t,e){const n=t.x-e.x,i=t.y-e.y;return Math.sqrt(n*n+i*i)}getCentroid(){if(this.pointers.length===0)return null;const t=this.pointers.reduce((e,n)=>(e.x+=n.x,e.y+=n.y,e),{x:0,y:0});return{x:t.x/this.pointers.length,y:t.y/this.pointers.length}}}class et{constructor(t,e){l(this,"maxZoomLevel");l(this,"image",null);l(this,"rect",null);l(this,"initialCenter",{x:0,y:0});l(this,"maxDimension",{width:0});l(this,"minDimension",{initialWidth:0,initialHeight:0,minWidth:0,closingWidth:0});l(this,"accumulatedTranslate",{x:0,y:0});l(this,"scale",1);l(this,"translate",{x:0,y:0});l(this,"onScale",null);l(this,"animationTimestamp",0);this.maxZoomLevel=t,this.onScale=e}clean(){this.image&&(this.image.style.transform="",this.image.style.width="",this.image.style.height="",this.image.style.top="",this.image.style.left="",this.image.style.opacity="")}reset(){this.clean(),this.image=null,this.rect=null,this.initialCenter={x:window.innerWidth/2,y:window.innerHeight/2},this.maxDimension={width:0},this.minDimension={initialWidth:0,initialHeight:0,minWidth:0,closingWidth:0},this.accumulatedTranslate={x:0,y:0},this.scale=1,this.translate={x:0,y:0}}setCurrentImage(t){if(this.rect=null,this.image=t,this.maxDimension={width:t.naturalWidth*this.maxZoomLevel},!t.dataset.vvwWidth||!t.dataset.vvwHeight)throw new Error("VistaImageState: Image dataset vvwWidth or vvwHeight not set.");const e=parseFloat(t.dataset.vvwWidth),n=parseFloat(t.dataset.vvwHeight);this.minDimension={initialWidth:e,initialHeight:n,minWidth:e*.1,closingWidth:e*.5},this.accumulatedTranslate={x:0,y:0}}setInitialCenter(t){this.initialCenter=t||{x:window.innerWidth/2,y:window.innerHeight/2}}move(t){this.image&&(this.rect||(this.rect=this.image.getBoundingClientRect()),this.translate.x=L(t.x-this.initialCenter.x),this.translate.y=L(t.y-this.initialCenter.y),this.image.style.transform=`translate3d(${this.translate.x}px, ${this.translate.y}px, 0px) scale(${this.scale})`)}snapToTargetIfClose(t,e,n=1){return Math.abs(t-e)<=n&&(t=e),t}scaleMove(t,e){if(!this.image)return;this.rect||(this.rect=this.image.getBoundingClientRect()),e||(e=this.initialCenter);const n=this.snapToTargetIfClose(q(this.rect.width*t,this.minDimension.minWidth,this.maxDimension.width),this.minDimension.initialWidth);this.onScale&&this.onScale({scale:n/(this.maxDimension.width/this.maxZoomLevel),isMax:n>=this.maxDimension.width,isMin:n<=this.minDimension.initialWidth}),this.scale=L(n/this.rect.width);const i=this.rect.left+this.rect.width/2,s=this.rect.top+this.rect.height/2,a=this.initialCenter.x-i,r=this.initialCenter.y-s,h=a*(1-this.scale),c=r*(1-this.scale),m=e.x-this.initialCenter.x,f=e.y-this.initialCenter.y;this.translate.x=L(h+m),this.translate.y=L(c+f),this.image.style.transform=`translate3d(${this.translate.x}px, ${this.translate.y}px, 0px) scale(${this.scale})`,n<=this.minDimension.closingWidth?this.image.style.opacity="0.5":this.image.style.opacity=""}moveAndNormalize(t){let e=0,n=!1;const i=({x:s,y:a})=>{if(n)return;if(Math.abs(s)<.001&&Math.abs(a)<.001)return this.normalize();s*=.9,a*=.9;const r=this.image.getBoundingClientRect();this.translate.x=L(this.translate.x+s),this.translate.y=L(this.translate.y+a),r.right<window.innerWidth/2&&(this.translate.x+=(window.innerWidth/2-r.right)*.1,s*=.7),r.left>window.innerWidth/2&&(this.translate.x-=(r.left-window.innerWidth/2)*.1,s*=.7),r.bottom<window.innerHeight/2&&(this.translate.y+=(window.innerHeight/2-r.bottom)*.1,a*=.7),r.top>window.innerHeight/2&&(this.translate.y-=(r.top-window.innerHeight/2)*.1,a*=.7),this.image.style.transform=`translate3d(${this.translate.x}px, ${this.translate.y}px, 0px) scale(${this.scale})`,e=requestAnimationFrame(()=>i({x:s,y:a}))};return i({x:t.movementX,y:t.movementY}),()=>{n=!0,cancelAnimationFrame(e),this.normalize(!1)}}animateZoom(t){if(!this.image)return;this.rect||(this.rect=this.image.getBoundingClientRect());const e=Date.now(),n=this.image;this.rect.width*t<this.minDimension.closingWidth||n.width<Math.floor(this.minDimension.initialWidth)||(n.addEventListener("transitionend",()=>{this.animationTimestamp===e&&n&&(n.style.transition="",this.normalize())},{once:!0}),n.style.transition||(n.style.transition="all 222ms ease"),this.animationTimestamp=e,this.scaleMove(t))}normalize(t=!0){if(!this.image||!this.rect)return;const e=this.snapToTargetIfClose(this.rect.width*this.scale,this.minDimension.initialWidth),n=this.snapToTargetIfClose(this.rect.height*this.scale,this.minDimension.initialHeight);if(this.image.style.width=`${e}px`,this.image.style.height=`${n}px`,this.scale=1,this.image.style.opacity="",this.accumulatedTranslate.x+=this.translate.x,this.accumulatedTranslate.y+=this.translate.y,this.image.style.left=`calc(50% + ${this.accumulatedTranslate.x}px)`,this.image.style.top=`calc(50% + ${this.accumulatedTranslate.y}px)`,this.translate={x:0,y:0},this.image.style.transform="",this.rect=this.image.getBoundingClientRect(),e<=this.minDimension.closingWidth)return this.clean(),!0;if(e<this.minDimension.initialWidth)this.accumulatedTranslate.x=0,this.accumulatedTranslate.y=0,requestAnimationFrame(()=>{const i=this.image;i&&(i.addEventListener("transitionend",()=>{i&&(this.clean(),this.rect=null)},{once:!0}),i.style.transition="all 222ms ease",i.style.width=`${this.minDimension.initialWidth}px`,i.style.height=`${this.minDimension.initialHeight}px`,i.style.left="50%",i.style.top="50%")});else if(t){let i=!1;if(this.rect.right<window.innerWidth/2&&(i=!0,this.accumulatedTranslate.x+=window.innerWidth/2-this.rect.right),this.rect.left>window.innerWidth/2&&(i=!0,this.accumulatedTranslate.x-=this.rect.left-window.innerWidth/2),this.rect.bottom<window.innerHeight/2&&(i=!0,this.accumulatedTranslate.y+=window.innerHeight/2-this.rect.bottom),this.rect.top>window.innerHeight/2&&(i=!0,this.accumulatedTranslate.y-=this.rect.top-window.innerHeight/2),i){const s=this.image;s.addEventListener("transitionend",()=>{s&&(s.style.transition="",this.rect=null)},{once:!0}),s.style.transition="all 222ms ease",s.style.left=`calc(50% + ${this.accumulatedTranslate.x}px)`,s.style.top=`calc(50% + ${this.accumulatedTranslate.y}px)`}else this.rect=null}}}class it{constructor(){l(this,"fiolast",{})}fio(t,e,n=50){const s=Date.now()-(this.fiolast[e]??0),a=()=>{this.fiolast[e]=Date.now(),t()};if(!this.fiolast[e]){a();return}s>=n&&a()}}const b={somethingOpened:null};class nt{constructor(t,e={}){l(this,"options");l(this,"elements");l(this,"isReducedMotion");l(this,"currentIndex",-1);l(this,"currentChildren",null);l(this,"setupFunction",K);l(this,"initFunction",_);l(this,"closeFunction",J);l(this,"transitionFunction",Q);l(this,"pointers",null);l(this,"imageState");l(this,"imageTransitions",new Map);l(this,"root",null);l(this,"imageContainer",null);l(this,"onClickElements",t=>{t.preventDefault();const e=t.currentTarget;e.dataset.vistaIdx&&this.open(parseInt(e.dataset.vistaIdx))});l(this,"defaultOnClickHandler",t=>t.preventDefault());l(this,"abortController",null);l(this,"throttle",new it);l(this,"lastSwapTime",0);l(this,"transitionCleanup",null);l(this,"isZoomedIn",!1);l(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}});l(this,"onScroll",t=>{t.preventDefault();const e=t.deltaY;this.imageState.setInitialCenter({x:t.clientX,y:t.clientY}),e<0?this.zoomIn():e>0&&this.zoomOut()});l(this,"onResizeHandler",()=>{this.currentChildren.htmls.forEach((t,e)=>{const n=this.currentChildren.images[e],i=t.querySelector("img.vvw-img-hi"),s=t.querySelector("img.vvw-img-lo");if(P(n,i,s,!1),i.classList.contains("vvw--loaded")){const{width:a,height:r}=F(i);i.style.setProperty("--vvw-current-w",`${a}px`),i.style.setProperty("--vvw-current-h",`${r}px`),i.dataset.vvwWidth=a.toString(),i.dataset.vvwHeight=r.toString()}})});l(this,"pointerListeners",[]);l(this,"getInternalPointerListener",()=>{const t=this.imageState;let e=0,n=!1,i=()=>{};return s=>{if(s.event==="down"){if(i(),this.isZoomedIn&&s.pointers.length===1){const a=this.pointers.getCentroid();t.setInitialCenter(a)}if(s.pointers.length>=2){n=!0;const a=this.pointers.getCentroid();e=this.pointers.getPointerDistance(s.pointers[0],s.pointers[1]),t.setInitialCenter(a)}}else if(s.event==="move"){if(this.isZoomedIn&&s.pointers.length===1&&s.lastPointerLen===0){const a=this.pointers.getCentroid();t.move(a)}if(s.pointers.length>=2&&n){const a=this.pointers.getCentroid(),r=this.pointers.getPointerDistance(s.pointers[0],s.pointers[1]);t.scaleMove(r/e,a)}}else(s.event==="up"||s.event==="cancel")&&(n||this.isZoomedIn)&&(n?(n=!1,t.normalize()&&requestAnimationFrame(()=>{this.close()})):this.isZoomedIn&&s.pointers.length===0&&(i=t.moveAndNormalize(s.pointer)));this.pointerListeners.forEach(a=>a({...s,hasInternalExecution:this.isZoomedIn||n,abortController:this.abortController}))}});this.elements=t,this.options={...M,...e,controls:{...M.controls,...e.controls}},this.imageState=new et(this.options.maxZoomLevel,n=>{var i,s,a,r,h,c;n.isMin?(this.isZoomedIn=!1,(i=this.qs(".vvw-zoom-out"))==null||i.setAttribute("disabled","true"),(s=this.qs('.vvw-item[data-vvw-idx="'+this.currentIndex+'"]'))==null||s.style.setProperty("pointer-events","none")):(this.isZoomedIn=!0,(a=this.qs(".vvw-zoom-out"))==null||a.removeAttribute("disabled"),(r=this.qs('.vvw-item[data-vvw-idx="'+this.currentIndex+'"]'))==null||r.style.setProperty("pointer-events","auto")),n.isMax?(h=this.qs(".vvw-zoom-in"))==null||h.setAttribute("disabled","true"):(c=this.qs(".vvw-zoom-in"))==null||c.removeAttribute("disabled")}),this.options.setupFunction&&(this.setupFunction=this.options.setupFunction),this.options.closeFunction&&(this.closeFunction=this.options.closeFunction),this.options.initFunction&&(this.initFunction=this.options.initFunction),this.options.transitionFunction&&(this.transitionFunction=this.options.transitionFunction),this.isReducedMotion=window.matchMedia("(prefers-reduced-motion: reduce)").matches,this.elements instanceof NodeList&&this.elements.forEach((n,i)=>{n.dataset.vistaIdx=i.toString(),n.addEventListener("click",this.defaultOnClickHandler),n.addEventListener("pointerup",this.onClickElements)})}qs(t){return this.root?this.root.querySelector(t):null}async swap(t,e){const n=this.options.preloads||0,i=this.currentIndex,{htmls:s,images:a}=this.getChildElements(n,i),r=this.imageContainer,h=this.currentChildren,c={htmlElements:{from:h.htmls,to:s},images:{from:h.images,to:a},index:{from:t,to:this.currentIndex},via:e||{next:!1,prev:!1},vistaView:this};this.setupFunction(c),this.currentChildren={htmls:s,images:a},this.displayActiveIndex();const m=this.abortController.signal;if(performance.now()-this.lastSwapTime<this.options.rapidLimit){r.innerHTML="",this.transitionCleanup&&this.transitionCleanup(),s.forEach(E=>{r.appendChild(E)}),this.lastSwapTime=performance.now(),this.waitForImagesToLoad(),this.options.onImageView&&this.options.onImageView(c);return}const y=this.transitionFunction(c,m);y&&(this.transitionCleanup=y.cleanup,await y.transitionEnded),this.lastSwapTime=performance.now();const d=s[Math.floor(s.length/2)].dataset.vvwIdx,u=r.querySelector(`.vvw-item[data-vvw-idx="${d}"] img.vvw-img-hi`),C=this.imageTransitions.get(u);this.imageTransitions.delete(u);const x=u.getAttribute("style")||"",p=u.classList.contains("vvw--loaded"),T=u.classList.contains("vvw--ready"),S=u.width,H=u.height;this.imageState.reset(),r.innerHTML="",this.transitionCleanup&&this.transitionCleanup(),s.forEach(E=>{const g=E.querySelector("img.vvw-img-hi");E.dataset.vvwPos==="0"&&!m.aborted&&x&&S&&H&&(p&&(g.classList.add("vvw--loaded"),g.dataset.vvwWidth=u.dataset.vvwWidth||"",g.dataset.vvwHeight=u.dataset.vvwHeight||""),T&&(g.classList.add("vvw--ready"),g.width=S,g.height=H),g.setAttribute("style",x)),r.appendChild(E),E.dataset.vvwPos==="0"&&!m.aborted&&T?(this.imageState.setCurrentImage(g),this.imageState.setInitialCenter()):E.dataset.vvwPos==="0"&&!m.aborted&&x&&S&&H&&p&&C&&(this.imageTransitions.set(g,C),this.transitionImage(g,()=>{this.imageState.setCurrentImage(g),this.imageState.setInitialCenter(),g.classList.add("vvw--ready")}))}),this.waitForImagesToLoad(),this.options.onImageView&&this.options.onImageView(c)}getChildElements(t,e){const n=[],i=[];for(let s=-t;s<=t;s++){const a=(e+s+this.elements.length)%this.elements.length,r=this.elements[a],h=r instanceof HTMLImageElement?r:r instanceof HTMLAnchorElement&&r.querySelector("img")||void 0,c=r instanceof HTMLElement?{index:a,imageElm:h instanceof HTMLImageElement?h:void 0,anchorElm:r instanceof HTMLAnchorElement?r:void 0,src:r.dataset.vistaviewSrc||r.getAttribute("href")||r.getAttribute("src")||"",thumb:r.dataset.vistaviewThumb||(h instanceof HTMLImageElement?h.getAttribute("src"):void 0)||r.getAttribute("href")||void 0,alt:h instanceof HTMLImageElement&&h.getAttribute("alt")||void 0}:{index:a,...r};i.push(c),n.push(V(c,s))}return{htmls:n,images:i}}zoomIn(){this.throttle.fio(()=>{this.imageState.animateZoom(1.68)},"zoom",222)}zoomOut(){this.throttle.fio(()=>{this.imageState.animateZoom(.68)},"zoom",222)}displayActiveIndex(){var a;const t=this.currentIndex;this.elements instanceof NodeList&&this.elements.forEach((r,h)=>{r.style.opacity="",h===t&&(r.style.opacity="0")});const e=this.qs(".vvw-index"),n=`${t+1}`,i=`${this.elements.length}`;e&&(e.textContent=`${n} / ${i}`);const s=this.qs(".vvw-desc");if(s){const r=(a=this.currentChildren)==null?void 0:a.images.find(c=>c.index===t),h=(r==null?void 0:r.alt)||"";h?(s.textContent=h,s.setAttribute("aria-label",`Image ${n} of ${i}: ${h}`)):(s.textContent="",s.setAttribute("aria-label",`Image ${n} of ${i}`))}}transitionImage(t,e){const n=this.imageTransitions.get(t);n&&requestAnimationFrame(()=>{const{current:i,target:s}=n,a={width:i.width+(s.width-i.width)*.1,height:i.height+(s.height-i.height)*.1,radius:i.radius+(s.radius-i.radius)*.1};Math.abs(a.width-s.width)<.5&&Math.abs(a.height-s.height)<.5&&Math.abs(a.radius-s.radius)<.5?(t.style.setProperty("--vvw-current-w",`${s.width}px`),t.style.setProperty("--vvw-current-h",`${s.height}px`),t.style.setProperty("--vvw-current-radius",`${s.radius}px`),this.imageTransitions.delete(t),e()):(t.style.setProperty("--vvw-current-w",`${a.width}px`),t.style.setProperty("--vvw-current-h",`${a.height}px`),t.style.setProperty("--vvw-current-radius",`${a.radius}px`),this.imageTransitions.set(t,{current:a,target:s}),this.transitionImage(t,e))})}waitForImagesToLoad(){this.imageContainer.querySelectorAll("img.vvw-img-hi:not(.vvw--loaded)").forEach(n=>{const i=n,s=()=>{var c;i.width=i.naturalWidth,i.height=i.naturalHeight;const a=(c=i.parentElement)==null?void 0:c.matches(`[data-vvw-idx="${this.currentIndex}"]`),{width:r,height:h}=F(i);i.dataset.vvwWidth=r.toString(),i.dataset.vvwHeight=h.toString(),i.classList.add("vvw--loaded"),this.imageTransitions.set(i,{current:{width:i.style.getPropertyValue("--vvw-current-w")?parseFloat(i.style.getPropertyValue("--vvw-current-w")):0,height:i.style.getPropertyValue("--vvw-current-h")?parseFloat(i.style.getPropertyValue("--vvw-current-h")):0,radius:i.style.getPropertyValue("--vvw-current-radius")?parseFloat(i.style.getPropertyValue("--vvw-current-radius")):0},target:{width:r,height:h,radius:0}}),this.transitionImage(i,()=>{a&&(this.imageState.setCurrentImage(i),this.imageState.setInitialCenter()),i.classList.add("vvw--ready")})};if(i.complete&&i.naturalWidth!==0){s();return}i.addEventListener("load",()=>{s()}),i.addEventListener("error",()=>{var r;i.classList.add("vvw--loaderror");const a=document.createElement("p");a.className="vvw-img-err",a.setAttribute("role","alert"),a.textContent="Error loading image",(r=i.parentNode)==null||r.appendChild(a)})})}registerPointerListener(t){this.pointerListeners.push(t)}unregisterPointerListeners(){this.pointerListeners=[]}open(t=0){var c,m,f,$,y;if(b.somethingOpened)return;b.somethingOpened=this,this.currentIndex=t,document.body.style.overflow="hidden";const e=U({controls:this.options.controls});if(document.body.prepend(e),this.root=document.body.querySelector("#vvw-root"),!this.root)throw new Error("Failed to setup VistaView root element.");this.imageContainer=this.qs(".vvw-image-container"),this.options.animationDurationBase&&this.root.style.setProperty("--vvw-anim-dur",`${this.options.animationDurationBase}`),this.options.initialZIndex!==void 0&&this.root.style.setProperty("--vvw-init-z",`${this.options.initialZIndex??0}`),this.options.arrowOnSmallScreens&&this.root.classList.add("vvw-arrow-sm");const n=this.options.preloads||0,i=t,{images:s,htmls:a}=this.getChildElements(n,i),r={htmlElements:{from:null,to:a},images:{from:null,to:s},index:{from:null,to:this.currentIndex},via:{next:!1,prev:!1},vistaView:this};this.setupFunction(r),this.currentChildren={htmls:a,images:s},a.forEach(d=>{this.imageContainer.appendChild(d)}),(c=this.qs(".vvw-close"))==null||c.addEventListener("click",()=>this.close()),(m=this.qs(".vvw-zoom-in"))==null||m.addEventListener("click",()=>this.zoomIn()),(f=this.qs(".vvw-zoom-out"))==null||f.addEventListener("click",()=>this.zoomOut()),($=this.qs(".vvw-prev>button"))==null||$.addEventListener("click",()=>this.prev()),(y=this.qs(".vvw-next>button"))==null||y.addEventListener("click",()=>this.next()),this.options.keyboardListeners&&window.addEventListener("keydown",this.onKeyDown),window.addEventListener("wheel",this.onScroll,{passive:!1}),window.addEventListener("resize",this.onResizeHandler),this.pointers=new tt({elm:this.imageContainer,listeners:[this.getInternalPointerListener()]});const h={};[...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(d=>{typeof d!="string"&&(h[d.name]=d)}),this.root.querySelectorAll("button[data-vvw-control]").forEach(d=>{const u=d;u.addEventListener("click",C=>{const x=C.currentTarget.dataset.vvwControl,p=h[x],T=this.currentChildren.images.find(S=>S.index===this.currentIndex);p&&T&&(p.onClick.constructor.name==="AsyncFunction"?(u.classList.add("vvw--loading"),p.onClick(T,this).finally(()=>{u.classList.remove("vvw--loading")})):p.onClick(T,this))})}),this.initFunction(this),requestAnimationFrame(()=>{var d;(d=this.root)==null||d.addEventListener("transitionend",()=>{var u;(u=this.root)==null||u.classList.add("vvw--settled"),this.waitForImagesToLoad(),this.imageState.reset()},{once:!0}),this.root.classList.add("vvw--active"),this.displayActiveIndex(),this.options.onOpen&&this.options.onOpen(this),this.options.onImageView&&this.options.onImageView(r)})}async close(t=!0){b.somethingOpened===this&&this.root&&(t?await new Promise(e=>{let i=0;this.root.addEventListener("transitionend",s=>{s.target===this.root&&(i++,i===2&&this.elements instanceof NodeList&&this.elements.forEach(a=>{a.style.opacity=""}),i===3&&e(null))}),this.root.classList.add("vvw--closing")}):this.elements instanceof NodeList&&this.elements.forEach(e=>{e.style.opacity=""}),this.options.keyboardListeners&&window.removeEventListener("keydown",this.onKeyDown),window.removeEventListener("resize",this.onResizeHandler),window.removeEventListener("wheel",this.onScroll),this.unregisterPointerListeners(),this.pointers.removeListeners(),this.root.remove(),this.root=null,this.imageContainer=null,this.currentChildren=null,this.currentIndex=-1,document.body.style.overflow="",b.somethingOpened=null,this.closeFunction(this),this.options.onClose&&this.options.onClose(this))}next(){if(b.somethingOpened!==this)return;const t=(this.currentIndex+1)%this.elements.length;this.view(t,{next:!0,prev:!1})}prev(){if(b.somethingOpened!==this)return;const t=(this.currentIndex-1+this.elements.length)%this.elements.length;this.view(t,{next:!1,prev:!0})}destroy(){this.close(!1),this.elements instanceof NodeList&&this.elements.forEach(t=>{t.removeAttribute("data-vista-idx"),t.removeEventListener("click",this.defaultOnClickHandler),t.removeEventListener("pointerup",this.onClickElements)})}getCurrentIndex(){return b.somethingOpened!==this?-1:this.currentIndex}view(t,e){if(b.somethingOpened!==this||t<0||t>=this.elements.length)return;const n=this.currentIndex;this.currentIndex=t;const i=this.abortController;i==null||i.abort(),this.abortController=new AbortController,this.swap(n,e)}}function st(o){let t=null;if(typeof o=="string"?t=document.querySelectorAll(o):o instanceof NodeList&&(t=o),t)for(let e=0;e<t.length;e++){const n=t[e];if(!(n.dataset.vistaviewSrc||n.getAttribute("href")||n.getAttribute("src")||""))return`Element at index ${e} is missing 'src' / 'data-vistaview-src' / 'href' attribute.`}else{const e=o;for(let n=0;n<e.length;n++)if(!e[n].src)return`Element at index ${n} is missing 'src' attribute.`}return t||o}function ot({elements:o,...t}){if(!o)throw new Error("No elements");let e=st(o);if(typeof e=="string")return null;const n=new nt(e,t);return{open:(i=0)=>n.open(i),close:()=>n.close(),next:()=>n.next(),prev:()=>n.prev(),destroy:()=>n.destroy(),getCurrentIndex:()=>n.getCurrentIndex(),view:i=>{n.view(i)}}}v.DefaultOptions=M,v.vistaView=ot,v.vistaViewDownload=z,Object.defineProperty(v,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vistaview",
-  "version": "0.6.5",
+  "version": "0.7.0",
   "description": "A lightweight, zero-dependency image lightbox library with smooth animations and touch support",
   "keywords": [
     "image",
@@ -43,7 +43,8 @@
       "types": "./dist/solid.d.ts",
       "import": "./dist/solid.js"
     },
-    "./style.css": "./dist/vistaview.css"
+    "./style.css": "./dist/style.css",
+    "./styles/*": "./dist/styles/*"
   },
   "peerDependencies": {
     "react": ">=17.0.0",

package/dist/vistaview.css

@@ -1 +0,0 @@
-:root{--vvw-bg-color: #000000;--vvw-text-color: #ffffff;--vvw-bg-blur: 10px;--vvw-bg-opacity: .8;--vvw-init-z: 1;--vvw-dest-z: 2147483647;--vvw-anim-dur: 333;--vvw-init-w: 0;--vvw-init-h: 0;--vvw-init-t: 0;--vvw-init-l: 0;--vvw-idx: 0;--vvw-radius: 0px}@keyframes vvw-pulse{0%{opacity:1;border-radius:var(--vvw-init-radius);scale:1}50%{opacity:.7;border-radius:var(--vvw-pulse-radius);scale:.99}to{opacity:1;border-radius:var(--vvw-init-radius);scale:1}}@keyframes vvw-simple-pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}@keyframes vvw-gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.vvw-root{position:fixed;top:0;left:0;width:100vw;width:100dvw;height:100vh;height:100dvh;overflow:hidden;z-index:var(--vvw-init-z);opacity:0;isolation:isolate;transform:none;touch-action:none}.vvw-container{position:relative;width:100%;height:100%;overflow:hidden}.vvw-container .vvw-bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;background-color:rgb(from var(--vvw-bg-color) r g b / var(--vvw-bg-opacity));-webkit-backdrop-filter:blur(var(--vvw-bg-blur));backdrop-filter:blur(var(--vvw-bg-blur));opacity:0;transition:opacity calc(var(--vvw-anim-dur) * 1ms) calc(var(--vvw-anim-dur) * 1ms) ease}.vvw-image-container{position:relative;height:100%;overflow:hidden;isolation:isolate;pointer-events:none}.vvw-item{position:relative;width:100%;height:100%;overflow:hidden;pointer-events:none}.vvw-item img{position:absolute;display:block;top:50%;left:50%;translate:-50% -50%}.vvw-item .vvw-img-err{position:absolute;top:50%;left:50%;translate:-50% -50%;color:#fff;background-color:red;font-size:14px;text-align:center;padding:8px 12px;margin:0;display:none;z-index:2}.vvw-item .vvw-img-lo{--vvw-init-radius: 0px;--vvw-pulse-radius: 0px;--vvw-init-x: 0px;--vvw-init-y: 0px;--vvw-current-x: 0px;--vvw-current-y: 0px;outline:1px solid rgba(255,255,255,.2);z-index:0;opacity:1;border-radius:var(--vvw-init-radius);overflow:hidden;transition:transform calc(var(--vvw-anim-dur) * 1ms) ease;transform:translate3d(var(--vvw-current-x),var(--vvw-current-y),0);background:linear-gradient(45deg,#1a1a1a,#333,#1a1a1a,#555);background-size:400% 400%;animation:vvw-gradient 3s ease-in-out infinite}.vvw-item .vvw-img-hi{pointer-events:auto;cursor:zoom-in;--vvw-init-radius: 0px;--vvw-init-w: 0px;--vvw-init-h: 0px;--vvw-current-w: 0px;--vvw-current-h: 0px;--vvw-current-radius: 0px;width:var(--vvw-init-w);height:var(--vvw-init-h);border-radius:var(--vvw-init-radius);z-index:1;overflow:hidden;object-fit:cover;opacity:0;transition:width calc(var(--vvw-anim-dur) * 1.5ms) ease,height calc(var(--vvw-anim-dur) * 1.5ms) ease,border-radius calc(var(--vvw-anim-dur) * 1.5ms) ease}.vvw-ui{opacity:0;transition:opacity calc(var(--vvw-anim-dur) * 1ms) ease calc(var(--vvw-anim-dur) * 2ms) ease}.vvw-ui.vvw-top-bar,.vvw-ui.vvw-bottom-bar{position:absolute;top:0;left:0;width:100%;z-index:6;display:flex;align-items:stretch;justify-content:space-between}.vvw-ui.vvw-top-bar>div,.vvw-ui.vvw-bottom-bar>div{display:flex;align-items:stretch}.vvw-ui.vvw-index{font-size:16px;padding:8px;background-color:var(--vvw-bg-color);color:var(--vvw-text-color)}.vvw-ui.vvw-desc{font-size:14px;padding:8px 15px;background-color:var(--vvw-bg-color);color:var(--vvw-text-color);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vvw-ui.vvw-bottom-bar{top:unset;bottom:0}.vvw-ui button{background:none;color:inherit;border:0px;font:inherit;cursor:pointer;outline:inherit;box-sizing:border-box;margin:0;padding:8px;align-self:stretch;border-radius:0;display:flex;align-items:center;justify-content:center;background-color:var(--vvw-bg-color);color:var(--vvw-text-color)}.vvw-ui button:disabled{color:rgb(from var(--vvw-text-color) r g b / .5);cursor:not-allowed}.vvw-ui button:hover{background-color:hsl(from var(--vvw-bg-color) h s calc(l + 20))}.vvw-ui button:active{background-color:hsl(from var(--vvw-bg-color) h s calc(l + 40))}.vvw-ui button.vvw-button--loading{animation:vvw-simple-pulse .5s ease-in-out infinite}.vvw-ui button svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.vvw-ui.vvw-prev{position:absolute;top:50%;left:0;translate:0 -50%;display:flex;align-items:center;justify-content:center;z-index:2}.vvw-ui.vvw-next{position:absolute;top:50%;right:0;translate:0 -50%;display:flex;align-items:center;justify-content:center;z-index:2}.vvw-root.vvw--active{opacity:1;transition:z-index 0ms calc(var(--vvw-anim-dur) * 1ms) ease;z-index:var(--vvw-dest-z)}.vvw-root.vvw--active .vvw-container .vvw-bg{opacity:1}.vvw-root.vvw--active .vvw-img-lo{--vvw-current-x: 0px !important;--vvw-current-y: 0px !important}.vvw-root.vvw--active .vvw-ui{opacity:1}.vvw-root.vvw--settled .vvw-img-lo{animation:vvw-pulse 1s infinite,vvw-gradient 3s ease-in-out infinite;animation-delay:calc(var(--vvw-anim-dur) * 2ms)}.vvw-root.vvw--settled .vvw-img-lo:has(+img.vvw--loaded){animation:none;opacity:0}.vvw-root.vvw--settled .vvw-img-err:has(~img.vvw--loaderror){display:block}.vvw-root.vvw--settled .vvw-img-hi.vvw--loaded{opacity:1;width:var(--vvw-current-w);height:var(--vvw-current-h);border-radius:var(--vvw-current-radius)}.vvw-root.vvw--settled .vvw-img-hi.vvw--ready{transition:none}.vvw-root.vvw--closing{transition:opacity calc(var(--vvw-anim-dur) * 1ms) calc(var(--vvw-anim-dur) * 2ms) ease,transform 0s calc(var(--vvw-anim-dur) * 2ms) ease,z-index 0s calc(var(--vvw-anim-dur) * 1ms) ease;transform:scale(1);z-index:var(--vvw-init-z);opacity:0!important}.vvw-root.vvw--closing .vvw-img-err:has(~img.vvw--loaderror){display:none}.vvw-root.vvw--closing .vvw-img-hi.vvw--loaded,.vvw-root.vvw--closing .vvw-img-hi.vvw--ready{transition:width calc(var(--vvw-anim-dur) * 1ms) ease,height calc(var(--vvw-anim-dur) * 1ms) ease,border-radius calc(var(--vvw-anim-dur) * 1ms) ease,top calc(var(--vvw-anim-dur) * 1ms) ease,left calc(var(--vvw-anim-dur) * 1ms) ease,opacity 0ms calc(var(--vvw-anim-dur) * 1ms) ease;opacity:0;top:50%!important;left:50%!important;width:var(--vvw-init-w)!important;height:var(--vvw-init-h)!important;border-radius:var(--vvw-init-radius)!important}.vvw-root.vvw--closing .vvw-img-lo{transition:opacity 0ms calc(var(--vvw-anim-dur) * 1ms) ease,transform calc(var(--vvw-anim-dur) * 1ms) calc(var(--vvw-anim-dur) * 1ms) ease;opacity:1!important;--vvw-current-x: var(--vvw-init-x) !important;--vvw-current-y: var(--vvw-init-y) !important}.vvw-root.vvw--closing .vvw-ui{transition:opacity calc(var(--vvw-anim-dur) * 1ms) ease;opacity:0}.vvw-root.vvw--closing .vvw-container .vvw-bg{transition:opacity calc(var(--vvw-anim-dur) * 1ms) calc(var(--vvw-anim-dur) * 1ms) ease;opacity:0}