vistaview 0.5.3 → 0.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (56) hide show
  1. package/README.md +57 -56
  2. package/dist/lib/components.d.ts +5 -6
  3. package/dist/lib/components.d.ts.map +1 -1
  4. package/dist/lib/defaults/close.d.ts +3 -0
  5. package/dist/lib/defaults/close.d.ts.map +1 -0
  6. package/dist/lib/defaults/init.d.ts +3 -0
  7. package/dist/lib/defaults/init.d.ts.map +1 -0
  8. package/dist/lib/defaults/options.d.ts +3 -0
  9. package/dist/lib/defaults/options.d.ts.map +1 -0
  10. package/dist/lib/defaults/setup.d.ts +3 -0
  11. package/dist/lib/defaults/setup.d.ts.map +1 -0
  12. package/dist/lib/defaults/transition.d.ts +3 -0
  13. package/dist/lib/defaults/transition.d.ts.map +1 -0
  14. package/dist/lib/errors.d.ts +4 -0
  15. package/dist/lib/errors.d.ts.map +1 -0
  16. package/dist/lib/image-state.d.ts +39 -0
  17. package/dist/lib/image-state.d.ts.map +1 -0
  18. package/dist/lib/main.d.ts +3 -0
  19. package/dist/lib/main.d.ts.map +1 -0
  20. package/dist/lib/pointers.d.ts +23 -0
  21. package/dist/lib/pointers.d.ts.map +1 -0
  22. package/dist/lib/throttle.d.ts +7 -0
  23. package/dist/lib/throttle.d.ts.map +1 -0
  24. package/dist/lib/types.d.ts +71 -36
  25. package/dist/lib/types.d.ts.map +1 -1
  26. package/dist/lib/utils.d.ts +17 -9
  27. package/dist/lib/utils.d.ts.map +1 -1
  28. package/dist/lib/vista-view.d.ts +36 -70
  29. package/dist/lib/vista-view.d.ts.map +1 -1
  30. package/dist/react.d.ts +4 -12
  31. package/dist/react.d.ts.map +1 -1
  32. package/dist/react.js +17 -13
  33. package/dist/solid.d.ts +4 -12
  34. package/dist/solid.d.ts.map +1 -1
  35. package/dist/solid.js +21 -20
  36. package/dist/svelte.d.ts +2 -11
  37. package/dist/svelte.d.ts.map +1 -1
  38. package/dist/svelte.js +7 -6
  39. package/dist/vistaview.css +1 -1
  40. package/dist/vistaview.d.ts +3 -19
  41. package/dist/vistaview.d.ts.map +1 -1
  42. package/dist/vistaview.js +753 -643
  43. package/dist/vistaview.umd.js +11 -15
  44. package/dist/vue.d.ts +2 -10
  45. package/dist/vue.d.ts.map +1 -1
  46. package/dist/vue.js +15 -14
  47. package/package.json +8 -13
  48. package/dist/lib/defaults.d.ts +0 -9
  49. package/dist/lib/defaults.d.ts.map +0 -1
  50. package/dist/lib/pinch-detector.d.ts +0 -33
  51. package/dist/lib/pinch-detector.d.ts.map +0 -1
  52. package/dist/react.cjs +0 -1
  53. package/dist/solid.cjs +0 -1
  54. package/dist/svelte.cjs +0 -1
  55. package/dist/vistaview.cjs +0 -16
  56. package/dist/vue.cjs +0 -1
@@ -1,16 +1,12 @@
1
- (function(y,L){typeof exports=="object"&&typeof module<"u"?L(exports):typeof define=="function"&&define.amd?define(["exports"],L):(y=typeof globalThis<"u"?globalThis:y||self,L(y.VistaView={}))})(this,(function(y){"use strict";var vt=Object.defineProperty;var mt=(y,L,A)=>L in y?vt(y,L,{enumerable:!0,configurable:!0,writable:!0,value:A}):y[L]=A;var p=(y,L,A)=>mt(y,typeof L!="symbol"?L+"":L,A);function L(s){const t=getComputedStyle(s),i=s.getBoundingClientRect();return{objectFit:t.objectFit,borderRadius:t.borderRadius,objectPosition:t.objectPosition,overflow:t.overflow,top:i.top,left:i.left,width:i.width,height:i.height,naturalWidth:s.naturalWidth,naturalHeight:s.naturalHeight}}let A=null;function j(){return A||(window.trustedTypes||(window.trustedTypes={createPolicy:(s,t)=>t}),A=window.trustedTypes.createPolicy("vistaView-policy",{createHTML:s=>s,createScript:()=>{throw new Error("Not implemented")},createScriptURL:()=>{throw new Error("Not implemented")}}),A)}function O(s){const i=j().createHTML(s),n=document.createElement("template");n.innerHTML=i;const e=n.content;return n.remove(),e}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 K(s){const i=window.getComputedStyle(s).objectFit||"",{width:n,height:e}=s.getBoundingClientRect(),r=s.naturalWidth,l=s.naturalHeight;if(!i)return{width:n,height:e};if(!r||!l)return{width:n,height:e};const o=r/l,c=n/e;switch(i){case"fill":return{width:n,height:e};case"none":return{width:r,height:l};case"contain":return o>c?{width:n,height:n/o}:{width:e*o,height:e};case"cover":return o<c?{width:n,height:n/o}:{width:e*o,height:e};case"scale-down":{const a={width:r,height:l},d=o>c?{width:n,height:n/o}:{width:e*o,height:e};return d.width<=a.width&&d.height<=a.height?d:a}}return{width:n,height:e}}function F(s){const t=window.innerWidth,i=window.innerHeight,n=s.naturalWidth,e=s.naturalHeight;if(!n||!e)throw console.error("Error",s),new Error("Image natural dimensions are zero");if(n<t&&e<i)return{width:n,height:e};const r=n/e,l=t/i;let o,c;return r>l?(o=t,c=t/r):(c=i,o=i*r),{width:o,height:c}}function G(s,t){const i=window.innerHeight,n=window.innerWidth,e=s,r=t,l=Math.max(0,(e-n)/2)+n/2,o=Math.max(0,(r-i)/2)+i/2,c=-l,a=-o;return{maxDiffX:l,minDiffY:a,maxDiffY:o,minDiffX:c}}const J='<svg viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>',Q='<svg viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>',tt='<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>',et='<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>',it='<svg viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>',nt='<svg viewBox="0 0 24 24"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>';function V(){return{name:"download",icon:nt,onClick:async s=>{var r;const t=await fetch(s.src),i=await t.blob(),n=t.url,e=document.createElement("a");e.href=URL.createObjectURL(i),e.download=((r=n.split("/").pop())==null?void 0:r.split("?")[0].split("#")[0])||"download",document.body.appendChild(e),e.click(),document.body.removeChild(e)}}}function st(s){if(typeof s=="string")switch(s){case"zoomIn":return`<button class="vistaview-zoom-in-btn">${tt}</button>`;case"zoomOut":return`<button disabled class="vistaview-zoom-out-btn">${et}</button>`;case"close":return`<button class="vistaview-close-btn">${it}</button>`;case"indexDisplay":return'<div class="vistaview-index-display"></div>';case"description":return'<div class="vistaview-description"></div>';default:return""}return`<button data-vistaview-custom-control="${s.name}">${s.icon}</button>`}function X(s,t){var d,h;const i=s.imageElm?getComputedStyle(s.imageElm):null,n=(i==null?void 0:i.objectFit)||"",e=((d=s.imageElm)==null?void 0:d.naturalWidth)||"",r=((h=s.imageElm)==null?void 0:h.naturalHeight)||"",l=(i==null?void 0:i.width)||"",o=(i==null?void 0:i.height)||"",c=document.createElement("div");c.className="vistaview-item",c.dataset.vistaviewPos=`${t!==void 0?t:""}`,c.dataset.vistaviewIndex=s.index.toString();const a=O(`<img class="vistaview-image-lowres"
2
- style="${n?`object-fit:${n};`:""}${l?`width:${l};`:""}${o?`height:${o};`:""}"
3
- src="${s.thumb||s.src}"
4
- alt="${s.alt||""}"
5
- ${e?`width="${e}"`:""}
6
- ${r?`height="${r}"`:""}
7
- />
8
- <img class="vistaview-image-highres" src="${s.src}" alt="${s.alt||""}" />`);return c.appendChild(a),c}function ot({controls:s,isReducedMotion:t}){const i=e=>e?e.map(st).join(""):"";return O(`<div class="vistaview-root${t?" vistaview--reduced-motion":""}" id="vistaview-root">
9
- <div class="vistaview-container">
10
- <div class="vistaview-image-container"></div>
11
- <div class="vistaview-top-bar vistaview-ui"><div>${i(s==null?void 0:s.topLeft)}</div><div>${i(s==null?void 0:s.topCenter)}</div><div>${i(s==null?void 0:s.topRight)}</div></div>
12
- <div class="vistaview-bottom-bar vistaview-ui"><div>${i(s==null?void 0:s.bottomLeft)}</div><div>${i(s==null?void 0:s.bottomCenter)}</div><div>${i(s==null?void 0:s.bottomRight)}</div></div>
13
- <div class="vistaview-prev-btn vistaview-ui"><button>${J}</button></div>
14
- <div class="vistaview-next-btn vistaview-ui"><button>${Q}</button></div>
1
+ (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 M(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 A(s){const t=s.imageElm?M(s.imageElm):null,e=s.anchorElm?M(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 W(s,t,e,i=!1){const{fit:n,w:o,h:a,nw:r,nh:h,br:c,top:m,left:f}=A(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 T(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 P(s,t,e){return Math.min(Math.max(s,t),e)}function C(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 D=null;function X(){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 z(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 B(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 N(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(z(`<p class="vvw-img-err">Error loading image</p>
2
+ <img class="vvw-img-lo" src="${s.thumb||s.src}" alt="${s.alt||""}" />
3
+ <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 W(s,n,i,t===0),e}function j({controls:s}){const t=i=>i?i.map(B).join(""):"";return z(`<div class="vvw-root" id="vvw-root">
4
+ <div class="vvw-container">
5
+ <div class="vvw-bg"></div>
6
+ <div class="vvw-image-container"></div>
7
+ <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>
8
+ <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>
9
+ <div class="vvw-prev vvw-ui"><button>${q}</button></div>
10
+ <div class="vvw-next vvw-ui"><button>${k}</button></div>
15
11
  </div>
16
- </div>`)}let M=null,T=null,Z=null,R=null;function Y(s){q(s);const t=s.imageContainerElm,i=s.elements.length;if(!t)return;let n=0,e=0,r=0,l=0,o=null,c=0,a=!1;M=d=>{d.preventDefault(),d.stopPropagation(),s.isZoomed===!1&&(a=!0,n=d.pageX,e=d.pageY,r=d.pageX,l=d.pageY,c=Date.now(),o=null,t.setPointerCapture(d.pointerId))},T=d=>{if(d.preventDefault(),d.stopPropagation(),s.isZoomed!==!1||!a)return;const h=d.pageX-n,u=d.pageY-e;r=d.pageX,l=d.pageY,Math.abs(h)>=Math.abs(u)&&(o===null||o===!0)?(t.style.setProperty("--vistaview-pointer-diff-x",`${h}px`),o=!0):Math.abs(u)>Math.abs(h)&&(o===null||o===!1)&&(t.style.setProperty("--vistaview-pointer-diff-y",`${u}px`),o=!1)},R=d=>{if(d.preventDefault(),d.stopPropagation(),t.releasePointerCapture(d.pointerId),s.isZoomed!==!1||!a)return;a=!1,o=null;const h=Array.from(t.querySelectorAll(".vistaview-item"));t.style.removeProperty("--vistaview-pointer-diff-x"),t.style.removeProperty("--vistaview-pointer-diff-y"),h.forEach(u=>{u.style.transition="",u.style.translate=""})},Z=d=>{if(d.preventDefault(),d.stopPropagation(),t.releasePointerCapture(d.pointerId),s.isZoomed!==!1||!a)return;a=!1;const h=Array.from(t.querySelectorAll(".vistaview-item")),u=r-n,w=l-e,f=Date.now()-c,v=u/f,E=w/f,x=s.options.touchSpeedThreshold||.5,S=h.find(g=>g.dataset.vistaviewPos==="0"),P=Number(S.dataset.vistaviewIndex);function b(){h[0].removeEventListener("transitionend",b),t.style.removeProperty("--vistaview-pointer-diff-x"),t.style.removeProperty("--vistaview-pointer-diff-y"),h.forEach(g=>{g.style.transition="",g.style.translate=""})}function m(g="0%",I="0%"){h.forEach(C=>{C.style.transition=`translate ${s.options.animationDurationBase*.5}ms ease-out`,C.style.translate=`${g} ${I}`})}if(v<-x||v>x){let g=function(){h[0].removeEventListener("transitionend",g),setTimeout(()=>{const I=s.isReducedMotion,C=s.options.detectReducedMotion;s.isReducedMotion=!0,s.options.detectReducedMotion=!0,b(),s.view(v<-x?(P+1)%i:(P-1+i)%i,{next:v<-x,prev:v>x}),s.isReducedMotion=I,s.options.detectReducedMotion=C},100)};m(v<-x?"-100%":"100%"),h[0].addEventListener("transitionend",g)}else E<-x||E>x?(s.close(),m("0%","0%")):(h[0].addEventListener("transitionend",b),m("0%"),v===0&&E===0&&s.zoomIn())},t.addEventListener("pointermove",T),t.addEventListener("pointerup",Z),t.addEventListener("pointerdown",M),t.addEventListener("pointercancel",R)}function q(s){const t=s.imageContainerElm;t&&(T&&t.removeEventListener("pointermove",T),Z&&t.removeEventListener("pointerup",Z),M&&t.removeEventListener("pointerdown",M),R&&t.removeEventListener("pointercancel",R))}const B=s=>{Y(s)},_=({htmlElements:{to:s},index:{to:t},vistaView:i})=>{i.elements instanceof NodeList&&t!==null&&(i.elements.forEach(n=>n.style.opacity="1"),i.elements[t].style.opacity="0"),s&&s.forEach(n=>{const e=Number(n.dataset.vistaviewPos);e!==0?(n.style.zIndex="1",n.style.left=100*e+"%"):n.style.zIndex="2"})},N=async({htmlElements:{from:s},via:{next:t,prev:i},vistaView:n},e)=>{if(n.options.detectReducedMotion&&n.isReducedMotion)return;const r=s.filter(l=>l.dataset.vistaviewPos==="0"||(t?l.dataset.vistaviewPos==="1":l.dataset.vistaviewPos==="-1"));await new Promise((l,o)=>{let c=0,a=!1;if(e.aborted){o(new z("Transition aborted"));return}const d=h=>{if(a)return o(new z("Transition aborted"));if(e.aborted)return a||(a=!0),o(new z("Transition aborted"));h.currentTarget.removeEventListener("transitionend",d),c++,c>=r.length&&l(0)};r.forEach(h=>{h.style.transition=`translate ${n.options.animationDurationBase*.5}ms ease-out`,h.style.translate=t?"-100%":i?"100%":"0%",h.addEventListener("transitionend",d)})})},U=s=>{s.elements instanceof NodeList&&s.elements.forEach(t=>t.style.opacity="1"),q(s)};class z extends Error{constructor(t){super(t),this.name="VistaViewTransitionAbortedError"}}const k={detectReducedMotion:!0,animationDurationBase:333,zoomStep:500,maxZoomLevel:2,touchSpeedThreshold:.5,preloads:1,keyboardListeners:!0,arrowOnSmallScreens:!1,controls:{topLeft:["indexDisplay"],topRight:["zoomIn","zoomOut",V(),"close"],bottomCenter:["description"]}},D={somethingOpened:null};class rt{constructor(t,i){p(this,"options");p(this,"elements");p(this,"isReducedMotion");p(this,"currentIndex",{_value:null,_vistaView:null,_via:{next:!1,prev:!1},set value(t){var n,e,r;const i=this._value;this._value=t;for(const l in(n=this._vistaView)==null?void 0:n.transitionAbortControllers)(e=this._vistaView)==null||e.transitionAbortControllers[l].abort();(r=this._vistaView)==null||r.swap(i,this._value)},get value(){return this._value},get via(){return this._via},set via(t){this._via=t}});p(this,"rootElm",null);p(this,"imageContainerElm",null);p(this,"customControls",{});p(this,"currentImages",null);p(this,"currentItems",null);p(this,"isZoomed",!1);p(this,"onClickElements",t=>{t.preventDefault();const i=t.currentTarget;i.dataset.vistaviewIndex&&this.open(parseInt(i.dataset.vistaviewIndex))});p(this,"defaultOnClickHandler",t=>t.preventDefault());p(this,"onResizeHandler",null);p(this,"onKeyDown",null);p(this,"userSetup",_);p(this,"userTransition",N);p(this,"userClose",U);p(this,"userInit",B);p(this,"onZoomedPointerDown",null);p(this,"onZoomedPointerMove",null);p(this,"onZoomedPointerUp",null);p(this,"transitionAbortControllers",{});p(this,"loadImageTimeout",null);this.elements=t,this.currentIndex._vistaView=this,this.options={...k,...i||{},controls:{...k.controls,...(i==null?void 0:i.controls)||{}}},this.options.initFunction&&(this.userInit=this.options.initFunction),this.options.transitionFunction&&(this.userTransition=this.options.transitionFunction),this.options.closeFunction&&(this.userClose=this.options.closeFunction),this.options.initFunction&&(this.userInit=this.options.initFunction),this.isReducedMotion=window.matchMedia("(prefers-reduced-motion: reduce)").matches,this.elements instanceof NodeList&&this.elements.forEach((n,e)=>{n.dataset.vistaviewIndex=e.toString(),n.addEventListener("click",this.defaultOnClickHandler),n.addEventListener("pointerup",this.onClickElements)})}setFullSizeImageDim(t){var r,l;const i=t.getBoundingClientRect(),{width:n,height:e}=F(t);if(n===i.width&&e===i.height)(l=(r=t.parentElement)==null?void 0:r.querySelector(".vistaview-image-lowres"))==null||l.classList.add("vistaview-image--hidden"),t.classList.add("vistaview-image-settled");else{let o=0;const c=()=>{var a,d;o++,!(o<3)&&(t.removeEventListener("transitionend",c),(d=(a=t.parentElement)==null?void 0:a.querySelector(".vistaview-image-lowres"))==null||d.classList.add("vistaview-image--hidden"),t.classList.add("vistaview-image-settled"))};requestAnimationFrame(()=>{t.addEventListener("transitionend",c),t.style.width=`${n}px`,t.style.height=`${e}px`})}}async swap(t,i){var d,h;if(!D.somethingOpened||t===i||t===null)return;if(!this.imageContainerElm)throw new Error("VistaView: imageContainerElm is null in swap()");this.setIndexDisplay(),this.clearZoom();const{images:n,positions:e}=this.getCurrentIndexes(i),r=this.getImages(n),l=r.map((u,w)=>X(u,e[w])),o={htmlElements:{from:this.currentItems,to:l},images:{from:this.currentImages,to:r},index:{from:t,to:i},via:this.currentIndex.via,vistaView:this};this.userSetup(o);const c=Math.random().toString(36).substring(2,15)+Math.random().toString(36).substring(2,15);this.transitionAbortControllers[c]=new AbortController;try{await this.userTransition(o,this.transitionAbortControllers[c].signal)}catch(u){u instanceof z||console.warn(u)}const a=l.find(u=>u.dataset.vistaviewPos==="0");if(a){const u=a.dataset.vistaviewIndex,w=this.currentItems.find(v=>v.dataset.vistaviewIndex===u),f=w==null?void 0:w.querySelector(".vistaview-image-highres");if(f){const v=a.querySelector(".vistaview-image-highres");if(v.setAttribute("class",f.getAttribute("class")||""),v.setAttribute("style",f.getAttribute("style")||""),v.classList.remove("vistaview-image--zooming"),f.classList.contains("vistaview-image-loaded")&&!f.classList.contains("vistaview-image-settled")){const E=f.getBoundingClientRect();v.style.width=`${E.width}px`,v.style.height=`${E.height}px`}}}delete this.transitionAbortControllers[c],this.imageContainerElm.innerHTML="",l.forEach(u=>{var E;const w=u.querySelector(".vistaview-image-highres"),f=!!w.classList.contains("vistaview-image-loaded"),v=!!w.classList.contains("vistaview-image-settled");this.imageContainerElm.appendChild(u),f&&!v?this.setFullSizeImageDim(w):f&&v&&((E=u==null?void 0:u.querySelector(".vistaview-image-lowres"))==null||E.classList.add("vistaview-image--hidden"))}),this.setInitialDimPos(),this.currentImages=r,this.currentItems=l,this.setCurrentDescription(),this.updateZoomButtonsVisibility(),(h=(d=this.options).onImageView)==null||h.call(d,o),this.loadImageTimeout&&clearTimeout(this.loadImageTimeout),this.loadImageTimeout=setTimeout(()=>{this.loadImages()},333)}setZoomed(t){var n,e,r,l,o,c;if(this.isZoomed===t)return;let i=null;if(this.isZoomed){i&&cancelAnimationFrame(i);let a=this.isZoomed;if(a.classList.remove("vistaview-image--zooming"),this.onZoomedPointerDown&&((n=a.parentElement)==null||n.removeEventListener("pointerdown",this.onZoomedPointerDown),this.onZoomedPointerDown=null),this.onZoomedPointerMove&&((e=a.parentElement)==null||e.removeEventListener("pointermove",this.onZoomedPointerMove),this.onZoomedPointerMove=null),this.onZoomedPointerUp&&((r=a.parentElement)==null||r.removeEventListener("pointerup",this.onZoomedPointerUp),this.onZoomedPointerUp=null),a==null||a.style.removeProperty("--pointer-diff-x"),a==null||a.style.removeProperty("--pointer-diff-y"),setTimeout(()=>{a==null||a.classList.remove("vistaview-image--zooming")},500),this.isZoomed=!1,!t)return}if(t){let a=function({speedX:m,speedY:g}){i=requestAnimationFrame(()=>{if(Math.abs(m)<.01&&Math.abs(g)<.01)return;const I=t,C=window.innerWidth/2,H=window.innerHeight/2,$=I.getBoundingClientRect(),dt=$.bottom<H,ct=$.top>H,ht=$.right<C,ut=$.left>C;w+=m,f+=g,dt&&(f+=(H-$.bottom)/P),ct&&(f-=($.top-H)/P),ht&&(w+=(C-$.right)/P),ut&&(w-=($.left-C)/P),I==null||I.style.setProperty("--pointer-diff-x",`${w}px`),I==null||I.style.setProperty("--pointer-diff-y",`${f}px`),a({speedX:m*(1-b),speedY:g*(1-b)})})};this.isZoomed=t,t.classList.add("vistaview-image--zooming"),t==null||t.style.setProperty("--pointer-diff-x","0px"),t==null||t.style.setProperty("--pointer-diff-y","0px");let d=!1,h=0,u=0,w=0,f=0,v=0,E=0,x=0,S=15,P=5,b=.1;this.onZoomedPointerDown=m=>{i&&cancelAnimationFrame(i),m.preventDefault(),m.stopPropagation(),d=!0,h=m.pageX,u=m.pageY,x=performance.now(),t.setPointerCapture(m.pointerId)},this.onZoomedPointerMove=m=>{d&&(m.preventDefault(),v=m.pageX-h,E=m.pageY-u,t==null||t.style.setProperty("--pointer-diff-x",`${v+w}px`),t==null||t.style.setProperty("--pointer-diff-y",`${E+f}px`))},this.onZoomedPointerUp=m=>{if(d=!1,t.releasePointerCapture(m.pointerId),w+=v,f+=E,v===0&&E===0)this.zoomIn();else{let g=performance.now()-x;if(g===0)return;let I=(m.pageY-u)/g,C=(m.pageX-h)/g;a({speedX:C*S,speedY:I*S})}v=0,E=0},(l=t==null?void 0:t.parentElement)==null||l.addEventListener("pointerdown",this.onZoomedPointerDown),(o=t==null?void 0:t.parentElement)==null||o.addEventListener("pointermove",this.onZoomedPointerMove),(c=t==null?void 0:t.parentElement)==null||c.addEventListener("pointerup",this.onZoomedPointerUp);return}}zoomIn(){var r,l,o,c,a;const t=(r=this.rootElm)==null?void 0:r.querySelector('[data-vistaview-pos="0"] .vistaview-image-highres'),i=t.width,n=t.height;t.dataset.vistaviewInitialWidth||(t.dataset.vistaviewInitialWidth=i.toString()),t.dataset.vistaviewInitialHeight||(t.dataset.vistaviewInitialHeight=n.toString()),this.setZoomed(t);const e=(t.naturalWidth||0)*this.options.maxZoomLevel;if(i&&e&&i<e){const d=Math.min(i+this.options.zoomStep,e);t.style.width=`${d}px`;const h=d/i*n;t.style.height=`${h}px`,(o=(l=this.rootElm)==null?void 0:l.querySelector("button.vistaview-zoom-out-btn"))==null||o.removeAttribute("disabled"),t.dataset.vistaviewCurrentWidth=d.toString(),t.dataset.vistaviewCurrentHeight=h.toString(),d===e&&((a=(c=this.rootElm)==null?void 0:c.querySelector("button.vistaview-zoom-in-btn"))==null||a.setAttribute("disabled","true"))}}zoomOut(){var l,o,c,a,d;const t=(l=this.rootElm)==null?void 0:l.querySelector('[data-vistaview-pos="0"] .vistaview-image-highres'),i=t.width,n=t.height,e=t.dataset.vistaviewInitialWidth?parseInt(t.dataset.vistaviewInitialWidth):0,r=h=>{h.target===t&&(t.classList.remove("vistaview-image--zooming-out"),t.removeEventListener("transitionend",r))};if(t.addEventListener("transitionend",r),t.classList.add("vistaview-image--zooming-out"),i&&e&&i>e){const h=Math.max(i-this.options.zoomStep,e);t.style.width=`${h}px`;const u=h/i*n;t.style.height=`${u}px`,(c=(o=this.rootElm)==null?void 0:o.querySelector("button.vistaview-zoom-in-btn"))==null||c.removeAttribute("disabled"),t.dataset.vistaviewCurrentWidth=h.toString(),t.dataset.vistaviewCurrentHeight=u.toString();const{maxDiffX:w,minDiffY:f,maxDiffY:v,minDiffX:E}=G(h,u);let x=parseInt((t==null?void 0:t.style.getPropertyValue("--pointer-diff-x").replace("px",""))||"0"),S=parseInt((t==null?void 0:t.style.getPropertyValue("--pointer-diff-y").replace("px",""))||"0");x=Math.min(w,Math.max(E,x)),S=Math.min(v,Math.max(f,S)),t==null||t.style.setProperty("--pointer-diff-x",`${x}px`),t==null||t.style.setProperty("--pointer-diff-y",`${S}px`),h===e&&((d=(a=this.rootElm)==null?void 0:a.querySelector("button.vistaview-zoom-out-btn"))==null||d.setAttribute("disabled","true"),t.removeAttribute("data-vistaview-current-width"),t.removeAttribute("data-vistaview-current-height"),t.removeAttribute("data-vistaview-initial-width"),t.removeAttribute("data-vistaview-initial-height"),this.setZoomed(!1))}}clearZoom(){}getImages(t){return t.map((i,n)=>{const e=this.elements[i];if(e instanceof HTMLElement){const r=e.querySelector("img"),l=e.getAttribute("href")||"",o=e.getAttribute("src")||"",c=e.dataset.vistaviewSrc||l||o||(r==null?void 0:r.src)||"",a=e.dataset.vistaviewAlt||e.getAttribute("alt")||(r==null?void 0:r.alt)||"",d=e.dataset.vistaviewThumb||(r==null?void 0:r.src)||l||o||"";return{index:t[n],src:c,alt:a,thumb:d,imageElm:e instanceof HTMLImageElement?e:r,anchorElm:e instanceof HTMLAnchorElement?e:void 0}}else return{index:t[n],...e}})}setInitialDimPos(){var a,d;if(!this.rootElm)return;const t=(a=this.rootElm.querySelector('[data-vistaview-pos="0"]'))==null?void 0:a.dataset.vistaviewIndex,i=((d=this.currentImages)==null?void 0:d.find(h=>h.index===Number(t)))||null;if(!i)return;const n=i.imageElm?L(i.imageElm):void 0,e=i.anchorElm?L(i.anchorElm):void 0,r=(e==null?void 0:e.width)||(n==null?void 0:n.width)||0,l=(e==null?void 0:e.height)||(n==null?void 0:n.height)||0,o=((e==null?void 0:e.left)||(n==null?void 0:n.left)||0)+r/2,c=((e==null?void 0:e.top)||(n==null?void 0:n.top)||0)+l/2;this.rootElm.style.setProperty("--vistaview-container-initial-width",r+"px"),this.rootElm.style.setProperty("--vistaview-container-initial-height",l+"px"),this.rootElm.style.setProperty("--vistaview-container-initial-top",c+"px"),this.rootElm.style.setProperty("--vistaview-container-initial-left",o+"px"),this.rootElm.style.setProperty("--vistaview-image-border-radius",W(e==null?void 0:e.borderRadius)||W(n==null?void 0:n.borderRadius)||"0px")}updateZoomButtonsVisibility(){var e;const t=(e=this.rootElm)==null?void 0:e.querySelector('[data-vistaview-pos="0"] img.vistaview-image-highres');if(!t)return;const i=this;function n(){var d,h;const r=(d=i.rootElm)==null?void 0:d.querySelector("button.vistaview-zoom-in-btn"),l=(h=i.rootElm)==null?void 0:h.querySelector("button.vistaview-zoom-out-btn"),o=parseInt(t.style.width)||t.width,c=t.naturalWidth*i.options.maxZoomLevel,a=o<c&&c>0;r&&(r.style.display=a?"":"none"),l&&(l.style.display=a?"":"none")}t.complete&&t.naturalWidth>0?n():t.addEventListener("load",n)}loadImages(){if(!this.rootElm)return;this.rootElm.querySelectorAll(".vistaview-image-highres:not(.vistaview-image-loaded)").forEach((i,n)=>{const e=i,l=this.currentImages[n].imageElm,o={w:0,h:0};if(l){const{width:a,height:d}=K(l);o.w=Math.min(l.width,a),o.h=Math.min(l.height,d)}const c=()=>{var d;const a=()=>{var h;o.w&&o.h&&(e.style.width=`${o.w}px`,e.style.height=`${o.h}px`,e.style.setProperty("--vistaview-fitted-width",`${o.w}px`),e.style.setProperty("--vistaview-fitted-height",`${o.h}px`)),e.classList.add("vistaview-image-loaded"),e.width=e.naturalWidth,e.height=e.naturalHeight,setTimeout(()=>{this.setFullSizeImageDim(e)},100),(h=i.parentElement)!=null&&h.matches('[data-vistaview-pos="0"]')&&this.updateZoomButtonsVisibility()};if((d=this.rootElm)!=null&&d.classList.contains("vistaview--opened"))a();else{const h=setInterval(()=>{var u;(u=this.rootElm)!=null&&u.classList.contains("vistaview--opened")&&(clearInterval(h),a())},50)}};e.complete&&e.naturalWidth>0?c():(e.onload=c,e.onerror=()=>{var a;console.error("VistaView: failed to load image "+e.src),(a=e.parentElement)==null||a.classList.add("vistaview-image-load-failed")})})}setIndexDisplay(){this.elements.length!==1&&(this.rootElm.querySelector(".vistaview-index-display").textContent=`${this.currentIndex.value+1} / ${this.elements.length}`)}setCurrentDescription(){this.rootElm.querySelector(".vistaview-description").textContent=(this.currentImages[1]||this.currentImages[0]).alt||""}getCurrentIndexes(t){const i=this.options.preloads,n=this.elements.length,e=n<1||!i?[t]:[...new Set([...Array.from({length:i},(l,o)=>((t-i+o)%n+n)%n),t,...Array.from({length:i},(l,o)=>(t+1+o)%n)])],r=n<1||!i?[0]:e.map((l,o)=>o-Math.floor(e.length/2));return{images:e,positions:r}}setKeyboardListeners(){this.onKeyDown=t=>{switch(t.key){case"ArrowLeft":t.preventDefault(),this.prev();break;case"ArrowRight":t.preventDefault(),this.next();break;case"ArrowUp":t.preventDefault(),this.zoomIn();break;case"ArrowDown":t.preventDefault(),this.zoomOut();break;case"Escape":t.preventDefault(),this.close();break}},window.addEventListener("keydown",this.onKeyDown)}setResizeListeners(){this.onResizeHandler=()=>{var i;this.setInitialDimPos();const t=(i=this.rootElm)==null?void 0:i.querySelectorAll(".vistaview-image-highres.vistaview-image-loaded");t==null||t.forEach(n=>{const e=n,{width:r,height:l}=F(e);e.classList.contains("vistaview-image--zooming")?(e.dataset.vistaviewInitialWidth=r.toString(),e.dataset.vistaviewInitialHeight=l.toString()):(e.style.width=`${r}px`,e.style.height=`${l}px`)})},window.addEventListener("resize",this.onResizeHandler)}open(t=0){var o,c,a,d,h,u,w,f,v,E,x,S,P;if(D.somethingOpened){console.error("VistaView: another instance is already opened. Returning.");return}if(D.somethingOpened=this,this.currentIndex._value=t,document.body.prepend(ot({controls:this.options.controls,isReducedMotion:this.isReducedMotion})),this.rootElm=document.querySelector("#vistaview-root"),this.imageContainerElm=((o=this.rootElm)==null?void 0:o.querySelector(".vistaview-image-container"))||null,!this.rootElm||!this.imageContainerElm)throw D.somethingOpened=null,new Error("Failed to create VistaView element");this.options.arrowOnSmallScreens||this.rootElm.classList.add("vistaview-no-arrows-sm");const{images:i,positions:n}=this.getCurrentIndexes(t);this.currentImages=this.getImages(i);const e=this.currentImages.map((b,m)=>X(b,n[m]));this.currentItems=e;const r={htmlElements:{from:null,to:this.currentItems},images:{from:null,to:this.currentImages},index:{from:null,to:t},via:this.currentIndex.via,vistaView:this};this.userSetup(r),this.imageContainerElm.innerHTML="",this.currentItems.forEach(b=>{this.imageContainerElm.appendChild(b)});let l=0;this.rootElm.addEventListener("animationend",b=>{var m;b.currentTarget===this.rootElm&&(l++,l>=2&&((m=this.rootElm)==null||m.classList.add("vistaview--opened")))}),(c=this.rootElm.querySelector(".vistaview-close-btn"))==null||c.addEventListener("click",()=>this.close()),(a=this.rootElm.querySelector(".vistaview-zoom-in-btn"))==null||a.addEventListener("click",()=>this.zoomIn()),(d=this.rootElm.querySelector(".vistaview-zoom-out-btn"))==null||d.addEventListener("click",()=>this.zoomOut()),(h=this.rootElm.querySelector(".vistaview-prev-btn>button"))==null||h.addEventListener("click",()=>this.prev()),(u=this.rootElm.querySelector(".vistaview-next-btn>button"))==null||u.addEventListener("click",()=>this.next()),[...this.options.controls.topLeft||[],...this.options.controls.topRight||[],...this.options.controls.topCenter||[],...this.options.controls.bottomCenter||[],...this.options.controls.bottomLeft||[],...this.options.controls.bottomRight||[]].forEach(b=>{typeof b!="string"&&(this.customControls[b.name]=b)}),this.rootElm.querySelectorAll("button[data-vistaview-custom-control]").forEach(b=>{b.addEventListener("click",m=>{const g=this.customControls[m.currentTarget.dataset.vistaviewCustomControl],I=this.currentImages.find(C=>C.index===this.currentIndex.value);g&&I&&(g.onClick.constructor.name==="AsyncFunction"?(b.classList.add("vistaview-button--loading"),g.onClick(I).finally(()=>{b.classList.remove("vistaview-button--loading")})):g.onClick(I))})}),this.options.animationDurationBase&&this.rootElm.style.setProperty("--vistaview-animation-duration",`${this.options.animationDurationBase}`),this.options.initialZIndex!==void 0&&this.rootElm.style.setProperty("--vistaview-initial-z-index",`${this.options.initialZIndex}`),this.setInitialDimPos(),this.setResizeListeners(),this.options.keyboardListeners&&this.setKeyboardListeners(),this.elements.length===1&&((w=this.rootElm.querySelector(".vistaview-prev-btn"))==null||w.classList.add("vistaview-ui--none"),(f=this.rootElm.querySelector(".vistaview-next-btn"))==null||f.classList.add("vistaview-ui--none"),(v=this.rootElm.querySelector(".vistaview-index-display"))==null||v.classList.add("vistaview-ui--none")),this.rootElm&&this.rootElm.classList.add("vistaview--initialized"),this.loadImages(),this.setCurrentDescription(),this.setIndexDisplay(),this.userInit(this),(x=(E=this.options).onOpen)==null||x.call(E,r),(P=(S=this.options).onImageView)==null||P.call(S,r)}async close(t=!0){var n,e,r;if(D.somethingOpened!==this)return;t&&((n=this.rootElm)==null||n.classList.add("vistaview--closing"),await new Promise(l=>{var c;let o;(c=this.rootElm)==null||c.addEventListener("transitionend",a=>{a.currentTarget===this.rootElm&&(o&&clearTimeout(o),o=setTimeout(()=>{l()},333))})}));const i={htmlElements:{from:this.currentItems,to:null},images:{from:this.currentImages,to:null},index:{from:this.currentIndex.value,to:null},via:{prev:!1,next:!1},vistaView:this};this.userClose(this),(r=(e=this.options).onClose)==null||r.call(e,i),document.body.removeChild(this.rootElm),this.currentIndex._value=null,this.currentIndex._via={next:!1,prev:!1},this.rootElm=null,this.imageContainerElm=null,this.currentImages=null,this.currentItems=null,this.onResizeHandler&&(window.removeEventListener("resize",this.onResizeHandler),this.onResizeHandler=null),this.onKeyDown&&(window.removeEventListener("keydown",this.onKeyDown),this.onKeyDown=null),(this.onZoomedPointerDown||this.onZoomedPointerMove||this.onZoomedPointerUp)&&(this.setZoomed(!1),this.onZoomedPointerDown=null,this.onZoomedPointerMove=null,this.onZoomedPointerUp=null);for(const l in this.transitionAbortControllers)this.transitionAbortControllers[l].abort();this.transitionAbortControllers={},D.somethingOpened=null}destroy(){this.close(!1),this.elements instanceof NodeList&&this.elements.forEach(t=>{t.dataset.vistaviewIndex&&delete t.dataset.vistaviewIndex,t.removeEventListener("click",this.defaultOnClickHandler),t.removeEventListener("pointerup",this.onClickElements)})}view(t,i){D.somethingOpened===this&&(t<0&&(t=this.elements.length-1),t>=this.elements.length&&(t=0),this.currentIndex.via=i||{next:!1,prev:!1},this.currentIndex.value=t)}next(){D.somethingOpened===this&&this.view(this.currentIndex.value+1,{next:!0,prev:!1})}prev(){D.somethingOpened===this&&this.view(this.currentIndex.value-1,{next:!1,prev:!0})}getCurrentIndex(){return D.somethingOpened===this?this.currentIndex.value:-1}}function at(s){let t=null;if(typeof s=="string"?t=document.querySelectorAll(s):s instanceof NodeList&&(t=s),t)for(let i=0;i<t.length;i++){const n=t[i];if(!(n.dataset.vistaviewSrc||n.getAttribute("href")||n.getAttribute("src")||""))return`Element at index ${i} is missing 'src' / 'data-vistaview-src' / 'href' attribute.`}else{const i=s;for(let n=0;n<i.length;n++)if(!i[n].src)return`Element at index ${n} is missing 'src' attribute.`}return t||s}function lt({elements:s,...t}){if(!s)throw new Error("No elements");let i=at(s);if(typeof i=="string")return console.error(i),console.warn("VistaView: silently returning."),null;const n=new rt(i,t);return{open:(e=0)=>n.open(e),close:()=>n.close(),next:()=>n.next(),prev:()=>n.prev(),destroy:()=>n.destroy(),getCurrentIndex:()=>n.getCurrentIndex(),view:e=>{n.view(e)}}}y.DefaultOptions=k,y.VistaViewTransitionAbortedError=z,y.defaultClose=U,y.defaultInit=B,y.defaultSetup=_,y.defaultTransition=N,y.removeTouchActions=q,y.setTouchActions=Y,y.vistaView=lt,y.vistaViewDownload=V,Object.defineProperty(y,Symbol.toStringTag,{value:"Module"})}));
12
+ </div>`)}const H={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}}})}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*1.5*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=C(t.x-this.initialCenter.x),this.translate.y=C(t.y-this.initialCenter.y),this.image.style.transform=`translate3d(${this.translate.x}px, ${this.translate.y}px, 0px) scale(${this.scale})`)}scaleMove(t,e){if(!this.image)return;this.rect||(this.rect=this.image.getBoundingClientRect()),e||(e=this.initialCenter);const i=P(this.rect.width*t,this.minDimension.minWidth,this.maxDimension.width);this.onScale&&this.onScale({scale:i/(this.maxDimension.width/this.maxZoomLevel),isMax:i>=this.maxDimension.width,isMin:i<=this.minDimension.initialWidth}),this.scale=C(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=C(h+m),this.translate.y=C(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=C(this.translate.x+o),this.translate.y=C(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;let e=this.rect.width*this.scale,i=this.rect.height*this.scale;if(Math.round(e)===Math.round(this.minDimension.initialWidth)&&(e=this.minDimension.initialWidth,i=this.minDimension.initialHeight),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 L={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(W(i,n,o,!1),n.classList.contains("vvw--loaded")){const{width:a,height:r}=T(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={...H,...e,controls:{...H.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(S=>{const b=S.querySelector("img.vvw-img-hi");S.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(S),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(N(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}=T(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",()=>{n.classList.add("vvw--loaderror")})})}registerPointerListener(t){this.pointerListeners.push(t)}unregisterPointerListeners(){this.pointerListeners=[]}open(t=0){var c,m,f,E,y;if(L.somethingOpened)return;L.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(S=>S.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){L.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="",L.somethingOpened=null,this.closeFunction(this),this.options.onClose&&this.options.onClose(this))}next(){if(L.somethingOpened!==this)return;const t=(this.currentIndex+1)%this.elements.length;this.view(t,{next:!0,prev:!1})}prev(){if(L.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 L.somethingOpened!==this?-1:this.currentIndex}view(t,e){if(L.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=H,v.vistaView=nt,v.vistaViewDownload=F,Object.defineProperty(v,Symbol.toStringTag,{value:"Module"})}));
package/dist/vue.d.ts CHANGED
@@ -1,14 +1,6 @@
1
1
  import { PropType } from 'vue';
2
- import { VistaViewParams, VistaViewInterface, VistaViewImage } from './vistaview';
3
- export type { VistaViewParams, VistaViewInterface, VistaViewImage };
4
- export declare function useVistaView(options: VistaViewParams): {
5
- open: (i?: number) => void | undefined;
6
- close: () => void | undefined;
7
- next: () => void | undefined;
8
- prev: () => void | undefined;
9
- getCurrentIndex: () => number;
10
- view: (i: number) => void | undefined;
11
- };
2
+ import { VistaParams, VistaInterface } from './vistaview';
3
+ export declare function useVistaView(options: VistaParams): VistaInterface;
12
4
  export declare const VistaView: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
13
5
  selector: {
14
6
  type: PropType<string>;
package/dist/vue.d.ts.map CHANGED
@@ -1 +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,eAAe,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEvF,YAAY,EAAE,eAAe,EAAE,kBAAkB,EAAE,cAAc,EAAE,CAAC;AAEpE,wBAAgB,YAAY,CAAC,OAAO,EAAE,eAAe;eAatC,MAAM;;;;;cAKP,MAAM;EAEnB;AAED,eAAO,MAAM,SAAS;;cAIA,QAAQ,CAAC,MAAM,CAAC;;;;;;;;cAAhB,QAAQ,CAAC,MAAM,CAAC;;;;iGAyBpC,CAAC"}
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"}
package/dist/vue.js CHANGED
@@ -1,21 +1,22 @@
1
- import { defineComponent as w, ref as V, onMounted as d, onUnmounted as i, h as m } from "vue";
1
+ import { defineComponent as m, ref as v, onMounted as d, onUnmounted as i, h as w } from "vue";
2
2
  import { vistaView as f } from "./vistaview.js";
3
- function n(r) {
3
+ function y(r) {
4
4
  let e = null;
5
5
  return d(() => {
6
6
  e = f(r);
7
7
  }), i(() => {
8
8
  e == null || e.destroy(), e = null;
9
9
  }), {
10
- open: (l) => e == null ? void 0 : e.open(l),
11
- close: () => e == null ? void 0 : e.close(),
10
+ open: (o) => e == null ? void 0 : e.open(o),
11
+ close: () => (e == null ? void 0 : e.close()) ?? Promise.resolve(),
12
12
  next: () => e == null ? void 0 : e.next(),
13
13
  prev: () => e == null ? void 0 : e.prev(),
14
14
  getCurrentIndex: () => (e == null ? void 0 : e.getCurrentIndex()) ?? -1,
15
- view: (l) => e == null ? void 0 : e.view(l)
15
+ view: (o) => e == null ? void 0 : e.view(o),
16
+ destroy: () => e == null ? void 0 : e.destroy()
16
17
  };
17
18
  }
18
- const x = w({
19
+ const x = m({
19
20
  name: "VistaView",
20
21
  props: {
21
22
  selector: {
@@ -24,26 +25,26 @@ const x = w({
24
25
  },
25
26
  class: String
26
27
  },
27
- setup(r, { slots: e, attrs: l }) {
28
- const t = V(null);
29
- let o = null;
28
+ setup(r, { slots: e, attrs: o }) {
29
+ const t = v(null);
30
+ let l = null;
30
31
  return d(() => {
31
32
  if (t.value) {
32
33
  if (!r.selector) throw new Error("VistaView: selector is required");
33
- o = f({
34
- ...l,
34
+ l = f({
35
+ ...o,
35
36
  elements: t.value.querySelectorAll(r.selector)
36
37
  });
37
38
  }
38
39
  }), i(() => {
39
- o == null || o.destroy(), o = null;
40
+ l == null || l.destroy(), l = null;
40
41
  }), () => {
41
42
  var u;
42
- return m("div", { ref: t, class: r.class }, (u = e.default) == null ? void 0 : u.call(e));
43
+ return w("div", { ref: t, class: r.class }, (u = e.default) == null ? void 0 : u.call(e));
43
44
  };
44
45
  }
45
46
  });
46
47
  export {
47
48
  x as VistaView,
48
- n as useVistaView
49
+ y as useVistaView
49
50
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vistaview",
3
- "version": "0.5.3",
3
+ "version": "0.6.1",
4
4
  "description": "A lightweight, zero-dependency image lightbox library with smooth animations and touch support",
5
5
  "keywords": [
6
6
  "image",
@@ -19,34 +19,29 @@
19
19
  "responsive"
20
20
  ],
21
21
  "type": "module",
22
- "main": "./dist/vistaview.cjs",
22
+ "main": "./dist/vistaview.js",
23
23
  "module": "./dist/vistaview.js",
24
24
  "types": "./dist/vistaview.d.ts",
25
25
  "exports": {
26
26
  ".": {
27
27
  "types": "./dist/vistaview.d.ts",
28
- "import": "./dist/vistaview.js",
29
- "require": "./dist/vistaview.cjs"
28
+ "import": "./dist/vistaview.js"
30
29
  },
31
30
  "./react": {
32
31
  "types": "./dist/react.d.ts",
33
- "import": "./dist/react.js",
34
- "require": "./dist/react.cjs"
32
+ "import": "./dist/react.js"
35
33
  },
36
34
  "./vue": {
37
35
  "types": "./dist/vue.d.ts",
38
- "import": "./dist/vue.js",
39
- "require": "./dist/vue.cjs"
36
+ "import": "./dist/vue.js"
40
37
  },
41
38
  "./svelte": {
42
39
  "types": "./dist/svelte.d.ts",
43
- "import": "./dist/svelte.js",
44
- "require": "./dist/svelte.cjs"
40
+ "import": "./dist/svelte.js"
45
41
  },
46
42
  "./solid": {
47
43
  "types": "./dist/solid.d.ts",
48
- "import": "./dist/solid.js",
49
- "require": "./dist/solid.cjs"
44
+ "import": "./dist/solid.js"
50
45
  },
51
46
  "./style.css": "./dist/vistaview.css"
52
47
  },
@@ -75,7 +70,7 @@
75
70
  ],
76
71
  "scripts": {
77
72
  "dev": "vite",
78
- "build": "tsc && vite build && BUILD_UMD=true vite build",
73
+ "build": "tsc && BUILD_ENV=prod vite build && BUILD_ENV=prod BUILD_UMD=true vite build",
79
74
  "preview": "vite preview",
80
75
  "prepare": "husky",
81
76
  "test": "echo \"no test specified\"",
@@ -1,9 +0,0 @@
1
- import { VistaViewCloseFunction, VistaViewSetupFunction, VistaViewTransitionFunction } from './types';
2
- import { VistaView } from './vista-view';
3
- export declare function setTouchActions(vistaView: VistaView): void;
4
- export declare function removeTouchActions(vistaView: VistaView): void;
5
- export declare const defaultInit: (vistaView: VistaView) => void;
6
- export declare const defaultSetup: VistaViewSetupFunction;
7
- export declare const defaultTransition: VistaViewTransitionFunction;
8
- export declare const defaultClose: VistaViewCloseFunction;
9
- //# sourceMappingURL=defaults.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../src/lib/defaults.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,sBAAsB,EACtB,sBAAsB,EACtB,2BAA2B,EAC5B,MAAM,SAAS,CAAC;AAEjB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAU9C,wBAAgB,eAAe,CAAC,SAAS,EAAE,SAAS,GAAG,IAAI,CAuJ1D;AAED,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,SAAS,GAAG,IAAI,CAQ7D;AAMD,eAAO,MAAM,WAAW,GAAI,WAAW,SAAS,SAE/C,CAAC;AAKF,eAAO,MAAM,YAAY,EAAE,sBAsB1B,CAAC;AAIF,eAAO,MAAM,iBAAiB,EAAE,2BAyD/B,CAAC;AAKF,eAAO,MAAM,YAAY,EAAE,sBAK1B,CAAC"}
@@ -1,33 +0,0 @@
1
- export interface PinchGestureState {
2
- isActive: boolean;
3
- startDistance: number;
4
- currentDistance: number;
5
- scale: number;
6
- center: {
7
- x: number;
8
- y: number;
9
- };
10
- direction: 'in' | 'out' | null;
11
- touches: TouchList | null;
12
- }
13
- export declare class PinchDetector {
14
- private pinchState;
15
- private element;
16
- private pinchStartListeners;
17
- private pinchMoveListeners;
18
- private pinchEndListeners;
19
- constructor(element: HTMLElement);
20
- private getTouchDistance;
21
- private getTouchCenter;
22
- private onTouchStart;
23
- private onTouchMove;
24
- private onTouchEnd;
25
- private attachEventListeners;
26
- cleanup(): void;
27
- isPinching(): boolean;
28
- getState(): PinchGestureState;
29
- onPinchStart(listener: (state: PinchGestureState) => void): () => void;
30
- onPinchMove(listener: (state: PinchGestureState) => void): () => void;
31
- onPinchEnd(listener: (state: PinchGestureState) => void): () => void;
32
- }
33
- //# sourceMappingURL=pinch-detector.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"pinch-detector.d.ts","sourceRoot":"","sources":["../../src/lib/pinch-detector.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjC,SAAS,EAAE,IAAI,GAAG,KAAK,GAAG,IAAI,CAAC;IAC/B,OAAO,EAAE,SAAS,GAAG,IAAI,CAAC;CAC3B;AAED,qBAAa,aAAa;IACxB,OAAO,CAAC,UAAU,CAQhB;IAEF,OAAO,CAAC,OAAO,CAAc;IAC7B,OAAO,CAAC,mBAAmB,CAA8C;IACzE,OAAO,CAAC,kBAAkB,CAA8C;IACxE,OAAO,CAAC,iBAAiB,CAA8C;gBAE3D,OAAO,EAAE,WAAW;IAKhC,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,YAAY,CAYlB;IAEF,OAAO,CAAC,WAAW,CAgBjB;IAEF,OAAO,CAAC,UAAU,CAShB;IAEF,OAAO,CAAC,oBAAoB;IAOrB,OAAO,IAAI,IAAI;IAYf,UAAU,IAAI,OAAO;IAIrB,QAAQ,IAAI,iBAAiB;IAI7B,YAAY,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,GAAG,MAAM,IAAI;IAUtE,WAAW,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,GAAG,MAAM,IAAI;IAUrE,UAAU,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,GAAG,MAAM,IAAI;CAS5E"}
package/dist/react.cjs DELETED
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),t=require("react"),l=require("./vistaview.cjs");function f(u){const r=t.useRef(null);return t.useEffect(()=>(r.current=l.vistaView(u),()=>{var e;(e=r.current)==null||e.destroy(),r.current=null}),[]),{open:t.useCallback((e=0)=>{var n;return(n=r.current)==null?void 0:n.open(e)},[]),close:t.useCallback(()=>{var e;return(e=r.current)==null?void 0:e.close()},[]),next:t.useCallback(()=>{var e;return(e=r.current)==null?void 0:e.next()},[]),prev:t.useCallback(()=>{var e;return(e=r.current)==null?void 0:e.prev()},[]),getCurrentIndex:t.useCallback(()=>{var e;return((e=r.current)==null?void 0:e.getCurrentIndex())??-1},[]),view:t.useCallback(e=>{var n;return(n=r.current)==null?void 0:n.view(e)},[])}}function w({children:u,className:r,style:e,selector:n,...a}){const s=t.useRef(null),c=t.useRef(null);return t.useEffect(()=>{if(s.current){if(!n)throw new Error("VistaView: selector is required");return c.current=l.vistaView({...a,elements:s.current.querySelectorAll(n)}),()=>{var i;(i=c.current)==null||i.destroy(),c.current=null}}},[]),o.jsx("div",{ref:s,className:r,style:e,children:u})}exports.VistaView=w;exports.useVistaView=f;
package/dist/solid.cjs DELETED
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("solid-js"),i=require("./vistaview.cjs");function V(t){const e=i.vistaView(t);return u.onCleanup(()=>{e==null||e.destroy()}),{open:(r=0)=>e==null?void 0:e.open(r),close:()=>e==null?void 0:e.close(),next:()=>e==null?void 0:e.next(),prev:()=>e==null?void 0:e.prev(),getCurrentIndex:()=>(e==null?void 0:e.getCurrentIndex())??-1,view:r=>e==null?void 0:e.view(r)}}function d(t){let e,r=null;u.onMount(()=>{if(!e)return;if(!t.selector)throw new Error("VistaView: selector is required");const{children:l,class:o,selector:n,ref:c,...w}=t;r=i.vistaView({...w,elements:e.querySelectorAll(n)})}),u.onCleanup(()=>{r==null||r.destroy(),r=null});const s=l=>{var o;e=l,(o=t.ref)==null||o.call(t,l)};return(()=>{const l=document.createElement("div");return t.class&&(l.className=t.class),s(l),l})}exports.VistaView=d;exports.useVistaView=V;
package/dist/svelte.cjs DELETED
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("svelte"),u=require("./vistaview.cjs");function v(o){const e=u.vistaView(o);return t.onDestroy(()=>{e==null||e.destroy()}),{open:(r=0)=>e==null?void 0:e.open(r),close:()=>e==null?void 0:e.close(),next:()=>e==null?void 0:e.next(),prev:()=>e==null?void 0:e.prev(),getCurrentIndex:()=>(e==null?void 0:e.getCurrentIndex())??-1,view:r=>e==null?void 0:e.view(r)}}exports.useVistaView=v;
@@ -1,16 +0,0 @@
1
- "use strict";var J=Object.defineProperty;var Q=(s,t,i)=>t in s?J(s,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):s[t]=i;var p=(s,t,i)=>Q(s,typeof t!="symbol"?t+"":t,i);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function q(s){const t=getComputedStyle(s),i=s.getBoundingClientRect();return{objectFit:t.objectFit,borderRadius:t.borderRadius,objectPosition:t.objectPosition,overflow:t.overflow,top:i.top,left:i.left,width:i.width,height:i.height,naturalWidth:s.naturalWidth,naturalHeight:s.naturalHeight}}let $=null;function tt(){return $||(window.trustedTypes||(window.trustedTypes={createPolicy:(s,t)=>t}),$=window.trustedTypes.createPolicy("vistaView-policy",{createHTML:s=>s,createScript:()=>{throw new Error("Not implemented")},createScriptURL:()=>{throw new Error("Not implemented")}}),$)}function F(s){const i=tt().createHTML(s),n=document.createElement("template");n.innerHTML=i;const e=n.content;return n.remove(),e}function k(s){return s&&!/^0(px|%|r?em|vw|vh|vmin|vmax|cm|mm|in|pt|pc|ex|ch)?$/i.test(s.trim())&&s}function et(s){const i=window.getComputedStyle(s).objectFit||"",{width:n,height:e}=s.getBoundingClientRect(),r=s.naturalWidth,l=s.naturalHeight;if(!i)return{width:n,height:e};if(!r||!l)return{width:n,height:e};const o=r/l,c=n/e;switch(i){case"fill":return{width:n,height:e};case"none":return{width:r,height:l};case"contain":return o>c?{width:n,height:n/o}:{width:e*o,height:e};case"cover":return o<c?{width:n,height:n/o}:{width:e*o,height:e};case"scale-down":{const a={width:r,height:l},d=o>c?{width:n,height:n/o}:{width:e*o,height:e};return d.width<=a.width&&d.height<=a.height?d:a}}return{width:n,height:e}}function O(s){const t=window.innerWidth,i=window.innerHeight,n=s.naturalWidth,e=s.naturalHeight;if(!n||!e)throw console.error("Error",s),new Error("Image natural dimensions are zero");if(n<t&&e<i)return{width:n,height:e};const r=n/e,l=t/i;let o,c;return r>l?(o=t,c=t/r):(c=i,o=i*r),{width:o,height:c}}function it(s,t){const i=window.innerHeight,n=window.innerWidth,e=s,r=t,l=Math.max(0,(e-n)/2)+n/2,o=Math.max(0,(r-i)/2)+i/2,c=-l,a=-o;return{maxDiffX:l,minDiffY:a,maxDiffY:o,minDiffX:c}}const nt='<svg viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>',st='<svg viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>',ot='<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>',rt='<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>',at='<svg viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>',lt='<svg viewBox="0 0 24 24"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>';function X(){return{name:"download",icon:lt,onClick:async s=>{var r;const t=await fetch(s.src),i=await t.blob(),n=t.url,e=document.createElement("a");e.href=URL.createObjectURL(i),e.download=((r=n.split("/").pop())==null?void 0:r.split("?")[0].split("#")[0])||"download",document.body.appendChild(e),e.click(),document.body.removeChild(e)}}}function dt(s){if(typeof s=="string")switch(s){case"zoomIn":return`<button class="vistaview-zoom-in-btn">${ot}</button>`;case"zoomOut":return`<button disabled class="vistaview-zoom-out-btn">${rt}</button>`;case"close":return`<button class="vistaview-close-btn">${at}</button>`;case"indexDisplay":return'<div class="vistaview-index-display"></div>';case"description":return'<div class="vistaview-description"></div>';default:return""}return`<button data-vistaview-custom-control="${s.name}">${s.icon}</button>`}function W(s,t){var d,h;const i=s.imageElm?getComputedStyle(s.imageElm):null,n=(i==null?void 0:i.objectFit)||"",e=((d=s.imageElm)==null?void 0:d.naturalWidth)||"",r=((h=s.imageElm)==null?void 0:h.naturalHeight)||"",l=(i==null?void 0:i.width)||"",o=(i==null?void 0:i.height)||"",c=document.createElement("div");c.className="vistaview-item",c.dataset.vistaviewPos=`${t!==void 0?t:""}`,c.dataset.vistaviewIndex=s.index.toString();const a=F(`<img class="vistaview-image-lowres"
2
- style="${n?`object-fit:${n};`:""}${l?`width:${l};`:""}${o?`height:${o};`:""}"
3
- src="${s.thumb||s.src}"
4
- alt="${s.alt||""}"
5
- ${e?`width="${e}"`:""}
6
- ${r?`height="${r}"`:""}
7
- />
8
- <img class="vistaview-image-highres" src="${s.src}" alt="${s.alt||""}" />`);return c.appendChild(a),c}function ct({controls:s,isReducedMotion:t}){const i=e=>e?e.map(dt).join(""):"";return F(`<div class="vistaview-root${t?" vistaview--reduced-motion":""}" id="vistaview-root">
9
- <div class="vistaview-container">
10
- <div class="vistaview-image-container"></div>
11
- <div class="vistaview-top-bar vistaview-ui"><div>${i(s==null?void 0:s.topLeft)}</div><div>${i(s==null?void 0:s.topCenter)}</div><div>${i(s==null?void 0:s.topRight)}</div></div>
12
- <div class="vistaview-bottom-bar vistaview-ui"><div>${i(s==null?void 0:s.bottomLeft)}</div><div>${i(s==null?void 0:s.bottomCenter)}</div><div>${i(s==null?void 0:s.bottomRight)}</div></div>
13
- <div class="vistaview-prev-btn vistaview-ui"><button>${nt}</button></div>
14
- <div class="vistaview-next-btn vistaview-ui"><button>${st}</button></div>
15
- </div>
16
- </div>`)}let z=null,M=null,T=null,Z=null;function Y(s){H(s);const t=s.imageContainerElm,i=s.elements.length;if(!t)return;let n=0,e=0,r=0,l=0,o=null,c=0,a=!1;z=d=>{d.preventDefault(),d.stopPropagation(),s.isZoomed===!1&&(a=!0,n=d.pageX,e=d.pageY,r=d.pageX,l=d.pageY,c=Date.now(),o=null,t.setPointerCapture(d.pointerId))},M=d=>{if(d.preventDefault(),d.stopPropagation(),s.isZoomed!==!1||!a)return;const h=d.pageX-n,u=d.pageY-e;r=d.pageX,l=d.pageY,Math.abs(h)>=Math.abs(u)&&(o===null||o===!0)?(t.style.setProperty("--vistaview-pointer-diff-x",`${h}px`),o=!0):Math.abs(u)>Math.abs(h)&&(o===null||o===!1)&&(t.style.setProperty("--vistaview-pointer-diff-y",`${u}px`),o=!1)},Z=d=>{if(d.preventDefault(),d.stopPropagation(),t.releasePointerCapture(d.pointerId),s.isZoomed!==!1||!a)return;a=!1,o=null;const h=Array.from(t.querySelectorAll(".vistaview-item"));t.style.removeProperty("--vistaview-pointer-diff-x"),t.style.removeProperty("--vistaview-pointer-diff-y"),h.forEach(u=>{u.style.transition="",u.style.translate=""})},T=d=>{if(d.preventDefault(),d.stopPropagation(),t.releasePointerCapture(d.pointerId),s.isZoomed!==!1||!a)return;a=!1;const h=Array.from(t.querySelectorAll(".vistaview-item")),u=r-n,w=l-e,f=Date.now()-c,v=u/f,y=w/f,b=s.options.touchSpeedThreshold||.5,L=h.find(g=>g.dataset.vistaviewPos==="0"),C=Number(L.dataset.vistaviewIndex);function E(){h[0].removeEventListener("transitionend",E),t.style.removeProperty("--vistaview-pointer-diff-x"),t.style.removeProperty("--vistaview-pointer-diff-y"),h.forEach(g=>{g.style.transition="",g.style.translate=""})}function m(g="0%",x="0%"){h.forEach(I=>{I.style.transition=`translate ${s.options.animationDurationBase*.5}ms ease-out`,I.style.translate=`${g} ${x}`})}if(v<-b||v>b){let g=function(){h[0].removeEventListener("transitionend",g),setTimeout(()=>{const x=s.isReducedMotion,I=s.options.detectReducedMotion;s.isReducedMotion=!0,s.options.detectReducedMotion=!0,E(),s.view(v<-b?(C+1)%i:(C-1+i)%i,{next:v<-b,prev:v>b}),s.isReducedMotion=x,s.options.detectReducedMotion=I},100)};m(v<-b?"-100%":"100%"),h[0].addEventListener("transitionend",g)}else y<-b||y>b?(s.close(),m("0%","0%")):(h[0].addEventListener("transitionend",E),m("0%"),v===0&&y===0&&s.zoomIn())},t.addEventListener("pointermove",M),t.addEventListener("pointerup",T),t.addEventListener("pointerdown",z),t.addEventListener("pointercancel",Z)}function H(s){const t=s.imageContainerElm;t&&(M&&t.removeEventListener("pointermove",M),T&&t.removeEventListener("pointerup",T),z&&t.removeEventListener("pointerdown",z),Z&&t.removeEventListener("pointercancel",Z))}const B=s=>{Y(s)},_=({htmlElements:{to:s},index:{to:t},vistaView:i})=>{i.elements instanceof NodeList&&t!==null&&(i.elements.forEach(n=>n.style.opacity="1"),i.elements[t].style.opacity="0"),s&&s.forEach(n=>{const e=Number(n.dataset.vistaviewPos);e!==0?(n.style.zIndex="1",n.style.left=100*e+"%"):n.style.zIndex="2"})},V=async({htmlElements:{from:s},via:{next:t,prev:i},vistaView:n},e)=>{if(n.options.detectReducedMotion&&n.isReducedMotion)return;const r=s.filter(l=>l.dataset.vistaviewPos==="0"||(t?l.dataset.vistaviewPos==="1":l.dataset.vistaviewPos==="-1"));await new Promise((l,o)=>{let c=0,a=!1;if(e.aborted){o(new P("Transition aborted"));return}const d=h=>{if(a)return o(new P("Transition aborted"));if(e.aborted)return a||(a=!0),o(new P("Transition aborted"));h.currentTarget.removeEventListener("transitionend",d),c++,c>=r.length&&l(0)};r.forEach(h=>{h.style.transition=`translate ${n.options.animationDurationBase*.5}ms ease-out`,h.style.translate=t?"-100%":i?"100%":"0%",h.addEventListener("transitionend",d)})})},N=s=>{s.elements instanceof NodeList&&s.elements.forEach(t=>t.style.opacity="1"),H(s)};class P extends Error{constructor(t){super(t),this.name="VistaViewTransitionAbortedError"}}const R={detectReducedMotion:!0,animationDurationBase:333,zoomStep:500,maxZoomLevel:2,touchSpeedThreshold:.5,preloads:1,keyboardListeners:!0,arrowOnSmallScreens:!1,controls:{topLeft:["indexDisplay"],topRight:["zoomIn","zoomOut",X(),"close"],bottomCenter:["description"]}},S={somethingOpened:null};class ht{constructor(t,i){p(this,"options");p(this,"elements");p(this,"isReducedMotion");p(this,"currentIndex",{_value:null,_vistaView:null,_via:{next:!1,prev:!1},set value(t){var n,e,r;const i=this._value;this._value=t;for(const l in(n=this._vistaView)==null?void 0:n.transitionAbortControllers)(e=this._vistaView)==null||e.transitionAbortControllers[l].abort();(r=this._vistaView)==null||r.swap(i,this._value)},get value(){return this._value},get via(){return this._via},set via(t){this._via=t}});p(this,"rootElm",null);p(this,"imageContainerElm",null);p(this,"customControls",{});p(this,"currentImages",null);p(this,"currentItems",null);p(this,"isZoomed",!1);p(this,"onClickElements",t=>{t.preventDefault();const i=t.currentTarget;i.dataset.vistaviewIndex&&this.open(parseInt(i.dataset.vistaviewIndex))});p(this,"defaultOnClickHandler",t=>t.preventDefault());p(this,"onResizeHandler",null);p(this,"onKeyDown",null);p(this,"userSetup",_);p(this,"userTransition",V);p(this,"userClose",N);p(this,"userInit",B);p(this,"onZoomedPointerDown",null);p(this,"onZoomedPointerMove",null);p(this,"onZoomedPointerUp",null);p(this,"transitionAbortControllers",{});p(this,"loadImageTimeout",null);this.elements=t,this.currentIndex._vistaView=this,this.options={...R,...i||{},controls:{...R.controls,...(i==null?void 0:i.controls)||{}}},this.options.initFunction&&(this.userInit=this.options.initFunction),this.options.transitionFunction&&(this.userTransition=this.options.transitionFunction),this.options.closeFunction&&(this.userClose=this.options.closeFunction),this.options.initFunction&&(this.userInit=this.options.initFunction),this.isReducedMotion=window.matchMedia("(prefers-reduced-motion: reduce)").matches,this.elements instanceof NodeList&&this.elements.forEach((n,e)=>{n.dataset.vistaviewIndex=e.toString(),n.addEventListener("click",this.defaultOnClickHandler),n.addEventListener("pointerup",this.onClickElements)})}setFullSizeImageDim(t){var r,l;const i=t.getBoundingClientRect(),{width:n,height:e}=O(t);if(n===i.width&&e===i.height)(l=(r=t.parentElement)==null?void 0:r.querySelector(".vistaview-image-lowres"))==null||l.classList.add("vistaview-image--hidden"),t.classList.add("vistaview-image-settled");else{let o=0;const c=()=>{var a,d;o++,!(o<3)&&(t.removeEventListener("transitionend",c),(d=(a=t.parentElement)==null?void 0:a.querySelector(".vistaview-image-lowres"))==null||d.classList.add("vistaview-image--hidden"),t.classList.add("vistaview-image-settled"))};requestAnimationFrame(()=>{t.addEventListener("transitionend",c),t.style.width=`${n}px`,t.style.height=`${e}px`})}}async swap(t,i){var d,h;if(!S.somethingOpened||t===i||t===null)return;if(!this.imageContainerElm)throw new Error("VistaView: imageContainerElm is null in swap()");this.setIndexDisplay(),this.clearZoom();const{images:n,positions:e}=this.getCurrentIndexes(i),r=this.getImages(n),l=r.map((u,w)=>W(u,e[w])),o={htmlElements:{from:this.currentItems,to:l},images:{from:this.currentImages,to:r},index:{from:t,to:i},via:this.currentIndex.via,vistaView:this};this.userSetup(o);const c=Math.random().toString(36).substring(2,15)+Math.random().toString(36).substring(2,15);this.transitionAbortControllers[c]=new AbortController;try{await this.userTransition(o,this.transitionAbortControllers[c].signal)}catch(u){u instanceof P||console.warn(u)}const a=l.find(u=>u.dataset.vistaviewPos==="0");if(a){const u=a.dataset.vistaviewIndex,w=this.currentItems.find(v=>v.dataset.vistaviewIndex===u),f=w==null?void 0:w.querySelector(".vistaview-image-highres");if(f){const v=a.querySelector(".vistaview-image-highres");if(v.setAttribute("class",f.getAttribute("class")||""),v.setAttribute("style",f.getAttribute("style")||""),v.classList.remove("vistaview-image--zooming"),f.classList.contains("vistaview-image-loaded")&&!f.classList.contains("vistaview-image-settled")){const y=f.getBoundingClientRect();v.style.width=`${y.width}px`,v.style.height=`${y.height}px`}}}delete this.transitionAbortControllers[c],this.imageContainerElm.innerHTML="",l.forEach(u=>{var y;const w=u.querySelector(".vistaview-image-highres"),f=!!w.classList.contains("vistaview-image-loaded"),v=!!w.classList.contains("vistaview-image-settled");this.imageContainerElm.appendChild(u),f&&!v?this.setFullSizeImageDim(w):f&&v&&((y=u==null?void 0:u.querySelector(".vistaview-image-lowres"))==null||y.classList.add("vistaview-image--hidden"))}),this.setInitialDimPos(),this.currentImages=r,this.currentItems=l,this.setCurrentDescription(),this.updateZoomButtonsVisibility(),(h=(d=this.options).onImageView)==null||h.call(d,o),this.loadImageTimeout&&clearTimeout(this.loadImageTimeout),this.loadImageTimeout=setTimeout(()=>{this.loadImages()},333)}setZoomed(t){var n,e,r,l,o,c;if(this.isZoomed===t)return;let i=null;if(this.isZoomed){i&&cancelAnimationFrame(i);let a=this.isZoomed;if(a.classList.remove("vistaview-image--zooming"),this.onZoomedPointerDown&&((n=a.parentElement)==null||n.removeEventListener("pointerdown",this.onZoomedPointerDown),this.onZoomedPointerDown=null),this.onZoomedPointerMove&&((e=a.parentElement)==null||e.removeEventListener("pointermove",this.onZoomedPointerMove),this.onZoomedPointerMove=null),this.onZoomedPointerUp&&((r=a.parentElement)==null||r.removeEventListener("pointerup",this.onZoomedPointerUp),this.onZoomedPointerUp=null),a==null||a.style.removeProperty("--pointer-diff-x"),a==null||a.style.removeProperty("--pointer-diff-y"),setTimeout(()=>{a==null||a.classList.remove("vistaview-image--zooming")},500),this.isZoomed=!1,!t)return}if(t){let a=function({speedX:m,speedY:g}){i=requestAnimationFrame(()=>{if(Math.abs(m)<.01&&Math.abs(g)<.01)return;const x=t,I=window.innerWidth/2,A=window.innerHeight/2,D=x.getBoundingClientRect(),U=D.bottom<A,j=D.top>A,K=D.right<I,G=D.left>I;w+=m,f+=g,U&&(f+=(A-D.bottom)/C),j&&(f-=(D.top-A)/C),K&&(w+=(I-D.right)/C),G&&(w-=(D.left-I)/C),x==null||x.style.setProperty("--pointer-diff-x",`${w}px`),x==null||x.style.setProperty("--pointer-diff-y",`${f}px`),a({speedX:m*(1-E),speedY:g*(1-E)})})};this.isZoomed=t,t.classList.add("vistaview-image--zooming"),t==null||t.style.setProperty("--pointer-diff-x","0px"),t==null||t.style.setProperty("--pointer-diff-y","0px");let d=!1,h=0,u=0,w=0,f=0,v=0,y=0,b=0,L=15,C=5,E=.1;this.onZoomedPointerDown=m=>{i&&cancelAnimationFrame(i),m.preventDefault(),m.stopPropagation(),d=!0,h=m.pageX,u=m.pageY,b=performance.now(),t.setPointerCapture(m.pointerId)},this.onZoomedPointerMove=m=>{d&&(m.preventDefault(),v=m.pageX-h,y=m.pageY-u,t==null||t.style.setProperty("--pointer-diff-x",`${v+w}px`),t==null||t.style.setProperty("--pointer-diff-y",`${y+f}px`))},this.onZoomedPointerUp=m=>{if(d=!1,t.releasePointerCapture(m.pointerId),w+=v,f+=y,v===0&&y===0)this.zoomIn();else{let g=performance.now()-b;if(g===0)return;let x=(m.pageY-u)/g,I=(m.pageX-h)/g;a({speedX:I*L,speedY:x*L})}v=0,y=0},(l=t==null?void 0:t.parentElement)==null||l.addEventListener("pointerdown",this.onZoomedPointerDown),(o=t==null?void 0:t.parentElement)==null||o.addEventListener("pointermove",this.onZoomedPointerMove),(c=t==null?void 0:t.parentElement)==null||c.addEventListener("pointerup",this.onZoomedPointerUp);return}}zoomIn(){var r,l,o,c,a;const t=(r=this.rootElm)==null?void 0:r.querySelector('[data-vistaview-pos="0"] .vistaview-image-highres'),i=t.width,n=t.height;t.dataset.vistaviewInitialWidth||(t.dataset.vistaviewInitialWidth=i.toString()),t.dataset.vistaviewInitialHeight||(t.dataset.vistaviewInitialHeight=n.toString()),this.setZoomed(t);const e=(t.naturalWidth||0)*this.options.maxZoomLevel;if(i&&e&&i<e){const d=Math.min(i+this.options.zoomStep,e);t.style.width=`${d}px`;const h=d/i*n;t.style.height=`${h}px`,(o=(l=this.rootElm)==null?void 0:l.querySelector("button.vistaview-zoom-out-btn"))==null||o.removeAttribute("disabled"),t.dataset.vistaviewCurrentWidth=d.toString(),t.dataset.vistaviewCurrentHeight=h.toString(),d===e&&((a=(c=this.rootElm)==null?void 0:c.querySelector("button.vistaview-zoom-in-btn"))==null||a.setAttribute("disabled","true"))}}zoomOut(){var l,o,c,a,d;const t=(l=this.rootElm)==null?void 0:l.querySelector('[data-vistaview-pos="0"] .vistaview-image-highres'),i=t.width,n=t.height,e=t.dataset.vistaviewInitialWidth?parseInt(t.dataset.vistaviewInitialWidth):0,r=h=>{h.target===t&&(t.classList.remove("vistaview-image--zooming-out"),t.removeEventListener("transitionend",r))};if(t.addEventListener("transitionend",r),t.classList.add("vistaview-image--zooming-out"),i&&e&&i>e){const h=Math.max(i-this.options.zoomStep,e);t.style.width=`${h}px`;const u=h/i*n;t.style.height=`${u}px`,(c=(o=this.rootElm)==null?void 0:o.querySelector("button.vistaview-zoom-in-btn"))==null||c.removeAttribute("disabled"),t.dataset.vistaviewCurrentWidth=h.toString(),t.dataset.vistaviewCurrentHeight=u.toString();const{maxDiffX:w,minDiffY:f,maxDiffY:v,minDiffX:y}=it(h,u);let b=parseInt((t==null?void 0:t.style.getPropertyValue("--pointer-diff-x").replace("px",""))||"0"),L=parseInt((t==null?void 0:t.style.getPropertyValue("--pointer-diff-y").replace("px",""))||"0");b=Math.min(w,Math.max(y,b)),L=Math.min(v,Math.max(f,L)),t==null||t.style.setProperty("--pointer-diff-x",`${b}px`),t==null||t.style.setProperty("--pointer-diff-y",`${L}px`),h===e&&((d=(a=this.rootElm)==null?void 0:a.querySelector("button.vistaview-zoom-out-btn"))==null||d.setAttribute("disabled","true"),t.removeAttribute("data-vistaview-current-width"),t.removeAttribute("data-vistaview-current-height"),t.removeAttribute("data-vistaview-initial-width"),t.removeAttribute("data-vistaview-initial-height"),this.setZoomed(!1))}}clearZoom(){}getImages(t){return t.map((i,n)=>{const e=this.elements[i];if(e instanceof HTMLElement){const r=e.querySelector("img"),l=e.getAttribute("href")||"",o=e.getAttribute("src")||"",c=e.dataset.vistaviewSrc||l||o||(r==null?void 0:r.src)||"",a=e.dataset.vistaviewAlt||e.getAttribute("alt")||(r==null?void 0:r.alt)||"",d=e.dataset.vistaviewThumb||(r==null?void 0:r.src)||l||o||"";return{index:t[n],src:c,alt:a,thumb:d,imageElm:e instanceof HTMLImageElement?e:r,anchorElm:e instanceof HTMLAnchorElement?e:void 0}}else return{index:t[n],...e}})}setInitialDimPos(){var a,d;if(!this.rootElm)return;const t=(a=this.rootElm.querySelector('[data-vistaview-pos="0"]'))==null?void 0:a.dataset.vistaviewIndex,i=((d=this.currentImages)==null?void 0:d.find(h=>h.index===Number(t)))||null;if(!i)return;const n=i.imageElm?q(i.imageElm):void 0,e=i.anchorElm?q(i.anchorElm):void 0,r=(e==null?void 0:e.width)||(n==null?void 0:n.width)||0,l=(e==null?void 0:e.height)||(n==null?void 0:n.height)||0,o=((e==null?void 0:e.left)||(n==null?void 0:n.left)||0)+r/2,c=((e==null?void 0:e.top)||(n==null?void 0:n.top)||0)+l/2;this.rootElm.style.setProperty("--vistaview-container-initial-width",r+"px"),this.rootElm.style.setProperty("--vistaview-container-initial-height",l+"px"),this.rootElm.style.setProperty("--vistaview-container-initial-top",c+"px"),this.rootElm.style.setProperty("--vistaview-container-initial-left",o+"px"),this.rootElm.style.setProperty("--vistaview-image-border-radius",k(e==null?void 0:e.borderRadius)||k(n==null?void 0:n.borderRadius)||"0px")}updateZoomButtonsVisibility(){var e;const t=(e=this.rootElm)==null?void 0:e.querySelector('[data-vistaview-pos="0"] img.vistaview-image-highres');if(!t)return;const i=this;function n(){var d,h;const r=(d=i.rootElm)==null?void 0:d.querySelector("button.vistaview-zoom-in-btn"),l=(h=i.rootElm)==null?void 0:h.querySelector("button.vistaview-zoom-out-btn"),o=parseInt(t.style.width)||t.width,c=t.naturalWidth*i.options.maxZoomLevel,a=o<c&&c>0;r&&(r.style.display=a?"":"none"),l&&(l.style.display=a?"":"none")}t.complete&&t.naturalWidth>0?n():t.addEventListener("load",n)}loadImages(){if(!this.rootElm)return;this.rootElm.querySelectorAll(".vistaview-image-highres:not(.vistaview-image-loaded)").forEach((i,n)=>{const e=i,l=this.currentImages[n].imageElm,o={w:0,h:0};if(l){const{width:a,height:d}=et(l);o.w=Math.min(l.width,a),o.h=Math.min(l.height,d)}const c=()=>{var d;const a=()=>{var h;o.w&&o.h&&(e.style.width=`${o.w}px`,e.style.height=`${o.h}px`,e.style.setProperty("--vistaview-fitted-width",`${o.w}px`),e.style.setProperty("--vistaview-fitted-height",`${o.h}px`)),e.classList.add("vistaview-image-loaded"),e.width=e.naturalWidth,e.height=e.naturalHeight,setTimeout(()=>{this.setFullSizeImageDim(e)},100),(h=i.parentElement)!=null&&h.matches('[data-vistaview-pos="0"]')&&this.updateZoomButtonsVisibility()};if((d=this.rootElm)!=null&&d.classList.contains("vistaview--opened"))a();else{const h=setInterval(()=>{var u;(u=this.rootElm)!=null&&u.classList.contains("vistaview--opened")&&(clearInterval(h),a())},50)}};e.complete&&e.naturalWidth>0?c():(e.onload=c,e.onerror=()=>{var a;console.error("VistaView: failed to load image "+e.src),(a=e.parentElement)==null||a.classList.add("vistaview-image-load-failed")})})}setIndexDisplay(){this.elements.length!==1&&(this.rootElm.querySelector(".vistaview-index-display").textContent=`${this.currentIndex.value+1} / ${this.elements.length}`)}setCurrentDescription(){this.rootElm.querySelector(".vistaview-description").textContent=(this.currentImages[1]||this.currentImages[0]).alt||""}getCurrentIndexes(t){const i=this.options.preloads,n=this.elements.length,e=n<1||!i?[t]:[...new Set([...Array.from({length:i},(l,o)=>((t-i+o)%n+n)%n),t,...Array.from({length:i},(l,o)=>(t+1+o)%n)])],r=n<1||!i?[0]:e.map((l,o)=>o-Math.floor(e.length/2));return{images:e,positions:r}}setKeyboardListeners(){this.onKeyDown=t=>{switch(t.key){case"ArrowLeft":t.preventDefault(),this.prev();break;case"ArrowRight":t.preventDefault(),this.next();break;case"ArrowUp":t.preventDefault(),this.zoomIn();break;case"ArrowDown":t.preventDefault(),this.zoomOut();break;case"Escape":t.preventDefault(),this.close();break}},window.addEventListener("keydown",this.onKeyDown)}setResizeListeners(){this.onResizeHandler=()=>{var i;this.setInitialDimPos();const t=(i=this.rootElm)==null?void 0:i.querySelectorAll(".vistaview-image-highres.vistaview-image-loaded");t==null||t.forEach(n=>{const e=n,{width:r,height:l}=O(e);e.classList.contains("vistaview-image--zooming")?(e.dataset.vistaviewInitialWidth=r.toString(),e.dataset.vistaviewInitialHeight=l.toString()):(e.style.width=`${r}px`,e.style.height=`${l}px`)})},window.addEventListener("resize",this.onResizeHandler)}open(t=0){var o,c,a,d,h,u,w,f,v,y,b,L,C;if(S.somethingOpened){console.error("VistaView: another instance is already opened. Returning.");return}if(S.somethingOpened=this,this.currentIndex._value=t,document.body.prepend(ct({controls:this.options.controls,isReducedMotion:this.isReducedMotion})),this.rootElm=document.querySelector("#vistaview-root"),this.imageContainerElm=((o=this.rootElm)==null?void 0:o.querySelector(".vistaview-image-container"))||null,!this.rootElm||!this.imageContainerElm)throw S.somethingOpened=null,new Error("Failed to create VistaView element");this.options.arrowOnSmallScreens||this.rootElm.classList.add("vistaview-no-arrows-sm");const{images:i,positions:n}=this.getCurrentIndexes(t);this.currentImages=this.getImages(i);const e=this.currentImages.map((E,m)=>W(E,n[m]));this.currentItems=e;const r={htmlElements:{from:null,to:this.currentItems},images:{from:null,to:this.currentImages},index:{from:null,to:t},via:this.currentIndex.via,vistaView:this};this.userSetup(r),this.imageContainerElm.innerHTML="",this.currentItems.forEach(E=>{this.imageContainerElm.appendChild(E)});let l=0;this.rootElm.addEventListener("animationend",E=>{var m;E.currentTarget===this.rootElm&&(l++,l>=2&&((m=this.rootElm)==null||m.classList.add("vistaview--opened")))}),(c=this.rootElm.querySelector(".vistaview-close-btn"))==null||c.addEventListener("click",()=>this.close()),(a=this.rootElm.querySelector(".vistaview-zoom-in-btn"))==null||a.addEventListener("click",()=>this.zoomIn()),(d=this.rootElm.querySelector(".vistaview-zoom-out-btn"))==null||d.addEventListener("click",()=>this.zoomOut()),(h=this.rootElm.querySelector(".vistaview-prev-btn>button"))==null||h.addEventListener("click",()=>this.prev()),(u=this.rootElm.querySelector(".vistaview-next-btn>button"))==null||u.addEventListener("click",()=>this.next()),[...this.options.controls.topLeft||[],...this.options.controls.topRight||[],...this.options.controls.topCenter||[],...this.options.controls.bottomCenter||[],...this.options.controls.bottomLeft||[],...this.options.controls.bottomRight||[]].forEach(E=>{typeof E!="string"&&(this.customControls[E.name]=E)}),this.rootElm.querySelectorAll("button[data-vistaview-custom-control]").forEach(E=>{E.addEventListener("click",m=>{const g=this.customControls[m.currentTarget.dataset.vistaviewCustomControl],x=this.currentImages.find(I=>I.index===this.currentIndex.value);g&&x&&(g.onClick.constructor.name==="AsyncFunction"?(E.classList.add("vistaview-button--loading"),g.onClick(x).finally(()=>{E.classList.remove("vistaview-button--loading")})):g.onClick(x))})}),this.options.animationDurationBase&&this.rootElm.style.setProperty("--vistaview-animation-duration",`${this.options.animationDurationBase}`),this.options.initialZIndex!==void 0&&this.rootElm.style.setProperty("--vistaview-initial-z-index",`${this.options.initialZIndex}`),this.setInitialDimPos(),this.setResizeListeners(),this.options.keyboardListeners&&this.setKeyboardListeners(),this.elements.length===1&&((w=this.rootElm.querySelector(".vistaview-prev-btn"))==null||w.classList.add("vistaview-ui--none"),(f=this.rootElm.querySelector(".vistaview-next-btn"))==null||f.classList.add("vistaview-ui--none"),(v=this.rootElm.querySelector(".vistaview-index-display"))==null||v.classList.add("vistaview-ui--none")),this.rootElm&&this.rootElm.classList.add("vistaview--initialized"),this.loadImages(),this.setCurrentDescription(),this.setIndexDisplay(),this.userInit(this),(b=(y=this.options).onOpen)==null||b.call(y,r),(C=(L=this.options).onImageView)==null||C.call(L,r)}async close(t=!0){var n,e,r;if(S.somethingOpened!==this)return;t&&((n=this.rootElm)==null||n.classList.add("vistaview--closing"),await new Promise(l=>{var c;let o;(c=this.rootElm)==null||c.addEventListener("transitionend",a=>{a.currentTarget===this.rootElm&&(o&&clearTimeout(o),o=setTimeout(()=>{l()},333))})}));const i={htmlElements:{from:this.currentItems,to:null},images:{from:this.currentImages,to:null},index:{from:this.currentIndex.value,to:null},via:{prev:!1,next:!1},vistaView:this};this.userClose(this),(r=(e=this.options).onClose)==null||r.call(e,i),document.body.removeChild(this.rootElm),this.currentIndex._value=null,this.currentIndex._via={next:!1,prev:!1},this.rootElm=null,this.imageContainerElm=null,this.currentImages=null,this.currentItems=null,this.onResizeHandler&&(window.removeEventListener("resize",this.onResizeHandler),this.onResizeHandler=null),this.onKeyDown&&(window.removeEventListener("keydown",this.onKeyDown),this.onKeyDown=null),(this.onZoomedPointerDown||this.onZoomedPointerMove||this.onZoomedPointerUp)&&(this.setZoomed(!1),this.onZoomedPointerDown=null,this.onZoomedPointerMove=null,this.onZoomedPointerUp=null);for(const l in this.transitionAbortControllers)this.transitionAbortControllers[l].abort();this.transitionAbortControllers={},S.somethingOpened=null}destroy(){this.close(!1),this.elements instanceof NodeList&&this.elements.forEach(t=>{t.dataset.vistaviewIndex&&delete t.dataset.vistaviewIndex,t.removeEventListener("click",this.defaultOnClickHandler),t.removeEventListener("pointerup",this.onClickElements)})}view(t,i){S.somethingOpened===this&&(t<0&&(t=this.elements.length-1),t>=this.elements.length&&(t=0),this.currentIndex.via=i||{next:!1,prev:!1},this.currentIndex.value=t)}next(){S.somethingOpened===this&&this.view(this.currentIndex.value+1,{next:!0,prev:!1})}prev(){S.somethingOpened===this&&this.view(this.currentIndex.value-1,{next:!1,prev:!0})}getCurrentIndex(){return S.somethingOpened===this?this.currentIndex.value:-1}}function ut(s){let t=null;if(typeof s=="string"?t=document.querySelectorAll(s):s instanceof NodeList&&(t=s),t)for(let i=0;i<t.length;i++){const n=t[i];if(!(n.dataset.vistaviewSrc||n.getAttribute("href")||n.getAttribute("src")||""))return`Element at index ${i} is missing 'src' / 'data-vistaview-src' / 'href' attribute.`}else{const i=s;for(let n=0;n<i.length;n++)if(!i[n].src)return`Element at index ${n} is missing 'src' attribute.`}return t||s}function vt({elements:s,...t}){if(!s)throw new Error("No elements");let i=ut(s);if(typeof i=="string")return console.error(i),console.warn("VistaView: silently returning."),null;const n=new ht(i,t);return{open:(e=0)=>n.open(e),close:()=>n.close(),next:()=>n.next(),prev:()=>n.prev(),destroy:()=>n.destroy(),getCurrentIndex:()=>n.getCurrentIndex(),view:e=>{n.view(e)}}}exports.DefaultOptions=R;exports.VistaViewTransitionAbortedError=P;exports.defaultClose=N;exports.defaultInit=B;exports.defaultSetup=_;exports.defaultTransition=V;exports.removeTouchActions=H;exports.setTouchActions=Y;exports.vistaView=vt;exports.vistaViewDownload=X;
package/dist/vue.cjs DELETED
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("vue"),n=require("./vistaview.cjs");function d(t){let e=null;return r.onMounted(()=>{e=n.vistaView(t)}),r.onUnmounted(()=>{e==null||e.destroy(),e=null}),{open:u=>e==null?void 0:e.open(u),close:()=>e==null?void 0:e.close(),next:()=>e==null?void 0:e.next(),prev:()=>e==null?void 0:e.prev(),getCurrentIndex:()=>(e==null?void 0:e.getCurrentIndex())??-1,view:u=>e==null?void 0:e.view(u)}}const V=r.defineComponent({name:"VistaView",props:{selector:{type:String,required:!0},class:String},setup(t,{slots:e,attrs:u}){const l=r.ref(null);let o=null;return r.onMounted(()=>{if(l.value){if(!t.selector)throw new Error("VistaView: selector is required");o=n.vistaView({...u,elements:l.value.querySelectorAll(t.selector)})}}),r.onUnmounted(()=>{o==null||o.destroy(),o=null}),()=>{var i;return r.h("div",{ref:l,class:t.class},(i=e.default)==null?void 0:i.call(e))}}});exports.VistaView=V;exports.useVistaView=d;