vistaview 0.3.6 → 0.3.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -6
- package/dist/lib/defaults.d.ts.map +1 -1
- package/dist/lib/vista-view.d.ts +4 -3
- package/dist/lib/vista-view.d.ts.map +1 -1
- package/dist/vistaview.cjs +4 -4
- package/dist/vistaview.css +1 -1
- package/dist/vistaview.js +206 -207
- package/dist/vistaview.umd.js +4 -4
- package/package.json +1 -1
package/dist/vistaview.js
CHANGED
|
@@ -16,11 +16,11 @@ function z(s) {
|
|
|
16
16
|
naturalHeight: s.naturalHeight
|
|
17
17
|
};
|
|
18
18
|
}
|
|
19
|
-
let
|
|
19
|
+
let P = null;
|
|
20
20
|
function V() {
|
|
21
|
-
return
|
|
21
|
+
return P || (window.trustedTypes || (window.trustedTypes = {
|
|
22
22
|
createPolicy: (s, t) => t
|
|
23
|
-
}),
|
|
23
|
+
}), P = window.trustedTypes.createPolicy("vistaView-policy", {
|
|
24
24
|
createHTML: (s) => s,
|
|
25
25
|
// HTML is generated by us, not user input
|
|
26
26
|
createScript: () => {
|
|
@@ -29,7 +29,7 @@ function V() {
|
|
|
29
29
|
createScriptURL: () => {
|
|
30
30
|
throw new Error("Not implemented");
|
|
31
31
|
}
|
|
32
|
-
}),
|
|
32
|
+
}), P);
|
|
33
33
|
}
|
|
34
34
|
function W(s) {
|
|
35
35
|
const i = V().createHTML(s), n = document.createElement("template");
|
|
@@ -40,30 +40,30 @@ function W(s) {
|
|
|
40
40
|
function R(s) {
|
|
41
41
|
return s && !/^0(px|%|r?em|vw|vh|vmin|vmax|cm|mm|in|pt|pc|ex|ch)?$/i.test(s.trim()) && s;
|
|
42
42
|
}
|
|
43
|
-
function
|
|
44
|
-
const i = window.getComputedStyle(s).objectFit || "", { width: n, height: e } = s.getBoundingClientRect(),
|
|
43
|
+
function _(s) {
|
|
44
|
+
const i = window.getComputedStyle(s).objectFit || "", { width: n, height: e } = s.getBoundingClientRect(), r = s.naturalWidth, d = s.naturalHeight;
|
|
45
45
|
if (!i)
|
|
46
46
|
return { width: n, height: e };
|
|
47
|
-
if (!
|
|
47
|
+
if (!r || !d)
|
|
48
48
|
return { width: n, height: e };
|
|
49
|
-
const o =
|
|
49
|
+
const o = r / d, a = n / e;
|
|
50
50
|
switch (i) {
|
|
51
51
|
case "fill":
|
|
52
52
|
return { width: n, height: e };
|
|
53
53
|
case "none":
|
|
54
|
-
return { width:
|
|
54
|
+
return { width: r, height: d };
|
|
55
55
|
case "contain":
|
|
56
|
-
return o >
|
|
56
|
+
return o > a ? { width: n, height: n / o } : { width: e * o, height: e };
|
|
57
57
|
case "cover":
|
|
58
|
-
return o <
|
|
58
|
+
return o < a ? { width: n, height: n / o } : { width: e * o, height: e };
|
|
59
59
|
case "scale-down": {
|
|
60
|
-
const
|
|
61
|
-
return
|
|
60
|
+
const h = { width: r, height: d }, l = o > a ? { width: n, height: n / o } : { width: e * o, height: e };
|
|
61
|
+
return l.width <= h.width && l.height <= h.height ? l : h;
|
|
62
62
|
}
|
|
63
63
|
}
|
|
64
64
|
return { width: n, height: e };
|
|
65
65
|
}
|
|
66
|
-
function
|
|
66
|
+
function T(s) {
|
|
67
67
|
const t = window.innerWidth, i = window.innerHeight, n = s.naturalWidth, e = s.naturalHeight;
|
|
68
68
|
if (!n || !e)
|
|
69
69
|
throw console.error("Error", s), new Error("Image natural dimensions are zero");
|
|
@@ -72,31 +72,31 @@ function H(s) {
|
|
|
72
72
|
width: n,
|
|
73
73
|
height: e
|
|
74
74
|
};
|
|
75
|
-
const
|
|
76
|
-
let o,
|
|
77
|
-
return
|
|
75
|
+
const r = n / e, d = t / i;
|
|
76
|
+
let o, a;
|
|
77
|
+
return r > d ? (o = t, a = t / r) : (a = i, o = i * r), {
|
|
78
78
|
width: o,
|
|
79
|
-
height:
|
|
79
|
+
height: a
|
|
80
80
|
};
|
|
81
81
|
}
|
|
82
|
-
function
|
|
83
|
-
const i = window.innerHeight, n = window.innerWidth, e = s,
|
|
82
|
+
function H(s, t) {
|
|
83
|
+
const i = window.innerHeight, n = window.innerWidth, e = s, r = t, d = Math.max(0, (e - n) / 2) + n / 2, o = Math.max(0, (r - i) / 2) + i / 2, a = -d, h = -o;
|
|
84
84
|
return {
|
|
85
85
|
maxDiffX: d,
|
|
86
|
-
minDiffY:
|
|
86
|
+
minDiffY: h,
|
|
87
87
|
maxDiffY: o,
|
|
88
|
-
minDiffX:
|
|
88
|
+
minDiffX: a
|
|
89
89
|
};
|
|
90
90
|
}
|
|
91
|
-
const
|
|
91
|
+
const B = '<svg viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>', F = '<svg viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>', N = '<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="11" x2="11" y1="8" y2="14"/><line x1="8" x2="14" y1="11" y2="11"/></svg>', U = '<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="8" x2="14" y1="11" y2="11"/></svg>', K = '<svg viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>', j = '<svg viewBox="0 0 24 24"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>';
|
|
92
92
|
function G() {
|
|
93
93
|
return {
|
|
94
94
|
name: "download",
|
|
95
95
|
icon: j,
|
|
96
96
|
onClick: async (s) => {
|
|
97
|
-
var
|
|
97
|
+
var r;
|
|
98
98
|
const t = await fetch(s.src), i = await t.blob(), n = t.url, e = document.createElement("a");
|
|
99
|
-
e.href = URL.createObjectURL(i), e.download = ((
|
|
99
|
+
e.href = URL.createObjectURL(i), e.download = ((r = n.split("/").pop()) == null ? void 0 : r.split("?")[0].split("#")[0]) || "download", document.body.appendChild(e), e.click(), document.body.removeChild(e);
|
|
100
100
|
}
|
|
101
101
|
};
|
|
102
102
|
}
|
|
@@ -119,18 +119,18 @@ function J(s) {
|
|
|
119
119
|
return `<button data-vistaview-custom-control="${s.name}">${s.icon}</button>`;
|
|
120
120
|
}
|
|
121
121
|
function q(s, t) {
|
|
122
|
-
var
|
|
123
|
-
const i = s.imageElm ? getComputedStyle(s.imageElm) : null, n = (i == null ? void 0 : i.objectFit) || "", e = ((
|
|
124
|
-
|
|
125
|
-
const
|
|
122
|
+
var l, c;
|
|
123
|
+
const i = s.imageElm ? getComputedStyle(s.imageElm) : null, n = (i == null ? void 0 : i.objectFit) || "", e = ((l = s.imageElm) == null ? void 0 : l.naturalWidth) || "", r = ((c = s.imageElm) == null ? void 0 : c.naturalHeight) || "", d = (i == null ? void 0 : i.width) || "", o = (i == null ? void 0 : i.height) || "", a = document.createElement("div");
|
|
124
|
+
a.className = "vistaview-item", a.dataset.vistaviewPos = `${t !== void 0 ? t : ""}`, a.dataset.vistaviewIndex = s.index.toString();
|
|
125
|
+
const h = W(`<img class="vistaview-image-lowres"
|
|
126
126
|
style="${n ? `object-fit:${n};` : ""}${d ? `width:${d};` : ""}${o ? `height:${o};` : ""}"
|
|
127
127
|
src="${s.thumb || s.src}"
|
|
128
128
|
alt="${s.alt || ""}"
|
|
129
129
|
${e ? `width="${e}"` : ""}
|
|
130
|
-
${
|
|
130
|
+
${r ? `height="${r}"` : ""}
|
|
131
131
|
/>
|
|
132
132
|
<img class="vistaview-image-highres" src="${s.src}" alt="${s.alt || ""}" />`);
|
|
133
|
-
return
|
|
133
|
+
return a.appendChild(h), a;
|
|
134
134
|
}
|
|
135
135
|
function Q({
|
|
136
136
|
controls: s,
|
|
@@ -143,67 +143,67 @@ function Q({
|
|
|
143
143
|
<div class="vistaview-image-container"></div>
|
|
144
144
|
<div class="vistaview-top-bar vistaview-ui"><div>${i(s == null ? void 0 : s.topLeft)}</div><div>${i(s == null ? void 0 : s.topCenter)}</div><div>${i(s == null ? void 0 : s.topRight)}</div></div>
|
|
145
145
|
<div class="vistaview-bottom-bar vistaview-ui"><div>${i(s == null ? void 0 : s.bottomLeft)}</div><div>${i(s == null ? void 0 : s.bottomCenter)}</div><div>${i(s == null ? void 0 : s.bottomRight)}</div></div>
|
|
146
|
-
<div class="vistaview-prev-btn vistaview-ui"><button>${
|
|
146
|
+
<div class="vistaview-prev-btn vistaview-ui"><button>${B}</button></div>
|
|
147
147
|
<div class="vistaview-next-btn vistaview-ui"><button>${F}</button></div>
|
|
148
148
|
</div>
|
|
149
149
|
</div>`
|
|
150
150
|
);
|
|
151
151
|
}
|
|
152
|
-
let A = null, $ = null,
|
|
152
|
+
let A = null, $ = null, M = null, Z = null;
|
|
153
153
|
function tt(s) {
|
|
154
154
|
O(s);
|
|
155
155
|
const t = s.imageContainerElm, i = s.elements.length;
|
|
156
156
|
if (!t) return;
|
|
157
|
-
let n = 0, e = 0,
|
|
158
|
-
A = (
|
|
159
|
-
|
|
160
|
-
}, $ = (
|
|
161
|
-
if (
|
|
162
|
-
const
|
|
163
|
-
|
|
164
|
-
},
|
|
165
|
-
if (
|
|
166
|
-
|
|
167
|
-
const
|
|
168
|
-
t.style.removeProperty("--vistaview-pointer-diff-x"), t.style.removeProperty("--vistaview-pointer-diff-y"),
|
|
169
|
-
|
|
157
|
+
let n = 0, e = 0, r = 0, d = 0, o = null, a = 0, h = !1;
|
|
158
|
+
A = (l) => {
|
|
159
|
+
l.preventDefault(), l.stopPropagation(), s.isZoomed === !1 && (h = !0, n = l.pageX, e = l.pageY, r = l.pageX, d = l.pageY, a = Date.now(), o = null, t.setPointerCapture(l.pointerId));
|
|
160
|
+
}, $ = (l) => {
|
|
161
|
+
if (l.preventDefault(), l.stopPropagation(), s.isZoomed !== !1 || !h) return;
|
|
162
|
+
const c = l.pageX - n, v = l.pageY - e;
|
|
163
|
+
r = l.pageX, d = l.pageY, Math.abs(c) >= Math.abs(v) && (o === null || o === !0) ? (t.style.setProperty("--vistaview-pointer-diff-x", `${c}px`), o = !0) : Math.abs(v) > Math.abs(c) && (o === null || o === !1) && (t.style.setProperty("--vistaview-pointer-diff-y", `${v}px`), o = !1);
|
|
164
|
+
}, Z = (l) => {
|
|
165
|
+
if (l.preventDefault(), l.stopPropagation(), t.releasePointerCapture(l.pointerId), s.isZoomed !== !1 || !h) return;
|
|
166
|
+
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((v) => {
|
|
169
|
+
v.style.transition = "", v.style.translate = "";
|
|
170
170
|
});
|
|
171
|
-
},
|
|
172
|
-
if (
|
|
173
|
-
|
|
174
|
-
const
|
|
171
|
+
}, M = (l) => {
|
|
172
|
+
if (l.preventDefault(), l.stopPropagation(), t.releasePointerCapture(l.pointerId), s.isZoomed !== !1 || !h) return;
|
|
173
|
+
h = !1;
|
|
174
|
+
const c = Array.from(t.querySelectorAll(".vistaview-item")), v = r - n, m = d - e, f = Date.now() - a, u = v / f, y = m / f, p = s.options.touchSpeedThreshold || 0.5, x = c.find(
|
|
175
175
|
(E) => E.dataset.vistaviewPos === "0"
|
|
176
|
-
),
|
|
176
|
+
), b = Number(x.dataset.vistaviewIndex);
|
|
177
177
|
function g() {
|
|
178
|
-
|
|
178
|
+
c[0].removeEventListener("transitionend", g), t.style.removeProperty("--vistaview-pointer-diff-x"), t.style.removeProperty("--vistaview-pointer-diff-y"), c.forEach((E) => {
|
|
179
179
|
E.style.transition = "", E.style.translate = "";
|
|
180
180
|
});
|
|
181
181
|
}
|
|
182
182
|
function I(E = "0%", L = "0%") {
|
|
183
|
-
|
|
183
|
+
c.forEach((D) => {
|
|
184
184
|
D.style.transition = `translate ${s.options.animationDurationBase * 0.5}ms ease-out`, D.style.translate = `${E} ${L}`;
|
|
185
185
|
});
|
|
186
186
|
}
|
|
187
|
-
if (
|
|
187
|
+
if (u < -p || u > p) {
|
|
188
188
|
let E = function() {
|
|
189
|
-
|
|
189
|
+
c[0].removeEventListener("transitionend", E), setTimeout(() => {
|
|
190
190
|
const L = s.isReducedMotion;
|
|
191
191
|
s.isReducedMotion = !0, g(), s.view(
|
|
192
|
-
|
|
192
|
+
u < -p ? (b + 1) % i : (b - 1 + i) % i,
|
|
193
193
|
{
|
|
194
|
-
next:
|
|
195
|
-
prev:
|
|
194
|
+
next: u < -p,
|
|
195
|
+
prev: u > p
|
|
196
196
|
}
|
|
197
197
|
), s.isReducedMotion = L;
|
|
198
198
|
}, 100);
|
|
199
199
|
};
|
|
200
|
-
I(
|
|
201
|
-
} else y < -p || y > p ? (s.close(), I("0%", "0%")) : (
|
|
202
|
-
}, t.addEventListener("pointermove", $), t.addEventListener("pointerup",
|
|
200
|
+
I(u < -p ? "-100%" : "100%"), c[0].addEventListener("transitionend", E);
|
|
201
|
+
} else y < -p || y > p ? (s.close(), I("0%", "0%")) : (c[0].addEventListener("transitionend", g), I("0%"), u === 0 && y === 0 && s.zoomIn());
|
|
202
|
+
}, t.addEventListener("pointermove", $), t.addEventListener("pointerup", M), t.addEventListener("pointerdown", A), t.addEventListener("pointercancel", Z);
|
|
203
203
|
}
|
|
204
204
|
function O(s) {
|
|
205
205
|
const t = s.imageContainerElm;
|
|
206
|
-
t && ($ && t.removeEventListener("pointermove", $),
|
|
206
|
+
t && ($ && t.removeEventListener("pointermove", $), M && t.removeEventListener("pointerup", M), A && t.removeEventListener("pointerdown", A), Z && t.removeEventListener("pointercancel", Z));
|
|
207
207
|
}
|
|
208
208
|
const et = (s) => {
|
|
209
209
|
tt(s);
|
|
@@ -220,65 +220,49 @@ const et = (s) => {
|
|
|
220
220
|
htmlElements: { from: s, to: t },
|
|
221
221
|
images: { to: i },
|
|
222
222
|
via: { next: n, prev: e },
|
|
223
|
-
options:
|
|
223
|
+
options: r,
|
|
224
224
|
isReducedMotion: d
|
|
225
225
|
// index: { from: fromIndex, to: toIndex },
|
|
226
226
|
}, o) => {
|
|
227
|
-
if (
|
|
228
|
-
|
|
229
|
-
if (d) {
|
|
230
|
-
console.log("reduced motion, no transition");
|
|
227
|
+
if (!i) throw new Error("VistaView: images is null in defaultTransition()");
|
|
228
|
+
if (d)
|
|
231
229
|
return;
|
|
232
|
-
|
|
233
|
-
await new Promise((
|
|
234
|
-
let
|
|
230
|
+
const a = s.filter((h) => h.dataset.vistaviewPos === "0" || (n ? h.dataset.vistaviewPos === "1" : h.dataset.vistaviewPos === "-1"));
|
|
231
|
+
await new Promise((h, l) => {
|
|
232
|
+
let c = 0;
|
|
235
233
|
if (o.aborted) {
|
|
236
|
-
|
|
234
|
+
l(new S("Transition aborted"));
|
|
237
235
|
return;
|
|
238
236
|
}
|
|
239
|
-
const
|
|
240
|
-
if (o.aborted)
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
if (f.currentTarget.removeEventListener("transitionend", m), h++, h < l.length) return;
|
|
245
|
-
const u = t == null ? void 0 : t.find((g) => g.dataset.vistaviewPos === "0"), v = u ? Number(u.dataset.vistaviewIndex) : 0, y = l.find((g) => Number(g.dataset.vistaviewIndex) === v), p = y == null ? void 0 : y.querySelector(
|
|
237
|
+
const v = (m) => {
|
|
238
|
+
if (o.aborted)
|
|
239
|
+
return l(new S("Transition aborted"));
|
|
240
|
+
if (m.currentTarget.removeEventListener("transitionend", v), c++, c < a.length) return;
|
|
241
|
+
const f = t == null ? void 0 : t.find((g) => g.dataset.vistaviewPos === "0"), u = f ? Number(f.dataset.vistaviewIndex) : 0, y = a.find((g) => Number(g.dataset.vistaviewIndex) === u), p = y == null ? void 0 : y.querySelector(
|
|
246
242
|
".vistaview-image-highres"
|
|
247
243
|
);
|
|
248
|
-
if (!p)
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
let b = 0;
|
|
261
|
-
console.log("waiting for image to be settled...");
|
|
262
|
-
const x = setInterval(() => {
|
|
263
|
-
if (o.aborted) {
|
|
264
|
-
console.log("transition aborted during wait"), clearInterval(x), r(new P("Transition aborted"));
|
|
265
|
-
return;
|
|
266
|
-
}
|
|
267
|
-
if (b++, b > a.animationDurationBase / 20 * 1.5) {
|
|
268
|
-
console.log("timeout waiting for image to be settled"), clearInterval(x), c(0);
|
|
269
|
-
return;
|
|
270
|
-
}
|
|
271
|
-
p.classList.contains("vistaview-image-settled") && (console.log("image settled"), u == null || u.classList.add("vistaview-image-settled"), clearInterval(x), c(0));
|
|
244
|
+
if (!p)
|
|
245
|
+
return l(new Error("current image element not found"));
|
|
246
|
+
if (!p.classList.contains("vistaview-image-loaded") || p.classList.contains("vistaview-image-settled"))
|
|
247
|
+
return h(0);
|
|
248
|
+
let x = 0;
|
|
249
|
+
const b = setInterval(() => {
|
|
250
|
+
if (o.aborted)
|
|
251
|
+
return clearInterval(b), l(new S("Transition aborted"));
|
|
252
|
+
if (x++, x > r.animationDurationBase / 20 * 1.5)
|
|
253
|
+
return clearInterval(b), h(0);
|
|
254
|
+
if (p.classList.contains("vistaview-image-settled"))
|
|
255
|
+
return f == null || f.classList.add("vistaview-image-settled"), clearInterval(b), h(0);
|
|
272
256
|
}, 20);
|
|
273
257
|
};
|
|
274
|
-
|
|
275
|
-
|
|
258
|
+
a.forEach((m) => {
|
|
259
|
+
m.style.transition = `translate ${r.animationDurationBase * 0.5}ms ease-out`, m.style.translate = n ? "-100%" : e ? "100%" : "0%", m.addEventListener("transitionend", v);
|
|
276
260
|
});
|
|
277
261
|
});
|
|
278
262
|
}, st = (s) => {
|
|
279
263
|
s.elements instanceof NodeList && s.elements.forEach((t) => t.style.opacity = "1"), O(s);
|
|
280
264
|
};
|
|
281
|
-
class
|
|
265
|
+
class S extends Error {
|
|
282
266
|
constructor(t) {
|
|
283
267
|
super(t), this.name = "VistaViewTransitionAbortedError";
|
|
284
268
|
}
|
|
@@ -312,9 +296,12 @@ class ot {
|
|
|
312
296
|
_vistaView: null,
|
|
313
297
|
_via: { next: !1, prev: !1 },
|
|
314
298
|
set value(t) {
|
|
315
|
-
var n;
|
|
299
|
+
var n, e, r;
|
|
316
300
|
const i = this._value;
|
|
317
|
-
this._value = t
|
|
301
|
+
this._value = t;
|
|
302
|
+
for (const d in (n = this._vistaView) == null ? void 0 : n.transitionAbortControllers)
|
|
303
|
+
(e = this._vistaView) == null || e.transitionAbortControllers[d].abort();
|
|
304
|
+
(r = this._vistaView) == null || r.swap(i, this._value);
|
|
318
305
|
},
|
|
319
306
|
get value() {
|
|
320
307
|
return this._value;
|
|
@@ -348,7 +335,8 @@ class ot {
|
|
|
348
335
|
w(this, "onZoomedPointerDown", null);
|
|
349
336
|
w(this, "onZoomedPointerMove", null);
|
|
350
337
|
w(this, "onZoomedPointerUp", null);
|
|
351
|
-
w(this, "
|
|
338
|
+
w(this, "transitionAbortControllers", {});
|
|
339
|
+
w(this, "loadImageTimeout", null);
|
|
352
340
|
this.elements = t, this.currentIndex._vistaView = this, this.options = {
|
|
353
341
|
...k,
|
|
354
342
|
...i || {},
|
|
@@ -363,14 +351,12 @@ class ot {
|
|
|
363
351
|
async swap(t, i) {
|
|
364
352
|
var l, c;
|
|
365
353
|
if (!C.somethingOpened || t === i || t === null) return;
|
|
366
|
-
if (
|
|
354
|
+
if (!this.imageContainerElm)
|
|
367
355
|
throw new Error("VistaView: imageContainerElm is null in swap()");
|
|
368
356
|
this.setIndexDisplay(), this.clearZoom();
|
|
369
|
-
const { images: n, positions: e } = this.getCurrentIndexes(i),
|
|
370
|
-
console.log("swap prepared");
|
|
371
|
-
const o = {
|
|
357
|
+
const { images: n, positions: e } = this.getCurrentIndexes(i), r = this.getImages(n), d = r.map((v, m) => q(v, e[m])), o = {
|
|
372
358
|
htmlElements: { from: this.currentItems, to: d },
|
|
373
|
-
images: { from: this.currentImages, to:
|
|
359
|
+
images: { from: this.currentImages, to: r },
|
|
374
360
|
index: { from: t, to: i },
|
|
375
361
|
via: this.currentIndex.via,
|
|
376
362
|
container: this.imageContainerElm,
|
|
@@ -380,84 +366,94 @@ class ot {
|
|
|
380
366
|
isZoomed: this.isZoomed,
|
|
381
367
|
options: this.options
|
|
382
368
|
};
|
|
383
|
-
this.userSetup(o)
|
|
369
|
+
this.userSetup(o);
|
|
370
|
+
const a = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
|
|
371
|
+
this.transitionAbortControllers[a] = new AbortController();
|
|
384
372
|
try {
|
|
385
|
-
await this.userTransition(o, this.
|
|
386
|
-
} catch (
|
|
387
|
-
|
|
373
|
+
await this.userTransition(o, this.transitionAbortControllers[a].signal);
|
|
374
|
+
} catch (v) {
|
|
375
|
+
v instanceof S || console.warn(v);
|
|
388
376
|
}
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
377
|
+
delete this.transitionAbortControllers[a];
|
|
378
|
+
const h = d.find((v) => v.dataset.vistaviewPos === "0");
|
|
379
|
+
if (h) {
|
|
380
|
+
const v = h.dataset.vistaviewIndex, m = this.currentItems.find((u) => u.dataset.vistaviewIndex === v), f = m == null ? void 0 : m.querySelector(".vistaview-image-highres");
|
|
381
|
+
if (f) {
|
|
382
|
+
const u = h.querySelector(
|
|
383
|
+
".vistaview-image-highres"
|
|
384
|
+
);
|
|
385
|
+
u.setAttribute("class", f.getAttribute("class") || ""), u.setAttribute("style", f.getAttribute("style") || ""), u.classList.remove("vistaview-image--zooming"), u.classList.remove("vistaview-image-settled");
|
|
386
|
+
}
|
|
387
|
+
}
|
|
388
|
+
this.imageContainerElm.innerHTML = "", d.forEach((v) => {
|
|
389
|
+
this.imageContainerElm.appendChild(v);
|
|
390
|
+
}), this.setInitialDimPos(), this.currentImages = r, this.currentItems = d, this.setCurrentDescription(), this.updateZoomButtonsVisibility(), (c = (l = this.options).onImageView) == null || c.call(l, o), this.loadImageTimeout && clearTimeout(this.loadImageTimeout), this.loadImageTimeout = setTimeout(() => {
|
|
391
|
+
this.loadImages();
|
|
392
|
+
}, 333);
|
|
397
393
|
}
|
|
398
394
|
//
|
|
399
395
|
setZoomed(t) {
|
|
400
|
-
var i, n, e,
|
|
396
|
+
var i, n, e, r, d, o;
|
|
401
397
|
if (this.isZoomed !== t) {
|
|
402
398
|
if (this.isZoomed) {
|
|
403
|
-
let
|
|
404
|
-
if (
|
|
405
|
-
|
|
399
|
+
let a = this.isZoomed;
|
|
400
|
+
if (a.classList.remove("vistaview-image--zooming"), this.onZoomedPointerDown && ((i = a.parentElement) == null || i.removeEventListener("pointerdown", this.onZoomedPointerDown), this.onZoomedPointerDown = null), this.onZoomedPointerMove && ((n = a.parentElement) == null || n.removeEventListener("pointermove", this.onZoomedPointerMove), this.onZoomedPointerMove = null), this.onZoomedPointerUp && ((e = a.parentElement) == null || e.removeEventListener("pointerup", this.onZoomedPointerUp), this.onZoomedPointerUp = null), a == null || a.style.removeProperty("--pointer-diff-x"), a == null || a.style.removeProperty("--pointer-diff-y"), setTimeout(() => {
|
|
401
|
+
a == null || a.classList.remove("vistaview-image--zooming");
|
|
406
402
|
}, 500), this.isZoomed = !1, !t) return;
|
|
407
403
|
}
|
|
408
404
|
if (t) {
|
|
409
405
|
this.isZoomed = t, t.classList.add("vistaview-image--zooming"), t == null || t.style.setProperty("--pointer-diff-x", "0px"), t == null || t.style.setProperty("--pointer-diff-y", "0px");
|
|
410
|
-
let
|
|
411
|
-
this.onZoomedPointerDown = (
|
|
412
|
-
|
|
413
|
-
}, this.onZoomedPointerMove = (
|
|
414
|
-
if (!
|
|
415
|
-
|
|
416
|
-
const y = parseInt((t == null ? void 0 : t.dataset.vistaviewCurrentWidth) || "0"), p = parseInt((t == null ? void 0 : t.dataset.vistaviewCurrentHeight) || "0"), { maxDiffX:
|
|
406
|
+
let a = !1, h = 0, l = 0, c = 0, v = 0, m = 0, f = 0;
|
|
407
|
+
this.onZoomedPointerDown = (u) => {
|
|
408
|
+
u.preventDefault(), u.stopPropagation(), a = !0, h = u.pageX, l = u.pageY, t.setPointerCapture(u.pointerId);
|
|
409
|
+
}, this.onZoomedPointerMove = (u) => {
|
|
410
|
+
if (!a) return;
|
|
411
|
+
u.preventDefault(), m = u.pageX - h, f = u.pageY - l;
|
|
412
|
+
const y = parseInt((t == null ? void 0 : t.dataset.vistaviewCurrentWidth) || "0"), p = parseInt((t == null ? void 0 : t.dataset.vistaviewCurrentHeight) || "0"), { maxDiffX: x, minDiffY: b, maxDiffY: g, minDiffX: I } = H(
|
|
417
413
|
y,
|
|
418
414
|
p
|
|
419
|
-
), E = Math.min(
|
|
420
|
-
|
|
421
|
-
}, this.onZoomedPointerUp = (
|
|
422
|
-
|
|
423
|
-
}, (
|
|
415
|
+
), E = Math.min(x, Math.max(I, c + m)), L = Math.min(g, Math.max(b, v + f));
|
|
416
|
+
m = E - c, f = L - v, t == null || t.style.setProperty("--pointer-diff-x", `${E}px`), t == null || t.style.setProperty("--pointer-diff-y", `${L}px`);
|
|
417
|
+
}, this.onZoomedPointerUp = (u) => {
|
|
418
|
+
a = !1, t.releasePointerCapture(u.pointerId), c += m, v += f, m = 0, f = 0;
|
|
419
|
+
}, (r = t == null ? void 0 : t.parentElement) == null || r.addEventListener("pointerdown", this.onZoomedPointerDown), (d = t == null ? void 0 : t.parentElement) == null || d.addEventListener("pointermove", this.onZoomedPointerMove), (o = t == null ? void 0 : t.parentElement) == null || o.addEventListener("pointerup", this.onZoomedPointerUp);
|
|
424
420
|
return;
|
|
425
421
|
}
|
|
426
422
|
}
|
|
427
423
|
}
|
|
428
424
|
zoomIn() {
|
|
429
|
-
var
|
|
430
|
-
const t = (
|
|
425
|
+
var r, d, o, a, h;
|
|
426
|
+
const t = (r = this.rootElm) == null ? void 0 : r.querySelector(
|
|
431
427
|
'[data-vistaview-pos="0"] .vistaview-image-highres'
|
|
432
428
|
), i = t.width, n = t.height;
|
|
433
429
|
t.dataset.vistaviewInitialWidth || (t.dataset.vistaviewInitialWidth = i.toString()), t.dataset.vistaviewInitialHeight || (t.dataset.vistaviewInitialHeight = n.toString()), this.setZoomed(t);
|
|
434
430
|
const e = (t.naturalWidth || 0) * this.options.maxZoomLevel;
|
|
435
431
|
if (i && e && i < e) {
|
|
436
|
-
const
|
|
437
|
-
t.style.width = `${
|
|
438
|
-
const
|
|
439
|
-
t.style.height = `${
|
|
432
|
+
const l = Math.min(i + this.options.zoomStep, e);
|
|
433
|
+
t.style.width = `${l}px`;
|
|
434
|
+
const c = l / i * n;
|
|
435
|
+
t.style.height = `${c}px`, (o = (d = this.rootElm) == null ? void 0 : d.querySelector("button.vistaview-zoom-out-btn")) == null || o.removeAttribute("disabled"), t.dataset.vistaviewCurrentWidth = l.toString(), t.dataset.vistaviewCurrentHeight = c.toString(), l === e && ((h = (a = this.rootElm) == null ? void 0 : a.querySelector("button.vistaview-zoom-in-btn")) == null || h.setAttribute("disabled", "true"));
|
|
440
436
|
}
|
|
441
437
|
}
|
|
442
438
|
zoomOut() {
|
|
443
|
-
var d, o,
|
|
439
|
+
var d, o, a, h, l;
|
|
444
440
|
const t = (d = this.rootElm) == null ? void 0 : d.querySelector(
|
|
445
441
|
'[data-vistaview-pos="0"] .vistaview-image-highres'
|
|
446
|
-
), i = t.width, n = t.height, e = t.dataset.vistaviewInitialWidth ? parseInt(t.dataset.vistaviewInitialWidth) : 0,
|
|
447
|
-
|
|
442
|
+
), i = t.width, n = t.height, e = t.dataset.vistaviewInitialWidth ? parseInt(t.dataset.vistaviewInitialWidth) : 0, r = (c) => {
|
|
443
|
+
c.target === t && (t.classList.remove("vistaview-image--zooming-out"), t.removeEventListener("transitionend", r));
|
|
448
444
|
};
|
|
449
|
-
if (t.addEventListener("transitionend",
|
|
450
|
-
const
|
|
451
|
-
t.style.width = `${
|
|
452
|
-
const
|
|
453
|
-
t.style.height = `${
|
|
454
|
-
const { maxDiffX:
|
|
445
|
+
if (t.addEventListener("transitionend", r), t.classList.add("vistaview-image--zooming-out"), i && e && i > e) {
|
|
446
|
+
const c = Math.max(i - this.options.zoomStep, e);
|
|
447
|
+
t.style.width = `${c}px`;
|
|
448
|
+
const v = c / i * n;
|
|
449
|
+
t.style.height = `${v}px`, (a = (o = this.rootElm) == null ? void 0 : o.querySelector("button.vistaview-zoom-in-btn")) == null || a.removeAttribute("disabled"), t.dataset.vistaviewCurrentWidth = c.toString(), t.dataset.vistaviewCurrentHeight = v.toString();
|
|
450
|
+
const { maxDiffX: m, minDiffY: f, maxDiffY: u, minDiffX: y } = H(c, v);
|
|
455
451
|
let p = parseInt(
|
|
456
452
|
(t == null ? void 0 : t.style.getPropertyValue("--pointer-diff-x").replace("px", "")) || "0"
|
|
457
|
-
),
|
|
453
|
+
), x = parseInt(
|
|
458
454
|
(t == null ? void 0 : t.style.getPropertyValue("--pointer-diff-y").replace("px", "")) || "0"
|
|
459
455
|
);
|
|
460
|
-
p = Math.min(
|
|
456
|
+
p = Math.min(m, Math.max(y, p)), x = Math.min(u, Math.max(f, x)), t == null || t.style.setProperty("--pointer-diff-x", `${p}px`), t == null || t.style.setProperty("--pointer-diff-y", `${x}px`), c === e && ((l = (h = this.rootElm) == null ? void 0 : h.querySelector("button.vistaview-zoom-out-btn")) == null || l.setAttribute("disabled", "true"), t.removeAttribute("data-vistaview-current-width"), t.removeAttribute("data-vistaview-current-height"), t.removeAttribute("data-vistaview-initial-width"), t.removeAttribute("data-vistaview-initial-height"), this.setZoomed(!1));
|
|
461
457
|
}
|
|
462
458
|
}
|
|
463
459
|
clearZoom() {
|
|
@@ -466,13 +462,13 @@ class ot {
|
|
|
466
462
|
return t.map((i, n) => {
|
|
467
463
|
const e = this.elements[i];
|
|
468
464
|
if (e instanceof HTMLElement) {
|
|
469
|
-
const
|
|
465
|
+
const r = e.querySelector("img"), d = e.getAttribute("href") || "", o = e.getAttribute("src") || "", a = e.dataset.vistaviewSrc || d || o || (r == null ? void 0 : r.src) || "", h = e.dataset.vistaviewAlt || e.getAttribute("alt") || (r == null ? void 0 : r.alt) || "", l = e.dataset.vistaviewThumb || (r == null ? void 0 : r.src) || d || o || "";
|
|
470
466
|
return {
|
|
471
467
|
index: t[n],
|
|
472
|
-
src:
|
|
473
|
-
alt:
|
|
474
|
-
thumb:
|
|
475
|
-
imageElm: e instanceof HTMLImageElement ? e :
|
|
468
|
+
src: a,
|
|
469
|
+
alt: h,
|
|
470
|
+
thumb: l,
|
|
471
|
+
imageElm: e instanceof HTMLImageElement ? e : r,
|
|
476
472
|
anchorElm: e instanceof HTMLAnchorElement ? e : void 0
|
|
477
473
|
};
|
|
478
474
|
} else
|
|
@@ -480,12 +476,12 @@ class ot {
|
|
|
480
476
|
});
|
|
481
477
|
}
|
|
482
478
|
setInitialDimPos() {
|
|
483
|
-
var
|
|
479
|
+
var h, l;
|
|
484
480
|
if (!this.rootElm) return;
|
|
485
|
-
const t = (
|
|
481
|
+
const t = (h = this.rootElm.querySelector('[data-vistaview-pos="0"]')) == null ? void 0 : h.dataset.vistaviewIndex, i = ((l = this.currentImages) == null ? void 0 : l.find((c) => c.index === Number(t))) || null;
|
|
486
482
|
if (!i) return;
|
|
487
|
-
const n = i.imageElm ? z(i.imageElm) : void 0, e = i.anchorElm ? z(i.anchorElm) : void 0,
|
|
488
|
-
this.rootElm.style.setProperty("--vistaview-container-initial-width",
|
|
483
|
+
const n = i.imageElm ? z(i.imageElm) : void 0, e = i.anchorElm ? z(i.anchorElm) : void 0, r = (e == null ? void 0 : e.width) || (n == null ? void 0 : n.width) || 0, d = (e == null ? void 0 : e.height) || (n == null ? void 0 : n.height) || 0, o = ((e == null ? void 0 : e.left) || (n == null ? void 0 : n.left) || 0) + r / 2, a = ((e == null ? void 0 : e.top) || (n == null ? void 0 : n.top) || 0) + d / 2;
|
|
484
|
+
this.rootElm.style.setProperty("--vistaview-container-initial-width", r + "px"), this.rootElm.style.setProperty("--vistaview-container-initial-height", d + "px"), this.rootElm.style.setProperty("--vistaview-container-initial-top", a + "px"), this.rootElm.style.setProperty("--vistaview-container-initial-left", o + "px"), this.rootElm.style.setProperty(
|
|
489
485
|
"--vistaview-image-border-radius",
|
|
490
486
|
R(e == null ? void 0 : e.borderRadius) || R(n == null ? void 0 : n.borderRadius) || "0px"
|
|
491
487
|
);
|
|
@@ -498,13 +494,13 @@ class ot {
|
|
|
498
494
|
if (!t) return;
|
|
499
495
|
const i = this;
|
|
500
496
|
function n() {
|
|
501
|
-
var
|
|
502
|
-
const
|
|
497
|
+
var l, c;
|
|
498
|
+
const r = (l = i.rootElm) == null ? void 0 : l.querySelector(
|
|
503
499
|
"button.vistaview-zoom-in-btn"
|
|
504
|
-
), d = (
|
|
500
|
+
), d = (c = i.rootElm) == null ? void 0 : c.querySelector(
|
|
505
501
|
"button.vistaview-zoom-out-btn"
|
|
506
|
-
), o = parseInt(t.style.width) || t.width,
|
|
507
|
-
|
|
502
|
+
), o = parseInt(t.style.width) || t.width, a = t.naturalWidth * i.options.maxZoomLevel, h = o < a && a > 0;
|
|
503
|
+
r && (r.style.display = h ? "" : "none"), d && (d.style.display = h ? "" : "none");
|
|
508
504
|
}
|
|
509
505
|
t.complete && t.naturalWidth > 0 ? n() : t.addEventListener("load", n);
|
|
510
506
|
}
|
|
@@ -515,35 +511,35 @@ class ot {
|
|
|
515
511
|
).forEach((i, n) => {
|
|
516
512
|
const e = i, d = this.currentImages[n].imageElm, o = { w: 0, h: 0 };
|
|
517
513
|
if (d) {
|
|
518
|
-
const { width:
|
|
519
|
-
o.w = Math.min(d.width,
|
|
514
|
+
const { width: h, height: l } = _(d);
|
|
515
|
+
o.w = Math.min(d.width, h), o.h = Math.min(d.height, l);
|
|
520
516
|
}
|
|
521
|
-
const
|
|
522
|
-
var
|
|
523
|
-
const
|
|
524
|
-
var
|
|
517
|
+
const a = () => {
|
|
518
|
+
var l;
|
|
519
|
+
const h = () => {
|
|
520
|
+
var c;
|
|
525
521
|
o.w && o.h && (e.style.width = `${o.w}px`, e.style.height = `${o.h}px`, e.style.setProperty("--vistaview-fitted-width", `${o.w}px`), e.style.setProperty("--vistaview-fitted-height", `${o.h}px`)), e.classList.add("vistaview-image-loaded"), e.width = e.naturalWidth, e.height = e.naturalHeight, setTimeout(() => {
|
|
526
522
|
var y, p;
|
|
527
|
-
let
|
|
528
|
-
const
|
|
529
|
-
var
|
|
530
|
-
|
|
523
|
+
let v = 0;
|
|
524
|
+
const m = () => {
|
|
525
|
+
var x, b;
|
|
526
|
+
v++, !(v < 3) && (e.removeEventListener("transitionend", m), (b = (x = e.parentElement) == null ? void 0 : x.querySelector(".vistaview-image-lowres")) == null || b.classList.add("vistaview-image--hidden"), e.classList.add("vistaview-image-settled"));
|
|
531
527
|
};
|
|
532
|
-
e.addEventListener("transitionend",
|
|
533
|
-
const { width:
|
|
534
|
-
e.style.width = `${
|
|
535
|
-
}, 100), (
|
|
528
|
+
e.addEventListener("transitionend", m);
|
|
529
|
+
const { width: f, height: u } = T(e);
|
|
530
|
+
e.style.width = `${f}px`, e.style.height = `${u}px`, o.w && o.h && f === o.w && u === o.h ? ((p = (y = e.parentElement) == null ? void 0 : y.querySelector(".vistaview-image-lowres")) == null || p.classList.add("vistaview-image--hidden"), e.classList.add("vistaview-image-settled")) : (e.style.width = `${f}px`, e.style.height = `${u}px`);
|
|
531
|
+
}, 100), (c = i.parentElement) != null && c.matches('[data-vistaview-pos="0"]') && this.updateZoomButtonsVisibility();
|
|
536
532
|
};
|
|
537
|
-
if ((
|
|
538
|
-
|
|
533
|
+
if ((l = this.rootElm) != null && l.classList.contains("vistaview--opened"))
|
|
534
|
+
h();
|
|
539
535
|
else {
|
|
540
|
-
const
|
|
541
|
-
var
|
|
542
|
-
(
|
|
536
|
+
const c = setInterval(() => {
|
|
537
|
+
var v;
|
|
538
|
+
(v = this.rootElm) != null && v.classList.contains("vistaview--opened") && (clearInterval(c), h());
|
|
543
539
|
}, 50);
|
|
544
540
|
}
|
|
545
541
|
};
|
|
546
|
-
e.complete && e.naturalWidth > 0 ?
|
|
542
|
+
e.complete && e.naturalWidth > 0 ? a() : e.onload = a;
|
|
547
543
|
});
|
|
548
544
|
}
|
|
549
545
|
setIndexDisplay() {
|
|
@@ -562,10 +558,10 @@ class ot {
|
|
|
562
558
|
t,
|
|
563
559
|
...Array.from({ length: i }, (d, o) => (t + 1 + o) % n)
|
|
564
560
|
])
|
|
565
|
-
],
|
|
561
|
+
], r = n < 1 || !i ? [0] : e.map((d, o) => o - Math.floor(e.length / 2));
|
|
566
562
|
return {
|
|
567
563
|
images: e,
|
|
568
|
-
positions:
|
|
564
|
+
positions: r
|
|
569
565
|
};
|
|
570
566
|
}
|
|
571
567
|
setKeyboardListeners() {
|
|
@@ -597,13 +593,13 @@ class ot {
|
|
|
597
593
|
".vistaview-image-highres.vistaview-image-loaded"
|
|
598
594
|
);
|
|
599
595
|
t == null || t.forEach((n) => {
|
|
600
|
-
const e = n, { width:
|
|
601
|
-
e.classList.contains("vistaview-image--zooming") ? (e.dataset.vistaviewInitialWidth =
|
|
596
|
+
const e = n, { width: r, height: d } = T(e);
|
|
597
|
+
e.classList.contains("vistaview-image--zooming") ? (e.dataset.vistaviewInitialWidth = r.toString(), e.dataset.vistaviewInitialHeight = d.toString()) : (e.style.width = `${r}px`, e.style.height = `${d}px`);
|
|
602
598
|
});
|
|
603
599
|
}, window.addEventListener("resize", this.onResizeHandler);
|
|
604
600
|
}
|
|
605
601
|
open(t = 0) {
|
|
606
|
-
var o, l, c,
|
|
602
|
+
var o, a, h, l, c, v, m, f, u, y, p, x, b;
|
|
607
603
|
if (C.somethingOpened) {
|
|
608
604
|
console.error("VistaView: another instance is already opened. Returning.");
|
|
609
605
|
return;
|
|
@@ -620,7 +616,7 @@ class ot {
|
|
|
620
616
|
this.currentImages = this.getImages(i);
|
|
621
617
|
const e = this.currentImages.map((g, I) => q(g, n[I]));
|
|
622
618
|
this.currentItems = e;
|
|
623
|
-
const
|
|
619
|
+
const r = {
|
|
624
620
|
htmlElements: { from: null, to: this.currentItems },
|
|
625
621
|
images: { from: null, to: this.currentImages },
|
|
626
622
|
index: { from: null, to: t },
|
|
@@ -632,14 +628,14 @@ class ot {
|
|
|
632
628
|
isZoomed: this.isZoomed,
|
|
633
629
|
options: this.options
|
|
634
630
|
};
|
|
635
|
-
this.userSetup(
|
|
631
|
+
this.userSetup(r), this.imageContainerElm.innerHTML = "", this.currentItems.forEach((g) => {
|
|
636
632
|
this.imageContainerElm.appendChild(g);
|
|
637
633
|
});
|
|
638
634
|
let d = 0;
|
|
639
635
|
this.rootElm.addEventListener("animationend", (g) => {
|
|
640
636
|
var I;
|
|
641
637
|
g.currentTarget === this.rootElm && (d++, d >= 2 && ((I = this.rootElm) == null || I.classList.add("vistaview--opened")));
|
|
642
|
-
}), (
|
|
638
|
+
}), (a = this.rootElm.querySelector(".vistaview-close-btn")) == null || a.addEventListener("click", () => this.close()), (h = this.rootElm.querySelector(".vistaview-zoom-in-btn")) == null || h.addEventListener("click", () => this.zoomIn()), (l = this.rootElm.querySelector(".vistaview-zoom-out-btn")) == null || l.addEventListener("click", () => this.zoomOut()), (c = this.rootElm.querySelector(".vistaview-prev-btn>button")) == null || c.addEventListener("click", () => this.prev()), (v = this.rootElm.querySelector(".vistaview-next-btn>button")) == null || v.addEventListener("click", () => this.next()), [
|
|
643
639
|
...this.options.controls.topLeft || [],
|
|
644
640
|
...this.options.controls.topRight || [],
|
|
645
641
|
...this.options.controls.topCenter || [],
|
|
@@ -663,16 +659,16 @@ class ot {
|
|
|
663
659
|
), this.options.initialZIndex !== void 0 && this.rootElm.style.setProperty(
|
|
664
660
|
"--vistaview-initial-z-index",
|
|
665
661
|
`${this.options.initialZIndex}`
|
|
666
|
-
), this.setInitialDimPos(), this.setResizeListeners(), this.options.keyboardListeners && this.setKeyboardListeners(), this.elements.length === 1 && ((
|
|
662
|
+
), this.setInitialDimPos(), this.setResizeListeners(), this.options.keyboardListeners && this.setKeyboardListeners(), this.elements.length === 1 && ((m = this.rootElm.querySelector(".vistaview-prev-btn")) == null || m.classList.add("vistaview-ui--none"), (f = this.rootElm.querySelector(".vistaview-next-btn")) == null || f.classList.add("vistaview-ui--none"), (u = this.rootElm.querySelector(".vistaview-index-display")) == null || u.classList.add("vistaview-ui--none")), this.rootElm && this.rootElm.classList.add("vistaview--initialized"), this.loadImages(), this.setCurrentDescription(), this.setIndexDisplay(), this.userInit(this), (p = (y = this.options).onOpen) == null || p.call(y, r), (b = (x = this.options).onImageView) == null || b.call(x, r);
|
|
667
663
|
}
|
|
668
664
|
async close(t = !0) {
|
|
669
|
-
var n, e,
|
|
665
|
+
var n, e, r;
|
|
670
666
|
if (C.somethingOpened !== this) return;
|
|
671
667
|
t && ((n = this.rootElm) == null || n.classList.add("vistaview--closing"), await new Promise((d) => {
|
|
672
|
-
var
|
|
668
|
+
var a;
|
|
673
669
|
let o;
|
|
674
|
-
(
|
|
675
|
-
|
|
670
|
+
(a = this.rootElm) == null || a.addEventListener("transitionend", (h) => {
|
|
671
|
+
h.currentTarget === this.rootElm && (o && clearTimeout(o), o = setTimeout(() => {
|
|
676
672
|
d();
|
|
677
673
|
}, 333));
|
|
678
674
|
});
|
|
@@ -689,7 +685,10 @@ class ot {
|
|
|
689
685
|
isZoomed: this.isZoomed,
|
|
690
686
|
options: this.options
|
|
691
687
|
};
|
|
692
|
-
this.userClose(this), (
|
|
688
|
+
this.userClose(this), (r = (e = this.options).onClose) == null || r.call(e, i), document.body.removeChild(this.rootElm), this.currentIndex._value = null, this.currentIndex._via = { next: !1, prev: !1 }, this.rootElm = null, this.imageContainerElm = null, this.currentImages = null, this.currentItems = null, this.navActive = !0, this.onResizeHandler && (window.removeEventListener("resize", this.onResizeHandler), this.onResizeHandler = null), this.onKeyDown && (window.removeEventListener("keydown", this.onKeyDown), this.onKeyDown = null), (this.onZoomedPointerDown || this.onZoomedPointerMove || this.onZoomedPointerUp) && (this.setZoomed(!1), this.onZoomedPointerDown = null, this.onZoomedPointerMove = null, this.onZoomedPointerUp = null);
|
|
689
|
+
for (const d in this.transitionAbortControllers)
|
|
690
|
+
this.transitionAbortControllers[d].abort();
|
|
691
|
+
this.transitionAbortControllers = {}, C.somethingOpened = null;
|
|
693
692
|
}
|
|
694
693
|
destroy() {
|
|
695
694
|
this.close(!1), this.elements instanceof NodeList && this.elements.forEach((t) => {
|
|
@@ -745,7 +744,7 @@ function lt({ elements: s, ...t }) {
|
|
|
745
744
|
}
|
|
746
745
|
export {
|
|
747
746
|
k as DefaultOptions,
|
|
748
|
-
|
|
747
|
+
S as VistaViewTransitionAbortedError,
|
|
749
748
|
st as defaultClose,
|
|
750
749
|
et as defaultInit,
|
|
751
750
|
it as defaultSetup,
|