vistaview 0.3.15 → 0.5.3

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/README.md +9 -7
  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.js +301 -287
  7. package/dist/vistaview.umd.js +6 -6
  8. 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 h = { width: r, height: a }, d = o > l ? { width: n, height: n / o } : { width: e * o, height: e };
61
- return d.width <= h.width && d.height <= h.height ? d : h;
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, h = -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: h,
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>', V = '<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
- 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">${N}</button>`;
107
+ return `<button class="vistaview-zoom-in-btn">${Q}</button>`;
108
108
  case "zoomOut":
109
- return `<button disabled class="vistaview-zoom-out-btn">${U}</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) {
122
- var d, c;
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 = ((c = s.imageElm) == null ? void 0 : c.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 h = W(`<img class="vistaview-image-lowres"
126
- style="${n ? `object-fit:${n};` : ""}${a ? `width:${a};` : ""}${o ? `height:${o};` : ""}"
121
+ function k(s, t) {
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) || "", 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(h), 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>${V}</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, h = !1;
158
- $ = (d) => {
159
- d.preventDefault(), d.stopPropagation(), s.isZoomed === !1 && (h = !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 || !h) return;
162
- const c = d.pageX - n, u = d.pageY - e;
163
- r = d.pageX, a = d.pageY, Math.abs(c) >= Math.abs(u) && (o === null || o === !0) ? (t.style.setProperty("--vistaview-pointer-diff-x", `${c}px`), o = !0) : Math.abs(u) > Math.abs(c) && (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 || !h) return;
166
- h = !1, o = null;
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((u) => {
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
+ const h = d.pageX - n, u = d.pageY - e;
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
+ const h = Array.from(t.querySelectorAll(".vistaview-item"));
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 || !h) return;
173
- h = !1;
174
- const c = 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 = c.find(
175
- (y) => y.dataset.vistaviewPos === "0"
176
- ), C = Number(b.dataset.vistaviewIndex);
177
- function w() {
178
- c[0].removeEventListener("transitionend", w), t.style.removeProperty("--vistaview-pointer-diff-x"), t.style.removeProperty("--vistaview-pointer-diff-y"), c.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
- c.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
- c[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%"), c[0].addEventListener("transitionend", y);
201
- } else E < -g || E > g ? (s.close(), x("0%", "0%")) : (c[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, h = !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
- const d = (c) => {
235
- if (h) return o(new P("Transition aborted"));
234
+ const d = (h) => {
235
+ if (a) return o(new z("Transition aborted"));
236
236
  if (e.aborted)
237
- return h || (h = !0), o(new P("Transition aborted"));
238
- c.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
- r.forEach((c) => {
241
- c.style.transition = `translate ${n.options.animationDurationBase * 0.5}ms ease-out`, c.style.translate = t ? "-100%" : i ? "100%" : "0%", c.addEventListener("transitionend", d);
240
+ r.forEach((h) => {
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 h, d;
364
- o++, !(o < 3) && (t.removeEventListener("transitionend", l), (d = (h = t.parentElement) == null ? void 0 : h.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
- var d, c;
373
- if (!L.somethingOpened || t === i || t === null) return;
372
+ var d, h;
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 h = a.find((u) => u.dataset.vistaviewPos === "0");
393
- if (h) {
394
- const u = h.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 = h.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(), (c = (d = this.options).onImageView) == null || c.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, h = 0, d = 0, c = 0, u = 0, p = 0, f = 0;
426
- this.onZoomedPointerDown = (v) => {
427
- v.preventDefault(), v.stopPropagation(), l = !0, h = v.pageX, d = v.pageY, t.setPointerCapture(v.pointerId);
428
- }, this.onZoomedPointerMove = (v) => {
429
- if (!l) return;
430
- v.preventDefault(), p = v.pageX - h, 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, c + p)), I = Math.min(w, Math.max(C, u + f));
435
- p = y - c, 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), c += 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, h;
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;
@@ -450,29 +464,29 @@ class ot {
450
464
  if (i && e && i < e) {
451
465
  const d = Math.min(i + this.options.zoomStep, e);
452
466
  t.style.width = `${d}px`;
453
- const c = d / i * n;
454
- t.style.height = `${c}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 = c.toString(), d === e && ((h = (l = this.rootElm) == null ? void 0 : l.querySelector("button.vistaview-zoom-in-btn")) == null || h.setAttribute("disabled", "true"));
467
+ const h = d / i * n;
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, h, 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
- ), i = t.width, n = t.height, e = t.dataset.vistaviewInitialWidth ? parseInt(t.dataset.vistaviewInitialWidth) : 0, r = (c) => {
462
- c.target === t && (t.classList.remove("vistaview-image--zooming-out"), t.removeEventListener("transitionend", r));
475
+ ), i = t.width, n = t.height, e = t.dataset.vistaviewInitialWidth ? parseInt(t.dataset.vistaviewInitialWidth) : 0, r = (h) => {
476
+ h.target === t && (t.classList.remove("vistaview-image--zooming-out"), t.removeEventListener("transitionend", r));
463
477
  };
464
478
  if (t.addEventListener("transitionend", r), t.classList.add("vistaview-image--zooming-out"), i && e && i > e) {
465
- const c = Math.max(i - this.options.zoomStep, e);
466
- t.style.width = `${c}px`;
467
- const u = c / 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 = c.toString(), t.dataset.vistaviewCurrentHeight = u.toString();
469
- const { maxDiffX: p, minDiffY: f, maxDiffY: v, minDiffX: E } = H(c, u);
470
- let g = parseInt(
479
+ const h = Math.max(i - this.options.zoomStep, e);
480
+ t.style.width = `${h}px`;
481
+ const u = h / i * n;
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`), c === e && ((d = (h = this.rootElm) == null ? void 0 : h.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) || "", h = 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: h,
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 h, d;
512
+ var a, d;
499
513
  if (!this.rootElm) return;
500
- const t = (h = this.rootElm.querySelector('[data-vistaview-pos="0"]')) == null ? void 0 : h.dataset.vistaviewIndex, i = ((d = this.currentImages) == null ? void 0 : d.find((c) => c.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() {
@@ -513,13 +527,13 @@ class ot {
513
527
  if (!t) return;
514
528
  const i = this;
515
529
  function n() {
516
- var d, c;
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 = (c = i.rootElm) == null ? void 0 : c.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, h = o < l && l > 0;
522
- r && (r.style.display = h ? "" : "none"), a && (a.style.display = h ? "" : "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,31 +542,31 @@ 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: h, height: d } = _(a);
534
- o.w = Math.min(a.width, h), 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 h = () => {
539
- var c;
552
+ const a = () => {
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
- }, 100), (c = i.parentElement) != null && c.matches('[data-vistaview-pos="0"]') && this.updateZoomButtonsVisibility();
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
- h();
559
+ a();
546
560
  else {
547
- const c = setInterval(() => {
561
+ const h = setInterval(() => {
548
562
  var u;
549
- (u = this.rootElm) != null && u.classList.contains("vistaview--opened") && (clearInterval(c), h());
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, e.onerror = () => {
554
- var h;
555
- console.error("VistaView: failed to load image " + e.src), (h = e.parentElement) == null || h.classList.add("vistaview-image-load-failed");
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");
556
570
  });
557
571
  });
558
572
  }
@@ -567,12 +581,12 @@ class ot {
567
581
  .../* @__PURE__ */ new Set([
568
582
  ...Array.from(
569
583
  { length: i },
570
- (a, o) => ((t - i + o) % n + n) % n
584
+ (l, o) => ((t - i + o) % n + n) % n
571
585
  ),
572
586
  t,
573
- ...Array.from({ length: i }, (a, o) => (t + 1 + o) % n)
587
+ ...Array.from({ length: i }, (l, o) => (t + 1 + o) % n)
574
588
  ])
575
- ], 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));
576
590
  return {
577
591
  images: e,
578
592
  positions: r
@@ -607,28 +621,28 @@ class ot {
607
621
  ".vistaview-image-highres.vistaview-image-loaded"
608
622
  );
609
623
  t == null || t.forEach((n) => {
610
- const e = n, { width: r, height: a } = R(e);
611
- 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`);
612
626
  });
613
627
  }, window.addEventListener("resize", this.onResizeHandler);
614
628
  }
615
629
  open(t = 0) {
616
- var o, l, h, d, c, u, p, f, v, E, g, b, C;
617
- if (L.somethingOpened) {
630
+ var o, c, a, d, h, u, w, f, v, y, b, L, C;
631
+ if (S.somethingOpened) {
618
632
  console.error("VistaView: another instance is already opened. Returning.");
619
633
  return;
620
634
  }
621
- if (L.somethingOpened = this, this.currentIndex._value = t, document.body.prepend(
622
- Q({
635
+ if (S.somethingOpened = this, this.currentIndex._value = t, document.body.prepend(
636
+ ot({
623
637
  controls: this.options.controls,
624
638
  isReducedMotion: this.isReducedMotion
625
639
  })
626
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)
627
- throw L.somethingOpened = null, new Error("Failed to create VistaView element");
641
+ throw S.somethingOpened = null, new Error("Failed to create VistaView element");
628
642
  this.options.arrowOnSmallScreens || this.rootElm.classList.add("vistaview-no-arrows-sm");
629
643
  const { images: i, positions: n } = this.getCurrentIndexes(t);
630
644
  this.currentImages = this.getImages(i);
631
- const e = this.currentImages.map((w, x) => q(w, n[x]));
645
+ const e = this.currentImages.map((E, m) => k(E, n[m]));
632
646
  this.currentItems = e;
633
647
  const r = {
634
648
  htmlElements: { from: null, to: this.currentItems },
@@ -637,30 +651,30 @@ class ot {
637
651
  via: this.currentIndex.via,
638
652
  vistaView: this
639
653
  };
640
- this.userSetup(r), this.imageContainerElm.innerHTML = "", this.currentItems.forEach((w) => {
641
- this.imageContainerElm.appendChild(w);
654
+ this.userSetup(r), this.imageContainerElm.innerHTML = "", this.currentItems.forEach((E) => {
655
+ this.imageContainerElm.appendChild(E);
642
656
  });
643
- let a = 0;
644
- this.rootElm.addEventListener("animationend", (w) => {
645
- var x;
646
- w.currentTarget === this.rootElm && (a++, a >= 2 && ((x = this.rootElm) == null || x.classList.add("vistaview--opened")));
647
- }), (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()), (d = this.rootElm.querySelector(".vistaview-zoom-out-btn")) == null || d.addEventListener("click", () => this.zoomOut()), (c = this.rootElm.querySelector(".vistaview-prev-btn>button")) == null || c.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()), [
648
662
  ...this.options.controls.topLeft || [],
649
663
  ...this.options.controls.topRight || [],
650
664
  ...this.options.controls.topCenter || [],
651
665
  ...this.options.controls.bottomCenter || [],
652
666
  ...this.options.controls.bottomLeft || [],
653
667
  ...this.options.controls.bottomRight || []
654
- ].forEach((w) => {
655
- typeof w != "string" && (this.customControls[w.name] = w);
656
- }), this.rootElm.querySelectorAll("button[data-vistaview-custom-control]").forEach((w) => {
657
- w.addEventListener("click", (x) => {
658
- const y = this.customControls[x.currentTarget.dataset.vistaviewCustomControl], I = this.currentImages.find(
659
- (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
660
674
  );
661
- y && I && (y.onClick.constructor.name === "AsyncFunction" ? (w.classList.add("vistaview-button--loading"), y.onClick(I).finally(() => {
662
- w.classList.remove("vistaview-button--loading");
663
- })) : 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));
664
678
  });
665
679
  }), this.options.animationDurationBase && this.rootElm.style.setProperty(
666
680
  "--vistaview-animation-duration",
@@ -668,17 +682,17 @@ class ot {
668
682
  ), this.options.initialZIndex !== void 0 && this.rootElm.style.setProperty(
669
683
  "--vistaview-initial-z-index",
670
684
  `${this.options.initialZIndex}`
671
- ), 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);
672
686
  }
673
687
  async close(t = !0) {
674
688
  var n, e, r;
675
- if (L.somethingOpened !== this) return;
676
- t && ((n = this.rootElm) == null || n.classList.add("vistaview--closing"), await new Promise((a) => {
677
- 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;
678
692
  let o;
679
- (l = this.rootElm) == null || l.addEventListener("transitionend", (h) => {
680
- h.currentTarget === this.rootElm && (o && clearTimeout(o), o = setTimeout(() => {
681
- a();
693
+ (c = this.rootElm) == null || c.addEventListener("transitionend", (a) => {
694
+ a.currentTarget === this.rootElm && (o && clearTimeout(o), o = setTimeout(() => {
695
+ l();
682
696
  }, 333));
683
697
  });
684
698
  }));
@@ -690,9 +704,9 @@ class ot {
690
704
  vistaView: this
691
705
  };
692
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);
693
- for (const a in this.transitionAbortControllers)
694
- this.transitionAbortControllers[a].abort();
695
- this.transitionAbortControllers = {}, L.somethingOpened = null;
707
+ for (const l in this.transitionAbortControllers)
708
+ this.transitionAbortControllers[l].abort();
709
+ this.transitionAbortControllers = {}, S.somethingOpened = null;
696
710
  }
697
711
  destroy() {
698
712
  this.close(!1), this.elements instanceof NodeList && this.elements.forEach((t) => {
@@ -700,19 +714,19 @@ class ot {
700
714
  });
701
715
  }
702
716
  view(t, i) {
703
- 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);
704
718
  }
705
719
  next() {
706
- 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 });
707
721
  }
708
722
  prev() {
709
- 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 });
710
724
  }
711
725
  getCurrentIndex() {
712
- return L.somethingOpened === this ? this.currentIndex.value : -1;
726
+ return S.somethingOpened === this ? this.currentIndex.value : -1;
713
727
  }
714
728
  }
715
- function rt(s) {
729
+ function ut(s) {
716
730
  let t = null;
717
731
  if (typeof s == "string" ? t = document.querySelectorAll(s) : s instanceof NodeList && (t = s), t)
718
732
  for (let i = 0; i < t.length; i++) {
@@ -728,12 +742,12 @@ function rt(s) {
728
742
  }
729
743
  return t || s;
730
744
  }
731
- function lt({ elements: s, ...t }) {
745
+ function mt({ elements: s, ...t }) {
732
746
  if (!s) throw new Error("No elements");
733
- let i = rt(s);
747
+ let i = ut(s);
734
748
  if (typeof i == "string")
735
749
  return console.error(i), console.warn("VistaView: silently returning."), null;
736
- const n = new ot(i, t);
750
+ const n = new ht(i, t);
737
751
  return {
738
752
  open: (e = 0) => n.open(e),
739
753
  close: () => n.close(),
@@ -747,14 +761,14 @@ function lt({ elements: s, ...t }) {
747
761
  };
748
762
  }
749
763
  export {
750
- k as DefaultOptions,
751
- P as VistaViewTransitionAbortedError,
752
- st as defaultClose,
753
- et as defaultInit,
754
- it as defaultSetup,
755
- nt as defaultTransition,
756
- O as removeTouchActions,
757
- tt as setTouchActions,
758
- lt as vistaView,
759
- 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
760
774
  };