vistaview 0.3.7 → 0.3.8

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 (8) hide show
  1. package/dist/lib/defaults.d.ts.map +1 -1
  2. package/dist/lib/vista-view.d.ts +4 -3
  3. package/dist/lib/vista-view.d.ts.map +1 -1
  4. package/dist/vistaview.cjs +4 -4
  5. package/dist/vistaview.css +1 -1
  6. package/dist/vistaview.js +183 -177
  7. package/dist/vistaview.umd.js +4 -4
  8. package/package.json +1 -1
package/dist/lib/defaults.d.ts.map CHANGED
@@ -1 +1 @@
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,CAkJ1D;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,2BAiH/B,CAAC;AAKF,eAAO,MAAM,YAAY,EAAE,sBAK1B,CAAC"}
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,CAoJ1D;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,2BAwG/B,CAAC;AAKF,eAAO,MAAM,YAAY,EAAE,sBAK1B,CAAC"}
package/dist/lib/vista-view.d.ts CHANGED
@@ -54,12 +54,13 @@ export declare class VistaView {
54
54
  private onZoomedPointerDown;
55
55
  private onZoomedPointerMove;
56
56
  private onZoomedPointerUp;
57
- private transitionAbortController;
57
+ private transitionAbortControllers;
58
58
  constructor(elements: NodeListOf<HTMLElement> | VistaViewImage[], options?: VistaViewOptions);
59
+ private loadImageTimeout;
59
60
  private swap;
60
61
  private setZoomed;
61
- private zoomIn;
62
- private zoomOut;
62
+ zoomIn(): void;
63
+ zoomOut(): void;
63
64
  private clearZoom;
64
65
  private getImages;
65
66
  private setInitialDimPos;
package/dist/lib/vista-view.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"vista-view.d.ts","sourceRoot":"","sources":["../../src/lib/vista-view.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAIV,sBAAsB,EACtB,cAAc,EACd,qBAAqB,EACrB,gBAAgB,EAEjB,MAAM,SAAS,CAAC;AAIjB,qBAAa,+BAAgC,SAAQ,KAAK;gBAC5C,OAAO,EAAE,MAAM;CAI5B;AAED,eAAO,MAAM,cAAc;;;;;;;;;cAepB,gBAAgB,CAAC,UAAU,CAAC;CAClC,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE;IAAE,eAAe,EAAE,SAAS,GAAG,IAAI,CAAA;CAEjE,CAAC;AAEF,qBAAa,SAAS;IACpB,OAAO,EAAE,gBAAgB,CAAC;IAC1B,QAAQ,EAAE,UAAU,CAAC,WAAW,CAAC,GAAG,cAAc,EAAE,CAAC;IACrD,eAAe,EAAE,OAAO,CAAC;IACzB,YAAY;gBACM,MAAM,GAAG,IAAI;oBACT,SAAS,GAAG,IAAI;;;;;qBAOvB,MAAM,GAAG,IAAI;qBALb,MAAM;aAWR;YAAE,IAAI,EAAE,OAAO,CAAC;YAAC,IAAI,EAAE,OAAO,CAAA;SAAE;MAG3C;IAEF,OAAO,EAAE,WAAW,GAAG,IAAI,CAAQ;IACnC,iBAAiB,EAAE,WAAW,GAAG,IAAI,CAAQ;IAC7C,cAAc,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,sBAAsB,CAAA;KAAE,CAAM;IAC/D,aAAa,EAAE,qBAAqB,EAAE,GAAG,IAAI,CAAQ;IACrD,YAAY,EAAE,cAAc,EAAE,GAAG,IAAI,CAAQ;IAC7C,SAAS,UAAQ;IACjB,QAAQ,EAAE,gBAAgB,GAAG,KAAK,CAAS;IAE3C,OAAO,CAAC,eAAe,CAIrB;IACF,OAAO,CAAC,qBAAqB,CAAwD;IAErF,OAAO,CAAC,eAAe,CAA6B;IACpD,OAAO,CAAC,SAAS,CAA6C;IAE9D,OAAO,CAAC,SAAS,CAAwC;IACzD,OAAO,CAAC,cAAc,CAAkD;IACxE,OAAO,CAAC,SAAS,CAAwC;IACzD,OAAO,CAAC,QAAQ,CAAsC;IAEtD,OAAO,CAAC,mBAAmB,CAA4C;IACvE,OAAO,CAAC,mBAAmB,CAA4C;IACvE,OAAO,CAAC,iBAAiB,CAA4C;IAErE,OAAO,CAAC,yBAAyB,CAAgC;gBAErD,QAAQ,EAAE,UAAU,CAAC,WAAW,CAAC,GAAG,cAAc,EAAE,EAAE,OAAO,CAAC,EAAE,gBAAgB;YA2C9E,IAAI;IAuFlB,OAAO,CAAC,SAAS;IAiGjB,OAAO,CAAC,MAAM;IAsCd,OAAO,CAAC,OAAO;IA2Df,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,SAAS;IAwBjB,OAAO,CAAC,gBAAgB;IA8BxB,OAAO,CAAC,2BAA2B;IAqCnC,OAAO,CAAC,UAAU;IAyFlB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,qBAAqB;IAK7B,OAAO,CAAC,iBAAiB;IA2BzB,OAAO,CAAC,oBAAoB;IA6B5B,OAAO,CAAC,kBAAkB;IAqB1B,IAAI,CAAC,UAAU,GAAE,MAAU,GAAG,IAAI;IA6J5B,KAAK,CAAC,IAAI,UAAO,GAAG,OAAO,CAAC,IAAI,CAAC;IAqEvC,OAAO,IAAI,IAAI;IAWf,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,IAAI,EAAE,OAAO,CAAA;KAAE,GAAG,IAAI;IAYnE,IAAI,IAAI,IAAI;IAKZ,IAAI,IAAI,IAAI;IAKZ,eAAe,IAAI,MAAM;CAG1B"}
1
+ {"version":3,"file":"vista-view.d.ts","sourceRoot":"","sources":["../../src/lib/vista-view.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAIV,sBAAsB,EACtB,cAAc,EACd,qBAAqB,EACrB,gBAAgB,EAEjB,MAAM,SAAS,CAAC;AAIjB,qBAAa,+BAAgC,SAAQ,KAAK;gBAC5C,OAAO,EAAE,MAAM;CAI5B;AAED,eAAO,MAAM,cAAc;;;;;;;;;cAepB,gBAAgB,CAAC,UAAU,CAAC;CAClC,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE;IAAE,eAAe,EAAE,SAAS,GAAG,IAAI,CAAA;CAEjE,CAAC;AAEF,qBAAa,SAAS;IACpB,OAAO,EAAE,gBAAgB,CAAC;IAC1B,QAAQ,EAAE,UAAU,CAAC,WAAW,CAAC,GAAG,cAAc,EAAE,CAAC;IACrD,eAAe,EAAE,OAAO,CAAC;IACzB,YAAY;gBACM,MAAM,GAAG,IAAI;oBACT,SAAS,GAAG,IAAI;;;;;qBAUvB,MAAM,GAAG,IAAI;qBARb,MAAM;aAcR;YAAE,IAAI,EAAE,OAAO,CAAC;YAAC,IAAI,EAAE,OAAO,CAAA;SAAE;MAG3C;IAEF,OAAO,EAAE,WAAW,GAAG,IAAI,CAAQ;IACnC,iBAAiB,EAAE,WAAW,GAAG,IAAI,CAAQ;IAC7C,cAAc,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,sBAAsB,CAAA;KAAE,CAAM;IAC/D,aAAa,EAAE,qBAAqB,EAAE,GAAG,IAAI,CAAQ;IACrD,YAAY,EAAE,cAAc,EAAE,GAAG,IAAI,CAAQ;IAC7C,SAAS,UAAQ;IACjB,QAAQ,EAAE,gBAAgB,GAAG,KAAK,CAAS;IAE3C,OAAO,CAAC,eAAe,CAIrB;IACF,OAAO,CAAC,qBAAqB,CAAwD;IAErF,OAAO,CAAC,eAAe,CAA6B;IACpD,OAAO,CAAC,SAAS,CAA6C;IAE9D,OAAO,CAAC,SAAS,CAAwC;IACzD,OAAO,CAAC,cAAc,CAAkD;IACxE,OAAO,CAAC,SAAS,CAAwC;IACzD,OAAO,CAAC,QAAQ,CAAsC;IAEtD,OAAO,CAAC,mBAAmB,CAA4C;IACvE,OAAO,CAAC,mBAAmB,CAA4C;IACvE,OAAO,CAAC,iBAAiB,CAA4C;IAErE,OAAO,CAAC,0BAA0B,CAA0C;gBAEhE,QAAQ,EAAE,UAAU,CAAC,WAAW,CAAC,GAAG,cAAc,EAAE,EAAE,OAAO,CAAC,EAAE,gBAAgB;IA2C5F,OAAO,CAAC,gBAAgB,CAA8C;YAExD,IAAI;IA4FlB,OAAO,CAAC,SAAS;IAiGjB,MAAM,IAAI,IAAI;IAsCd,OAAO,IAAI,IAAI;IA2Df,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,SAAS;IAwBjB,OAAO,CAAC,gBAAgB;IA8BxB,OAAO,CAAC,2BAA2B;IAqCnC,OAAO,CAAC,UAAU;IAyFlB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,qBAAqB;IAK7B,OAAO,CAAC,iBAAiB;IA2BzB,OAAO,CAAC,oBAAoB;IA6B5B,OAAO,CAAC,kBAAkB;IAqB1B,IAAI,CAAC,UAAU,GAAE,MAAU,GAAG,IAAI;IA6J5B,KAAK,CAAC,IAAI,UAAO,GAAG,OAAO,CAAC,IAAI,CAAC;IAqEvC,OAAO,IAAI,IAAI;IAWf,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,IAAI,EAAE,OAAO,CAAA;KAAE,GAAG,IAAI;IAYnE,IAAI,IAAI,IAAI;IAKZ,IAAI,IAAI,IAAI;IAKZ,eAAe,IAAI,MAAM;CAG1B"}
package/dist/vistaview.cjs CHANGED
@@ -1,11 +1,11 @@
1
- "use strict";var N=Object.defineProperty;var U=(s,t,i)=>t in s?N(s,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):s[t]=i;var w=(s,t,i)=>U(s,typeof t!="symbol"?t+"":t,i);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function H(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 T(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(),a=s.naturalWidth,d=s.naturalHeight;if(!i)return{width:n,height:e};if(!a||!d)return{width:n,height:e};const o=a/d,l=n/e;switch(i){case"fill":return{width:n,height:e};case"none":return{width:a,height:d};case"contain":return o>l?{width:n,height:n/o}:{width:e*o,height:e};case"cover":return o<l?{width:n,height:n/o}:{width:e*o,height:e};case"scale-down":{const h={width:a,height:d},r=o>l?{width:n,height:n/o}:{width:e*o,height:e};return r.width<=h.width&&r.height<=h.height?r:h}}return{width:n,height:e}}function q(s){const t=window.innerWidth,i=window.innerHeight,n=s.naturalWidth,e=s.naturalHeight;if(!n||!e)throw console.error("Error",s),new Error("Image natural dimensions are zero");if(n<t&&e<i)return{width:n,height:e};const a=n/e,d=t/i;let o,l;return a>d?(o=t,l=t/a):(l=i,o=i*a),{width:o,height:l}}function k(s,t){const i=window.innerHeight,n=window.innerWidth,e=s,a=t,d=Math.max(0,(e-n)/2)+n/2,o=Math.max(0,(a-i)/2)+i/2,l=-d,h=-o;return{maxDiffX:d,minDiffY:h,maxDiffY:o,minDiffX:l}}const G='<svg viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>',J='<svg viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>',Q='<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="11" x2="11" y1="8" y2="14"/><line x1="8" x2="14" y1="11" y2="11"/></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="8" x2="14" y1="11" y2="11"/></svg>',et='<svg viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>',it='<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:it,onClick:async s=>{var a;const t=await fetch(s.src),i=await t.blob(),n=t.url,e=document.createElement("a");e.href=URL.createObjectURL(i),e.download=((a=n.split("/").pop())==null?void 0:a.split("?")[0].split("#")[0])||"download",document.body.appendChild(e),e.click(),document.body.removeChild(e)}}}function nt(s){if(typeof s=="string")switch(s){case"zoomIn":return`<button class="vistaview-zoom-in-btn">${Q}</button>`;case"zoomOut":return`<button disabled class="vistaview-zoom-out-btn">${tt}</button>`;case"close":return`<button class="vistaview-close-btn">${et}</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 r,c;const i=s.imageElm?getComputedStyle(s.imageElm):null,n=(i==null?void 0:i.objectFit)||"",e=((r=s.imageElm)==null?void 0:r.naturalWidth)||"",a=((c=s.imageElm)==null?void 0:c.naturalHeight)||"",d=(i==null?void 0:i.width)||"",o=(i==null?void 0:i.height)||"",l=document.createElement("div");l.className="vistaview-item",l.dataset.vistaviewPos=`${t!==void 0?t:""}`,l.dataset.vistaviewIndex=s.index.toString();const h=O(`<img class="vistaview-image-lowres"
1
+ "use strict";var N=Object.defineProperty;var U=(s,t,i)=>t in s?N(s,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):s[t]=i;var w=(s,t,i)=>U(s,typeof t!="symbol"?t+"":t,i);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function R(s){const t=getComputedStyle(s),i=s.getBoundingClientRect();return{objectFit:t.objectFit,borderRadius:t.borderRadius,objectPosition:t.objectPosition,overflow:t.overflow,top:i.top,left:i.left,width:i.width,height:i.height,naturalWidth:s.naturalWidth,naturalHeight:s.naturalHeight}}let P=null;function K(){return P||(window.trustedTypes||(window.trustedTypes={createPolicy:(s,t)=>t}),P=window.trustedTypes.createPolicy("vistaView-policy",{createHTML:s=>s,createScript:()=>{throw new Error("Not implemented")},createScriptURL:()=>{throw new Error("Not implemented")}}),P)}function O(s){const i=K().createHTML(s),n=document.createElement("template");n.innerHTML=i;const e=n.content;return n.remove(),e}function H(s){return s&&!/^0(px|%|r?em|vw|vh|vmin|vmax|cm|mm|in|pt|pc|ex|ch)?$/i.test(s.trim())&&s}function j(s){const i=window.getComputedStyle(s).objectFit||"",{width:n,height:e}=s.getBoundingClientRect(),r=s.naturalWidth,d=s.naturalHeight;if(!i)return{width:n,height:e};if(!r||!d)return{width:n,height:e};const o=r/d,a=n/e;switch(i){case"fill":return{width:n,height:e};case"none":return{width:r,height:d};case"contain":return o>a?{width:n,height:n/o}:{width:e*o,height:e};case"cover":return o<a?{width:n,height:n/o}:{width:e*o,height:e};case"scale-down":{const h={width:r,height:d},l=o>a?{width:n,height:n/o}:{width:e*o,height:e};return l.width<=h.width&&l.height<=h.height?l:h}}return{width:n,height:e}}function q(s){const t=window.innerWidth,i=window.innerHeight,n=s.naturalWidth,e=s.naturalHeight;if(!n||!e)throw console.error("Error",s),new Error("Image natural dimensions are zero");if(n<t&&e<i)return{width:n,height:e};const r=n/e,d=t/i;let o,a;return r>d?(o=t,a=t/r):(a=i,o=i*r),{width:o,height:a}}function k(s,t){const i=window.innerHeight,n=window.innerWidth,e=s,r=t,d=Math.max(0,(e-n)/2)+n/2,o=Math.max(0,(r-i)/2)+i/2,a=-d,h=-o;return{maxDiffX:d,minDiffY:h,maxDiffY:o,minDiffX:a}}const G='<svg viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>',J='<svg viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>',Q='<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="11" x2="11" y1="8" y2="14"/><line x1="8" x2="14" y1="11" y2="11"/></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="8" x2="14" y1="11" y2="11"/></svg>',et='<svg viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>',it='<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:it,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 nt(s){if(typeof s=="string")switch(s){case"zoomIn":return`<button class="vistaview-zoom-in-btn">${Q}</button>`;case"zoomOut":return`<button disabled class="vistaview-zoom-out-btn">${tt}</button>`;case"close":return`<button class="vistaview-close-btn">${et}</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 l,c;const i=s.imageElm?getComputedStyle(s.imageElm):null,n=(i==null?void 0:i.objectFit)||"",e=((l=s.imageElm)==null?void 0:l.naturalWidth)||"",r=((c=s.imageElm)==null?void 0:c.naturalHeight)||"",d=(i==null?void 0:i.width)||"",o=(i==null?void 0:i.height)||"",a=document.createElement("div");a.className="vistaview-item",a.dataset.vistaviewPos=`${t!==void 0?t:""}`,a.dataset.vistaviewIndex=s.index.toString();const h=O(`<img class="vistaview-image-lowres"
2
2
  style="${n?`object-fit:${n};`:""}${d?`width:${d};`:""}${o?`height:${o};`:""}"
3
3
  src="${s.thumb||s.src}"
4
4
  alt="${s.alt||""}"
5
5
  ${e?`width="${e}"`:""}
6
- ${a?`height="${a}"`:""}
6
+ ${r?`height="${r}"`:""}
7
7
  />
8
- <img class="vistaview-image-highres" src="${s.src}" alt="${s.alt||""}" />`);return l.appendChild(h),l}function st({controls:s,isReducedMotion:t}){const i=e=>e?e.map(nt).join(""):"";return O(`<div class="vistaview-root${t?" vistaview--reduced-motion":""}" id="vistaview-root">
8
+ <img class="vistaview-image-highres" src="${s.src}" alt="${s.alt||""}" />`);return a.appendChild(h),a}function st({controls:s,isReducedMotion:t}){const i=e=>e?e.map(nt).join(""):"";return O(`<div class="vistaview-root${t?" vistaview--reduced-motion":""}" id="vistaview-root">
9
9
  <div class="vistaview-container">
10
10
  <div class="vistaview-image-container"></div>
11
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>
@@ -13,4 +13,4 @@
13
13
  <div class="vistaview-prev-btn vistaview-ui"><button>${G}</button></div>
14
14
  <div class="vistaview-next-btn vistaview-ui"><button>${J}</button></div>
15
15
  </div>
16
- </div>`)}let P=null,$=null,M=null,Z=null;function X(s){R(s);const t=s.imageContainerElm,i=s.elements.length;if(!t)return;let n=0,e=0,a=0,d=0,o=null,l=0,h=!1;P=r=>{r.preventDefault(),r.stopPropagation(),s.isZoomed===!1&&(h=!0,n=r.pageX,e=r.pageY,a=r.pageX,d=r.pageY,l=Date.now(),o=null,t.setPointerCapture(r.pointerId))},$=r=>{if(r.preventDefault(),r.stopPropagation(),s.isZoomed!==!1||!h)return;const c=r.pageX-n,m=r.pageY-e;a=r.pageX,d=r.pageY,Math.abs(c)>=Math.abs(m)&&(o===null||o===!0)?(t.style.setProperty("--vistaview-pointer-diff-x",`${c}px`),o=!0):Math.abs(m)>Math.abs(c)&&(o===null||o===!1)&&(t.style.setProperty("--vistaview-pointer-diff-y",`${m}px`),o=!1)},Z=r=>{if(r.preventDefault(),r.stopPropagation(),t.releasePointerCapture(r.pointerId),s.isZoomed!==!1||!h)return;h=!1,o=null;const c=Array.from(t.querySelectorAll(".vistaview-item"));t.style.removeProperty("--vistaview-pointer-diff-x"),t.style.removeProperty("--vistaview-pointer-diff-y"),c.forEach(m=>{m.style.transition="",m.style.translate=""})},M=r=>{if(r.preventDefault(),r.stopPropagation(),t.releasePointerCapture(r.pointerId),s.isZoomed!==!1||!h)return;h=!1;const c=Array.from(t.querySelectorAll(".vistaview-item")),m=a-n,f=d-e,u=Date.now()-l,v=m/u,y=f/u,p=s.options.touchSpeedThreshold||.5,x=c.find(E=>E.dataset.vistaviewPos==="0"),b=Number(x.dataset.vistaviewIndex);function g(){c[0].removeEventListener("transitionend",g),t.style.removeProperty("--vistaview-pointer-diff-x"),t.style.removeProperty("--vistaview-pointer-diff-y"),c.forEach(E=>{E.style.transition="",E.style.translate=""})}function I(E="0%",L="0%"){c.forEach(S=>{S.style.transition=`translate ${s.options.animationDurationBase*.5}ms ease-out`,S.style.translate=`${E} ${L}`})}if(v<-p||v>p){let E=function(){c[0].removeEventListener("transitionend",E),setTimeout(()=>{const L=s.isReducedMotion;s.isReducedMotion=!0,g(),s.view(v<-p?(b+1)%i:(b-1+i)%i,{next:v<-p,prev:v>p}),s.isReducedMotion=L},100)};I(v<-p?"-100%":"100%"),c[0].addEventListener("transitionend",E)}else y<-p||y>p?(s.close(),I("0%","0%")):(c[0].addEventListener("transitionend",g),I("0%"))},t.addEventListener("pointermove",$),t.addEventListener("pointerup",M),t.addEventListener("pointerdown",P),t.addEventListener("pointercancel",Z)}function R(s){const t=s.imageContainerElm;t&&($&&t.removeEventListener("pointermove",$),M&&t.removeEventListener("pointerup",M),P&&t.removeEventListener("pointerdown",P),Z&&t.removeEventListener("pointercancel",Z))}const Y=s=>{X(s)},B=({htmlElements:{to:s},index:{to:t},elements:i})=>{i instanceof NodeList&&t!==null&&(i.forEach(n=>n.style.opacity="1"),i[t].style.opacity="0"),s&&s.forEach(n=>{const e=Number(n.dataset.vistaviewPos);e!==0?(n.style.zIndex="1",n.style.left=100*e+"%"):n.style.zIndex="2"})},_=async({htmlElements:{from:s,to:t},images:{to:i},via:{next:n,prev:e},options:a,isReducedMotion:d},o)=>{if(!i)throw new Error("VistaView: images is null in defaultTransition()");const l=s.filter(h=>h.dataset.vistaviewPos==="0"||(n?h.dataset.vistaviewPos==="1":h.dataset.vistaviewPos==="-1"));d||await new Promise((h,r)=>{let c=0;if(o.aborted){r(new D("Transition aborted"));return}const m=f=>{if(o.aborted){r(new D("Transition aborted"));return}if(f.currentTarget.removeEventListener("transitionend",m),c++,c<l.length)return;const u=t==null?void 0:t.find(g=>g.dataset.vistaviewPos==="0"),v=u?Number(u.dataset.vistaviewIndex):0,y=l.find(g=>Number(g.dataset.vistaviewIndex)===v),p=y==null?void 0:y.querySelector(".vistaview-image-highres");if(!p){r(new Error("current image element not found"));return}if(!p.classList.contains("vistaview-image-loaded")){h(0);return}if(u==null||u.classList.add("vistaview-image-loaded"),p.classList.contains("vistaview-image-settled")){u==null||u.classList.add("vistaview-image-settled"),h(0);return}let x=0;const b=setInterval(()=>{if(o.aborted){clearInterval(b),r(new D("Transition aborted"));return}if(x++,x>a.animationDurationBase/20*1.5){clearInterval(b),h(0);return}p.classList.contains("vistaview-image-settled")&&(u==null||u.classList.add("vistaview-image-settled"),clearInterval(b),h(0))},20)};l.forEach(f=>{f.style.transition=`translate ${a.animationDurationBase*.5}ms ease-out`,f.style.translate=n?"-100%":e?"100%":"0%",f.addEventListener("transitionend",m)})})},F=s=>{s.elements instanceof NodeList&&s.elements.forEach(t=>t.style.opacity="1"),R(s)};class D extends Error{constructor(t){super(t),this.name="VistaViewTransitionAbortedError"}}const z={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"]}},C={somethingOpened:null};class ot{constructor(t,i){w(this,"options");w(this,"elements");w(this,"isReducedMotion");w(this,"currentIndex",{_value:null,_vistaView:null,_via:{next:!1,prev:!1},set value(t){var n;const i=this._value;this._value=t,(n=this._vistaView)==null||n.swap(i,this._value)},get value(){return this._value},get via(){return this._via},set via(t){this._via=t}});w(this,"rootElm",null);w(this,"imageContainerElm",null);w(this,"customControls",{});w(this,"currentImages",null);w(this,"currentItems",null);w(this,"navActive",!0);w(this,"isZoomed",!1);w(this,"onClickElements",t=>{t.preventDefault();const i=t.currentTarget;i.dataset.vistaviewIndex&&this.open(parseInt(i.dataset.vistaviewIndex))});w(this,"defaultOnClickHandler",t=>t.preventDefault());w(this,"onResizeHandler",null);w(this,"onKeyDown",null);w(this,"userSetup",B);w(this,"userTransition",_);w(this,"userClose",F);w(this,"userInit",Y);w(this,"onZoomedPointerDown",null);w(this,"onZoomedPointerMove",null);w(this,"onZoomedPointerUp",null);w(this,"transitionAbortController",null);this.elements=t,this.currentIndex._vistaView=this,this.options={...z,...i||{},controls:{...z.controls,...(i==null?void 0:i.controls)||{}}},this.options.initFunction&&(this.userInit=this.options.initFunction),this.options.transitionFunction&&(this.userTransition=this.options.transitionFunction),this.options.closeFunction&&(this.userClose=this.options.closeFunction),this.options.initFunction&&(this.userInit=this.options.initFunction),this.isReducedMotion=window.matchMedia("(prefers-reduced-motion: reduce)").matches,this.elements instanceof NodeList&&this.elements.forEach((n,e)=>{n.dataset.vistaviewIndex=e.toString(),n.addEventListener("click",this.defaultOnClickHandler),n.addEventListener("pointerup",this.onClickElements)})}async swap(t,i){var l,h;if(!C.somethingOpened||t===i||t===null)return;if(this.transitionAbortController&&this.transitionAbortController.abort(),!this.imageContainerElm)throw new Error("VistaView: imageContainerElm is null in swap()");this.setIndexDisplay(),this.clearZoom();const{images:n,positions:e}=this.getCurrentIndexes(i),a=this.getImages(n),d=a.map((r,c)=>W(r,e[c])),o={htmlElements:{from:this.currentItems,to:d},images:{from:this.currentImages,to:a},index:{from:t,to:i},via:this.currentIndex.via,container:this.imageContainerElm,elements:this.elements,isReducedMotion:this.isReducedMotion,navActive:this.navActive,isZoomed:this.isZoomed,options:this.options};this.userSetup(o),this.transitionAbortController=new AbortController;try{await this.userTransition(o,this.transitionAbortController.signal)}catch(r){r instanceof D||console.error(r)}this.imageContainerElm.innerHTML="",d.forEach(r=>{const c=r.dataset.vistaviewPos,m=r.dataset.vistaviewIndex;if(c==="0"){const f=this.currentItems.find(y=>y.dataset.vistaviewIndex===m),u=r.querySelector(".vistaview-image-highres"),v=f==null?void 0:f.querySelector(".vistaview-image-highres");v&&(u.setAttribute("class",v.getAttribute("class")||""),u.setAttribute("style",v.getAttribute("style")||"")),this.imageContainerElm.appendChild(r)}else this.imageContainerElm.appendChild(r)}),this.setInitialDimPos(),this.currentImages=a,this.currentItems=d,this.loadImages(),this.setCurrentDescription(),this.updateZoomButtonsVisibility(),(h=(l=this.options).onImageView)==null||h.call(l,o)}setZoomed(t){var i,n,e,a,d,o;if(this.isZoomed!==t){if(this.isZoomed){let l=this.isZoomed;if(l.classList.remove("vistaview-image--zooming"),this.onZoomedPointerDown&&((i=l.parentElement)==null||i.removeEventListener("pointerdown",this.onZoomedPointerDown),this.onZoomedPointerDown=null),this.onZoomedPointerMove&&((n=l.parentElement)==null||n.removeEventListener("pointermove",this.onZoomedPointerMove),this.onZoomedPointerMove=null),this.onZoomedPointerUp&&((e=l.parentElement)==null||e.removeEventListener("pointerup",this.onZoomedPointerUp),this.onZoomedPointerUp=null),l==null||l.style.removeProperty("--pointer-diff-x"),l==null||l.style.removeProperty("--pointer-diff-y"),setTimeout(()=>{l==null||l.classList.remove("vistaview-image--zooming")},500),this.isZoomed=!1,!t)return}if(t){this.isZoomed=t,t.classList.add("vistaview-image--zooming"),t==null||t.style.setProperty("--pointer-diff-x","0px"),t==null||t.style.setProperty("--pointer-diff-y","0px");let l=!1,h=0,r=0,c=0,m=0,f=0,u=0;this.onZoomedPointerDown=v=>{v.preventDefault(),v.stopPropagation(),l=!0,h=v.pageX,r=v.pageY,t.setPointerCapture(v.pointerId)},this.onZoomedPointerMove=v=>{if(!l)return;v.preventDefault(),f=v.pageX-h,u=v.pageY-r;const y=parseInt((t==null?void 0:t.dataset.vistaviewCurrentWidth)||"0"),p=parseInt((t==null?void 0:t.dataset.vistaviewCurrentHeight)||"0"),{maxDiffX:x,minDiffY:b,maxDiffY:g,minDiffX:I}=k(y,p),E=Math.min(x,Math.max(I,c+f)),L=Math.min(g,Math.max(b,m+u));f=E-c,u=L-m,t==null||t.style.setProperty("--pointer-diff-x",`${E}px`),t==null||t.style.setProperty("--pointer-diff-y",`${L}px`)},this.onZoomedPointerUp=v=>{l=!1,t.releasePointerCapture(v.pointerId),c+=f,m+=u,f=0,u=0},(a=t==null?void 0:t.parentElement)==null||a.addEventListener("pointerdown",this.onZoomedPointerDown),(d=t==null?void 0:t.parentElement)==null||d.addEventListener("pointermove",this.onZoomedPointerMove),(o=t==null?void 0:t.parentElement)==null||o.addEventListener("pointerup",this.onZoomedPointerUp);return}}}zoomIn(){var a,d,o,l,h;const t=(a=this.rootElm)==null?void 0:a.querySelector('[data-vistaview-pos="0"] .vistaview-image-highres'),i=t.width,n=t.height;t.dataset.vistaviewInitialWidth||(t.dataset.vistaviewInitialWidth=i.toString()),t.dataset.vistaviewInitialHeight||(t.dataset.vistaviewInitialHeight=n.toString()),this.setZoomed(t);const e=(t.naturalWidth||0)*this.options.maxZoomLevel;if(i&&e&&i<e){const r=Math.min(i+this.options.zoomStep,e);t.style.width=`${r}px`;const c=r/i*n;t.style.height=`${c}px`,(o=(d=this.rootElm)==null?void 0:d.querySelector("button.vistaview-zoom-out-btn"))==null||o.removeAttribute("disabled"),t.dataset.vistaviewCurrentWidth=r.toString(),t.dataset.vistaviewCurrentHeight=c.toString(),r===e&&((h=(l=this.rootElm)==null?void 0:l.querySelector("button.vistaview-zoom-in-btn"))==null||h.setAttribute("disabled","true"))}}zoomOut(){var d,o,l,h,r;const t=(d=this.rootElm)==null?void 0:d.querySelector('[data-vistaview-pos="0"] .vistaview-image-highres'),i=t.width,n=t.height,e=t.dataset.vistaviewInitialWidth?parseInt(t.dataset.vistaviewInitialWidth):0,a=c=>{c.target===t&&(t.classList.remove("vistaview-image--zooming-out"),t.removeEventListener("transitionend",a))};if(t.addEventListener("transitionend",a),t.classList.add("vistaview-image--zooming-out"),i&&e&&i>e){const c=Math.max(i-this.options.zoomStep,e);t.style.width=`${c}px`;const m=c/i*n;t.style.height=`${m}px`,(l=(o=this.rootElm)==null?void 0:o.querySelector("button.vistaview-zoom-in-btn"))==null||l.removeAttribute("disabled"),t.dataset.vistaviewCurrentWidth=c.toString(),t.dataset.vistaviewCurrentHeight=m.toString();const{maxDiffX:f,minDiffY:u,maxDiffY:v,minDiffX:y}=k(c,m);let p=parseInt((t==null?void 0:t.style.getPropertyValue("--pointer-diff-x").replace("px",""))||"0"),x=parseInt((t==null?void 0:t.style.getPropertyValue("--pointer-diff-y").replace("px",""))||"0");p=Math.min(f,Math.max(y,p)),x=Math.min(v,Math.max(u,x)),t==null||t.style.setProperty("--pointer-diff-x",`${p}px`),t==null||t.style.setProperty("--pointer-diff-y",`${x}px`),c===e&&((r=(h=this.rootElm)==null?void 0:h.querySelector("button.vistaview-zoom-out-btn"))==null||r.setAttribute("disabled","true"),t.removeAttribute("data-vistaview-current-width"),t.removeAttribute("data-vistaview-current-height"),t.removeAttribute("data-vistaview-initial-width"),t.removeAttribute("data-vistaview-initial-height"),this.setZoomed(!1))}}clearZoom(){}getImages(t){return t.map((i,n)=>{const e=this.elements[i];if(e instanceof HTMLElement){const a=e.querySelector("img"),d=e.getAttribute("href")||"",o=e.getAttribute("src")||"",l=e.dataset.vistaviewSrc||d||o||(a==null?void 0:a.src)||"",h=e.dataset.vistaviewAlt||e.getAttribute("alt")||(a==null?void 0:a.alt)||"",r=e.dataset.vistaviewThumb||(a==null?void 0:a.src)||d||o||"";return{index:t[n],src:l,alt:h,thumb:r,imageElm:e instanceof HTMLImageElement?e:a,anchorElm:e instanceof HTMLAnchorElement?e:void 0}}else return{index:t[n],...e}})}setInitialDimPos(){var h,r;if(!this.rootElm)return;const t=(h=this.rootElm.querySelector('[data-vistaview-pos="0"]'))==null?void 0:h.dataset.vistaviewIndex,i=((r=this.currentImages)==null?void 0:r.find(c=>c.index===Number(t)))||null;if(!i)return;const n=i.imageElm?H(i.imageElm):void 0,e=i.anchorElm?H(i.anchorElm):void 0,a=(e==null?void 0:e.width)||(n==null?void 0:n.width)||0,d=(e==null?void 0:e.height)||(n==null?void 0:n.height)||0,o=((e==null?void 0:e.left)||(n==null?void 0:n.left)||0)+a/2,l=((e==null?void 0:e.top)||(n==null?void 0:n.top)||0)+d/2;this.rootElm.style.setProperty("--vistaview-container-initial-width",a+"px"),this.rootElm.style.setProperty("--vistaview-container-initial-height",d+"px"),this.rootElm.style.setProperty("--vistaview-container-initial-top",l+"px"),this.rootElm.style.setProperty("--vistaview-container-initial-left",o+"px"),this.rootElm.style.setProperty("--vistaview-image-border-radius",T(e==null?void 0:e.borderRadius)||T(n==null?void 0:n.borderRadius)||"0px")}updateZoomButtonsVisibility(){var e;const t=(e=this.rootElm)==null?void 0:e.querySelector('[data-vistaview-pos="0"] img.vistaview-image-highres');if(!t)return;const i=this;function n(){var r,c;const a=(r=i.rootElm)==null?void 0:r.querySelector("button.vistaview-zoom-in-btn"),d=(c=i.rootElm)==null?void 0:c.querySelector("button.vistaview-zoom-out-btn"),o=parseInt(t.style.width)||t.width,l=t.naturalWidth*i.options.maxZoomLevel,h=o<l&&l>0;a&&(a.style.display=h?"":"none"),d&&(d.style.display=h?"":"none")}t.complete&&t.naturalWidth>0?n():t.addEventListener("load",n)}loadImages(){if(!this.rootElm)return;this.rootElm.querySelectorAll(".vistaview-image-highres:not(.vistaview-image-loaded)").forEach((i,n)=>{const e=i,d=this.currentImages[n].imageElm,o={w:0,h:0};if(d){const{width:h,height:r}=K(d);o.w=Math.min(d.width,h),o.h=Math.min(d.height,r)}const l=()=>{var r;const h=()=>{var c;o.w&&o.h&&(e.style.width=`${o.w}px`,e.style.height=`${o.h}px`,e.style.setProperty("--vistaview-fitted-width",`${o.w}px`),e.style.setProperty("--vistaview-fitted-height",`${o.h}px`)),e.classList.add("vistaview-image-loaded"),e.width=e.naturalWidth,e.height=e.naturalHeight,setTimeout(()=>{var y,p;let m=0;const f=()=>{var x,b;m++,!(m<3)&&(e.removeEventListener("transitionend",f),(b=(x=e.parentElement)==null?void 0:x.querySelector(".vistaview-image-lowres"))==null||b.classList.add("vistaview-image--hidden"),e.classList.add("vistaview-image-settled"))};e.addEventListener("transitionend",f);const{width:u,height:v}=q(e);e.style.width=`${u}px`,e.style.height=`${v}px`,o.w&&o.h&&u===o.w&&v===o.h?((p=(y=e.parentElement)==null?void 0:y.querySelector(".vistaview-image-lowres"))==null||p.classList.add("vistaview-image--hidden"),e.classList.add("vistaview-image-settled")):(e.style.width=`${u}px`,e.style.height=`${v}px`)},100),(c=i.parentElement)!=null&&c.matches('[data-vistaview-pos="0"]')&&this.updateZoomButtonsVisibility()};if((r=this.rootElm)!=null&&r.classList.contains("vistaview--opened"))h();else{const c=setInterval(()=>{var m;(m=this.rootElm)!=null&&m.classList.contains("vistaview--opened")&&(clearInterval(c),h())},50)}};e.complete&&e.naturalWidth>0?l():e.onload=l})}setIndexDisplay(){this.elements.length!==1&&(this.rootElm.querySelector(".vistaview-index-display").textContent=`${this.currentIndex.value+1} / ${this.elements.length}`)}setCurrentDescription(){this.rootElm.querySelector(".vistaview-description").textContent=(this.currentImages[1]||this.currentImages[0]).alt||""}getCurrentIndexes(t){const i=this.options.preloads,n=this.elements.length,e=n<1||!i?[t]:[...new Set([...Array.from({length:i},(d,o)=>((t-i+o)%n+n)%n),t,...Array.from({length:i},(d,o)=>(t+1+o)%n)])],a=n<1||!i?[0]:e.map((d,o)=>o-Math.floor(e.length/2));return{images:e,positions:a}}setKeyboardListeners(){this.onKeyDown=t=>{switch(t.key){case"ArrowLeft":t.preventDefault(),this.prev();break;case"ArrowRight":t.preventDefault(),this.next();break;case"ArrowUp":t.preventDefault(),this.zoomIn();break;case"ArrowDown":t.preventDefault(),this.zoomOut();break;case"Escape":t.preventDefault(),this.close();break}},window.addEventListener("keydown",this.onKeyDown)}setResizeListeners(){this.onResizeHandler=()=>{var i;this.setInitialDimPos();const t=(i=this.rootElm)==null?void 0:i.querySelectorAll(".vistaview-image-highres.vistaview-image-loaded");t==null||t.forEach(n=>{const e=n,{width:a,height:d}=q(e);e.classList.contains("vistaview-image--zooming")?(e.dataset.vistaviewInitialWidth=a.toString(),e.dataset.vistaviewInitialHeight=d.toString()):(e.style.width=`${a}px`,e.style.height=`${d}px`)})},window.addEventListener("resize",this.onResizeHandler)}open(t=0){var o,l,h,r,c,m,f,u,v,y,p,x,b;if(C.somethingOpened){console.error("VistaView: another instance is already opened. Returning.");return}if(C.somethingOpened=this,this.currentIndex._value=t,document.body.prepend(st({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 C.somethingOpened=null,new Error("Failed to create VistaView element");this.options.arrowOnSmallScreens||this.rootElm.classList.add("vistaview-no-arrows-sm");const{images:i,positions:n}=this.getCurrentIndexes(t);this.currentImages=this.getImages(i);const e=this.currentImages.map((g,I)=>W(g,n[I]));this.currentItems=e;const a={htmlElements:{from:null,to:this.currentItems},images:{from:null,to:this.currentImages},index:{from:null,to:t},via:this.currentIndex.via,container:this.imageContainerElm,elements:this.elements,isReducedMotion:this.isReducedMotion,navActive:this.navActive,isZoomed:this.isZoomed,options:this.options};this.userSetup(a),this.imageContainerElm.innerHTML="",this.currentItems.forEach(g=>{this.imageContainerElm.appendChild(g)});let d=0;this.rootElm.addEventListener("animationend",g=>{var I;g.currentTarget===this.rootElm&&(d++,d>=2&&((I=this.rootElm)==null||I.classList.add("vistaview--opened")))}),(l=this.rootElm.querySelector(".vistaview-close-btn"))==null||l.addEventListener("click",()=>this.close()),(h=this.rootElm.querySelector(".vistaview-zoom-in-btn"))==null||h.addEventListener("click",()=>this.zoomIn()),(r=this.rootElm.querySelector(".vistaview-zoom-out-btn"))==null||r.addEventListener("click",()=>this.zoomOut()),(c=this.rootElm.querySelector(".vistaview-prev-btn>button"))==null||c.addEventListener("click",()=>this.prev()),(m=this.rootElm.querySelector(".vistaview-next-btn>button"))==null||m.addEventListener("click",()=>this.next()),[...this.options.controls.topLeft||[],...this.options.controls.topRight||[],...this.options.controls.topCenter||[],...this.options.controls.bottomCenter||[],...this.options.controls.bottomLeft||[],...this.options.controls.bottomRight||[]].forEach(g=>{typeof g!="string"&&(this.customControls[g.name]=g)}),this.rootElm.querySelectorAll("button[data-vistaview-custom-control]").forEach(g=>{g.addEventListener("click",I=>{const E=this.customControls[I.currentTarget.dataset.vistaviewCustomControl],L=this.currentImages.find(S=>S.index===this.currentIndex.value);E&&L&&(E.onClick.constructor.name==="AsyncFunction"?(g.classList.add("vistaview-button--loading"),E.onClick(L).finally(()=>{g.classList.remove("vistaview-button--loading")})):E.onClick(L))})}),this.options.animationDurationBase&&this.rootElm.style.setProperty("--vistaview-animation-duration",`${this.options.animationDurationBase}`),this.options.initialZIndex!==void 0&&this.rootElm.style.setProperty("--vistaview-initial-z-index",`${this.options.initialZIndex}`),this.setInitialDimPos(),this.setResizeListeners(),this.options.keyboardListeners&&this.setKeyboardListeners(),this.elements.length===1&&((f=this.rootElm.querySelector(".vistaview-prev-btn"))==null||f.classList.add("vistaview-ui--none"),(u=this.rootElm.querySelector(".vistaview-next-btn"))==null||u.classList.add("vistaview-ui--none"),(v=this.rootElm.querySelector(".vistaview-index-display"))==null||v.classList.add("vistaview-ui--none")),this.rootElm&&this.rootElm.classList.add("vistaview--initialized"),this.loadImages(),this.setCurrentDescription(),this.setIndexDisplay(),this.userInit(this),(p=(y=this.options).onOpen)==null||p.call(y,a),(b=(x=this.options).onImageView)==null||b.call(x,a)}async close(t=!0){var n,e,a;if(C.somethingOpened!==this)return;t&&((n=this.rootElm)==null||n.classList.add("vistaview--closing"),await new Promise(d=>{var l;let o;(l=this.rootElm)==null||l.addEventListener("transitionend",h=>{h.currentTarget===this.rootElm&&(o&&clearTimeout(o),o=setTimeout(()=>{d()},333))})}));const i={htmlElements:{from:this.currentItems,to:null},images:{from:this.currentImages,to:null},index:{from:this.currentIndex.value,to:null},container:this.imageContainerElm,elements:this.elements,via:{prev:!1,next:!1},isReducedMotion:this.isReducedMotion,navActive:this.navActive,isZoomed:this.isZoomed,options:this.options};this.userClose(this),(a=(e=this.options).onClose)==null||a.call(e,i),document.body.removeChild(this.rootElm),this.currentIndex._value=null,this.currentIndex._via={next:!1,prev:!1},this.rootElm=null,this.imageContainerElm=null,this.currentImages=null,this.currentItems=null,this.navActive=!0,this.onResizeHandler&&(window.removeEventListener("resize",this.onResizeHandler),this.onResizeHandler=null),this.onKeyDown&&(window.removeEventListener("keydown",this.onKeyDown),this.onKeyDown=null),(this.onZoomedPointerDown||this.onZoomedPointerMove||this.onZoomedPointerUp)&&(this.setZoomed(!1),this.onZoomedPointerDown=null,this.onZoomedPointerMove=null,this.onZoomedPointerUp=null),this.transitionAbortController&&(this.transitionAbortController.abort(),this.transitionAbortController=null),C.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){C.somethingOpened===this&&this.navActive&&(t<0&&(t=this.elements.length-1),t>=this.elements.length&&(t=0),this.currentIndex.via=i||{next:!1,prev:!1},this.currentIndex.value=t)}next(){C.somethingOpened===this&&this.view(this.currentIndex.value+1,{next:!0,prev:!1})}prev(){C.somethingOpened===this&&this.view(this.currentIndex.value-1,{next:!1,prev:!0})}getCurrentIndex(){return C.somethingOpened===this?this.currentIndex.value:-1}}function rt(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 at({elements:s,...t}){if(!s)throw new Error("No elements");let i=rt(s);if(typeof i=="string")return console.error(i),console.warn("VistaView: silently returning."),null;const n=new ot(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=z;exports.VistaViewTransitionAbortedError=D;exports.defaultClose=F;exports.defaultInit=Y;exports.defaultSetup=B;exports.defaultTransition=_;exports.removeTouchActions=R;exports.setTouchActions=X;exports.vistaView=at;exports.vistaViewDownload=V;
16
+ </div>`)}let A=null,M=null,$=null,Z=null;function X(s){T(s);const t=s.imageContainerElm,i=s.elements.length;if(!t)return;let n=0,e=0,r=0,d=0,o=null,a=0,h=!1;A=l=>{l.preventDefault(),l.stopPropagation(),s.isZoomed===!1&&(h=!0,n=l.pageX,e=l.pageY,r=l.pageX,d=l.pageY,a=Date.now(),o=null,t.setPointerCapture(l.pointerId))},M=l=>{if(l.preventDefault(),l.stopPropagation(),s.isZoomed!==!1||!h)return;const c=l.pageX-n,v=l.pageY-e;r=l.pageX,d=l.pageY,Math.abs(c)>=Math.abs(v)&&(o===null||o===!0)?(t.style.setProperty("--vistaview-pointer-diff-x",`${c}px`),o=!0):Math.abs(v)>Math.abs(c)&&(o===null||o===!1)&&(t.style.setProperty("--vistaview-pointer-diff-y",`${v}px`),o=!1)},Z=l=>{if(l.preventDefault(),l.stopPropagation(),t.releasePointerCapture(l.pointerId),s.isZoomed!==!1||!h)return;h=!1,o=null;const c=Array.from(t.querySelectorAll(".vistaview-item"));t.style.removeProperty("--vistaview-pointer-diff-x"),t.style.removeProperty("--vistaview-pointer-diff-y"),c.forEach(v=>{v.style.transition="",v.style.translate=""})},$=l=>{if(l.preventDefault(),l.stopPropagation(),t.releasePointerCapture(l.pointerId),s.isZoomed!==!1||!h)return;h=!1;const c=Array.from(t.querySelectorAll(".vistaview-item")),v=r-n,m=d-e,f=Date.now()-a,u=v/f,y=m/f,p=s.options.touchSpeedThreshold||.5,b=c.find(E=>E.dataset.vistaviewPos==="0"),x=Number(b.dataset.vistaviewIndex);function g(){c[0].removeEventListener("transitionend",g),t.style.removeProperty("--vistaview-pointer-diff-x"),t.style.removeProperty("--vistaview-pointer-diff-y"),c.forEach(E=>{E.style.transition="",E.style.translate=""})}function I(E="0%",L="0%"){c.forEach(S=>{S.style.transition=`translate ${s.options.animationDurationBase*.5}ms ease-out`,S.style.translate=`${E} ${L}`})}if(u<-p||u>p){let E=function(){c[0].removeEventListener("transitionend",E),setTimeout(()=>{const L=s.isReducedMotion;s.isReducedMotion=!0,g(),s.view(u<-p?(x+1)%i:(x-1+i)%i,{next:u<-p,prev:u>p}),s.isReducedMotion=L},100)};I(u<-p?"-100%":"100%"),c[0].addEventListener("transitionend",E)}else y<-p||y>p?(s.close(),I("0%","0%")):(c[0].addEventListener("transitionend",g),I("0%"),u===0&&y===0&&s.zoomIn())},t.addEventListener("pointermove",M),t.addEventListener("pointerup",$),t.addEventListener("pointerdown",A),t.addEventListener("pointercancel",Z)}function T(s){const t=s.imageContainerElm;t&&(M&&t.removeEventListener("pointermove",M),$&&t.removeEventListener("pointerup",$),A&&t.removeEventListener("pointerdown",A),Z&&t.removeEventListener("pointercancel",Z))}const Y=s=>{X(s)},_=({htmlElements:{to:s},index:{to:t},elements:i})=>{i instanceof NodeList&&t!==null&&(i.forEach(n=>n.style.opacity="1"),i[t].style.opacity="0"),s&&s.forEach(n=>{const e=Number(n.dataset.vistaviewPos);e!==0?(n.style.zIndex="1",n.style.left=100*e+"%"):n.style.zIndex="2"})},B=async({htmlElements:{from:s,to:t},images:{to:i},via:{next:n,prev:e},options:r,isReducedMotion:d},o)=>{if(!i)throw new Error("VistaView: images is null in defaultTransition()");if(d)return;const a=s.filter(h=>h.dataset.vistaviewPos==="0"||(n?h.dataset.vistaviewPos==="1":h.dataset.vistaviewPos==="-1"));await new Promise((h,l)=>{let c=0;if(o.aborted){l(new D("Transition aborted"));return}const v=m=>{if(o.aborted)return l(new D("Transition aborted"));if(m.currentTarget.removeEventListener("transitionend",v),c++,c<a.length)return;const f=t==null?void 0:t.find(g=>g.dataset.vistaviewPos==="0"),u=f?Number(f.dataset.vistaviewIndex):0,y=a.find(g=>Number(g.dataset.vistaviewIndex)===u),p=y==null?void 0:y.querySelector(".vistaview-image-highres");if(!p)return l(new Error("current image element not found"));if(!p.classList.contains("vistaview-image-loaded")||p.classList.contains("vistaview-image-settled"))return h(0);let b=0;const x=setInterval(()=>{if(o.aborted)return clearInterval(x),l(new D("Transition aborted"));if(b++,b>r.animationDurationBase/20*1.5)return clearInterval(x),h(0);if(p.classList.contains("vistaview-image-settled"))return f==null||f.classList.add("vistaview-image-settled"),clearInterval(x),h(0)},20)};a.forEach(m=>{m.style.transition=`translate ${r.animationDurationBase*.5}ms ease-out`,m.style.translate=n?"-100%":e?"100%":"0%",m.addEventListener("transitionend",v)})})},F=s=>{s.elements instanceof NodeList&&s.elements.forEach(t=>t.style.opacity="1"),T(s)};class D extends Error{constructor(t){super(t),this.name="VistaViewTransitionAbortedError"}}const z={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"]}},C={somethingOpened:null};class ot{constructor(t,i){w(this,"options");w(this,"elements");w(this,"isReducedMotion");w(this,"currentIndex",{_value:null,_vistaView:null,_via:{next:!1,prev:!1},set value(t){var n,e,r;const i=this._value;this._value=t;for(const d in(n=this._vistaView)==null?void 0:n.transitionAbortControllers)(e=this._vistaView)==null||e.transitionAbortControllers[d].abort();(r=this._vistaView)==null||r.swap(i,this._value)},get value(){return this._value},get via(){return this._via},set via(t){this._via=t}});w(this,"rootElm",null);w(this,"imageContainerElm",null);w(this,"customControls",{});w(this,"currentImages",null);w(this,"currentItems",null);w(this,"navActive",!0);w(this,"isZoomed",!1);w(this,"onClickElements",t=>{t.preventDefault();const i=t.currentTarget;i.dataset.vistaviewIndex&&this.open(parseInt(i.dataset.vistaviewIndex))});w(this,"defaultOnClickHandler",t=>t.preventDefault());w(this,"onResizeHandler",null);w(this,"onKeyDown",null);w(this,"userSetup",_);w(this,"userTransition",B);w(this,"userClose",F);w(this,"userInit",Y);w(this,"onZoomedPointerDown",null);w(this,"onZoomedPointerMove",null);w(this,"onZoomedPointerUp",null);w(this,"transitionAbortControllers",{});w(this,"loadImageTimeout",null);this.elements=t,this.currentIndex._vistaView=this,this.options={...z,...i||{},controls:{...z.controls,...(i==null?void 0:i.controls)||{}}},this.options.initFunction&&(this.userInit=this.options.initFunction),this.options.transitionFunction&&(this.userTransition=this.options.transitionFunction),this.options.closeFunction&&(this.userClose=this.options.closeFunction),this.options.initFunction&&(this.userInit=this.options.initFunction),this.isReducedMotion=window.matchMedia("(prefers-reduced-motion: reduce)").matches,this.elements instanceof NodeList&&this.elements.forEach((n,e)=>{n.dataset.vistaviewIndex=e.toString(),n.addEventListener("click",this.defaultOnClickHandler),n.addEventListener("pointerup",this.onClickElements)})}async swap(t,i){var l,c;if(!C.somethingOpened||t===i||t===null)return;if(!this.imageContainerElm)throw new Error("VistaView: imageContainerElm is null in swap()");this.setIndexDisplay(),this.clearZoom();const{images:n,positions:e}=this.getCurrentIndexes(i),r=this.getImages(n),d=r.map((v,m)=>W(v,e[m])),o={htmlElements:{from:this.currentItems,to:d},images:{from:this.currentImages,to:r},index:{from:t,to:i},via:this.currentIndex.via,container:this.imageContainerElm,elements:this.elements,isReducedMotion:this.isReducedMotion,navActive:this.navActive,isZoomed:this.isZoomed,options:this.options};this.userSetup(o);const a=Math.random().toString(36).substring(2,15)+Math.random().toString(36).substring(2,15);this.transitionAbortControllers[a]=new AbortController;try{await this.userTransition(o,this.transitionAbortControllers[a].signal)}catch(v){v instanceof D||console.warn(v)}delete this.transitionAbortControllers[a];const h=d.find(v=>v.dataset.vistaviewPos==="0");if(h){const v=h.dataset.vistaviewIndex,m=this.currentItems.find(u=>u.dataset.vistaviewIndex===v),f=m==null?void 0:m.querySelector(".vistaview-image-highres");if(f){const u=h.querySelector(".vistaview-image-highres");u.setAttribute("class",f.getAttribute("class")||""),u.setAttribute("style",f.getAttribute("style")||""),u.classList.remove("vistaview-image--zooming"),u.classList.remove("vistaview-image-settled")}}this.imageContainerElm.innerHTML="",d.forEach(v=>{this.imageContainerElm.appendChild(v)}),this.setInitialDimPos(),this.currentImages=r,this.currentItems=d,this.setCurrentDescription(),this.updateZoomButtonsVisibility(),(c=(l=this.options).onImageView)==null||c.call(l,o),this.loadImageTimeout&&clearTimeout(this.loadImageTimeout),this.loadImageTimeout=setTimeout(()=>{this.loadImages()},333)}setZoomed(t){var i,n,e,r,d,o;if(this.isZoomed!==t){if(this.isZoomed){let a=this.isZoomed;if(a.classList.remove("vistaview-image--zooming"),this.onZoomedPointerDown&&((i=a.parentElement)==null||i.removeEventListener("pointerdown",this.onZoomedPointerDown),this.onZoomedPointerDown=null),this.onZoomedPointerMove&&((n=a.parentElement)==null||n.removeEventListener("pointermove",this.onZoomedPointerMove),this.onZoomedPointerMove=null),this.onZoomedPointerUp&&((e=a.parentElement)==null||e.removeEventListener("pointerup",this.onZoomedPointerUp),this.onZoomedPointerUp=null),a==null||a.style.removeProperty("--pointer-diff-x"),a==null||a.style.removeProperty("--pointer-diff-y"),setTimeout(()=>{a==null||a.classList.remove("vistaview-image--zooming")},500),this.isZoomed=!1,!t)return}if(t){this.isZoomed=t,t.classList.add("vistaview-image--zooming"),t==null||t.style.setProperty("--pointer-diff-x","0px"),t==null||t.style.setProperty("--pointer-diff-y","0px");let a=!1,h=0,l=0,c=0,v=0,m=0,f=0;this.onZoomedPointerDown=u=>{u.preventDefault(),u.stopPropagation(),a=!0,h=u.pageX,l=u.pageY,t.setPointerCapture(u.pointerId)},this.onZoomedPointerMove=u=>{if(!a)return;u.preventDefault(),m=u.pageX-h,f=u.pageY-l;const y=parseInt((t==null?void 0:t.dataset.vistaviewCurrentWidth)||"0"),p=parseInt((t==null?void 0:t.dataset.vistaviewCurrentHeight)||"0"),{maxDiffX:b,minDiffY:x,maxDiffY:g,minDiffX:I}=k(y,p),E=Math.min(b,Math.max(I,c+m)),L=Math.min(g,Math.max(x,v+f));m=E-c,f=L-v,t==null||t.style.setProperty("--pointer-diff-x",`${E}px`),t==null||t.style.setProperty("--pointer-diff-y",`${L}px`)},this.onZoomedPointerUp=u=>{a=!1,t.releasePointerCapture(u.pointerId),c+=m,v+=f,m=0,f=0},(r=t==null?void 0:t.parentElement)==null||r.addEventListener("pointerdown",this.onZoomedPointerDown),(d=t==null?void 0:t.parentElement)==null||d.addEventListener("pointermove",this.onZoomedPointerMove),(o=t==null?void 0:t.parentElement)==null||o.addEventListener("pointerup",this.onZoomedPointerUp);return}}}zoomIn(){var r,d,o,a,h;const t=(r=this.rootElm)==null?void 0:r.querySelector('[data-vistaview-pos="0"] .vistaview-image-highres'),i=t.width,n=t.height;t.dataset.vistaviewInitialWidth||(t.dataset.vistaviewInitialWidth=i.toString()),t.dataset.vistaviewInitialHeight||(t.dataset.vistaviewInitialHeight=n.toString()),this.setZoomed(t);const e=(t.naturalWidth||0)*this.options.maxZoomLevel;if(i&&e&&i<e){const l=Math.min(i+this.options.zoomStep,e);t.style.width=`${l}px`;const c=l/i*n;t.style.height=`${c}px`,(o=(d=this.rootElm)==null?void 0:d.querySelector("button.vistaview-zoom-out-btn"))==null||o.removeAttribute("disabled"),t.dataset.vistaviewCurrentWidth=l.toString(),t.dataset.vistaviewCurrentHeight=c.toString(),l===e&&((h=(a=this.rootElm)==null?void 0:a.querySelector("button.vistaview-zoom-in-btn"))==null||h.setAttribute("disabled","true"))}}zoomOut(){var d,o,a,h,l;const t=(d=this.rootElm)==null?void 0:d.querySelector('[data-vistaview-pos="0"] .vistaview-image-highres'),i=t.width,n=t.height,e=t.dataset.vistaviewInitialWidth?parseInt(t.dataset.vistaviewInitialWidth):0,r=c=>{c.target===t&&(t.classList.remove("vistaview-image--zooming-out"),t.removeEventListener("transitionend",r))};if(t.addEventListener("transitionend",r),t.classList.add("vistaview-image--zooming-out"),i&&e&&i>e){const c=Math.max(i-this.options.zoomStep,e);t.style.width=`${c}px`;const v=c/i*n;t.style.height=`${v}px`,(a=(o=this.rootElm)==null?void 0:o.querySelector("button.vistaview-zoom-in-btn"))==null||a.removeAttribute("disabled"),t.dataset.vistaviewCurrentWidth=c.toString(),t.dataset.vistaviewCurrentHeight=v.toString();const{maxDiffX:m,minDiffY:f,maxDiffY:u,minDiffX:y}=k(c,v);let p=parseInt((t==null?void 0:t.style.getPropertyValue("--pointer-diff-x").replace("px",""))||"0"),b=parseInt((t==null?void 0:t.style.getPropertyValue("--pointer-diff-y").replace("px",""))||"0");p=Math.min(m,Math.max(y,p)),b=Math.min(u,Math.max(f,b)),t==null||t.style.setProperty("--pointer-diff-x",`${p}px`),t==null||t.style.setProperty("--pointer-diff-y",`${b}px`),c===e&&((l=(h=this.rootElm)==null?void 0:h.querySelector("button.vistaview-zoom-out-btn"))==null||l.setAttribute("disabled","true"),t.removeAttribute("data-vistaview-current-width"),t.removeAttribute("data-vistaview-current-height"),t.removeAttribute("data-vistaview-initial-width"),t.removeAttribute("data-vistaview-initial-height"),this.setZoomed(!1))}}clearZoom(){}getImages(t){return t.map((i,n)=>{const e=this.elements[i];if(e instanceof HTMLElement){const r=e.querySelector("img"),d=e.getAttribute("href")||"",o=e.getAttribute("src")||"",a=e.dataset.vistaviewSrc||d||o||(r==null?void 0:r.src)||"",h=e.dataset.vistaviewAlt||e.getAttribute("alt")||(r==null?void 0:r.alt)||"",l=e.dataset.vistaviewThumb||(r==null?void 0:r.src)||d||o||"";return{index:t[n],src:a,alt:h,thumb:l,imageElm:e instanceof HTMLImageElement?e:r,anchorElm:e instanceof HTMLAnchorElement?e:void 0}}else return{index:t[n],...e}})}setInitialDimPos(){var h,l;if(!this.rootElm)return;const t=(h=this.rootElm.querySelector('[data-vistaview-pos="0"]'))==null?void 0:h.dataset.vistaviewIndex,i=((l=this.currentImages)==null?void 0:l.find(c=>c.index===Number(t)))||null;if(!i)return;const n=i.imageElm?R(i.imageElm):void 0,e=i.anchorElm?R(i.anchorElm):void 0,r=(e==null?void 0:e.width)||(n==null?void 0:n.width)||0,d=(e==null?void 0:e.height)||(n==null?void 0:n.height)||0,o=((e==null?void 0:e.left)||(n==null?void 0:n.left)||0)+r/2,a=((e==null?void 0:e.top)||(n==null?void 0:n.top)||0)+d/2;this.rootElm.style.setProperty("--vistaview-container-initial-width",r+"px"),this.rootElm.style.setProperty("--vistaview-container-initial-height",d+"px"),this.rootElm.style.setProperty("--vistaview-container-initial-top",a+"px"),this.rootElm.style.setProperty("--vistaview-container-initial-left",o+"px"),this.rootElm.style.setProperty("--vistaview-image-border-radius",H(e==null?void 0:e.borderRadius)||H(n==null?void 0:n.borderRadius)||"0px")}updateZoomButtonsVisibility(){var e;const t=(e=this.rootElm)==null?void 0:e.querySelector('[data-vistaview-pos="0"] img.vistaview-image-highres');if(!t)return;const i=this;function n(){var l,c;const r=(l=i.rootElm)==null?void 0:l.querySelector("button.vistaview-zoom-in-btn"),d=(c=i.rootElm)==null?void 0:c.querySelector("button.vistaview-zoom-out-btn"),o=parseInt(t.style.width)||t.width,a=t.naturalWidth*i.options.maxZoomLevel,h=o<a&&a>0;r&&(r.style.display=h?"":"none"),d&&(d.style.display=h?"":"none")}t.complete&&t.naturalWidth>0?n():t.addEventListener("load",n)}loadImages(){if(!this.rootElm)return;this.rootElm.querySelectorAll(".vistaview-image-highres:not(.vistaview-image-loaded)").forEach((i,n)=>{const e=i,d=this.currentImages[n].imageElm,o={w:0,h:0};if(d){const{width:h,height:l}=j(d);o.w=Math.min(d.width,h),o.h=Math.min(d.height,l)}const a=()=>{var l;const h=()=>{var c;o.w&&o.h&&(e.style.width=`${o.w}px`,e.style.height=`${o.h}px`,e.style.setProperty("--vistaview-fitted-width",`${o.w}px`),e.style.setProperty("--vistaview-fitted-height",`${o.h}px`)),e.classList.add("vistaview-image-loaded"),e.width=e.naturalWidth,e.height=e.naturalHeight,setTimeout(()=>{var y,p;let v=0;const m=()=>{var b,x;v++,!(v<3)&&(e.removeEventListener("transitionend",m),(x=(b=e.parentElement)==null?void 0:b.querySelector(".vistaview-image-lowres"))==null||x.classList.add("vistaview-image--hidden"),e.classList.add("vistaview-image-settled"))};e.addEventListener("transitionend",m);const{width:f,height:u}=q(e);e.style.width=`${f}px`,e.style.height=`${u}px`,o.w&&o.h&&f===o.w&&u===o.h?((p=(y=e.parentElement)==null?void 0:y.querySelector(".vistaview-image-lowres"))==null||p.classList.add("vistaview-image--hidden"),e.classList.add("vistaview-image-settled")):(e.style.width=`${f}px`,e.style.height=`${u}px`)},100),(c=i.parentElement)!=null&&c.matches('[data-vistaview-pos="0"]')&&this.updateZoomButtonsVisibility()};if((l=this.rootElm)!=null&&l.classList.contains("vistaview--opened"))h();else{const c=setInterval(()=>{var v;(v=this.rootElm)!=null&&v.classList.contains("vistaview--opened")&&(clearInterval(c),h())},50)}};e.complete&&e.naturalWidth>0?a():e.onload=a})}setIndexDisplay(){this.elements.length!==1&&(this.rootElm.querySelector(".vistaview-index-display").textContent=`${this.currentIndex.value+1} / ${this.elements.length}`)}setCurrentDescription(){this.rootElm.querySelector(".vistaview-description").textContent=(this.currentImages[1]||this.currentImages[0]).alt||""}getCurrentIndexes(t){const i=this.options.preloads,n=this.elements.length,e=n<1||!i?[t]:[...new Set([...Array.from({length:i},(d,o)=>((t-i+o)%n+n)%n),t,...Array.from({length:i},(d,o)=>(t+1+o)%n)])],r=n<1||!i?[0]:e.map((d,o)=>o-Math.floor(e.length/2));return{images:e,positions:r}}setKeyboardListeners(){this.onKeyDown=t=>{switch(t.key){case"ArrowLeft":t.preventDefault(),this.prev();break;case"ArrowRight":t.preventDefault(),this.next();break;case"ArrowUp":t.preventDefault(),this.zoomIn();break;case"ArrowDown":t.preventDefault(),this.zoomOut();break;case"Escape":t.preventDefault(),this.close();break}},window.addEventListener("keydown",this.onKeyDown)}setResizeListeners(){this.onResizeHandler=()=>{var i;this.setInitialDimPos();const t=(i=this.rootElm)==null?void 0:i.querySelectorAll(".vistaview-image-highres.vistaview-image-loaded");t==null||t.forEach(n=>{const e=n,{width:r,height:d}=q(e);e.classList.contains("vistaview-image--zooming")?(e.dataset.vistaviewInitialWidth=r.toString(),e.dataset.vistaviewInitialHeight=d.toString()):(e.style.width=`${r}px`,e.style.height=`${d}px`)})},window.addEventListener("resize",this.onResizeHandler)}open(t=0){var o,a,h,l,c,v,m,f,u,y,p,b,x;if(C.somethingOpened){console.error("VistaView: another instance is already opened. Returning.");return}if(C.somethingOpened=this,this.currentIndex._value=t,document.body.prepend(st({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 C.somethingOpened=null,new Error("Failed to create VistaView element");this.options.arrowOnSmallScreens||this.rootElm.classList.add("vistaview-no-arrows-sm");const{images:i,positions:n}=this.getCurrentIndexes(t);this.currentImages=this.getImages(i);const e=this.currentImages.map((g,I)=>W(g,n[I]));this.currentItems=e;const r={htmlElements:{from:null,to:this.currentItems},images:{from:null,to:this.currentImages},index:{from:null,to:t},via:this.currentIndex.via,container:this.imageContainerElm,elements:this.elements,isReducedMotion:this.isReducedMotion,navActive:this.navActive,isZoomed:this.isZoomed,options:this.options};this.userSetup(r),this.imageContainerElm.innerHTML="",this.currentItems.forEach(g=>{this.imageContainerElm.appendChild(g)});let d=0;this.rootElm.addEventListener("animationend",g=>{var I;g.currentTarget===this.rootElm&&(d++,d>=2&&((I=this.rootElm)==null||I.classList.add("vistaview--opened")))}),(a=this.rootElm.querySelector(".vistaview-close-btn"))==null||a.addEventListener("click",()=>this.close()),(h=this.rootElm.querySelector(".vistaview-zoom-in-btn"))==null||h.addEventListener("click",()=>this.zoomIn()),(l=this.rootElm.querySelector(".vistaview-zoom-out-btn"))==null||l.addEventListener("click",()=>this.zoomOut()),(c=this.rootElm.querySelector(".vistaview-prev-btn>button"))==null||c.addEventListener("click",()=>this.prev()),(v=this.rootElm.querySelector(".vistaview-next-btn>button"))==null||v.addEventListener("click",()=>this.next()),[...this.options.controls.topLeft||[],...this.options.controls.topRight||[],...this.options.controls.topCenter||[],...this.options.controls.bottomCenter||[],...this.options.controls.bottomLeft||[],...this.options.controls.bottomRight||[]].forEach(g=>{typeof g!="string"&&(this.customControls[g.name]=g)}),this.rootElm.querySelectorAll("button[data-vistaview-custom-control]").forEach(g=>{g.addEventListener("click",I=>{const E=this.customControls[I.currentTarget.dataset.vistaviewCustomControl],L=this.currentImages.find(S=>S.index===this.currentIndex.value);E&&L&&(E.onClick.constructor.name==="AsyncFunction"?(g.classList.add("vistaview-button--loading"),E.onClick(L).finally(()=>{g.classList.remove("vistaview-button--loading")})):E.onClick(L))})}),this.options.animationDurationBase&&this.rootElm.style.setProperty("--vistaview-animation-duration",`${this.options.animationDurationBase}`),this.options.initialZIndex!==void 0&&this.rootElm.style.setProperty("--vistaview-initial-z-index",`${this.options.initialZIndex}`),this.setInitialDimPos(),this.setResizeListeners(),this.options.keyboardListeners&&this.setKeyboardListeners(),this.elements.length===1&&((m=this.rootElm.querySelector(".vistaview-prev-btn"))==null||m.classList.add("vistaview-ui--none"),(f=this.rootElm.querySelector(".vistaview-next-btn"))==null||f.classList.add("vistaview-ui--none"),(u=this.rootElm.querySelector(".vistaview-index-display"))==null||u.classList.add("vistaview-ui--none")),this.rootElm&&this.rootElm.classList.add("vistaview--initialized"),this.loadImages(),this.setCurrentDescription(),this.setIndexDisplay(),this.userInit(this),(p=(y=this.options).onOpen)==null||p.call(y,r),(x=(b=this.options).onImageView)==null||x.call(b,r)}async close(t=!0){var n,e,r;if(C.somethingOpened!==this)return;t&&((n=this.rootElm)==null||n.classList.add("vistaview--closing"),await new Promise(d=>{var a;let o;(a=this.rootElm)==null||a.addEventListener("transitionend",h=>{h.currentTarget===this.rootElm&&(o&&clearTimeout(o),o=setTimeout(()=>{d()},333))})}));const i={htmlElements:{from:this.currentItems,to:null},images:{from:this.currentImages,to:null},index:{from:this.currentIndex.value,to:null},container:this.imageContainerElm,elements:this.elements,via:{prev:!1,next:!1},isReducedMotion:this.isReducedMotion,navActive:this.navActive,isZoomed:this.isZoomed,options:this.options};this.userClose(this),(r=(e=this.options).onClose)==null||r.call(e,i),document.body.removeChild(this.rootElm),this.currentIndex._value=null,this.currentIndex._via={next:!1,prev:!1},this.rootElm=null,this.imageContainerElm=null,this.currentImages=null,this.currentItems=null,this.navActive=!0,this.onResizeHandler&&(window.removeEventListener("resize",this.onResizeHandler),this.onResizeHandler=null),this.onKeyDown&&(window.removeEventListener("keydown",this.onKeyDown),this.onKeyDown=null),(this.onZoomedPointerDown||this.onZoomedPointerMove||this.onZoomedPointerUp)&&(this.setZoomed(!1),this.onZoomedPointerDown=null,this.onZoomedPointerMove=null,this.onZoomedPointerUp=null);for(const d in this.transitionAbortControllers)this.transitionAbortControllers[d].abort();this.transitionAbortControllers={},C.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){C.somethingOpened===this&&this.navActive&&(t<0&&(t=this.elements.length-1),t>=this.elements.length&&(t=0),this.currentIndex.via=i||{next:!1,prev:!1},this.currentIndex.value=t)}next(){C.somethingOpened===this&&this.view(this.currentIndex.value+1,{next:!0,prev:!1})}prev(){C.somethingOpened===this&&this.view(this.currentIndex.value-1,{next:!1,prev:!0})}getCurrentIndex(){return C.somethingOpened===this?this.currentIndex.value:-1}}function rt(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 at({elements:s,...t}){if(!s)throw new Error("No elements");let i=rt(s);if(typeof i=="string")return console.error(i),console.warn("VistaView: silently returning."),null;const n=new ot(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=z;exports.VistaViewTransitionAbortedError=D;exports.defaultClose=F;exports.defaultInit=Y;exports.defaultSetup=_;exports.defaultTransition=B;exports.removeTouchActions=T;exports.setTouchActions=X;exports.vistaView=at;exports.vistaViewDownload=V;
package/dist/vistaview.css CHANGED
@@ -1 +1 @@
1
- :root{--vistaview-bg-color: #000000;--vistaview-text-color: #ffffff;--vistaview-background-blur: 10px;--vistaview-background-opacity: .8;--vistaview-initial-z-index: 1;--vistaview-destination-z-index: 2147483647;--vistaview-animation-duration: 333;--vistaview-center-x: 50%;--vistaview-center-y: 50%;--vistaview-container-initial-width: 0;--vistaview-container-initial-height: 0;--vistaview-container-initial-top: 0;--vistaview-container-initial-left: 0;--vistaview-image-border-radius: 0px;--vistaview-current-index: 0;--vistaview-number-elements: 0}@keyframes vistaview-pos-in{0%{top:var(--vistaview-container-initial-top);left:var(--vistaview-container-initial-left)}to{top:var(--vistaview-center-y);left:var(--vistaview-center-x)}}@keyframes vistaview-pos-out{0%{top:var(--vistaview-center-y);left:var(--vistaview-center-x)}to{top:var(--vistaview-container-initial-top);left:var(--vistaview-container-initial-left)}}@keyframes vistaview-anim-in{0%{width:var(--vistaview-container-initial-width);height:var(--vistaview-container-initial-height);background:rgb(from var(--vistaview-bg-color) r g b / 0);-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);border-radius:var(--vistaview-image-border-radius);z-index:var(--vistaview-initial-z-index)}50%{width:var(--vistaview-container-initial-width);height:var(--vistaview-container-initial-height);background:rgb(from var(--vistaview-bg-color) r g b / 0);-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);border-radius:0;z-index:var(--vistaview-initial-z-index)}to{z-index:var(--vistaview-destination-z-index);width:100%;height:100%;background:rgb(from var(--vistaview-bg-color) r g b / var(--vistaview-background-opacity));-webkit-backdrop-filter:blur(var(--vistaview-background-blur));backdrop-filter:blur(var(--vistaview-background-blur));border-radius:0}}@keyframes vistaview-anim-out{0%{z-index:var(--vistaview-destination-z-index);width:100%;height:100%;background:rgb(from var(--vistaview-bg-color) r g b / var(--vistaview-background-opacity));-webkit-backdrop-filter:blur(var(--vistaview-background-blur));backdrop-filter:blur(var(--vistaview-background-blur));border-radius:0}50%{width:var(--vistaview-container-initial-width);height:var(--vistaview-container-initial-height);background:rgb(from var(--vistaview-bg-color) r g b / 0);-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);border-radius:var(--vistaview-image-border-radius);z-index:var(--vistaview-initial-z-index)}to{width:var(--vistaview-container-initial-width);height:var(--vistaview-container-initial-height);background:rgb(from var(--vistaview-bg-color) r g b / 0);-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);border-radius:var(--vistaview-image-border-radius);z-index:var(--vistaview-initial-z-index)}}@keyframes vistaview-ui-anim-in{0%{opacity:0}50%{opacity:0}to{opacity:1}}@keyframes vistaview-ui-anim-out{0%{opacity:1}50%{opacity:1}to{opacity:0}}@keyframes vistaview-pulse{0%{opacity:1;border-radius:3px;scale:1}50%{opacity:.7;border-radius:7px;scale:.99}to{opacity:1;border-radius:3px;scale:1}}@keyframes vistaview-simple-pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.vistaview-root{position:fixed;display:none;isolation:isolate;overflow:hidden;translate:-50% -50%;width:var(--vistaview-container-initial-width);height:var(--vistaview-container-initial-height);top:var(--vistaview-container-initial-top);left:var(--vistaview-container-initial-left);border-radius:var(--vistaview-image-border-radius)}.vistaview-container{position:relative;width:100%;height:100%;overflow:hidden;box-sizing:border-box;margin:0;padding:0}.vistaview-image-container{--vistaview-pointer-diff-x: 0px;--vistaview-pointer-diff-y: 0px;position:relative;top:0;left:0;margin:0;padding:0;width:100%;height:100%;overflow:hidden;touch-action:none}.vistaview-item{position:absolute;width:100%;height:100%;top:0;left:0;margin:0;padding:0;translate:var(--vistaview-pointer-diff-x) var(--vistaview-pointer-diff-y)}.vistaview-item img.vistaview-image-lowres{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.vistaview-item img.vistaview-image-lowres:has(+img.vistaview-image-loaded){animation:none}.vistaview-item img.vistaview-image-lowres.vistaview-image--hidden{opacity:0}.vistaview-item img.vistaview-image-highres{--pointer-diff-x: 0px;--pointer-diff-y: 0px;cursor:zoom-in;display:block;position:absolute;top:calc(50% + var(--pointer-diff-y));left:calc(50% + var(--pointer-diff-x));translate:-50% -50%;object-fit:cover;opacity:0;transition:width calc(var(--vistaview-animation-duration) * 1ms) ease calc(var(--vistaview-animation-duration) * .3ms),height calc(var(--vistaview-animation-duration) * 1ms) ease calc(var(--vistaview-animation-duration) * .3ms),opacity calc(var(--vistaview-animation-duration) * 1ms) ease 0ms;max-width:100%;max-height:100%}.vistaview-item img.vistaview-image-highres.vistaview-image--zooming{transition:width calc(var(--vistaview-animation-duration) * 1ms) ease 0s,height calc(var(--vistaview-animation-duration) * 1ms) ease 0s,opacity calc(var(--vistaview-animation-duration) * 1ms) ease 0s;max-width:unset;max-height:unset;cursor:grab}.vistaview-item img.vistaview-image-highres.vistaview-image--zooming:active{cursor:grabbing}.vistaview-item img.vistaview-image-highres.vistaview-image--zooming-out{transition:width calc(var(--vistaview-animation-duration) * 1ms) ease 0s,height calc(var(--vistaview-animation-duration) * 1ms) ease 0s,opacity calc(var(--vistaview-animation-duration) * 1ms) ease 0s,top .3s ease 0s,left .3s ease 0s}.vistaview-item img.vistaview-image-highres.vistaview-image-loaded{opacity:1}.vistaview-ui{opacity:0}.vistaview-ui button{background:none;color:inherit;border:none;font:inherit;cursor:pointer;outline:inherit;box-sizing:border-box;margin:0;padding:8px;border-radius:0;display:flex;align-items:center;justify-content:center;background-color:var(--vistaview-bg-color);color:var(--vistaview-text-color)}.vistaview-ui button:disabled{color:rgb(from var(--vistaview-text-color) r g b / .5);cursor:not-allowed}.vistaview-ui button:hover{background-color:hsl(from var(--vistaview-bg-color) h s calc(l + 20))}.vistaview-ui button:active{background-color:hsl(from var(--vistaview-bg-color) h s calc(l + 40))}.vistaview-ui button.vistaview-button--loading{animation:vistaview-simple-pulse .5s ease-in-out infinite}.vistaview-ui button svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.vistaview-ui.vistaview-prev-btn{position:absolute;top:50%;left:0;translate:0 -50%;display:flex;align-items:center;justify-content:center;z-index:2}.vistaview-ui.vistaview-next-btn{position:absolute;top:50%;right:0;translate:0 -50%;display:flex;align-items:center;justify-content:center;z-index:2}.vistaview-ui.vistaview-top-bar,.vistaview-ui.vistaview-bottom-bar{position:absolute;top:0;right:0;width:100%;z-index:2;display:flex;align-items:center;justify-content:space-between}.vistaview-ui.vistaview-top-bar>div,.vistaview-ui.vistaview-bottom-bar>div{display:flex}.vistaview-ui.vistaview-top-bar .vistaview-index-display,.vistaview-ui.vistaview-bottom-bar .vistaview-index-display{font-size:16px;padding:8px;background-color:var(--vistaview-bg-color);color:var(--vistaview-text-color)}.vistaview-ui.vistaview-top-bar .vistaview-description,.vistaview-ui.vistaview-bottom-bar .vistaview-description{font-size:14px;padding:8px 15px;background-color:var(--vistaview-bg-color);color:var(--vistaview-text-color);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vistaview-ui.vistaview-bottom-bar{bottom:0;top:unset}.vistaview-root.vistaview-no-arrows-sm .vistaview-ui.vistaview-prev-btn,.vistaview-root.vistaview-no-arrows-sm .vistaview-ui.vistaview-next-btn{display:none}@media screen and (min-width:768px){.vistaview-root.vistaview-no-arrows-sm .vistaview-ui.vistaview-prev-btn,.vistaview-root.vistaview-no-arrows-sm .vistaview-ui.vistaview-next-btn{display:flex}}.vistaview-root.vistaview--initialized{display:block;animation:vistaview-anim-in calc(var(--vistaview-animation-duration) * 1ms) ease-in forwards,vistaview-pos-in calc(var(--vistaview-animation-duration) * .6ms) ease-out forwards}.vistaview-root.vistaview--initialized .vistaview-ui{animation:vistaview-ui-anim-in calc(var(--vistaview-animation-duration) * 1ms) ease-out calc(var(--vistaview-animation-duration) * 1ms) forwards}.vistaview-root.vistaview--closing{animation:vistaview-pos-out calc(var(--vistaview-animation-duration) * .8ms) cubic-bezier(.7,-.4,.8,.6) forwards,vistaview-anim-out calc(var(--vistaview-animation-duration) * 1ms) ease-out forwards}.vistaview-root.vistaview--closing .vistaview-ui,.vistaview-root.vistaview--closing .vistaview-ui.vistaview-prev-btn,.vistaview-root.vistaview--closing .vistaview-ui.vistaview-next-btn{display:none}.vistaview-root.vistaview--closing img.vistaview-image-lowres{border-radius:var(--vistaview-image-border-radius)}.vistaview-root.vistaview--closing img.vistaview-image-lowres.vistaview-image--hidden{opacity:1}.vistaview-root.vistaview--closing img.vistaview-image-highres{width:var(--vistaview-fitted-width)!important;height:var(--vistaview-fitted-height)!important;transition:width calc(var(--vistaview-animation-duration) * .5ms) ease 0ms,height calc(var(--vistaview-animation-duration) * .5ms) ease 0ms,opacity calc(var(--vistaview-animation-duration) * .5ms) ease calc(var(--vistaview-animation-duration) * .5ms)}.vistaview-root.vistaview--closing img.vistaview-image-highres.vistaview-image-loaded{opacity:0}.vistaview--none{display:none!important}.vistaview--reduced-motion,.vistaview--reduced-motion *{--vistaview-animation-duration: 0;animation-name:none!important;animation-duration:0ms!important;transition-duration:0ms!important}
1
+ :root{--vistaview-bg-color: #000000;--vistaview-text-color: #ffffff;--vistaview-background-blur: 10px;--vistaview-background-opacity: .8;--vistaview-initial-z-index: 1;--vistaview-destination-z-index: 2147483647;--vistaview-animation-duration: 333;--vistaview-center-x: 50%;--vistaview-center-y: 50%;--vistaview-container-initial-width: 0;--vistaview-container-initial-height: 0;--vistaview-container-initial-top: 0;--vistaview-container-initial-left: 0;--vistaview-image-border-radius: 0px;--vistaview-current-index: 0;--vistaview-number-elements: 0}@keyframes vistaview-pos-in{0%{top:var(--vistaview-container-initial-top);left:var(--vistaview-container-initial-left)}to{top:var(--vistaview-center-y);left:var(--vistaview-center-x)}}@keyframes vistaview-pos-out{0%{top:var(--vistaview-center-y);left:var(--vistaview-center-x)}to{top:var(--vistaview-container-initial-top);left:var(--vistaview-container-initial-left)}}@keyframes vistaview-anim-in{0%{width:var(--vistaview-container-initial-width);height:var(--vistaview-container-initial-height);background:rgb(from var(--vistaview-bg-color) r g b / 0);-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);border-radius:var(--vistaview-image-border-radius);z-index:var(--vistaview-initial-z-index)}50%{width:var(--vistaview-container-initial-width);height:var(--vistaview-container-initial-height);background:rgb(from var(--vistaview-bg-color) r g b / 0);-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);border-radius:0;z-index:var(--vistaview-initial-z-index)}to{z-index:var(--vistaview-destination-z-index);width:100%;height:100%;background:rgb(from var(--vistaview-bg-color) r g b / var(--vistaview-background-opacity));-webkit-backdrop-filter:blur(var(--vistaview-background-blur));backdrop-filter:blur(var(--vistaview-background-blur));border-radius:0}}@keyframes vistaview-anim-out{0%{z-index:var(--vistaview-destination-z-index);width:100%;height:100%;background:rgb(from var(--vistaview-bg-color) r g b / var(--vistaview-background-opacity));-webkit-backdrop-filter:blur(var(--vistaview-background-blur));backdrop-filter:blur(var(--vistaview-background-blur));border-radius:0}50%{width:var(--vistaview-container-initial-width);height:var(--vistaview-container-initial-height);background:rgb(from var(--vistaview-bg-color) r g b / 0);-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);border-radius:var(--vistaview-image-border-radius);z-index:var(--vistaview-initial-z-index)}to{width:var(--vistaview-container-initial-width);height:var(--vistaview-container-initial-height);background:rgb(from var(--vistaview-bg-color) r g b / 0);-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);border-radius:var(--vistaview-image-border-radius);z-index:var(--vistaview-initial-z-index)}}@keyframes vistaview-ui-anim-in{0%{opacity:0}50%{opacity:0}to{opacity:1}}@keyframes vistaview-ui-anim-out{0%{opacity:1}50%{opacity:1}to{opacity:0}}@keyframes vistaview-pulse{0%{opacity:1;border-radius:3px;scale:1}50%{opacity:.7;border-radius:7px;scale:.99}to{opacity:1;border-radius:3px;scale:1}}@keyframes vistaview-simple-pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.vistaview-root{position:fixed;display:none;isolation:isolate;overflow:hidden;translate:-50% -50%;width:var(--vistaview-container-initial-width);height:var(--vistaview-container-initial-height);top:var(--vistaview-container-initial-top);left:var(--vistaview-container-initial-left);border-radius:var(--vistaview-image-border-radius)}.vistaview-container{position:relative;width:100%;height:100%;overflow:hidden;box-sizing:border-box;margin:0;padding:0}.vistaview-image-container{--vistaview-pointer-diff-x: 0px;--vistaview-pointer-diff-y: 0px;position:relative;top:0;left:0;margin:0;padding:0;width:100%;height:100%;overflow:hidden;touch-action:none}.vistaview-item{position:absolute;width:100%;height:100%;top:0;left:0;margin:0;padding:0;translate:var(--vistaview-pointer-diff-x) var(--vistaview-pointer-diff-y)}.vistaview-item img.vistaview-image-lowres{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);animation:vistaview-pulse 1s ease-in-out infinite}.vistaview-item img.vistaview-image-lowres:has(+img.vistaview-image-loaded){animation:none}.vistaview-item img.vistaview-image-lowres.vistaview-image--hidden{opacity:0}.vistaview-item img.vistaview-image-highres{--pointer-diff-x: 0px;--pointer-diff-y: 0px;cursor:zoom-in;display:block;position:absolute;top:calc(50% + var(--pointer-diff-y));left:calc(50% + var(--pointer-diff-x));translate:-50% -50%;object-fit:cover;opacity:0;transition:width calc(var(--vistaview-animation-duration) * 1ms) ease calc(var(--vistaview-animation-duration) * .3ms),height calc(var(--vistaview-animation-duration) * 1ms) ease calc(var(--vistaview-animation-duration) * .3ms),opacity calc(var(--vistaview-animation-duration) * 1ms) ease 0ms;max-width:100%;max-height:100%}.vistaview-item img.vistaview-image-highres.vistaview-image--zooming{transition:width calc(var(--vistaview-animation-duration) * 1ms) ease 0s,height calc(var(--vistaview-animation-duration) * 1ms) ease 0s,opacity calc(var(--vistaview-animation-duration) * 1ms) ease 0s;max-width:unset;max-height:unset;cursor:grab}.vistaview-item img.vistaview-image-highres.vistaview-image--zooming:active{cursor:grabbing}.vistaview-item img.vistaview-image-highres.vistaview-image--zooming-out{transition:width calc(var(--vistaview-animation-duration) * 1ms) ease 0s,height calc(var(--vistaview-animation-duration) * 1ms) ease 0s,opacity calc(var(--vistaview-animation-duration) * 1ms) ease 0s,top .3s ease 0s,left .3s ease 0s}.vistaview-item img.vistaview-image-highres.vistaview-image-loaded{opacity:1}.vistaview-ui{opacity:0}.vistaview-ui button{background:none;color:inherit;border:none;font:inherit;cursor:pointer;outline:inherit;box-sizing:border-box;margin:0;padding:8px;border-radius:0;display:flex;align-items:center;justify-content:center;background-color:var(--vistaview-bg-color);color:var(--vistaview-text-color)}.vistaview-ui button:disabled{color:rgb(from var(--vistaview-text-color) r g b / .5);cursor:not-allowed}.vistaview-ui button:hover{background-color:hsl(from var(--vistaview-bg-color) h s calc(l + 20))}.vistaview-ui button:active{background-color:hsl(from var(--vistaview-bg-color) h s calc(l + 40))}.vistaview-ui button.vistaview-button--loading{animation:vistaview-simple-pulse .5s ease-in-out infinite}.vistaview-ui button svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.vistaview-ui.vistaview-prev-btn{position:absolute;top:50%;left:0;translate:0 -50%;display:flex;align-items:center;justify-content:center;z-index:2}.vistaview-ui.vistaview-next-btn{position:absolute;top:50%;right:0;translate:0 -50%;display:flex;align-items:center;justify-content:center;z-index:2}.vistaview-ui.vistaview-top-bar,.vistaview-ui.vistaview-bottom-bar{position:absolute;top:0;right:0;width:100%;z-index:2;display:flex;align-items:center;justify-content:space-between}.vistaview-ui.vistaview-top-bar>div,.vistaview-ui.vistaview-bottom-bar>div{display:flex}.vistaview-ui.vistaview-top-bar .vistaview-index-display,.vistaview-ui.vistaview-bottom-bar .vistaview-index-display{font-size:16px;padding:8px;background-color:var(--vistaview-bg-color);color:var(--vistaview-text-color)}.vistaview-ui.vistaview-top-bar .vistaview-description,.vistaview-ui.vistaview-bottom-bar .vistaview-description{font-size:14px;padding:8px 15px;background-color:var(--vistaview-bg-color);color:var(--vistaview-text-color);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vistaview-ui.vistaview-bottom-bar{bottom:0;top:unset}.vistaview-root.vistaview-no-arrows-sm .vistaview-ui.vistaview-prev-btn,.vistaview-root.vistaview-no-arrows-sm .vistaview-ui.vistaview-next-btn{display:none}@media screen and (min-width:768px){.vistaview-root.vistaview-no-arrows-sm .vistaview-ui.vistaview-prev-btn,.vistaview-root.vistaview-no-arrows-sm .vistaview-ui.vistaview-next-btn{display:flex}}.vistaview-root.vistaview--initialized{display:block;animation:vistaview-anim-in calc(var(--vistaview-animation-duration) * 1ms) ease-in forwards,vistaview-pos-in calc(var(--vistaview-animation-duration) * .6ms) ease-out forwards}.vistaview-root.vistaview--initialized .vistaview-ui{animation:vistaview-ui-anim-in calc(var(--vistaview-animation-duration) * 1ms) ease-out calc(var(--vistaview-animation-duration) * 1ms) forwards}.vistaview-root.vistaview--closing{animation:vistaview-pos-out calc(var(--vistaview-animation-duration) * .8ms) cubic-bezier(.7,-.4,.8,.6) forwards,vistaview-anim-out calc(var(--vistaview-animation-duration) * 1ms) ease-out forwards}.vistaview-root.vistaview--closing .vistaview-ui,.vistaview-root.vistaview--closing .vistaview-ui.vistaview-prev-btn,.vistaview-root.vistaview--closing .vistaview-ui.vistaview-next-btn{display:none}.vistaview-root.vistaview--closing img.vistaview-image-lowres{border-radius:var(--vistaview-image-border-radius)}.vistaview-root.vistaview--closing img.vistaview-image-lowres.vistaview-image--hidden{opacity:1}.vistaview-root.vistaview--closing img.vistaview-image-highres{width:var(--vistaview-fitted-width)!important;height:var(--vistaview-fitted-height)!important;transition:width calc(var(--vistaview-animation-duration) * .5ms) ease 0ms,height calc(var(--vistaview-animation-duration) * .5ms) ease 0ms,opacity calc(var(--vistaview-animation-duration) * .5ms) ease calc(var(--vistaview-animation-duration) * .5ms)}.vistaview-root.vistaview--closing img.vistaview-image-highres.vistaview-image-loaded{opacity:0}.vistaview--none{display:none!important}.vistaview--reduced-motion,.vistaview--reduced-motion *{--vistaview-animation-duration: 0;animation-name:none!important;animation-duration:0ms!important;transition-duration:0ms!important}
package/dist/vistaview.js CHANGED
@@ -16,11 +16,11 @@ function z(s) {
16
16
  naturalHeight: s.naturalHeight
17
17
  };
18
18
  }
19
- let S = null;
19
+ let P = null;
20
20
  function V() {
21
- return S || (window.trustedTypes || (window.trustedTypes = {
21
+ return P || (window.trustedTypes || (window.trustedTypes = {
22
22
  createPolicy: (s, t) => t
23
- }), S = window.trustedTypes.createPolicy("vistaView-policy", {
23
+ }), P = window.trustedTypes.createPolicy("vistaView-policy", {
24
24
  createHTML: (s) => s,
25
25
  // HTML is generated by us, not user input
26
26
  createScript: () => {
@@ -29,7 +29,7 @@ function V() {
29
29
  createScriptURL: () => {
30
30
  throw new Error("Not implemented");
31
31
  }
32
- }), S);
32
+ }), P);
33
33
  }
34
34
  function W(s) {
35
35
  const i = V().createHTML(s), n = document.createElement("template");
@@ -40,30 +40,30 @@ function W(s) {
40
40
  function R(s) {
41
41
  return s && !/^0(px|%|r?em|vw|vh|vmin|vmax|cm|mm|in|pt|pc|ex|ch)?$/i.test(s.trim()) && s;
42
42
  }
43
- function B(s) {
44
- const i = window.getComputedStyle(s).objectFit || "", { width: n, height: e } = s.getBoundingClientRect(), a = s.naturalWidth, d = s.naturalHeight;
43
+ function _(s) {
44
+ const i = window.getComputedStyle(s).objectFit || "", { width: n, height: e } = s.getBoundingClientRect(), r = s.naturalWidth, d = s.naturalHeight;
45
45
  if (!i)
46
46
  return { width: n, height: e };
47
- if (!a || !d)
47
+ if (!r || !d)
48
48
  return { width: n, height: e };
49
- const o = a / d, l = n / e;
49
+ const o = r / d, a = n / e;
50
50
  switch (i) {
51
51
  case "fill":
52
52
  return { width: n, height: e };
53
53
  case "none":
54
- return { width: a, height: d };
54
+ return { width: r, height: d };
55
55
  case "contain":
56
- return o > l ? { width: n, height: n / o } : { width: e * o, height: e };
56
+ return o > a ? { width: n, height: n / o } : { width: e * o, height: e };
57
57
  case "cover":
58
- return o < l ? { width: n, height: n / o } : { width: e * o, height: e };
58
+ return o < a ? { width: n, height: n / o } : { width: e * o, height: e };
59
59
  case "scale-down": {
60
- const h = { width: a, height: d }, r = o > l ? { width: n, height: n / o } : { width: e * o, height: e };
61
- return r.width <= h.width && r.height <= h.height ? r : h;
60
+ const h = { width: r, height: d }, l = o > a ? { width: n, height: n / o } : { width: e * o, height: e };
61
+ return l.width <= h.width && l.height <= h.height ? l : h;
62
62
  }
63
63
  }
64
64
  return { width: n, height: e };
65
65
  }
66
- function H(s) {
66
+ function T(s) {
67
67
  const t = window.innerWidth, i = window.innerHeight, n = s.naturalWidth, e = s.naturalHeight;
68
68
  if (!n || !e)
69
69
  throw console.error("Error", s), new Error("Image natural dimensions are zero");
@@ -72,31 +72,31 @@ function H(s) {
72
72
  width: n,
73
73
  height: e
74
74
  };
75
- const a = n / e, d = t / i;
76
- let o, l;
77
- return a > d ? (o = t, l = t / a) : (l = i, o = i * a), {
75
+ const r = n / e, d = t / i;
76
+ let o, a;
77
+ return r > d ? (o = t, a = t / r) : (a = i, o = i * r), {
78
78
  width: o,
79
- height: l
79
+ height: a
80
80
  };
81
81
  }
82
- function T(s, t) {
83
- const i = window.innerHeight, n = window.innerWidth, e = s, a = t, d = Math.max(0, (e - n) / 2) + n / 2, o = Math.max(0, (a - i) / 2) + i / 2, l = -d, h = -o;
82
+ function H(s, t) {
83
+ const i = window.innerHeight, n = window.innerWidth, e = s, r = t, d = Math.max(0, (e - n) / 2) + n / 2, o = Math.max(0, (r - i) / 2) + i / 2, a = -d, h = -o;
84
84
  return {
85
85
  maxDiffX: d,
86
86
  minDiffY: h,
87
87
  maxDiffY: o,
88
- minDiffX: l
88
+ minDiffX: a
89
89
  };
90
90
  }
91
- const _ = '<svg viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>', F = '<svg viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>', N = '<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="11" x2="11" y1="8" y2="14"/><line x1="8" x2="14" y1="11" y2="11"/></svg>', U = '<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>', K = '<svg viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>', j = '<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>';
91
+ const B = '<svg viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>', F = '<svg viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>', N = '<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="11" x2="11" y1="8" y2="14"/><line x1="8" x2="14" y1="11" y2="11"/></svg>', U = '<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>', K = '<svg viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>', j = '<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>';
92
92
  function G() {
93
93
  return {
94
94
  name: "download",
95
95
  icon: j,
96
96
  onClick: async (s) => {
97
- var a;
97
+ var r;
98
98
  const t = await fetch(s.src), i = await t.blob(), n = t.url, e = document.createElement("a");
99
- e.href = URL.createObjectURL(i), e.download = ((a = n.split("/").pop()) == null ? void 0 : a.split("?")[0].split("#")[0]) || "download", document.body.appendChild(e), e.click(), document.body.removeChild(e);
99
+ 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);
100
100
  }
101
101
  };
102
102
  }
@@ -119,18 +119,18 @@ function J(s) {
119
119
  return `<button data-vistaview-custom-control="${s.name}">${s.icon}</button>`;
120
120
  }
121
121
  function q(s, t) {
122
- var r, c;
123
- const i = s.imageElm ? getComputedStyle(s.imageElm) : null, n = (i == null ? void 0 : i.objectFit) || "", e = ((r = s.imageElm) == null ? void 0 : r.naturalWidth) || "", a = ((c = s.imageElm) == null ? void 0 : c.naturalHeight) || "", d = (i == null ? void 0 : i.width) || "", o = (i == null ? void 0 : i.height) || "", l = document.createElement("div");
124
- l.className = "vistaview-item", l.dataset.vistaviewPos = `${t !== void 0 ? t : ""}`, l.dataset.vistaviewIndex = s.index.toString();
122
+ var l, c;
123
+ const i = s.imageElm ? getComputedStyle(s.imageElm) : null, n = (i == null ? void 0 : i.objectFit) || "", e = ((l = s.imageElm) == null ? void 0 : l.naturalWidth) || "", r = ((c = s.imageElm) == null ? void 0 : c.naturalHeight) || "", d = (i == null ? void 0 : i.width) || "", o = (i == null ? void 0 : i.height) || "", a = document.createElement("div");
124
+ a.className = "vistaview-item", a.dataset.vistaviewPos = `${t !== void 0 ? t : ""}`, a.dataset.vistaviewIndex = s.index.toString();
125
125
  const h = W(`<img class="vistaview-image-lowres"
126
126
  style="${n ? `object-fit:${n};` : ""}${d ? `width:${d};` : ""}${o ? `height:${o};` : ""}"
127
127
  src="${s.thumb || s.src}"
128
128
  alt="${s.alt || ""}"
129
129
  ${e ? `width="${e}"` : ""}
130
- ${a ? `height="${a}"` : ""}
130
+ ${r ? `height="${r}"` : ""}
131
131
  />
132
132
  <img class="vistaview-image-highres" src="${s.src}" alt="${s.alt || ""}" />`);
133
- return l.appendChild(h), l;
133
+ return a.appendChild(h), a;
134
134
  }
135
135
  function Q({
136
136
  controls: s,
@@ -143,35 +143,35 @@ function Q({
143
143
  <div class="vistaview-image-container"></div>
144
144
  <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>
145
145
  <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>
146
- <div class="vistaview-prev-btn vistaview-ui"><button>${_}</button></div>
146
+ <div class="vistaview-prev-btn vistaview-ui"><button>${B}</button></div>
147
147
  <div class="vistaview-next-btn vistaview-ui"><button>${F}</button></div>
148
148
  </div>
149
149
  </div>`
150
150
  );
151
151
  }
152
- let A = null, $ = null, Z = null, M = null;
152
+ let A = null, $ = null, M = null, Z = null;
153
153
  function tt(s) {
154
154
  O(s);
155
155
  const t = s.imageContainerElm, i = s.elements.length;
156
156
  if (!t) return;
157
- let n = 0, e = 0, a = 0, d = 0, o = null, l = 0, h = !1;
158
- A = (r) => {
159
- r.preventDefault(), r.stopPropagation(), s.isZoomed === !1 && (h = !0, n = r.pageX, e = r.pageY, a = r.pageX, d = r.pageY, l = Date.now(), o = null, t.setPointerCapture(r.pointerId));
160
- }, $ = (r) => {
161
- if (r.preventDefault(), r.stopPropagation(), s.isZoomed !== !1 || !h) return;
162
- const c = r.pageX - n, m = r.pageY - e;
163
- a = r.pageX, d = r.pageY, Math.abs(c) >= Math.abs(m) && (o === null || o === !0) ? (t.style.setProperty("--vistaview-pointer-diff-x", `${c}px`), o = !0) : Math.abs(m) > Math.abs(c) && (o === null || o === !1) && (t.style.setProperty("--vistaview-pointer-diff-y", `${m}px`), o = !1);
164
- }, M = (r) => {
165
- if (r.preventDefault(), r.stopPropagation(), t.releasePointerCapture(r.pointerId), s.isZoomed !== !1 || !h) return;
157
+ let n = 0, e = 0, r = 0, d = 0, o = null, a = 0, h = !1;
158
+ A = (l) => {
159
+ l.preventDefault(), l.stopPropagation(), s.isZoomed === !1 && (h = !0, n = l.pageX, e = l.pageY, r = l.pageX, d = l.pageY, a = Date.now(), o = null, t.setPointerCapture(l.pointerId));
160
+ }, $ = (l) => {
161
+ if (l.preventDefault(), l.stopPropagation(), s.isZoomed !== !1 || !h) return;
162
+ const c = l.pageX - n, v = l.pageY - e;
163
+ r = l.pageX, d = l.pageY, Math.abs(c) >= Math.abs(v) && (o === null || o === !0) ? (t.style.setProperty("--vistaview-pointer-diff-x", `${c}px`), o = !0) : Math.abs(v) > Math.abs(c) && (o === null || o === !1) && (t.style.setProperty("--vistaview-pointer-diff-y", `${v}px`), o = !1);
164
+ }, Z = (l) => {
165
+ if (l.preventDefault(), l.stopPropagation(), t.releasePointerCapture(l.pointerId), s.isZoomed !== !1 || !h) return;
166
166
  h = !1, o = null;
167
167
  const c = Array.from(t.querySelectorAll(".vistaview-item"));
168
- t.style.removeProperty("--vistaview-pointer-diff-x"), t.style.removeProperty("--vistaview-pointer-diff-y"), c.forEach((m) => {
169
- m.style.transition = "", m.style.translate = "";
168
+ t.style.removeProperty("--vistaview-pointer-diff-x"), t.style.removeProperty("--vistaview-pointer-diff-y"), c.forEach((v) => {
169
+ v.style.transition = "", v.style.translate = "";
170
170
  });
171
- }, Z = (r) => {
172
- if (r.preventDefault(), r.stopPropagation(), t.releasePointerCapture(r.pointerId), s.isZoomed !== !1 || !h) return;
171
+ }, M = (l) => {
172
+ if (l.preventDefault(), l.stopPropagation(), t.releasePointerCapture(l.pointerId), s.isZoomed !== !1 || !h) return;
173
173
  h = !1;
174
- const c = Array.from(t.querySelectorAll(".vistaview-item")), m = a - n, f = d - e, u = Date.now() - l, v = m / u, y = f / u, p = s.options.touchSpeedThreshold || 0.5, x = c.find(
174
+ const c = Array.from(t.querySelectorAll(".vistaview-item")), v = r - n, m = d - e, f = Date.now() - a, u = v / f, y = m / f, p = s.options.touchSpeedThreshold || 0.5, x = c.find(
175
175
  (E) => E.dataset.vistaviewPos === "0"
176
176
  ), b = Number(x.dataset.vistaviewIndex);
177
177
  function g() {
@@ -184,26 +184,26 @@ function tt(s) {
184
184
  D.style.transition = `translate ${s.options.animationDurationBase * 0.5}ms ease-out`, D.style.translate = `${E} ${L}`;
185
185
  });
186
186
  }
187
- if (v < -p || v > p) {
187
+ if (u < -p || u > p) {
188
188
  let E = function() {
189
189
  c[0].removeEventListener("transitionend", E), setTimeout(() => {
190
190
  const L = s.isReducedMotion;
191
191
  s.isReducedMotion = !0, g(), s.view(
192
- v < -p ? (b + 1) % i : (b - 1 + i) % i,
192
+ u < -p ? (b + 1) % i : (b - 1 + i) % i,
193
193
  {
194
- next: v < -p,
195
- prev: v > p
194
+ next: u < -p,
195
+ prev: u > p
196
196
  }
197
197
  ), s.isReducedMotion = L;
198
198
  }, 100);
199
199
  };
200
- I(v < -p ? "-100%" : "100%"), c[0].addEventListener("transitionend", E);
201
- } else y < -p || y > p ? (s.close(), I("0%", "0%")) : (c[0].addEventListener("transitionend", g), I("0%"));
202
- }, t.addEventListener("pointermove", $), t.addEventListener("pointerup", Z), t.addEventListener("pointerdown", A), t.addEventListener("pointercancel", M);
200
+ I(u < -p ? "-100%" : "100%"), c[0].addEventListener("transitionend", E);
201
+ } else y < -p || y > p ? (s.close(), I("0%", "0%")) : (c[0].addEventListener("transitionend", g), I("0%"), u === 0 && y === 0 && s.zoomIn());
202
+ }, t.addEventListener("pointermove", $), t.addEventListener("pointerup", M), t.addEventListener("pointerdown", A), t.addEventListener("pointercancel", Z);
203
203
  }
204
204
  function O(s) {
205
205
  const t = s.imageContainerElm;
206
- t && ($ && t.removeEventListener("pointermove", $), Z && t.removeEventListener("pointerup", Z), A && t.removeEventListener("pointerdown", A), M && t.removeEventListener("pointercancel", M));
206
+ t && ($ && t.removeEventListener("pointermove", $), M && t.removeEventListener("pointerup", M), A && t.removeEventListener("pointerdown", A), Z && t.removeEventListener("pointercancel", Z));
207
207
  }
208
208
  const et = (s) => {
209
209
  tt(s);
@@ -220,60 +220,49 @@ const et = (s) => {
220
220
  htmlElements: { from: s, to: t },
221
221
  images: { to: i },
222
222
  via: { next: n, prev: e },
223
- options: a,
223
+ options: r,
224
224
  isReducedMotion: d
225
225
  // index: { from: fromIndex, to: toIndex },
226
226
  }, o) => {
227
227
  if (!i) throw new Error("VistaView: images is null in defaultTransition()");
228
- const l = s.filter((h) => h.dataset.vistaviewPos === "0" || (n ? h.dataset.vistaviewPos === "1" : h.dataset.vistaviewPos === "-1"));
229
- d || await new Promise((h, r) => {
228
+ if (d)
229
+ return;
230
+ const a = s.filter((h) => h.dataset.vistaviewPos === "0" || (n ? h.dataset.vistaviewPos === "1" : h.dataset.vistaviewPos === "-1"));
231
+ await new Promise((h, l) => {
230
232
  let c = 0;
231
233
  if (o.aborted) {
232
- r(new P("Transition aborted"));
234
+ l(new S("Transition aborted"));
233
235
  return;
234
236
  }
235
- const m = (f) => {
236
- if (o.aborted) {
237
- r(new P("Transition aborted"));
238
- return;
239
- }
240
- if (f.currentTarget.removeEventListener("transitionend", m), c++, c < l.length) return;
241
- const u = t == null ? void 0 : t.find((g) => g.dataset.vistaviewPos === "0"), v = u ? Number(u.dataset.vistaviewIndex) : 0, y = l.find((g) => Number(g.dataset.vistaviewIndex) === v), p = y == null ? void 0 : y.querySelector(
237
+ const v = (m) => {
238
+ if (o.aborted)
239
+ return l(new S("Transition aborted"));
240
+ if (m.currentTarget.removeEventListener("transitionend", v), c++, c < a.length) return;
241
+ const f = t == null ? void 0 : t.find((g) => g.dataset.vistaviewPos === "0"), u = f ? Number(f.dataset.vistaviewIndex) : 0, y = a.find((g) => Number(g.dataset.vistaviewIndex) === u), p = y == null ? void 0 : y.querySelector(
242
242
  ".vistaview-image-highres"
243
243
  );
244
- if (!p) {
245
- r(new Error("current image element not found"));
246
- return;
247
- }
248
- if (!p.classList.contains("vistaview-image-loaded")) {
249
- h(0);
250
- return;
251
- }
252
- if (u == null || u.classList.add("vistaview-image-loaded"), p.classList.contains("vistaview-image-settled")) {
253
- u == null || u.classList.add("vistaview-image-settled"), h(0);
254
- return;
255
- }
244
+ if (!p)
245
+ return l(new Error("current image element not found"));
246
+ if (!p.classList.contains("vistaview-image-loaded") || p.classList.contains("vistaview-image-settled"))
247
+ return h(0);
256
248
  let x = 0;
257
249
  const b = setInterval(() => {
258
- if (o.aborted) {
259
- clearInterval(b), r(new P("Transition aborted"));
260
- return;
261
- }
262
- if (x++, x > a.animationDurationBase / 20 * 1.5) {
263
- clearInterval(b), h(0);
264
- return;
265
- }
266
- p.classList.contains("vistaview-image-settled") && (u == null || u.classList.add("vistaview-image-settled"), clearInterval(b), h(0));
250
+ if (o.aborted)
251
+ return clearInterval(b), l(new S("Transition aborted"));
252
+ if (x++, x > r.animationDurationBase / 20 * 1.5)
253
+ return clearInterval(b), h(0);
254
+ if (p.classList.contains("vistaview-image-settled"))
255
+ return f == null || f.classList.add("vistaview-image-settled"), clearInterval(b), h(0);
267
256
  }, 20);
268
257
  };
269
- l.forEach((f) => {
270
- f.style.transition = `translate ${a.animationDurationBase * 0.5}ms ease-out`, f.style.translate = n ? "-100%" : e ? "100%" : "0%", f.addEventListener("transitionend", m);
258
+ a.forEach((m) => {
259
+ m.style.transition = `translate ${r.animationDurationBase * 0.5}ms ease-out`, m.style.translate = n ? "-100%" : e ? "100%" : "0%", m.addEventListener("transitionend", v);
271
260
  });
272
261
  });
273
262
  }, st = (s) => {
274
263
  s.elements instanceof NodeList && s.elements.forEach((t) => t.style.opacity = "1"), O(s);
275
264
  };
276
- class P extends Error {
265
+ class S extends Error {
277
266
  constructor(t) {
278
267
  super(t), this.name = "VistaViewTransitionAbortedError";
279
268
  }
@@ -307,9 +296,12 @@ class ot {
307
296
  _vistaView: null,
308
297
  _via: { next: !1, prev: !1 },
309
298
  set value(t) {
310
- var n;
299
+ var n, e, r;
311
300
  const i = this._value;
312
- this._value = t, (n = this._vistaView) == null || n.swap(i, this._value);
301
+ this._value = t;
302
+ for (const d in (n = this._vistaView) == null ? void 0 : n.transitionAbortControllers)
303
+ (e = this._vistaView) == null || e.transitionAbortControllers[d].abort();
304
+ (r = this._vistaView) == null || r.swap(i, this._value);
313
305
  },
314
306
  get value() {
315
307
  return this._value;
@@ -343,7 +335,8 @@ class ot {
343
335
  w(this, "onZoomedPointerDown", null);
344
336
  w(this, "onZoomedPointerMove", null);
345
337
  w(this, "onZoomedPointerUp", null);
346
- w(this, "transitionAbortController", null);
338
+ w(this, "transitionAbortControllers", {});
339
+ w(this, "loadImageTimeout", null);
347
340
  this.elements = t, this.currentIndex._vistaView = this, this.options = {
348
341
  ...k,
349
342
  ...i || {},
@@ -356,14 +349,14 @@ class ot {
356
349
  });
357
350
  }
358
351
  async swap(t, i) {
359
- var l, h;
352
+ var l, c;
360
353
  if (!C.somethingOpened || t === i || t === null) return;
361
- if (this.transitionAbortController && this.transitionAbortController.abort(), !this.imageContainerElm)
354
+ if (!this.imageContainerElm)
362
355
  throw new Error("VistaView: imageContainerElm is null in swap()");
363
356
  this.setIndexDisplay(), this.clearZoom();
364
- const { images: n, positions: e } = this.getCurrentIndexes(i), a = this.getImages(n), d = a.map((r, c) => q(r, e[c])), o = {
357
+ const { images: n, positions: e } = this.getCurrentIndexes(i), r = this.getImages(n), d = r.map((v, m) => q(v, e[m])), o = {
365
358
  htmlElements: { from: this.currentItems, to: d },
366
- images: { from: this.currentImages, to: a },
359
+ images: { from: this.currentImages, to: r },
367
360
  index: { from: t, to: i },
368
361
  via: this.currentIndex.via,
369
362
  container: this.imageContainerElm,
@@ -373,84 +366,94 @@ class ot {
373
366
  isZoomed: this.isZoomed,
374
367
  options: this.options
375
368
  };
376
- this.userSetup(o), this.transitionAbortController = new AbortController();
369
+ this.userSetup(o);
370
+ const a = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
371
+ this.transitionAbortControllers[a] = new AbortController();
377
372
  try {
378
- await this.userTransition(o, this.transitionAbortController.signal);
379
- } catch (r) {
380
- r instanceof P || console.error(r);
373
+ await this.userTransition(o, this.transitionAbortControllers[a].signal);
374
+ } catch (v) {
375
+ v instanceof S || console.warn(v);
381
376
  }
382
- this.imageContainerElm.innerHTML = "", d.forEach((r) => {
383
- const c = r.dataset.vistaviewPos, m = r.dataset.vistaviewIndex;
384
- if (c === "0") {
385
- const f = this.currentItems.find((y) => y.dataset.vistaviewIndex === m), u = r.querySelector(".vistaview-image-highres"), v = f == null ? void 0 : f.querySelector(".vistaview-image-highres");
386
- v && (u.setAttribute("class", v.getAttribute("class") || ""), u.setAttribute("style", v.getAttribute("style") || "")), this.imageContainerElm.appendChild(r);
387
- } else
388
- this.imageContainerElm.appendChild(r);
389
- }), this.setInitialDimPos(), this.currentImages = a, this.currentItems = d, this.loadImages(), this.setCurrentDescription(), this.updateZoomButtonsVisibility(), (h = (l = this.options).onImageView) == null || h.call(l, o);
377
+ delete this.transitionAbortControllers[a];
378
+ const h = d.find((v) => v.dataset.vistaviewPos === "0");
379
+ if (h) {
380
+ const v = h.dataset.vistaviewIndex, m = this.currentItems.find((u) => u.dataset.vistaviewIndex === v), f = m == null ? void 0 : m.querySelector(".vistaview-image-highres");
381
+ if (f) {
382
+ const u = h.querySelector(
383
+ ".vistaview-image-highres"
384
+ );
385
+ u.setAttribute("class", f.getAttribute("class") || ""), u.setAttribute("style", f.getAttribute("style") || ""), u.classList.remove("vistaview-image--zooming"), u.classList.remove("vistaview-image-settled");
386
+ }
387
+ }
388
+ this.imageContainerElm.innerHTML = "", d.forEach((v) => {
389
+ this.imageContainerElm.appendChild(v);
390
+ }), this.setInitialDimPos(), this.currentImages = r, this.currentItems = d, this.setCurrentDescription(), this.updateZoomButtonsVisibility(), (c = (l = this.options).onImageView) == null || c.call(l, o), this.loadImageTimeout && clearTimeout(this.loadImageTimeout), this.loadImageTimeout = setTimeout(() => {
391
+ this.loadImages();
392
+ }, 333);
390
393
  }
391
394
  //
392
395
  setZoomed(t) {
393
- var i, n, e, a, d, o;
396
+ var i, n, e, r, d, o;
394
397
  if (this.isZoomed !== t) {
395
398
  if (this.isZoomed) {
396
- let l = this.isZoomed;
397
- if (l.classList.remove("vistaview-image--zooming"), this.onZoomedPointerDown && ((i = l.parentElement) == null || i.removeEventListener("pointerdown", this.onZoomedPointerDown), this.onZoomedPointerDown = null), this.onZoomedPointerMove && ((n = l.parentElement) == null || n.removeEventListener("pointermove", this.onZoomedPointerMove), this.onZoomedPointerMove = null), this.onZoomedPointerUp && ((e = l.parentElement) == null || e.removeEventListener("pointerup", this.onZoomedPointerUp), this.onZoomedPointerUp = null), l == null || l.style.removeProperty("--pointer-diff-x"), l == null || l.style.removeProperty("--pointer-diff-y"), setTimeout(() => {
398
- l == null || l.classList.remove("vistaview-image--zooming");
399
+ let a = this.isZoomed;
400
+ if (a.classList.remove("vistaview-image--zooming"), this.onZoomedPointerDown && ((i = a.parentElement) == null || i.removeEventListener("pointerdown", this.onZoomedPointerDown), this.onZoomedPointerDown = null), this.onZoomedPointerMove && ((n = a.parentElement) == null || n.removeEventListener("pointermove", this.onZoomedPointerMove), this.onZoomedPointerMove = null), this.onZoomedPointerUp && ((e = a.parentElement) == null || e.removeEventListener("pointerup", this.onZoomedPointerUp), this.onZoomedPointerUp = null), a == null || a.style.removeProperty("--pointer-diff-x"), a == null || a.style.removeProperty("--pointer-diff-y"), setTimeout(() => {
401
+ a == null || a.classList.remove("vistaview-image--zooming");
399
402
  }, 500), this.isZoomed = !1, !t) return;
400
403
  }
401
404
  if (t) {
402
405
  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");
403
- let l = !1, h = 0, r = 0, c = 0, m = 0, f = 0, u = 0;
404
- this.onZoomedPointerDown = (v) => {
405
- v.preventDefault(), v.stopPropagation(), l = !0, h = v.pageX, r = v.pageY, t.setPointerCapture(v.pointerId);
406
- }, this.onZoomedPointerMove = (v) => {
407
- if (!l) return;
408
- v.preventDefault(), f = v.pageX - h, u = v.pageY - r;
409
- const y = parseInt((t == null ? void 0 : t.dataset.vistaviewCurrentWidth) || "0"), p = parseInt((t == null ? void 0 : t.dataset.vistaviewCurrentHeight) || "0"), { maxDiffX: x, minDiffY: b, maxDiffY: g, minDiffX: I } = T(
406
+ let a = !1, h = 0, l = 0, c = 0, v = 0, m = 0, f = 0;
407
+ this.onZoomedPointerDown = (u) => {
408
+ u.preventDefault(), u.stopPropagation(), a = !0, h = u.pageX, l = u.pageY, t.setPointerCapture(u.pointerId);
409
+ }, this.onZoomedPointerMove = (u) => {
410
+ if (!a) return;
411
+ u.preventDefault(), m = u.pageX - h, f = u.pageY - l;
412
+ const y = parseInt((t == null ? void 0 : t.dataset.vistaviewCurrentWidth) || "0"), p = parseInt((t == null ? void 0 : t.dataset.vistaviewCurrentHeight) || "0"), { maxDiffX: x, minDiffY: b, maxDiffY: g, minDiffX: I } = H(
410
413
  y,
411
414
  p
412
- ), E = Math.min(x, Math.max(I, c + f)), L = Math.min(g, Math.max(b, m + u));
413
- f = E - c, u = L - m, t == null || t.style.setProperty("--pointer-diff-x", `${E}px`), t == null || t.style.setProperty("--pointer-diff-y", `${L}px`);
414
- }, this.onZoomedPointerUp = (v) => {
415
- l = !1, t.releasePointerCapture(v.pointerId), c += f, m += u, f = 0, u = 0;
416
- }, (a = t == null ? void 0 : t.parentElement) == null || a.addEventListener("pointerdown", this.onZoomedPointerDown), (d = t == null ? void 0 : t.parentElement) == null || d.addEventListener("pointermove", this.onZoomedPointerMove), (o = t == null ? void 0 : t.parentElement) == null || o.addEventListener("pointerup", this.onZoomedPointerUp);
415
+ ), E = Math.min(x, Math.max(I, c + m)), L = Math.min(g, Math.max(b, v + f));
416
+ m = E - c, f = L - v, t == null || t.style.setProperty("--pointer-diff-x", `${E}px`), t == null || t.style.setProperty("--pointer-diff-y", `${L}px`);
417
+ }, this.onZoomedPointerUp = (u) => {
418
+ a = !1, t.releasePointerCapture(u.pointerId), c += m, v += f, m = 0, f = 0;
419
+ }, (r = t == null ? void 0 : t.parentElement) == null || r.addEventListener("pointerdown", this.onZoomedPointerDown), (d = t == null ? void 0 : t.parentElement) == null || d.addEventListener("pointermove", this.onZoomedPointerMove), (o = t == null ? void 0 : t.parentElement) == null || o.addEventListener("pointerup", this.onZoomedPointerUp);
417
420
  return;
418
421
  }
419
422
  }
420
423
  }
421
424
  zoomIn() {
422
- var a, d, o, l, h;
423
- const t = (a = this.rootElm) == null ? void 0 : a.querySelector(
425
+ var r, d, o, a, h;
426
+ const t = (r = this.rootElm) == null ? void 0 : r.querySelector(
424
427
  '[data-vistaview-pos="0"] .vistaview-image-highres'
425
428
  ), i = t.width, n = t.height;
426
429
  t.dataset.vistaviewInitialWidth || (t.dataset.vistaviewInitialWidth = i.toString()), t.dataset.vistaviewInitialHeight || (t.dataset.vistaviewInitialHeight = n.toString()), this.setZoomed(t);
427
430
  const e = (t.naturalWidth || 0) * this.options.maxZoomLevel;
428
431
  if (i && e && i < e) {
429
- const r = Math.min(i + this.options.zoomStep, e);
430
- t.style.width = `${r}px`;
431
- const c = r / i * n;
432
- t.style.height = `${c}px`, (o = (d = this.rootElm) == null ? void 0 : d.querySelector("button.vistaview-zoom-out-btn")) == null || o.removeAttribute("disabled"), t.dataset.vistaviewCurrentWidth = r.toString(), t.dataset.vistaviewCurrentHeight = c.toString(), r === e && ((h = (l = this.rootElm) == null ? void 0 : l.querySelector("button.vistaview-zoom-in-btn")) == null || h.setAttribute("disabled", "true"));
432
+ const l = Math.min(i + this.options.zoomStep, e);
433
+ t.style.width = `${l}px`;
434
+ const c = l / i * n;
435
+ t.style.height = `${c}px`, (o = (d = this.rootElm) == null ? void 0 : d.querySelector("button.vistaview-zoom-out-btn")) == null || o.removeAttribute("disabled"), t.dataset.vistaviewCurrentWidth = l.toString(), t.dataset.vistaviewCurrentHeight = c.toString(), l === e && ((h = (a = this.rootElm) == null ? void 0 : a.querySelector("button.vistaview-zoom-in-btn")) == null || h.setAttribute("disabled", "true"));
433
436
  }
434
437
  }
435
438
  zoomOut() {
436
- var d, o, l, h, r;
439
+ var d, o, a, h, l;
437
440
  const t = (d = this.rootElm) == null ? void 0 : d.querySelector(
438
441
  '[data-vistaview-pos="0"] .vistaview-image-highres'
439
- ), i = t.width, n = t.height, e = t.dataset.vistaviewInitialWidth ? parseInt(t.dataset.vistaviewInitialWidth) : 0, a = (c) => {
440
- c.target === t && (t.classList.remove("vistaview-image--zooming-out"), t.removeEventListener("transitionend", a));
442
+ ), i = t.width, n = t.height, e = t.dataset.vistaviewInitialWidth ? parseInt(t.dataset.vistaviewInitialWidth) : 0, r = (c) => {
443
+ c.target === t && (t.classList.remove("vistaview-image--zooming-out"), t.removeEventListener("transitionend", r));
441
444
  };
442
- if (t.addEventListener("transitionend", a), t.classList.add("vistaview-image--zooming-out"), i && e && i > e) {
445
+ if (t.addEventListener("transitionend", r), t.classList.add("vistaview-image--zooming-out"), i && e && i > e) {
443
446
  const c = Math.max(i - this.options.zoomStep, e);
444
447
  t.style.width = `${c}px`;
445
- const m = c / i * n;
446
- t.style.height = `${m}px`, (l = (o = this.rootElm) == null ? void 0 : o.querySelector("button.vistaview-zoom-in-btn")) == null || l.removeAttribute("disabled"), t.dataset.vistaviewCurrentWidth = c.toString(), t.dataset.vistaviewCurrentHeight = m.toString();
447
- const { maxDiffX: f, minDiffY: u, maxDiffY: v, minDiffX: y } = T(c, m);
448
+ const v = c / i * n;
449
+ t.style.height = `${v}px`, (a = (o = this.rootElm) == null ? void 0 : o.querySelector("button.vistaview-zoom-in-btn")) == null || a.removeAttribute("disabled"), t.dataset.vistaviewCurrentWidth = c.toString(), t.dataset.vistaviewCurrentHeight = v.toString();
450
+ const { maxDiffX: m, minDiffY: f, maxDiffY: u, minDiffX: y } = H(c, v);
448
451
  let p = parseInt(
449
452
  (t == null ? void 0 : t.style.getPropertyValue("--pointer-diff-x").replace("px", "")) || "0"
450
453
  ), x = parseInt(
451
454
  (t == null ? void 0 : t.style.getPropertyValue("--pointer-diff-y").replace("px", "")) || "0"
452
455
  );
453
- p = Math.min(f, Math.max(y, p)), x = Math.min(v, Math.max(u, x)), t == null || t.style.setProperty("--pointer-diff-x", `${p}px`), t == null || t.style.setProperty("--pointer-diff-y", `${x}px`), c === e && ((r = (h = this.rootElm) == null ? void 0 : h.querySelector("button.vistaview-zoom-out-btn")) == null || r.setAttribute("disabled", "true"), t.removeAttribute("data-vistaview-current-width"), t.removeAttribute("data-vistaview-current-height"), t.removeAttribute("data-vistaview-initial-width"), t.removeAttribute("data-vistaview-initial-height"), this.setZoomed(!1));
456
+ p = Math.min(m, Math.max(y, p)), x = Math.min(u, Math.max(f, x)), t == null || t.style.setProperty("--pointer-diff-x", `${p}px`), t == null || t.style.setProperty("--pointer-diff-y", `${x}px`), c === e && ((l = (h = this.rootElm) == null ? void 0 : h.querySelector("button.vistaview-zoom-out-btn")) == null || l.setAttribute("disabled", "true"), t.removeAttribute("data-vistaview-current-width"), t.removeAttribute("data-vistaview-current-height"), t.removeAttribute("data-vistaview-initial-width"), t.removeAttribute("data-vistaview-initial-height"), this.setZoomed(!1));
454
457
  }
455
458
  }
456
459
  clearZoom() {
@@ -459,13 +462,13 @@ class ot {
459
462
  return t.map((i, n) => {
460
463
  const e = this.elements[i];
461
464
  if (e instanceof HTMLElement) {
462
- const a = e.querySelector("img"), d = e.getAttribute("href") || "", o = e.getAttribute("src") || "", l = e.dataset.vistaviewSrc || d || o || (a == null ? void 0 : a.src) || "", h = e.dataset.vistaviewAlt || e.getAttribute("alt") || (a == null ? void 0 : a.alt) || "", r = e.dataset.vistaviewThumb || (a == null ? void 0 : a.src) || d || o || "";
465
+ const r = e.querySelector("img"), d = e.getAttribute("href") || "", o = e.getAttribute("src") || "", a = e.dataset.vistaviewSrc || d || o || (r == null ? void 0 : r.src) || "", h = e.dataset.vistaviewAlt || e.getAttribute("alt") || (r == null ? void 0 : r.alt) || "", l = e.dataset.vistaviewThumb || (r == null ? void 0 : r.src) || d || o || "";
463
466
  return {
464
467
  index: t[n],
465
- src: l,
468
+ src: a,
466
469
  alt: h,
467
- thumb: r,
468
- imageElm: e instanceof HTMLImageElement ? e : a,
470
+ thumb: l,
471
+ imageElm: e instanceof HTMLImageElement ? e : r,
469
472
  anchorElm: e instanceof HTMLAnchorElement ? e : void 0
470
473
  };
471
474
  } else
@@ -473,12 +476,12 @@ class ot {
473
476
  });
474
477
  }
475
478
  setInitialDimPos() {
476
- var h, r;
479
+ var h, l;
477
480
  if (!this.rootElm) return;
478
- const t = (h = this.rootElm.querySelector('[data-vistaview-pos="0"]')) == null ? void 0 : h.dataset.vistaviewIndex, i = ((r = this.currentImages) == null ? void 0 : r.find((c) => c.index === Number(t))) || null;
481
+ const t = (h = this.rootElm.querySelector('[data-vistaview-pos="0"]')) == null ? void 0 : h.dataset.vistaviewIndex, i = ((l = this.currentImages) == null ? void 0 : l.find((c) => c.index === Number(t))) || null;
479
482
  if (!i) return;
480
- const n = i.imageElm ? z(i.imageElm) : void 0, e = i.anchorElm ? z(i.anchorElm) : void 0, a = (e == null ? void 0 : e.width) || (n == null ? void 0 : n.width) || 0, d = (e == null ? void 0 : e.height) || (n == null ? void 0 : n.height) || 0, o = ((e == null ? void 0 : e.left) || (n == null ? void 0 : n.left) || 0) + a / 2, l = ((e == null ? void 0 : e.top) || (n == null ? void 0 : n.top) || 0) + d / 2;
481
- this.rootElm.style.setProperty("--vistaview-container-initial-width", a + "px"), this.rootElm.style.setProperty("--vistaview-container-initial-height", d + "px"), this.rootElm.style.setProperty("--vistaview-container-initial-top", l + "px"), this.rootElm.style.setProperty("--vistaview-container-initial-left", o + "px"), this.rootElm.style.setProperty(
483
+ const n = i.imageElm ? z(i.imageElm) : void 0, e = i.anchorElm ? z(i.anchorElm) : void 0, r = (e == null ? void 0 : e.width) || (n == null ? void 0 : n.width) || 0, d = (e == null ? void 0 : e.height) || (n == null ? void 0 : n.height) || 0, o = ((e == null ? void 0 : e.left) || (n == null ? void 0 : n.left) || 0) + r / 2, a = ((e == null ? void 0 : e.top) || (n == null ? void 0 : n.top) || 0) + d / 2;
484
+ this.rootElm.style.setProperty("--vistaview-container-initial-width", r + "px"), this.rootElm.style.setProperty("--vistaview-container-initial-height", d + "px"), this.rootElm.style.setProperty("--vistaview-container-initial-top", a + "px"), this.rootElm.style.setProperty("--vistaview-container-initial-left", o + "px"), this.rootElm.style.setProperty(
482
485
  "--vistaview-image-border-radius",
483
486
  R(e == null ? void 0 : e.borderRadius) || R(n == null ? void 0 : n.borderRadius) || "0px"
484
487
  );
@@ -491,13 +494,13 @@ class ot {
491
494
  if (!t) return;
492
495
  const i = this;
493
496
  function n() {
494
- var r, c;
495
- const a = (r = i.rootElm) == null ? void 0 : r.querySelector(
497
+ var l, c;
498
+ const r = (l = i.rootElm) == null ? void 0 : l.querySelector(
496
499
  "button.vistaview-zoom-in-btn"
497
500
  ), d = (c = i.rootElm) == null ? void 0 : c.querySelector(
498
501
  "button.vistaview-zoom-out-btn"
499
- ), o = parseInt(t.style.width) || t.width, l = t.naturalWidth * i.options.maxZoomLevel, h = o < l && l > 0;
500
- a && (a.style.display = h ? "" : "none"), d && (d.style.display = h ? "" : "none");
502
+ ), o = parseInt(t.style.width) || t.width, a = t.naturalWidth * i.options.maxZoomLevel, h = o < a && a > 0;
503
+ r && (r.style.display = h ? "" : "none"), d && (d.style.display = h ? "" : "none");
501
504
  }
502
505
  t.complete && t.naturalWidth > 0 ? n() : t.addEventListener("load", n);
503
506
  }
@@ -508,35 +511,35 @@ class ot {
508
511
  ).forEach((i, n) => {
509
512
  const e = i, d = this.currentImages[n].imageElm, o = { w: 0, h: 0 };
510
513
  if (d) {
511
- const { width: h, height: r } = B(d);
512
- o.w = Math.min(d.width, h), o.h = Math.min(d.height, r);
514
+ const { width: h, height: l } = _(d);
515
+ o.w = Math.min(d.width, h), o.h = Math.min(d.height, l);
513
516
  }
514
- const l = () => {
515
- var r;
517
+ const a = () => {
518
+ var l;
516
519
  const h = () => {
517
520
  var c;
518
521
  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(() => {
519
522
  var y, p;
520
- let m = 0;
521
- const f = () => {
523
+ let v = 0;
524
+ const m = () => {
522
525
  var x, b;
523
- m++, !(m < 3) && (e.removeEventListener("transitionend", f), (b = (x = e.parentElement) == null ? void 0 : x.querySelector(".vistaview-image-lowres")) == null || b.classList.add("vistaview-image--hidden"), e.classList.add("vistaview-image-settled"));
526
+ v++, !(v < 3) && (e.removeEventListener("transitionend", m), (b = (x = e.parentElement) == null ? void 0 : x.querySelector(".vistaview-image-lowres")) == null || b.classList.add("vistaview-image--hidden"), e.classList.add("vistaview-image-settled"));
524
527
  };
525
- e.addEventListener("transitionend", f);
526
- const { width: u, height: v } = H(e);
527
- e.style.width = `${u}px`, e.style.height = `${v}px`, o.w && o.h && u === o.w && v === o.h ? ((p = (y = e.parentElement) == null ? void 0 : y.querySelector(".vistaview-image-lowres")) == null || p.classList.add("vistaview-image--hidden"), e.classList.add("vistaview-image-settled")) : (e.style.width = `${u}px`, e.style.height = `${v}px`);
528
+ e.addEventListener("transitionend", m);
529
+ const { width: f, height: u } = T(e);
530
+ e.style.width = `${f}px`, e.style.height = `${u}px`, o.w && o.h && f === o.w && u === o.h ? ((p = (y = e.parentElement) == null ? void 0 : y.querySelector(".vistaview-image-lowres")) == null || p.classList.add("vistaview-image--hidden"), e.classList.add("vistaview-image-settled")) : (e.style.width = `${f}px`, e.style.height = `${u}px`);
528
531
  }, 100), (c = i.parentElement) != null && c.matches('[data-vistaview-pos="0"]') && this.updateZoomButtonsVisibility();
529
532
  };
530
- if ((r = this.rootElm) != null && r.classList.contains("vistaview--opened"))
533
+ if ((l = this.rootElm) != null && l.classList.contains("vistaview--opened"))
531
534
  h();
532
535
  else {
533
536
  const c = setInterval(() => {
534
- var m;
535
- (m = this.rootElm) != null && m.classList.contains("vistaview--opened") && (clearInterval(c), h());
537
+ var v;
538
+ (v = this.rootElm) != null && v.classList.contains("vistaview--opened") && (clearInterval(c), h());
536
539
  }, 50);
537
540
  }
538
541
  };
539
- e.complete && e.naturalWidth > 0 ? l() : e.onload = l;
542
+ e.complete && e.naturalWidth > 0 ? a() : e.onload = a;
540
543
  });
541
544
  }
542
545
  setIndexDisplay() {
@@ -555,10 +558,10 @@ class ot {
555
558
  t,
556
559
  ...Array.from({ length: i }, (d, o) => (t + 1 + o) % n)
557
560
  ])
558
- ], a = n < 1 || !i ? [0] : e.map((d, o) => o - Math.floor(e.length / 2));
561
+ ], r = n < 1 || !i ? [0] : e.map((d, o) => o - Math.floor(e.length / 2));
559
562
  return {
560
563
  images: e,
561
- positions: a
564
+ positions: r
562
565
  };
563
566
  }
564
567
  setKeyboardListeners() {
@@ -590,13 +593,13 @@ class ot {
590
593
  ".vistaview-image-highres.vistaview-image-loaded"
591
594
  );
592
595
  t == null || t.forEach((n) => {
593
- const e = n, { width: a, height: d } = H(e);
594
- e.classList.contains("vistaview-image--zooming") ? (e.dataset.vistaviewInitialWidth = a.toString(), e.dataset.vistaviewInitialHeight = d.toString()) : (e.style.width = `${a}px`, e.style.height = `${d}px`);
596
+ const e = n, { width: r, height: d } = T(e);
597
+ e.classList.contains("vistaview-image--zooming") ? (e.dataset.vistaviewInitialWidth = r.toString(), e.dataset.vistaviewInitialHeight = d.toString()) : (e.style.width = `${r}px`, e.style.height = `${d}px`);
595
598
  });
596
599
  }, window.addEventListener("resize", this.onResizeHandler);
597
600
  }
598
601
  open(t = 0) {
599
- var o, l, h, r, c, m, f, u, v, y, p, x, b;
602
+ var o, a, h, l, c, v, m, f, u, y, p, x, b;
600
603
  if (C.somethingOpened) {
601
604
  console.error("VistaView: another instance is already opened. Returning.");
602
605
  return;
@@ -613,7 +616,7 @@ class ot {
613
616
  this.currentImages = this.getImages(i);
614
617
  const e = this.currentImages.map((g, I) => q(g, n[I]));
615
618
  this.currentItems = e;
616
- const a = {
619
+ const r = {
617
620
  htmlElements: { from: null, to: this.currentItems },
618
621
  images: { from: null, to: this.currentImages },
619
622
  index: { from: null, to: t },
@@ -625,14 +628,14 @@ class ot {
625
628
  isZoomed: this.isZoomed,
626
629
  options: this.options
627
630
  };
628
- this.userSetup(a), this.imageContainerElm.innerHTML = "", this.currentItems.forEach((g) => {
631
+ this.userSetup(r), this.imageContainerElm.innerHTML = "", this.currentItems.forEach((g) => {
629
632
  this.imageContainerElm.appendChild(g);
630
633
  });
631
634
  let d = 0;
632
635
  this.rootElm.addEventListener("animationend", (g) => {
633
636
  var I;
634
637
  g.currentTarget === this.rootElm && (d++, d >= 2 && ((I = this.rootElm) == null || I.classList.add("vistaview--opened")));
635
- }), (l = this.rootElm.querySelector(".vistaview-close-btn")) == null || l.addEventListener("click", () => this.close()), (h = this.rootElm.querySelector(".vistaview-zoom-in-btn")) == null || h.addEventListener("click", () => this.zoomIn()), (r = this.rootElm.querySelector(".vistaview-zoom-out-btn")) == null || r.addEventListener("click", () => this.zoomOut()), (c = this.rootElm.querySelector(".vistaview-prev-btn>button")) == null || c.addEventListener("click", () => this.prev()), (m = this.rootElm.querySelector(".vistaview-next-btn>button")) == null || m.addEventListener("click", () => this.next()), [
638
+ }), (a = this.rootElm.querySelector(".vistaview-close-btn")) == null || a.addEventListener("click", () => this.close()), (h = this.rootElm.querySelector(".vistaview-zoom-in-btn")) == null || h.addEventListener("click", () => this.zoomIn()), (l = this.rootElm.querySelector(".vistaview-zoom-out-btn")) == null || l.addEventListener("click", () => this.zoomOut()), (c = this.rootElm.querySelector(".vistaview-prev-btn>button")) == null || c.addEventListener("click", () => this.prev()), (v = this.rootElm.querySelector(".vistaview-next-btn>button")) == null || v.addEventListener("click", () => this.next()), [
636
639
  ...this.options.controls.topLeft || [],
637
640
  ...this.options.controls.topRight || [],
638
641
  ...this.options.controls.topCenter || [],
@@ -656,15 +659,15 @@ class ot {
656
659
  ), this.options.initialZIndex !== void 0 && this.rootElm.style.setProperty(
657
660
  "--vistaview-initial-z-index",
658
661
  `${this.options.initialZIndex}`
659
- ), this.setInitialDimPos(), this.setResizeListeners(), this.options.keyboardListeners && this.setKeyboardListeners(), this.elements.length === 1 && ((f = this.rootElm.querySelector(".vistaview-prev-btn")) == null || f.classList.add("vistaview-ui--none"), (u = this.rootElm.querySelector(".vistaview-next-btn")) == null || u.classList.add("vistaview-ui--none"), (v = this.rootElm.querySelector(".vistaview-index-display")) == null || v.classList.add("vistaview-ui--none")), this.rootElm && this.rootElm.classList.add("vistaview--initialized"), this.loadImages(), this.setCurrentDescription(), this.setIndexDisplay(), this.userInit(this), (p = (y = this.options).onOpen) == null || p.call(y, a), (b = (x = this.options).onImageView) == null || b.call(x, a);
662
+ ), this.setInitialDimPos(), this.setResizeListeners(), this.options.keyboardListeners && this.setKeyboardListeners(), this.elements.length === 1 && ((m = this.rootElm.querySelector(".vistaview-prev-btn")) == null || m.classList.add("vistaview-ui--none"), (f = this.rootElm.querySelector(".vistaview-next-btn")) == null || f.classList.add("vistaview-ui--none"), (u = this.rootElm.querySelector(".vistaview-index-display")) == null || u.classList.add("vistaview-ui--none")), this.rootElm && this.rootElm.classList.add("vistaview--initialized"), this.loadImages(), this.setCurrentDescription(), this.setIndexDisplay(), this.userInit(this), (p = (y = this.options).onOpen) == null || p.call(y, r), (b = (x = this.options).onImageView) == null || b.call(x, r);
660
663
  }
661
664
  async close(t = !0) {
662
- var n, e, a;
665
+ var n, e, r;
663
666
  if (C.somethingOpened !== this) return;
664
667
  t && ((n = this.rootElm) == null || n.classList.add("vistaview--closing"), await new Promise((d) => {
665
- var l;
668
+ var a;
666
669
  let o;
667
- (l = this.rootElm) == null || l.addEventListener("transitionend", (h) => {
670
+ (a = this.rootElm) == null || a.addEventListener("transitionend", (h) => {
668
671
  h.currentTarget === this.rootElm && (o && clearTimeout(o), o = setTimeout(() => {
669
672
  d();
670
673
  }, 333));
@@ -682,7 +685,10 @@ class ot {
682
685
  isZoomed: this.isZoomed,
683
686
  options: this.options
684
687
  };
685
- this.userClose(this), (a = (e = this.options).onClose) == null || a.call(e, i), document.body.removeChild(this.rootElm), this.currentIndex._value = null, this.currentIndex._via = { next: !1, prev: !1 }, this.rootElm = null, this.imageContainerElm = null, this.currentImages = null, this.currentItems = null, this.navActive = !0, this.onResizeHandler && (window.removeEventListener("resize", this.onResizeHandler), this.onResizeHandler = null), this.onKeyDown && (window.removeEventListener("keydown", this.onKeyDown), this.onKeyDown = null), (this.onZoomedPointerDown || this.onZoomedPointerMove || this.onZoomedPointerUp) && (this.setZoomed(!1), this.onZoomedPointerDown = null, this.onZoomedPointerMove = null, this.onZoomedPointerUp = null), this.transitionAbortController && (this.transitionAbortController.abort(), this.transitionAbortController = null), C.somethingOpened = null;
688
+ this.userClose(this), (r = (e = this.options).onClose) == null || r.call(e, i), document.body.removeChild(this.rootElm), this.currentIndex._value = null, this.currentIndex._via = { next: !1, prev: !1 }, this.rootElm = null, this.imageContainerElm = null, this.currentImages = null, this.currentItems = null, this.navActive = !0, this.onResizeHandler && (window.removeEventListener("resize", this.onResizeHandler), this.onResizeHandler = null), this.onKeyDown && (window.removeEventListener("keydown", this.onKeyDown), this.onKeyDown = null), (this.onZoomedPointerDown || this.onZoomedPointerMove || this.onZoomedPointerUp) && (this.setZoomed(!1), this.onZoomedPointerDown = null, this.onZoomedPointerMove = null, this.onZoomedPointerUp = null);
689
+ for (const d in this.transitionAbortControllers)
690
+ this.transitionAbortControllers[d].abort();
691
+ this.transitionAbortControllers = {}, C.somethingOpened = null;
686
692
  }
687
693
  destroy() {
688
694
  this.close(!1), this.elements instanceof NodeList && this.elements.forEach((t) => {
@@ -738,7 +744,7 @@ function lt({ elements: s, ...t }) {
738
744
  }
739
745
  export {
740
746
  k as DefaultOptions,
741
- P as VistaViewTransitionAbortedError,
747
+ S as VistaViewTransitionAbortedError,
742
748
  st as defaultClose,
743
749
  et as defaultInit,
744
750
  it as defaultSetup,
package/dist/vistaview.umd.js CHANGED
@@ -1,11 +1,11 @@
1
- (function(y,I){typeof exports=="object"&&typeof module<"u"?I(exports):typeof define=="function"&&define.amd?define(["exports"],I):(y=typeof globalThis<"u"?globalThis:y||self,I(y.VistaView={}))})(this,(function(y){"use strict";var at=Object.defineProperty;var lt=(y,I,A)=>I in y?at(y,I,{enumerable:!0,configurable:!0,writable:!0,value:A}):y[I]=A;var w=(y,I,A)=>lt(y,typeof I!="symbol"?I+"":I,A);function I(s){const t=getComputedStyle(s),i=s.getBoundingClientRect();return{objectFit:t.objectFit,borderRadius:t.borderRadius,objectPosition:t.objectPosition,overflow:t.overflow,top:i.top,left:i.left,width:i.width,height:i.height,naturalWidth:s.naturalWidth,naturalHeight:s.naturalHeight}}let A=null;function U(){return A||(window.trustedTypes||(window.trustedTypes={createPolicy:(s,t)=>t}),A=window.trustedTypes.createPolicy("vistaView-policy",{createHTML:s=>s,createScript:()=>{throw new Error("Not implemented")},createScriptURL:()=>{throw new Error("Not implemented")}}),A)}function q(s){const i=U().createHTML(s),n=document.createElement("template");n.innerHTML=i;const e=n.content;return n.remove(),e}function k(s){return s&&!/^0(px|%|r?em|vw|vh|vmin|vmax|cm|mm|in|pt|pc|ex|ch)?$/i.test(s.trim())&&s}function j(s){const i=window.getComputedStyle(s).objectFit||"",{width:n,height:e}=s.getBoundingClientRect(),a=s.naturalWidth,d=s.naturalHeight;if(!i)return{width:n,height:e};if(!a||!d)return{width:n,height:e};const o=a/d,l=n/e;switch(i){case"fill":return{width:n,height:e};case"none":return{width:a,height:d};case"contain":return o>l?{width:n,height:n/o}:{width:e*o,height:e};case"cover":return o<l?{width:n,height:n/o}:{width:e*o,height:e};case"scale-down":{const h={width:a,height:d},r=o>l?{width:n,height:n/o}:{width:e*o,height:e};return r.width<=h.width&&r.height<=h.height?r:h}}return{width:n,height:e}}function W(s){const t=window.innerWidth,i=window.innerHeight,n=s.naturalWidth,e=s.naturalHeight;if(!n||!e)throw console.error("Error",s),new Error("Image natural dimensions are zero");if(n<t&&e<i)return{width:n,height:e};const a=n/e,d=t/i;let o,l;return a>d?(o=t,l=t/a):(l=i,o=i*a),{width:o,height:l}}function O(s,t){const i=window.innerHeight,n=window.innerWidth,e=s,a=t,d=Math.max(0,(e-n)/2)+n/2,o=Math.max(0,(a-i)/2)+i/2,l=-d,h=-o;return{maxDiffX:d,minDiffY:h,maxDiffY:o,minDiffX:l}}const K='<svg viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>',G='<svg viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>',J='<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="11" x2="11" y1="8" y2="14"/><line x1="8" x2="14" y1="11" y2="11"/></svg>',Q='<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="8" x2="14" y1="11" y2="11"/></svg>',tt='<svg viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>',et='<svg viewBox="0 0 24 24"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>';function V(){return{name:"download",icon:et,onClick:async s=>{var a;const t=await fetch(s.src),i=await t.blob(),n=t.url,e=document.createElement("a");e.href=URL.createObjectURL(i),e.download=((a=n.split("/").pop())==null?void 0:a.split("?")[0].split("#")[0])||"download",document.body.appendChild(e),e.click(),document.body.removeChild(e)}}}function it(s){if(typeof s=="string")switch(s){case"zoomIn":return`<button class="vistaview-zoom-in-btn">${J}</button>`;case"zoomOut":return`<button disabled class="vistaview-zoom-out-btn">${Q}</button>`;case"close":return`<button class="vistaview-close-btn">${tt}</button>`;case"indexDisplay":return'<div class="vistaview-index-display"></div>';case"description":return'<div class="vistaview-description"></div>';default:return""}return`<button data-vistaview-custom-control="${s.name}">${s.icon}</button>`}function X(s,t){var r,c;const i=s.imageElm?getComputedStyle(s.imageElm):null,n=(i==null?void 0:i.objectFit)||"",e=((r=s.imageElm)==null?void 0:r.naturalWidth)||"",a=((c=s.imageElm)==null?void 0:c.naturalHeight)||"",d=(i==null?void 0:i.width)||"",o=(i==null?void 0:i.height)||"",l=document.createElement("div");l.className="vistaview-item",l.dataset.vistaviewPos=`${t!==void 0?t:""}`,l.dataset.vistaviewIndex=s.index.toString();const h=q(`<img class="vistaview-image-lowres"
1
+ (function(y,I){typeof exports=="object"&&typeof module<"u"?I(exports):typeof define=="function"&&define.amd?define(["exports"],I):(y=typeof globalThis<"u"?globalThis:y||self,I(y.VistaView={}))})(this,(function(y){"use strict";var at=Object.defineProperty;var lt=(y,I,P)=>I in y?at(y,I,{enumerable:!0,configurable:!0,writable:!0,value:P}):y[I]=P;var w=(y,I,P)=>lt(y,typeof I!="symbol"?I+"":I,P);function I(s){const t=getComputedStyle(s),i=s.getBoundingClientRect();return{objectFit:t.objectFit,borderRadius:t.borderRadius,objectPosition:t.objectPosition,overflow:t.overflow,top:i.top,left:i.left,width:i.width,height:i.height,naturalWidth:s.naturalWidth,naturalHeight:s.naturalHeight}}let P=null;function U(){return P||(window.trustedTypes||(window.trustedTypes={createPolicy:(s,t)=>t}),P=window.trustedTypes.createPolicy("vistaView-policy",{createHTML:s=>s,createScript:()=>{throw new Error("Not implemented")},createScriptURL:()=>{throw new Error("Not implemented")}}),P)}function q(s){const i=U().createHTML(s),n=document.createElement("template");n.innerHTML=i;const e=n.content;return n.remove(),e}function k(s){return s&&!/^0(px|%|r?em|vw|vh|vmin|vmax|cm|mm|in|pt|pc|ex|ch)?$/i.test(s.trim())&&s}function j(s){const i=window.getComputedStyle(s).objectFit||"",{width:n,height:e}=s.getBoundingClientRect(),r=s.naturalWidth,d=s.naturalHeight;if(!i)return{width:n,height:e};if(!r||!d)return{width:n,height:e};const o=r/d,a=n/e;switch(i){case"fill":return{width:n,height:e};case"none":return{width:r,height:d};case"contain":return o>a?{width:n,height:n/o}:{width:e*o,height:e};case"cover":return o<a?{width:n,height:n/o}:{width:e*o,height:e};case"scale-down":{const h={width:r,height:d},l=o>a?{width:n,height:n/o}:{width:e*o,height:e};return l.width<=h.width&&l.height<=h.height?l:h}}return{width:n,height:e}}function W(s){const t=window.innerWidth,i=window.innerHeight,n=s.naturalWidth,e=s.naturalHeight;if(!n||!e)throw console.error("Error",s),new Error("Image natural dimensions are zero");if(n<t&&e<i)return{width:n,height:e};const r=n/e,d=t/i;let o,a;return r>d?(o=t,a=t/r):(a=i,o=i*r),{width:o,height:a}}function O(s,t){const i=window.innerHeight,n=window.innerWidth,e=s,r=t,d=Math.max(0,(e-n)/2)+n/2,o=Math.max(0,(r-i)/2)+i/2,a=-d,h=-o;return{maxDiffX:d,minDiffY:h,maxDiffY:o,minDiffX:a}}const K='<svg viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>',G='<svg viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>',J='<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="11" x2="11" y1="8" y2="14"/><line x1="8" x2="14" y1="11" y2="11"/></svg>',Q='<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="8" x2="14" y1="11" y2="11"/></svg>',tt='<svg viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>',et='<svg viewBox="0 0 24 24"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>';function V(){return{name:"download",icon:et,onClick:async s=>{var r;const t=await fetch(s.src),i=await t.blob(),n=t.url,e=document.createElement("a");e.href=URL.createObjectURL(i),e.download=((r=n.split("/").pop())==null?void 0:r.split("?")[0].split("#")[0])||"download",document.body.appendChild(e),e.click(),document.body.removeChild(e)}}}function it(s){if(typeof s=="string")switch(s){case"zoomIn":return`<button class="vistaview-zoom-in-btn">${J}</button>`;case"zoomOut":return`<button disabled class="vistaview-zoom-out-btn">${Q}</button>`;case"close":return`<button class="vistaview-close-btn">${tt}</button>`;case"indexDisplay":return'<div class="vistaview-index-display"></div>';case"description":return'<div class="vistaview-description"></div>';default:return""}return`<button data-vistaview-custom-control="${s.name}">${s.icon}</button>`}function X(s,t){var l,c;const i=s.imageElm?getComputedStyle(s.imageElm):null,n=(i==null?void 0:i.objectFit)||"",e=((l=s.imageElm)==null?void 0:l.naturalWidth)||"",r=((c=s.imageElm)==null?void 0:c.naturalHeight)||"",d=(i==null?void 0:i.width)||"",o=(i==null?void 0:i.height)||"",a=document.createElement("div");a.className="vistaview-item",a.dataset.vistaviewPos=`${t!==void 0?t:""}`,a.dataset.vistaviewIndex=s.index.toString();const h=q(`<img class="vistaview-image-lowres"
2
2
  style="${n?`object-fit:${n};`:""}${d?`width:${d};`:""}${o?`height:${o};`:""}"
3
3
  src="${s.thumb||s.src}"
4
4
  alt="${s.alt||""}"
5
5
  ${e?`width="${e}"`:""}
6
- ${a?`height="${a}"`:""}
6
+ ${r?`height="${r}"`:""}
7
7
  />
8
- <img class="vistaview-image-highres" src="${s.src}" alt="${s.alt||""}" />`);return l.appendChild(h),l}function nt({controls:s,isReducedMotion:t}){const i=e=>e?e.map(it).join(""):"";return q(`<div class="vistaview-root${t?" vistaview--reduced-motion":""}" id="vistaview-root">
8
+ <img class="vistaview-image-highres" src="${s.src}" alt="${s.alt||""}" />`);return a.appendChild(h),a}function nt({controls:s,isReducedMotion:t}){const i=e=>e?e.map(it).join(""):"";return q(`<div class="vistaview-root${t?" vistaview--reduced-motion":""}" id="vistaview-root">
9
9
  <div class="vistaview-container">
10
10
  <div class="vistaview-image-container"></div>
11
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>
@@ -13,4 +13,4 @@
13
13
  <div class="vistaview-prev-btn vistaview-ui"><button>${K}</button></div>
14
14
  <div class="vistaview-next-btn vistaview-ui"><button>${G}</button></div>
15
15
  </div>
16
- </div>`)}let $=null,M=null,Z=null,z=null;function Y(s){R(s);const t=s.imageContainerElm,i=s.elements.length;if(!t)return;let n=0,e=0,a=0,d=0,o=null,l=0,h=!1;$=r=>{r.preventDefault(),r.stopPropagation(),s.isZoomed===!1&&(h=!0,n=r.pageX,e=r.pageY,a=r.pageX,d=r.pageY,l=Date.now(),o=null,t.setPointerCapture(r.pointerId))},M=r=>{if(r.preventDefault(),r.stopPropagation(),s.isZoomed!==!1||!h)return;const c=r.pageX-n,m=r.pageY-e;a=r.pageX,d=r.pageY,Math.abs(c)>=Math.abs(m)&&(o===null||o===!0)?(t.style.setProperty("--vistaview-pointer-diff-x",`${c}px`),o=!0):Math.abs(m)>Math.abs(c)&&(o===null||o===!1)&&(t.style.setProperty("--vistaview-pointer-diff-y",`${m}px`),o=!1)},z=r=>{if(r.preventDefault(),r.stopPropagation(),t.releasePointerCapture(r.pointerId),s.isZoomed!==!1||!h)return;h=!1,o=null;const c=Array.from(t.querySelectorAll(".vistaview-item"));t.style.removeProperty("--vistaview-pointer-diff-x"),t.style.removeProperty("--vistaview-pointer-diff-y"),c.forEach(m=>{m.style.transition="",m.style.translate=""})},Z=r=>{if(r.preventDefault(),r.stopPropagation(),t.releasePointerCapture(r.pointerId),s.isZoomed!==!1||!h)return;h=!1;const c=Array.from(t.querySelectorAll(".vistaview-item")),m=a-n,f=d-e,u=Date.now()-l,v=m/u,E=f/u,p=s.options.touchSpeedThreshold||.5,x=c.find(b=>b.dataset.vistaviewPos==="0"),L=Number(x.dataset.vistaviewIndex);function g(){c[0].removeEventListener("transitionend",g),t.style.removeProperty("--vistaview-pointer-diff-x"),t.style.removeProperty("--vistaview-pointer-diff-y"),c.forEach(b=>{b.style.transition="",b.style.translate=""})}function C(b="0%",S="0%"){c.forEach(T=>{T.style.transition=`translate ${s.options.animationDurationBase*.5}ms ease-out`,T.style.translate=`${b} ${S}`})}if(v<-p||v>p){let b=function(){c[0].removeEventListener("transitionend",b),setTimeout(()=>{const S=s.isReducedMotion;s.isReducedMotion=!0,g(),s.view(v<-p?(L+1)%i:(L-1+i)%i,{next:v<-p,prev:v>p}),s.isReducedMotion=S},100)};C(v<-p?"-100%":"100%"),c[0].addEventListener("transitionend",b)}else E<-p||E>p?(s.close(),C("0%","0%")):(c[0].addEventListener("transitionend",g),C("0%"))},t.addEventListener("pointermove",M),t.addEventListener("pointerup",Z),t.addEventListener("pointerdown",$),t.addEventListener("pointercancel",z)}function R(s){const t=s.imageContainerElm;t&&(M&&t.removeEventListener("pointermove",M),Z&&t.removeEventListener("pointerup",Z),$&&t.removeEventListener("pointerdown",$),z&&t.removeEventListener("pointercancel",z))}const B=s=>{Y(s)},_=({htmlElements:{to:s},index:{to:t},elements:i})=>{i instanceof NodeList&&t!==null&&(i.forEach(n=>n.style.opacity="1"),i[t].style.opacity="0"),s&&s.forEach(n=>{const e=Number(n.dataset.vistaviewPos);e!==0?(n.style.zIndex="1",n.style.left=100*e+"%"):n.style.zIndex="2"})},F=async({htmlElements:{from:s,to:t},images:{to:i},via:{next:n,prev:e},options:a,isReducedMotion:d},o)=>{if(!i)throw new Error("VistaView: images is null in defaultTransition()");const l=s.filter(h=>h.dataset.vistaviewPos==="0"||(n?h.dataset.vistaviewPos==="1":h.dataset.vistaviewPos==="-1"));d||await new Promise((h,r)=>{let c=0;if(o.aborted){r(new P("Transition aborted"));return}const m=f=>{if(o.aborted){r(new P("Transition aborted"));return}if(f.currentTarget.removeEventListener("transitionend",m),c++,c<l.length)return;const u=t==null?void 0:t.find(g=>g.dataset.vistaviewPos==="0"),v=u?Number(u.dataset.vistaviewIndex):0,E=l.find(g=>Number(g.dataset.vistaviewIndex)===v),p=E==null?void 0:E.querySelector(".vistaview-image-highres");if(!p){r(new Error("current image element not found"));return}if(!p.classList.contains("vistaview-image-loaded")){h(0);return}if(u==null||u.classList.add("vistaview-image-loaded"),p.classList.contains("vistaview-image-settled")){u==null||u.classList.add("vistaview-image-settled"),h(0);return}let x=0;const L=setInterval(()=>{if(o.aborted){clearInterval(L),r(new P("Transition aborted"));return}if(x++,x>a.animationDurationBase/20*1.5){clearInterval(L),h(0);return}p.classList.contains("vistaview-image-settled")&&(u==null||u.classList.add("vistaview-image-settled"),clearInterval(L),h(0))},20)};l.forEach(f=>{f.style.transition=`translate ${a.animationDurationBase*.5}ms ease-out`,f.style.translate=n?"-100%":e?"100%":"0%",f.addEventListener("transitionend",m)})})},N=s=>{s.elements instanceof NodeList&&s.elements.forEach(t=>t.style.opacity="1"),R(s)};class P extends Error{constructor(t){super(t),this.name="VistaViewTransitionAbortedError"}}const H={detectReducedMotion:!0,animationDurationBase:333,zoomStep:500,maxZoomLevel:2,touchSpeedThreshold:.5,preloads:1,keyboardListeners:!0,arrowOnSmallScreens:!1,controls:{topLeft:["indexDisplay"],topRight:["zoomIn","zoomOut",V(),"close"],bottomCenter:["description"]}},D={somethingOpened:null};class st{constructor(t,i){w(this,"options");w(this,"elements");w(this,"isReducedMotion");w(this,"currentIndex",{_value:null,_vistaView:null,_via:{next:!1,prev:!1},set value(t){var n;const i=this._value;this._value=t,(n=this._vistaView)==null||n.swap(i,this._value)},get value(){return this._value},get via(){return this._via},set via(t){this._via=t}});w(this,"rootElm",null);w(this,"imageContainerElm",null);w(this,"customControls",{});w(this,"currentImages",null);w(this,"currentItems",null);w(this,"navActive",!0);w(this,"isZoomed",!1);w(this,"onClickElements",t=>{t.preventDefault();const i=t.currentTarget;i.dataset.vistaviewIndex&&this.open(parseInt(i.dataset.vistaviewIndex))});w(this,"defaultOnClickHandler",t=>t.preventDefault());w(this,"onResizeHandler",null);w(this,"onKeyDown",null);w(this,"userSetup",_);w(this,"userTransition",F);w(this,"userClose",N);w(this,"userInit",B);w(this,"onZoomedPointerDown",null);w(this,"onZoomedPointerMove",null);w(this,"onZoomedPointerUp",null);w(this,"transitionAbortController",null);this.elements=t,this.currentIndex._vistaView=this,this.options={...H,...i||{},controls:{...H.controls,...(i==null?void 0:i.controls)||{}}},this.options.initFunction&&(this.userInit=this.options.initFunction),this.options.transitionFunction&&(this.userTransition=this.options.transitionFunction),this.options.closeFunction&&(this.userClose=this.options.closeFunction),this.options.initFunction&&(this.userInit=this.options.initFunction),this.isReducedMotion=window.matchMedia("(prefers-reduced-motion: reduce)").matches,this.elements instanceof NodeList&&this.elements.forEach((n,e)=>{n.dataset.vistaviewIndex=e.toString(),n.addEventListener("click",this.defaultOnClickHandler),n.addEventListener("pointerup",this.onClickElements)})}async swap(t,i){var l,h;if(!D.somethingOpened||t===i||t===null)return;if(this.transitionAbortController&&this.transitionAbortController.abort(),!this.imageContainerElm)throw new Error("VistaView: imageContainerElm is null in swap()");this.setIndexDisplay(),this.clearZoom();const{images:n,positions:e}=this.getCurrentIndexes(i),a=this.getImages(n),d=a.map((r,c)=>X(r,e[c])),o={htmlElements:{from:this.currentItems,to:d},images:{from:this.currentImages,to:a},index:{from:t,to:i},via:this.currentIndex.via,container:this.imageContainerElm,elements:this.elements,isReducedMotion:this.isReducedMotion,navActive:this.navActive,isZoomed:this.isZoomed,options:this.options};this.userSetup(o),this.transitionAbortController=new AbortController;try{await this.userTransition(o,this.transitionAbortController.signal)}catch(r){r instanceof P||console.error(r)}this.imageContainerElm.innerHTML="",d.forEach(r=>{const c=r.dataset.vistaviewPos,m=r.dataset.vistaviewIndex;if(c==="0"){const f=this.currentItems.find(E=>E.dataset.vistaviewIndex===m),u=r.querySelector(".vistaview-image-highres"),v=f==null?void 0:f.querySelector(".vistaview-image-highres");v&&(u.setAttribute("class",v.getAttribute("class")||""),u.setAttribute("style",v.getAttribute("style")||"")),this.imageContainerElm.appendChild(r)}else this.imageContainerElm.appendChild(r)}),this.setInitialDimPos(),this.currentImages=a,this.currentItems=d,this.loadImages(),this.setCurrentDescription(),this.updateZoomButtonsVisibility(),(h=(l=this.options).onImageView)==null||h.call(l,o)}setZoomed(t){var i,n,e,a,d,o;if(this.isZoomed!==t){if(this.isZoomed){let l=this.isZoomed;if(l.classList.remove("vistaview-image--zooming"),this.onZoomedPointerDown&&((i=l.parentElement)==null||i.removeEventListener("pointerdown",this.onZoomedPointerDown),this.onZoomedPointerDown=null),this.onZoomedPointerMove&&((n=l.parentElement)==null||n.removeEventListener("pointermove",this.onZoomedPointerMove),this.onZoomedPointerMove=null),this.onZoomedPointerUp&&((e=l.parentElement)==null||e.removeEventListener("pointerup",this.onZoomedPointerUp),this.onZoomedPointerUp=null),l==null||l.style.removeProperty("--pointer-diff-x"),l==null||l.style.removeProperty("--pointer-diff-y"),setTimeout(()=>{l==null||l.classList.remove("vistaview-image--zooming")},500),this.isZoomed=!1,!t)return}if(t){this.isZoomed=t,t.classList.add("vistaview-image--zooming"),t==null||t.style.setProperty("--pointer-diff-x","0px"),t==null||t.style.setProperty("--pointer-diff-y","0px");let l=!1,h=0,r=0,c=0,m=0,f=0,u=0;this.onZoomedPointerDown=v=>{v.preventDefault(),v.stopPropagation(),l=!0,h=v.pageX,r=v.pageY,t.setPointerCapture(v.pointerId)},this.onZoomedPointerMove=v=>{if(!l)return;v.preventDefault(),f=v.pageX-h,u=v.pageY-r;const E=parseInt((t==null?void 0:t.dataset.vistaviewCurrentWidth)||"0"),p=parseInt((t==null?void 0:t.dataset.vistaviewCurrentHeight)||"0"),{maxDiffX:x,minDiffY:L,maxDiffY:g,minDiffX:C}=O(E,p),b=Math.min(x,Math.max(C,c+f)),S=Math.min(g,Math.max(L,m+u));f=b-c,u=S-m,t==null||t.style.setProperty("--pointer-diff-x",`${b}px`),t==null||t.style.setProperty("--pointer-diff-y",`${S}px`)},this.onZoomedPointerUp=v=>{l=!1,t.releasePointerCapture(v.pointerId),c+=f,m+=u,f=0,u=0},(a=t==null?void 0:t.parentElement)==null||a.addEventListener("pointerdown",this.onZoomedPointerDown),(d=t==null?void 0:t.parentElement)==null||d.addEventListener("pointermove",this.onZoomedPointerMove),(o=t==null?void 0:t.parentElement)==null||o.addEventListener("pointerup",this.onZoomedPointerUp);return}}}zoomIn(){var a,d,o,l,h;const t=(a=this.rootElm)==null?void 0:a.querySelector('[data-vistaview-pos="0"] .vistaview-image-highres'),i=t.width,n=t.height;t.dataset.vistaviewInitialWidth||(t.dataset.vistaviewInitialWidth=i.toString()),t.dataset.vistaviewInitialHeight||(t.dataset.vistaviewInitialHeight=n.toString()),this.setZoomed(t);const e=(t.naturalWidth||0)*this.options.maxZoomLevel;if(i&&e&&i<e){const r=Math.min(i+this.options.zoomStep,e);t.style.width=`${r}px`;const c=r/i*n;t.style.height=`${c}px`,(o=(d=this.rootElm)==null?void 0:d.querySelector("button.vistaview-zoom-out-btn"))==null||o.removeAttribute("disabled"),t.dataset.vistaviewCurrentWidth=r.toString(),t.dataset.vistaviewCurrentHeight=c.toString(),r===e&&((h=(l=this.rootElm)==null?void 0:l.querySelector("button.vistaview-zoom-in-btn"))==null||h.setAttribute("disabled","true"))}}zoomOut(){var d,o,l,h,r;const t=(d=this.rootElm)==null?void 0:d.querySelector('[data-vistaview-pos="0"] .vistaview-image-highres'),i=t.width,n=t.height,e=t.dataset.vistaviewInitialWidth?parseInt(t.dataset.vistaviewInitialWidth):0,a=c=>{c.target===t&&(t.classList.remove("vistaview-image--zooming-out"),t.removeEventListener("transitionend",a))};if(t.addEventListener("transitionend",a),t.classList.add("vistaview-image--zooming-out"),i&&e&&i>e){const c=Math.max(i-this.options.zoomStep,e);t.style.width=`${c}px`;const m=c/i*n;t.style.height=`${m}px`,(l=(o=this.rootElm)==null?void 0:o.querySelector("button.vistaview-zoom-in-btn"))==null||l.removeAttribute("disabled"),t.dataset.vistaviewCurrentWidth=c.toString(),t.dataset.vistaviewCurrentHeight=m.toString();const{maxDiffX:f,minDiffY:u,maxDiffY:v,minDiffX:E}=O(c,m);let p=parseInt((t==null?void 0:t.style.getPropertyValue("--pointer-diff-x").replace("px",""))||"0"),x=parseInt((t==null?void 0:t.style.getPropertyValue("--pointer-diff-y").replace("px",""))||"0");p=Math.min(f,Math.max(E,p)),x=Math.min(v,Math.max(u,x)),t==null||t.style.setProperty("--pointer-diff-x",`${p}px`),t==null||t.style.setProperty("--pointer-diff-y",`${x}px`),c===e&&((r=(h=this.rootElm)==null?void 0:h.querySelector("button.vistaview-zoom-out-btn"))==null||r.setAttribute("disabled","true"),t.removeAttribute("data-vistaview-current-width"),t.removeAttribute("data-vistaview-current-height"),t.removeAttribute("data-vistaview-initial-width"),t.removeAttribute("data-vistaview-initial-height"),this.setZoomed(!1))}}clearZoom(){}getImages(t){return t.map((i,n)=>{const e=this.elements[i];if(e instanceof HTMLElement){const a=e.querySelector("img"),d=e.getAttribute("href")||"",o=e.getAttribute("src")||"",l=e.dataset.vistaviewSrc||d||o||(a==null?void 0:a.src)||"",h=e.dataset.vistaviewAlt||e.getAttribute("alt")||(a==null?void 0:a.alt)||"",r=e.dataset.vistaviewThumb||(a==null?void 0:a.src)||d||o||"";return{index:t[n],src:l,alt:h,thumb:r,imageElm:e instanceof HTMLImageElement?e:a,anchorElm:e instanceof HTMLAnchorElement?e:void 0}}else return{index:t[n],...e}})}setInitialDimPos(){var h,r;if(!this.rootElm)return;const t=(h=this.rootElm.querySelector('[data-vistaview-pos="0"]'))==null?void 0:h.dataset.vistaviewIndex,i=((r=this.currentImages)==null?void 0:r.find(c=>c.index===Number(t)))||null;if(!i)return;const n=i.imageElm?I(i.imageElm):void 0,e=i.anchorElm?I(i.anchorElm):void 0,a=(e==null?void 0:e.width)||(n==null?void 0:n.width)||0,d=(e==null?void 0:e.height)||(n==null?void 0:n.height)||0,o=((e==null?void 0:e.left)||(n==null?void 0:n.left)||0)+a/2,l=((e==null?void 0:e.top)||(n==null?void 0:n.top)||0)+d/2;this.rootElm.style.setProperty("--vistaview-container-initial-width",a+"px"),this.rootElm.style.setProperty("--vistaview-container-initial-height",d+"px"),this.rootElm.style.setProperty("--vistaview-container-initial-top",l+"px"),this.rootElm.style.setProperty("--vistaview-container-initial-left",o+"px"),this.rootElm.style.setProperty("--vistaview-image-border-radius",k(e==null?void 0:e.borderRadius)||k(n==null?void 0:n.borderRadius)||"0px")}updateZoomButtonsVisibility(){var e;const t=(e=this.rootElm)==null?void 0:e.querySelector('[data-vistaview-pos="0"] img.vistaview-image-highres');if(!t)return;const i=this;function n(){var r,c;const a=(r=i.rootElm)==null?void 0:r.querySelector("button.vistaview-zoom-in-btn"),d=(c=i.rootElm)==null?void 0:c.querySelector("button.vistaview-zoom-out-btn"),o=parseInt(t.style.width)||t.width,l=t.naturalWidth*i.options.maxZoomLevel,h=o<l&&l>0;a&&(a.style.display=h?"":"none"),d&&(d.style.display=h?"":"none")}t.complete&&t.naturalWidth>0?n():t.addEventListener("load",n)}loadImages(){if(!this.rootElm)return;this.rootElm.querySelectorAll(".vistaview-image-highres:not(.vistaview-image-loaded)").forEach((i,n)=>{const e=i,d=this.currentImages[n].imageElm,o={w:0,h:0};if(d){const{width:h,height:r}=j(d);o.w=Math.min(d.width,h),o.h=Math.min(d.height,r)}const l=()=>{var r;const h=()=>{var c;o.w&&o.h&&(e.style.width=`${o.w}px`,e.style.height=`${o.h}px`,e.style.setProperty("--vistaview-fitted-width",`${o.w}px`),e.style.setProperty("--vistaview-fitted-height",`${o.h}px`)),e.classList.add("vistaview-image-loaded"),e.width=e.naturalWidth,e.height=e.naturalHeight,setTimeout(()=>{var E,p;let m=0;const f=()=>{var x,L;m++,!(m<3)&&(e.removeEventListener("transitionend",f),(L=(x=e.parentElement)==null?void 0:x.querySelector(".vistaview-image-lowres"))==null||L.classList.add("vistaview-image--hidden"),e.classList.add("vistaview-image-settled"))};e.addEventListener("transitionend",f);const{width:u,height:v}=W(e);e.style.width=`${u}px`,e.style.height=`${v}px`,o.w&&o.h&&u===o.w&&v===o.h?((p=(E=e.parentElement)==null?void 0:E.querySelector(".vistaview-image-lowres"))==null||p.classList.add("vistaview-image--hidden"),e.classList.add("vistaview-image-settled")):(e.style.width=`${u}px`,e.style.height=`${v}px`)},100),(c=i.parentElement)!=null&&c.matches('[data-vistaview-pos="0"]')&&this.updateZoomButtonsVisibility()};if((r=this.rootElm)!=null&&r.classList.contains("vistaview--opened"))h();else{const c=setInterval(()=>{var m;(m=this.rootElm)!=null&&m.classList.contains("vistaview--opened")&&(clearInterval(c),h())},50)}};e.complete&&e.naturalWidth>0?l():e.onload=l})}setIndexDisplay(){this.elements.length!==1&&(this.rootElm.querySelector(".vistaview-index-display").textContent=`${this.currentIndex.value+1} / ${this.elements.length}`)}setCurrentDescription(){this.rootElm.querySelector(".vistaview-description").textContent=(this.currentImages[1]||this.currentImages[0]).alt||""}getCurrentIndexes(t){const i=this.options.preloads,n=this.elements.length,e=n<1||!i?[t]:[...new Set([...Array.from({length:i},(d,o)=>((t-i+o)%n+n)%n),t,...Array.from({length:i},(d,o)=>(t+1+o)%n)])],a=n<1||!i?[0]:e.map((d,o)=>o-Math.floor(e.length/2));return{images:e,positions:a}}setKeyboardListeners(){this.onKeyDown=t=>{switch(t.key){case"ArrowLeft":t.preventDefault(),this.prev();break;case"ArrowRight":t.preventDefault(),this.next();break;case"ArrowUp":t.preventDefault(),this.zoomIn();break;case"ArrowDown":t.preventDefault(),this.zoomOut();break;case"Escape":t.preventDefault(),this.close();break}},window.addEventListener("keydown",this.onKeyDown)}setResizeListeners(){this.onResizeHandler=()=>{var i;this.setInitialDimPos();const t=(i=this.rootElm)==null?void 0:i.querySelectorAll(".vistaview-image-highres.vistaview-image-loaded");t==null||t.forEach(n=>{const e=n,{width:a,height:d}=W(e);e.classList.contains("vistaview-image--zooming")?(e.dataset.vistaviewInitialWidth=a.toString(),e.dataset.vistaviewInitialHeight=d.toString()):(e.style.width=`${a}px`,e.style.height=`${d}px`)})},window.addEventListener("resize",this.onResizeHandler)}open(t=0){var o,l,h,r,c,m,f,u,v,E,p,x,L;if(D.somethingOpened){console.error("VistaView: another instance is already opened. Returning.");return}if(D.somethingOpened=this,this.currentIndex._value=t,document.body.prepend(nt({controls:this.options.controls,isReducedMotion:this.isReducedMotion})),this.rootElm=document.querySelector("#vistaview-root"),this.imageContainerElm=((o=this.rootElm)==null?void 0:o.querySelector(".vistaview-image-container"))||null,!this.rootElm||!this.imageContainerElm)throw D.somethingOpened=null,new Error("Failed to create VistaView element");this.options.arrowOnSmallScreens||this.rootElm.classList.add("vistaview-no-arrows-sm");const{images:i,positions:n}=this.getCurrentIndexes(t);this.currentImages=this.getImages(i);const e=this.currentImages.map((g,C)=>X(g,n[C]));this.currentItems=e;const a={htmlElements:{from:null,to:this.currentItems},images:{from:null,to:this.currentImages},index:{from:null,to:t},via:this.currentIndex.via,container:this.imageContainerElm,elements:this.elements,isReducedMotion:this.isReducedMotion,navActive:this.navActive,isZoomed:this.isZoomed,options:this.options};this.userSetup(a),this.imageContainerElm.innerHTML="",this.currentItems.forEach(g=>{this.imageContainerElm.appendChild(g)});let d=0;this.rootElm.addEventListener("animationend",g=>{var C;g.currentTarget===this.rootElm&&(d++,d>=2&&((C=this.rootElm)==null||C.classList.add("vistaview--opened")))}),(l=this.rootElm.querySelector(".vistaview-close-btn"))==null||l.addEventListener("click",()=>this.close()),(h=this.rootElm.querySelector(".vistaview-zoom-in-btn"))==null||h.addEventListener("click",()=>this.zoomIn()),(r=this.rootElm.querySelector(".vistaview-zoom-out-btn"))==null||r.addEventListener("click",()=>this.zoomOut()),(c=this.rootElm.querySelector(".vistaview-prev-btn>button"))==null||c.addEventListener("click",()=>this.prev()),(m=this.rootElm.querySelector(".vistaview-next-btn>button"))==null||m.addEventListener("click",()=>this.next()),[...this.options.controls.topLeft||[],...this.options.controls.topRight||[],...this.options.controls.topCenter||[],...this.options.controls.bottomCenter||[],...this.options.controls.bottomLeft||[],...this.options.controls.bottomRight||[]].forEach(g=>{typeof g!="string"&&(this.customControls[g.name]=g)}),this.rootElm.querySelectorAll("button[data-vistaview-custom-control]").forEach(g=>{g.addEventListener("click",C=>{const b=this.customControls[C.currentTarget.dataset.vistaviewCustomControl],S=this.currentImages.find(T=>T.index===this.currentIndex.value);b&&S&&(b.onClick.constructor.name==="AsyncFunction"?(g.classList.add("vistaview-button--loading"),b.onClick(S).finally(()=>{g.classList.remove("vistaview-button--loading")})):b.onClick(S))})}),this.options.animationDurationBase&&this.rootElm.style.setProperty("--vistaview-animation-duration",`${this.options.animationDurationBase}`),this.options.initialZIndex!==void 0&&this.rootElm.style.setProperty("--vistaview-initial-z-index",`${this.options.initialZIndex}`),this.setInitialDimPos(),this.setResizeListeners(),this.options.keyboardListeners&&this.setKeyboardListeners(),this.elements.length===1&&((f=this.rootElm.querySelector(".vistaview-prev-btn"))==null||f.classList.add("vistaview-ui--none"),(u=this.rootElm.querySelector(".vistaview-next-btn"))==null||u.classList.add("vistaview-ui--none"),(v=this.rootElm.querySelector(".vistaview-index-display"))==null||v.classList.add("vistaview-ui--none")),this.rootElm&&this.rootElm.classList.add("vistaview--initialized"),this.loadImages(),this.setCurrentDescription(),this.setIndexDisplay(),this.userInit(this),(p=(E=this.options).onOpen)==null||p.call(E,a),(L=(x=this.options).onImageView)==null||L.call(x,a)}async close(t=!0){var n,e,a;if(D.somethingOpened!==this)return;t&&((n=this.rootElm)==null||n.classList.add("vistaview--closing"),await new Promise(d=>{var l;let o;(l=this.rootElm)==null||l.addEventListener("transitionend",h=>{h.currentTarget===this.rootElm&&(o&&clearTimeout(o),o=setTimeout(()=>{d()},333))})}));const i={htmlElements:{from:this.currentItems,to:null},images:{from:this.currentImages,to:null},index:{from:this.currentIndex.value,to:null},container:this.imageContainerElm,elements:this.elements,via:{prev:!1,next:!1},isReducedMotion:this.isReducedMotion,navActive:this.navActive,isZoomed:this.isZoomed,options:this.options};this.userClose(this),(a=(e=this.options).onClose)==null||a.call(e,i),document.body.removeChild(this.rootElm),this.currentIndex._value=null,this.currentIndex._via={next:!1,prev:!1},this.rootElm=null,this.imageContainerElm=null,this.currentImages=null,this.currentItems=null,this.navActive=!0,this.onResizeHandler&&(window.removeEventListener("resize",this.onResizeHandler),this.onResizeHandler=null),this.onKeyDown&&(window.removeEventListener("keydown",this.onKeyDown),this.onKeyDown=null),(this.onZoomedPointerDown||this.onZoomedPointerMove||this.onZoomedPointerUp)&&(this.setZoomed(!1),this.onZoomedPointerDown=null,this.onZoomedPointerMove=null,this.onZoomedPointerUp=null),this.transitionAbortController&&(this.transitionAbortController.abort(),this.transitionAbortController=null),D.somethingOpened=null}destroy(){this.close(!1),this.elements instanceof NodeList&&this.elements.forEach(t=>{t.dataset.vistaviewIndex&&delete t.dataset.vistaviewIndex,t.removeEventListener("click",this.defaultOnClickHandler),t.removeEventListener("pointerup",this.onClickElements)})}view(t,i){D.somethingOpened===this&&this.navActive&&(t<0&&(t=this.elements.length-1),t>=this.elements.length&&(t=0),this.currentIndex.via=i||{next:!1,prev:!1},this.currentIndex.value=t)}next(){D.somethingOpened===this&&this.view(this.currentIndex.value+1,{next:!0,prev:!1})}prev(){D.somethingOpened===this&&this.view(this.currentIndex.value-1,{next:!1,prev:!0})}getCurrentIndex(){return D.somethingOpened===this?this.currentIndex.value:-1}}function ot(s){let t=null;if(typeof s=="string"?t=document.querySelectorAll(s):s instanceof NodeList&&(t=s),t)for(let i=0;i<t.length;i++){const n=t[i];if(!(n.dataset.vistaviewSrc||n.getAttribute("href")||n.getAttribute("src")||""))return`Element at index ${i} is missing 'src' / 'data-vistaview-src' / 'href' attribute.`}else{const i=s;for(let n=0;n<i.length;n++)if(!i[n].src)return`Element at index ${n} is missing 'src' attribute.`}return t||s}function rt({elements:s,...t}){if(!s)throw new Error("No elements");let i=ot(s);if(typeof i=="string")return console.error(i),console.warn("VistaView: silently returning."),null;const n=new st(i,t);return{open:(e=0)=>n.open(e),close:()=>n.close(),next:()=>n.next(),prev:()=>n.prev(),destroy:()=>n.destroy(),getCurrentIndex:()=>n.getCurrentIndex(),view:e=>{n.view(e)}}}y.DefaultOptions=H,y.VistaViewTransitionAbortedError=P,y.defaultClose=N,y.defaultInit=B,y.defaultSetup=_,y.defaultTransition=F,y.removeTouchActions=R,y.setTouchActions=Y,y.vistaView=rt,y.vistaViewDownload=V,Object.defineProperty(y,Symbol.toStringTag,{value:"Module"})}));
16
+ </div>`)}let M=null,$=null,Z=null,z=null;function Y(s){R(s);const t=s.imageContainerElm,i=s.elements.length;if(!t)return;let n=0,e=0,r=0,d=0,o=null,a=0,h=!1;M=l=>{l.preventDefault(),l.stopPropagation(),s.isZoomed===!1&&(h=!0,n=l.pageX,e=l.pageY,r=l.pageX,d=l.pageY,a=Date.now(),o=null,t.setPointerCapture(l.pointerId))},$=l=>{if(l.preventDefault(),l.stopPropagation(),s.isZoomed!==!1||!h)return;const c=l.pageX-n,v=l.pageY-e;r=l.pageX,d=l.pageY,Math.abs(c)>=Math.abs(v)&&(o===null||o===!0)?(t.style.setProperty("--vistaview-pointer-diff-x",`${c}px`),o=!0):Math.abs(v)>Math.abs(c)&&(o===null||o===!1)&&(t.style.setProperty("--vistaview-pointer-diff-y",`${v}px`),o=!1)},z=l=>{if(l.preventDefault(),l.stopPropagation(),t.releasePointerCapture(l.pointerId),s.isZoomed!==!1||!h)return;h=!1,o=null;const c=Array.from(t.querySelectorAll(".vistaview-item"));t.style.removeProperty("--vistaview-pointer-diff-x"),t.style.removeProperty("--vistaview-pointer-diff-y"),c.forEach(v=>{v.style.transition="",v.style.translate=""})},Z=l=>{if(l.preventDefault(),l.stopPropagation(),t.releasePointerCapture(l.pointerId),s.isZoomed!==!1||!h)return;h=!1;const c=Array.from(t.querySelectorAll(".vistaview-item")),v=r-n,m=d-e,f=Date.now()-a,u=v/f,E=m/f,p=s.options.touchSpeedThreshold||.5,x=c.find(b=>b.dataset.vistaviewPos==="0"),L=Number(x.dataset.vistaviewIndex);function g(){c[0].removeEventListener("transitionend",g),t.style.removeProperty("--vistaview-pointer-diff-x"),t.style.removeProperty("--vistaview-pointer-diff-y"),c.forEach(b=>{b.style.transition="",b.style.translate=""})}function C(b="0%",S="0%"){c.forEach(T=>{T.style.transition=`translate ${s.options.animationDurationBase*.5}ms ease-out`,T.style.translate=`${b} ${S}`})}if(u<-p||u>p){let b=function(){c[0].removeEventListener("transitionend",b),setTimeout(()=>{const S=s.isReducedMotion;s.isReducedMotion=!0,g(),s.view(u<-p?(L+1)%i:(L-1+i)%i,{next:u<-p,prev:u>p}),s.isReducedMotion=S},100)};C(u<-p?"-100%":"100%"),c[0].addEventListener("transitionend",b)}else E<-p||E>p?(s.close(),C("0%","0%")):(c[0].addEventListener("transitionend",g),C("0%"),u===0&&E===0&&s.zoomIn())},t.addEventListener("pointermove",$),t.addEventListener("pointerup",Z),t.addEventListener("pointerdown",M),t.addEventListener("pointercancel",z)}function R(s){const t=s.imageContainerElm;t&&($&&t.removeEventListener("pointermove",$),Z&&t.removeEventListener("pointerup",Z),M&&t.removeEventListener("pointerdown",M),z&&t.removeEventListener("pointercancel",z))}const _=s=>{Y(s)},B=({htmlElements:{to:s},index:{to:t},elements:i})=>{i instanceof NodeList&&t!==null&&(i.forEach(n=>n.style.opacity="1"),i[t].style.opacity="0"),s&&s.forEach(n=>{const e=Number(n.dataset.vistaviewPos);e!==0?(n.style.zIndex="1",n.style.left=100*e+"%"):n.style.zIndex="2"})},F=async({htmlElements:{from:s,to:t},images:{to:i},via:{next:n,prev:e},options:r,isReducedMotion:d},o)=>{if(!i)throw new Error("VistaView: images is null in defaultTransition()");if(d)return;const a=s.filter(h=>h.dataset.vistaviewPos==="0"||(n?h.dataset.vistaviewPos==="1":h.dataset.vistaviewPos==="-1"));await new Promise((h,l)=>{let c=0;if(o.aborted){l(new A("Transition aborted"));return}const v=m=>{if(o.aborted)return l(new A("Transition aborted"));if(m.currentTarget.removeEventListener("transitionend",v),c++,c<a.length)return;const f=t==null?void 0:t.find(g=>g.dataset.vistaviewPos==="0"),u=f?Number(f.dataset.vistaviewIndex):0,E=a.find(g=>Number(g.dataset.vistaviewIndex)===u),p=E==null?void 0:E.querySelector(".vistaview-image-highres");if(!p)return l(new Error("current image element not found"));if(!p.classList.contains("vistaview-image-loaded")||p.classList.contains("vistaview-image-settled"))return h(0);let x=0;const L=setInterval(()=>{if(o.aborted)return clearInterval(L),l(new A("Transition aborted"));if(x++,x>r.animationDurationBase/20*1.5)return clearInterval(L),h(0);if(p.classList.contains("vistaview-image-settled"))return f==null||f.classList.add("vistaview-image-settled"),clearInterval(L),h(0)},20)};a.forEach(m=>{m.style.transition=`translate ${r.animationDurationBase*.5}ms ease-out`,m.style.translate=n?"-100%":e?"100%":"0%",m.addEventListener("transitionend",v)})})},N=s=>{s.elements instanceof NodeList&&s.elements.forEach(t=>t.style.opacity="1"),R(s)};class A extends Error{constructor(t){super(t),this.name="VistaViewTransitionAbortedError"}}const H={detectReducedMotion:!0,animationDurationBase:333,zoomStep:500,maxZoomLevel:2,touchSpeedThreshold:.5,preloads:1,keyboardListeners:!0,arrowOnSmallScreens:!1,controls:{topLeft:["indexDisplay"],topRight:["zoomIn","zoomOut",V(),"close"],bottomCenter:["description"]}},D={somethingOpened:null};class st{constructor(t,i){w(this,"options");w(this,"elements");w(this,"isReducedMotion");w(this,"currentIndex",{_value:null,_vistaView:null,_via:{next:!1,prev:!1},set value(t){var n,e,r;const i=this._value;this._value=t;for(const d in(n=this._vistaView)==null?void 0:n.transitionAbortControllers)(e=this._vistaView)==null||e.transitionAbortControllers[d].abort();(r=this._vistaView)==null||r.swap(i,this._value)},get value(){return this._value},get via(){return this._via},set via(t){this._via=t}});w(this,"rootElm",null);w(this,"imageContainerElm",null);w(this,"customControls",{});w(this,"currentImages",null);w(this,"currentItems",null);w(this,"navActive",!0);w(this,"isZoomed",!1);w(this,"onClickElements",t=>{t.preventDefault();const i=t.currentTarget;i.dataset.vistaviewIndex&&this.open(parseInt(i.dataset.vistaviewIndex))});w(this,"defaultOnClickHandler",t=>t.preventDefault());w(this,"onResizeHandler",null);w(this,"onKeyDown",null);w(this,"userSetup",B);w(this,"userTransition",F);w(this,"userClose",N);w(this,"userInit",_);w(this,"onZoomedPointerDown",null);w(this,"onZoomedPointerMove",null);w(this,"onZoomedPointerUp",null);w(this,"transitionAbortControllers",{});w(this,"loadImageTimeout",null);this.elements=t,this.currentIndex._vistaView=this,this.options={...H,...i||{},controls:{...H.controls,...(i==null?void 0:i.controls)||{}}},this.options.initFunction&&(this.userInit=this.options.initFunction),this.options.transitionFunction&&(this.userTransition=this.options.transitionFunction),this.options.closeFunction&&(this.userClose=this.options.closeFunction),this.options.initFunction&&(this.userInit=this.options.initFunction),this.isReducedMotion=window.matchMedia("(prefers-reduced-motion: reduce)").matches,this.elements instanceof NodeList&&this.elements.forEach((n,e)=>{n.dataset.vistaviewIndex=e.toString(),n.addEventListener("click",this.defaultOnClickHandler),n.addEventListener("pointerup",this.onClickElements)})}async swap(t,i){var l,c;if(!D.somethingOpened||t===i||t===null)return;if(!this.imageContainerElm)throw new Error("VistaView: imageContainerElm is null in swap()");this.setIndexDisplay(),this.clearZoom();const{images:n,positions:e}=this.getCurrentIndexes(i),r=this.getImages(n),d=r.map((v,m)=>X(v,e[m])),o={htmlElements:{from:this.currentItems,to:d},images:{from:this.currentImages,to:r},index:{from:t,to:i},via:this.currentIndex.via,container:this.imageContainerElm,elements:this.elements,isReducedMotion:this.isReducedMotion,navActive:this.navActive,isZoomed:this.isZoomed,options:this.options};this.userSetup(o);const a=Math.random().toString(36).substring(2,15)+Math.random().toString(36).substring(2,15);this.transitionAbortControllers[a]=new AbortController;try{await this.userTransition(o,this.transitionAbortControllers[a].signal)}catch(v){v instanceof A||console.warn(v)}delete this.transitionAbortControllers[a];const h=d.find(v=>v.dataset.vistaviewPos==="0");if(h){const v=h.dataset.vistaviewIndex,m=this.currentItems.find(u=>u.dataset.vistaviewIndex===v),f=m==null?void 0:m.querySelector(".vistaview-image-highres");if(f){const u=h.querySelector(".vistaview-image-highres");u.setAttribute("class",f.getAttribute("class")||""),u.setAttribute("style",f.getAttribute("style")||""),u.classList.remove("vistaview-image--zooming"),u.classList.remove("vistaview-image-settled")}}this.imageContainerElm.innerHTML="",d.forEach(v=>{this.imageContainerElm.appendChild(v)}),this.setInitialDimPos(),this.currentImages=r,this.currentItems=d,this.setCurrentDescription(),this.updateZoomButtonsVisibility(),(c=(l=this.options).onImageView)==null||c.call(l,o),this.loadImageTimeout&&clearTimeout(this.loadImageTimeout),this.loadImageTimeout=setTimeout(()=>{this.loadImages()},333)}setZoomed(t){var i,n,e,r,d,o;if(this.isZoomed!==t){if(this.isZoomed){let a=this.isZoomed;if(a.classList.remove("vistaview-image--zooming"),this.onZoomedPointerDown&&((i=a.parentElement)==null||i.removeEventListener("pointerdown",this.onZoomedPointerDown),this.onZoomedPointerDown=null),this.onZoomedPointerMove&&((n=a.parentElement)==null||n.removeEventListener("pointermove",this.onZoomedPointerMove),this.onZoomedPointerMove=null),this.onZoomedPointerUp&&((e=a.parentElement)==null||e.removeEventListener("pointerup",this.onZoomedPointerUp),this.onZoomedPointerUp=null),a==null||a.style.removeProperty("--pointer-diff-x"),a==null||a.style.removeProperty("--pointer-diff-y"),setTimeout(()=>{a==null||a.classList.remove("vistaview-image--zooming")},500),this.isZoomed=!1,!t)return}if(t){this.isZoomed=t,t.classList.add("vistaview-image--zooming"),t==null||t.style.setProperty("--pointer-diff-x","0px"),t==null||t.style.setProperty("--pointer-diff-y","0px");let a=!1,h=0,l=0,c=0,v=0,m=0,f=0;this.onZoomedPointerDown=u=>{u.preventDefault(),u.stopPropagation(),a=!0,h=u.pageX,l=u.pageY,t.setPointerCapture(u.pointerId)},this.onZoomedPointerMove=u=>{if(!a)return;u.preventDefault(),m=u.pageX-h,f=u.pageY-l;const E=parseInt((t==null?void 0:t.dataset.vistaviewCurrentWidth)||"0"),p=parseInt((t==null?void 0:t.dataset.vistaviewCurrentHeight)||"0"),{maxDiffX:x,minDiffY:L,maxDiffY:g,minDiffX:C}=O(E,p),b=Math.min(x,Math.max(C,c+m)),S=Math.min(g,Math.max(L,v+f));m=b-c,f=S-v,t==null||t.style.setProperty("--pointer-diff-x",`${b}px`),t==null||t.style.setProperty("--pointer-diff-y",`${S}px`)},this.onZoomedPointerUp=u=>{a=!1,t.releasePointerCapture(u.pointerId),c+=m,v+=f,m=0,f=0},(r=t==null?void 0:t.parentElement)==null||r.addEventListener("pointerdown",this.onZoomedPointerDown),(d=t==null?void 0:t.parentElement)==null||d.addEventListener("pointermove",this.onZoomedPointerMove),(o=t==null?void 0:t.parentElement)==null||o.addEventListener("pointerup",this.onZoomedPointerUp);return}}}zoomIn(){var r,d,o,a,h;const t=(r=this.rootElm)==null?void 0:r.querySelector('[data-vistaview-pos="0"] .vistaview-image-highres'),i=t.width,n=t.height;t.dataset.vistaviewInitialWidth||(t.dataset.vistaviewInitialWidth=i.toString()),t.dataset.vistaviewInitialHeight||(t.dataset.vistaviewInitialHeight=n.toString()),this.setZoomed(t);const e=(t.naturalWidth||0)*this.options.maxZoomLevel;if(i&&e&&i<e){const l=Math.min(i+this.options.zoomStep,e);t.style.width=`${l}px`;const c=l/i*n;t.style.height=`${c}px`,(o=(d=this.rootElm)==null?void 0:d.querySelector("button.vistaview-zoom-out-btn"))==null||o.removeAttribute("disabled"),t.dataset.vistaviewCurrentWidth=l.toString(),t.dataset.vistaviewCurrentHeight=c.toString(),l===e&&((h=(a=this.rootElm)==null?void 0:a.querySelector("button.vistaview-zoom-in-btn"))==null||h.setAttribute("disabled","true"))}}zoomOut(){var d,o,a,h,l;const t=(d=this.rootElm)==null?void 0:d.querySelector('[data-vistaview-pos="0"] .vistaview-image-highres'),i=t.width,n=t.height,e=t.dataset.vistaviewInitialWidth?parseInt(t.dataset.vistaviewInitialWidth):0,r=c=>{c.target===t&&(t.classList.remove("vistaview-image--zooming-out"),t.removeEventListener("transitionend",r))};if(t.addEventListener("transitionend",r),t.classList.add("vistaview-image--zooming-out"),i&&e&&i>e){const c=Math.max(i-this.options.zoomStep,e);t.style.width=`${c}px`;const v=c/i*n;t.style.height=`${v}px`,(a=(o=this.rootElm)==null?void 0:o.querySelector("button.vistaview-zoom-in-btn"))==null||a.removeAttribute("disabled"),t.dataset.vistaviewCurrentWidth=c.toString(),t.dataset.vistaviewCurrentHeight=v.toString();const{maxDiffX:m,minDiffY:f,maxDiffY:u,minDiffX:E}=O(c,v);let p=parseInt((t==null?void 0:t.style.getPropertyValue("--pointer-diff-x").replace("px",""))||"0"),x=parseInt((t==null?void 0:t.style.getPropertyValue("--pointer-diff-y").replace("px",""))||"0");p=Math.min(m,Math.max(E,p)),x=Math.min(u,Math.max(f,x)),t==null||t.style.setProperty("--pointer-diff-x",`${p}px`),t==null||t.style.setProperty("--pointer-diff-y",`${x}px`),c===e&&((l=(h=this.rootElm)==null?void 0:h.querySelector("button.vistaview-zoom-out-btn"))==null||l.setAttribute("disabled","true"),t.removeAttribute("data-vistaview-current-width"),t.removeAttribute("data-vistaview-current-height"),t.removeAttribute("data-vistaview-initial-width"),t.removeAttribute("data-vistaview-initial-height"),this.setZoomed(!1))}}clearZoom(){}getImages(t){return t.map((i,n)=>{const e=this.elements[i];if(e instanceof HTMLElement){const r=e.querySelector("img"),d=e.getAttribute("href")||"",o=e.getAttribute("src")||"",a=e.dataset.vistaviewSrc||d||o||(r==null?void 0:r.src)||"",h=e.dataset.vistaviewAlt||e.getAttribute("alt")||(r==null?void 0:r.alt)||"",l=e.dataset.vistaviewThumb||(r==null?void 0:r.src)||d||o||"";return{index:t[n],src:a,alt:h,thumb:l,imageElm:e instanceof HTMLImageElement?e:r,anchorElm:e instanceof HTMLAnchorElement?e:void 0}}else return{index:t[n],...e}})}setInitialDimPos(){var h,l;if(!this.rootElm)return;const t=(h=this.rootElm.querySelector('[data-vistaview-pos="0"]'))==null?void 0:h.dataset.vistaviewIndex,i=((l=this.currentImages)==null?void 0:l.find(c=>c.index===Number(t)))||null;if(!i)return;const n=i.imageElm?I(i.imageElm):void 0,e=i.anchorElm?I(i.anchorElm):void 0,r=(e==null?void 0:e.width)||(n==null?void 0:n.width)||0,d=(e==null?void 0:e.height)||(n==null?void 0:n.height)||0,o=((e==null?void 0:e.left)||(n==null?void 0:n.left)||0)+r/2,a=((e==null?void 0:e.top)||(n==null?void 0:n.top)||0)+d/2;this.rootElm.style.setProperty("--vistaview-container-initial-width",r+"px"),this.rootElm.style.setProperty("--vistaview-container-initial-height",d+"px"),this.rootElm.style.setProperty("--vistaview-container-initial-top",a+"px"),this.rootElm.style.setProperty("--vistaview-container-initial-left",o+"px"),this.rootElm.style.setProperty("--vistaview-image-border-radius",k(e==null?void 0:e.borderRadius)||k(n==null?void 0:n.borderRadius)||"0px")}updateZoomButtonsVisibility(){var e;const t=(e=this.rootElm)==null?void 0:e.querySelector('[data-vistaview-pos="0"] img.vistaview-image-highres');if(!t)return;const i=this;function n(){var l,c;const r=(l=i.rootElm)==null?void 0:l.querySelector("button.vistaview-zoom-in-btn"),d=(c=i.rootElm)==null?void 0:c.querySelector("button.vistaview-zoom-out-btn"),o=parseInt(t.style.width)||t.width,a=t.naturalWidth*i.options.maxZoomLevel,h=o<a&&a>0;r&&(r.style.display=h?"":"none"),d&&(d.style.display=h?"":"none")}t.complete&&t.naturalWidth>0?n():t.addEventListener("load",n)}loadImages(){if(!this.rootElm)return;this.rootElm.querySelectorAll(".vistaview-image-highres:not(.vistaview-image-loaded)").forEach((i,n)=>{const e=i,d=this.currentImages[n].imageElm,o={w:0,h:0};if(d){const{width:h,height:l}=j(d);o.w=Math.min(d.width,h),o.h=Math.min(d.height,l)}const a=()=>{var l;const h=()=>{var c;o.w&&o.h&&(e.style.width=`${o.w}px`,e.style.height=`${o.h}px`,e.style.setProperty("--vistaview-fitted-width",`${o.w}px`),e.style.setProperty("--vistaview-fitted-height",`${o.h}px`)),e.classList.add("vistaview-image-loaded"),e.width=e.naturalWidth,e.height=e.naturalHeight,setTimeout(()=>{var E,p;let v=0;const m=()=>{var x,L;v++,!(v<3)&&(e.removeEventListener("transitionend",m),(L=(x=e.parentElement)==null?void 0:x.querySelector(".vistaview-image-lowres"))==null||L.classList.add("vistaview-image--hidden"),e.classList.add("vistaview-image-settled"))};e.addEventListener("transitionend",m);const{width:f,height:u}=W(e);e.style.width=`${f}px`,e.style.height=`${u}px`,o.w&&o.h&&f===o.w&&u===o.h?((p=(E=e.parentElement)==null?void 0:E.querySelector(".vistaview-image-lowres"))==null||p.classList.add("vistaview-image--hidden"),e.classList.add("vistaview-image-settled")):(e.style.width=`${f}px`,e.style.height=`${u}px`)},100),(c=i.parentElement)!=null&&c.matches('[data-vistaview-pos="0"]')&&this.updateZoomButtonsVisibility()};if((l=this.rootElm)!=null&&l.classList.contains("vistaview--opened"))h();else{const c=setInterval(()=>{var v;(v=this.rootElm)!=null&&v.classList.contains("vistaview--opened")&&(clearInterval(c),h())},50)}};e.complete&&e.naturalWidth>0?a():e.onload=a})}setIndexDisplay(){this.elements.length!==1&&(this.rootElm.querySelector(".vistaview-index-display").textContent=`${this.currentIndex.value+1} / ${this.elements.length}`)}setCurrentDescription(){this.rootElm.querySelector(".vistaview-description").textContent=(this.currentImages[1]||this.currentImages[0]).alt||""}getCurrentIndexes(t){const i=this.options.preloads,n=this.elements.length,e=n<1||!i?[t]:[...new Set([...Array.from({length:i},(d,o)=>((t-i+o)%n+n)%n),t,...Array.from({length:i},(d,o)=>(t+1+o)%n)])],r=n<1||!i?[0]:e.map((d,o)=>o-Math.floor(e.length/2));return{images:e,positions:r}}setKeyboardListeners(){this.onKeyDown=t=>{switch(t.key){case"ArrowLeft":t.preventDefault(),this.prev();break;case"ArrowRight":t.preventDefault(),this.next();break;case"ArrowUp":t.preventDefault(),this.zoomIn();break;case"ArrowDown":t.preventDefault(),this.zoomOut();break;case"Escape":t.preventDefault(),this.close();break}},window.addEventListener("keydown",this.onKeyDown)}setResizeListeners(){this.onResizeHandler=()=>{var i;this.setInitialDimPos();const t=(i=this.rootElm)==null?void 0:i.querySelectorAll(".vistaview-image-highres.vistaview-image-loaded");t==null||t.forEach(n=>{const e=n,{width:r,height:d}=W(e);e.classList.contains("vistaview-image--zooming")?(e.dataset.vistaviewInitialWidth=r.toString(),e.dataset.vistaviewInitialHeight=d.toString()):(e.style.width=`${r}px`,e.style.height=`${d}px`)})},window.addEventListener("resize",this.onResizeHandler)}open(t=0){var o,a,h,l,c,v,m,f,u,E,p,x,L;if(D.somethingOpened){console.error("VistaView: another instance is already opened. Returning.");return}if(D.somethingOpened=this,this.currentIndex._value=t,document.body.prepend(nt({controls:this.options.controls,isReducedMotion:this.isReducedMotion})),this.rootElm=document.querySelector("#vistaview-root"),this.imageContainerElm=((o=this.rootElm)==null?void 0:o.querySelector(".vistaview-image-container"))||null,!this.rootElm||!this.imageContainerElm)throw D.somethingOpened=null,new Error("Failed to create VistaView element");this.options.arrowOnSmallScreens||this.rootElm.classList.add("vistaview-no-arrows-sm");const{images:i,positions:n}=this.getCurrentIndexes(t);this.currentImages=this.getImages(i);const e=this.currentImages.map((g,C)=>X(g,n[C]));this.currentItems=e;const r={htmlElements:{from:null,to:this.currentItems},images:{from:null,to:this.currentImages},index:{from:null,to:t},via:this.currentIndex.via,container:this.imageContainerElm,elements:this.elements,isReducedMotion:this.isReducedMotion,navActive:this.navActive,isZoomed:this.isZoomed,options:this.options};this.userSetup(r),this.imageContainerElm.innerHTML="",this.currentItems.forEach(g=>{this.imageContainerElm.appendChild(g)});let d=0;this.rootElm.addEventListener("animationend",g=>{var C;g.currentTarget===this.rootElm&&(d++,d>=2&&((C=this.rootElm)==null||C.classList.add("vistaview--opened")))}),(a=this.rootElm.querySelector(".vistaview-close-btn"))==null||a.addEventListener("click",()=>this.close()),(h=this.rootElm.querySelector(".vistaview-zoom-in-btn"))==null||h.addEventListener("click",()=>this.zoomIn()),(l=this.rootElm.querySelector(".vistaview-zoom-out-btn"))==null||l.addEventListener("click",()=>this.zoomOut()),(c=this.rootElm.querySelector(".vistaview-prev-btn>button"))==null||c.addEventListener("click",()=>this.prev()),(v=this.rootElm.querySelector(".vistaview-next-btn>button"))==null||v.addEventListener("click",()=>this.next()),[...this.options.controls.topLeft||[],...this.options.controls.topRight||[],...this.options.controls.topCenter||[],...this.options.controls.bottomCenter||[],...this.options.controls.bottomLeft||[],...this.options.controls.bottomRight||[]].forEach(g=>{typeof g!="string"&&(this.customControls[g.name]=g)}),this.rootElm.querySelectorAll("button[data-vistaview-custom-control]").forEach(g=>{g.addEventListener("click",C=>{const b=this.customControls[C.currentTarget.dataset.vistaviewCustomControl],S=this.currentImages.find(T=>T.index===this.currentIndex.value);b&&S&&(b.onClick.constructor.name==="AsyncFunction"?(g.classList.add("vistaview-button--loading"),b.onClick(S).finally(()=>{g.classList.remove("vistaview-button--loading")})):b.onClick(S))})}),this.options.animationDurationBase&&this.rootElm.style.setProperty("--vistaview-animation-duration",`${this.options.animationDurationBase}`),this.options.initialZIndex!==void 0&&this.rootElm.style.setProperty("--vistaview-initial-z-index",`${this.options.initialZIndex}`),this.setInitialDimPos(),this.setResizeListeners(),this.options.keyboardListeners&&this.setKeyboardListeners(),this.elements.length===1&&((m=this.rootElm.querySelector(".vistaview-prev-btn"))==null||m.classList.add("vistaview-ui--none"),(f=this.rootElm.querySelector(".vistaview-next-btn"))==null||f.classList.add("vistaview-ui--none"),(u=this.rootElm.querySelector(".vistaview-index-display"))==null||u.classList.add("vistaview-ui--none")),this.rootElm&&this.rootElm.classList.add("vistaview--initialized"),this.loadImages(),this.setCurrentDescription(),this.setIndexDisplay(),this.userInit(this),(p=(E=this.options).onOpen)==null||p.call(E,r),(L=(x=this.options).onImageView)==null||L.call(x,r)}async close(t=!0){var n,e,r;if(D.somethingOpened!==this)return;t&&((n=this.rootElm)==null||n.classList.add("vistaview--closing"),await new Promise(d=>{var a;let o;(a=this.rootElm)==null||a.addEventListener("transitionend",h=>{h.currentTarget===this.rootElm&&(o&&clearTimeout(o),o=setTimeout(()=>{d()},333))})}));const i={htmlElements:{from:this.currentItems,to:null},images:{from:this.currentImages,to:null},index:{from:this.currentIndex.value,to:null},container:this.imageContainerElm,elements:this.elements,via:{prev:!1,next:!1},isReducedMotion:this.isReducedMotion,navActive:this.navActive,isZoomed:this.isZoomed,options:this.options};this.userClose(this),(r=(e=this.options).onClose)==null||r.call(e,i),document.body.removeChild(this.rootElm),this.currentIndex._value=null,this.currentIndex._via={next:!1,prev:!1},this.rootElm=null,this.imageContainerElm=null,this.currentImages=null,this.currentItems=null,this.navActive=!0,this.onResizeHandler&&(window.removeEventListener("resize",this.onResizeHandler),this.onResizeHandler=null),this.onKeyDown&&(window.removeEventListener("keydown",this.onKeyDown),this.onKeyDown=null),(this.onZoomedPointerDown||this.onZoomedPointerMove||this.onZoomedPointerUp)&&(this.setZoomed(!1),this.onZoomedPointerDown=null,this.onZoomedPointerMove=null,this.onZoomedPointerUp=null);for(const d in this.transitionAbortControllers)this.transitionAbortControllers[d].abort();this.transitionAbortControllers={},D.somethingOpened=null}destroy(){this.close(!1),this.elements instanceof NodeList&&this.elements.forEach(t=>{t.dataset.vistaviewIndex&&delete t.dataset.vistaviewIndex,t.removeEventListener("click",this.defaultOnClickHandler),t.removeEventListener("pointerup",this.onClickElements)})}view(t,i){D.somethingOpened===this&&this.navActive&&(t<0&&(t=this.elements.length-1),t>=this.elements.length&&(t=0),this.currentIndex.via=i||{next:!1,prev:!1},this.currentIndex.value=t)}next(){D.somethingOpened===this&&this.view(this.currentIndex.value+1,{next:!0,prev:!1})}prev(){D.somethingOpened===this&&this.view(this.currentIndex.value-1,{next:!1,prev:!0})}getCurrentIndex(){return D.somethingOpened===this?this.currentIndex.value:-1}}function ot(s){let t=null;if(typeof s=="string"?t=document.querySelectorAll(s):s instanceof NodeList&&(t=s),t)for(let i=0;i<t.length;i++){const n=t[i];if(!(n.dataset.vistaviewSrc||n.getAttribute("href")||n.getAttribute("src")||""))return`Element at index ${i} is missing 'src' / 'data-vistaview-src' / 'href' attribute.`}else{const i=s;for(let n=0;n<i.length;n++)if(!i[n].src)return`Element at index ${n} is missing 'src' attribute.`}return t||s}function rt({elements:s,...t}){if(!s)throw new Error("No elements");let i=ot(s);if(typeof i=="string")return console.error(i),console.warn("VistaView: silently returning."),null;const n=new st(i,t);return{open:(e=0)=>n.open(e),close:()=>n.close(),next:()=>n.next(),prev:()=>n.prev(),destroy:()=>n.destroy(),getCurrentIndex:()=>n.getCurrentIndex(),view:e=>{n.view(e)}}}y.DefaultOptions=H,y.VistaViewTransitionAbortedError=A,y.defaultClose=N,y.defaultInit=_,y.defaultSetup=B,y.defaultTransition=F,y.removeTouchActions=R,y.setTouchActions=Y,y.vistaView=rt,y.vistaViewDownload=V,Object.defineProperty(y,Symbol.toStringTag,{value:"Module"})}));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vistaview",
3
- "version": "0.3.7",
3
+ "version": "0.3.8",
4
4
  "description": "A lightweight, zero-dependency image lightbox library with smooth animations and touch support",
5
5
  "keywords": [
6
6
  "image",