vistaview 0.3.3 → 0.3.5

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 (11) hide show
  1. package/README.md +37 -0
  2. package/dist/lib/defaults.d.ts.map +1 -1
  3. package/dist/lib/types.d.ts +1 -0
  4. package/dist/lib/types.d.ts.map +1 -1
  5. package/dist/lib/vista-view.d.ts +1 -0
  6. package/dist/lib/vista-view.d.ts.map +1 -1
  7. package/dist/vistaview.cjs +6 -6
  8. package/dist/vistaview.css +1 -1
  9. package/dist/vistaview.js +251 -242
  10. package/dist/vistaview.umd.js +6 -6
  11. package/package.json +3 -2
package/dist/vistaview.js CHANGED
@@ -1,7 +1,7 @@
1
- var k = Object.defineProperty;
2
- var O = (s, t, e) => t in s ? k(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
3
- var f = (s, t, e) => O(s, typeof t != "symbol" ? t + "" : t, e);
4
- function Z(s) {
1
+ var Y = Object.defineProperty;
2
+ var _ = (s, t, e) => t in s ? Y(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
3
+ var p = (s, t, e) => _(s, typeof t != "symbol" ? t + "" : t, e);
4
+ function A(s) {
5
5
  const t = getComputedStyle(s), e = s.getBoundingClientRect();
6
6
  return {
7
7
  objectFit: t.objectFit,
@@ -17,7 +17,7 @@ function Z(s) {
17
17
  };
18
18
  }
19
19
  let D = null;
20
- function X() {
20
+ function B() {
21
21
  return D || (window.trustedTypes || (window.trustedTypes = {
22
22
  createPolicy: (s, t) => t
23
23
  }), D = window.trustedTypes.createPolicy("vistaView-policy", {
@@ -31,34 +31,34 @@ function X() {
31
31
  }
32
32
  }), D);
33
33
  }
34
- function T(s) {
35
- const e = X().createHTML(s), n = document.createElement("template");
34
+ function k(s) {
35
+ const e = B().createHTML(s), n = document.createElement("template");
36
36
  n.innerHTML = e;
37
37
  const i = n.content;
38
38
  return n.remove(), i;
39
39
  }
40
- function z(s) {
40
+ function R(s) {
41
41
  return s && !/^0(px|%|r?em|vw|vh|vmin|vmax|cm|mm|in|pt|pc|ex|ch)?$/i.test(s.trim()) && s;
42
42
  }
43
- function A(s) {
44
- const e = window.getComputedStyle(s).objectFit || "", { width: n, height: i } = s.getBoundingClientRect(), o = s.naturalWidth, l = s.naturalHeight;
43
+ function H(s) {
44
+ const e = window.getComputedStyle(s).objectFit || "", { width: n, height: i } = s.getBoundingClientRect(), o = s.naturalWidth, h = s.naturalHeight;
45
45
  if (!e)
46
46
  return { width: n, height: i };
47
- if (!o || !l)
47
+ if (!o || !h)
48
48
  return { width: n, height: i };
49
- const a = o / l, r = n / i;
49
+ const r = o / h, a = n / i;
50
50
  switch (e) {
51
51
  case "fill":
52
52
  return { width: n, height: i };
53
53
  case "none":
54
- return { width: o, height: l };
54
+ return { width: o, height: h };
55
55
  case "contain":
56
- return a > r ? { width: n, height: n / a } : { width: i * a, height: i };
56
+ return r > a ? { width: n, height: n / r } : { width: i * r, height: i };
57
57
  case "cover":
58
- return a < r ? { width: n, height: n / a } : { width: i * a, height: i };
58
+ return r < a ? { width: n, height: n / r } : { width: i * r, height: i };
59
59
  case "scale-down": {
60
- const h = { width: o, height: l }, c = a > r ? { width: n, height: n / a } : { width: i * a, height: i };
61
- return c.width <= h.width && c.height <= h.height ? c : h;
60
+ const c = { width: o, height: h }, l = r > a ? { width: n, height: n / r } : { width: i * r, height: i };
61
+ return l.width <= c.width && l.height <= c.height ? l : c;
62
62
  }
63
63
  }
64
64
  return { width: n, height: i };
@@ -72,27 +72,27 @@ function P(s) {
72
72
  width: n,
73
73
  height: i
74
74
  };
75
- const o = n / i, l = t / e;
76
- let a, r;
77
- return o > l ? (a = t, r = t / o) : (r = e, a = e * o), {
78
- width: a,
79
- height: r
75
+ const o = n / i, h = t / e;
76
+ let r, a;
77
+ return o > h ? (r = t, a = t / o) : (a = e, r = e * o), {
78
+ width: r,
79
+ height: a
80
80
  };
81
81
  }
82
- function R(s, t) {
83
- const e = window.innerHeight, n = window.innerWidth, i = s, o = t, l = Math.max(0, (i - n) / 2) + n / 2, a = Math.max(0, (o - e) / 2) + e / 2, r = -l, h = -a;
82
+ function W(s, t) {
83
+ const e = window.innerHeight, n = window.innerWidth, i = s, o = t, h = Math.max(0, (i - n) / 2) + n / 2, r = Math.max(0, (o - e) / 2) + e / 2, a = -h, c = -r;
84
84
  return {
85
- maxDiffX: l,
86
- minDiffY: h,
87
- maxDiffY: a,
88
- minDiffX: r
85
+ maxDiffX: h,
86
+ minDiffY: c,
87
+ maxDiffY: r,
88
+ minDiffX: a
89
89
  };
90
90
  }
91
- const _ = '<svg viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>', B = '<svg viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>', F = '<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>', Y = '<svg viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>', U = '<svg viewBox="0 0 24 24"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>';
92
- function N() {
91
+ const F = '<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>', 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>', N = '<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="8" x2="14" y1="11" y2="11"/></svg>', j = '<svg viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>', K = '<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() {
93
93
  return {
94
94
  name: "download",
95
- icon: U,
95
+ icon: K,
96
96
  onClick: async (s) => {
97
97
  var o;
98
98
  const t = await fetch(s.src), e = await t.blob(), n = t.url, i = document.createElement("a");
@@ -100,15 +100,15 @@ function N() {
100
100
  }
101
101
  };
102
102
  }
103
- function j(s) {
103
+ function J(s) {
104
104
  if (typeof s == "string")
105
105
  switch (s) {
106
106
  case "zoomIn":
107
- return `<button class="vistaview-zoom-in-btn">${F}</button>`;
107
+ return `<button class="vistaview-zoom-in-btn">${U}</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">${N}</button>`;
110
110
  case "close":
111
- return `<button class="vistaview-close-btn">${Y}</button>`;
111
+ return `<button class="vistaview-close-btn">${j}</button>`;
112
112
  case "indexDisplay":
113
113
  return '<div class="vistaview-index-display"></div>';
114
114
  case "description":
@@ -118,83 +118,90 @@ function j(s) {
118
118
  }
119
119
  return `<button data-vistaview-custom-control="${s.name}">${s.icon}</button>`;
120
120
  }
121
- function H(s, t) {
122
- var c, d;
123
- const e = s.imageElm ? getComputedStyle(s.imageElm) : null, n = (e == null ? void 0 : e.objectFit) || "", i = ((c = s.imageElm) == null ? void 0 : c.naturalWidth) || "", o = ((d = s.imageElm) == null ? void 0 : d.naturalHeight) || "", l = (e == null ? void 0 : e.width) || "", a = (e == null ? void 0 : e.height) || "", r = document.createElement("div");
124
- r.className = "vistaview-item", r.dataset.vistaviewPos = `${t !== void 0 ? t : ""}`, r.dataset.vistaviewIndex = s.index.toString();
125
- const h = T(`<img class="vistaview-image-lowres"
126
- style="${n ? `object-fit:${n};` : ""}${l ? `width:${l};` : ""}${a ? `height:${a};` : ""}"
121
+ function T(s, t) {
122
+ var l, d;
123
+ const e = s.imageElm ? getComputedStyle(s.imageElm) : null, n = (e == null ? void 0 : e.objectFit) || "", i = ((l = s.imageElm) == null ? void 0 : l.naturalWidth) || "", o = ((d = s.imageElm) == null ? void 0 : d.naturalHeight) || "", h = (e == null ? void 0 : e.width) || "", r = (e == null ? void 0 : e.height) || "", a = document.createElement("div");
124
+ a.className = "vistaview-item", a.dataset.vistaviewPos = `${t !== void 0 ? t : ""}`, a.dataset.vistaviewIndex = s.index.toString();
125
+ const c = k(`<img class="vistaview-image-lowres"
126
+ style="${n ? `object-fit:${n};` : ""}${h ? `width:${h};` : ""}${r ? `height:${r};` : ""}"
127
127
  src="${s.thumb || s.src}"
128
128
  alt="${s.alt || ""}"
129
129
  ${i ? `width="${i}"` : ""}
130
130
  ${o ? `height="${o}"` : ""}
131
131
  />
132
132
  <img class="vistaview-image-highres" src="${s.src}" alt="${s.alt || ""}" />`);
133
- return r.appendChild(h), r;
133
+ return a.appendChild(c), a;
134
134
  }
135
- function K({
135
+ function Q({
136
136
  controls: s,
137
137
  isReducedMotion: t
138
138
  }) {
139
- const e = (i) => i ? i.map(j).join("") : "";
140
- return T(
139
+ const e = (i) => i ? i.map(J).join("") : "";
140
+ return k(
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>${e(s == null ? void 0 : s.topLeft)}</div><div>${e(s == null ? void 0 : s.topCenter)}</div><div>${e(s == null ? void 0 : s.topRight)}</div></div>
145
145
  <div class="vistaview-bottom-bar vistaview-ui"><div>${e(s == null ? void 0 : s.bottomLeft)}</div><div>${e(s == null ? void 0 : s.bottomCenter)}</div><div>${e(s == null ? void 0 : s.bottomRight)}</div></div>
146
- <div class="vistaview-prev-btn vistaview-ui"><button>${_}</button></div>
147
- <div class="vistaview-next-btn vistaview-ui"><button>${B}</button></div>
146
+ <div class="vistaview-prev-btn vistaview-ui"><button>${F}</button></div>
147
+ <div class="vistaview-next-btn vistaview-ui"><button>${V}</button></div>
148
148
  </div>
149
149
  </div>`
150
150
  );
151
151
  }
152
- let $ = null, S = null, M = null;
153
- function G(s) {
154
- q(s);
152
+ let S = null, $ = null, M = null, Z = null;
153
+ function tt(s) {
154
+ O(s);
155
155
  const t = s.imageContainerElm, e = s.elements.length;
156
156
  if (!t) return;
157
- let n = 0, i = 0, o = 0, l = 0, a = !1;
158
- $ = (r) => {
159
- r.preventDefault(), r.stopPropagation(), s.isZoomed === !1 && (a = !0, n = r.pageX, i = r.pageY, o = r.pageX, l = Date.now());
160
- }, S = (r) => {
161
- if (r.preventDefault(), r.stopPropagation(), s.isZoomed !== !1 || !a) return;
162
- const h = r.pageX - n, c = r.pageY - i;
163
- o = r.pageX, t.style.setProperty("--vistaview-pointer-diff-x", `${h}px`), t.style.setProperty("--vistaview-pointer-diff-y", `${c}px`);
164
- }, M = (r) => {
165
- if (r.preventDefault(), r.stopPropagation(), s.isZoomed !== !1 || !a) return;
166
- a = !1;
167
- const h = Array.from(t.querySelectorAll(".vistaview-item")), c = o - n, d = Date.now() - l, v = c / d, u = s.options.touchSpeedThreshold || 0.7, g = h.find(
168
- (p) => p.dataset.vistaviewPos === "0"
169
- ), m = Number(g.dataset.vistaviewIndex), E = s.isReducedMotion;
170
- function w() {
171
- h[0].removeEventListener("transitionend", w), t.style.removeProperty("--vistaview-pointer-diff-x"), t.style.removeProperty("--vistaview-pointer-diff-y"), h.forEach((p) => {
172
- p.style.transition = "", p.style.translate = "";
157
+ let n = 0, i = 0, o = 0, h = 0, r = null, a = 0, c = !1;
158
+ S = (l) => {
159
+ l.preventDefault(), l.stopPropagation(), s.isZoomed === !1 && (c = !0, n = l.pageX, i = l.pageY, o = l.pageX, h = l.pageY, a = Date.now(), r = null, t.setPointerCapture(l.pointerId));
160
+ }, $ = (l) => {
161
+ if (l.preventDefault(), l.stopPropagation(), s.isZoomed !== !1 || !c) return;
162
+ const d = l.pageX - n, u = l.pageY - i;
163
+ o = l.pageX, h = l.pageY, Math.abs(d) >= Math.abs(u) && (r === null || r === !0) ? (t.style.setProperty("--vistaview-pointer-diff-x", `${d}px`), r = !0) : Math.abs(u) > Math.abs(d) && (r === null || r === !1) && (t.style.setProperty("--vistaview-pointer-diff-y", `${u}px`), r = !1);
164
+ }, Z = (l) => {
165
+ if (l.preventDefault(), l.stopPropagation(), t.releasePointerCapture(l.pointerId), s.isZoomed !== !1 || !c) return;
166
+ c = !1, r = null;
167
+ const d = Array.from(t.querySelectorAll(".vistaview-item"));
168
+ t.style.removeProperty("--vistaview-pointer-diff-x"), t.style.removeProperty("--vistaview-pointer-diff-y"), d.forEach((u) => {
169
+ u.style.transition = "", u.style.translate = "";
170
+ });
171
+ }, M = (l) => {
172
+ if (l.preventDefault(), l.stopPropagation(), t.releasePointerCapture(l.pointerId), s.isZoomed !== !1 || !c) return;
173
+ c = !1;
174
+ const d = Array.from(t.querySelectorAll(".vistaview-item")), u = o - n, v = h - i, g = Date.now() - a, m = u / g, E = v / g, f = s.options.touchSpeedThreshold || 0.5, y = d.find(
175
+ (x) => x.dataset.vistaviewPos === "0"
176
+ ), w = Number(y.dataset.vistaviewIndex), C = s.isReducedMotion;
177
+ function b() {
178
+ d[0].removeEventListener("transitionend", b), t.style.removeProperty("--vistaview-pointer-diff-x"), t.style.removeProperty("--vistaview-pointer-diff-y"), d.forEach((x) => {
179
+ x.style.transition = "", x.style.translate = "";
173
180
  });
174
181
  }
175
- function y(p) {
176
- h.forEach((x) => {
177
- x.style.transition = `translate ${s.options.animationDurationBase * 0.5}ms ease-out`, x.style.translate = p;
182
+ function I(x = "0%", X = "0%") {
183
+ d.forEach((z) => {
184
+ z.style.transition = `translate ${s.options.animationDurationBase * 0.5}ms ease-out`, z.style.translate = `${x} ${X}`;
178
185
  });
179
186
  }
180
- v < -u || v > u ? (h[0].addEventListener("transitionend", () => {
181
- s.isReducedMotion = !0, w(), s.view(
182
- v < -u ? (m + 1) % e : (m - 1 + e) % e,
187
+ m < -f || m > f ? (d[0].addEventListener("transitionend", () => {
188
+ s.isReducedMotion = !0, b(), s.view(
189
+ m < -f ? (w + 1) % e : (w - 1 + e) % e,
183
190
  {
184
- next: v < -u,
185
- prev: v > u
191
+ next: m < -f,
192
+ prev: m > f
186
193
  }
187
- ), s.isReducedMotion = E;
188
- }), y(v < -u ? "-100%" : "100%")) : (h[0].addEventListener("transitionend", w), y("0%"));
189
- }, t.addEventListener("pointermove", S), t.addEventListener("pointerup", M), t.addEventListener("pointerdown", $);
194
+ ), s.isReducedMotion = C;
195
+ }), I(m < -f ? "-100%" : "100%")) : E < -f || E > f ? (s.close(), I("0%", "0%")) : (d[0].addEventListener("transitionend", b), I("0%"));
196
+ }, t.addEventListener("pointermove", $), t.addEventListener("pointerup", M), t.addEventListener("pointerdown", S), t.addEventListener("pointercancel", Z);
190
197
  }
191
- function q(s) {
198
+ function O(s) {
192
199
  const t = s.imageContainerElm;
193
- t && (S && t.removeEventListener("pointermove", S), M && t.removeEventListener("pointerup", M), $ && t.removeEventListener("pointerdown", $));
200
+ t && ($ && t.removeEventListener("pointermove", $), M && t.removeEventListener("pointerup", M), S && t.removeEventListener("pointerdown", S), Z && t.removeEventListener("pointercancel", Z));
194
201
  }
195
- const J = (s) => {
196
- G(s);
197
- }, Q = ({
202
+ const et = (s) => {
203
+ tt(s);
204
+ }, it = ({
198
205
  htmlElements: { to: s },
199
206
  index: { to: t },
200
207
  elements: e
@@ -203,57 +210,58 @@ const J = (s) => {
203
210
  const i = Number(n.dataset.vistaviewPos);
204
211
  i !== 0 ? (n.style.zIndex = "1", n.style.left = 100 * i + "%") : n.style.zIndex = "2";
205
212
  });
206
- }, tt = async ({
213
+ }, nt = async ({
207
214
  htmlElements: { from: s, to: t },
208
215
  images: { to: e },
209
216
  via: { next: n, prev: i },
210
217
  container: o,
211
- options: l,
212
- isReducedMotion: a
218
+ options: h,
219
+ isReducedMotion: r
213
220
  // index: { from: fromIndex, to: toIndex },
214
221
  }) => {
215
222
  if (!e) throw new Error("VistaView: images is null in defaultTransition()");
216
- if (a)
217
- return o.innerHTML = "", t.forEach((h) => {
218
- o.appendChild(h);
223
+ if (r)
224
+ return o.innerHTML = "", t.forEach((c) => {
225
+ o.appendChild(c);
219
226
  }), e[e.length === 1 ? 0 : Math.floor(e.length / 2)];
220
- const r = s.filter((h) => h.dataset.vistaviewPos === "0" || (n ? h.dataset.vistaviewPos === "1" : h.dataset.vistaviewPos === "-1"));
221
- return await new Promise((h) => {
222
- function c() {
227
+ const a = s.filter((c) => c.dataset.vistaviewPos === "0" || (n ? c.dataset.vistaviewPos === "1" : c.dataset.vistaviewPos === "-1"));
228
+ return await new Promise((c) => {
229
+ function l() {
223
230
  o.innerHTML = "", t.forEach((d) => {
224
231
  o.appendChild(d);
225
- }), h(0);
232
+ }), c(0);
226
233
  }
227
- r[r.length - 1].addEventListener("transitionend", c), r.forEach((d) => {
228
- d.style.transition = `translate ${l.animationDurationBase * 0.5}ms ease-out`, d.style.translate = n ? "-100%" : i ? "100%" : "0%";
234
+ a[a.length - 1].addEventListener("transitionend", l), a.forEach((d) => {
235
+ d.style.transition = `translate ${h.animationDurationBase * 0.5}ms ease-out`, d.style.translate = n ? "-100%" : i ? "100%" : "0%";
229
236
  });
230
237
  }), e[e.length === 1 ? 0 : Math.floor(e.length / 2)];
231
- }, et = (s) => {
232
- s.elements instanceof NodeList && s.elements.forEach((t) => t.style.opacity = "1"), q(s);
233
- }, W = {
238
+ }, st = (s) => {
239
+ s.elements instanceof NodeList && s.elements.forEach((t) => t.style.opacity = "1"), O(s);
240
+ }, q = {
234
241
  detectReducedMotion: !0,
235
242
  // debug, don't remove
236
243
  // animationDurationBase: 1000,
237
244
  animationDurationBase: 333,
238
245
  zoomStep: 500,
239
246
  maxZoomLevel: 2,
240
- touchSpeedThreshold: 0.7,
247
+ touchSpeedThreshold: 0.5,
241
248
  preloads: 1,
242
249
  keyboardListeners: !0,
250
+ arrowOnSmallScreens: !1,
243
251
  controls: {
244
252
  topLeft: ["indexDisplay"],
245
- topRight: ["zoomIn", "zoomOut", N(), "close"],
253
+ topRight: ["zoomIn", "zoomOut", G(), "close"],
246
254
  bottomCenter: ["description"]
247
255
  }
248
- }, b = {
256
+ }, L = {
249
257
  somethingOpened: null
250
258
  };
251
- class it {
259
+ class ot {
252
260
  constructor(t, e) {
253
- f(this, "options");
254
- f(this, "elements");
255
- f(this, "isReducedMotion");
256
- f(this, "currentIndex", {
261
+ p(this, "options");
262
+ p(this, "elements");
263
+ p(this, "isReducedMotion");
264
+ p(this, "currentIndex", {
257
265
  _value: null,
258
266
  _vistaView: null,
259
267
  _via: { next: !1, prev: !1 },
@@ -272,28 +280,28 @@ class it {
272
280
  this._via = t;
273
281
  }
274
282
  });
275
- f(this, "rootElm", null);
276
- f(this, "imageContainerElm", null);
277
- f(this, "customControls", {});
278
- f(this, "currentImages", null);
279
- f(this, "currentItems", null);
280
- f(this, "navActive", !0);
281
- f(this, "isZoomed", !1);
282
- f(this, "onClickElements", []);
283
- f(this, "onResizeHandler", null);
284
- f(this, "onKeyDown", null);
285
- f(this, "userSetup", Q);
286
- f(this, "userTransition", tt);
287
- f(this, "userClose", et);
288
- f(this, "userInit", J);
289
- f(this, "onZoomedPointerDown", null);
290
- f(this, "onZoomedPointerMove", null);
291
- f(this, "onZoomedPointerUp", null);
283
+ p(this, "rootElm", null);
284
+ p(this, "imageContainerElm", null);
285
+ p(this, "customControls", {});
286
+ p(this, "currentImages", null);
287
+ p(this, "currentItems", null);
288
+ p(this, "navActive", !0);
289
+ p(this, "isZoomed", !1);
290
+ p(this, "onClickElements", []);
291
+ p(this, "onResizeHandler", null);
292
+ p(this, "onKeyDown", null);
293
+ p(this, "userSetup", it);
294
+ p(this, "userTransition", nt);
295
+ p(this, "userClose", st);
296
+ p(this, "userInit", et);
297
+ p(this, "onZoomedPointerDown", null);
298
+ p(this, "onZoomedPointerMove", null);
299
+ p(this, "onZoomedPointerUp", null);
292
300
  this.elements = t, this.currentIndex._vistaView = this, this.options = {
293
- ...W,
301
+ ...q,
294
302
  ...e || {},
295
303
  controls: {
296
- ...W.controls,
304
+ ...q.controls,
297
305
  ...(e == null ? void 0 : e.controls) || {}
298
306
  }
299
307
  }, 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, i) => {
@@ -303,24 +311,24 @@ class it {
303
311
  });
304
312
  }
305
313
  async swap(t, e) {
306
- var h, c;
307
- if (!b.somethingOpened || t === e || t === null || this.elements.length === 1) return;
314
+ var c, l;
315
+ if (!L.somethingOpened || t === e || t === null || this.elements.length === 1) return;
308
316
  if (!this.imageContainerElm)
309
317
  throw new Error("VistaView: imageContainerElm is null in swap()");
310
318
  this.setIndexDisplay(), this.clearZoom();
311
- const { images: n, positions: i } = this.getCurrentIndexes(e), o = this.getImages(n), l = o.map((d, v) => H(d, i[v]));
312
- l.forEach((d, v) => {
319
+ const { images: n, positions: i } = this.getCurrentIndexes(e), o = this.getImages(n), h = o.map((d, u) => T(d, i[u]));
320
+ h.forEach((d, u) => {
313
321
  var m, E;
314
- const u = d.querySelector(".vistaview-image-highres"), g = o[v].imageElm;
315
- if (u.complete && u.naturalWidth > 0) {
316
- const { width: w, height: y } = A(g);
317
- w && y && (u.style.setProperty("--vistaview-fitted-width", `${w}px`), u.style.setProperty("--vistaview-fitted-height", `${y}px`)), u.classList.add("vistaview-image-loaded"), (m = d.querySelector(".vistaview-image-lowres")) == null || m.classList.add("vistaview-image--hidden");
318
- const { width: p, height: x } = P(u);
319
- u.style.width = `${p}px`, u.style.height = `${x}px`, u.width = u.naturalWidth, u.height = u.naturalHeight, (E = u.parentElement) != null && E.matches('[data-vistaview-pos="0"]') && this.updateZoomButtonsVisibility();
322
+ const v = d.querySelector(".vistaview-image-highres"), g = o[u].imageElm;
323
+ if (v.complete && v.naturalWidth > 0) {
324
+ const { width: f, height: y } = H(g);
325
+ f && y && (v.style.setProperty("--vistaview-fitted-width", `${f}px`), v.style.setProperty("--vistaview-fitted-height", `${y}px`)), v.classList.add("vistaview-image-loaded"), (m = d.querySelector(".vistaview-image-lowres")) == null || m.classList.add("vistaview-image--hidden");
326
+ const { width: w, height: C } = P(v);
327
+ v.style.width = `${w}px`, v.style.height = `${C}px`, v.width = v.naturalWidth, v.height = v.naturalHeight, (E = v.parentElement) != null && E.matches('[data-vistaview-pos="0"]') && this.updateZoomButtonsVisibility();
320
328
  }
321
329
  }), this.navActive = !1;
322
- const a = {
323
- htmlElements: { from: this.currentItems, to: l },
330
+ const r = {
331
+ htmlElements: { from: this.currentItems, to: h },
324
332
  images: { from: this.currentImages, to: o },
325
333
  index: { from: t, to: e },
326
334
  via: this.currentIndex.via,
@@ -331,57 +339,57 @@ class it {
331
339
  isZoomed: this.isZoomed,
332
340
  options: this.options
333
341
  };
334
- this.userSetup(a);
335
- const r = await this.userTransition(a);
336
- this.navActive = !0, this.setInitialDimPos(r), this.currentImages = o, this.currentItems = l, this.loadImages(), this.setCurrentDescription(), (c = (h = this.options).onImageView) == null || c.call(h, a);
342
+ this.userSetup(r);
343
+ const a = await this.userTransition(r);
344
+ this.navActive = !0, this.setInitialDimPos(a), this.currentImages = o, this.currentItems = h, this.loadImages(), this.setCurrentDescription(), (l = (c = this.options).onImageView) == null || l.call(c, r);
337
345
  }
338
346
  //
339
347
  setZoomed(t) {
340
- var e, n, i, o, l, a;
348
+ var e, n, i, o, h, r;
341
349
  if (this.isZoomed !== t) {
342
350
  if (this.isZoomed) {
343
- let r = this.isZoomed;
344
- if (r.classList.remove("vistaview-image--zooming"), this.onZoomedPointerDown && ((e = r.parentElement) == null || e.removeEventListener("pointerdown", this.onZoomedPointerDown), this.onZoomedPointerDown = null), this.onZoomedPointerMove && ((n = r.parentElement) == null || n.removeEventListener("pointermove", this.onZoomedPointerMove), this.onZoomedPointerMove = null), this.onZoomedPointerUp && ((i = r.parentElement) == null || i.removeEventListener("pointerup", this.onZoomedPointerUp), this.onZoomedPointerUp = null), r == null || r.style.removeProperty("--pointer-diff-x"), r == null || r.style.removeProperty("--pointer-diff-y"), setTimeout(() => {
345
- r == null || r.classList.remove("vistaview-image--zooming");
351
+ let a = this.isZoomed;
352
+ if (a.classList.remove("vistaview-image--zooming"), this.onZoomedPointerDown && ((e = a.parentElement) == null || e.removeEventListener("pointerdown", this.onZoomedPointerDown), this.onZoomedPointerDown = null), this.onZoomedPointerMove && ((n = a.parentElement) == null || n.removeEventListener("pointermove", this.onZoomedPointerMove), this.onZoomedPointerMove = null), this.onZoomedPointerUp && ((i = a.parentElement) == null || i.removeEventListener("pointerup", this.onZoomedPointerUp), this.onZoomedPointerUp = null), a == null || a.style.removeProperty("--pointer-diff-x"), a == null || a.style.removeProperty("--pointer-diff-y"), setTimeout(() => {
353
+ a == null || a.classList.remove("vistaview-image--zooming");
346
354
  }, 500), this.isZoomed = !1, !t) return;
347
355
  }
348
356
  if (t) {
349
357
  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");
350
- let r = !1, h = 0, c = 0, d = 0, v = 0, u = 0, g = 0;
358
+ let a = !1, c = 0, l = 0, d = 0, u = 0, v = 0, g = 0;
351
359
  this.onZoomedPointerDown = (m) => {
352
- m.preventDefault(), m.stopPropagation(), r = !0, h = m.pageX, c = m.pageY, t.setPointerCapture(m.pointerId);
360
+ m.preventDefault(), m.stopPropagation(), a = !0, c = m.pageX, l = m.pageY, t.setPointerCapture(m.pointerId);
353
361
  }, this.onZoomedPointerMove = (m) => {
354
- if (!r) return;
355
- m.preventDefault(), u = m.pageX - h, g = m.pageY - c;
356
- const E = parseInt((t == null ? void 0 : t.dataset.vistaviewCurrentWidth) || "0"), w = parseInt((t == null ? void 0 : t.dataset.vistaviewCurrentHeight) || "0"), { maxDiffX: y, minDiffY: p, maxDiffY: x, minDiffX: I } = R(
362
+ if (!a) return;
363
+ m.preventDefault(), v = m.pageX - c, g = m.pageY - l;
364
+ const E = parseInt((t == null ? void 0 : t.dataset.vistaviewCurrentWidth) || "0"), f = parseInt((t == null ? void 0 : t.dataset.vistaviewCurrentHeight) || "0"), { maxDiffX: y, minDiffY: w, maxDiffY: C, minDiffX: b } = W(
357
365
  E,
358
- w
359
- ), L = Math.min(y, Math.max(I, d + u)), C = Math.min(x, Math.max(p, v + g));
360
- u = L - d, g = C - v, t == null || t.style.setProperty("--pointer-diff-x", `${L}px`), t == null || t.style.setProperty("--pointer-diff-y", `${C}px`);
366
+ f
367
+ ), I = Math.min(y, Math.max(b, d + v)), x = Math.min(C, Math.max(w, u + g));
368
+ v = I - d, g = x - u, t == null || t.style.setProperty("--pointer-diff-x", `${I}px`), t == null || t.style.setProperty("--pointer-diff-y", `${x}px`);
361
369
  }, this.onZoomedPointerUp = (m) => {
362
- r = !1, t.releasePointerCapture(m.pointerId), d += u, v += g, u = 0, g = 0;
363
- }, (o = t == null ? void 0 : t.parentElement) == null || o.addEventListener("pointerdown", this.onZoomedPointerDown), (l = t == null ? void 0 : t.parentElement) == null || l.addEventListener("pointermove", this.onZoomedPointerMove), (a = t == null ? void 0 : t.parentElement) == null || a.addEventListener("pointerup", this.onZoomedPointerUp);
370
+ a = !1, t.releasePointerCapture(m.pointerId), d += v, u += g, v = 0, g = 0;
371
+ }, (o = t == null ? void 0 : t.parentElement) == null || o.addEventListener("pointerdown", this.onZoomedPointerDown), (h = t == null ? void 0 : t.parentElement) == null || h.addEventListener("pointermove", this.onZoomedPointerMove), (r = t == null ? void 0 : t.parentElement) == null || r.addEventListener("pointerup", this.onZoomedPointerUp);
364
372
  return;
365
373
  }
366
374
  }
367
375
  }
368
376
  zoomIn() {
369
- var o, l, a, r, h;
377
+ var o, h, r, a, c;
370
378
  const t = (o = this.rootElm) == null ? void 0 : o.querySelector(
371
379
  '[data-vistaview-pos="0"] .vistaview-image-highres'
372
380
  ), e = t.width, n = t.height;
373
381
  t.dataset.vistaviewInitialWidth || (t.dataset.vistaviewInitialWidth = e.toString()), t.dataset.vistaviewInitialHeight || (t.dataset.vistaviewInitialHeight = n.toString()), this.setZoomed(t);
374
382
  const i = (t.naturalWidth || 0) * this.options.maxZoomLevel;
375
383
  if (e && i && e < i) {
376
- const c = Math.min(e + this.options.zoomStep, i);
377
- t.style.width = `${c}px`;
378
- const d = c / e * n;
379
- t.style.height = `${d}px`, (a = (l = this.rootElm) == null ? void 0 : l.querySelector("button.vistaview-zoom-out-btn")) == null || a.removeAttribute("disabled"), t.dataset.vistaviewCurrentWidth = c.toString(), t.dataset.vistaviewCurrentHeight = d.toString(), c === i && ((h = (r = this.rootElm) == null ? void 0 : r.querySelector("button.vistaview-zoom-in-btn")) == null || h.setAttribute("disabled", "true"));
384
+ const l = Math.min(e + this.options.zoomStep, i);
385
+ t.style.width = `${l}px`;
386
+ const d = l / e * n;
387
+ t.style.height = `${d}px`, (r = (h = this.rootElm) == null ? void 0 : h.querySelector("button.vistaview-zoom-out-btn")) == null || r.removeAttribute("disabled"), t.dataset.vistaviewCurrentWidth = l.toString(), t.dataset.vistaviewCurrentHeight = d.toString(), l === i && ((c = (a = this.rootElm) == null ? void 0 : a.querySelector("button.vistaview-zoom-in-btn")) == null || c.setAttribute("disabled", "true"));
380
388
  }
381
389
  }
382
390
  zoomOut() {
383
- var l, a, r, h, c;
384
- const t = (l = this.rootElm) == null ? void 0 : l.querySelector(
391
+ var h, r, a, c, l;
392
+ const t = (h = this.rootElm) == null ? void 0 : h.querySelector(
385
393
  '[data-vistaview-pos="0"] .vistaview-image-highres'
386
394
  ), e = t.width, n = t.height, i = t.dataset.vistaviewInitialWidth ? parseInt(t.dataset.vistaviewInitialWidth) : 0, o = (d) => {
387
395
  d.target === t && (t.classList.remove("vistaview-image--zooming-out"), t.removeEventListener("transitionend", o));
@@ -389,15 +397,15 @@ class it {
389
397
  if (t.addEventListener("transitionend", o), t.classList.add("vistaview-image--zooming-out"), e && i && e > i) {
390
398
  const d = Math.max(e - this.options.zoomStep, i);
391
399
  t.style.width = `${d}px`;
392
- const v = d / e * n;
393
- t.style.height = `${v}px`, (r = (a = this.rootElm) == null ? void 0 : a.querySelector("button.vistaview-zoom-in-btn")) == null || r.removeAttribute("disabled"), t.dataset.vistaviewCurrentWidth = d.toString(), t.dataset.vistaviewCurrentHeight = v.toString();
394
- const { maxDiffX: u, minDiffY: g, maxDiffY: m, minDiffX: E } = R(d, v);
395
- let w = parseInt(
400
+ const u = d / e * n;
401
+ t.style.height = `${u}px`, (a = (r = this.rootElm) == null ? void 0 : r.querySelector("button.vistaview-zoom-in-btn")) == null || a.removeAttribute("disabled"), t.dataset.vistaviewCurrentWidth = d.toString(), t.dataset.vistaviewCurrentHeight = u.toString();
402
+ const { maxDiffX: v, minDiffY: g, maxDiffY: m, minDiffX: E } = W(d, u);
403
+ let f = parseInt(
396
404
  (t == null ? void 0 : t.style.getPropertyValue("--pointer-diff-x").replace("px", "")) || "0"
397
405
  ), y = parseInt(
398
406
  (t == null ? void 0 : t.style.getPropertyValue("--pointer-diff-y").replace("px", "")) || "0"
399
407
  );
400
- w = Math.min(u, Math.max(E, w)), y = Math.min(m, Math.max(g, y)), t == null || t.style.setProperty("--pointer-diff-x", `${w}px`), t == null || t.style.setProperty("--pointer-diff-y", `${y}px`), d === i && ((c = (h = this.rootElm) == null ? void 0 : h.querySelector("button.vistaview-zoom-out-btn")) == null || c.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));
408
+ f = Math.min(v, Math.max(E, f)), y = Math.min(m, Math.max(g, y)), t == null || t.style.setProperty("--pointer-diff-x", `${f}px`), t == null || t.style.setProperty("--pointer-diff-y", `${y}px`), d === i && ((l = (c = this.rootElm) == null ? void 0 : c.querySelector("button.vistaview-zoom-out-btn")) == null || l.setAttribute("disabled", "true"), t.removeAttribute("data-vistaview-current-width"), t.removeAttribute("data-vistaview-current-height"), t.removeAttribute("data-vistaview-initial-width"), t.removeAttribute("data-vistaview-initial-height"), this.setZoomed(!1));
401
409
  }
402
410
  }
403
411
  clearZoom() {
@@ -406,12 +414,12 @@ class it {
406
414
  return t.map((e, n) => {
407
415
  const i = this.elements[e];
408
416
  if (i instanceof HTMLElement) {
409
- const o = i.querySelector("img"), l = i.getAttribute("href") || "", a = i.getAttribute("src") || "", r = i.dataset.vistaviewSrc || l || a || (o == null ? void 0 : o.src) || "", h = i.dataset.vistaviewAlt || i.getAttribute("alt") || (o == null ? void 0 : o.alt) || "", c = i.dataset.vistaviewThumb || (o == null ? void 0 : o.src) || l || a || "";
417
+ const o = i.querySelector("img"), h = i.getAttribute("href") || "", r = i.getAttribute("src") || "", a = i.dataset.vistaviewSrc || h || r || (o == null ? void 0 : o.src) || "", c = i.dataset.vistaviewAlt || i.getAttribute("alt") || (o == null ? void 0 : o.alt) || "", l = i.dataset.vistaviewThumb || (o == null ? void 0 : o.src) || h || r || "";
410
418
  return {
411
419
  index: t[n],
412
- src: r,
413
- alt: h,
414
- thumb: c,
420
+ src: a,
421
+ alt: c,
422
+ thumb: l,
415
423
  imageElm: i instanceof HTMLImageElement ? i : o,
416
424
  anchorElm: i instanceof HTMLAnchorElement ? i : void 0
417
425
  };
@@ -421,10 +429,10 @@ class it {
421
429
  }
422
430
  setInitialDimPos(t) {
423
431
  if (!this.rootElm) return;
424
- const e = t.imageElm ? Z(t.imageElm) : void 0, n = t.anchorElm ? Z(t.anchorElm) : void 0, i = (n == null ? void 0 : n.width) || (e == null ? void 0 : e.width) || 0, o = (n == null ? void 0 : n.height) || (e == null ? void 0 : e.height) || 0, l = ((n == null ? void 0 : n.left) || (e == null ? void 0 : e.left) || 0) + i / 2, a = ((n == null ? void 0 : n.top) || (e == null ? void 0 : e.top) || 0) + o / 2;
425
- this.rootElm.style.setProperty("--vistaview-container-initial-width", i + "px"), this.rootElm.style.setProperty("--vistaview-container-initial-height", o + "px"), this.rootElm.style.setProperty("--vistaview-container-initial-top", a + "px"), this.rootElm.style.setProperty("--vistaview-container-initial-left", l + "px"), this.rootElm.style.setProperty(
432
+ const e = t.imageElm ? A(t.imageElm) : void 0, n = t.anchorElm ? A(t.anchorElm) : void 0, i = (n == null ? void 0 : n.width) || (e == null ? void 0 : e.width) || 0, o = (n == null ? void 0 : n.height) || (e == null ? void 0 : e.height) || 0, h = ((n == null ? void 0 : n.left) || (e == null ? void 0 : e.left) || 0) + i / 2, r = ((n == null ? void 0 : n.top) || (e == null ? void 0 : e.top) || 0) + o / 2;
433
+ this.rootElm.style.setProperty("--vistaview-container-initial-width", i + "px"), this.rootElm.style.setProperty("--vistaview-container-initial-height", o + "px"), this.rootElm.style.setProperty("--vistaview-container-initial-top", r + "px"), this.rootElm.style.setProperty("--vistaview-container-initial-left", h + "px"), this.rootElm.style.setProperty(
426
434
  "--vistaview-image-border-radius",
427
- z(n == null ? void 0 : n.borderRadius) || z(e == null ? void 0 : e.borderRadius) || "0px"
435
+ R(n == null ? void 0 : n.borderRadius) || R(e == null ? void 0 : e.borderRadius) || "0px"
428
436
  );
429
437
  }
430
438
  updateZoomButtonsVisibility() {
@@ -435,13 +443,13 @@ class it {
435
443
  if (!t) return;
436
444
  const e = this;
437
445
  function n() {
438
- var c, d;
439
- const o = (c = e.rootElm) == null ? void 0 : c.querySelector(
446
+ var l, d;
447
+ const o = (l = e.rootElm) == null ? void 0 : l.querySelector(
440
448
  "button.vistaview-zoom-in-btn"
441
- ), l = (d = e.rootElm) == null ? void 0 : d.querySelector(
449
+ ), h = (d = e.rootElm) == null ? void 0 : d.querySelector(
442
450
  "button.vistaview-zoom-out-btn"
443
- ), a = parseInt(t.style.width) || t.width, r = t.naturalWidth * e.options.maxZoomLevel, h = a < r && r > 0;
444
- o && (o.style.display = h ? "" : "none"), l && (l.style.display = h ? "" : "none");
451
+ ), r = parseInt(t.style.width) || t.width, a = t.naturalWidth * e.options.maxZoomLevel, c = r < a && a > 0;
452
+ o && (o.style.display = c ? "" : "none"), h && (h.style.display = c ? "" : "none");
445
453
  }
446
454
  t.complete && t.naturalWidth > 0 ? n() : t.addEventListener("load", n);
447
455
  }
@@ -450,27 +458,27 @@ class it {
450
458
  this.rootElm.querySelectorAll(
451
459
  ".vistaview-image-highres:not(.vistaview-image-loaded)"
452
460
  ).forEach((e, n) => {
453
- const i = e, l = this.currentImages[n].imageElm, a = { w: 0, h: 0 };
454
- if (l) {
455
- const { width: h, height: c } = A(l);
456
- a.w = Math.min(l.width, h), a.h = Math.min(l.height, c);
461
+ const i = e, h = this.currentImages[n].imageElm, r = { w: 0, h: 0 };
462
+ if (h) {
463
+ const { width: c, height: l } = H(h);
464
+ r.w = Math.min(h.width, c), r.h = Math.min(h.height, l);
457
465
  }
458
- const r = (h = !1) => () => {
459
- var c;
460
- if (a.w && a.h && (i.style.width = `${a.w}px`, i.style.height = `${a.h}px`, i.style.setProperty("--vistaview-fitted-width", `${a.w}px`), i.style.setProperty("--vistaview-fitted-height", `${a.h}px`)), i.classList.add("vistaview-image-loaded"), i.width = i.naturalWidth, i.height = i.naturalHeight, h) {
461
- const { width: d, height: v } = P(i);
462
- i.style.width = `${d}px`, i.style.height = `${v}px`;
466
+ const a = (c = !1) => () => {
467
+ var l;
468
+ if (r.w && r.h && (i.style.width = `${r.w}px`, i.style.height = `${r.h}px`, i.style.setProperty("--vistaview-fitted-width", `${r.w}px`), i.style.setProperty("--vistaview-fitted-height", `${r.h}px`)), i.classList.add("vistaview-image-loaded"), i.width = i.naturalWidth, i.height = i.naturalHeight, c) {
469
+ const { width: d, height: u } = P(i);
470
+ i.style.width = `${d}px`, i.style.height = `${u}px`;
463
471
  } else
464
472
  setTimeout(() => {
465
- const { width: d, height: v } = P(i);
466
- i.style.width = `${d}px`, i.style.height = `${v}px`;
473
+ const { width: d, height: u } = P(i);
474
+ i.style.width = `${d}px`, i.style.height = `${u}px`;
467
475
  }, 333);
468
476
  setTimeout(() => {
469
- var d, v;
470
- (v = (d = i.parentElement) == null ? void 0 : d.querySelector(".vistaview-image-lowres")) == null || v.classList.add("vistaview-image--hidden");
471
- }, 500), (c = e.parentElement) != null && c.matches('[data-vistaview-pos="0"]') && this.updateZoomButtonsVisibility();
477
+ var d, u;
478
+ (u = (d = i.parentElement) == null ? void 0 : d.querySelector(".vistaview-image-lowres")) == null || u.classList.add("vistaview-image--hidden");
479
+ }, 500), (l = e.parentElement) != null && l.matches('[data-vistaview-pos="0"]') && this.updateZoomButtonsVisibility();
472
480
  };
473
- i.complete && i.naturalWidth > 0 ? r(!0)() : i.onload = r(!1);
481
+ i.complete && i.naturalWidth > 0 ? a(!0)() : i.onload = a(!1);
474
482
  });
475
483
  }
476
484
  setIndexDisplay() {
@@ -484,12 +492,12 @@ class it {
484
492
  .../* @__PURE__ */ new Set([
485
493
  ...Array.from(
486
494
  { length: e },
487
- (l, a) => ((t - e + a) % n + n) % n
495
+ (h, r) => ((t - e + r) % n + n) % n
488
496
  ),
489
497
  t,
490
- ...Array.from({ length: e }, (l, a) => (t + 1 + a) % n)
498
+ ...Array.from({ length: e }, (h, r) => (t + 1 + r) % n)
491
499
  ])
492
- ], o = n < 1 || !e ? [0] : i.map((l, a) => a - Math.floor(i.length / 2));
500
+ ], o = n < 1 || !e ? [0] : i.map((h, r) => r - Math.floor(i.length / 2));
493
501
  return {
494
502
  images: i,
495
503
  positions: o
@@ -525,27 +533,28 @@ class it {
525
533
  ".vistaview-image-highres.vistaview-image-loaded"
526
534
  );
527
535
  e == null || e.forEach((i) => {
528
- const o = i, { width: l, height: a } = P(o);
529
- o.classList.contains("vistaview-image--zooming") ? (o.dataset.vistaviewInitialWidth = l.toString(), o.dataset.vistaviewInitialHeight = a.toString()) : (o.style.width = `${l}px`, o.style.height = `${a}px`);
536
+ const o = i, { width: h, height: r } = P(o);
537
+ o.classList.contains("vistaview-image--zooming") ? (o.dataset.vistaviewInitialWidth = h.toString(), o.dataset.vistaviewInitialHeight = r.toString()) : (o.style.width = `${h}px`, o.style.height = `${r}px`);
530
538
  });
531
539
  }, window.addEventListener("resize", this.onResizeHandler);
532
540
  }
533
541
  open(t = 0) {
534
- var l, a, r, h, c, d, v, u, g, m, E, w, y;
535
- if (b.somethingOpened) {
542
+ var h, r, a, c, l, d, u, v, g, m, E, f, y;
543
+ if (L.somethingOpened) {
536
544
  console.error("VistaView: another instance is already opened. Returning.");
537
545
  return;
538
546
  }
539
- if (b.somethingOpened = this, this.currentIndex._value = t, document.body.prepend(
540
- K({
547
+ if (L.somethingOpened = this, this.currentIndex._value = t, document.body.prepend(
548
+ Q({
541
549
  controls: this.options.controls,
542
550
  isReducedMotion: this.isReducedMotion
543
551
  })
544
- ), this.rootElm = document.querySelector("#vistaview-root"), this.imageContainerElm = ((l = this.rootElm) == null ? void 0 : l.querySelector(".vistaview-image-container")) || null, !this.rootElm || !this.imageContainerElm)
545
- throw b.somethingOpened = null, new Error("Failed to create VistaView element");
552
+ ), this.rootElm = document.querySelector("#vistaview-root"), this.imageContainerElm = ((h = this.rootElm) == null ? void 0 : h.querySelector(".vistaview-image-container")) || null, !this.rootElm || !this.imageContainerElm)
553
+ throw L.somethingOpened = null, new Error("Failed to create VistaView element");
554
+ this.options.arrowOnSmallScreens || this.rootElm.classList.add("vistaview-no-arrows-sm");
546
555
  const { images: e, positions: n } = this.getCurrentIndexes(t);
547
556
  this.currentImages = this.getImages(e);
548
- const i = this.currentImages.map((p, x) => H(p, n[x]));
557
+ const i = this.currentImages.map((w, C) => T(w, n[C]));
549
558
  this.currentItems = i;
550
559
  const o = {
551
560
  htmlElements: { from: null, to: this.currentItems },
@@ -559,25 +568,25 @@ class it {
559
568
  isZoomed: this.isZoomed,
560
569
  options: this.options
561
570
  };
562
- this.userSetup(o), this.imageContainerElm.innerHTML = "", this.currentItems.forEach((p) => {
563
- this.imageContainerElm.appendChild(p);
564
- }), (a = this.rootElm.querySelector(".vistaview-close-btn")) == null || a.addEventListener("click", () => this.close()), (r = this.rootElm.querySelector(".vistaview-zoom-in-btn")) == null || r.addEventListener("click", () => this.zoomIn()), (h = this.rootElm.querySelector(".vistaview-zoom-out-btn")) == null || h.addEventListener("click", () => this.zoomOut()), (c = this.rootElm.querySelector(".vistaview-prev-btn>button")) == null || c.addEventListener("click", () => this.prev()), (d = this.rootElm.querySelector(".vistaview-next-btn>button")) == null || d.addEventListener("click", () => this.next()), [
571
+ this.userSetup(o), this.imageContainerElm.innerHTML = "", this.currentItems.forEach((w) => {
572
+ this.imageContainerElm.appendChild(w);
573
+ }), (r = this.rootElm.querySelector(".vistaview-close-btn")) == null || r.addEventListener("click", () => this.close()), (a = this.rootElm.querySelector(".vistaview-zoom-in-btn")) == null || a.addEventListener("click", () => this.zoomIn()), (c = this.rootElm.querySelector(".vistaview-zoom-out-btn")) == null || c.addEventListener("click", () => this.zoomOut()), (l = this.rootElm.querySelector(".vistaview-prev-btn>button")) == null || l.addEventListener("click", () => this.prev()), (d = this.rootElm.querySelector(".vistaview-next-btn>button")) == null || d.addEventListener("click", () => this.next()), [
565
574
  ...this.options.controls.topLeft || [],
566
575
  ...this.options.controls.topRight || [],
567
576
  ...this.options.controls.topCenter || [],
568
577
  ...this.options.controls.bottomCenter || [],
569
578
  ...this.options.controls.bottomLeft || [],
570
579
  ...this.options.controls.bottomRight || []
571
- ].forEach((p) => {
572
- typeof p != "string" && (this.customControls[p.name] = p);
573
- }), this.rootElm.querySelectorAll("button[data-vistaview-custom-control]").forEach((p) => {
574
- p.addEventListener("click", (x) => {
575
- const I = this.customControls[x.currentTarget.dataset.vistaviewCustomControl], L = this.currentImages.find(
576
- (C) => C.index === this.currentIndex.value
580
+ ].forEach((w) => {
581
+ typeof w != "string" && (this.customControls[w.name] = w);
582
+ }), this.rootElm.querySelectorAll("button[data-vistaview-custom-control]").forEach((w) => {
583
+ w.addEventListener("click", (C) => {
584
+ const b = this.customControls[C.currentTarget.dataset.vistaviewCustomControl], I = this.currentImages.find(
585
+ (x) => x.index === this.currentIndex.value
577
586
  );
578
- I && L && (I.onClick.constructor.name === "AsyncFunction" ? (p.classList.add("vistaview-button--loading"), I.onClick(L).finally(() => {
579
- p.classList.remove("vistaview-button--loading");
580
- })) : I.onClick(L));
587
+ b && I && (b.onClick.constructor.name === "AsyncFunction" ? (w.classList.add("vistaview-button--loading"), b.onClick(I).finally(() => {
588
+ w.classList.remove("vistaview-button--loading");
589
+ })) : b.onClick(I));
581
590
  });
582
591
  }), this.options.animationDurationBase && this.rootElm.style.setProperty(
583
592
  "--vistaview-animation-duration",
@@ -587,17 +596,17 @@ class it {
587
596
  `${this.options.initialZIndex}`
588
597
  ), this.setInitialDimPos(
589
598
  this.currentImages[this.currentImages.length === 1 ? 0 : Math.floor(this.currentImages.length / 2)]
590
- ), this.setResizeListeners(), this.options.keyboardListeners && this.setKeyboardListeners(), this.elements.length === 1 && ((v = this.rootElm.querySelector(".vistaview-prev-btn")) == null || v.classList.add("vistaview-ui--none"), (u = this.rootElm.querySelector(".vistaview-next-btn")) == null || u.classList.add("vistaview-ui--none"), (g = this.rootElm.querySelector(".vistaview-index-display")) == null || g.classList.add("vistaview-ui--none")), this.rootElm && this.rootElm.classList.add("vistaview--initialized"), this.loadImages(), this.setCurrentDescription(), this.setIndexDisplay(), this.userInit(this), (E = (m = this.options).onOpen) == null || E.call(m, o), (y = (w = this.options).onImageView) == null || y.call(w, o);
599
+ ), this.setResizeListeners(), this.options.keyboardListeners && this.setKeyboardListeners(), this.elements.length === 1 && ((u = this.rootElm.querySelector(".vistaview-prev-btn")) == null || u.classList.add("vistaview-ui--none"), (v = this.rootElm.querySelector(".vistaview-next-btn")) == null || v.classList.add("vistaview-ui--none"), (g = this.rootElm.querySelector(".vistaview-index-display")) == null || g.classList.add("vistaview-ui--none")), this.rootElm && this.rootElm.classList.add("vistaview--initialized"), this.loadImages(), this.setCurrentDescription(), this.setIndexDisplay(), this.userInit(this), (E = (m = this.options).onOpen) == null || E.call(m, o), (y = (f = this.options).onImageView) == null || y.call(f, o);
591
600
  }
592
601
  async close(t = !0) {
593
602
  var n, i, o;
594
- if (b.somethingOpened !== this) return;
595
- t && ((n = this.rootElm) == null || n.classList.add("vistaview--closing"), await new Promise((l) => {
596
- var r;
597
- let a;
598
- (r = this.rootElm) == null || r.addEventListener("transitionend", (h) => {
599
- h.currentTarget === this.rootElm && (a && clearTimeout(a), a = setTimeout(() => {
600
- l();
603
+ if (L.somethingOpened !== this) return;
604
+ t && ((n = this.rootElm) == null || n.classList.add("vistaview--closing"), await new Promise((h) => {
605
+ var a;
606
+ let r;
607
+ (a = this.rootElm) == null || a.addEventListener("transitionend", (c) => {
608
+ c.currentTarget === this.rootElm && (r && clearTimeout(r), r = setTimeout(() => {
609
+ h();
601
610
  }, 333));
602
611
  });
603
612
  }));
@@ -613,7 +622,7 @@ class it {
613
622
  isZoomed: this.isZoomed,
614
623
  options: this.options
615
624
  };
616
- this.userClose(this), (o = (i = this.options).onClose) == null || o.call(i, e), document.body.removeChild(this.rootElm), this.currentIndex._value = null, this.currentIndex._via = { next: !1, prev: !1 }, this.rootElm = null, this.imageContainerElm = null, this.currentImages = null, this.currentItems = null, this.navActive = !0, this.onResizeHandler && (window.removeEventListener("resize", this.onResizeHandler), this.onResizeHandler = null), this.onKeyDown && (window.removeEventListener("keydown", this.onKeyDown), this.onKeyDown = null), (this.onZoomedPointerDown || this.onZoomedPointerMove || this.onZoomedPointerUp) && (this.setZoomed(!1), this.onZoomedPointerDown = null, this.onZoomedPointerMove = null, this.onZoomedPointerUp = null), b.somethingOpened = null;
625
+ this.userClose(this), (o = (i = this.options).onClose) == null || o.call(i, e), document.body.removeChild(this.rootElm), this.currentIndex._value = null, this.currentIndex._via = { next: !1, prev: !1 }, this.rootElm = null, this.imageContainerElm = null, this.currentImages = null, this.currentItems = null, this.navActive = !0, this.onResizeHandler && (window.removeEventListener("resize", this.onResizeHandler), this.onResizeHandler = null), this.onKeyDown && (window.removeEventListener("keydown", this.onKeyDown), this.onKeyDown = null), (this.onZoomedPointerDown || this.onZoomedPointerMove || this.onZoomedPointerUp) && (this.setZoomed(!1), this.onZoomedPointerDown = null, this.onZoomedPointerMove = null, this.onZoomedPointerUp = null), L.somethingOpened = null;
617
626
  }
618
627
  destroy() {
619
628
  this.close(!1), this.elements instanceof NodeList && this.elements.forEach((t, e) => {
@@ -621,19 +630,19 @@ class it {
621
630
  });
622
631
  }
623
632
  view(t, e) {
624
- b.somethingOpened === this && this.navActive && (t < 0 && (t = this.elements.length - 1), t >= this.elements.length && (t = 0), this.currentIndex.via = e || { next: !1, prev: !1 }, this.currentIndex.value = t);
633
+ L.somethingOpened === this && this.navActive && (t < 0 && (t = this.elements.length - 1), t >= this.elements.length && (t = 0), this.currentIndex.via = e || { next: !1, prev: !1 }, this.currentIndex.value = t);
625
634
  }
626
635
  next() {
627
- b.somethingOpened === this && this.view(this.currentIndex.value + 1, { next: !0, prev: !1 });
636
+ L.somethingOpened === this && this.view(this.currentIndex.value + 1, { next: !0, prev: !1 });
628
637
  }
629
638
  prev() {
630
- b.somethingOpened === this && this.view(this.currentIndex.value - 1, { next: !1, prev: !0 });
639
+ L.somethingOpened === this && this.view(this.currentIndex.value - 1, { next: !1, prev: !0 });
631
640
  }
632
641
  getCurrentIndex() {
633
- return b.somethingOpened === this ? this.currentIndex.value : -1;
642
+ return L.somethingOpened === this ? this.currentIndex.value : -1;
634
643
  }
635
644
  }
636
- function nt(s) {
645
+ function rt(s) {
637
646
  let t = null;
638
647
  if (typeof s == "string" ? t = document.querySelectorAll(s) : s instanceof NodeList && (t = s), t)
639
648
  for (let e = 0; e < t.length; e++) {
@@ -649,12 +658,12 @@ function nt(s) {
649
658
  }
650
659
  return t || s;
651
660
  }
652
- function ot({ elements: s, ...t }) {
661
+ function lt({ elements: s, ...t }) {
653
662
  if (!s) throw new Error("No elements");
654
- let e = nt(s);
663
+ let e = rt(s);
655
664
  if (typeof e == "string")
656
665
  return console.error(e), console.warn("VistaView: silently returning."), null;
657
- const n = new it(e, t);
666
+ const n = new ot(e, t);
658
667
  return {
659
668
  open: (i = 0) => n.open(i),
660
669
  close: () => n.close(),
@@ -668,13 +677,13 @@ function ot({ elements: s, ...t }) {
668
677
  };
669
678
  }
670
679
  export {
671
- W as DefaultOptions,
672
- et as defaultClose,
673
- J as defaultInit,
674
- Q as defaultSetup,
675
- tt as defaultTransition,
676
- q as removeTouchActions,
677
- G as setTouchActions,
678
- ot as vistaView,
679
- N as vistaViewDownload
680
+ q as DefaultOptions,
681
+ st as defaultClose,
682
+ et as defaultInit,
683
+ it as defaultSetup,
684
+ nt as defaultTransition,
685
+ O as removeTouchActions,
686
+ tt as setTouchActions,
687
+ lt as vistaView,
688
+ G as vistaViewDownload
680
689
  };