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