vistaview 0.7.8 → 0.10.9

package/dist/vistaview.umd.js

@@ -1,11 +1,18 @@
-(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,$)=>w in v?rt(v,w,{enumerable:!0,configurable:!0,writable:!0,value:$}):v[w]=$;var h=(v,w,$)=>at(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(),r=s.naturalWidth,a=s.naturalHeight;if(!e)return{width:i,height:n};if(!r||!a)return{width:i,height:n};const o=r/a,l=i/n;switch(e){case"fill":return{width:i,height:n};case"none":return{width:r,height:a};case"contain":return o>l?{width:i,height:i/o}:{width:n*o,height:n};case"cover":return o<l?{width:i,height:i/o}:{width:n*o,height:n};case"scale-down":{const c={width:r,height:a},d=o>l?{width:i,height:i/o}:{width:n*o,height:n};return d.width<=c.width&&d.height<=c.height?d:c}}return{width:i,height:n}}function W(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 Z(s){const t=s.imageElm?W(s.imageElm):null,e=s.anchorElm?W(s.anchorElm):null,i=w(t==null?void 0:t.borderRadius),n=e&&w(e==null?void 0:e.borderRadius),r=(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:r,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 P(s,t,e,i=!1){const{fit:n,w:r,h:a,nw:o,nh:l,br:c,top:d,left:f}=Z(s),L=Math.min(Math.max(f,-r),window.innerWidth+r)-window.innerWidth/2+r/2,y=Math.min(Math.max(d,-a),window.innerHeight+a)-window.innerHeight/2+a/2,m=e.style;m.width=`${r}px`,m.height=`${a}px`,m.objectFit=n,e.width=o,e.height=l,m.setProperty("--vvw-init-radius",`${c}`),m.setProperty("--vvw-pulse-radius",`calc(1.3 * ${c})`),m.setProperty("--vvw-init-x",`${L}px`),m.setProperty("--vvw-init-y",`${y}px`),i&&(m.setProperty("--vvw-current-x",`${L}px`),m.setProperty("--vvw-current-y",`${y}px`));const u=$(s.imageElm),E=Math.min(r,u.width),x=Math.min(a,u.height),p=t.style;p.setProperty("--vvw-init-radius",`${c}`),p.setProperty("--vvw-init-w",`${E}px`),p.setProperty("--vvw-init-h",`${x}px`),i&&(p.setProperty("--vvw-current-radius",`${c}`),p.setProperty("--vvw-current-w",`${E}px`),p.setProperty("--vvw-current-h",`${x}px`),t.dataset.vvwWidth=E.toString(),t.dataset.vvwHeight=x.toString())}function F(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 r=i/n,a=t/e;let o,l;return r>a?(o=t,l=t/r):(l=e,o=e*r),{width:o,height:l}}function N(s,t,e){return Math.min(Math.max(s,t),e)}function I(s,t=2){const e=Math.pow(10,t);return Math.round(s*e)/e}const X='<svg viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>',Y='<svg viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>',B='<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>',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="8" x2="14" y1="11" y2="11"/></svg>',V='<svg viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>',U='<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 _(){return D||(window.trustedTypes||(window.trustedTypes={createPolicy:(s,t)=>t}),D=window.trustedTypes.createPolicy("vistaView-policy",{createHTML:s=>s,createScript:()=>{throw new Error("Not implemented")},createScriptURL:()=>{throw new Error("Not implemented")}}),D)}function A(s){const e=_().createHTML(s),i=document.createElement("template");i.innerHTML=e;const n=i.content;return i.remove(),n}function R(){return{name:"download",icon:U,onClick:async s=>{var r;const t=await fetch(s.src),e=await t.blob(),i=t.url,n=document.createElement("a");n.href=URL.createObjectURL(e),n.download=((r=i.split("/").pop())==null?void 0:r.split("?")[0].split("#")[0])||"download",document.body.appendChild(n),n.click(),document.body.removeChild(n)}}}function K(s){if(typeof s=="string")switch(s){case"zoomIn":return`<button aria-label="Zoom In" class="vvw-zoom-in vvw-ui">${B}</button>`;case"zoomOut":return`<button aria-label="Zoom Out" disabled class="vvw-zoom-out vvw-ui">${j}</button>`;case"close":return`<button aria-label="Close" class="vvw-close vvw-ui">${V}</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="${s.description||s.name}" data-vvw-control="${s.name}">${s.icon}</button>`}function G(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 P(s,n,i,t===0),e}function J({controls:s}){const t=i=>i?i.map(K).join(""):"";return A(`<div class="vvw-root" id="vvw-root">
+(function(c,y){typeof exports=="object"&&typeof module<"u"?y(exports):typeof define=="function"&&define.amd?define(["exports"],y):(c=typeof globalThis<"u"?globalThis:c||self,y(c.VistaView=c.VistaView||{}))})(this,(function(c){"use strict";var nt=Object.defineProperty;var st=(c,y,I)=>y in c?nt(c,y,{enumerable:!0,configurable:!0,writable:!0,value:I}):c[y]=I;var r=(c,y,I)=>st(c,typeof y!="symbol"?y+"":y,I);const y={animationDurationBase:333,maxZoomLevel:2,preloads:1,keyboardListeners:!0,arrowOnSmallScreens:!1,rapidLimit:222,controls:{topLeft:["indexDisplay"],topRight:["zoomIn","zoomOut","close"],bottomLeft:["description"]}},I='<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>',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>',N='<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>',B='<svg viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>';let P=null;function Z(){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 X(s){const e=Z().createHTML(s),i=document.createElement("template");i.innerHTML=e;const n=i.content;return i.remove(),n}function Y(s){if(typeof s=="string")switch(s){case"zoomIn":return`<div class="vvw-ui"><button aria-label="Zoom In" class="vvw-zoom-in">${j}</button></div>`;case"zoomOut":return`<div class="vvw-ui"><button aria-label="Zoom Out" disabled class="vvw-zoom-out">${N}</button></div>`;case"close":return`<div class="vvw-ui"><button aria-label="Close" class="vvw-close">${B}</button></div>`;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 console.warn(`Unknown default control: ${s}. Will return empty string.`),""}return`<div class="vvw-ext vvw-ui" aria-label="${s.description||s.name}" data-vvw-control="${s.name}"></div>`}function U({controls:s}){const t=i=>i?i.map(Y).join(""):"",e=X(`<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"><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"><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">${X}</button></div>
-      <div class="vvw-next vvw-ui"><button aria-label="Next">${Y}</button></div>
+      <div class="vvw-top-bar">
+        <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">
+        <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">${I}</button></div>
+      <div class="vvw-next vvw-ui"><button aria-label="Next">${k}</button></div>
     </div>
-    </div>`)}const M={animationDurationBase:333,maxZoomLevel:2,preloads:1,keyboardListeners:!0,arrowOnSmallScreens:!1,rapidLimit:222,controls:{topLeft:["indexDisplay"],topRight:["zoomIn","zoomOut",R(),"close"],bottomLeft:["description"]}};function z(s){}function q(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",Q(s)}function Q(s){let t={x:0,y:0},e={x:0,y:0},i=null;s.registerPointerListener(n=>{var r;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},(r=n.abortController)==null||r.abort()),n.event==="move"){e={x:n.pointer.x,y:n.pointer.y};const a=e.x-t.x,o=e.y-t.y;if(!i&&Math.abs(o)>Math.abs(a)||i==="y"){const l=o/window.innerHeight*100;s.imageContainer.style.transition="none",s.imageContainer.style.transform=`translateY(${l}vh)`,i="y"}else if(!i&&Math.abs(a)>Math.abs(o)||i==="x"){const l=a/window.innerWidth*100;s.imageContainer.style.transition="none",s.imageContainer.style.transform=`translateX(${l}vw)`,i="x"}}if(n.event==="up"||n.event==="cancel"){let a=function(o){var l;(l=s.imageContainer)==null||l.addEventListener("transitionend",function c(){var d;(d=s.imageContainer)==null||d.removeEventListener("transitionend",c),s.imageContainer.style.transition="",s.imageContainer.style.transform=""}),s.imageContainer.style.transition="transform 222ms ease",s.imageContainer.style.transform=o};if(i==="y"){const o=e.y-t.y;Math.abs(o)>144?(s.imageContainer.style.transition="transform 222ms ease",s.imageContainer.style.transform="translateY(0vh)",s.close()):a("translateY(0vh)")}if(i==="x"){const o=e.x-t.x,l=n.pointer.movementX,c=1;s.imageContainer.style.transition="",o>0&&Math.abs(l)>c?s.prev():o<0&&Math.abs(l)>c?s.next():a("translateX(0vw)")}i=null,t={x:0,y:0},e={x:0,y:0}}}})}function k(s){}function O({vistaView:{isReducedMotion:s},htmlElements:{to:t},index:{from:e,to:i},vistaView:{elements:n,imageContainer:r,options:a}},o){if(!(!t||o.aborted||s||!(Math.abs(i-e)===1||e===0&&i===n.length-1||e===n.length-1&&i===0)))return{cleanup:()=>{r.style.transition="",r.style.transform=""},transitionEnded:new Promise(c=>{r.addEventListener("transitionend",()=>{c()},{once:!0}),r.addEventListener("transitioncancel",()=>{o.aborted&&c()},{once:!0});const d=Math.round(a.animationDurationBase*100)/100,f=i===e+1||e===n.length-1&&i===0?"translateX(-100vw)":"translateX(100vw)";r.style.transition=`transform ${d}ms ease`,r.style.transform=f})}}class tt{constructor({elm:t,listeners:e}){h(this,"pointers",[]);h(this,"elm");h(this,"listeners",[]);h(this,"lastPointerDownId",null);h(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)}});h(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}))});h(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})))});h(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(r=>r.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(r=>r({event:"up",pointer:i,pointers:this.pointers,lastPointerLen:n}))});h(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(r=>r.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(r=>r({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 et{constructor(t,e){h(this,"maxZoomLevel");h(this,"image",null);h(this,"rect",null);h(this,"initialCenter",{x:0,y:0});h(this,"maxDimension",{width:0});h(this,"minDimension",{initialWidth:0,initialHeight:0,minWidth:0,closingWidth:0});h(this,"accumulatedTranslate",{x:0,y:0});h(this,"scale",1);h(this,"translate",{x:0,y:0});h(this,"onScale",null);h(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=I(t.x-this.initialCenter.x),this.translate.y=I(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(N(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=I(i/this.rect.width);const n=this.rect.left+this.rect.width/2,r=this.rect.top+this.rect.height/2,a=this.initialCenter.x-n,o=this.initialCenter.y-r,l=a*(1-this.scale),c=o*(1-this.scale),d=e.x-this.initialCenter.x,f=e.y-this.initialCenter.y;this.translate.x=I(l+d),this.translate.y=I(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:r,y:a})=>{if(i)return;if(Math.abs(r)<.001&&Math.abs(a)<.001)return this.normalize();r*=.9,a*=.9;const o=this.image.getBoundingClientRect();this.translate.x=I(this.translate.x+r),this.translate.y=I(this.translate.y+a),o.right<window.innerWidth/2&&(this.translate.x+=(window.innerWidth/2-o.right)*.1,r*=.7),o.left>window.innerWidth/2&&(this.translate.x-=(o.left-window.innerWidth/2)*.1,r*=.7),o.bottom<window.innerHeight/2&&(this.translate.y+=(window.innerHeight/2-o.bottom)*.1,a*=.7),o.top>window.innerHeight/2&&(this.translate.y-=(o.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:r,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.rect.width*this.scale,i=e<=this.minDimension.closingWidth,n=i?e:this.snapToTargetIfClose(this.rect.width*this.scale,this.minDimension.initialWidth),r=i?this.rect.height*this.scale:this.snapToTargetIfClose(this.rect.height*this.scale,this.minDimension.initialHeight);if(this.image.style.width=`${n}px`,this.image.style.height=`${r}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(),i)return!0;if(n<this.minDimension.initialWidth)this.accumulatedTranslate.x=0,this.accumulatedTranslate.y=0,requestAnimationFrame(()=>{const a=this.image;a&&(a.addEventListener("transitionend",()=>{a&&(this.clean(),this.rect=null)},{once:!0}),a.style.transition="all 222ms ease",a.style.width=`${this.minDimension.initialWidth}px`,a.style.height=`${this.minDimension.initialHeight}px`,a.style.left="50%",a.style.top="50%")});else if(t){let a=!1;if(this.rect.right<window.innerWidth/2&&(a=!0,this.accumulatedTranslate.x+=window.innerWidth/2-this.rect.right),this.rect.left>window.innerWidth/2&&(a=!0,this.accumulatedTranslate.x-=this.rect.left-window.innerWidth/2),this.rect.bottom<window.innerHeight/2&&(a=!0,this.accumulatedTranslate.y+=window.innerHeight/2-this.rect.bottom),this.rect.top>window.innerHeight/2&&(a=!0,this.accumulatedTranslate.y-=this.rect.top-window.innerHeight/2),a){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 it{constructor(){h(this,"fiolast",{})}fio(t,e,i=50){const r=Date.now()-(this.fiolast[e]??0),a=()=>{this.fiolast[e]=Date.now(),t()};if(!this.fiolast[e]){a();return}r>=i&&a()}}const C={somethingOpened:null};class nt{constructor(t,e={}){h(this,"options");h(this,"elements");h(this,"isReducedMotion");h(this,"currentIndex",-1);h(this,"currentChildren",null);h(this,"setupFunction",z);h(this,"initFunction",q);h(this,"closeFunction",k);h(this,"transitionFunction",O);h(this,"pointers",null);h(this,"imageState");h(this,"imageTransitions",new Map);h(this,"root",null);h(this,"imageContainer",null);h(this,"onClickElements",t=>{t.preventDefault();const e=t.currentTarget;e.dataset.vistaIdx&&this.open(parseInt(e.dataset.vistaIdx))});h(this,"defaultOnClickHandler",t=>t.preventDefault());h(this,"abortController",null);h(this,"throttle",new it);h(this,"lastSwapTime",0);h(this,"isRapidSwap",!1);h(this,"isRapidSwapRelease",0);h(this,"transitionCleanup",null);h(this,"isZoomedIn",!1);h(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}});h(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()});h(this,"onResizeHandler",()=>{this.currentChildren.htmls.forEach((t,e)=>{const i=this.currentChildren.images[e],n=t.querySelector("img.vvw-img-hi"),r=t.querySelector("img.vvw-img-lo");if(P(i,n,r,!1),n.classList.contains("vvw--loaded")){const{width:a,height:o}=F(n);n.style.setProperty("--vvw-current-w",`${a}px`),n.style.setProperty("--vvw-current-h",`${o}px`),n.dataset.vvwWidth=a.toString(),n.dataset.vvwHeight=o.toString()}})});h(this,"pointerListeners",[]);this.elements=t,this.options={...M,...e,controls:{...M.controls,...e.controls}},this.imageState=new et(this.options.maxZoomLevel,i=>{var n,r,a,o;i.isMin?(this.isZoomedIn=!1,(n=this.qs(".vvw-zoom-out"))==null||n.setAttribute("disabled","true")):(this.isZoomedIn=!0,(r=this.qs(".vvw-zoom-out"))==null||r.removeAttribute("disabled")),i.isMax?(a=this.qs(".vvw-zoom-in"))==null||a.setAttribute("disabled","true"):(o=this.qs(".vvw-zoom-in"))==null||o.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}getChildElements(t,e){const i=[],n=[];for(let r=-t;r<=t;r++){const a=(e+r+this.elements.length)%this.elements.length,o=this.elements[a],l=o instanceof HTMLImageElement?o:o instanceof HTMLAnchorElement&&o.querySelector("img")||void 0,c=o instanceof HTMLElement?{index:a,imageElm:l instanceof HTMLImageElement?l:void 0,anchorElm:o instanceof HTMLAnchorElement?o:void 0,src:o.dataset.vistaviewSrc||o.getAttribute("href")||o.getAttribute("src")||"",thumb:o.dataset.vistaviewThumb||(l instanceof HTMLImageElement?l.getAttribute("src"):void 0)||o.getAttribute("href")||void 0,alt:l instanceof HTMLImageElement&&l.getAttribute("alt")||void 0}:{index:a,...o};n.push(c),i.push(G(c,r))}return{htmls:i,images:n}}async swap(t,e){const i=this.options.preloads||0,n=this.currentIndex,{htmls:r,images:a}=this.getChildElements(i,n),o=this.imageContainer,l=this.currentChildren,c={htmlElements:{from:l.htmls,to:r},images:{from:l.images,to:a},index:{from:t,to:this.currentIndex},via:e||{next:!1,prev:!1},vistaView:this};this.setupFunction(c),this.currentChildren={htmls:r,images:a},this.displayActiveIndex();const d=this.abortController.signal,L=performance.now()-this.lastSwapTime<this.options.rapidLimit;if(this.isRapidSwap=L,o.querySelectorAll(".vvw-item img.vvw-img-hi").forEach(b=>b.classList.add("vvw--load-cancelled")),L){this.imageState.reset(),o.innerHTML="",this.transitionCleanup&&this.transitionCleanup(),r.forEach(b=>{o.appendChild(b)}),this.lastSwapTime=performance.now(),this.waitForImagesToLoad(),this.options.onImageView&&this.options.onImageView(c),this.isRapidSwapRelease&&clearTimeout(this.isRapidSwapRelease),this.isRapidSwapRelease=setTimeout(()=>{this.isRapidSwap=!1},333);return}const y=this.transitionFunction(c,d);y&&(this.transitionCleanup=y.cleanup,await y.transitionEnded),this.lastSwapTime=performance.now();const m=r[Math.floor(r.length/2)].dataset.vvwIdx,u=o.querySelector(`.vvw-item[data-vvw-idx="${m}"] img.vvw-img-hi`),E=this.imageTransitions.get(u);this.imageTransitions.delete(u);const x=u.getAttribute("style")||"",p=u.classList.contains("vvw--loaded"),S=u.classList.contains("vvw--ready"),T=u.width,H=u.height;this.imageState.reset(),o.innerHTML="",this.transitionCleanup&&this.transitionCleanup(),r.forEach(b=>{const g=b.querySelector("img.vvw-img-hi");b.dataset.vvwPos==="0"&&!d.aborted&&x&&T&&H&&(p&&(g.classList.add("vvw--loaded"),g.dataset.vvwWidth=u.dataset.vvwWidth||"",g.dataset.vvwHeight=u.dataset.vvwHeight||""),S&&(g.classList.add("vvw--ready"),g.width=T,g.height=H),g.setAttribute("style",x)),o.appendChild(b),b.dataset.vvwPos==="0"&&!d.aborted&&S?(this.imageState.setCurrentImage(g),this.imageState.setInitialCenter()):b.dataset.vvwPos==="0"&&!d.aborted&&x&&T&&H&&p&&E&&(this.imageTransitions.set(g,E),this.transitionImage(g,()=>{this.imageState.setCurrentImage(g),this.imageState.setInitialCenter(),g.classList.add("vvw--ready")}))}),this.isRapidSwap=!1,this.waitForImagesToLoad(),this.options.onImageView&&this.options.onImageView(c)}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((o,l)=>{o.style.opacity="",l===t&&(o.style.opacity="0")});const e=this.qs(".vvw-index"),i=`${t+1}`,n=`${this.elements.length}`;e&&(e.textContent=`${i} / ${n}`);const r=this.qs(".vvw-desc");if(r){const o=(a=this.currentChildren)==null?void 0:a.images.find(c=>c.index===t),l=(o==null?void 0:o.alt)||"";l?(r.textContent=l,r.setAttribute("aria-label",`Image ${i} of ${n}: ${l}`)):(r.textContent="",r.setAttribute("aria-label",`Image ${i} of ${n}`))}}transitionImage(t,e){if(!t.classList.contains("vvw--load-cancelled")){if(this.isRapidSwap){requestAnimationFrame(()=>{this.transitionImage(t,e)});return}requestAnimationFrame(()=>{const i=this.imageTransitions.get(t);if(!i||t.classList.contains("vvw--load-cancelled"))return;const{current:n,target:r}=i,a={width:n.width+(r.width-n.width)*.2,height:n.height+(r.height-n.height)*.2,radius:n.radius+(r.radius-n.radius)*.2};Math.abs(a.width-r.width)<1&&Math.abs(a.height-r.height)<1&&Math.abs(a.radius-r.radius)<1?(t.style.setProperty("--vvw-current-w",`${r.width}px`),t.style.setProperty("--vvw-current-h",`${r.height}px`),t.style.setProperty("--vvw-current-radius",`${r.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:r}),this.transitionImage(t,e))})}}waitForImagesToLoad(){this.imageContainer.querySelectorAll("img.vvw-img-hi:not(.vvw--loaded)").forEach(i=>{const n=i;if(n.classList.contains("vvw--load-cancelled"))return;const r=()=>{if(n.classList.contains("vvw--load-cancelled"))return;n.width=n.naturalWidth,n.height=n.naturalHeight;const{width:a,height:o}=F(n);n.dataset.vvwWidth=a.toString(),n.dataset.vvwHeight=o.toString(),n.classList.add("vvw--loaded"),this.imageTransitions.set(n,{current:{width:n.style.getPropertyValue("--vvw-current-w")?parseFloat(n.style.getPropertyValue("--vvw-current-w")):0,height:n.style.getPropertyValue("--vvw-current-h")?parseFloat(n.style.getPropertyValue("--vvw-current-h")):0,radius:n.style.getPropertyValue("--vvw-current-radius")?parseFloat(n.style.getPropertyValue("--vvw-current-radius")):0},target:{width:a,height:o,radius:0}}),this.transitionImage(n,()=>{var c;if(n.classList.contains("vvw--load-cancelled"))return;((c=n.parentElement)==null?void 0:c.matches(`[data-vvw-idx="${this.currentIndex}"][data-vvw-pos="0"]`))&&(this.imageState.setCurrentImage(n),this.imageState.setInitialCenter()),n.classList.add("vvw--ready")})};if(n.complete&&n.naturalWidth!==0){r();return}n.addEventListener("load",()=>{r()}),n.addEventListener("error",()=>{var o;n.classList.add("vvw--loaderror");const a=document.createElement("p");a.className="vvw-img-err",a.setAttribute("role","alert"),a.textContent="Error loading image",(o=n.parentNode)==null||o.appendChild(a)})})}registerPointerListener(t){this.pointerListeners.push(t)}unregisterPointerListeners(){this.pointerListeners=[]}getInternalPointerListener(){const t=this.imageState;let e=0,i=!1,n=0;const r=33;let a=()=>{};function o(){return i||performance.now()-n<r}return l=>{if(l.event==="down"){if(a(),this.isZoomedIn&&l.pointers.length===1&&!o()){const c=this.pointers.getCentroid();t.setInitialCenter(c)}if(l.pointers.length>=2){i=!0;const c=this.pointers.getCentroid();e=this.pointers.getPointerDistance(l.pointers[0],l.pointers[1]),t.setInitialCenter(c)}}else if(l.event==="move"){if(this.isZoomedIn&&l.pointers.length===1&&l.lastPointerLen===0&&!o()){const c=this.pointers.getCentroid();t.move(c)}if(l.pointers.length>=2&&i){const c=this.pointers.getCentroid(),d=this.pointers.getPointerDistance(l.pointers[0],l.pointers[1]);t.scaleMove(d/e,c)}}else(l.event==="up"||l.event==="cancel")&&(i||this.isZoomedIn)&&(i?(n=performance.now(),i=!1,t.normalize()&&requestAnimationFrame(()=>{this.close()})):this.isZoomedIn&&l.pointers.length===0&&!o()&&(a=t.moveAndNormalize(l.pointer)));this.pointerListeners.forEach(c=>c({...l,hasInternalExecution:this.isZoomedIn||o(),abortController:this.abortController}))}}open(t=0){var c,d,f,L,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??0}`),this.options.arrowOnSmallScreens&&this.root.classList.add("vvw-arrow-sm");const i=this.options.preloads||0,n=t,{images:r,htmls:a}=this.getChildElements(i,n),o={htmlElements:{from:null,to:a},images:{from:null,to:r},index:{from:null,to:this.currentIndex},via:{next:!1,prev:!1},vistaView:this};this.setupFunction(o),this.currentChildren={htmls:a,images:r},a.forEach(m=>{this.imageContainer.appendChild(m)}),(c=this.qs(".vvw-close"))==null||c.addEventListener("click",()=>this.close()),(d=this.qs(".vvw-zoom-in"))==null||d.addEventListener("click",()=>this.zoomIn()),(f=this.qs(".vvw-zoom-out"))==null||f.addEventListener("click",()=>this.zoomOut()),(L=this.qs(".vvw-prev>button"))==null||L.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 l={};[...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(m=>{typeof m!="string"&&(l[m.name]=m)}),this.root.querySelectorAll("button[data-vvw-control]").forEach(m=>{const u=m;u.addEventListener("click",E=>{const x=E.currentTarget.dataset.vvwControl,p=l[x],S=this.currentChildren.images.find(T=>T.index===this.currentIndex);p&&S&&(p.onClick.constructor.name==="AsyncFunction"?(u.classList.add("vvw--loading"),p.onClick(S,this).finally(()=>{u.classList.remove("vvw--loading")})):p.onClick(S,this))})}),this.initFunction(this),requestAnimationFrame(()=>{requestAnimationFrame(()=>{var m;(m=this.root)==null||m.addEventListener("transitionend",()=>{var u;(u=this.root)==null||u.classList.add("vvw--settled"),this.imageState.reset(),this.waitForImagesToLoad()},{once:!0}),this.root.classList.add("vvw--active"),this.displayActiveIndex(),this.options.onOpen&&this.options.onOpen(this),this.options.onImageView&&this.options.onImageView(o)})})}async close(t=!0){C.somethingOpened===this&&this.root&&(t?await new Promise(e=>{let n=0;this.root.addEventListener("transitionend",r=>{r.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=""}),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="",C.somethingOpened=null,this.closeFunction(this),this.options.onClose&&this.options.onClose(this))}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)})}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})}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)}getCurrentIndex(){return C.somethingOpened!==this?-1:this.currentIndex}}function st(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 ot({elements:s,...t}){if(!s)throw new Error("No elements");let e=st(s);if(typeof e=="string")return null;const i=new nt(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=M,v.close=k,v.init=q,v.setup=z,v.transition=O,v.vistaView=ot,v.vistaViewDownload=R,Object.defineProperty(v,Symbol.toStringTag,{value:"Module"})}));
+    </div>`);return[...(s==null?void 0:s.topLeft)||[],...(s==null?void 0:s.topCenter)||[],...(s==null?void 0:s.topRight)||[],...(s==null?void 0:s.bottomLeft)||[],...(s==null?void 0:s.bottomCenter)||[],...(s==null?void 0:s.bottomRight)||[]].forEach(i=>{if(typeof i!="string"&&i.control){const n=e.querySelector(`[data-vvw-control="${i.name}"]`),o=i.control();n&&o&&n.appendChild(o)}}),e}function W(s){}function R(s){K(s)}function K(s){let t={x:0,y:0},e={x:0,y:0},i=null;s.registerPointerListener(n=>{var o;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},(o=n.abortController)==null||o.abort()),n.event==="move"){e={x:n.pointer.x,y:n.pointer.y};const a=e.x-t.x,l=e.y-t.y;if(!i&&Math.abs(l)>Math.abs(a)||i==="y"){const h=l/window.innerHeight*100;s.imageContainer.style.transition="none",s.imageContainer.style.transform=`translateY(${h}vh)`,i="y"}else if(!i&&Math.abs(a)>Math.abs(l)||i==="x"&&n.state.elmLength>1){const h=a/window.innerWidth*100;s.imageContainer.style.transition="none",s.imageContainer.style.transform=`translateX(${h}vw)`,i="x"}}if(n.event==="up"||n.event==="cancel"){let a=function(l){var h;(h=s.imageContainer)==null||h.addEventListener("transitionend",function f(){var d;(d=s.imageContainer)==null||d.removeEventListener("transitionend",f),s.imageContainer.style.transition="",s.imageContainer.style.transform=""}),s.imageContainer.style.transition="transform 222ms ease",s.imageContainer.style.transform=l};if(i==="y"){const l=e.y-t.y;Math.abs(l)>144?(s.imageContainer.style.transition="transform 222ms ease",s.imageContainer.style.transform="translateY(0vh)",s.close()):a("translateY(0vh)")}if(i==="x"&&n.state.elmLength>1){const l=e.x-t.x;s.imageContainer.style.transition="",l>64?s.prev():l<-64?s.next():a("translateX(0vw)")}i=null,t={x:0,y:0},e={x:0,y:0}}}})}function z(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"}function T(s){}function H({vistaView:s,htmlElements:{to:t},index:{from:e,to:i}},n){const{imageContainer:o,options:a}=s,{isReducedMotion:l}=s.state;if(!(!t||n.aborted||l||!(Math.abs(i-e)===1||e===0&&i===s.state.elmLength-1||e===s.state.elmLength-1&&i===0)))return{cleanup:()=>{o.style.transition="",o.style.transform=""},transitionEnded:new Promise(f=>{o.addEventListener("transitionend",()=>{f()},{once:!0}),o.addEventListener("transitioncancel",()=>{n.aborted&&f()},{once:!0});const d=Math.round(a.animationDurationBase*100)/100,u=i===e+1||e===s.state.elmLength-1&&i===0?"translateX(-100vw)":"translateX(100vw)";o.style.transition=`transform ${d}ms ease`,o.style.transform=u})}}function D(s){const t=window.innerWidth,e=window.innerHeight,i=s.naturalWidth,n=s.naturalHeight;if(!i||!n)throw console.error("Error",s),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 l,h;return o>a?(l=t,h=t/o):(h=e,l=e*o),{width:l,height:h}}class x{static ease(t,e,i){const n=e-t,o=t+n*.2;return Math.abs(n)<i?e:o}static play(t,e,i){if(i()){requestAnimationFrame(()=>{this.play(t,e,i)});return}this.map.get(t)&&(t.element.classList.contains("vvw--load-cancelled")||requestAnimationFrame(()=>{var d,u,v,p,g,m,w,b,E,S;const n=this.map.get(t);if(!n||!t.element||t.element.classList.contains("vvw--load-cancelled"))return;const{current:o,target:a,log:l}=n;let h={};a.width!==void 0&&(h.width=this.ease(o._width,a.width,1)),a.height!==void 0&&(h.height=this.ease(o._height,a.height,1)),((d=a.transform)==null?void 0:d.x)!==void 0&&(h.transform=h.transform||{},h.transform.x=this.ease(o._transform.x,a.transform.x,1)),((u=a.transform)==null?void 0:u.y)!==void 0&&(h.transform=h.transform||{},h.transform.y=this.ease(o._transform.y,a.transform.y,1)),((v=a.transform)==null?void 0:v.scale)!==void 0&&(h.transform=h.transform||{},h.transform.scale=this.ease(o._transform.scale,a.transform.scale,.005)),((p=a.translate)==null?void 0:p.x)!==void 0&&(h.translate=h.translate||{},h.translate.x=this.ease(o._translate.x,a.translate.x,1)),((g=a.translate)==null?void 0:g.y)!==void 0&&(h.translate=h.translate||{},h.translate.y=this.ease(o._translate.y,a.translate.y,1)),h.width!==void 0&&(o.width=h.width),h.height!==void 0&&(o.height=h.height),h.translate&&(o.translate={...o.translate,...h.translate}),h.transform&&(o.transform={...o.transform,...h.transform}),(a.width===void 0||o._width===a.width)&&(a.height===void 0||o._height===a.height)&&(((m=a.transform)==null?void 0:m.x)===void 0||o._transform.x===a.transform.x)&&(((w=a.transform)==null?void 0:w.y)===void 0||o._transform.y===a.transform.y)&&(((b=a.transform)==null?void 0:b.scale)===void 0||o._transform.scale===a.transform.scale)&&(((E=a.translate)==null?void 0:E.x)===void 0||o._translate.x===a.translate.x)&&(((S=a.translate)==null?void 0:S.y)===void 0||o._translate.y===a.translate.y)?(this.map.delete(t),e()):(this.map.set(t,{current:o,target:a,log:l}),this.play(t,e,i))}))}static stop(t){const e=this.map.get(t);return this.map.delete(t),e}static start({vistaImage:t,target:e,onComplete:i,shouldWait:n}){this.stop(t),this.map.set(t,{current:t.state,target:e}),this.play(t,i,n)}}r(x,"map",new Map);function M(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 l=o/a,h=i/n;switch(e){case"fill":return{width:i,height:n};case"none":return{width:o,height:a};case"contain":return l>h?{width:i,height:i/l}:{width:n*l,height:n};case"cover":return l<h?{width:i,height:i/l}:{width:n*l,height:n};case"scale-down":{const f={width:o,height:a},d=l>h?{width:i,height:i/l}:{width:n*l,height:n};return d.width<=f.width&&d.height<=f.height?d:f}}return{width:i,height:n}}class F{constructor(t){r(this,"state");r(this,"parsedSrcSet");r(this,"isReady",!1);r(this,"isThrowing",!1);r(this,"thumb",null);r(this,"pos");r(this,"index");r(this,"config");r(this,"origin");r(this,"initH",0);r(this,"initW",0);r(this,"fullH",0);r(this,"fullW",0);r(this,"maxW",0);r(this,"minW",0);r(this,"defaultWH",200);r(this,"isZoomedIn",!1);r(this,"isCancelled",!1);r(this,"isLoadedResolved",null);r(this,"isLoadedRejected",null);r(this,"isLoaded",new Promise((t,e)=>{this.isLoadedResolved=t,this.isLoadedRejected=e}));r(this,"replacement",null);r(this,"originalParent",null);r(this,"originalNextSibling",null);r(this,"originalStyle","");r(this,"thumbImage",null);r(this,"fittedSize",null);r(this,"maxZoomLevel");r(this,"vistaView");r(this,"transitionState",null);r(this,"transitionShouldWait",()=>!1);r(this,"initPointerCenter",{x:0,y:0});r(this,"onScale");var i;this.state=this.createState(),this.pos=t.pos,this.index=t.index,this.config=t.elm.config,this.parsedSrcSet=t.elm.parsedSrcSet,this.origin=t.elm.origin,this.maxZoomLevel=t.maxZoomLevel,this.vistaView=t.vistaView,this.onScale=t.onScale,t.transitionState&&(this.transitionState=t.transitionState),t.transitionShouldWait&&(this.transitionShouldWait=t.transitionShouldWait),this.initPointerCenter={x:window.innerWidth/2,y:window.innerHeight/2};const e=this.pos===0?(i=this.origin)==null?void 0:i.image:null;if(this.originalParent=(e==null?void 0:e.parentElement)||null,this.originalNextSibling=(e==null?void 0:e.nextSibling)||null,e&&this.originalParent){this.originalStyle=e.style.cssText,this.thumbImage=e;const n=e.cloneNode(!0);this.originalParent.insertBefore(n,e),this.replacement=n,this.thumb=document.createElement("div"),this.thumb.classList.add("vvw-img-lo");const{width:o,height:a}=this.thumbImage?M(this.thumbImage):{width:0,height:0};this.fittedSize={width:o,height:a},this.thumb.appendChild(e),e.style.width="100%",e.style.height="100%",e.style.objectFit=this.origin.objectFit}}createState(){const t=this;return{_t:this,_width:0,_height:0,_transform:{x:0,y:0,scale:1},_translate:{x:0,y:0},_lessThanMinWidth:!1,get width(){return this._width},set width(e){this._width=e,t.onWidthChange(e)},get height(){return this._height},set height(e){this._height=e,t.onHeightChange(e)},get transform(){return this._transform},set transform(e){this._transform=e,t.onTransformChange(e)},get translate(){return this._translate},set translate(e){this._translate=e,t.onTranslateChange(e)},get lessThanMinWidth(){return this._lessThanMinWidth},set lessThanMinWidth(e){this._lessThanMinWidth=e,t.onLessThanMinWidthChange(e)}}}onLessThanMinWidthChange(t){t?this.element.style.opacity="0.5":this.element.style.opacity=""}onTranslateChange(t){this.element.style.translate=`calc(-50% + ${t.x}px) calc(-50% + ${t.y}px)`}onTransformChange(t){const e=`translate3d(${t.x}px, ${t.y}px, 0px) scale3d(${t.scale}, ${t.scale}, 1)`;this.element.style.transform=e}onWidthChange(t){this.element.style.width=`${t}px`}onHeightChange(t){this.element.style.height=`${t}px`}onImageReady(){}animateZoom(t,e){}scaleMove(t,e,i){}momentumThrow(t){return()=>{}}async init(){await this.isLoaded;const t=this.element;this.transitionState&&this.transitionState.current.width&&this.transitionState.current.height?(this.state.width=this.transitionState.current.width,this.state.height=this.transitionState.current.height):t.classList.contains("vvw--loaded")||(this.state.width=this.initW,this.state.height=this.initH);const e=()=>{this.isCancelled||x.start({vistaImage:this,target:{width:this.fullW,height:this.fullH},onComplete:()=>{this.isCancelled||(this.isReady=!0,t.classList.add("vvw--ready"),this.onImageReady())},shouldWait:this.transitionShouldWait})};this.pos<-1||this.pos>1?(this.state.width=this.fullW,this.state.height=this.fullH,t.classList.add("vvw--loaded"),t.classList.add("vvw--ready"),this.isReady=!0):t.classList.contains("vvw--loaded")?t.classList.contains("vvw--ready")?(this.isReady=!0,this.onImageReady()):e():(t.classList.add("vvw--loaded"),setTimeout(()=>{this.isCancelled||e()},333))}getFullSizeDim(){const{width:t,height:e}=this.thumb.getBoundingClientRect(),i=t/e;let n=window.innerWidth,o=window.innerHeight;return i>window.innerWidth/window.innerHeight?o=n/i:n=o*i,{width:n,height:o}}setSizes(t={}){var l,h,f;const{stableSize:e=!0,initDimension:i}=t;if(!this.origin)return;const n=this.thumb;let o={width:this.defaultWH,height:this.defaultWH,top:0,left:0};if(n){o=(((l=this.origin)==null?void 0:l.anchor)||this.replacement).getBoundingClientRect();const d=n.style;d.width=o.width+"px",d.height=o.height+"px",d.top="50%",d.left="50%",d.translate="-50% -50%",d.position="fixed",d.objectFit=this.origin.objectFit,d.borderRadius=this.origin.borderRadius;const u=Math.min(Math.max(o.left,-o.width),window.innerWidth+o.width)-window.innerWidth/2+o.width/2,v=Math.min(Math.max(o.top,-o.height),window.innerHeight+o.height)-window.innerHeight/2+o.height/2;d.setProperty("--vvw-init-radius",d.borderRadius),d.setProperty("--vvw-pulse-radius",`calc(1.3 * ${d.borderRadius})`),d.setProperty("--vvw-init-x",`${u}px`),d.setProperty("--vvw-init-y",`${v}px`),i&&(d.setProperty("--vvw-current-x",`${u}px`),d.setProperty("--vvw-current-y",`${v}px`))}if(!i){const{width:d,height:u}=this.thumbImage?M(this.thumbImage):{width:0,height:0};this.fittedSize={width:d,height:u}}const a=this.element;if(this.initW=Math.min(((h=this.fittedSize)==null?void 0:h.width)??0,o.width),this.initH=Math.min(((f=this.fittedSize)==null?void 0:f.height)??0,o.height),a.style.setProperty("--vvw-init-w",this.initW+"px"),a.style.setProperty("--vvw-init-h",this.initH+"px"),a.style.setProperty("--vvw-init-radius",this.origin.borderRadius),a.style.objectFit="cover",!i){if(this.isReady&&!this.isCancelled){const{width:d,height:u}=this.getFullSizeDim();this.fullH=u,this.fullW=d,this.minW=this.fullW*.5}!this.isZoomedIn&&e&&this.normalize()}}normalize(){this.state.transform={x:0,y:0,scale:1},this.state.translate={x:0,y:0},this.state.width=this.fullW,this.state.height=this.fullH,this.isZoomedIn=!1}getFromParsedSrcSet(t){if(!this.parsedSrcSet||this.parsedSrcSet.length===0)return null;const e=t*(window.devicePixelRatio||1);let i=this.parsedSrcSet[this.parsedSrcSet.length-1];for(const n of this.parsedSrcSet)if(n.width>=e){i=n;break}return i.src}prepareClose(){x.stop(this),this.setFinalTransform()}cancelPendingLoad(){var t;this.isCancelled=!0,(t=this.element)==null||t.classList.add("vvw--load-cancelled")}setInitialCenter(t){this.initPointerCenter=t}destroy(){var t,e;this.originalParent&&this.thumbImage&&(this.thumbImage.style.cssText=this.originalStyle,this.originalNextSibling?this.originalParent.insertBefore(this.thumbImage,this.originalNextSibling):this.originalParent.appendChild(this.thumbImage)),this.originalParent=null,this.originalNextSibling=null,this.originalStyle="",this.thumbImage=null,this.replacement&&(this.replacement.remove(),this.replacement=null),(t=this.thumb)==null||t.remove(),(e=this.element)==null||e.remove(),this.thumb=null,this.origin=void 0,this.config={src:"",alt:""}}cloneStyleFrom(t,e){t!=null&&t.element&&(e&&(this.transitionState=e||null),t.element.classList.contains("vvw--loaded")&&(this.element.classList.add("vvw--loaded"),this.state.width=t.state.width,this.state.height=t.state.height),t.element.classList.contains("vvw--ready")&&this.element.classList.add("vvw--ready"))}toObject(){return structuredClone({config:{src:this.config.src,alt:this.config.alt,srcSet:this.config.srcSet},origin:this.origin?{src:this.origin.src,srcSet:this.origin.srcSet,borderRadius:this.origin.borderRadius,objectFit:this.origin.objectFit}:null,parsedSrcSet:this.parsedSrcSet,element:"src"in this.element?this.element.src:this.element.toString(),thumb:void 0,index:this.index,pos:this.pos,state:{width:this.state._width,height:this.state._height,transform:this.state._transform,translate:this.state._translate}})}setFinalTransform(t={}){const{propagateEvent:e=!0}=t;if(this.isReady){if(this.state.translate.x+=this.state.transform.x,this.state.translate.y+=this.state.transform.y,this.state.width*=this.state.transform.scale,this.state.height*=this.state.transform.scale,Math.abs(this.state.width-this.fullW)<1&&(this.state.width=this.fullW,this.state.height=this.fullH),Math.abs(this.state.translate.x)<1&&(this.state.translate.x=0),Math.abs(this.state.translate.y)<1&&(this.state.translate.y=0),this.state.translate={...this.state.translate},this.state.transform={x:0,y:0,scale:1},e){const i=this.toObject();this.vistaView.options.onContentChange&&this.vistaView.options.onContentChange(i,this.vistaView),this.vistaView.state.extensions.forEach(n=>{n.onContentChange&&n.onContentChange(i,this.vistaView)})}return{close:!0,cancel:()=>{}}}}}class O extends F{constructor(e){super(e);r(this,"element");r(this,"rect",null);r(this,"animateNormalizeTimeout",null);const i=document.createElement("img");i.alt=this.config.alt||"",i.classList.add("vvw-img-hi"),this.element=i,i.onerror=n=>{this.isLoadedRejected(n)},i.src=this.config.src,i.decode().then(()=>{this.onLoad()}).catch(n=>{this.isLoadedRejected(n)}),this.setSizes({stableSize:!1,initDimension:!0})}onWidthChange(e){super.onWidthChange(e);const i=this.getFromParsedSrcSet(e);if(i&&this.element.src!==i){const n=new Image;n.onload=()=>{n.decode().then(()=>{this.isCancelled||(this.element.src=i)})},n.src=i}}onLoad(){if(this.isCancelled)return;const e=this.element;e.width=e.naturalWidth,e.height=e.naturalHeight,this.maxW=e.naturalWidth*this.maxZoomLevel;const{width:i,height:n}=D(e);this.fullH=n,this.fullW=i,this.minW=this.fullW*.5,this.isLoadedResolved(!0)}getFullSizeDim(){return D(this.element)}normalize(){super.normalize();const e=this.element;e.style.objectFit="cover",e.style.borderRadius="0"}scaleMove(e,i,n=!1){if(!this.isReady||!this.element)return;this.rect||(this.rect=this.element.getBoundingClientRect()),i||(i=this.initPointerCenter);const o=this.rect.left+this.rect.width/2,a=this.rect.top+this.rect.height/2,l=this.initPointerCenter.x-o,h=this.initPointerCenter.y-a,f=l*(1-e),d=h*(1-e),u=i.x-this.initPointerCenter.x,v=i.y-this.initPointerCenter.y;n?x.start({vistaImage:this,target:{transform:{x:f+u,y:d+v,scale:e}},onComplete:()=>{this.setFinalTransform()},shouldWait:()=>!1}):this.state.transform={x:f+u,y:d+v,scale:e};const g=this.element.getBoundingClientRect().width*e;this.isZoomedIn=g>this.fullW,this.state.lessThanMinWidth=g<=this.minW,this.onScale({vistaImage:this,scale:g/this.fullW,isMax:g>=this.maxW,isMin:g<=this.fullW})}animateZoom(e,i){this.state.width*e<this.minW||this.scaleMove(e,i,!0)}momentumThrow(e){if(!this.isReady)return()=>{};if(!this.isThrowing)return this.setFinalTransform(),()=>{};if(Math.abs(e.x)<.1&&Math.abs(e.y)<.1){const n=this.element.getBoundingClientRect();return x.start({vistaImage:this,target:{transform:{x:n.right<window.innerWidth/2?this.state.transform.x+(window.innerWidth/2-n.right):n.left>window.innerWidth/2?this.state.transform.x-(n.left-window.innerWidth/2):this.state.transform.x,y:n.bottom<window.innerHeight/2?this.state.transform.y+(window.innerHeight/2-n.bottom):n.top>window.innerHeight/2?this.state.transform.y-(n.top-window.innerHeight/2):this.state.transform.y}},onComplete:()=>{this.isThrowing=!1,this.setFinalTransform()},shouldWait:()=>!1}),()=>{}}return requestAnimationFrame(()=>{if(!this.isThrowing)return this.momentumThrow({x:0,y:0});const i=this.element,n=this.state.transform;n.x+=e.x,n.y+=e.y;const o=i.getBoundingClientRect();n.x=n.x+e.x,n.y=n.y+e.y,o.right<window.innerWidth/2&&(n.x+=(window.innerWidth/2-o.right)*.1,e.x*=.7),o.left>window.innerWidth/2&&(n.x-=(o.left-window.innerWidth/2)*.1,e.x*=.7),o.bottom<window.innerHeight/2&&(n.y+=(window.innerHeight/2-o.bottom)*.1,e.y*=.7),o.top>window.innerHeight/2&&(n.y-=(o.top-window.innerHeight/2)*.1,e.y*=.7),this.state.transform=n,this.momentumThrow({x:e.x*.9,y:e.y*.9})}),()=>{x.stop(this),this.isThrowing=!1,this.setFinalTransform()}}animateNormalize(){this.animateNormalizeTimeout&&clearTimeout(this.animateNormalizeTimeout),this.animateNormalizeTimeout=setTimeout(()=>{x.start({vistaImage:this,target:{width:this.fullW,height:this.fullH,translate:{x:0,y:0},transform:{x:0,y:0,scale:1}},onComplete:()=>{this.setFinalTransform()},shouldWait:()=>!1})},50)}setFinalTransform(){if(!this.isReady)return;this.rect=null,super.setFinalTransform({propagateEvent:!1});const e=this.state.width<=this.minW;if(this.state.width>this.maxW)this.animateZoom(this.maxW/this.state.width);else if(!e&&this.state.width<this.fullW)this.animateNormalize();else if(this.pos===0){const i=this.toObject();this.vistaView.options.onContentChange&&this.vistaView.options.onContentChange(i,this.vistaView),this.vistaView.state.extensions.forEach(n=>{n.onContentChange&&n.onContentChange(i,this.vistaView)})}return{close:e,cancel:()=>x.stop(this)}}}class G{constructor(){r(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()}}class ${constructor(){r(this,"open",!1);r(this,"settled",!1);r(this,"closing",!1);r(this,"zoomedIn",!1);r(this,"children",{htmls:[],images:[]});r(this,"currentIndex",-1);r(this,"elmLength",0);r(this,"abortController",new AbortController);r(this,"isReducedMotion",!1);r(this,"extensions",new Set)}}function q(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 t=s instanceof HTMLAnchorElement?s:null,e=s instanceof HTMLImageElement?s:t==null?void 0:t.querySelector("img"),i=t?getComputedStyle(t):null,n=e?getComputedStyle(e):null;let o="0px",a=n?n.objectFit:"contain";return i&&q(i.borderRadius)?o=i.borderRadius:n&&q(n.borderRadius)&&(o=n.borderRadius),{borderRadius:o,objectFit:a}}function Q(s){const t=s.split(",").map(i=>i.trim()),e=[];for(const i of t){const[n,o]=i.split(" ").map(a=>a.trim());if(n&&o&&o.endsWith("w")){const a=parseInt(o.slice(0,-1),10);isNaN(a)||e.push({src:n,width:a})}}return e}function tt(s){const t=s instanceof HTMLImageElement?s:s.querySelector("img"),e=s.dataset.vistaviewSrc||s.getAttribute("href")||s.getAttribute("src")||(t==null?void 0:t.getAttribute("src"))||"",i=s.dataset.vistaviewSrcset||s.getAttribute("srcset")||(t==null?void 0:t.getAttribute("srcset"))||"";if(!e&&!i)throw console.error("VistaView Error:",s),new Error("VistaView: Element must have href, src, or srcSet");const n=i?Q(i):void 0,o=J(s);return{config:{src:e,alt:s.dataset.vistaviewAlt||s.getAttribute("alt")||(t==null?void 0:t.getAttribute("alt"))||"",srcSet:i||void 0},parsedSrcSet:n!=null&&n.length?n:void 0,origin:{anchor:s instanceof HTMLAnchorElement?s:void 0,image:t,src:e,srcSet:i,borderRadius:o.borderRadius,objectFit:o.objectFit}}}class V{constructor({elm:t,listeners:e}){r(this,"pointers",[]);r(this,"elm");r(this,"listeners",[]);r(this,"lastPointerDownId",null);r(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)}});r(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}))});r(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})))});r(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}))});r(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 _{constructor(t){r(this,"pointers",null);r(this,"lastDistance",0);r(this,"pinchMode",!1);r(this,"lastPinchEndTime",0);r(this,"PINCH_COOLDOWN",111);r(this,"cancelMove",()=>{});r(this,"pointerListeners",[]);r(this,"vvw");r(this,"imageContainer",null);r(this,"isPinching",()=>this.pinchMode||performance.now()-this.lastPinchEndTime<this.PINCH_COOLDOWN);r(this,"internalPointerListener",t=>{const e=this.vvw.state.children.images.find(i=>i.pos===0);if(t.event==="down"){if(this.cancelMove(),this.vvw.state.zoomedIn&&t.pointers.length===1&&!this.isPinching()){const i=this.pointers.getCentroid();e.setInitialCenter(i)}if(t.pointers.length>=2){this.pinchMode=!0;const i=this.pointers.getCentroid();this.lastDistance=this.pointers.getPointerDistance(t.pointers[0],t.pointers[1]),e.setInitialCenter(i)}}else if(t.event==="move"){if(this.vvw.state.zoomedIn&&t.pointers.length===1&&t.lastPointerLen===0&&!this.isPinching()){const i=this.pointers.getCentroid();e.scaleMove(1,i)}if(t.pointers.length>=2&&this.pinchMode){const i=this.pointers.getCentroid(),n=this.pointers.getPointerDistance(t.pointers[0],t.pointers[1]);e.scaleMove(n/this.lastDistance,i)}}else if((t.event==="up"||t.event==="cancel")&&(this.pinchMode||this.vvw.state.zoomedIn))if(this.pinchMode){this.lastPinchEndTime=performance.now(),this.pinchMode=!1;const i=e.setFinalTransform();i!=null&&i.cancel&&(this.cancelMove=i.cancel),i!=null&&i.close&&requestAnimationFrame(()=>{this.vvw.close()})}else this.vvw.state.zoomedIn&&t.pointers.length===0&&!this.isPinching()&&(e.isThrowing=!0,this.cancelMove=e.momentumThrow({x:t.pointer.movementX,y:t.pointer.movementY}));this.pointerListeners.forEach(i=>i({...t,state:this.vvw.state,hasInternalExecution:this.vvw.state.zoomedIn||this.isPinching(),abortController:this.vvw.state.abortController}))});r(this,"onKeyDown",t=>{const e=this.vvw;switch(t.key){case"ArrowLeft":t.preventDefault(),e.prev();break;case"ArrowRight":t.preventDefault(),e.next();break;case"ArrowUp":t.preventDefault(),e.zoomIn();break;case"ArrowDown":t.preventDefault(),e.zoomOut();break;case"Escape":t.preventDefault(),e.close();break}});r(this,"onScroll",t=>{t.preventDefault();const e=this.vvw,i=this.vvw.state.children.images.find(o=>o.pos===0),n=t.deltaY;i.setInitialCenter({x:t.clientX,y:t.clientY}),n<0?e.zoomIn():n>0&&e.zoomOut()});r(this,"onResizeHandler",()=>{this.vvw.state.children.images.forEach(t=>{t.setSizes()})});this.vvw=t}registerPointerListener(t){this.pointerListeners.push(t)}start(t){this.vvw.options.keyboardListeners&&window.addEventListener("keydown",this.onKeyDown),this.imageContainer=t,this.imageContainer.addEventListener("wheel",this.onScroll,{passive:!1}),window.addEventListener("resize",this.onResizeHandler),this.pointers=new V({elm:t,listeners:[this.internalPointerListener]})}stop(){this.vvw.options.keyboardListeners&&window.removeEventListener("keydown",this.onKeyDown),window.removeEventListener("resize",this.onResizeHandler),this.imageContainer.removeEventListener("wheel",this.onScroll),this.pointers.removeListeners(),this.pointerListeners=[]}}const C={somethingOpened:null};class A{constructor(t,e={}){r(this,"options");r(this,"state",new $);r(this,"imageContainer",null);r(this,"externalPointerListener",[]);r(this,"elements");r(this,"eventHandlers",null);r(this,"imageSetupFunction",W);r(this,"initFunction",R);r(this,"openFunction",z);r(this,"closeFunction",T);r(this,"transitionFunction",H);r(this,"throttle",new G);r(this,"root",null);r(this,"onClickElements",t=>{t.preventDefault();const e=t.currentTarget;e.dataset.vvwIdx&&this.open(parseInt(e.dataset.vvwIdx))});r(this,"defaultOnClickHandler",t=>t.preventDefault());r(this,"lastSwapTime",0);r(this,"isRapidSwap",!1);r(this,"isRapidSwapRelease",0);r(this,"transitionCleanup",null);r(this,"tempDeactivatedUi",[]);r(this,"tempDeactivationRequestBy",null);r(this,"isZoomedIn",!1);var i;this.elements=t,this.options={...y,...e,controls:{...y.controls,...e.controls}},this.options.imageSetupFunction&&(this.imageSetupFunction=this.options.imageSetupFunction),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.options.controls.topLeft||[],...this.options.controls.topRight||[],...this.options.controls.topCenter||[],...this.options.controls.bottomCenter||[],...this.options.controls.bottomLeft||[],...this.options.controls.bottomRight||[]].forEach(n=>{typeof n!="string"&&this.state.extensions.add(n)}),(i=this.options.extensions)==null||i.forEach(n=>{this.state.extensions.add(n)}),this.state.isReducedMotion=window.matchMedia("(prefers-reduced-motion: reduce)").matches,this.reset(),this.initFunction(this)}reset(){if(typeof this.elements=="string"){const t=this.qsOrigin(this.elements);this.state.elmLength=t.length,t.forEach((e,i)=>{const n=e;n.dataset.vvwIdx=i.toString(),n.removeEventListener("click",this.defaultOnClickHandler),n.removeEventListener("pointerup",this.onClickElements),n.addEventListener("click",this.defaultOnClickHandler),n.addEventListener("pointerup",this.onClickElements)})}else this.state.elmLength=this.elements.length}qs(t){return this.root?this.root.querySelector(t):null}qsOrigin(t){return document.querySelectorAll(t)}registerPointerListener(t){this.externalPointerListener.push(t)}getChildElements(t,e){const i=[],n=[],o=typeof this.elements=="string"?this.qsOrigin(this.elements):this.elements;for(let a=-t;a<=t;a++){const l=(e+a+o.length)%o.length,h=o[l],d={elm:h instanceof HTMLElement?tt(h):{config:h,origin:void 0,parsedSrcSet:void 0},pos:a,index:l,vistaView:this,maxZoomLevel:this.options.maxZoomLevel,transitionShouldWait:()=>this.isRapidSwap,onScale:({vistaImage:g,isMin:m,isMax:w})=>{var b,E,S,L;g.index===this.state.currentIndex&&(this.state.zoomedIn=!m,m?(b=this.qs(".vvw-zoom-out"))==null||b.setAttribute("disabled","true"):(E=this.qs(".vvw-zoom-out"))==null||E.removeAttribute("disabled"),w?(S=this.qs(".vvw-zoom-in"))==null||S.setAttribute("disabled","true"):(L=this.qs(".vvw-zoom-in"))==null||L.removeAttribute("disabled"))}};let u=null;this.state.extensions.forEach(g=>{!u&&g.onInitializeImage&&(u=g.onInitializeImage(d))});const v=u??new O(d),p=document.createElement("div");p.className="vvw-item",p.dataset.vvwPos=`${a}`,p.dataset.vvwIdx=`${l}`,v.thumb&&p.appendChild(v.thumb),p.appendChild(v.element),i.push(v),n.push(p)}return{htmls:n,images:i}}async swap(t,e){var p,g;this.reactivateUi();const i=this.options.preloads||0,n=this.state.currentIndex,{htmls:o,images:a}=this.getChildElements(i,n),l=this.imageContainer,h=this.state.children,f={htmlElements:{from:h.htmls,to:o},images:{from:h.images,to:a},index:{from:t,to:this.state.currentIndex},via:e||{next:!1,prev:!1},vistaView:this};this.imageSetupFunction(f),this.state.zoomedIn=!1,(p=this.qs(".vvw-zoom-out"))==null||p.setAttribute("disabled","true"),(g=this.qs(".vvw-zoom-in"))==null||g.removeAttribute("disabled");const u=performance.now()-this.lastSwapTime<this.options.rapidLimit;this.isRapidSwap=u;const{images:v}=this.state.children;if(this.state.children={htmls:o,images:a},this.displayCurrentInfo(),u)v.forEach(m=>{m.cancelPendingLoad(),m.destroy()});else{const m=this.state.abortController.signal,w=this.transitionFunction(f,m);w&&(this.transitionCleanup=w.cleanup,await w.transitionEnded),this.lastSwapTime=performance.now(),v.forEach(L=>{L.cancelPendingLoad()});const b=v.find(L=>L.index===n),E=b?x.stop(b):void 0,S=a.find(L=>L.index===n);S&&b&&S.cloneStyleFrom(b,E),v.forEach(L=>{L.destroy()})}l.innerHTML="",this.transitionCleanup&&this.transitionCleanup(),o.forEach(m=>{l.appendChild(m)}),a.forEach(m=>{m.init()}),u?(this.isRapidSwapRelease&&clearTimeout(this.isRapidSwapRelease),this.isRapidSwapRelease=setTimeout(()=>{this.isRapidSwap=!1},333)):this.isRapidSwap=!1,this.options.onImageView&&this.options.onImageView(f,this),this.state.extensions.forEach(m=>{m.onImageView&&m.onImageView(f,this)})}displayCurrentInfo(){const t=this.state.currentIndex;typeof this.elements=="string"&&this.qsOrigin(this.elements).forEach((a,l)=>{a.style.opacity="",l===t&&(a.style.opacity="0")});const e=this.qs(".vvw-index"),i=`${t+1}`,n=`${this.state.elmLength}`;e&&(e.textContent=`${i} / ${n}`);const o=this.qs(".vvw-desc");if(o){const a=this.state.children.images.find(h=>h.index===t),l=(a==null?void 0:a.config.alt)||"";l?(o.textContent=l,o.setAttribute("aria-label",`Image ${i} of ${n}: ${l}`),o.style.opacity=""):(o.textContent="",o.setAttribute("aria-label",`Image ${i} of ${n}`),o.style.opacity="0")}}deactivateUi(t,e){t.forEach(i=>{var n,o;i==="zoomIn"?(n=this.qs(".vvw-zoom-in"))==null||n.setAttribute("disabled","true"):i==="zoomOut"&&((o=this.qs(".vvw-zoom-out"))==null||o.setAttribute("disabled","true")),this.tempDeactivatedUi.push(i)}),this.tempDeactivationRequestBy=e||null,this.state.extensions.forEach(i=>{i.onDeactivateUi&&i.onDeactivateUi(t,this.tempDeactivationRequestBy,this)})}reactivateUi(){this.tempDeactivatedUi.forEach(t=>{var e,i;t==="zoomIn"?(e=this.qs(".vvw-zoom-in"))==null||e.removeAttribute("disabled"):t==="zoomOut"&&((i=this.qs(".vvw-zoom-out"))==null||i.removeAttribute("disabled"))}),this.state.extensions.forEach(t=>{t.onReactivateUi&&t.onReactivateUi(this.tempDeactivatedUi,this.tempDeactivationRequestBy,this)}),this.tempDeactivatedUi=[],this.tempDeactivationRequestBy=null}open(t=0){var h,f,d,u,v,p,g;if(C.somethingOpened){console.warn("Another VistaView instance is already opened. Close it first before opening a new one.");return}C.somethingOpened=this,this.reset(),(t<0||t>=this.state.elmLength)&&(t=(t%this.state.elmLength+this.state.elmLength)%this.state.elmLength),this.state.currentIndex=t,document.body.style.overflow="hidden";const e=U({controls:this.options.controls});if(document.body.append(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 i=this.options.preloads||0,n=t,{images:o,htmls:a}=this.getChildElements(i,n),l={htmlElements:{from:null,to:a},images:{from:null,to:o},index:{from:null,to:this.state.currentIndex},via:{next:!1,prev:!1},vistaView:this};this.imageSetupFunction(l),this.state.children={htmls:a,images:o},a.forEach(m=>{this.imageContainer.appendChild(m)}),o.forEach(m=>{m.init()}),(h=this.qs(".vvw-close"))==null||h.addEventListener("click",()=>this.close()),(f=this.qs(".vvw-zoom-in"))==null||f.addEventListener("click",()=>this.zoomIn()),(d=this.qs(".vvw-zoom-out"))==null||d.addEventListener("click",()=>this.zoomOut()),(u=this.qs(".vvw-prev>button"))==null||u.addEventListener("click",()=>this.prev()),(v=this.qs(".vvw-next>button"))==null||v.addEventListener("click",()=>this.next()),this.state.elmLength<2&&((p=this.qs(".vvw-prev"))==null||p.classList.add("vvw--hidden"),(g=this.qs(".vvw-next"))==null||g.classList.add("vvw--hidden")),this.openFunction(this),this.eventHandlers=new _(this),this.externalPointerListener.forEach(m=>{this.eventHandlers.registerPointerListener(m)}),this.eventHandlers.start(this.imageContainer),requestAnimationFrame(()=>{requestAnimationFrame(()=>{var m;(m=this.root)==null||m.addEventListener("transitionend",()=>{var w;(w=this.root)==null||w.classList.add("vvw--settled")},{once:!0}),this.root.classList.add("vvw--active"),this.displayCurrentInfo(),this.options.onOpen&&this.options.onOpen(this),this.options.onImageView&&this.options.onImageView(l,this),this.state.extensions.forEach(w=>{w.onOpen&&w.onOpen(this),w.onImageView&&w.onImageView(l,this)})})})}async close(t=!0){C.somethingOpened===this&&this.root&&(this.eventHandlers.stop(),this.eventHandlers=null,this.state.children.images.forEach(e=>{e.prepareClose()}),t?await new Promise(e=>{let n=0;this.root.addEventListener("transitionend",o=>{o.target===this.root&&(n++,n===2&&typeof this.elements=="string"&&(this.state.children.images.forEach(a=>{a.destroy()}),this.qsOrigin(this.elements).forEach(a=>{a.style.opacity=""})),n===3&&e(null))}),this.root.classList.add("vvw--closing")}):typeof this.elements=="string"&&(this.state.children.images.forEach(e=>{e.destroy()}),this.qsOrigin(this.elements).forEach(e=>{e.style.opacity=""})),this.root.remove(),this.root=null,this.imageContainer=null,this.state.children={htmls:[],images:[]},this.state.currentIndex=-1,this.state.children.images.forEach(e=>{e.destroy()}),document.body.style.overflow="",C.somethingOpened=null,this.closeFunction(this),this.options.onClose&&this.options.onClose(this),this.state.extensions.forEach(e=>{e.onClose&&e.onClose(this)}))}destroy(){this.close(!1),this.externalPointerListener=[],typeof this.elements=="string"&&this.qsOrigin(this.elements).forEach(t=>{t.removeAttribute("data-vista-idx"),t.removeEventListener("click",this.defaultOnClickHandler),t.removeEventListener("pointerup",this.onClickElements)})}next(){if(C.somethingOpened!==this){console.warn("This VistaView instance is not opened.");return}const t=(this.state.currentIndex+1)%this.state.elmLength;this.view(t,{next:!0,prev:!1})}prev(){if(C.somethingOpened!==this){console.warn("This VistaView instance is not opened.");return}const t=(this.state.currentIndex-1+this.state.elmLength)%this.state.elmLength;this.view(t,{next:!1,prev:!0})}view(t,e){if(C.somethingOpened!==this){console.warn("This VistaView instance is not opened.");return}if(this.state.elmLength<2)return;(t<0||t>=this.state.elmLength)&&(t=(t%this.state.elmLength+this.state.elmLength)%this.state.elmLength);const i=this.state.currentIndex;this.state.currentIndex=t;const n=this.state.abortController;n==null||n.abort(),this.state.abortController=new AbortController,this.swap(i,e)}zoomIn(){if(C.somethingOpened!==this){console.warn("This VistaView instance is not opened.");return}this.throttle.fio(()=>{const t=this.state.children.images.find(e=>e.pos===0);t==null||t.animateZoom(1.68)},"zoom",222)}zoomOut(){if(C.somethingOpened!==this){console.warn("This VistaView instance is not opened.");return}this.throttle.fio(()=>{const t=this.state.children.images.find(e=>e.pos===0);t==null||t.animateZoom(.68)},"zoom",222)}getCurrentIndex(){return this.state.currentIndex}}function et(s){let t=null;if(typeof s=="string"){if(t=document.querySelectorAll(s),t.length===0)return new Error("No elements found in node list.").toString();for(let e=0;e<t.length;e++){const i=t[e],n=i.tagName.toLowerCase();if(n!=="img"&&n!=="a")return new Error(`Invalid element at index ${e}: expected <img>, <a>, got <${n}>`);if(n==="a"&&!(i.querySelector("img")!==null))return new Error(`Invalid <a> element at index ${e}: must contain <img>`)}}else{const e=s;for(let i=0;i<e.length;i++)if(!e[i].src)return new Error(`Invalid image data at index ${i}: must have 'src'`)}return s}function it({elements:s,...t}){if(!s)return console.error(s),console.error("no elements provided"),console.warn("VistaView: silently returning."),null;let e=et(s);if(e instanceof Error)return console.error(e),console.warn("VistaView: silently returning."),null;const i=new A(e,t);return{open:(n=0)=>i.open(n),reset:()=>i.reset(),close:()=>i.close(),next:()=>i.next(),prev:()=>i.prev(),zoomIn:()=>i.zoomIn(),zoomOut:()=>i.zoomOut(),destroy:()=>i.destroy(),getCurrentIndex:()=>i.getCurrentIndex(),view:n=>{i.view(n)}}}c.DefaultOptions=y,c.VistaBox=F,c.VistaHiresTransition=x,c.VistaImage=O,c.VistaImageEvent=_,c.VistaPointers=V,c.VistaState=$,c.VistaView=A,c.close=T,c.imageSetup=W,c.init=R,c.open=z,c.transition=H,c.vistaView=it,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})}));

package/dist/vue.d.ts

@@ -1,19 +1,38 @@
 import { PropType } from 'vue';
-import { VistaParams, VistaInterface } from './vistaview';
-export declare function useVistaView(options: VistaParams): VistaInterface;
+import { VistaParamsNeo, VistaInterface } from './vistaview';
+export declare function useVistaView(options: VistaParamsNeo): VistaInterface;
+export interface VistaViewProps extends VistaParamsNeo {
+    id?: string;
+    class?: string;
+    selector?: string;
+}
 export declare const VistaView: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    id: StringConstructor;
+    class: StringConstructor;
     selector: {
-        type: PropType<string>;
-        required: true;
+        type: StringConstructor;
+        default: string;
     };
-    class: StringConstructor;
+    elements: StringConstructor;
+    extensions: PropType<VistaParamsNeo["extensions"]>;
+    closeOnScroll: BooleanConstructor;
+    history: BooleanConstructor;
 }>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    id: StringConstructor;
+    class: StringConstructor;
     selector: {
-        type: PropType<string>;
-        required: true;
+        type: StringConstructor;
+        default: string;
     };
-    class: StringConstructor;
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    elements: StringConstructor;
+    extensions: PropType<VistaParamsNeo["extensions"]>;
+    closeOnScroll: BooleanConstructor;
+    history: BooleanConstructor;
+}>> & Readonly<{}>, {
+    selector: string;
+    closeOnScroll: boolean;
+    history: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 //# sourceMappingURL=vue.d.ts.map

package/dist/vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vue.d.ts","sourceRoot":"","sources":["../src/vue.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmD,KAAK,QAAQ,EAAE,MAAM,KAAK,CAAC;AAErF,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE/D,wBAAgB,YAAY,CAAC,OAAO,EAAE,WAAW,GAAG,cAAc,CAqBjE;AAED,eAAO,MAAM,SAAS;;cAIA,QAAQ,CAAC,MAAM,CAAC;;;;;;;;cAAhB,QAAQ,CAAC,MAAM,CAAC;;;;iGAyBpC,CAAC"}
+{"version":3,"file":"vue.d.ts","sourceRoot":"","sources":["../src/vue.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmD,KAAK,QAAQ,EAAE,MAAM,KAAK,CAAC;AAErF,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElE,wBAAgB,YAAY,CAAC,OAAO,EAAE,cAAc,GAAG,cAAc,CAwBpE;AAED,MAAM,WAAW,cAAe,SAAQ,cAAc;IACpD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,SAAS;;;;;;;;gBAUG,QAAQ,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;;;;;;;;;;;;;gBAAtC,QAAQ,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;;;;;;;4EA0C7D,CAAC"}

package/dist/vue.js

@@ -1,50 +1,69 @@
-import { defineComponent as m, ref as v, onMounted as d, onUnmounted as i, h as w } from "vue";
+import { defineComponent as g, ref as s, onMounted as n, onUnmounted as v, h as p } from "vue";
 import { vistaView as f } from "./vistaview.js";
-function y(r) {
+function V(r) {
   let e = null;
-  return d(() => {
+  return n(() => {
     e = f(r);
-  }), i(() => {
+  }), v(() => {
     e == null || e.destroy(), e = null;
   }), {
-    open: (o) => e == null ? void 0 : e.open(o),
+    open: (l) => e == null ? void 0 : e.open(l),
     close: () => (e == null ? void 0 : e.close()) ?? Promise.resolve(),
+    reset: () => e == null ? void 0 : e.reset(),
     next: () => e == null ? void 0 : e.next(),
     prev: () => e == null ? void 0 : e.prev(),
+    zoomIn: () => e == null ? void 0 : e.zoomIn(),
+    zoomOut: () => e == null ? void 0 : e.zoomOut(),
     getCurrentIndex: () => (e == null ? void 0 : e.getCurrentIndex()) ?? -1,
-    view: (o) => e == null ? void 0 : e.view(o),
+    view: (l) => e == null ? void 0 : e.view(l),
     destroy: () => e == null ? void 0 : e.destroy()
   };
 }
-const x = m({
+const x = g({
   name: "VistaView",
   props: {
+    id: String,
+    class: String,
     selector: {
       type: String,
-      required: !0
+      default: "> a"
     },
-    class: String
+    elements: String,
+    extensions: Array,
+    closeOnScroll: Boolean,
+    history: Boolean
   },
-  setup(r, { slots: e, attrs: o }) {
-    const t = v(null);
-    let l = null;
-    return d(() => {
-      if (t.value) {
-        if (!r.selector) throw new Error("VistaView: selector is required");
-        l = f({
-          ...o,
-          elements: t.value.querySelectorAll(r.selector)
-        });
+  setup(r, { slots: e, expose: l }) {
+    const u = s(null), t = s(null), d = r.id || `vvw-gallery-${Math.random().toString(36).substr(2, 9)}`;
+    return n(() => {
+      if (!u.value) return;
+      const { id: o, class: y, selector: i, ...m } = r;
+      t.value = f({
+        ...m,
+        elements: m.elements || `#${d} ${i}`
+      });
+    }), v(() => {
+      var o;
+      (o = t.value) == null || o.destroy(), t.value = null;
+    }), l({
+      get instance() {
+        return t.value;
       }
-    }), i(() => {
-      l == null || l.destroy(), l = null;
     }), () => {
-      var u;
-      return w("div", { ref: t, class: r.class }, (u = e.default) == null ? void 0 : u.call(e));
+      var o;
+      return p(
+        "div",
+        {
+          ref: u,
+          id: d,
+          class: r.class
+        },
+        (o = e.default) == null ? void 0 : o.call(e)
+      );
     };
   }
 });
 export {
   x as VistaView,
-  y as useVistaView
+  V as useVistaView
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vistaview",
-  "version": "0.7.8",
+  "version": "0.10.9",
   "description": "A lightweight, zero-dependency image lightbox library with smooth animations and touch support",
   "keywords": [
     "image",
@@ -44,7 +44,8 @@
       "import": "./dist/solid.js"
     },
     "./style.css": "./dist/style.css",
-    "./styles/*": "./dist/styles/*"
+    "./styles/*": "./dist/styles/*",
+    "./extensions/*": "./dist/extensions/*"
   },
   "peerDependencies": {
     "react": ">=17.0.0",
@@ -71,7 +72,8 @@
   ],
   "scripts": {
     "dev": "vite",
-    "build": "tsc && BUILD_ENV=prod vite build && BUILD_ENV=prod BUILD_UMD=true vite build",
+    "build": "tsc && BUILD_ENV=prod vite build && npm run build:umd",
+    "build:umd": "./build-umd.sh",
     "preview": "vite preview",
     "prepare": "husky",
     "test": "echo \"no test specified\"",
@@ -96,5 +98,8 @@
   },
   "repository": {
     "url": "https://github.com/juji/vistaview"
+  },
+  "dependencies": {
+    "isomorphic-dompurify": "^2.35.0"
   }
 }

package/dist/lib/defaults/setup.d.ts

@@ -1,3 +0,0 @@
-import { VistaData } from '../types';
-export declare function setup(_params: VistaData): void;
-//# sourceMappingURL=setup.d.ts.map

package/dist/lib/defaults/setup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../../src/lib/defaults/setup.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAG1C,wBAAgB,KAAK,CAAC,OAAO,EAAE,SAAS,QAEvC"}

package/dist/lib/errors.d.ts

@@ -1,4 +0,0 @@
-export declare class VistaIgnoredErr extends Error {
-    constructor(message: string);
-}
-//# sourceMappingURL=errors.d.ts.map

package/dist/lib/errors.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"errors.d.ts","sourceRoot":"","sources":["../../src/lib/errors.ts"],"names":[],"mappings":"AAAA,qBAAa,eAAgB,SAAQ,KAAK;gBAC5B,OAAO,EAAE,MAAM;CAI5B"}

package/dist/lib/image-state.d.ts

@@ -1,40 +0,0 @@
-import { VistaPointer } from './types';
-export type VistaImageStateScaleParams = {
-    scale: number;
-    isMax: boolean;
-    isMin: boolean;
-};
-export declare class VistaImageState {
-    private maxZoomLevel;
-    private image;
-    private rect;
-    private initialCenter;
-    private maxDimension;
-    private minDimension;
-    private accumulatedTranslate;
-    private scale;
-    private translate;
-    private onScale;
-    constructor(maxZoomLevel: number, onScale: (par: VistaImageStateScaleParams) => void);
-    clean(): void;
-    reset(): void;
-    setCurrentImage(image: HTMLImageElement): void;
-    setInitialCenter(center?: {
-        x: number;
-        y: number;
-    }): void;
-    move(center: {
-        x: number;
-        y: number;
-    }): void;
-    private snapToTargetIfClose;
-    scaleMove(ratio: number, center?: {
-        x: number;
-        y: number;
-    }): void;
-    moveAndNormalize(pointer: VistaPointer): () => void;
-    private animationTimestamp;
-    animateZoom(targetScale: number): void;
-    normalize(checkBound?: boolean): boolean | void;
-}
-//# sourceMappingURL=image-state.d.ts.map

package/dist/lib/image-state.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"image-state.d.ts","sourceRoot":"","sources":["../../src/lib/image-state.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAG5C,MAAM,MAAM,0BAA0B,GAAG;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,qBAAa,eAAe;IAC1B,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,KAAK,CAAiC;IAC9C,OAAO,CAAC,IAAI,CAAwB;IACpC,OAAO,CAAC,aAAa,CAA4C;IACjE,OAAO,CAAC,YAAY,CAAgB;IACpC,OAAO,CAAC,YAAY,CAAuE;IAC3F,OAAO,CAAC,oBAAoB,CAAkB;IAG9C,OAAO,CAAC,KAAK,CAAa;IAC1B,OAAO,CAAC,SAAS,CAAkB;IACnC,OAAO,CAAC,OAAO,CAA4D;gBAE/D,YAAY,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,GAAG,EAAE,0BAA0B,KAAK,IAAI;IAKpF,KAAK;IAUL,KAAK;IAYL,eAAe,CAAC,KAAK,EAAE,gBAAgB;IAsBvC,gBAAgB,CAAC,MAAM,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE;IAIlD,IAAI,CAAC,MAAM,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE;IAcrC,OAAO,CAAC,mBAAmB;IAO3B,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE;IA0D1D,gBAAgB,CAAC,OAAO,EAAE,YAAY,GAAG,MAAM,IAAI;IAqDnD,OAAO,CAAC,kBAAkB,CAAa;IACvC,WAAW,CAAC,WAAW,EAAE,MAAM;IA+B/B,SAAS,CAAC,UAAU,GAAE,OAAc,GAAG,OAAO,GAAG,IAAI;CAuGtD"}

package/dist/lib/pointers.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"pointers.d.ts","sourceRoot":"","sources":["../../src/lib/pointers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAGvF,qBAAa,aAAa;IACxB,OAAO,CAAC,QAAQ,CAAsB;IACtC,OAAO,CAAC,GAAG,CAAyB;IACpC,OAAO,CAAC,SAAS,CAA8B;IAC/C,OAAO,CAAC,iBAAiB,CAAgC;gBAE7C,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,gBAAgB;IAUhD,OAAO,CAAC,iBAAiB,CAQvB;IAEF,OAAO,CAAC,aAAa,CAiCnB;IAEF,OAAO,CAAC,aAAa,CAkBnB;IAEF,OAAO,CAAC,WAAW,CAuCjB;IAEF,OAAO,CAAC,eAAe,CAgCrB;IAEF,cAAc;IASd,eAAe;IAUf,gBAAgB,CAAC,QAAQ,EAAE,oBAAoB;IAI/C,mBAAmB,CAAC,QAAQ,EAAE,oBAAoB;IAIlD,kBAAkB,CAAC,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,YAAY,GAAG,MAAM;IAM9D,WAAW,IAAI;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI;CAe/C"}

package/dist/lib/utils.d.ts

@@ -1,27 +0,0 @@
-import { VistaElmProps, VistaImgIdx } from './types';
-export declare function isNotZeroCssValue(value?: string): false | string | undefined;
-export declare function getFittedSize(img: HTMLImageElement): {
-    width: number;
-    height: number;
-};
-export declare function getElmProperties(elm: HTMLElement): VistaElmProps;
-export declare function getElmProps(el: VistaImgIdx): {
-    fit: string;
-    pos: string;
-    br: string;
-    overflow: string;
-    nw: number;
-    nh: number;
-    w: number;
-    h: number;
-    top: number;
-    left: number;
-};
-export declare function setImageStyles(el: VistaImgIdx, hi: HTMLImageElement, lo: HTMLImageElement, init?: boolean): void;
-export declare function getFullSizeDim(img: HTMLImageElement): {
-    width: number;
-    height: number;
-};
-export declare function clamp(value: number, min: number, max: number): number;
-export declare function limitPrecision(value: number, precision?: number): number;
-//# sourceMappingURL=utils.d.ts.map

package/dist/lib/utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE1D,wBAAgB,iBAAiB,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,MAAM,GAAG,SAAS,CAI5E;AAED,wBAAgB,aAAa,CAAC,GAAG,EAAE,gBAAgB,GAAG;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CA8DA;AAED,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,WAAW,GAAG,aAAa,CAehE;AAED,wBAAgB,WAAW,CAAC,EAAE,EAAE,WAAW,GAAG;IAC5C,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd,CA6BA;AAED,wBAAgB,cAAc,CAC5B,EAAE,EAAE,WAAW,EACf,EAAE,EAAE,gBAAgB,EACpB,EAAE,EAAE,gBAAgB,EACpB,IAAI,GAAE,OAAe,QAuDtB;AAED,wBAAgB,cAAc,CAAC,GAAG,EAAE,gBAAgB,GAAG;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAwCA;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAErE;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,GAAE,MAAU,GAAG,MAAM,CAG3E"}