vistaview 0.3.14 → 0.5.2

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 (9) hide show
  1. package/README.md +10 -10
  2. package/dist/lib/pinch-detector.d.ts +33 -0
  3. package/dist/lib/pinch-detector.d.ts.map +1 -0
  4. package/dist/lib/vista-view.d.ts.map +1 -1
  5. package/dist/vistaview.cjs +6 -6
  6. package/dist/vistaview.css +1 -1
  7. package/dist/vistaview.js +284 -267
  8. package/dist/vistaview.umd.js +6 -6
  9. package/package.json +4 -1
package/dist/vistaview.js CHANGED
@@ -1,7 +1,7 @@
1
- var X = Object.defineProperty;
2
- var Y = (s, t, i) => t in s ? X(s, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : s[t] = i;
3
- var m = (s, t, i) => Y(s, typeof t != "symbol" ? t + "" : t, i);
4
- function Z(s) {
1
+ var V = Object.defineProperty;
2
+ var N = (s, t, i) => t in s ? V(s, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : s[t] = i;
3
+ var p = (s, t, i) => N(s, typeof t != "symbol" ? t + "" : t, i);
4
+ function R(s) {
5
5
  const t = getComputedStyle(s), i = s.getBoundingClientRect();
6
6
  return {
7
7
  objectFit: t.objectFit,
@@ -16,11 +16,11 @@ function Z(s) {
16
16
  naturalHeight: s.naturalHeight
17
17
  };
18
18
  }
19
- let S = null;
20
- function F() {
21
- return S || (window.trustedTypes || (window.trustedTypes = {
19
+ let $ = null;
20
+ function U() {
21
+ return $ || (window.trustedTypes || (window.trustedTypes = {
22
22
  createPolicy: (s, t) => t
23
- }), S = window.trustedTypes.createPolicy("vistaView-policy", {
23
+ }), $ = window.trustedTypes.createPolicy("vistaView-policy", {
24
24
  createHTML: (s) => s,
25
25
  // HTML is generated by us, not user input
26
26
  createScript: () => {
@@ -29,41 +29,41 @@ function F() {
29
29
  createScriptURL: () => {
30
30
  throw new Error("Not implemented");
31
31
  }
32
- }), S);
32
+ }), $);
33
33
  }
34
- function W(s) {
35
- const i = F().createHTML(s), n = document.createElement("template");
34
+ function O(s) {
35
+ const i = U().createHTML(s), n = document.createElement("template");
36
36
  n.innerHTML = i;
37
37
  const e = n.content;
38
38
  return n.remove(), e;
39
39
  }
40
- function T(s) {
40
+ function H(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 _(s) {
44
- const i = window.getComputedStyle(s).objectFit || "", { width: n, height: e } = s.getBoundingClientRect(), r = s.naturalWidth, a = s.naturalHeight;
43
+ function K(s) {
44
+ const i = window.getComputedStyle(s).objectFit || "", { width: n, height: e } = s.getBoundingClientRect(), r = s.naturalWidth, l = s.naturalHeight;
45
45
  if (!i)
46
46
  return { width: n, height: e };
47
- if (!r || !a)
47
+ if (!r || !l)
48
48
  return { width: n, height: e };
49
- const o = r / a, l = n / e;
49
+ const o = r / l, c = n / e;
50
50
  switch (i) {
51
51
  case "fill":
52
52
  return { width: n, height: e };
53
53
  case "none":
54
- return { width: r, height: a };
54
+ return { width: r, height: l };
55
55
  case "contain":
56
- return o > l ? { width: n, height: n / o } : { width: e * o, height: e };
56
+ return o > c ? { 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 < c ? { width: n, height: n / o } : { width: e * o, height: e };
59
59
  case "scale-down": {
60
- const c = { width: r, height: a }, d = o > l ? { width: n, height: n / o } : { width: e * o, height: e };
61
- return d.width <= c.width && d.height <= c.height ? d : c;
60
+ const a = { width: r, height: l }, d = o > c ? { width: n, height: n / o } : { width: e * o, height: e };
61
+ return d.width <= a.width && d.height <= a.height ? d : a;
62
62
  }
63
63
  }
64
64
  return { width: n, height: e };
65
65
  }
66
- function R(s) {
66
+ function q(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,27 +72,27 @@ function R(s) {
72
72
  width: n,
73
73
  height: e
74
74
  };
75
- const r = n / e, a = t / i;
76
- let o, l;
77
- return r > a ? (o = t, l = t / r) : (l = i, o = i * r), {
75
+ const r = n / e, l = t / i;
76
+ let o, c;
77
+ return r > l ? (o = t, c = t / r) : (c = i, o = i * r), {
78
78
  width: o,
79
- height: l
79
+ height: c
80
80
  };
81
81
  }
82
- function H(s, t) {
83
- const i = window.innerHeight, n = window.innerWidth, e = s, r = t, a = Math.max(0, (e - n) / 2) + n / 2, o = Math.max(0, (r - i) / 2) + i / 2, l = -a, c = -o;
82
+ function j(s, t) {
83
+ const i = window.innerHeight, n = window.innerWidth, e = s, r = t, l = Math.max(0, (e - n) / 2) + n / 2, o = Math.max(0, (r - i) / 2) + i / 2, c = -l, a = -o;
84
84
  return {
85
- maxDiffX: a,
86
- minDiffY: c,
85
+ maxDiffX: l,
86
+ minDiffY: a,
87
87
  maxDiffY: o,
88
- minDiffX: l
88
+ minDiffX: c
89
89
  };
90
90
  }
91
- const B = '<svg viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>', N = '<svg viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></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="11" x2="11" y1="8" y2="14"/><line x1="8" x2="14" y1="11" y2="11"/></svg>', V = '<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
- function G() {
91
+ 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>';
92
+ function nt() {
93
93
  return {
94
94
  name: "download",
95
- icon: j,
95
+ icon: it,
96
96
  onClick: async (s) => {
97
97
  var r;
98
98
  const t = await fetch(s.src), i = await t.blob(), n = t.url, e = document.createElement("a");
@@ -100,15 +100,15 @@ function G() {
100
100
  }
101
101
  };
102
102
  }
103
- function J(s) {
103
+ function st(s) {
104
104
  if (typeof s == "string")
105
105
  switch (s) {
106
106
  case "zoomIn":
107
- return `<button class="vistaview-zoom-in-btn">${U}</button>`;
107
+ return `<button class="vistaview-zoom-in-btn">${Q}</button>`;
108
108
  case "zoomOut":
109
- return `<button disabled class="vistaview-zoom-out-btn">${V}</button>`;
109
+ return `<button disabled class="vistaview-zoom-out-btn">${tt}</button>`;
110
110
  case "close":
111
- return `<button class="vistaview-close-btn">${K}</button>`;
111
+ return `<button class="vistaview-close-btn">${et}</button>`;
112
112
  case "indexDisplay":
113
113
  return '<div class="vistaview-index-display"></div>';
114
114
  case "description":
@@ -118,96 +118,96 @@ function J(s) {
118
118
  }
119
119
  return `<button data-vistaview-custom-control="${s.name}">${s.icon}</button>`;
120
120
  }
121
- function q(s, t) {
121
+ function k(s, t) {
122
122
  var d, h;
123
- const i = s.imageElm ? getComputedStyle(s.imageElm) : null, n = (i == null ? void 0 : i.objectFit) || "", e = ((d = s.imageElm) == null ? void 0 : d.naturalWidth) || "", r = ((h = s.imageElm) == null ? void 0 : h.naturalHeight) || "", a = (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();
125
- const c = W(`<img class="vistaview-image-lowres"
126
- style="${n ? `object-fit:${n};` : ""}${a ? `width:${a};` : ""}${o ? `height:${o};` : ""}"
123
+ const i = s.imageElm ? getComputedStyle(s.imageElm) : null, n = (i == null ? void 0 : i.objectFit) || "", e = ((d = s.imageElm) == null ? void 0 : d.naturalWidth) || "", r = ((h = s.imageElm) == null ? void 0 : h.naturalHeight) || "", l = (i == null ? void 0 : i.width) || "", o = (i == null ? void 0 : i.height) || "", c = document.createElement("div");
124
+ c.className = "vistaview-item", c.dataset.vistaviewPos = `${t !== void 0 ? t : ""}`, c.dataset.vistaviewIndex = s.index.toString();
125
+ const a = O(`<img class="vistaview-image-lowres"
126
+ style="${n ? `object-fit:${n};` : ""}${l ? `width:${l};` : ""}${o ? `height:${o};` : ""}"
127
127
  src="${s.thumb || s.src}"
128
128
  alt="${s.alt || ""}"
129
129
  ${e ? `width="${e}"` : ""}
130
130
  ${r ? `height="${r}"` : ""}
131
131
  />
132
132
  <img class="vistaview-image-highres" src="${s.src}" alt="${s.alt || ""}" />`);
133
- return l.appendChild(c), l;
133
+ return c.appendChild(a), c;
134
134
  }
135
- function Q({
135
+ function ot({
136
136
  controls: s,
137
137
  isReducedMotion: t
138
138
  }) {
139
- const i = (e) => e ? e.map(J).join("") : "";
140
- return W(
139
+ const i = (e) => e ? e.map(st).join("") : "";
140
+ return O(
141
141
  `<div class="vistaview-root${t ? " vistaview--reduced-motion" : ""}" id="vistaview-root">
142
142
  <div class="vistaview-container">
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>${B}</button></div>
147
- <div class="vistaview-next-btn vistaview-ui"><button>${N}</button></div>
146
+ <div class="vistaview-prev-btn vistaview-ui"><button>${G}</button></div>
147
+ <div class="vistaview-next-btn vistaview-ui"><button>${J}</button></div>
148
148
  </div>
149
149
  </div>`
150
150
  );
151
151
  }
152
- let $ = null, z = null, M = null, A = null;
153
- function tt(s) {
154
- O(s);
152
+ let A = null, M = null, Z = null, T = null;
153
+ function rt(s) {
154
+ F(s);
155
155
  const t = s.imageContainerElm, i = s.elements.length;
156
156
  if (!t) return;
157
- let n = 0, e = 0, r = 0, a = 0, o = null, l = 0, c = !1;
158
- $ = (d) => {
159
- d.preventDefault(), d.stopPropagation(), s.isZoomed === !1 && (c = !0, n = d.pageX, e = d.pageY, r = d.pageX, a = d.pageY, l = Date.now(), o = null, t.setPointerCapture(d.pointerId));
160
- }, z = (d) => {
161
- if (d.preventDefault(), d.stopPropagation(), s.isZoomed !== !1 || !c) return;
157
+ let n = 0, e = 0, r = 0, l = 0, o = null, c = 0, a = !1;
158
+ A = (d) => {
159
+ d.preventDefault(), d.stopPropagation(), s.isZoomed === !1 && (a = !0, n = d.pageX, e = d.pageY, r = d.pageX, l = d.pageY, c = Date.now(), o = null, t.setPointerCapture(d.pointerId));
160
+ }, M = (d) => {
161
+ if (d.preventDefault(), d.stopPropagation(), s.isZoomed !== !1 || !a) return;
162
162
  const h = d.pageX - n, u = d.pageY - e;
163
- r = d.pageX, a = d.pageY, Math.abs(h) >= Math.abs(u) && (o === null || o === !0) ? (t.style.setProperty("--vistaview-pointer-diff-x", `${h}px`), o = !0) : Math.abs(u) > Math.abs(h) && (o === null || o === !1) && (t.style.setProperty("--vistaview-pointer-diff-y", `${u}px`), o = !1);
164
- }, A = (d) => {
165
- if (d.preventDefault(), d.stopPropagation(), t.releasePointerCapture(d.pointerId), s.isZoomed !== !1 || !c) return;
166
- c = !1, o = null;
163
+ r = d.pageX, l = d.pageY, Math.abs(h) >= Math.abs(u) && (o === null || o === !0) ? (t.style.setProperty("--vistaview-pointer-diff-x", `${h}px`), o = !0) : Math.abs(u) > Math.abs(h) && (o === null || o === !1) && (t.style.setProperty("--vistaview-pointer-diff-y", `${u}px`), o = !1);
164
+ }, T = (d) => {
165
+ if (d.preventDefault(), d.stopPropagation(), t.releasePointerCapture(d.pointerId), s.isZoomed !== !1 || !a) return;
166
+ a = !1, o = null;
167
167
  const h = Array.from(t.querySelectorAll(".vistaview-item"));
168
168
  t.style.removeProperty("--vistaview-pointer-diff-x"), t.style.removeProperty("--vistaview-pointer-diff-y"), h.forEach((u) => {
169
169
  u.style.transition = "", u.style.translate = "";
170
170
  });
171
- }, M = (d) => {
172
- if (d.preventDefault(), d.stopPropagation(), t.releasePointerCapture(d.pointerId), s.isZoomed !== !1 || !c) return;
173
- c = !1;
174
- const h = Array.from(t.querySelectorAll(".vistaview-item")), u = r - n, p = a - e, f = Date.now() - l, v = u / f, E = p / f, g = s.options.touchSpeedThreshold || 0.5, b = h.find(
175
- (y) => y.dataset.vistaviewPos === "0"
176
- ), C = Number(b.dataset.vistaviewIndex);
177
- function w() {
178
- h[0].removeEventListener("transitionend", w), t.style.removeProperty("--vistaview-pointer-diff-x"), t.style.removeProperty("--vistaview-pointer-diff-y"), h.forEach((y) => {
179
- y.style.transition = "", y.style.translate = "";
171
+ }, Z = (d) => {
172
+ if (d.preventDefault(), d.stopPropagation(), t.releasePointerCapture(d.pointerId), s.isZoomed !== !1 || !a) return;
173
+ a = !1;
174
+ const h = Array.from(t.querySelectorAll(".vistaview-item")), u = r - n, w = l - e, f = Date.now() - c, v = u / f, y = w / f, b = s.options.touchSpeedThreshold || 0.5, L = h.find(
175
+ (g) => g.dataset.vistaviewPos === "0"
176
+ ), C = Number(L.dataset.vistaviewIndex);
177
+ function E() {
178
+ h[0].removeEventListener("transitionend", E), t.style.removeProperty("--vistaview-pointer-diff-x"), t.style.removeProperty("--vistaview-pointer-diff-y"), h.forEach((g) => {
179
+ g.style.transition = "", g.style.translate = "";
180
180
  });
181
181
  }
182
- function x(y = "0%", I = "0%") {
183
- h.forEach((D) => {
184
- D.style.transition = `translate ${s.options.animationDurationBase * 0.5}ms ease-out`, D.style.translate = `${y} ${I}`;
182
+ function m(g = "0%", x = "0%") {
183
+ h.forEach((I) => {
184
+ I.style.transition = `translate ${s.options.animationDurationBase * 0.5}ms ease-out`, I.style.translate = `${g} ${x}`;
185
185
  });
186
186
  }
187
- if (v < -g || v > g) {
188
- let y = function() {
189
- h[0].removeEventListener("transitionend", y), setTimeout(() => {
190
- const I = s.isReducedMotion, D = s.options.detectReducedMotion;
191
- s.isReducedMotion = !0, s.options.detectReducedMotion = !0, w(), s.view(
192
- v < -g ? (C + 1) % i : (C - 1 + i) % i,
187
+ if (v < -b || v > b) {
188
+ let g = function() {
189
+ h[0].removeEventListener("transitionend", g), setTimeout(() => {
190
+ const x = s.isReducedMotion, I = s.options.detectReducedMotion;
191
+ s.isReducedMotion = !0, s.options.detectReducedMotion = !0, E(), s.view(
192
+ v < -b ? (C + 1) % i : (C - 1 + i) % i,
193
193
  {
194
- next: v < -g,
195
- prev: v > g
194
+ next: v < -b,
195
+ prev: v > b
196
196
  }
197
- ), s.isReducedMotion = I, s.options.detectReducedMotion = D;
197
+ ), s.isReducedMotion = x, s.options.detectReducedMotion = I;
198
198
  }, 100);
199
199
  };
200
- x(v < -g ? "-100%" : "100%"), h[0].addEventListener("transitionend", y);
201
- } else E < -g || E > g ? (s.close(), x("0%", "0%")) : (h[0].addEventListener("transitionend", w), x("0%"), v === 0 && E === 0 && s.zoomIn());
202
- }, t.addEventListener("pointermove", z), t.addEventListener("pointerup", M), t.addEventListener("pointerdown", $), t.addEventListener("pointercancel", A);
200
+ m(v < -b ? "-100%" : "100%"), h[0].addEventListener("transitionend", g);
201
+ } else y < -b || y > b ? (s.close(), m("0%", "0%")) : (h[0].addEventListener("transitionend", E), m("0%"), v === 0 && y === 0 && s.zoomIn());
202
+ }, t.addEventListener("pointermove", M), t.addEventListener("pointerup", Z), t.addEventListener("pointerdown", A), t.addEventListener("pointercancel", T);
203
203
  }
204
- function O(s) {
204
+ function F(s) {
205
205
  const t = s.imageContainerElm;
206
- t && (z && t.removeEventListener("pointermove", z), M && t.removeEventListener("pointerup", M), $ && t.removeEventListener("pointerdown", $), A && t.removeEventListener("pointercancel", A));
206
+ t && (M && t.removeEventListener("pointermove", M), Z && t.removeEventListener("pointerup", Z), A && t.removeEventListener("pointerdown", A), T && t.removeEventListener("pointercancel", T));
207
207
  }
208
- const et = (s) => {
209
- tt(s);
210
- }, it = ({
208
+ const at = (s) => {
209
+ rt(s);
210
+ }, lt = ({
211
211
  htmlElements: { to: s },
212
212
  index: { to: t },
213
213
  vistaView: i
@@ -216,7 +216,7 @@ const et = (s) => {
216
216
  const e = Number(n.dataset.vistaviewPos);
217
217
  e !== 0 ? (n.style.zIndex = "1", n.style.left = 100 * e + "%") : n.style.zIndex = "2";
218
218
  });
219
- }, nt = async ({
219
+ }, dt = async ({
220
220
  htmlElements: { from: s },
221
221
  via: { next: t, prev: i },
222
222
  vistaView: n
@@ -224,32 +224,32 @@ const et = (s) => {
224
224
  }, e) => {
225
225
  if (n.options.detectReducedMotion && n.isReducedMotion)
226
226
  return;
227
- const r = s.filter((a) => a.dataset.vistaviewPos === "0" || (t ? a.dataset.vistaviewPos === "1" : a.dataset.vistaviewPos === "-1"));
228
- await new Promise((a, o) => {
229
- let l = 0, c = !1;
227
+ const r = s.filter((l) => l.dataset.vistaviewPos === "0" || (t ? l.dataset.vistaviewPos === "1" : l.dataset.vistaviewPos === "-1"));
228
+ await new Promise((l, o) => {
229
+ let c = 0, a = !1;
230
230
  if (e.aborted) {
231
- o(new P("Transition aborted"));
231
+ o(new z("Transition aborted"));
232
232
  return;
233
233
  }
234
234
  const d = (h) => {
235
- if (c) return o(new P("Transition aborted"));
235
+ if (a) return o(new z("Transition aborted"));
236
236
  if (e.aborted)
237
- return c || (c = !0), o(new P("Transition aborted"));
238
- h.currentTarget.removeEventListener("transitionend", d), l++, l >= r.length && a(0);
237
+ return a || (a = !0), o(new z("Transition aborted"));
238
+ h.currentTarget.removeEventListener("transitionend", d), c++, c >= r.length && l(0);
239
239
  };
240
240
  r.forEach((h) => {
241
241
  h.style.transition = `translate ${n.options.animationDurationBase * 0.5}ms ease-out`, h.style.translate = t ? "-100%" : i ? "100%" : "0%", h.addEventListener("transitionend", d);
242
242
  });
243
243
  });
244
- }, st = (s) => {
245
- s.elements instanceof NodeList && s.elements.forEach((t) => t.style.opacity = "1"), O(s);
244
+ }, ct = (s) => {
245
+ s.elements instanceof NodeList && s.elements.forEach((t) => t.style.opacity = "1"), F(s);
246
246
  };
247
- class P extends Error {
247
+ class z extends Error {
248
248
  constructor(t) {
249
249
  super(t), this.name = "VistaViewTransitionAbortedError";
250
250
  }
251
251
  }
252
- const k = {
252
+ const W = {
253
253
  detectReducedMotion: !0,
254
254
  // debug, don't remove
255
255
  // animationDurationBase: 1000,
@@ -262,18 +262,18 @@ const k = {
262
262
  arrowOnSmallScreens: !1,
263
263
  controls: {
264
264
  topLeft: ["indexDisplay"],
265
- topRight: ["zoomIn", "zoomOut", G(), "close"],
265
+ topRight: ["zoomIn", "zoomOut", nt(), "close"],
266
266
  bottomCenter: ["description"]
267
267
  }
268
- }, L = {
268
+ }, S = {
269
269
  somethingOpened: null
270
270
  };
271
- class ot {
271
+ class ht {
272
272
  constructor(t, i) {
273
- m(this, "options");
274
- m(this, "elements");
275
- m(this, "isReducedMotion");
276
- m(this, "currentIndex", {
273
+ p(this, "options");
274
+ p(this, "elements");
275
+ p(this, "isReducedMotion");
276
+ p(this, "currentIndex", {
277
277
  _value: null,
278
278
  _vistaView: null,
279
279
  _via: { next: !1, prev: !1 },
@@ -281,8 +281,8 @@ class ot {
281
281
  var n, e, r;
282
282
  const i = this._value;
283
283
  this._value = t;
284
- for (const a in (n = this._vistaView) == null ? void 0 : n.transitionAbortControllers)
285
- (e = this._vistaView) == null || e.transitionAbortControllers[a].abort();
284
+ for (const l in (n = this._vistaView) == null ? void 0 : n.transitionAbortControllers)
285
+ (e = this._vistaView) == null || e.transitionAbortControllers[l].abort();
286
286
  (r = this._vistaView) == null || r.swap(i, this._value);
287
287
  },
288
288
  get value() {
@@ -295,28 +295,28 @@ class ot {
295
295
  this._via = t;
296
296
  }
297
297
  });
298
- m(this, "rootElm", null);
299
- m(this, "imageContainerElm", null);
300
- m(this, "customControls", {});
301
- m(this, "currentImages", null);
302
- m(this, "currentItems", null);
303
- m(this, "isZoomed", !1);
304
- m(this, "onClickElements", (t) => {
298
+ p(this, "rootElm", null);
299
+ p(this, "imageContainerElm", null);
300
+ p(this, "customControls", {});
301
+ p(this, "currentImages", null);
302
+ p(this, "currentItems", null);
303
+ p(this, "isZoomed", !1);
304
+ p(this, "onClickElements", (t) => {
305
305
  t.preventDefault();
306
306
  const i = t.currentTarget;
307
307
  i.dataset.vistaviewIndex && this.open(parseInt(i.dataset.vistaviewIndex));
308
308
  });
309
- m(this, "defaultOnClickHandler", (t) => t.preventDefault());
310
- m(this, "onResizeHandler", null);
311
- m(this, "onKeyDown", null);
312
- m(this, "userSetup", it);
313
- m(this, "userTransition", nt);
314
- m(this, "userClose", st);
315
- m(this, "userInit", et);
316
- m(this, "onZoomedPointerDown", null);
317
- m(this, "onZoomedPointerMove", null);
318
- m(this, "onZoomedPointerUp", null);
319
- m(this, "transitionAbortControllers", {});
309
+ p(this, "defaultOnClickHandler", (t) => t.preventDefault());
310
+ p(this, "onResizeHandler", null);
311
+ p(this, "onKeyDown", null);
312
+ p(this, "userSetup", lt);
313
+ p(this, "userTransition", dt);
314
+ p(this, "userClose", ct);
315
+ p(this, "userInit", at);
316
+ p(this, "onZoomedPointerDown", null);
317
+ p(this, "onZoomedPointerMove", null);
318
+ p(this, "onZoomedPointerUp", null);
319
+ p(this, "transitionAbortControllers", {});
320
320
  // weird on iphones
321
321
  // private loadImageWaiting = (img: HTMLImageElement): Promise<void> => {
322
322
  // return new Promise((resolve) => {
@@ -340,12 +340,12 @@ class ot {
340
340
  // });
341
341
  // });
342
342
  // };
343
- m(this, "loadImageTimeout", null);
343
+ p(this, "loadImageTimeout", null);
344
344
  this.elements = t, this.currentIndex._vistaView = this, this.options = {
345
- ...k,
345
+ ...W,
346
346
  ...i || {},
347
347
  controls: {
348
- ...k.controls,
348
+ ...W.controls,
349
349
  ...(i == null ? void 0 : i.controls) || {}
350
350
  }
351
351
  }, 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) => {
@@ -353,95 +353,109 @@ class ot {
353
353
  });
354
354
  }
355
355
  setFullSizeImageDim(t) {
356
- var r, a;
357
- const i = t.getBoundingClientRect(), { width: n, height: e } = R(t);
356
+ var r, l;
357
+ const i = t.getBoundingClientRect(), { width: n, height: e } = q(t);
358
358
  if (n === i.width && e === i.height)
359
- (a = (r = t.parentElement) == null ? void 0 : r.querySelector(".vistaview-image-lowres")) == null || a.classList.add("vistaview-image--hidden"), t.classList.add("vistaview-image-settled");
359
+ (l = (r = t.parentElement) == null ? void 0 : r.querySelector(".vistaview-image-lowres")) == null || l.classList.add("vistaview-image--hidden"), t.classList.add("vistaview-image-settled");
360
360
  else {
361
361
  let o = 0;
362
- const l = () => {
363
- var c, d;
364
- o++, !(o < 3) && (t.removeEventListener("transitionend", l), (d = (c = t.parentElement) == null ? void 0 : c.querySelector(".vistaview-image-lowres")) == null || d.classList.add("vistaview-image--hidden"), t.classList.add("vistaview-image-settled"));
362
+ const c = () => {
363
+ var a, d;
364
+ o++, !(o < 3) && (t.removeEventListener("transitionend", c), (d = (a = t.parentElement) == null ? void 0 : a.querySelector(".vistaview-image-lowres")) == null || d.classList.add("vistaview-image--hidden"), t.classList.add("vistaview-image-settled"));
365
365
  };
366
366
  requestAnimationFrame(() => {
367
- t.addEventListener("transitionend", l), t.style.width = `${n}px`, t.style.height = `${e}px`;
367
+ t.addEventListener("transitionend", c), t.style.width = `${n}px`, t.style.height = `${e}px`;
368
368
  });
369
369
  }
370
370
  }
371
371
  async swap(t, i) {
372
372
  var d, h;
373
- if (!L.somethingOpened || t === i || t === null) return;
373
+ if (!S.somethingOpened || t === i || t === null) return;
374
374
  if (!this.imageContainerElm)
375
375
  throw new Error("VistaView: imageContainerElm is null in swap()");
376
376
  this.setIndexDisplay(), this.clearZoom();
377
- const { images: n, positions: e } = this.getCurrentIndexes(i), r = this.getImages(n), a = r.map((u, p) => q(u, e[p])), o = {
378
- htmlElements: { from: this.currentItems, to: a },
377
+ const { images: n, positions: e } = this.getCurrentIndexes(i), r = this.getImages(n), l = r.map((u, w) => k(u, e[w])), o = {
378
+ htmlElements: { from: this.currentItems, to: l },
379
379
  images: { from: this.currentImages, to: r },
380
380
  index: { from: t, to: i },
381
381
  via: this.currentIndex.via,
382
382
  vistaView: this
383
383
  };
384
384
  this.userSetup(o);
385
- const l = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
386
- this.transitionAbortControllers[l] = new AbortController();
385
+ const c = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
386
+ this.transitionAbortControllers[c] = new AbortController();
387
387
  try {
388
- await this.userTransition(o, this.transitionAbortControllers[l].signal);
388
+ await this.userTransition(o, this.transitionAbortControllers[c].signal);
389
389
  } catch (u) {
390
- u instanceof P || console.warn(u);
390
+ u instanceof z || console.warn(u);
391
391
  }
392
- const c = a.find((u) => u.dataset.vistaviewPos === "0");
393
- if (c) {
394
- const u = c.dataset.vistaviewIndex, p = this.currentItems.find((v) => v.dataset.vistaviewIndex === u), f = p == null ? void 0 : p.querySelector(".vistaview-image-highres");
392
+ const a = l.find((u) => u.dataset.vistaviewPos === "0");
393
+ if (a) {
394
+ const u = a.dataset.vistaviewIndex, w = this.currentItems.find((v) => v.dataset.vistaviewIndex === u), f = w == null ? void 0 : w.querySelector(".vistaview-image-highres");
395
395
  if (f) {
396
- const v = c.querySelector(
396
+ const v = a.querySelector(
397
397
  ".vistaview-image-highres"
398
398
  );
399
399
  if (v.setAttribute("class", f.getAttribute("class") || ""), v.setAttribute("style", f.getAttribute("style") || ""), v.classList.remove("vistaview-image--zooming"), f.classList.contains("vistaview-image-loaded") && !f.classList.contains("vistaview-image-settled")) {
400
- const E = f.getBoundingClientRect();
401
- v.style.width = `${E.width}px`, v.style.height = `${E.height}px`;
400
+ const y = f.getBoundingClientRect();
401
+ v.style.width = `${y.width}px`, v.style.height = `${y.height}px`;
402
402
  }
403
403
  }
404
404
  }
405
- delete this.transitionAbortControllers[l], this.imageContainerElm.innerHTML = "", a.forEach((u) => {
406
- var E;
407
- const p = u.querySelector(".vistaview-image-highres"), f = !!p.classList.contains("vistaview-image-loaded"), v = !!p.classList.contains("vistaview-image-settled");
408
- this.imageContainerElm.appendChild(u), f && !v ? this.setFullSizeImageDim(p) : f && v && ((E = u == null ? void 0 : u.querySelector(".vistaview-image-lowres")) == null || E.classList.add("vistaview-image--hidden"));
409
- }), this.setInitialDimPos(), this.currentImages = r, this.currentItems = a, this.setCurrentDescription(), this.updateZoomButtonsVisibility(), (h = (d = this.options).onImageView) == null || h.call(d, o), this.loadImageTimeout && clearTimeout(this.loadImageTimeout), this.loadImageTimeout = setTimeout(() => {
405
+ delete this.transitionAbortControllers[c], this.imageContainerElm.innerHTML = "", l.forEach((u) => {
406
+ var y;
407
+ const w = u.querySelector(".vistaview-image-highres"), f = !!w.classList.contains("vistaview-image-loaded"), v = !!w.classList.contains("vistaview-image-settled");
408
+ this.imageContainerElm.appendChild(u), f && !v ? this.setFullSizeImageDim(w) : f && v && ((y = u == null ? void 0 : u.querySelector(".vistaview-image-lowres")) == null || y.classList.add("vistaview-image--hidden"));
409
+ }), this.setInitialDimPos(), this.currentImages = r, this.currentItems = l, this.setCurrentDescription(), this.updateZoomButtonsVisibility(), (h = (d = this.options).onImageView) == null || h.call(d, o), this.loadImageTimeout && clearTimeout(this.loadImageTimeout), this.loadImageTimeout = setTimeout(() => {
410
410
  this.loadImages();
411
411
  }, 333);
412
412
  }
413
413
  //
414
414
  setZoomed(t) {
415
- var i, n, e, r, a, o;
416
- if (this.isZoomed !== t) {
417
- if (this.isZoomed) {
418
- let l = this.isZoomed;
419
- 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(() => {
420
- l == null || l.classList.remove("vistaview-image--zooming");
421
- }, 500), this.isZoomed = !1, !t) return;
422
- }
423
- if (t) {
424
- 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");
425
- let l = !1, c = 0, d = 0, h = 0, u = 0, p = 0, f = 0;
426
- this.onZoomedPointerDown = (v) => {
427
- v.preventDefault(), v.stopPropagation(), l = !0, c = v.pageX, d = v.pageY, t.setPointerCapture(v.pointerId);
428
- }, this.onZoomedPointerMove = (v) => {
429
- if (!l) return;
430
- v.preventDefault(), p = v.pageX - c, f = v.pageY - d;
431
- const E = parseInt((t == null ? void 0 : t.dataset.vistaviewCurrentWidth) || "0"), g = parseInt((t == null ? void 0 : t.dataset.vistaviewCurrentHeight) || "0"), { maxDiffX: b, minDiffY: C, maxDiffY: w, minDiffX: x } = H(
432
- E,
433
- g
434
- ), y = Math.min(b, Math.max(x, h + p)), I = Math.min(w, Math.max(C, u + f));
435
- p = y - h, f = I - u, t == null || t.style.setProperty("--pointer-diff-x", `${y}px`), t == null || t.style.setProperty("--pointer-diff-y", `${I}px`);
436
- }, this.onZoomedPointerUp = (v) => {
437
- l = !1, t.releasePointerCapture(v.pointerId), h += p, u += f, p = 0, f = 0;
438
- }, (r = t == null ? void 0 : t.parentElement) == null || r.addEventListener("pointerdown", this.onZoomedPointerDown), (a = t == null ? void 0 : t.parentElement) == null || a.addEventListener("pointermove", this.onZoomedPointerMove), (o = t == null ? void 0 : t.parentElement) == null || o.addEventListener("pointerup", this.onZoomedPointerUp);
439
- return;
440
- }
415
+ var n, e, r, l, o, c;
416
+ if (this.isZoomed === t) return;
417
+ let i = null;
418
+ if (this.isZoomed) {
419
+ i && cancelAnimationFrame(i);
420
+ let a = this.isZoomed;
421
+ if (a.classList.remove("vistaview-image--zooming"), this.onZoomedPointerDown && ((n = a.parentElement) == null || n.removeEventListener("pointerdown", this.onZoomedPointerDown), this.onZoomedPointerDown = null), this.onZoomedPointerMove && ((e = a.parentElement) == null || e.removeEventListener("pointermove", this.onZoomedPointerMove), this.onZoomedPointerMove = null), this.onZoomedPointerUp && ((r = a.parentElement) == null || r.removeEventListener("pointerup", this.onZoomedPointerUp), this.onZoomedPointerUp = null), a == null || a.style.removeProperty("--pointer-diff-x"), a == null || a.style.removeProperty("--pointer-diff-y"), setTimeout(() => {
422
+ a == null || a.classList.remove("vistaview-image--zooming");
423
+ }, 500), this.isZoomed = !1, !t) return;
424
+ }
425
+ if (t) {
426
+ let a = function({ speedX: m, speedY: g }) {
427
+ i = requestAnimationFrame(() => {
428
+ if (Math.abs(m) < 0.01 && Math.abs(g) < 0.01)
429
+ return;
430
+ const x = t, I = window.innerWidth / 2, P = window.innerHeight / 2, D = x.getBoundingClientRect(), X = D.bottom < P, Y = D.top > P, B = D.right < I, _ = D.left > I;
431
+ w += m, f += g, X && (f += (P - D.bottom) / C), Y && (f -= (D.top - P) / C), B && (w += (I - D.right) / C), _ && (w -= (D.left - I) / C), x == null || x.style.setProperty("--pointer-diff-x", `${w}px`), x == null || x.style.setProperty("--pointer-diff-y", `${f}px`), a({
432
+ speedX: m * (1 - E),
433
+ speedY: g * (1 - E)
434
+ });
435
+ });
436
+ };
437
+ 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");
438
+ let d = !1, h = 0, u = 0, w = 0, f = 0, v = 0, y = 0, b = 0, L = 15, C = 5, E = 0.1;
439
+ this.onZoomedPointerDown = (m) => {
440
+ i && cancelAnimationFrame(i), m.preventDefault(), m.stopPropagation(), d = !0, h = m.pageX, u = m.pageY, b = performance.now(), t.setPointerCapture(m.pointerId);
441
+ }, this.onZoomedPointerMove = (m) => {
442
+ d && (m.preventDefault(), v = m.pageX - h, y = m.pageY - u, t == null || t.style.setProperty("--pointer-diff-x", `${v + w}px`), t == null || t.style.setProperty("--pointer-diff-y", `${y + f}px`));
443
+ }, this.onZoomedPointerUp = (m) => {
444
+ if (d = !1, t.releasePointerCapture(m.pointerId), w += v, f += y, v === 0 && y === 0)
445
+ this.zoomIn();
446
+ else {
447
+ let g = performance.now() - b;
448
+ if (g === 0) return;
449
+ let x = (m.pageY - u) / g, I = (m.pageX - h) / g;
450
+ a({ speedX: I * L, speedY: x * L });
451
+ }
452
+ v = 0, y = 0;
453
+ }, (l = t == null ? void 0 : t.parentElement) == null || l.addEventListener("pointerdown", this.onZoomedPointerDown), (o = t == null ? void 0 : t.parentElement) == null || o.addEventListener("pointermove", this.onZoomedPointerMove), (c = t == null ? void 0 : t.parentElement) == null || c.addEventListener("pointerup", this.onZoomedPointerUp);
454
+ return;
441
455
  }
442
456
  }
443
457
  zoomIn() {
444
- var r, a, o, l, c;
458
+ var r, l, o, c, a;
445
459
  const t = (r = this.rootElm) == null ? void 0 : r.querySelector(
446
460
  '[data-vistaview-pos="0"] .vistaview-image-highres'
447
461
  ), i = t.width, n = t.height;
@@ -451,12 +465,12 @@ class ot {
451
465
  const d = Math.min(i + this.options.zoomStep, e);
452
466
  t.style.width = `${d}px`;
453
467
  const h = d / i * n;
454
- t.style.height = `${h}px`, (o = (a = this.rootElm) == null ? void 0 : a.querySelector("button.vistaview-zoom-out-btn")) == null || o.removeAttribute("disabled"), t.dataset.vistaviewCurrentWidth = d.toString(), t.dataset.vistaviewCurrentHeight = h.toString(), d === e && ((c = (l = this.rootElm) == null ? void 0 : l.querySelector("button.vistaview-zoom-in-btn")) == null || c.setAttribute("disabled", "true"));
468
+ t.style.height = `${h}px`, (o = (l = this.rootElm) == null ? void 0 : l.querySelector("button.vistaview-zoom-out-btn")) == null || o.removeAttribute("disabled"), t.dataset.vistaviewCurrentWidth = d.toString(), t.dataset.vistaviewCurrentHeight = h.toString(), d === e && ((a = (c = this.rootElm) == null ? void 0 : c.querySelector("button.vistaview-zoom-in-btn")) == null || a.setAttribute("disabled", "true"));
455
469
  }
456
470
  }
457
471
  zoomOut() {
458
- var a, o, l, c, d;
459
- const t = (a = this.rootElm) == null ? void 0 : a.querySelector(
472
+ var l, o, c, a, d;
473
+ const t = (l = this.rootElm) == null ? void 0 : l.querySelector(
460
474
  '[data-vistaview-pos="0"] .vistaview-image-highres'
461
475
  ), i = t.width, n = t.height, e = t.dataset.vistaviewInitialWidth ? parseInt(t.dataset.vistaviewInitialWidth) : 0, r = (h) => {
462
476
  h.target === t && (t.classList.remove("vistaview-image--zooming-out"), t.removeEventListener("transitionend", r));
@@ -465,14 +479,14 @@ class ot {
465
479
  const h = Math.max(i - this.options.zoomStep, e);
466
480
  t.style.width = `${h}px`;
467
481
  const u = h / i * n;
468
- t.style.height = `${u}px`, (l = (o = this.rootElm) == null ? void 0 : o.querySelector("button.vistaview-zoom-in-btn")) == null || l.removeAttribute("disabled"), t.dataset.vistaviewCurrentWidth = h.toString(), t.dataset.vistaviewCurrentHeight = u.toString();
469
- const { maxDiffX: p, minDiffY: f, maxDiffY: v, minDiffX: E } = H(h, u);
470
- let g = parseInt(
482
+ t.style.height = `${u}px`, (c = (o = this.rootElm) == null ? void 0 : o.querySelector("button.vistaview-zoom-in-btn")) == null || c.removeAttribute("disabled"), t.dataset.vistaviewCurrentWidth = h.toString(), t.dataset.vistaviewCurrentHeight = u.toString();
483
+ const { maxDiffX: w, minDiffY: f, maxDiffY: v, minDiffX: y } = j(h, u);
484
+ let b = parseInt(
471
485
  (t == null ? void 0 : t.style.getPropertyValue("--pointer-diff-x").replace("px", "")) || "0"
472
- ), b = parseInt(
486
+ ), L = parseInt(
473
487
  (t == null ? void 0 : t.style.getPropertyValue("--pointer-diff-y").replace("px", "")) || "0"
474
488
  );
475
- g = Math.min(p, Math.max(E, g)), b = Math.min(v, Math.max(f, b)), t == null || t.style.setProperty("--pointer-diff-x", `${g}px`), t == null || t.style.setProperty("--pointer-diff-y", `${b}px`), h === e && ((d = (c = this.rootElm) == null ? void 0 : c.querySelector("button.vistaview-zoom-out-btn")) == null || d.setAttribute("disabled", "true"), t.removeAttribute("data-vistaview-current-width"), t.removeAttribute("data-vistaview-current-height"), t.removeAttribute("data-vistaview-initial-width"), t.removeAttribute("data-vistaview-initial-height"), this.setZoomed(!1));
489
+ b = Math.min(w, Math.max(y, b)), L = Math.min(v, Math.max(f, L)), t == null || t.style.setProperty("--pointer-diff-x", `${b}px`), t == null || t.style.setProperty("--pointer-diff-y", `${L}px`), h === e && ((d = (a = this.rootElm) == null ? void 0 : a.querySelector("button.vistaview-zoom-out-btn")) == null || d.setAttribute("disabled", "true"), t.removeAttribute("data-vistaview-current-width"), t.removeAttribute("data-vistaview-current-height"), t.removeAttribute("data-vistaview-initial-width"), t.removeAttribute("data-vistaview-initial-height"), this.setZoomed(!1));
476
490
  }
477
491
  }
478
492
  clearZoom() {
@@ -481,11 +495,11 @@ class ot {
481
495
  return t.map((i, n) => {
482
496
  const e = this.elements[i];
483
497
  if (e instanceof HTMLElement) {
484
- const r = e.querySelector("img"), a = e.getAttribute("href") || "", o = e.getAttribute("src") || "", l = e.dataset.vistaviewSrc || a || o || (r == null ? void 0 : r.src) || "", c = e.dataset.vistaviewAlt || e.getAttribute("alt") || (r == null ? void 0 : r.alt) || "", d = e.dataset.vistaviewThumb || (r == null ? void 0 : r.src) || a || o || "";
498
+ const r = e.querySelector("img"), l = e.getAttribute("href") || "", o = e.getAttribute("src") || "", c = e.dataset.vistaviewSrc || l || o || (r == null ? void 0 : r.src) || "", a = e.dataset.vistaviewAlt || e.getAttribute("alt") || (r == null ? void 0 : r.alt) || "", d = e.dataset.vistaviewThumb || (r == null ? void 0 : r.src) || l || o || "";
485
499
  return {
486
500
  index: t[n],
487
- src: l,
488
- alt: c,
501
+ src: c,
502
+ alt: a,
489
503
  thumb: d,
490
504
  imageElm: e instanceof HTMLImageElement ? e : r,
491
505
  anchorElm: e instanceof HTMLAnchorElement ? e : void 0
@@ -495,14 +509,14 @@ class ot {
495
509
  });
496
510
  }
497
511
  setInitialDimPos() {
498
- var c, d;
512
+ var a, d;
499
513
  if (!this.rootElm) return;
500
- const t = (c = this.rootElm.querySelector('[data-vistaview-pos="0"]')) == null ? void 0 : c.dataset.vistaviewIndex, i = ((d = this.currentImages) == null ? void 0 : d.find((h) => h.index === Number(t))) || null;
514
+ const t = (a = this.rootElm.querySelector('[data-vistaview-pos="0"]')) == null ? void 0 : a.dataset.vistaviewIndex, i = ((d = this.currentImages) == null ? void 0 : d.find((h) => h.index === Number(t))) || null;
501
515
  if (!i) return;
502
- 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, a = (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, l = ((e == null ? void 0 : e.top) || (n == null ? void 0 : n.top) || 0) + a / 2;
503
- this.rootElm.style.setProperty("--vistaview-container-initial-width", r + "px"), this.rootElm.style.setProperty("--vistaview-container-initial-height", a + "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(
516
+ 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, l = (e == null ? void 0 : e.height) || (n == null ? void 0 : n.height) || 0, o = ((e == null ? void 0 : e.left) || (n == null ? void 0 : n.left) || 0) + r / 2, c = ((e == null ? void 0 : e.top) || (n == null ? void 0 : n.top) || 0) + l / 2;
517
+ this.rootElm.style.setProperty("--vistaview-container-initial-width", r + "px"), this.rootElm.style.setProperty("--vistaview-container-initial-height", l + "px"), this.rootElm.style.setProperty("--vistaview-container-initial-top", c + "px"), this.rootElm.style.setProperty("--vistaview-container-initial-left", o + "px"), this.rootElm.style.setProperty(
504
518
  "--vistaview-image-border-radius",
505
- T(e == null ? void 0 : e.borderRadius) || T(n == null ? void 0 : n.borderRadius) || "0px"
519
+ H(e == null ? void 0 : e.borderRadius) || H(n == null ? void 0 : n.borderRadius) || "0px"
506
520
  );
507
521
  }
508
522
  updateZoomButtonsVisibility() {
@@ -516,10 +530,10 @@ class ot {
516
530
  var d, h;
517
531
  const r = (d = i.rootElm) == null ? void 0 : d.querySelector(
518
532
  "button.vistaview-zoom-in-btn"
519
- ), a = (h = i.rootElm) == null ? void 0 : h.querySelector(
533
+ ), l = (h = i.rootElm) == null ? void 0 : h.querySelector(
520
534
  "button.vistaview-zoom-out-btn"
521
- ), o = parseInt(t.style.width) || t.width, l = t.naturalWidth * i.options.maxZoomLevel, c = o < l && l > 0;
522
- r && (r.style.display = c ? "" : "none"), a && (a.style.display = c ? "" : "none");
535
+ ), o = parseInt(t.style.width) || t.width, c = t.naturalWidth * i.options.maxZoomLevel, a = o < c && c > 0;
536
+ r && (r.style.display = a ? "" : "none"), l && (l.style.display = a ? "" : "none");
523
537
  }
524
538
  t.complete && t.naturalWidth > 0 ? n() : t.addEventListener("load", n);
525
539
  }
@@ -528,29 +542,32 @@ class ot {
528
542
  this.rootElm.querySelectorAll(
529
543
  ".vistaview-image-highres:not(.vistaview-image-loaded)"
530
544
  ).forEach((i, n) => {
531
- const e = i, a = this.currentImages[n].imageElm, o = { w: 0, h: 0 };
532
- if (a) {
533
- const { width: c, height: d } = _(a);
534
- o.w = Math.min(a.width, c), o.h = Math.min(a.height, d);
545
+ const e = i, l = this.currentImages[n].imageElm, o = { w: 0, h: 0 };
546
+ if (l) {
547
+ const { width: a, height: d } = K(l);
548
+ o.w = Math.min(l.width, a), o.h = Math.min(l.height, d);
535
549
  }
536
- const l = () => {
550
+ const c = () => {
537
551
  var d;
538
- const c = () => {
552
+ const a = () => {
539
553
  var h;
540
554
  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(() => {
541
555
  this.setFullSizeImageDim(e);
542
556
  }, 100), (h = i.parentElement) != null && h.matches('[data-vistaview-pos="0"]') && this.updateZoomButtonsVisibility();
543
557
  };
544
558
  if ((d = this.rootElm) != null && d.classList.contains("vistaview--opened"))
545
- c();
559
+ a();
546
560
  else {
547
561
  const h = setInterval(() => {
548
562
  var u;
549
- (u = this.rootElm) != null && u.classList.contains("vistaview--opened") && (clearInterval(h), c());
563
+ (u = this.rootElm) != null && u.classList.contains("vistaview--opened") && (clearInterval(h), a());
550
564
  }, 50);
551
565
  }
552
566
  };
553
- e.complete && e.naturalWidth > 0 ? l() : e.onload = l;
567
+ e.complete && e.naturalWidth > 0 ? c() : (e.onload = c, e.onerror = () => {
568
+ var a;
569
+ console.error("VistaView: failed to load image " + e.src), (a = e.parentElement) == null || a.classList.add("vistaview-image-load-failed");
570
+ });
554
571
  });
555
572
  }
556
573
  setIndexDisplay() {
@@ -564,12 +581,12 @@ class ot {
564
581
  .../* @__PURE__ */ new Set([
565
582
  ...Array.from(
566
583
  { length: i },
567
- (a, o) => ((t - i + o) % n + n) % n
584
+ (l, o) => ((t - i + o) % n + n) % n
568
585
  ),
569
586
  t,
570
- ...Array.from({ length: i }, (a, o) => (t + 1 + o) % n)
587
+ ...Array.from({ length: i }, (l, o) => (t + 1 + o) % n)
571
588
  ])
572
- ], r = n < 1 || !i ? [0] : e.map((a, o) => o - Math.floor(e.length / 2));
589
+ ], r = n < 1 || !i ? [0] : e.map((l, o) => o - Math.floor(e.length / 2));
573
590
  return {
574
591
  images: e,
575
592
  positions: r
@@ -604,28 +621,28 @@ class ot {
604
621
  ".vistaview-image-highres.vistaview-image-loaded"
605
622
  );
606
623
  t == null || t.forEach((n) => {
607
- const e = n, { width: r, height: a } = R(e);
608
- e.classList.contains("vistaview-image--zooming") ? (e.dataset.vistaviewInitialWidth = r.toString(), e.dataset.vistaviewInitialHeight = a.toString()) : (e.style.width = `${r}px`, e.style.height = `${a}px`);
624
+ const e = n, { width: r, height: l } = q(e);
625
+ e.classList.contains("vistaview-image--zooming") ? (e.dataset.vistaviewInitialWidth = r.toString(), e.dataset.vistaviewInitialHeight = l.toString()) : (e.style.width = `${r}px`, e.style.height = `${l}px`);
609
626
  });
610
627
  }, window.addEventListener("resize", this.onResizeHandler);
611
628
  }
612
629
  open(t = 0) {
613
- var o, l, c, d, h, u, p, f, v, E, g, b, C;
614
- if (L.somethingOpened) {
630
+ var o, c, a, d, h, u, w, f, v, y, b, L, C;
631
+ if (S.somethingOpened) {
615
632
  console.error("VistaView: another instance is already opened. Returning.");
616
633
  return;
617
634
  }
618
- if (L.somethingOpened = this, this.currentIndex._value = t, document.body.prepend(
619
- Q({
635
+ if (S.somethingOpened = this, this.currentIndex._value = t, document.body.prepend(
636
+ ot({
620
637
  controls: this.options.controls,
621
638
  isReducedMotion: this.isReducedMotion
622
639
  })
623
640
  ), this.rootElm = document.querySelector("#vistaview-root"), this.imageContainerElm = ((o = this.rootElm) == null ? void 0 : o.querySelector(".vistaview-image-container")) || null, !this.rootElm || !this.imageContainerElm)
624
- throw L.somethingOpened = null, new Error("Failed to create VistaView element");
641
+ throw S.somethingOpened = null, new Error("Failed to create VistaView element");
625
642
  this.options.arrowOnSmallScreens || this.rootElm.classList.add("vistaview-no-arrows-sm");
626
643
  const { images: i, positions: n } = this.getCurrentIndexes(t);
627
644
  this.currentImages = this.getImages(i);
628
- const e = this.currentImages.map((w, x) => q(w, n[x]));
645
+ const e = this.currentImages.map((E, m) => k(E, n[m]));
629
646
  this.currentItems = e;
630
647
  const r = {
631
648
  htmlElements: { from: null, to: this.currentItems },
@@ -634,30 +651,30 @@ class ot {
634
651
  via: this.currentIndex.via,
635
652
  vistaView: this
636
653
  };
637
- this.userSetup(r), this.imageContainerElm.innerHTML = "", this.currentItems.forEach((w) => {
638
- this.imageContainerElm.appendChild(w);
654
+ this.userSetup(r), this.imageContainerElm.innerHTML = "", this.currentItems.forEach((E) => {
655
+ this.imageContainerElm.appendChild(E);
639
656
  });
640
- let a = 0;
641
- this.rootElm.addEventListener("animationend", (w) => {
642
- var x;
643
- w.currentTarget === this.rootElm && (a++, a >= 2 && ((x = this.rootElm) == null || x.classList.add("vistaview--opened")));
644
- }), (l = this.rootElm.querySelector(".vistaview-close-btn")) == null || l.addEventListener("click", () => this.close()), (c = this.rootElm.querySelector(".vistaview-zoom-in-btn")) == null || c.addEventListener("click", () => this.zoomIn()), (d = this.rootElm.querySelector(".vistaview-zoom-out-btn")) == null || d.addEventListener("click", () => this.zoomOut()), (h = this.rootElm.querySelector(".vistaview-prev-btn>button")) == null || h.addEventListener("click", () => this.prev()), (u = this.rootElm.querySelector(".vistaview-next-btn>button")) == null || u.addEventListener("click", () => this.next()), [
657
+ let l = 0;
658
+ this.rootElm.addEventListener("animationend", (E) => {
659
+ var m;
660
+ E.currentTarget === this.rootElm && (l++, l >= 2 && ((m = this.rootElm) == null || m.classList.add("vistaview--opened")));
661
+ }), (c = this.rootElm.querySelector(".vistaview-close-btn")) == null || c.addEventListener("click", () => this.close()), (a = this.rootElm.querySelector(".vistaview-zoom-in-btn")) == null || a.addEventListener("click", () => this.zoomIn()), (d = this.rootElm.querySelector(".vistaview-zoom-out-btn")) == null || d.addEventListener("click", () => this.zoomOut()), (h = this.rootElm.querySelector(".vistaview-prev-btn>button")) == null || h.addEventListener("click", () => this.prev()), (u = this.rootElm.querySelector(".vistaview-next-btn>button")) == null || u.addEventListener("click", () => this.next()), [
645
662
  ...this.options.controls.topLeft || [],
646
663
  ...this.options.controls.topRight || [],
647
664
  ...this.options.controls.topCenter || [],
648
665
  ...this.options.controls.bottomCenter || [],
649
666
  ...this.options.controls.bottomLeft || [],
650
667
  ...this.options.controls.bottomRight || []
651
- ].forEach((w) => {
652
- typeof w != "string" && (this.customControls[w.name] = w);
653
- }), this.rootElm.querySelectorAll("button[data-vistaview-custom-control]").forEach((w) => {
654
- w.addEventListener("click", (x) => {
655
- const y = this.customControls[x.currentTarget.dataset.vistaviewCustomControl], I = this.currentImages.find(
656
- (D) => D.index === this.currentIndex.value
668
+ ].forEach((E) => {
669
+ typeof E != "string" && (this.customControls[E.name] = E);
670
+ }), this.rootElm.querySelectorAll("button[data-vistaview-custom-control]").forEach((E) => {
671
+ E.addEventListener("click", (m) => {
672
+ const g = this.customControls[m.currentTarget.dataset.vistaviewCustomControl], x = this.currentImages.find(
673
+ (I) => I.index === this.currentIndex.value
657
674
  );
658
- y && I && (y.onClick.constructor.name === "AsyncFunction" ? (w.classList.add("vistaview-button--loading"), y.onClick(I).finally(() => {
659
- w.classList.remove("vistaview-button--loading");
660
- })) : y.onClick(I));
675
+ g && x && (g.onClick.constructor.name === "AsyncFunction" ? (E.classList.add("vistaview-button--loading"), g.onClick(x).finally(() => {
676
+ E.classList.remove("vistaview-button--loading");
677
+ })) : g.onClick(x));
661
678
  });
662
679
  }), this.options.animationDurationBase && this.rootElm.style.setProperty(
663
680
  "--vistaview-animation-duration",
@@ -665,17 +682,17 @@ class ot {
665
682
  ), this.options.initialZIndex !== void 0 && this.rootElm.style.setProperty(
666
683
  "--vistaview-initial-z-index",
667
684
  `${this.options.initialZIndex}`
668
- ), this.setInitialDimPos(), this.setResizeListeners(), this.options.keyboardListeners && this.setKeyboardListeners(), this.elements.length === 1 && ((p = this.rootElm.querySelector(".vistaview-prev-btn")) == null || p.classList.add("vistaview-ui--none"), (f = this.rootElm.querySelector(".vistaview-next-btn")) == null || f.classList.add("vistaview-ui--none"), (v = this.rootElm.querySelector(".vistaview-index-display")) == null || v.classList.add("vistaview-ui--none")), this.rootElm && this.rootElm.classList.add("vistaview--initialized"), this.loadImages(), this.setCurrentDescription(), this.setIndexDisplay(), this.userInit(this), (g = (E = this.options).onOpen) == null || g.call(E, r), (C = (b = this.options).onImageView) == null || C.call(b, r);
685
+ ), this.setInitialDimPos(), this.setResizeListeners(), this.options.keyboardListeners && this.setKeyboardListeners(), this.elements.length === 1 && ((w = this.rootElm.querySelector(".vistaview-prev-btn")) == null || w.classList.add("vistaview-ui--none"), (f = this.rootElm.querySelector(".vistaview-next-btn")) == null || f.classList.add("vistaview-ui--none"), (v = this.rootElm.querySelector(".vistaview-index-display")) == null || v.classList.add("vistaview-ui--none")), this.rootElm && this.rootElm.classList.add("vistaview--initialized"), this.loadImages(), this.setCurrentDescription(), this.setIndexDisplay(), this.userInit(this), (b = (y = this.options).onOpen) == null || b.call(y, r), (C = (L = this.options).onImageView) == null || C.call(L, r);
669
686
  }
670
687
  async close(t = !0) {
671
688
  var n, e, r;
672
- if (L.somethingOpened !== this) return;
673
- t && ((n = this.rootElm) == null || n.classList.add("vistaview--closing"), await new Promise((a) => {
674
- var l;
689
+ if (S.somethingOpened !== this) return;
690
+ t && ((n = this.rootElm) == null || n.classList.add("vistaview--closing"), await new Promise((l) => {
691
+ var c;
675
692
  let o;
676
- (l = this.rootElm) == null || l.addEventListener("transitionend", (c) => {
677
- c.currentTarget === this.rootElm && (o && clearTimeout(o), o = setTimeout(() => {
678
- a();
693
+ (c = this.rootElm) == null || c.addEventListener("transitionend", (a) => {
694
+ a.currentTarget === this.rootElm && (o && clearTimeout(o), o = setTimeout(() => {
695
+ l();
679
696
  }, 333));
680
697
  });
681
698
  }));
@@ -687,9 +704,9 @@ class ot {
687
704
  vistaView: this
688
705
  };
689
706
  this.userClose(this), (r = (e = this.options).onClose) == null || r.call(e, i), document.body.removeChild(this.rootElm), this.currentIndex._value = null, this.currentIndex._via = { next: !1, prev: !1 }, this.rootElm = null, this.imageContainerElm = null, this.currentImages = null, this.currentItems = null, this.onResizeHandler && (window.removeEventListener("resize", this.onResizeHandler), this.onResizeHandler = null), this.onKeyDown && (window.removeEventListener("keydown", this.onKeyDown), this.onKeyDown = null), (this.onZoomedPointerDown || this.onZoomedPointerMove || this.onZoomedPointerUp) && (this.setZoomed(!1), this.onZoomedPointerDown = null, this.onZoomedPointerMove = null, this.onZoomedPointerUp = null);
690
- for (const a in this.transitionAbortControllers)
691
- this.transitionAbortControllers[a].abort();
692
- this.transitionAbortControllers = {}, L.somethingOpened = null;
707
+ for (const l in this.transitionAbortControllers)
708
+ this.transitionAbortControllers[l].abort();
709
+ this.transitionAbortControllers = {}, S.somethingOpened = null;
693
710
  }
694
711
  destroy() {
695
712
  this.close(!1), this.elements instanceof NodeList && this.elements.forEach((t) => {
@@ -697,19 +714,19 @@ class ot {
697
714
  });
698
715
  }
699
716
  view(t, i) {
700
- L.somethingOpened === this && (t < 0 && (t = this.elements.length - 1), t >= this.elements.length && (t = 0), this.currentIndex.via = i || { next: !1, prev: !1 }, this.currentIndex.value = t);
717
+ S.somethingOpened === this && (t < 0 && (t = this.elements.length - 1), t >= this.elements.length && (t = 0), this.currentIndex.via = i || { next: !1, prev: !1 }, this.currentIndex.value = t);
701
718
  }
702
719
  next() {
703
- L.somethingOpened === this && this.view(this.currentIndex.value + 1, { next: !0, prev: !1 });
720
+ S.somethingOpened === this && this.view(this.currentIndex.value + 1, { next: !0, prev: !1 });
704
721
  }
705
722
  prev() {
706
- L.somethingOpened === this && this.view(this.currentIndex.value - 1, { next: !1, prev: !0 });
723
+ S.somethingOpened === this && this.view(this.currentIndex.value - 1, { next: !1, prev: !0 });
707
724
  }
708
725
  getCurrentIndex() {
709
- return L.somethingOpened === this ? this.currentIndex.value : -1;
726
+ return S.somethingOpened === this ? this.currentIndex.value : -1;
710
727
  }
711
728
  }
712
- function rt(s) {
729
+ function ut(s) {
713
730
  let t = null;
714
731
  if (typeof s == "string" ? t = document.querySelectorAll(s) : s instanceof NodeList && (t = s), t)
715
732
  for (let i = 0; i < t.length; i++) {
@@ -725,12 +742,12 @@ function rt(s) {
725
742
  }
726
743
  return t || s;
727
744
  }
728
- function lt({ elements: s, ...t }) {
745
+ function mt({ elements: s, ...t }) {
729
746
  if (!s) throw new Error("No elements");
730
- let i = rt(s);
747
+ let i = ut(s);
731
748
  if (typeof i == "string")
732
749
  return console.error(i), console.warn("VistaView: silently returning."), null;
733
- const n = new ot(i, t);
750
+ const n = new ht(i, t);
734
751
  return {
735
752
  open: (e = 0) => n.open(e),
736
753
  close: () => n.close(),
@@ -744,14 +761,14 @@ function lt({ elements: s, ...t }) {
744
761
  };
745
762
  }
746
763
  export {
747
- k as DefaultOptions,
748
- P as VistaViewTransitionAbortedError,
749
- st as defaultClose,
750
- et as defaultInit,
751
- it as defaultSetup,
752
- nt as defaultTransition,
753
- O as removeTouchActions,
754
- tt as setTouchActions,
755
- lt as vistaView,
756
- G as vistaViewDownload
764
+ W as DefaultOptions,
765
+ z as VistaViewTransitionAbortedError,
766
+ ct as defaultClose,
767
+ at as defaultInit,
768
+ lt as defaultSetup,
769
+ dt as defaultTransition,
770
+ F as removeTouchActions,
771
+ rt as setTouchActions,
772
+ mt as vistaView,
773
+ nt as vistaViewDownload
757
774
  };