vistaview 0.7.3 → 0.7.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.
- package/dist/lib/vista-view.d.ts.map +1 -1
- package/dist/vistaview.js +240 -241
- package/dist/vistaview.umd.js +4 -4
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vista-view.d.ts","sourceRoot":"","sources":["../../src/lib/vista-view.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAGV,QAAQ,EAGR,QAAQ,EAIR,gCAAgC,EACjC,MAAM,SAAS,CAAC;AAajB,eAAO,MAAM,gBAAgB,EAAE;IAAE,eAAe,EAAE,SAAS,GAAG,IAAI,CAAA;CAEjE,CAAC;AAEF,qBAAa,SAAS;IACpB,OAAO,EAAE,QAAQ,CAAC;IAClB,QAAQ,EAAE,UAAU,CAAC,WAAW,CAAC,GAAG,QAAQ,EAAE,CAAC;IAC/C,eAAe,EAAE,OAAO,CAAC;IAEzB,OAAO,CAAC,YAAY,CAAc;IAClC,OAAO,CAAC,eAAe,CAAmE;IAE1F,OAAO,CAAC,aAAa,CAAuB;IAC5C,OAAO,CAAC,YAAY,CAAqB;IACzC,OAAO,CAAC,aAAa,CAAuB;IAC5C,OAAO,CAAC,kBAAkB,CAAiC;IAC3D,OAAO,CAAC,QAAQ,CAA8B;IAC9C,OAAO,CAAC,UAAU,CAAkB;IACpC,OAAO,CAAC,gBAAgB,CAMV;IAEd,IAAI,EAAE,WAAW,GAAG,IAAI,CAAQ;IAChC,cAAc,EAAE,WAAW,GAAG,IAAI,CAAQ;IAC1C,EAAE,CAAC,CAAC,SAAS,WAAW,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC,GAAG,IAAI;IAIrD,OAAO,CAAC,eAAe,CAIrB;IAEF,OAAO,CAAC,qBAAqB,CAAwD;IAErF,OAAO,CAAC,eAAe,CAAgC;IAEvD,OAAO,CAAC,QAAQ,CAAkB;gBAEtB,QAAQ,EAAE,UAAU,CAAC,WAAW,CAAC,GAAG,QAAQ,EAAE,EAAE,OAAO,GAAE,QAAa;
|
|
1
|
+
{"version":3,"file":"vista-view.d.ts","sourceRoot":"","sources":["../../src/lib/vista-view.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAGV,QAAQ,EAGR,QAAQ,EAIR,gCAAgC,EACjC,MAAM,SAAS,CAAC;AAajB,eAAO,MAAM,gBAAgB,EAAE;IAAE,eAAe,EAAE,SAAS,GAAG,IAAI,CAAA;CAEjE,CAAC;AAEF,qBAAa,SAAS;IACpB,OAAO,EAAE,QAAQ,CAAC;IAClB,QAAQ,EAAE,UAAU,CAAC,WAAW,CAAC,GAAG,QAAQ,EAAE,CAAC;IAC/C,eAAe,EAAE,OAAO,CAAC;IAEzB,OAAO,CAAC,YAAY,CAAc;IAClC,OAAO,CAAC,eAAe,CAAmE;IAE1F,OAAO,CAAC,aAAa,CAAuB;IAC5C,OAAO,CAAC,YAAY,CAAqB;IACzC,OAAO,CAAC,aAAa,CAAuB;IAC5C,OAAO,CAAC,kBAAkB,CAAiC;IAC3D,OAAO,CAAC,QAAQ,CAA8B;IAC9C,OAAO,CAAC,UAAU,CAAkB;IACpC,OAAO,CAAC,gBAAgB,CAMV;IAEd,IAAI,EAAE,WAAW,GAAG,IAAI,CAAQ;IAChC,cAAc,EAAE,WAAW,GAAG,IAAI,CAAQ;IAC1C,EAAE,CAAC,CAAC,SAAS,WAAW,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC,GAAG,IAAI;IAIrD,OAAO,CAAC,eAAe,CAIrB;IAEF,OAAO,CAAC,qBAAqB,CAAwD;IAErF,OAAO,CAAC,eAAe,CAAgC;IAEvD,OAAO,CAAC,QAAQ,CAAkB;gBAEtB,QAAQ,EAAE,UAAU,CAAC,WAAW,CAAC,GAAG,QAAQ,EAAE,EAAE,OAAO,GAAE,QAAa;IA8DlF,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,kBAAkB,CAAK;IAC/B,OAAO,CAAC,iBAAiB,CAA6B;YACxC,IAAI;IAyIlB,OAAO,CAAC,gBAAgB;IAkDxB,UAAU,EAAE,OAAO,CAAS;IAC5B,OAAO,CAAC,MAAM;IASd,OAAO,CAAC,OAAO;IAUf,OAAO,CAAC,kBAAkB;IAmC1B,OAAO,CAAC,eAAe;IA4CvB,OAAO,CAAC,mBAAmB;IAiE3B,OAAO,CAAC,SAAS,CAuBf;IAEF,OAAO,CAAC,QAAQ,CAYd;IAEF,OAAO,CAAC,eAAe,CAkBrB;IAGF,OAAO,CAAC,gBAAgB,CAAyD;IACjF,uBAAuB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,gCAAgC,KAAK,IAAI,GAAG,IAAI;IAGtF,OAAO,CAAC,0BAA0B;IAIlC,OAAO,CAAC,0BAA0B,CAmEhC;IAGF,IAAI,CAAC,UAAU,GAAE,MAAU,GAAG,IAAI;IA4I5B,KAAK,CAAC,OAAO,GAAE,OAAc,GAAG,OAAO,CAAC,IAAI,CAAC;IA0DnD,IAAI,IAAI,IAAI;IASZ,IAAI,IAAI,IAAI;IASZ,OAAO,IAAI,IAAI;IAcf,eAAe,IAAI,MAAM;IAOzB,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,IAAI,EAAE,OAAO,CAAA;KAAE,GAAG,IAAI;CAoBlE"}
|
package/dist/vistaview.js
CHANGED
|
@@ -1,28 +1,28 @@
|
|
|
1
1
|
var F = Object.defineProperty;
|
|
2
2
|
var R = (s, t, e) => t in s ? F(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
|
|
3
|
-
var
|
|
3
|
+
var h = (s, t, e) => R(s, typeof t != "symbol" ? t + "" : t, e);
|
|
4
4
|
function T(s) {
|
|
5
5
|
return s && !/^0(px|%|r?em|vw|vh|vmin|vmax|cm|mm|in|pt|pc|ex|ch)?$/i.test(s.trim()) && s;
|
|
6
6
|
}
|
|
7
7
|
function A(s) {
|
|
8
|
-
const e = window.getComputedStyle(s).objectFit || "", { width: i, height: n } = s.getBoundingClientRect(),
|
|
8
|
+
const e = window.getComputedStyle(s).objectFit || "", { width: i, height: n } = s.getBoundingClientRect(), r = s.naturalWidth, a = s.naturalHeight;
|
|
9
9
|
if (!e)
|
|
10
10
|
return { width: i, height: n };
|
|
11
|
-
if (!
|
|
11
|
+
if (!r || !a)
|
|
12
12
|
return { width: i, height: n };
|
|
13
|
-
const
|
|
13
|
+
const o = r / a, l = i / n;
|
|
14
14
|
switch (e) {
|
|
15
15
|
case "fill":
|
|
16
16
|
return { width: i, height: n };
|
|
17
17
|
case "none":
|
|
18
|
-
return { width:
|
|
18
|
+
return { width: r, height: a };
|
|
19
19
|
case "contain":
|
|
20
|
-
return
|
|
20
|
+
return o > l ? { width: i, height: i / o } : { width: n * o, height: n };
|
|
21
21
|
case "cover":
|
|
22
|
-
return
|
|
22
|
+
return o < l ? { width: i, height: i / o } : { width: n * o, height: n };
|
|
23
23
|
case "scale-down": {
|
|
24
|
-
const c = { width:
|
|
25
|
-
return
|
|
24
|
+
const c = { width: r, height: a }, d = o > l ? { width: i, height: i / o } : { width: n * o, height: n };
|
|
25
|
+
return d.width <= c.width && d.height <= c.height ? d : c;
|
|
26
26
|
}
|
|
27
27
|
}
|
|
28
28
|
return { width: i, height: n };
|
|
@@ -43,11 +43,11 @@ function D(s) {
|
|
|
43
43
|
};
|
|
44
44
|
}
|
|
45
45
|
function z(s) {
|
|
46
|
-
const t = s.imageElm ? D(s.imageElm) : null, e = s.anchorElm ? D(s.anchorElm) : null, i = T(t == null ? void 0 : t.borderRadius), n = e && T(e == null ? void 0 : e.borderRadius),
|
|
46
|
+
const t = s.imageElm ? D(s.imageElm) : null, e = s.anchorElm ? D(s.anchorElm) : null, i = T(t == null ? void 0 : t.borderRadius), n = e && T(e == null ? void 0 : e.borderRadius), r = (n ? e == null ? void 0 : e.borderRadius : i ? t == null ? void 0 : t.borderRadius : "") || "";
|
|
47
47
|
return {
|
|
48
48
|
fit: (t == null ? void 0 : t.objectFit) || (e == null ? void 0 : e.objectFit) || "",
|
|
49
49
|
pos: (t == null ? void 0 : t.objectPosition) || "",
|
|
50
|
-
br:
|
|
50
|
+
br: r,
|
|
51
51
|
overflow: n ? e.overflow : i ? t.overflow : "",
|
|
52
52
|
nw: (t == null ? void 0 : t.naturalWidth) || 0,
|
|
53
53
|
nh: (t == null ? void 0 : t.naturalHeight) || 0,
|
|
@@ -60,22 +60,22 @@ function z(s) {
|
|
|
60
60
|
function W(s, t, e, i = !1) {
|
|
61
61
|
const {
|
|
62
62
|
fit: n,
|
|
63
|
-
w:
|
|
64
|
-
h:
|
|
63
|
+
w: r,
|
|
64
|
+
h: a,
|
|
65
65
|
// this ones makes things hard. not used.
|
|
66
66
|
// pos,
|
|
67
67
|
// overflow,
|
|
68
|
-
nw:
|
|
69
|
-
nh:
|
|
68
|
+
nw: o,
|
|
69
|
+
nh: l,
|
|
70
70
|
br: c,
|
|
71
|
-
top:
|
|
71
|
+
top: d,
|
|
72
72
|
left: p
|
|
73
|
-
} = z(s), x = Math.min(Math.max(p, -
|
|
74
|
-
|
|
75
|
-
const u = A(s.imageElm), b = Math.min(
|
|
73
|
+
} = z(s), x = Math.min(Math.max(p, -r), window.innerWidth + r) - window.innerWidth / 2 + r / 2, g = Math.min(Math.max(d, -a), window.innerHeight + a) - window.innerHeight / 2 + a / 2, m = e.style;
|
|
74
|
+
m.width = `${r}px`, m.height = `${a}px`, m.objectFit = n, e.width = o, e.height = l, m.setProperty("--vvw-init-radius", `${c}`), m.setProperty("--vvw-pulse-radius", `calc(1.3 * ${c})`), m.setProperty("--vvw-init-x", `${x}px`), m.setProperty("--vvw-init-y", `${g}px`), i && (m.setProperty("--vvw-current-x", `${x}px`), m.setProperty("--vvw-current-y", `${g}px`));
|
|
75
|
+
const u = A(s.imageElm), b = Math.min(r, u.width), f = Math.min(a, u.height), v = t.style;
|
|
76
76
|
v.setProperty("--vvw-init-radius", `${c}`), v.setProperty("--vvw-init-w", `${b}px`), v.setProperty("--vvw-init-h", `${f}px`), i && (v.setProperty("--vvw-current-radius", `${c}`), v.setProperty("--vvw-current-w", `${b}px`), v.setProperty("--vvw-current-h", `${f}px`), t.dataset.vvwWidth = b.toString(), t.dataset.vvwHeight = f.toString());
|
|
77
77
|
}
|
|
78
|
-
function
|
|
78
|
+
function H(s) {
|
|
79
79
|
const t = window.innerWidth, e = window.innerHeight, i = s.naturalWidth, n = s.naturalHeight;
|
|
80
80
|
if (!i || !n)
|
|
81
81
|
throw new Error("Image natural dimensions are zero");
|
|
@@ -84,21 +84,21 @@ function M(s) {
|
|
|
84
84
|
width: i,
|
|
85
85
|
height: n
|
|
86
86
|
};
|
|
87
|
-
const
|
|
88
|
-
let
|
|
89
|
-
return
|
|
90
|
-
width:
|
|
91
|
-
height:
|
|
87
|
+
const r = i / n, a = t / e;
|
|
88
|
+
let o, l;
|
|
89
|
+
return r > a ? (o = t, l = t / r) : (l = e, o = e * r), {
|
|
90
|
+
width: o,
|
|
91
|
+
height: l
|
|
92
92
|
};
|
|
93
93
|
}
|
|
94
|
-
function
|
|
94
|
+
function k(s, t, e) {
|
|
95
95
|
return Math.min(Math.max(s, t), e);
|
|
96
96
|
}
|
|
97
97
|
function L(s, t = 2) {
|
|
98
98
|
const e = Math.pow(10, t);
|
|
99
99
|
return Math.round(s * e) / e;
|
|
100
100
|
}
|
|
101
|
-
const
|
|
101
|
+
const q = '<svg viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>', O = '<svg viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>', Z = '<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>', X = '<svg viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>', Y = '<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>';
|
|
102
102
|
let $ = null;
|
|
103
103
|
function B() {
|
|
104
104
|
return $ || (window.trustedTypes || (window.trustedTypes = {
|
|
@@ -125,9 +125,9 @@ function j() {
|
|
|
125
125
|
name: "download",
|
|
126
126
|
icon: Y,
|
|
127
127
|
onClick: async (s) => {
|
|
128
|
-
var
|
|
128
|
+
var r;
|
|
129
129
|
const t = await fetch(s.src), e = await t.blob(), i = t.url, n = document.createElement("a");
|
|
130
|
-
n.href = URL.createObjectURL(e), n.download = ((
|
|
130
|
+
n.href = URL.createObjectURL(e), n.download = ((r = i.split("/").pop()) == null ? void 0 : r.split("?")[0].split("#")[0]) || "download", document.body.appendChild(n), n.click(), document.body.removeChild(n);
|
|
131
131
|
}
|
|
132
132
|
};
|
|
133
133
|
}
|
|
@@ -137,9 +137,9 @@ function V(s) {
|
|
|
137
137
|
case "zoomIn":
|
|
138
138
|
return `<button aria-label="Zoom In" class="vvw-zoom-in vvw-ui">${Z}</button>`;
|
|
139
139
|
case "zoomOut":
|
|
140
|
-
return `<button aria-label="Zoom Out" disabled class="vvw-zoom-out vvw-ui">${
|
|
140
|
+
return `<button aria-label="Zoom Out" disabled class="vvw-zoom-out vvw-ui">${N}</button>`;
|
|
141
141
|
case "close":
|
|
142
|
-
return `<button aria-label="Close" class="vvw-close vvw-ui">${
|
|
142
|
+
return `<button aria-label="Close" class="vvw-close vvw-ui">${X}</button>`;
|
|
143
143
|
case "indexDisplay":
|
|
144
144
|
return '<div class="vvw-index vvw-ui" aria-hidden="true"></div>';
|
|
145
145
|
case "description":
|
|
@@ -160,7 +160,7 @@ function U(s, t) {
|
|
|
160
160
|
const i = e.querySelector("img.vvw-img-lo"), n = e.querySelector("img.vvw-img-hi");
|
|
161
161
|
return W(s, n, i, t === 0), e;
|
|
162
162
|
}
|
|
163
|
-
function
|
|
163
|
+
function _({
|
|
164
164
|
controls: s
|
|
165
165
|
}) {
|
|
166
166
|
const t = (i) => i ? i.map(V).join("") : "";
|
|
@@ -171,13 +171,13 @@ function K({
|
|
|
171
171
|
<div class="vvw-image-container"></div>
|
|
172
172
|
<div class="vvw-top-bar"><div>${t(s == null ? void 0 : s.topLeft)}</div><div>${t(s == null ? void 0 : s.topCenter)}</div><div>${t(s == null ? void 0 : s.topRight)}</div></div>
|
|
173
173
|
<div class="vvw-bottom-bar"><div>${t(s == null ? void 0 : s.bottomLeft)}</div><div>${t(s == null ? void 0 : s.bottomCenter)}</div><div>${t(s == null ? void 0 : s.bottomRight)}</div></div>
|
|
174
|
-
<div class="vvw-prev vvw-ui"><button aria-label="Previous">${
|
|
174
|
+
<div class="vvw-prev vvw-ui"><button aria-label="Previous">${q}</button></div>
|
|
175
175
|
<div class="vvw-next vvw-ui"><button aria-label="Next">${O}</button></div>
|
|
176
176
|
</div>
|
|
177
177
|
</div>`
|
|
178
178
|
);
|
|
179
179
|
}
|
|
180
|
-
const
|
|
180
|
+
const M = {
|
|
181
181
|
// debug, don't remove
|
|
182
182
|
// animationDurationBase: 1000,
|
|
183
183
|
animationDurationBase: 333,
|
|
@@ -192,7 +192,7 @@ const H = {
|
|
|
192
192
|
bottomLeft: ["description"]
|
|
193
193
|
}
|
|
194
194
|
};
|
|
195
|
-
function
|
|
195
|
+
function K(s) {
|
|
196
196
|
}
|
|
197
197
|
function G(s) {
|
|
198
198
|
const t = s.options.preloads;
|
|
@@ -201,34 +201,34 @@ function G(s) {
|
|
|
201
201
|
function J(s) {
|
|
202
202
|
let t = { x: 0, y: 0 }, e = { x: 0, y: 0 }, i = null;
|
|
203
203
|
s.registerPointerListener((n) => {
|
|
204
|
-
var
|
|
204
|
+
var r;
|
|
205
205
|
if (!n.hasInternalExecution && !(n.pointers.length > 1)) {
|
|
206
|
-
if (n.event === "down" && (t = { x: n.pointer.x, y: n.pointer.y }, e = { x: n.pointer.x, y: n.pointer.y }, (
|
|
206
|
+
if (n.event === "down" && (t = { x: n.pointer.x, y: n.pointer.y }, e = { x: n.pointer.x, y: n.pointer.y }, (r = n.abortController) == null || r.abort()), n.event === "move") {
|
|
207
207
|
e = { x: n.pointer.x, y: n.pointer.y };
|
|
208
|
-
const
|
|
209
|
-
if (!i && Math.abs(
|
|
210
|
-
const
|
|
211
|
-
s.imageContainer.style.transition = "none", s.imageContainer.style.transform = `translateY(${
|
|
212
|
-
} else if (!i && Math.abs(
|
|
213
|
-
const
|
|
214
|
-
s.imageContainer.style.transition = "none", s.imageContainer.style.transform = `translateX(${
|
|
208
|
+
const a = e.x - t.x, o = e.y - t.y;
|
|
209
|
+
if (!i && Math.abs(o) > Math.abs(a) || i === "y") {
|
|
210
|
+
const l = o / window.innerHeight * 100;
|
|
211
|
+
s.imageContainer.style.transition = "none", s.imageContainer.style.transform = `translateY(${l}vh)`, i = "y";
|
|
212
|
+
} else if (!i && Math.abs(a) > Math.abs(o) || i === "x") {
|
|
213
|
+
const l = a / window.innerWidth * 100;
|
|
214
|
+
s.imageContainer.style.transition = "none", s.imageContainer.style.transform = `translateX(${l}vw)`, i = "x";
|
|
215
215
|
}
|
|
216
216
|
}
|
|
217
217
|
if (n.event === "up" || n.event === "cancel") {
|
|
218
|
-
let
|
|
219
|
-
var
|
|
220
|
-
(
|
|
221
|
-
var
|
|
222
|
-
(
|
|
223
|
-
}), s.imageContainer.style.transition = "transform 222ms ease", s.imageContainer.style.transform =
|
|
218
|
+
let a = function(o) {
|
|
219
|
+
var l;
|
|
220
|
+
(l = s.imageContainer) == null || l.addEventListener("transitionend", function c() {
|
|
221
|
+
var d;
|
|
222
|
+
(d = s.imageContainer) == null || d.removeEventListener("transitionend", c), s.imageContainer.style.transition = "", s.imageContainer.style.transform = "";
|
|
223
|
+
}), s.imageContainer.style.transition = "transform 222ms ease", s.imageContainer.style.transform = o;
|
|
224
224
|
};
|
|
225
225
|
if (i === "y") {
|
|
226
|
-
const
|
|
227
|
-
Math.abs(
|
|
226
|
+
const o = e.y - t.y;
|
|
227
|
+
Math.abs(o) > 144 ? (s.imageContainer.style.transition = "transform 222ms ease", s.imageContainer.style.transform = "translateY(0vh)", s.close()) : a("translateY(0vh)");
|
|
228
228
|
}
|
|
229
229
|
if (i === "x") {
|
|
230
|
-
const
|
|
231
|
-
s.imageContainer.style.transition = "",
|
|
230
|
+
const o = e.x - t.x, l = n.pointer.movementX, c = 1;
|
|
231
|
+
s.imageContainer.style.transition = "", o > 0 && Math.abs(l) > c ? s.prev() : o < 0 && Math.abs(l) > c ? s.next() : a("translateX(0vw)");
|
|
232
232
|
}
|
|
233
233
|
i = null, t = { x: 0, y: 0 }, e = { x: 0, y: 0 };
|
|
234
234
|
}
|
|
@@ -241,45 +241,45 @@ function tt({
|
|
|
241
241
|
vistaView: { isReducedMotion: s },
|
|
242
242
|
htmlElements: { to: t },
|
|
243
243
|
index: { from: e, to: i },
|
|
244
|
-
vistaView: { elements: n, imageContainer:
|
|
245
|
-
},
|
|
246
|
-
if (!(!t ||
|
|
244
|
+
vistaView: { elements: n, imageContainer: r, options: a }
|
|
245
|
+
}, o) {
|
|
246
|
+
if (!(!t || o.aborted || s || !(Math.abs(i - e) === 1 || e === 0 && i === n.length - 1 || e === n.length - 1 && i === 0)))
|
|
247
247
|
return {
|
|
248
248
|
cleanup: () => {
|
|
249
|
-
|
|
249
|
+
r.style.transition = "", r.style.transform = "";
|
|
250
250
|
},
|
|
251
251
|
transitionEnded: new Promise((c) => {
|
|
252
|
-
|
|
252
|
+
r.addEventListener(
|
|
253
253
|
"transitionend",
|
|
254
254
|
() => {
|
|
255
255
|
c();
|
|
256
256
|
},
|
|
257
257
|
{ once: !0 }
|
|
258
|
-
),
|
|
258
|
+
), r.addEventListener(
|
|
259
259
|
"transitioncancel",
|
|
260
260
|
() => {
|
|
261
|
-
|
|
261
|
+
o.aborted && c();
|
|
262
262
|
},
|
|
263
263
|
{ once: !0 }
|
|
264
264
|
);
|
|
265
|
-
const
|
|
266
|
-
|
|
265
|
+
const d = Math.round(a.animationDurationBase * 100) / 100, p = i === e + 1 || e === n.length - 1 && i === 0 ? "translateX(-100vw)" : "translateX(100vw)";
|
|
266
|
+
r.style.transition = `transform ${d}ms ease`, r.style.transform = p;
|
|
267
267
|
})
|
|
268
268
|
};
|
|
269
269
|
}
|
|
270
270
|
class et {
|
|
271
271
|
constructor({ elm: t, listeners: e }) {
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
272
|
+
h(this, "pointers", []);
|
|
273
|
+
h(this, "elm");
|
|
274
|
+
h(this, "listeners", []);
|
|
275
|
+
h(this, "lastPointerDownId", null);
|
|
276
|
+
h(this, "removeLastPointer", () => {
|
|
277
277
|
if (this.pointers.length && this.lastPointerDownId !== null) {
|
|
278
278
|
const t = this.pointers.findIndex((e) => e.id === this.lastPointerDownId);
|
|
279
279
|
t !== -1 && this.pointers.splice(t, 1);
|
|
280
280
|
}
|
|
281
281
|
});
|
|
282
|
-
|
|
282
|
+
h(this, "onPointerDown", (t) => {
|
|
283
283
|
if (!this.listeners.length || t.button !== 0) return;
|
|
284
284
|
t.preventDefault(), this.lastPointerDownId = t.pointerId, window.addEventListener("contextmenu", this.removeLastPointer, { once: !0 }), window.addEventListener("auxclick", this.removeLastPointer, { once: !0 });
|
|
285
285
|
let e = {
|
|
@@ -298,7 +298,7 @@ class et {
|
|
|
298
298
|
})
|
|
299
299
|
);
|
|
300
300
|
});
|
|
301
|
-
|
|
301
|
+
h(this, "onPointerMove", (t) => {
|
|
302
302
|
if (!this.listeners.length) return;
|
|
303
303
|
t.preventDefault();
|
|
304
304
|
const e = this.pointers.find((i) => i.id === t.pointerId);
|
|
@@ -311,17 +311,17 @@ class et {
|
|
|
311
311
|
})
|
|
312
312
|
));
|
|
313
313
|
});
|
|
314
|
-
|
|
314
|
+
h(this, "onPointerUp", (t) => {
|
|
315
315
|
if (!this.listeners.length || t.button !== 0 || (window.removeEventListener("contextmenu", this.removeLastPointer), window.removeEventListener("auxclick", this.removeLastPointer), t.target instanceof Node && !this.elm.contains(t.target) && t.target !== document.querySelector("html") && t.target !== document))
|
|
316
316
|
return;
|
|
317
317
|
t.preventDefault();
|
|
318
|
-
const e = this.pointers.findIndex((
|
|
318
|
+
const e = this.pointers.findIndex((r) => r.id === t.pointerId);
|
|
319
319
|
if (e === -1) return;
|
|
320
320
|
const i = this.pointers[e];
|
|
321
321
|
i.x = t.clientX, i.y = t.clientY;
|
|
322
322
|
const n = this.pointers.length;
|
|
323
323
|
this.pointers.splice(e, 1), this.listeners.forEach(
|
|
324
|
-
(
|
|
324
|
+
(r) => r({
|
|
325
325
|
event: "up",
|
|
326
326
|
pointer: i,
|
|
327
327
|
pointers: this.pointers,
|
|
@@ -329,17 +329,17 @@ class et {
|
|
|
329
329
|
})
|
|
330
330
|
);
|
|
331
331
|
});
|
|
332
|
-
|
|
332
|
+
h(this, "onPointerCancel", (t) => {
|
|
333
333
|
if (!this.listeners.length || t.target instanceof Node && !this.elm.contains(t.target) && t.target !== document.querySelector("html") && t.target !== document)
|
|
334
334
|
return;
|
|
335
335
|
t.preventDefault();
|
|
336
|
-
const e = this.pointers.findIndex((
|
|
336
|
+
const e = this.pointers.findIndex((r) => r.id === t.pointerId);
|
|
337
337
|
if (e === -1) return;
|
|
338
338
|
const i = this.pointers[e];
|
|
339
339
|
i.x = t.clientX, i.y = t.clientY;
|
|
340
340
|
const n = this.pointers.length;
|
|
341
341
|
this.pointers.splice(e, 1), this.listeners.forEach(
|
|
342
|
-
(
|
|
342
|
+
(r) => r({
|
|
343
343
|
event: "cancel",
|
|
344
344
|
pointer: i,
|
|
345
345
|
pointers: this.pointers,
|
|
@@ -379,18 +379,18 @@ class et {
|
|
|
379
379
|
}
|
|
380
380
|
class it {
|
|
381
381
|
constructor(t, e) {
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
382
|
+
h(this, "maxZoomLevel");
|
|
383
|
+
h(this, "image", null);
|
|
384
|
+
h(this, "rect", null);
|
|
385
|
+
h(this, "initialCenter", { x: 0, y: 0 });
|
|
386
|
+
h(this, "maxDimension", { width: 0 });
|
|
387
|
+
h(this, "minDimension", { initialWidth: 0, initialHeight: 0, minWidth: 0, closingWidth: 0 });
|
|
388
|
+
h(this, "accumulatedTranslate", { x: 0, y: 0 });
|
|
389
389
|
// state
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
390
|
+
h(this, "scale", 1);
|
|
391
|
+
h(this, "translate", { x: 0, y: 0 });
|
|
392
|
+
h(this, "onScale", null);
|
|
393
|
+
h(this, "animationTimestamp", 0);
|
|
394
394
|
this.maxZoomLevel = t, this.onScale = e;
|
|
395
395
|
}
|
|
396
396
|
clean() {
|
|
@@ -425,7 +425,7 @@ class it {
|
|
|
425
425
|
if (!this.image) return;
|
|
426
426
|
this.rect || (this.rect = this.image.getBoundingClientRect()), e || (e = this.initialCenter);
|
|
427
427
|
const i = this.snapToTargetIfClose(
|
|
428
|
-
|
|
428
|
+
k(this.rect.width * t, this.minDimension.minWidth, this.maxDimension.width),
|
|
429
429
|
this.minDimension.initialWidth
|
|
430
430
|
);
|
|
431
431
|
this.onScale && this.onScale({
|
|
@@ -433,19 +433,19 @@ class it {
|
|
|
433
433
|
isMax: i >= this.maxDimension.width,
|
|
434
434
|
isMin: i <= this.minDimension.initialWidth
|
|
435
435
|
}), this.scale = L(i / this.rect.width);
|
|
436
|
-
const n = this.rect.left + this.rect.width / 2,
|
|
437
|
-
this.translate.x = L(
|
|
436
|
+
const n = this.rect.left + this.rect.width / 2, r = this.rect.top + this.rect.height / 2, a = this.initialCenter.x - n, o = this.initialCenter.y - r, l = a * (1 - this.scale), c = o * (1 - this.scale), d = e.x - this.initialCenter.x, p = e.y - this.initialCenter.y;
|
|
437
|
+
this.translate.x = L(l + d), this.translate.y = L(c + p), this.image.style.transform = `translate3d(${this.translate.x}px, ${this.translate.y}px, 0px) scale(${this.scale})`, i <= this.minDimension.closingWidth ? this.image.style.opacity = "0.5" : this.image.style.opacity = "";
|
|
438
438
|
}
|
|
439
439
|
moveAndNormalize(t) {
|
|
440
440
|
let e = 0, i = !1;
|
|
441
|
-
const n = ({ x:
|
|
441
|
+
const n = ({ x: r, y: a }) => {
|
|
442
442
|
if (i)
|
|
443
443
|
return;
|
|
444
|
-
if (Math.abs(
|
|
444
|
+
if (Math.abs(r) < 1e-3 && Math.abs(a) < 1e-3)
|
|
445
445
|
return this.normalize();
|
|
446
|
-
|
|
447
|
-
const
|
|
448
|
-
this.translate.x = L(this.translate.x +
|
|
446
|
+
r *= 0.9, a *= 0.9;
|
|
447
|
+
const o = this.image.getBoundingClientRect();
|
|
448
|
+
this.translate.x = L(this.translate.x + r), this.translate.y = L(this.translate.y + a), o.right < window.innerWidth / 2 && (this.translate.x += (window.innerWidth / 2 - o.right) * 0.1, r *= 0.7), o.left > window.innerWidth / 2 && (this.translate.x -= (o.left - window.innerWidth / 2) * 0.1, r *= 0.7), o.bottom < window.innerHeight / 2 && (this.translate.y += (window.innerHeight / 2 - o.bottom) * 0.1, a *= 0.7), o.top > window.innerHeight / 2 && (this.translate.y -= (o.top - window.innerHeight / 2) * 0.1, a *= 0.7), this.image.style.transform = `translate3d(${this.translate.x}px, ${this.translate.y}px, 0px) scale(${this.scale})`, e = requestAnimationFrame(() => n({ x: r, y: a }));
|
|
449
449
|
};
|
|
450
450
|
return n({
|
|
451
451
|
x: t.movementX,
|
|
@@ -468,31 +468,31 @@ class it {
|
|
|
468
468
|
}
|
|
469
469
|
normalize(t = !0) {
|
|
470
470
|
if (!this.image || !this.rect) return;
|
|
471
|
-
const e = this.rect.width * this.scale, i = e <= this.minDimension.closingWidth, n = i ? e : this.snapToTargetIfClose(this.rect.width * this.scale, this.minDimension.initialWidth),
|
|
472
|
-
if (this.image.style.width = `${n}px`, this.image.style.height = `${
|
|
471
|
+
const e = this.rect.width * this.scale, i = e <= this.minDimension.closingWidth, n = i ? e : this.snapToTargetIfClose(this.rect.width * this.scale, this.minDimension.initialWidth), r = i ? this.rect.height * this.scale : this.snapToTargetIfClose(this.rect.height * this.scale, this.minDimension.initialHeight);
|
|
472
|
+
if (this.image.style.width = `${n}px`, this.image.style.height = `${r}px`, this.scale = 1, this.image.style.opacity = "", this.accumulatedTranslate.x += this.translate.x, this.accumulatedTranslate.y += this.translate.y, this.image.style.left = `calc(50% + ${this.accumulatedTranslate.x}px)`, this.image.style.top = `calc(50% + ${this.accumulatedTranslate.y}px)`, this.translate = { x: 0, y: 0 }, this.image.style.transform = "", this.rect = this.image.getBoundingClientRect(), i)
|
|
473
473
|
return !0;
|
|
474
474
|
if (n < this.minDimension.initialWidth)
|
|
475
475
|
this.accumulatedTranslate.x = 0, this.accumulatedTranslate.y = 0, requestAnimationFrame(() => {
|
|
476
|
-
const
|
|
477
|
-
|
|
476
|
+
const a = this.image;
|
|
477
|
+
a && (a.addEventListener(
|
|
478
478
|
"transitionend",
|
|
479
479
|
() => {
|
|
480
|
-
|
|
480
|
+
a && (this.clean(), this.rect = null);
|
|
481
481
|
},
|
|
482
482
|
{ once: !0 }
|
|
483
|
-
),
|
|
483
|
+
), a.style.transition = "all 222ms ease", a.style.width = `${this.minDimension.initialWidth}px`, a.style.height = `${this.minDimension.initialHeight}px`, a.style.left = "50%", a.style.top = "50%");
|
|
484
484
|
});
|
|
485
485
|
else if (t) {
|
|
486
|
-
let
|
|
487
|
-
if (this.rect.right < window.innerWidth / 2 && (
|
|
488
|
-
const
|
|
489
|
-
|
|
486
|
+
let a = !1;
|
|
487
|
+
if (this.rect.right < window.innerWidth / 2 && (a = !0, this.accumulatedTranslate.x += window.innerWidth / 2 - this.rect.right), this.rect.left > window.innerWidth / 2 && (a = !0, this.accumulatedTranslate.x -= this.rect.left - window.innerWidth / 2), this.rect.bottom < window.innerHeight / 2 && (a = !0, this.accumulatedTranslate.y += window.innerHeight / 2 - this.rect.bottom), this.rect.top > window.innerHeight / 2 && (a = !0, this.accumulatedTranslate.y -= this.rect.top - window.innerHeight / 2), a) {
|
|
488
|
+
const o = this.image;
|
|
489
|
+
o.addEventListener(
|
|
490
490
|
"transitionend",
|
|
491
491
|
() => {
|
|
492
|
-
|
|
492
|
+
o && (o.style.transition = "", this.rect = null);
|
|
493
493
|
},
|
|
494
494
|
{ once: !0 }
|
|
495
|
-
),
|
|
495
|
+
), o.style.transition = "all 222ms ease", o.style.left = `calc(50% + ${this.accumulatedTranslate.x}px)`, o.style.top = `calc(50% + ${this.accumulatedTranslate.y}px)`;
|
|
496
496
|
} else
|
|
497
497
|
this.rect = null;
|
|
498
498
|
}
|
|
@@ -500,18 +500,18 @@ class it {
|
|
|
500
500
|
}
|
|
501
501
|
class nt {
|
|
502
502
|
constructor() {
|
|
503
|
-
|
|
503
|
+
h(this, "fiolast", {});
|
|
504
504
|
}
|
|
505
505
|
// first in out
|
|
506
506
|
fio(t, e, i = 50) {
|
|
507
|
-
const
|
|
507
|
+
const r = Date.now() - (this.fiolast[e] ?? 0), a = () => {
|
|
508
508
|
this.fiolast[e] = Date.now(), t();
|
|
509
509
|
};
|
|
510
510
|
if (!this.fiolast[e]) {
|
|
511
|
-
|
|
511
|
+
a();
|
|
512
512
|
return;
|
|
513
513
|
}
|
|
514
|
-
|
|
514
|
+
r >= i && a();
|
|
515
515
|
}
|
|
516
516
|
}
|
|
517
517
|
const C = {
|
|
@@ -519,34 +519,34 @@ const C = {
|
|
|
519
519
|
};
|
|
520
520
|
class st {
|
|
521
521
|
constructor(t, e = {}) {
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
522
|
+
h(this, "options");
|
|
523
|
+
h(this, "elements");
|
|
524
|
+
h(this, "isReducedMotion");
|
|
525
|
+
h(this, "currentIndex", -1);
|
|
526
|
+
h(this, "currentChildren", null);
|
|
527
|
+
h(this, "setupFunction", K);
|
|
528
|
+
h(this, "initFunction", G);
|
|
529
|
+
h(this, "closeFunction", Q);
|
|
530
|
+
h(this, "transitionFunction", tt);
|
|
531
|
+
h(this, "pointers", null);
|
|
532
|
+
h(this, "imageState");
|
|
533
|
+
h(this, "imageTransitions", /* @__PURE__ */ new Map());
|
|
534
|
+
h(this, "root", null);
|
|
535
|
+
h(this, "imageContainer", null);
|
|
536
|
+
h(this, "onClickElements", (t) => {
|
|
537
537
|
t.preventDefault();
|
|
538
538
|
const e = t.currentTarget;
|
|
539
539
|
e.dataset.vistaIdx && this.open(parseInt(e.dataset.vistaIdx));
|
|
540
540
|
});
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
541
|
+
h(this, "defaultOnClickHandler", (t) => t.preventDefault());
|
|
542
|
+
h(this, "abortController", null);
|
|
543
|
+
h(this, "throttle", new nt());
|
|
544
|
+
h(this, "lastSwapTime", 0);
|
|
545
|
+
h(this, "isRapidSwap", !1);
|
|
546
|
+
h(this, "isRapidSwapRelease", 0);
|
|
547
|
+
h(this, "transitionCleanup", null);
|
|
548
|
+
h(this, "isZoomedIn", !1);
|
|
549
|
+
h(this, "onKeyDown", (t) => {
|
|
550
550
|
switch (t.key) {
|
|
551
551
|
case "ArrowLeft":
|
|
552
552
|
t.preventDefault(), this.prev();
|
|
@@ -565,7 +565,7 @@ class st {
|
|
|
565
565
|
break;
|
|
566
566
|
}
|
|
567
567
|
});
|
|
568
|
-
|
|
568
|
+
h(this, "onScroll", (t) => {
|
|
569
569
|
t.preventDefault();
|
|
570
570
|
const e = t.deltaY;
|
|
571
571
|
this.imageState.setInitialCenter({
|
|
@@ -573,71 +573,70 @@ class st {
|
|
|
573
573
|
y: t.clientY
|
|
574
574
|
}), e < 0 ? this.zoomIn() : e > 0 && this.zoomOut();
|
|
575
575
|
});
|
|
576
|
-
|
|
576
|
+
h(this, "onResizeHandler", () => {
|
|
577
577
|
this.currentChildren.htmls.forEach((t, e) => {
|
|
578
|
-
const i = this.currentChildren.images[e], n = t.querySelector("img.vvw-img-hi"),
|
|
579
|
-
if (W(i, n,
|
|
580
|
-
const { width:
|
|
581
|
-
n.style.setProperty("--vvw-current-w", `${
|
|
578
|
+
const i = this.currentChildren.images[e], n = t.querySelector("img.vvw-img-hi"), r = t.querySelector("img.vvw-img-lo");
|
|
579
|
+
if (W(i, n, r, !1), n.classList.contains("vvw--loaded")) {
|
|
580
|
+
const { width: a, height: o } = H(n);
|
|
581
|
+
n.style.setProperty("--vvw-current-w", `${a}px`), n.style.setProperty("--vvw-current-h", `${o}px`), n.dataset.vvwWidth = a.toString(), n.dataset.vvwHeight = o.toString();
|
|
582
582
|
}
|
|
583
583
|
});
|
|
584
584
|
});
|
|
585
585
|
/// POINTERS
|
|
586
|
-
|
|
587
|
-
|
|
586
|
+
h(this, "pointerListeners", []);
|
|
587
|
+
h(this, "getInternalPointerListener", () => {
|
|
588
588
|
const t = this.imageState;
|
|
589
|
-
let e = 0, i = !1, n =
|
|
589
|
+
let e = 0, i = !1, n = 0;
|
|
590
|
+
const r = 33;
|
|
591
|
+
let a = () => {
|
|
590
592
|
};
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
593
|
+
function o() {
|
|
594
|
+
return i || performance.now() - n < r;
|
|
595
|
+
}
|
|
596
|
+
return (l) => {
|
|
597
|
+
if (l.event === "down") {
|
|
598
|
+
if (a(), this.isZoomedIn && l.pointers.length === 1 && !o()) {
|
|
599
|
+
const c = this.pointers.getCentroid();
|
|
600
|
+
t.setInitialCenter(c);
|
|
596
601
|
}
|
|
597
|
-
if (
|
|
602
|
+
if (l.pointers.length >= 2) {
|
|
598
603
|
i = !0;
|
|
599
|
-
const
|
|
600
|
-
e = this.pointers.getPointerDistance(
|
|
604
|
+
const c = this.pointers.getCentroid();
|
|
605
|
+
e = this.pointers.getPointerDistance(l.pointers[0], l.pointers[1]), t.setInitialCenter(c);
|
|
601
606
|
}
|
|
602
|
-
} else if (
|
|
603
|
-
if (this.isZoomedIn &&
|
|
604
|
-
const
|
|
605
|
-
t.move(
|
|
607
|
+
} else if (l.event === "move") {
|
|
608
|
+
if (this.isZoomedIn && l.pointers.length === 1 && l.lastPointerLen === 0 && !o()) {
|
|
609
|
+
const c = this.pointers.getCentroid();
|
|
610
|
+
t.move(c);
|
|
606
611
|
}
|
|
607
|
-
if (
|
|
608
|
-
const
|
|
609
|
-
t.scaleMove(
|
|
612
|
+
if (l.pointers.length >= 2 && i) {
|
|
613
|
+
const c = this.pointers.getCentroid(), d = this.pointers.getPointerDistance(l.pointers[0], l.pointers[1]);
|
|
614
|
+
t.scaleMove(d / e, c);
|
|
610
615
|
}
|
|
611
|
-
} else (
|
|
616
|
+
} else (l.event === "up" || l.event === "cancel") && (i || this.isZoomedIn) && (i ? (n = performance.now(), i = !1, t.normalize() && requestAnimationFrame(() => {
|
|
612
617
|
this.close();
|
|
613
|
-
})) : this.isZoomedIn &&
|
|
618
|
+
})) : this.isZoomedIn && l.pointers.length === 0 && !o() && (a = t.moveAndNormalize(l.pointer)));
|
|
614
619
|
this.pointerListeners.forEach(
|
|
615
|
-
(
|
|
616
|
-
...
|
|
617
|
-
hasInternalExecution: this.isZoomedIn ||
|
|
620
|
+
(c) => c({
|
|
621
|
+
...l,
|
|
622
|
+
hasInternalExecution: this.isZoomedIn || o(),
|
|
618
623
|
abortController: this.abortController
|
|
619
624
|
})
|
|
620
625
|
);
|
|
621
626
|
};
|
|
622
627
|
});
|
|
623
628
|
this.elements = t, this.options = {
|
|
624
|
-
...
|
|
629
|
+
...M,
|
|
625
630
|
...e,
|
|
626
631
|
controls: {
|
|
627
|
-
...
|
|
632
|
+
...M.controls,
|
|
628
633
|
...e.controls
|
|
629
634
|
}
|
|
630
635
|
}, this.imageState = new it(
|
|
631
636
|
this.options.maxZoomLevel,
|
|
632
637
|
(i) => {
|
|
633
|
-
var n,
|
|
634
|
-
i.isMin ? (this.isZoomedIn = !1, (n = this.qs(".vvw-zoom-out")) == null || n.setAttribute("disabled", "true"), (
|
|
635
|
-
"pointer-events",
|
|
636
|
-
"none"
|
|
637
|
-
)) : (this.isZoomedIn = !0, (r = this.qs(".vvw-zoom-out")) == null || r.removeAttribute("disabled"), (a = this.qs('.vvw-item[data-vvw-idx="' + this.currentIndex + '"]')) == null || a.style.setProperty(
|
|
638
|
-
"pointer-events",
|
|
639
|
-
"auto"
|
|
640
|
-
)), i.isMax ? (h = this.qs(".vvw-zoom-in")) == null || h.setAttribute("disabled", "true") : (c = this.qs(".vvw-zoom-in")) == null || c.removeAttribute("disabled");
|
|
638
|
+
var n, r, a, o;
|
|
639
|
+
i.isMin ? (this.isZoomedIn = !1, (n = this.qs(".vvw-zoom-out")) == null || n.setAttribute("disabled", "true")) : (this.isZoomedIn = !0, (r = this.qs(".vvw-zoom-out")) == null || r.removeAttribute("disabled")), i.isMax ? (a = this.qs(".vvw-zoom-in")) == null || a.setAttribute("disabled", "true") : (o = this.qs(".vvw-zoom-in")) == null || o.removeAttribute("disabled");
|
|
641
640
|
}
|
|
642
641
|
), this.options.setupFunction && (this.setupFunction = this.options.setupFunction), this.options.closeFunction && (this.closeFunction = this.options.closeFunction), this.options.initFunction && (this.initFunction = this.options.initFunction), this.options.transitionFunction && (this.transitionFunction = this.options.transitionFunction), this.isReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches, this.elements instanceof NodeList && this.elements.forEach((i, n) => {
|
|
643
642
|
i.dataset.vistaIdx = n.toString(), i.addEventListener("click", this.defaultOnClickHandler), i.addEventListener("pointerup", this.onClickElements);
|
|
@@ -647,33 +646,33 @@ class st {
|
|
|
647
646
|
return this.root ? this.root.querySelector(t) : null;
|
|
648
647
|
}
|
|
649
648
|
async swap(t, e) {
|
|
650
|
-
const i = this.options.preloads || 0, n = this.currentIndex, { htmls:
|
|
651
|
-
htmlElements: { from:
|
|
652
|
-
images: { from:
|
|
649
|
+
const i = this.options.preloads || 0, n = this.currentIndex, { htmls: r, images: a } = this.getChildElements(i, n), o = this.imageContainer, l = this.currentChildren, c = {
|
|
650
|
+
htmlElements: { from: l.htmls, to: r },
|
|
651
|
+
images: { from: l.images, to: a },
|
|
653
652
|
index: { from: t, to: this.currentIndex },
|
|
654
653
|
via: e || { next: !1, prev: !1 },
|
|
655
654
|
vistaView: this
|
|
656
655
|
};
|
|
657
|
-
this.setupFunction(c), this.currentChildren = { htmls:
|
|
658
|
-
const
|
|
659
|
-
if (this.isRapidSwap = x,
|
|
660
|
-
this.imageState.reset(),
|
|
661
|
-
|
|
656
|
+
this.setupFunction(c), this.currentChildren = { htmls: r, images: a }, this.displayActiveIndex();
|
|
657
|
+
const d = this.abortController.signal, x = performance.now() - this.lastSwapTime < this.options.rapidLimit;
|
|
658
|
+
if (this.isRapidSwap = x, o.querySelectorAll(".vvw-item img.vvw-img-hi").forEach((y) => y.classList.add("vvw--load-cancelled")), x) {
|
|
659
|
+
this.imageState.reset(), o.innerHTML = "", this.transitionCleanup && this.transitionCleanup(), r.forEach((y) => {
|
|
660
|
+
o.appendChild(y);
|
|
662
661
|
}), this.lastSwapTime = performance.now(), this.waitForImagesToLoad(), this.options.onImageView && this.options.onImageView(c), this.isRapidSwapRelease && clearTimeout(this.isRapidSwapRelease), this.isRapidSwapRelease = setTimeout(() => {
|
|
663
662
|
this.isRapidSwap = !1;
|
|
664
663
|
}, 333);
|
|
665
664
|
return;
|
|
666
665
|
}
|
|
667
|
-
const g = this.transitionFunction(c,
|
|
666
|
+
const g = this.transitionFunction(c, d);
|
|
668
667
|
g && (this.transitionCleanup = g.cleanup, await g.transitionEnded), this.lastSwapTime = performance.now();
|
|
669
|
-
const
|
|
670
|
-
`.vvw-item[data-vvw-idx="${
|
|
668
|
+
const m = r[Math.floor(r.length / 2)].dataset.vvwIdx, u = o.querySelector(
|
|
669
|
+
`.vvw-item[data-vvw-idx="${m}"] img.vvw-img-hi`
|
|
671
670
|
), b = this.imageTransitions.get(u);
|
|
672
671
|
this.imageTransitions.delete(u);
|
|
673
672
|
const f = u.getAttribute("style") || "", v = u.classList.contains("vvw--loaded"), E = u.classList.contains("vvw--ready"), I = u.width, S = u.height;
|
|
674
|
-
this.imageState.reset(),
|
|
673
|
+
this.imageState.reset(), o.innerHTML = "", this.transitionCleanup && this.transitionCleanup(), r.forEach((y) => {
|
|
675
674
|
const w = y.querySelector("img.vvw-img-hi");
|
|
676
|
-
y.dataset.vvwPos === "0" && !
|
|
675
|
+
y.dataset.vvwPos === "0" && !d.aborted && f && I && S && (v && (w.classList.add("vvw--loaded"), w.dataset.vvwWidth = u.dataset.vvwWidth || "", w.dataset.vvwHeight = u.dataset.vvwHeight || ""), E && (w.classList.add("vvw--ready"), w.width = I, w.height = S), w.setAttribute("style", f)), o.appendChild(y), y.dataset.vvwPos === "0" && !d.aborted && E ? (this.imageState.setCurrentImage(w), this.imageState.setInitialCenter()) : y.dataset.vvwPos === "0" && !d.aborted && f && I && S && v && b && (this.imageTransitions.set(w, b), this.transitionImage(
|
|
677
676
|
w,
|
|
678
677
|
() => {
|
|
679
678
|
this.imageState.setCurrentImage(w), this.imageState.setInitialCenter(), w.classList.add("vvw--ready");
|
|
@@ -684,19 +683,19 @@ class st {
|
|
|
684
683
|
}
|
|
685
684
|
getChildElements(t, e) {
|
|
686
685
|
const i = [], n = [];
|
|
687
|
-
for (let
|
|
688
|
-
const
|
|
689
|
-
index:
|
|
690
|
-
imageElm:
|
|
691
|
-
anchorElm:
|
|
692
|
-
src:
|
|
693
|
-
thumb:
|
|
694
|
-
alt:
|
|
686
|
+
for (let r = -t; r <= t; r++) {
|
|
687
|
+
const a = (e + r + this.elements.length) % this.elements.length, o = this.elements[a], l = o instanceof HTMLImageElement ? o : o instanceof HTMLAnchorElement && o.querySelector("img") || void 0, c = o instanceof HTMLElement ? {
|
|
688
|
+
index: a,
|
|
689
|
+
imageElm: l instanceof HTMLImageElement ? l : void 0,
|
|
690
|
+
anchorElm: o instanceof HTMLAnchorElement ? o : void 0,
|
|
691
|
+
src: o.dataset.vistaviewSrc || o.getAttribute("href") || o.getAttribute("src") || "",
|
|
692
|
+
thumb: o.dataset.vistaviewThumb || (l instanceof HTMLImageElement ? l.getAttribute("src") : void 0) || o.getAttribute("href") || void 0,
|
|
693
|
+
alt: l instanceof HTMLImageElement && l.getAttribute("alt") || void 0
|
|
695
694
|
} : {
|
|
696
|
-
index:
|
|
697
|
-
...
|
|
695
|
+
index: a,
|
|
696
|
+
...o
|
|
698
697
|
};
|
|
699
|
-
n.push(c), i.push(U(c,
|
|
698
|
+
n.push(c), i.push(U(c, r));
|
|
700
699
|
}
|
|
701
700
|
return {
|
|
702
701
|
htmls: i,
|
|
@@ -722,17 +721,17 @@ class st {
|
|
|
722
721
|
);
|
|
723
722
|
}
|
|
724
723
|
displayActiveIndex() {
|
|
725
|
-
var
|
|
724
|
+
var a;
|
|
726
725
|
const t = this.currentIndex;
|
|
727
|
-
this.elements instanceof NodeList && this.elements.forEach((
|
|
728
|
-
|
|
726
|
+
this.elements instanceof NodeList && this.elements.forEach((o, l) => {
|
|
727
|
+
o.style.opacity = "", l === t && (o.style.opacity = "0");
|
|
729
728
|
});
|
|
730
729
|
const e = this.qs(".vvw-index"), i = `${t + 1}`, n = `${this.elements.length}`;
|
|
731
730
|
e && (e.textContent = `${i} / ${n}`);
|
|
732
|
-
const
|
|
733
|
-
if (
|
|
734
|
-
const
|
|
735
|
-
|
|
731
|
+
const r = this.qs(".vvw-desc");
|
|
732
|
+
if (r) {
|
|
733
|
+
const o = (a = this.currentChildren) == null ? void 0 : a.images.find((c) => c.index === t), l = (o == null ? void 0 : o.alt) || "";
|
|
734
|
+
l ? (r.textContent = l, r.setAttribute("aria-label", `Image ${i} of ${n}: ${l}`)) : (r.textContent = "", r.setAttribute("aria-label", `Image ${i} of ${n}`));
|
|
736
735
|
}
|
|
737
736
|
}
|
|
738
737
|
transitionImage(t, e) {
|
|
@@ -746,12 +745,12 @@ class st {
|
|
|
746
745
|
const i = this.imageTransitions.get(t);
|
|
747
746
|
i && requestAnimationFrame(() => {
|
|
748
747
|
if (t.classList.contains("vvw--load-cancelled")) return;
|
|
749
|
-
const { current: n, target:
|
|
750
|
-
width: n.width + (
|
|
751
|
-
height: n.height + (
|
|
752
|
-
radius: n.radius + (
|
|
748
|
+
const { current: n, target: r } = i, a = {
|
|
749
|
+
width: n.width + (r.width - n.width) * 0.2,
|
|
750
|
+
height: n.height + (r.height - n.height) * 0.2,
|
|
751
|
+
radius: n.radius + (r.radius - n.radius) * 0.2
|
|
753
752
|
};
|
|
754
|
-
Math.abs(
|
|
753
|
+
Math.abs(a.width - r.width) < 1 && Math.abs(a.height - r.height) < 1 && Math.abs(a.radius - r.radius) < 1 ? (t.style.setProperty("--vvw-current-w", `${r.width}px`), t.style.setProperty("--vvw-current-h", `${r.height}px`), t.style.setProperty("--vvw-current-radius", `${r.radius}px`), this.imageTransitions.delete(t), e()) : (t.style.setProperty("--vvw-current-w", `${a.width}px`), t.style.setProperty("--vvw-current-h", `${a.height}px`), t.style.setProperty("--vvw-current-radius", `${a.radius}px`), this.imageTransitions.set(t, { current: a, target: r }), this.transitionImage(
|
|
755
754
|
t,
|
|
756
755
|
e
|
|
757
756
|
/* false */
|
|
@@ -762,17 +761,17 @@ class st {
|
|
|
762
761
|
this.imageContainer.querySelectorAll("img.vvw-img-hi:not(.vvw--loaded)").forEach((i) => {
|
|
763
762
|
const n = i;
|
|
764
763
|
if (n.classList.contains("vvw--load-cancelled")) return;
|
|
765
|
-
const
|
|
764
|
+
const r = () => {
|
|
766
765
|
if (n.classList.contains("vvw--load-cancelled")) return;
|
|
767
766
|
n.width = n.naturalWidth, n.height = n.naturalHeight;
|
|
768
|
-
const { width:
|
|
769
|
-
n.dataset.vvwWidth =
|
|
767
|
+
const { width: a, height: o } = H(n);
|
|
768
|
+
n.dataset.vvwWidth = a.toString(), n.dataset.vvwHeight = o.toString(), n.classList.add("vvw--loaded"), this.imageTransitions.set(n, {
|
|
770
769
|
current: {
|
|
771
770
|
width: n.style.getPropertyValue("--vvw-current-w") ? parseFloat(n.style.getPropertyValue("--vvw-current-w")) : 0,
|
|
772
771
|
height: n.style.getPropertyValue("--vvw-current-h") ? parseFloat(n.style.getPropertyValue("--vvw-current-h")) : 0,
|
|
773
772
|
radius: n.style.getPropertyValue("--vvw-current-radius") ? parseFloat(n.style.getPropertyValue("--vvw-current-radius")) : 0
|
|
774
773
|
},
|
|
775
|
-
target: { width:
|
|
774
|
+
target: { width: a, height: o, radius: 0 }
|
|
776
775
|
}), this.transitionImage(n, () => {
|
|
777
776
|
var c;
|
|
778
777
|
if (n.classList.contains("vvw--load-cancelled")) return;
|
|
@@ -782,16 +781,16 @@ class st {
|
|
|
782
781
|
});
|
|
783
782
|
};
|
|
784
783
|
if (n.complete && n.naturalWidth !== 0) {
|
|
785
|
-
|
|
784
|
+
r();
|
|
786
785
|
return;
|
|
787
786
|
}
|
|
788
787
|
n.addEventListener("load", () => {
|
|
789
|
-
|
|
788
|
+
r();
|
|
790
789
|
}), n.addEventListener("error", () => {
|
|
791
|
-
var
|
|
790
|
+
var o;
|
|
792
791
|
n.classList.add("vvw--loaderror");
|
|
793
|
-
const
|
|
794
|
-
|
|
792
|
+
const a = document.createElement("p");
|
|
793
|
+
a.className = "vvw-img-err", a.setAttribute("role", "alert"), a.textContent = "Error loading image", (o = n.parentNode) == null || o.appendChild(a);
|
|
795
794
|
});
|
|
796
795
|
});
|
|
797
796
|
}
|
|
@@ -803,30 +802,30 @@ class st {
|
|
|
803
802
|
}
|
|
804
803
|
/// OPEN
|
|
805
804
|
open(t = 0) {
|
|
806
|
-
var c,
|
|
805
|
+
var c, d, p, x, g;
|
|
807
806
|
if (C.somethingOpened)
|
|
808
807
|
return;
|
|
809
808
|
C.somethingOpened = this, this.currentIndex = t, document.body.style.overflow = "hidden";
|
|
810
|
-
const e =
|
|
809
|
+
const e = _({
|
|
811
810
|
controls: this.options.controls
|
|
812
811
|
});
|
|
813
812
|
if (document.body.prepend(e), this.root = document.body.querySelector("#vvw-root"), !this.root)
|
|
814
813
|
throw new Error("Failed to setup VistaView root element.");
|
|
815
814
|
this.imageContainer = this.qs(".vvw-image-container"), this.options.animationDurationBase && this.root.style.setProperty("--vvw-anim-dur", `${this.options.animationDurationBase}`), this.options.initialZIndex !== void 0 && this.root.style.setProperty("--vvw-init-z", `${this.options.initialZIndex ?? 0}`), this.options.arrowOnSmallScreens && this.root.classList.add("vvw-arrow-sm");
|
|
816
|
-
const i = this.options.preloads || 0, n = t, { images:
|
|
817
|
-
htmlElements: { from: null, to:
|
|
818
|
-
images: { from: null, to:
|
|
815
|
+
const i = this.options.preloads || 0, n = t, { images: r, htmls: a } = this.getChildElements(i, n), o = {
|
|
816
|
+
htmlElements: { from: null, to: a },
|
|
817
|
+
images: { from: null, to: r },
|
|
819
818
|
index: { from: null, to: this.currentIndex },
|
|
820
819
|
via: { next: !1, prev: !1 },
|
|
821
820
|
vistaView: this
|
|
822
821
|
};
|
|
823
|
-
this.setupFunction(
|
|
824
|
-
this.imageContainer.appendChild(
|
|
825
|
-
}), (c = this.qs(".vvw-close")) == null || c.addEventListener("click", () => this.close()), (
|
|
822
|
+
this.setupFunction(o), this.currentChildren = { htmls: a, images: r }, a.forEach((m) => {
|
|
823
|
+
this.imageContainer.appendChild(m);
|
|
824
|
+
}), (c = this.qs(".vvw-close")) == null || c.addEventListener("click", () => this.close()), (d = this.qs(".vvw-zoom-in")) == null || d.addEventListener("click", () => this.zoomIn()), (p = this.qs(".vvw-zoom-out")) == null || p.addEventListener("click", () => this.zoomOut()), (x = this.qs(".vvw-prev>button")) == null || x.addEventListener("click", () => this.prev()), (g = this.qs(".vvw-next>button")) == null || g.addEventListener("click", () => this.next()), this.options.keyboardListeners && window.addEventListener("keydown", this.onKeyDown), window.addEventListener("wheel", this.onScroll, { passive: !1 }), window.addEventListener("resize", this.onResizeHandler), this.pointers = new et({
|
|
826
825
|
elm: this.imageContainer,
|
|
827
826
|
listeners: [this.getInternalPointerListener()]
|
|
828
827
|
});
|
|
829
|
-
const
|
|
828
|
+
const l = {};
|
|
830
829
|
[
|
|
831
830
|
...this.options.controls.topLeft || [],
|
|
832
831
|
...this.options.controls.topRight || [],
|
|
@@ -834,12 +833,12 @@ class st {
|
|
|
834
833
|
...this.options.controls.bottomCenter || [],
|
|
835
834
|
...this.options.controls.bottomLeft || [],
|
|
836
835
|
...this.options.controls.bottomRight || []
|
|
837
|
-
].forEach((
|
|
838
|
-
typeof
|
|
839
|
-
}), this.root.querySelectorAll("button[data-vvw-control]").forEach((
|
|
840
|
-
const u =
|
|
836
|
+
].forEach((m) => {
|
|
837
|
+
typeof m != "string" && (l[m.name] = m);
|
|
838
|
+
}), this.root.querySelectorAll("button[data-vvw-control]").forEach((m) => {
|
|
839
|
+
const u = m;
|
|
841
840
|
u.addEventListener("click", (b) => {
|
|
842
|
-
const f = b.currentTarget.dataset.vvwControl, v =
|
|
841
|
+
const f = b.currentTarget.dataset.vvwControl, v = l[f], E = this.currentChildren.images.find(
|
|
843
842
|
(I) => I.index === this.currentIndex
|
|
844
843
|
);
|
|
845
844
|
v && E && (v.onClick.constructor.name === "AsyncFunction" ? (u.classList.add("vvw--loading"), v.onClick(E, this).finally(() => {
|
|
@@ -847,24 +846,24 @@ class st {
|
|
|
847
846
|
})) : v.onClick(E, this));
|
|
848
847
|
});
|
|
849
848
|
}), this.initFunction(this), requestAnimationFrame(() => {
|
|
850
|
-
var
|
|
851
|
-
(
|
|
849
|
+
var m;
|
|
850
|
+
(m = this.root) == null || m.addEventListener(
|
|
852
851
|
"transitionend",
|
|
853
852
|
() => {
|
|
854
853
|
var u;
|
|
855
854
|
(u = this.root) == null || u.classList.add("vvw--settled"), this.imageState.reset(), this.waitForImagesToLoad();
|
|
856
855
|
},
|
|
857
856
|
{ once: !0 }
|
|
858
|
-
), this.root.classList.add("vvw--active"), this.displayActiveIndex(), this.options.onOpen && this.options.onOpen(this), this.options.onImageView && this.options.onImageView(
|
|
857
|
+
), this.root.classList.add("vvw--active"), this.displayActiveIndex(), this.options.onOpen && this.options.onOpen(this), this.options.onImageView && this.options.onImageView(o);
|
|
859
858
|
});
|
|
860
859
|
}
|
|
861
860
|
/// CLOSE
|
|
862
861
|
async close(t = !0) {
|
|
863
862
|
C.somethingOpened === this && this.root && (t ? await new Promise((e) => {
|
|
864
863
|
let n = 0;
|
|
865
|
-
this.root.addEventListener("transitionend", (
|
|
866
|
-
|
|
867
|
-
|
|
864
|
+
this.root.addEventListener("transitionend", (r) => {
|
|
865
|
+
r.target === this.root && (n++, n === 2 && this.elements instanceof NodeList && this.elements.forEach((a) => {
|
|
866
|
+
a.style.opacity = "";
|
|
868
867
|
}), n === 3 && e(null));
|
|
869
868
|
}), this.root.classList.add("vvw--closing");
|
|
870
869
|
}) : this.elements instanceof NodeList && this.elements.forEach((e) => {
|
|
@@ -935,10 +934,10 @@ function at({ elements: s, ...t }) {
|
|
|
935
934
|
};
|
|
936
935
|
}
|
|
937
936
|
export {
|
|
938
|
-
|
|
937
|
+
M as DefaultOptions,
|
|
939
938
|
Q as close,
|
|
940
939
|
G as init,
|
|
941
|
-
|
|
940
|
+
K as setup,
|
|
942
941
|
tt as transition,
|
|
943
942
|
at as vistaView,
|
|
944
943
|
j as vistaViewDownload
|
package/dist/vistaview.umd.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
(function(v,w){typeof exports=="object"&&typeof module<"u"?w(exports):typeof define=="function"&&define.amd?define(["exports"],w):(v=typeof globalThis<"u"?globalThis:v||self,w(v.VistaView={}))})(this,(function(v){"use strict";var rt=Object.defineProperty;var at=(v,w,$)=>w in v?rt(v,w,{enumerable:!0,configurable:!0,writable:!0,value:$}):v[w]=$;var
|
|
2
|
-
<img class="vvw-img-hi" src="${s.src}" alt="${s.alt||""}" />`));const i=e.querySelector("img.vvw-img-lo"),n=e.querySelector("img.vvw-img-hi");return P(s,n,i,t===0),e}function J({controls:s}){const t=i=>i?i.map(
|
|
1
|
+
(function(v,w){typeof exports=="object"&&typeof module<"u"?w(exports):typeof define=="function"&&define.amd?define(["exports"],w):(v=typeof globalThis<"u"?globalThis:v||self,w(v.VistaView={}))})(this,(function(v){"use strict";var rt=Object.defineProperty;var at=(v,w,$)=>w in v?rt(v,w,{enumerable:!0,configurable:!0,writable:!0,value:$}):v[w]=$;var h=(v,w,$)=>at(v,typeof w!="symbol"?w+"":w,$);function w(s){return s&&!/^0(px|%|r?em|vw|vh|vmin|vmax|cm|mm|in|pt|pc|ex|ch)?$/i.test(s.trim())&&s}function $(s){const e=window.getComputedStyle(s).objectFit||"",{width:i,height:n}=s.getBoundingClientRect(),r=s.naturalWidth,a=s.naturalHeight;if(!e)return{width:i,height:n};if(!r||!a)return{width:i,height:n};const o=r/a,l=i/n;switch(e){case"fill":return{width:i,height:n};case"none":return{width:r,height:a};case"contain":return o>l?{width:i,height:i/o}:{width:n*o,height:n};case"cover":return o<l?{width:i,height:i/o}:{width:n*o,height:n};case"scale-down":{const c={width:r,height:a},d=o>l?{width:i,height:i/o}:{width:n*o,height:n};return d.width<=c.width&&d.height<=c.height?d:c}}return{width:i,height:n}}function W(s){const t=getComputedStyle(s),e=s.getBoundingClientRect();return{objectFit:t.objectFit,borderRadius:t.borderRadius,objectPosition:t.objectPosition,overflow:t.overflow,top:e.top,left:e.left,width:e.width,height:e.height,naturalWidth:s.naturalWidth,naturalHeight:s.naturalHeight}}function Z(s){const t=s.imageElm?W(s.imageElm):null,e=s.anchorElm?W(s.anchorElm):null,i=w(t==null?void 0:t.borderRadius),n=e&&w(e==null?void 0:e.borderRadius),r=(n?e==null?void 0:e.borderRadius:i?t==null?void 0:t.borderRadius:"")||"";return{fit:(t==null?void 0:t.objectFit)||(e==null?void 0:e.objectFit)||"",pos:(t==null?void 0:t.objectPosition)||"",br:r,overflow:n?e.overflow:i?t.overflow:"",nw:(t==null?void 0:t.naturalWidth)||0,nh:(t==null?void 0:t.naturalHeight)||0,w:(e==null?void 0:e.width)||(t==null?void 0:t.width)||0,h:(e==null?void 0:e.height)||(t==null?void 0:t.height)||0,top:(e==null?void 0:e.top)||(t==null?void 0:t.top)||0,left:(e==null?void 0:e.left)||(t==null?void 0:t.left)||0}}function P(s,t,e,i=!1){const{fit:n,w:r,h:a,nw:o,nh:l,br:c,top:d,left:f}=Z(s),L=Math.min(Math.max(f,-r),window.innerWidth+r)-window.innerWidth/2+r/2,y=Math.min(Math.max(d,-a),window.innerHeight+a)-window.innerHeight/2+a/2,m=e.style;m.width=`${r}px`,m.height=`${a}px`,m.objectFit=n,e.width=o,e.height=l,m.setProperty("--vvw-init-radius",`${c}`),m.setProperty("--vvw-pulse-radius",`calc(1.3 * ${c})`),m.setProperty("--vvw-init-x",`${L}px`),m.setProperty("--vvw-init-y",`${y}px`),i&&(m.setProperty("--vvw-current-x",`${L}px`),m.setProperty("--vvw-current-y",`${y}px`));const u=$(s.imageElm),E=Math.min(r,u.width),x=Math.min(a,u.height),p=t.style;p.setProperty("--vvw-init-radius",`${c}`),p.setProperty("--vvw-init-w",`${E}px`),p.setProperty("--vvw-init-h",`${x}px`),i&&(p.setProperty("--vvw-current-radius",`${c}`),p.setProperty("--vvw-current-w",`${E}px`),p.setProperty("--vvw-current-h",`${x}px`),t.dataset.vvwWidth=E.toString(),t.dataset.vvwHeight=x.toString())}function F(s){const t=window.innerWidth,e=window.innerHeight,i=s.naturalWidth,n=s.naturalHeight;if(!i||!n)throw new Error("Image natural dimensions are zero");if(i<t&&n<e)return{width:i,height:n};const r=i/n,a=t/e;let o,l;return r>a?(o=t,l=t/r):(l=e,o=e*r),{width:o,height:l}}function N(s,t,e){return Math.min(Math.max(s,t),e)}function I(s,t=2){const e=Math.pow(10,t);return Math.round(s*e)/e}const X='<svg viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>',Y='<svg viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>',B='<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>',j='<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>',V='<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>';let D=null;function _(){return D||(window.trustedTypes||(window.trustedTypes={createPolicy:(s,t)=>t}),D=window.trustedTypes.createPolicy("vistaView-policy",{createHTML:s=>s,createScript:()=>{throw new Error("Not implemented")},createScriptURL:()=>{throw new Error("Not implemented")}}),D)}function R(s){const e=_().createHTML(s),i=document.createElement("template");i.innerHTML=e;const n=i.content;return i.remove(),n}function A(){return{name:"download",icon:U,onClick:async s=>{var r;const t=await fetch(s.src),e=await t.blob(),i=t.url,n=document.createElement("a");n.href=URL.createObjectURL(e),n.download=((r=i.split("/").pop())==null?void 0:r.split("?")[0].split("#")[0])||"download",document.body.appendChild(n),n.click(),document.body.removeChild(n)}}}function K(s){if(typeof s=="string")switch(s){case"zoomIn":return`<button aria-label="Zoom In" class="vvw-zoom-in vvw-ui">${B}</button>`;case"zoomOut":return`<button aria-label="Zoom Out" disabled class="vvw-zoom-out vvw-ui">${j}</button>`;case"close":return`<button aria-label="Close" class="vvw-close vvw-ui">${V}</button>`;case"indexDisplay":return'<div class="vvw-index vvw-ui" aria-hidden="true"></div>';case"description":return'<div class="vvw-desc vvw-ui" role="status" aria-live="polite" aria-atomic="true"></div>';default:return""}return`<button class="vvw-ui" aria-label="${s.description||s.name}" data-vvw-control="${s.name}">${s.icon}</button>`}function G(s,t){const e=document.createElement("div");e.className="vvw-item",e.dataset.vvwPos=`${t!==void 0?t:""}`,e.dataset.vvwIdx=s.index.toString(),e.appendChild(R(`<img class="vvw-img-lo" src="${s.thumb||s.src}" alt="${s.alt||""}" />
|
|
2
|
+
<img class="vvw-img-hi" src="${s.src}" alt="${s.alt||""}" />`));const i=e.querySelector("img.vvw-img-lo"),n=e.querySelector("img.vvw-img-hi");return P(s,n,i,t===0),e}function J({controls:s}){const t=i=>i?i.map(K).join(""):"";return R(`<div class="vvw-root" id="vvw-root">
|
|
3
3
|
<div class="vvw-container">
|
|
4
4
|
<div class="vvw-bg"></div>
|
|
5
5
|
<div class="vvw-image-container"></div>
|
|
6
6
|
<div class="vvw-top-bar"><div>${t(s==null?void 0:s.topLeft)}</div><div>${t(s==null?void 0:s.topCenter)}</div><div>${t(s==null?void 0:s.topRight)}</div></div>
|
|
7
7
|
<div class="vvw-bottom-bar"><div>${t(s==null?void 0:s.bottomLeft)}</div><div>${t(s==null?void 0:s.bottomCenter)}</div><div>${t(s==null?void 0:s.bottomRight)}</div></div>
|
|
8
|
-
<div class="vvw-prev vvw-ui"><button aria-label="Previous">${
|
|
8
|
+
<div class="vvw-prev vvw-ui"><button aria-label="Previous">${X}</button></div>
|
|
9
9
|
<div class="vvw-next vvw-ui"><button aria-label="Next">${Y}</button></div>
|
|
10
10
|
</div>
|
|
11
|
-
</div>`)}const M={animationDurationBase:333,maxZoomLevel:2,preloads:1,keyboardListeners:!0,arrowOnSmallScreens:!1,rapidLimit:222,controls:{topLeft:["indexDisplay"],topRight:["zoomIn","zoomOut",A(),"close"],bottomLeft:["description"]}};function z(s){}function q(s){const t=s.options.preloads;s.imageContainer.style.width=`${(t*2+1)*100}vw`,s.imageContainer.style.left=`-${t*100}vw`,s.imageContainer.style.display="flex",Q(s)}function Q(s){let t={x:0,y:0},e={x:0,y:0},i=null;s.registerPointerListener(n=>{var o;if(!n.hasInternalExecution&&!(n.pointers.length>1)){if(n.event==="down"&&(t={x:n.pointer.x,y:n.pointer.y},e={x:n.pointer.x,y:n.pointer.y},(o=n.abortController)==null||o.abort()),n.event==="move"){e={x:n.pointer.x,y:n.pointer.y};const r=e.x-t.x,a=e.y-t.y;if(!i&&Math.abs(a)>Math.abs(r)||i==="y"){const h=a/window.innerHeight*100;s.imageContainer.style.transition="none",s.imageContainer.style.transform=`translateY(${h}vh)`,i="y"}else if(!i&&Math.abs(r)>Math.abs(a)||i==="x"){const h=r/window.innerWidth*100;s.imageContainer.style.transition="none",s.imageContainer.style.transform=`translateX(${h}vw)`,i="x"}}if(n.event==="up"||n.event==="cancel"){let r=function(a){var h;(h=s.imageContainer)==null||h.addEventListener("transitionend",function c(){var m;(m=s.imageContainer)==null||m.removeEventListener("transitionend",c),s.imageContainer.style.transition="",s.imageContainer.style.transform=""}),s.imageContainer.style.transition="transform 222ms ease",s.imageContainer.style.transform=a};if(i==="y"){const a=e.y-t.y;Math.abs(a)>144?(s.imageContainer.style.transition="transform 222ms ease",s.imageContainer.style.transform="translateY(0vh)",s.close()):r("translateY(0vh)")}if(i==="x"){const a=e.x-t.x,h=n.pointer.movementX,c=1;s.imageContainer.style.transition="",a>0&&Math.abs(h)>c?s.prev():a<0&&Math.abs(h)>c?s.next():r("translateX(0vw)")}i=null,t={x:0,y:0},e={x:0,y:0}}}})}function k(s){}function O({vistaView:{isReducedMotion:s},htmlElements:{to:t},index:{from:e,to:i},vistaView:{elements:n,imageContainer:o,options:r}},a){if(!(!t||a.aborted||s||!(Math.abs(i-e)===1||e===0&&i===n.length-1||e===n.length-1&&i===0)))return{cleanup:()=>{o.style.transition="",o.style.transform=""},transitionEnded:new Promise(c=>{o.addEventListener("transitionend",()=>{c()},{once:!0}),o.addEventListener("transitioncancel",()=>{a.aborted&&c()},{once:!0});const m=Math.round(r.animationDurationBase*100)/100,f=i===e+1||e===n.length-1&&i===0?"translateX(-100vw)":"translateX(100vw)";o.style.transition=`transform ${m}ms ease`,o.style.transform=f})}}class tt{constructor({elm:t,listeners:e}){l(this,"pointers",[]);l(this,"elm");l(this,"listeners",[]);l(this,"lastPointerDownId",null);l(this,"removeLastPointer",()=>{if(this.pointers.length&&this.lastPointerDownId!==null){const t=this.pointers.findIndex(e=>e.id===this.lastPointerDownId);t!==-1&&this.pointers.splice(t,1)}});l(this,"onPointerDown",t=>{if(!this.listeners.length||t.button!==0)return;t.preventDefault(),this.lastPointerDownId=t.pointerId,window.addEventListener("contextmenu",this.removeLastPointer,{once:!0}),window.addEventListener("auxclick",this.removeLastPointer,{once:!0});let e={x:t.clientX,y:t.clientY,movementX:0,movementY:0,id:t.pointerId};this.pointers.push(e),this.listeners.forEach(i=>i({event:"down",pointer:e,pointers:this.pointers,lastPointerLen:this.pointers.length-1}))});l(this,"onPointerMove",t=>{if(!this.listeners.length)return;t.preventDefault();const e=this.pointers.find(i=>i.id===t.pointerId);e&&(e.movementX=t.movementX,e.movementY=t.movementY,e.x=t.clientX,e.y=t.clientY,this.listeners.forEach(i=>i({event:"move",pointer:e,pointers:this.pointers,lastPointerLen:this.pointers.length-1})))});l(this,"onPointerUp",t=>{if(!this.listeners.length||t.button!==0||(window.removeEventListener("contextmenu",this.removeLastPointer),window.removeEventListener("auxclick",this.removeLastPointer),t.target instanceof Node&&!this.elm.contains(t.target)&&t.target!==document.querySelector("html")&&t.target!==document))return;t.preventDefault();const e=this.pointers.findIndex(o=>o.id===t.pointerId);if(e===-1)return;const i=this.pointers[e];i.x=t.clientX,i.y=t.clientY;const n=this.pointers.length;this.pointers.splice(e,1),this.listeners.forEach(o=>o({event:"up",pointer:i,pointers:this.pointers,lastPointerLen:n}))});l(this,"onPointerCancel",t=>{if(!this.listeners.length||t.target instanceof Node&&!this.elm.contains(t.target)&&t.target!==document.querySelector("html")&&t.target!==document)return;t.preventDefault();const e=this.pointers.findIndex(o=>o.id===t.pointerId);if(e===-1)return;const i=this.pointers[e];i.x=t.clientX,i.y=t.clientY;const n=this.pointers.length;this.pointers.splice(e,1),this.listeners.forEach(o=>o({event:"cancel",pointer:i,pointers:this.pointers,lastPointerLen:n}))});this.elm=t??document,e&&(this.listeners=e),this.startListeners()}startListeners(){this.elm.addEventListener("pointerdown",this.onPointerDown),this.elm.addEventListener("pointermove",this.onPointerMove),document.addEventListener("pointerup",this.onPointerUp),document.addEventListener("pointercancel",this.onPointerCancel)}removeListeners(){this.elm.removeEventListener("pointerdown",this.onPointerDown),this.elm.removeEventListener("pointermove",this.onPointerMove),document.removeEventListener("pointerup",this.onPointerUp),document.removeEventListener("pointercancel",this.onPointerCancel),this.pointers=[]}addEventListener(t){this.listeners.push(t)}removeEventListener(t){this.listeners=this.listeners.filter(e=>e!==t)}getPointerDistance(t,e){const i=t.x-e.x,n=t.y-e.y;return Math.sqrt(i*i+n*n)}getCentroid(){if(this.pointers.length===0)return null;const t=this.pointers.reduce((e,i)=>(e.x+=i.x,e.y+=i.y,e),{x:0,y:0});return{x:t.x/this.pointers.length,y:t.y/this.pointers.length}}}class et{constructor(t,e){l(this,"maxZoomLevel");l(this,"image",null);l(this,"rect",null);l(this,"initialCenter",{x:0,y:0});l(this,"maxDimension",{width:0});l(this,"minDimension",{initialWidth:0,initialHeight:0,minWidth:0,closingWidth:0});l(this,"accumulatedTranslate",{x:0,y:0});l(this,"scale",1);l(this,"translate",{x:0,y:0});l(this,"onScale",null);l(this,"animationTimestamp",0);this.maxZoomLevel=t,this.onScale=e}clean(){this.image&&(this.image.style.transform="",this.image.style.width="",this.image.style.height="",this.image.style.top="",this.image.style.left="",this.image.style.opacity="")}reset(){this.clean(),this.image=null,this.rect=null,this.initialCenter={x:window.innerWidth/2,y:window.innerHeight/2},this.maxDimension={width:0},this.minDimension={initialWidth:0,initialHeight:0,minWidth:0,closingWidth:0},this.accumulatedTranslate={x:0,y:0},this.scale=1,this.translate={x:0,y:0}}setCurrentImage(t){if(this.rect=null,this.image=t,this.maxDimension={width:t.naturalWidth*this.maxZoomLevel},!t.dataset.vvwWidth||!t.dataset.vvwHeight)throw new Error("VistaImageState: Image dataset vvwWidth or vvwHeight not set.");const e=parseFloat(t.dataset.vvwWidth),i=parseFloat(t.dataset.vvwHeight);this.minDimension={initialWidth:e,initialHeight:i,minWidth:e*.1,closingWidth:e*.5},this.accumulatedTranslate={x:0,y:0}}setInitialCenter(t){this.initialCenter=t||{x:window.innerWidth/2,y:window.innerHeight/2}}move(t){this.image&&(this.rect||(this.rect=this.image.getBoundingClientRect()),this.translate.x=I(t.x-this.initialCenter.x),this.translate.y=I(t.y-this.initialCenter.y),this.image.style.transform=`translate3d(${this.translate.x}px, ${this.translate.y}px, 0px) scale(${this.scale})`)}snapToTargetIfClose(t,e,i=1){return Math.abs(t-e)<=i&&(t=e),t}scaleMove(t,e){if(!this.image)return;this.rect||(this.rect=this.image.getBoundingClientRect()),e||(e=this.initialCenter);const i=this.snapToTargetIfClose(X(this.rect.width*t,this.minDimension.minWidth,this.maxDimension.width),this.minDimension.initialWidth);this.onScale&&this.onScale({scale:i/(this.maxDimension.width/this.maxZoomLevel),isMax:i>=this.maxDimension.width,isMin:i<=this.minDimension.initialWidth}),this.scale=I(i/this.rect.width);const n=this.rect.left+this.rect.width/2,o=this.rect.top+this.rect.height/2,r=this.initialCenter.x-n,a=this.initialCenter.y-o,h=r*(1-this.scale),c=a*(1-this.scale),m=e.x-this.initialCenter.x,f=e.y-this.initialCenter.y;this.translate.x=I(h+m),this.translate.y=I(c+f),this.image.style.transform=`translate3d(${this.translate.x}px, ${this.translate.y}px, 0px) scale(${this.scale})`,i<=this.minDimension.closingWidth?this.image.style.opacity="0.5":this.image.style.opacity=""}moveAndNormalize(t){let e=0,i=!1;const n=({x:o,y:r})=>{if(i)return;if(Math.abs(o)<.001&&Math.abs(r)<.001)return this.normalize();o*=.9,r*=.9;const a=this.image.getBoundingClientRect();this.translate.x=I(this.translate.x+o),this.translate.y=I(this.translate.y+r),a.right<window.innerWidth/2&&(this.translate.x+=(window.innerWidth/2-a.right)*.1,o*=.7),a.left>window.innerWidth/2&&(this.translate.x-=(a.left-window.innerWidth/2)*.1,o*=.7),a.bottom<window.innerHeight/2&&(this.translate.y+=(window.innerHeight/2-a.bottom)*.1,r*=.7),a.top>window.innerHeight/2&&(this.translate.y-=(a.top-window.innerHeight/2)*.1,r*=.7),this.image.style.transform=`translate3d(${this.translate.x}px, ${this.translate.y}px, 0px) scale(${this.scale})`,e=requestAnimationFrame(()=>n({x:o,y:r}))};return n({x:t.movementX,y:t.movementY}),()=>{i=!0,cancelAnimationFrame(e),this.normalize(!1)}}animateZoom(t){if(!this.image)return;this.rect||(this.rect=this.image.getBoundingClientRect());const e=Date.now(),i=this.image;this.rect.width*t<this.minDimension.closingWidth||i.width<Math.floor(this.minDimension.initialWidth)||(i.addEventListener("transitionend",()=>{this.animationTimestamp===e&&i&&(i.style.transition="",this.normalize())},{once:!0}),i.style.transition||(i.style.transition="all 222ms ease"),this.animationTimestamp=e,this.scaleMove(t))}normalize(t=!0){if(!this.image||!this.rect)return;const e=this.rect.width*this.scale,i=e<=this.minDimension.closingWidth,n=i?e:this.snapToTargetIfClose(this.rect.width*this.scale,this.minDimension.initialWidth),o=i?this.rect.height*this.scale:this.snapToTargetIfClose(this.rect.height*this.scale,this.minDimension.initialHeight);if(this.image.style.width=`${n}px`,this.image.style.height=`${o}px`,this.scale=1,this.image.style.opacity="",this.accumulatedTranslate.x+=this.translate.x,this.accumulatedTranslate.y+=this.translate.y,this.image.style.left=`calc(50% + ${this.accumulatedTranslate.x}px)`,this.image.style.top=`calc(50% + ${this.accumulatedTranslate.y}px)`,this.translate={x:0,y:0},this.image.style.transform="",this.rect=this.image.getBoundingClientRect(),i)return!0;if(n<this.minDimension.initialWidth)this.accumulatedTranslate.x=0,this.accumulatedTranslate.y=0,requestAnimationFrame(()=>{const r=this.image;r&&(r.addEventListener("transitionend",()=>{r&&(this.clean(),this.rect=null)},{once:!0}),r.style.transition="all 222ms ease",r.style.width=`${this.minDimension.initialWidth}px`,r.style.height=`${this.minDimension.initialHeight}px`,r.style.left="50%",r.style.top="50%")});else if(t){let r=!1;if(this.rect.right<window.innerWidth/2&&(r=!0,this.accumulatedTranslate.x+=window.innerWidth/2-this.rect.right),this.rect.left>window.innerWidth/2&&(r=!0,this.accumulatedTranslate.x-=this.rect.left-window.innerWidth/2),this.rect.bottom<window.innerHeight/2&&(r=!0,this.accumulatedTranslate.y+=window.innerHeight/2-this.rect.bottom),this.rect.top>window.innerHeight/2&&(r=!0,this.accumulatedTranslate.y-=this.rect.top-window.innerHeight/2),r){const a=this.image;a.addEventListener("transitionend",()=>{a&&(a.style.transition="",this.rect=null)},{once:!0}),a.style.transition="all 222ms ease",a.style.left=`calc(50% + ${this.accumulatedTranslate.x}px)`,a.style.top=`calc(50% + ${this.accumulatedTranslate.y}px)`}else this.rect=null}}}class it{constructor(){l(this,"fiolast",{})}fio(t,e,i=50){const o=Date.now()-(this.fiolast[e]??0),r=()=>{this.fiolast[e]=Date.now(),t()};if(!this.fiolast[e]){r();return}o>=i&&r()}}const C={somethingOpened:null};class nt{constructor(t,e={}){l(this,"options");l(this,"elements");l(this,"isReducedMotion");l(this,"currentIndex",-1);l(this,"currentChildren",null);l(this,"setupFunction",z);l(this,"initFunction",q);l(this,"closeFunction",k);l(this,"transitionFunction",O);l(this,"pointers",null);l(this,"imageState");l(this,"imageTransitions",new Map);l(this,"root",null);l(this,"imageContainer",null);l(this,"onClickElements",t=>{t.preventDefault();const e=t.currentTarget;e.dataset.vistaIdx&&this.open(parseInt(e.dataset.vistaIdx))});l(this,"defaultOnClickHandler",t=>t.preventDefault());l(this,"abortController",null);l(this,"throttle",new it);l(this,"lastSwapTime",0);l(this,"isRapidSwap",!1);l(this,"isRapidSwapRelease",0);l(this,"transitionCleanup",null);l(this,"isZoomedIn",!1);l(this,"onKeyDown",t=>{switch(t.key){case"ArrowLeft":t.preventDefault(),this.prev();break;case"ArrowRight":t.preventDefault(),this.next();break;case"ArrowUp":t.preventDefault(),this.zoomIn();break;case"ArrowDown":t.preventDefault(),this.zoomOut();break;case"Escape":t.preventDefault(),this.close();break}});l(this,"onScroll",t=>{t.preventDefault();const e=t.deltaY;this.imageState.setInitialCenter({x:t.clientX,y:t.clientY}),e<0?this.zoomIn():e>0&&this.zoomOut()});l(this,"onResizeHandler",()=>{this.currentChildren.htmls.forEach((t,e)=>{const i=this.currentChildren.images[e],n=t.querySelector("img.vvw-img-hi"),o=t.querySelector("img.vvw-img-lo");if(P(i,n,o,!1),n.classList.contains("vvw--loaded")){const{width:r,height:a}=F(n);n.style.setProperty("--vvw-current-w",`${r}px`),n.style.setProperty("--vvw-current-h",`${a}px`),n.dataset.vvwWidth=r.toString(),n.dataset.vvwHeight=a.toString()}})});l(this,"pointerListeners",[]);l(this,"getInternalPointerListener",()=>{const t=this.imageState;let e=0,i=!1,n=()=>{};return o=>{if(o.event==="down"){if(n(),this.isZoomedIn&&o.pointers.length===1){const r=this.pointers.getCentroid();t.setInitialCenter(r)}if(o.pointers.length>=2){i=!0;const r=this.pointers.getCentroid();e=this.pointers.getPointerDistance(o.pointers[0],o.pointers[1]),t.setInitialCenter(r)}}else if(o.event==="move"){if(this.isZoomedIn&&o.pointers.length===1&&o.lastPointerLen===0){const r=this.pointers.getCentroid();t.move(r)}if(o.pointers.length>=2&&i){const r=this.pointers.getCentroid(),a=this.pointers.getPointerDistance(o.pointers[0],o.pointers[1]);t.scaleMove(a/e,r)}}else(o.event==="up"||o.event==="cancel")&&(i||this.isZoomedIn)&&(i?(i=!1,t.normalize()&&requestAnimationFrame(()=>{this.close()})):this.isZoomedIn&&o.pointers.length===0&&(n=t.moveAndNormalize(o.pointer)));this.pointerListeners.forEach(r=>r({...o,hasInternalExecution:this.isZoomedIn||i,abortController:this.abortController}))}});this.elements=t,this.options={...M,...e,controls:{...M.controls,...e.controls}},this.imageState=new et(this.options.maxZoomLevel,i=>{var n,o,r,a,h,c;i.isMin?(this.isZoomedIn=!1,(n=this.qs(".vvw-zoom-out"))==null||n.setAttribute("disabled","true"),(o=this.qs('.vvw-item[data-vvw-idx="'+this.currentIndex+'"]'))==null||o.style.setProperty("pointer-events","none")):(this.isZoomedIn=!0,(r=this.qs(".vvw-zoom-out"))==null||r.removeAttribute("disabled"),(a=this.qs('.vvw-item[data-vvw-idx="'+this.currentIndex+'"]'))==null||a.style.setProperty("pointer-events","auto")),i.isMax?(h=this.qs(".vvw-zoom-in"))==null||h.setAttribute("disabled","true"):(c=this.qs(".vvw-zoom-in"))==null||c.removeAttribute("disabled")}),this.options.setupFunction&&(this.setupFunction=this.options.setupFunction),this.options.closeFunction&&(this.closeFunction=this.options.closeFunction),this.options.initFunction&&(this.initFunction=this.options.initFunction),this.options.transitionFunction&&(this.transitionFunction=this.options.transitionFunction),this.isReducedMotion=window.matchMedia("(prefers-reduced-motion: reduce)").matches,this.elements instanceof NodeList&&this.elements.forEach((i,n)=>{i.dataset.vistaIdx=n.toString(),i.addEventListener("click",this.defaultOnClickHandler),i.addEventListener("pointerup",this.onClickElements)})}qs(t){return this.root?this.root.querySelector(t):null}async swap(t,e){const i=this.options.preloads||0,n=this.currentIndex,{htmls:o,images:r}=this.getChildElements(i,n),a=this.imageContainer,h=this.currentChildren,c={htmlElements:{from:h.htmls,to:o},images:{from:h.images,to:r},index:{from:t,to:this.currentIndex},via:e||{next:!1,prev:!1},vistaView:this};this.setupFunction(c),this.currentChildren={htmls:o,images:r},this.displayActiveIndex();const m=this.abortController.signal,L=performance.now()-this.lastSwapTime<this.options.rapidLimit;if(this.isRapidSwap=L,a.querySelectorAll(".vvw-item img.vvw-img-hi").forEach(b=>b.classList.add("vvw--load-cancelled")),L){this.imageState.reset(),a.innerHTML="",this.transitionCleanup&&this.transitionCleanup(),o.forEach(b=>{a.appendChild(b)}),this.lastSwapTime=performance.now(),this.waitForImagesToLoad(),this.options.onImageView&&this.options.onImageView(c),this.isRapidSwapRelease&&clearTimeout(this.isRapidSwapRelease),this.isRapidSwapRelease=setTimeout(()=>{this.isRapidSwap=!1},333);return}const y=this.transitionFunction(c,m);y&&(this.transitionCleanup=y.cleanup,await y.transitionEnded),this.lastSwapTime=performance.now();const d=o[Math.floor(o.length/2)].dataset.vvwIdx,u=a.querySelector(`.vvw-item[data-vvw-idx="${d}"] img.vvw-img-hi`),E=this.imageTransitions.get(u);this.imageTransitions.delete(u);const x=u.getAttribute("style")||"",p=u.classList.contains("vvw--loaded"),S=u.classList.contains("vvw--ready"),T=u.width,H=u.height;this.imageState.reset(),a.innerHTML="",this.transitionCleanup&&this.transitionCleanup(),o.forEach(b=>{const g=b.querySelector("img.vvw-img-hi");b.dataset.vvwPos==="0"&&!m.aborted&&x&&T&&H&&(p&&(g.classList.add("vvw--loaded"),g.dataset.vvwWidth=u.dataset.vvwWidth||"",g.dataset.vvwHeight=u.dataset.vvwHeight||""),S&&(g.classList.add("vvw--ready"),g.width=T,g.height=H),g.setAttribute("style",x)),a.appendChild(b),b.dataset.vvwPos==="0"&&!m.aborted&&S?(this.imageState.setCurrentImage(g),this.imageState.setInitialCenter()):b.dataset.vvwPos==="0"&&!m.aborted&&x&&T&&H&&p&&E&&(this.imageTransitions.set(g,E),this.transitionImage(g,()=>{this.imageState.setCurrentImage(g),this.imageState.setInitialCenter(),g.classList.add("vvw--ready")}))}),this.isRapidSwap=!1,this.waitForImagesToLoad(),this.options.onImageView&&this.options.onImageView(c)}getChildElements(t,e){const i=[],n=[];for(let o=-t;o<=t;o++){const r=(e+o+this.elements.length)%this.elements.length,a=this.elements[r],h=a instanceof HTMLImageElement?a:a instanceof HTMLAnchorElement&&a.querySelector("img")||void 0,c=a instanceof HTMLElement?{index:r,imageElm:h instanceof HTMLImageElement?h:void 0,anchorElm:a instanceof HTMLAnchorElement?a:void 0,src:a.dataset.vistaviewSrc||a.getAttribute("href")||a.getAttribute("src")||"",thumb:a.dataset.vistaviewThumb||(h instanceof HTMLImageElement?h.getAttribute("src"):void 0)||a.getAttribute("href")||void 0,alt:h instanceof HTMLImageElement&&h.getAttribute("alt")||void 0}:{index:r,...a};n.push(c),i.push(G(c,o))}return{htmls:i,images:n}}zoomIn(){this.throttle.fio(()=>{this.imageState.animateZoom(1.68)},"zoom",222)}zoomOut(){this.throttle.fio(()=>{this.imageState.animateZoom(.68)},"zoom",222)}displayActiveIndex(){var r;const t=this.currentIndex;this.elements instanceof NodeList&&this.elements.forEach((a,h)=>{a.style.opacity="",h===t&&(a.style.opacity="0")});const e=this.qs(".vvw-index"),i=`${t+1}`,n=`${this.elements.length}`;e&&(e.textContent=`${i} / ${n}`);const o=this.qs(".vvw-desc");if(o){const a=(r=this.currentChildren)==null?void 0:r.images.find(c=>c.index===t),h=(a==null?void 0:a.alt)||"";h?(o.textContent=h,o.setAttribute("aria-label",`Image ${i} of ${n}: ${h}`)):(o.textContent="",o.setAttribute("aria-label",`Image ${i} of ${n}`))}}transitionImage(t,e){if(t.classList.contains("vvw--load-cancelled"))return;if(this.isRapidSwap){requestAnimationFrame(()=>{this.transitionImage(t,e)});return}const i=this.imageTransitions.get(t);i&&requestAnimationFrame(()=>{if(t.classList.contains("vvw--load-cancelled"))return;const{current:n,target:o}=i,r={width:n.width+(o.width-n.width)*.2,height:n.height+(o.height-n.height)*.2,radius:n.radius+(o.radius-n.radius)*.2};Math.abs(r.width-o.width)<1&&Math.abs(r.height-o.height)<1&&Math.abs(r.radius-o.radius)<1?(t.style.setProperty("--vvw-current-w",`${o.width}px`),t.style.setProperty("--vvw-current-h",`${o.height}px`),t.style.setProperty("--vvw-current-radius",`${o.radius}px`),this.imageTransitions.delete(t),e()):(t.style.setProperty("--vvw-current-w",`${r.width}px`),t.style.setProperty("--vvw-current-h",`${r.height}px`),t.style.setProperty("--vvw-current-radius",`${r.radius}px`),this.imageTransitions.set(t,{current:r,target:o}),this.transitionImage(t,e))})}waitForImagesToLoad(){this.imageContainer.querySelectorAll("img.vvw-img-hi:not(.vvw--loaded)").forEach(i=>{const n=i;if(n.classList.contains("vvw--load-cancelled"))return;const o=()=>{if(n.classList.contains("vvw--load-cancelled"))return;n.width=n.naturalWidth,n.height=n.naturalHeight;const{width:r,height:a}=F(n);n.dataset.vvwWidth=r.toString(),n.dataset.vvwHeight=a.toString(),n.classList.add("vvw--loaded"),this.imageTransitions.set(n,{current:{width:n.style.getPropertyValue("--vvw-current-w")?parseFloat(n.style.getPropertyValue("--vvw-current-w")):0,height:n.style.getPropertyValue("--vvw-current-h")?parseFloat(n.style.getPropertyValue("--vvw-current-h")):0,radius:n.style.getPropertyValue("--vvw-current-radius")?parseFloat(n.style.getPropertyValue("--vvw-current-radius")):0},target:{width:r,height:a,radius:0}}),this.transitionImage(n,()=>{var c;if(n.classList.contains("vvw--load-cancelled"))return;((c=n.parentElement)==null?void 0:c.matches(`[data-vvw-idx="${this.currentIndex}"][data-vvw-pos="0"]`))&&(this.imageState.setCurrentImage(n),this.imageState.setInitialCenter()),n.classList.add("vvw--ready")})};if(n.complete&&n.naturalWidth!==0){o();return}n.addEventListener("load",()=>{o()}),n.addEventListener("error",()=>{var a;n.classList.add("vvw--loaderror");const r=document.createElement("p");r.className="vvw-img-err",r.setAttribute("role","alert"),r.textContent="Error loading image",(a=n.parentNode)==null||a.appendChild(r)})})}registerPointerListener(t){this.pointerListeners.push(t)}unregisterPointerListeners(){this.pointerListeners=[]}open(t=0){var c,m,f,L,y;if(C.somethingOpened)return;C.somethingOpened=this,this.currentIndex=t,document.body.style.overflow="hidden";const e=J({controls:this.options.controls});if(document.body.prepend(e),this.root=document.body.querySelector("#vvw-root"),!this.root)throw new Error("Failed to setup VistaView root element.");this.imageContainer=this.qs(".vvw-image-container"),this.options.animationDurationBase&&this.root.style.setProperty("--vvw-anim-dur",`${this.options.animationDurationBase}`),this.options.initialZIndex!==void 0&&this.root.style.setProperty("--vvw-init-z",`${this.options.initialZIndex??0}`),this.options.arrowOnSmallScreens&&this.root.classList.add("vvw-arrow-sm");const i=this.options.preloads||0,n=t,{images:o,htmls:r}=this.getChildElements(i,n),a={htmlElements:{from:null,to:r},images:{from:null,to:o},index:{from:null,to:this.currentIndex},via:{next:!1,prev:!1},vistaView:this};this.setupFunction(a),this.currentChildren={htmls:r,images:o},r.forEach(d=>{this.imageContainer.appendChild(d)}),(c=this.qs(".vvw-close"))==null||c.addEventListener("click",()=>this.close()),(m=this.qs(".vvw-zoom-in"))==null||m.addEventListener("click",()=>this.zoomIn()),(f=this.qs(".vvw-zoom-out"))==null||f.addEventListener("click",()=>this.zoomOut()),(L=this.qs(".vvw-prev>button"))==null||L.addEventListener("click",()=>this.prev()),(y=this.qs(".vvw-next>button"))==null||y.addEventListener("click",()=>this.next()),this.options.keyboardListeners&&window.addEventListener("keydown",this.onKeyDown),window.addEventListener("wheel",this.onScroll,{passive:!1}),window.addEventListener("resize",this.onResizeHandler),this.pointers=new tt({elm:this.imageContainer,listeners:[this.getInternalPointerListener()]});const h={};[...this.options.controls.topLeft||[],...this.options.controls.topRight||[],...this.options.controls.topCenter||[],...this.options.controls.bottomCenter||[],...this.options.controls.bottomLeft||[],...this.options.controls.bottomRight||[]].forEach(d=>{typeof d!="string"&&(h[d.name]=d)}),this.root.querySelectorAll("button[data-vvw-control]").forEach(d=>{const u=d;u.addEventListener("click",E=>{const x=E.currentTarget.dataset.vvwControl,p=h[x],S=this.currentChildren.images.find(T=>T.index===this.currentIndex);p&&S&&(p.onClick.constructor.name==="AsyncFunction"?(u.classList.add("vvw--loading"),p.onClick(S,this).finally(()=>{u.classList.remove("vvw--loading")})):p.onClick(S,this))})}),this.initFunction(this),requestAnimationFrame(()=>{var d;(d=this.root)==null||d.addEventListener("transitionend",()=>{var u;(u=this.root)==null||u.classList.add("vvw--settled"),this.imageState.reset(),this.waitForImagesToLoad()},{once:!0}),this.root.classList.add("vvw--active"),this.displayActiveIndex(),this.options.onOpen&&this.options.onOpen(this),this.options.onImageView&&this.options.onImageView(a)})}async close(t=!0){C.somethingOpened===this&&this.root&&(t?await new Promise(e=>{let n=0;this.root.addEventListener("transitionend",o=>{o.target===this.root&&(n++,n===2&&this.elements instanceof NodeList&&this.elements.forEach(r=>{r.style.opacity=""}),n===3&&e(null))}),this.root.classList.add("vvw--closing")}):this.elements instanceof NodeList&&this.elements.forEach(e=>{e.style.opacity=""}),this.options.keyboardListeners&&window.removeEventListener("keydown",this.onKeyDown),window.removeEventListener("resize",this.onResizeHandler),window.removeEventListener("wheel",this.onScroll),this.unregisterPointerListeners(),this.pointers.removeListeners(),this.root.remove(),this.root=null,this.imageContainer=null,this.currentChildren=null,this.currentIndex=-1,document.body.style.overflow="",C.somethingOpened=null,this.closeFunction(this),this.options.onClose&&this.options.onClose(this))}next(){if(C.somethingOpened!==this)return;const t=(this.currentIndex+1)%this.elements.length;this.view(t,{next:!0,prev:!1})}prev(){if(C.somethingOpened!==this)return;const t=(this.currentIndex-1+this.elements.length)%this.elements.length;this.view(t,{next:!1,prev:!0})}destroy(){this.close(!1),this.elements instanceof NodeList&&this.elements.forEach(t=>{t.removeAttribute("data-vista-idx"),t.removeEventListener("click",this.defaultOnClickHandler),t.removeEventListener("pointerup",this.onClickElements)})}getCurrentIndex(){return C.somethingOpened!==this?-1:this.currentIndex}view(t,e){if(C.somethingOpened!==this||t<0||t>=this.elements.length)return;const i=this.currentIndex;this.currentIndex=t;const n=this.abortController;n==null||n.abort(),this.abortController=new AbortController,this.swap(i,e)}}function st(s){let t=null;if(typeof s=="string"?t=document.querySelectorAll(s):s instanceof NodeList&&(t=s),t)for(let e=0;e<t.length;e++){const i=t[e];if(!(i.dataset.vistaviewSrc||i.getAttribute("href")||i.getAttribute("src")||""))return`Element at index ${e} is missing 'src' / 'data-vistaview-src' / 'href' attribute.`}else{const e=s;for(let i=0;i<e.length;i++)if(!e[i].src)return`Element at index ${i} is missing 'src' attribute.`}return t||s}function ot({elements:s,...t}){if(!s)throw new Error("No elements");let e=st(s);if(typeof e=="string")return null;const i=new nt(e,t);return{open:(n=0)=>i.open(n),close:()=>i.close(),next:()=>i.next(),prev:()=>i.prev(),destroy:()=>i.destroy(),getCurrentIndex:()=>i.getCurrentIndex(),view:n=>{i.view(n)}}}v.DefaultOptions=M,v.close=k,v.init=q,v.setup=z,v.transition=O,v.vistaView=ot,v.vistaViewDownload=A,Object.defineProperty(v,Symbol.toStringTag,{value:"Module"})}));
|
|
11
|
+
</div>`)}const M={animationDurationBase:333,maxZoomLevel:2,preloads:1,keyboardListeners:!0,arrowOnSmallScreens:!1,rapidLimit:222,controls:{topLeft:["indexDisplay"],topRight:["zoomIn","zoomOut",A(),"close"],bottomLeft:["description"]}};function z(s){}function k(s){const t=s.options.preloads;s.imageContainer.style.width=`${(t*2+1)*100}vw`,s.imageContainer.style.left=`-${t*100}vw`,s.imageContainer.style.display="flex",Q(s)}function Q(s){let t={x:0,y:0},e={x:0,y:0},i=null;s.registerPointerListener(n=>{var r;if(!n.hasInternalExecution&&!(n.pointers.length>1)){if(n.event==="down"&&(t={x:n.pointer.x,y:n.pointer.y},e={x:n.pointer.x,y:n.pointer.y},(r=n.abortController)==null||r.abort()),n.event==="move"){e={x:n.pointer.x,y:n.pointer.y};const a=e.x-t.x,o=e.y-t.y;if(!i&&Math.abs(o)>Math.abs(a)||i==="y"){const l=o/window.innerHeight*100;s.imageContainer.style.transition="none",s.imageContainer.style.transform=`translateY(${l}vh)`,i="y"}else if(!i&&Math.abs(a)>Math.abs(o)||i==="x"){const l=a/window.innerWidth*100;s.imageContainer.style.transition="none",s.imageContainer.style.transform=`translateX(${l}vw)`,i="x"}}if(n.event==="up"||n.event==="cancel"){let a=function(o){var l;(l=s.imageContainer)==null||l.addEventListener("transitionend",function c(){var d;(d=s.imageContainer)==null||d.removeEventListener("transitionend",c),s.imageContainer.style.transition="",s.imageContainer.style.transform=""}),s.imageContainer.style.transition="transform 222ms ease",s.imageContainer.style.transform=o};if(i==="y"){const o=e.y-t.y;Math.abs(o)>144?(s.imageContainer.style.transition="transform 222ms ease",s.imageContainer.style.transform="translateY(0vh)",s.close()):a("translateY(0vh)")}if(i==="x"){const o=e.x-t.x,l=n.pointer.movementX,c=1;s.imageContainer.style.transition="",o>0&&Math.abs(l)>c?s.prev():o<0&&Math.abs(l)>c?s.next():a("translateX(0vw)")}i=null,t={x:0,y:0},e={x:0,y:0}}}})}function q(s){}function O({vistaView:{isReducedMotion:s},htmlElements:{to:t},index:{from:e,to:i},vistaView:{elements:n,imageContainer:r,options:a}},o){if(!(!t||o.aborted||s||!(Math.abs(i-e)===1||e===0&&i===n.length-1||e===n.length-1&&i===0)))return{cleanup:()=>{r.style.transition="",r.style.transform=""},transitionEnded:new Promise(c=>{r.addEventListener("transitionend",()=>{c()},{once:!0}),r.addEventListener("transitioncancel",()=>{o.aborted&&c()},{once:!0});const d=Math.round(a.animationDurationBase*100)/100,f=i===e+1||e===n.length-1&&i===0?"translateX(-100vw)":"translateX(100vw)";r.style.transition=`transform ${d}ms ease`,r.style.transform=f})}}class tt{constructor({elm:t,listeners:e}){h(this,"pointers",[]);h(this,"elm");h(this,"listeners",[]);h(this,"lastPointerDownId",null);h(this,"removeLastPointer",()=>{if(this.pointers.length&&this.lastPointerDownId!==null){const t=this.pointers.findIndex(e=>e.id===this.lastPointerDownId);t!==-1&&this.pointers.splice(t,1)}});h(this,"onPointerDown",t=>{if(!this.listeners.length||t.button!==0)return;t.preventDefault(),this.lastPointerDownId=t.pointerId,window.addEventListener("contextmenu",this.removeLastPointer,{once:!0}),window.addEventListener("auxclick",this.removeLastPointer,{once:!0});let e={x:t.clientX,y:t.clientY,movementX:0,movementY:0,id:t.pointerId};this.pointers.push(e),this.listeners.forEach(i=>i({event:"down",pointer:e,pointers:this.pointers,lastPointerLen:this.pointers.length-1}))});h(this,"onPointerMove",t=>{if(!this.listeners.length)return;t.preventDefault();const e=this.pointers.find(i=>i.id===t.pointerId);e&&(e.movementX=t.movementX,e.movementY=t.movementY,e.x=t.clientX,e.y=t.clientY,this.listeners.forEach(i=>i({event:"move",pointer:e,pointers:this.pointers,lastPointerLen:this.pointers.length-1})))});h(this,"onPointerUp",t=>{if(!this.listeners.length||t.button!==0||(window.removeEventListener("contextmenu",this.removeLastPointer),window.removeEventListener("auxclick",this.removeLastPointer),t.target instanceof Node&&!this.elm.contains(t.target)&&t.target!==document.querySelector("html")&&t.target!==document))return;t.preventDefault();const e=this.pointers.findIndex(r=>r.id===t.pointerId);if(e===-1)return;const i=this.pointers[e];i.x=t.clientX,i.y=t.clientY;const n=this.pointers.length;this.pointers.splice(e,1),this.listeners.forEach(r=>r({event:"up",pointer:i,pointers:this.pointers,lastPointerLen:n}))});h(this,"onPointerCancel",t=>{if(!this.listeners.length||t.target instanceof Node&&!this.elm.contains(t.target)&&t.target!==document.querySelector("html")&&t.target!==document)return;t.preventDefault();const e=this.pointers.findIndex(r=>r.id===t.pointerId);if(e===-1)return;const i=this.pointers[e];i.x=t.clientX,i.y=t.clientY;const n=this.pointers.length;this.pointers.splice(e,1),this.listeners.forEach(r=>r({event:"cancel",pointer:i,pointers:this.pointers,lastPointerLen:n}))});this.elm=t??document,e&&(this.listeners=e),this.startListeners()}startListeners(){this.elm.addEventListener("pointerdown",this.onPointerDown),this.elm.addEventListener("pointermove",this.onPointerMove),document.addEventListener("pointerup",this.onPointerUp),document.addEventListener("pointercancel",this.onPointerCancel)}removeListeners(){this.elm.removeEventListener("pointerdown",this.onPointerDown),this.elm.removeEventListener("pointermove",this.onPointerMove),document.removeEventListener("pointerup",this.onPointerUp),document.removeEventListener("pointercancel",this.onPointerCancel),this.pointers=[]}addEventListener(t){this.listeners.push(t)}removeEventListener(t){this.listeners=this.listeners.filter(e=>e!==t)}getPointerDistance(t,e){const i=t.x-e.x,n=t.y-e.y;return Math.sqrt(i*i+n*n)}getCentroid(){if(this.pointers.length===0)return null;const t=this.pointers.reduce((e,i)=>(e.x+=i.x,e.y+=i.y,e),{x:0,y:0});return{x:t.x/this.pointers.length,y:t.y/this.pointers.length}}}class et{constructor(t,e){h(this,"maxZoomLevel");h(this,"image",null);h(this,"rect",null);h(this,"initialCenter",{x:0,y:0});h(this,"maxDimension",{width:0});h(this,"minDimension",{initialWidth:0,initialHeight:0,minWidth:0,closingWidth:0});h(this,"accumulatedTranslate",{x:0,y:0});h(this,"scale",1);h(this,"translate",{x:0,y:0});h(this,"onScale",null);h(this,"animationTimestamp",0);this.maxZoomLevel=t,this.onScale=e}clean(){this.image&&(this.image.style.transform="",this.image.style.width="",this.image.style.height="",this.image.style.top="",this.image.style.left="",this.image.style.opacity="")}reset(){this.clean(),this.image=null,this.rect=null,this.initialCenter={x:window.innerWidth/2,y:window.innerHeight/2},this.maxDimension={width:0},this.minDimension={initialWidth:0,initialHeight:0,minWidth:0,closingWidth:0},this.accumulatedTranslate={x:0,y:0},this.scale=1,this.translate={x:0,y:0}}setCurrentImage(t){if(this.rect=null,this.image=t,this.maxDimension={width:t.naturalWidth*this.maxZoomLevel},!t.dataset.vvwWidth||!t.dataset.vvwHeight)throw new Error("VistaImageState: Image dataset vvwWidth or vvwHeight not set.");const e=parseFloat(t.dataset.vvwWidth),i=parseFloat(t.dataset.vvwHeight);this.minDimension={initialWidth:e,initialHeight:i,minWidth:e*.1,closingWidth:e*.5},this.accumulatedTranslate={x:0,y:0}}setInitialCenter(t){this.initialCenter=t||{x:window.innerWidth/2,y:window.innerHeight/2}}move(t){this.image&&(this.rect||(this.rect=this.image.getBoundingClientRect()),this.translate.x=I(t.x-this.initialCenter.x),this.translate.y=I(t.y-this.initialCenter.y),this.image.style.transform=`translate3d(${this.translate.x}px, ${this.translate.y}px, 0px) scale(${this.scale})`)}snapToTargetIfClose(t,e,i=1){return Math.abs(t-e)<=i&&(t=e),t}scaleMove(t,e){if(!this.image)return;this.rect||(this.rect=this.image.getBoundingClientRect()),e||(e=this.initialCenter);const i=this.snapToTargetIfClose(N(this.rect.width*t,this.minDimension.minWidth,this.maxDimension.width),this.minDimension.initialWidth);this.onScale&&this.onScale({scale:i/(this.maxDimension.width/this.maxZoomLevel),isMax:i>=this.maxDimension.width,isMin:i<=this.minDimension.initialWidth}),this.scale=I(i/this.rect.width);const n=this.rect.left+this.rect.width/2,r=this.rect.top+this.rect.height/2,a=this.initialCenter.x-n,o=this.initialCenter.y-r,l=a*(1-this.scale),c=o*(1-this.scale),d=e.x-this.initialCenter.x,f=e.y-this.initialCenter.y;this.translate.x=I(l+d),this.translate.y=I(c+f),this.image.style.transform=`translate3d(${this.translate.x}px, ${this.translate.y}px, 0px) scale(${this.scale})`,i<=this.minDimension.closingWidth?this.image.style.opacity="0.5":this.image.style.opacity=""}moveAndNormalize(t){let e=0,i=!1;const n=({x:r,y:a})=>{if(i)return;if(Math.abs(r)<.001&&Math.abs(a)<.001)return this.normalize();r*=.9,a*=.9;const o=this.image.getBoundingClientRect();this.translate.x=I(this.translate.x+r),this.translate.y=I(this.translate.y+a),o.right<window.innerWidth/2&&(this.translate.x+=(window.innerWidth/2-o.right)*.1,r*=.7),o.left>window.innerWidth/2&&(this.translate.x-=(o.left-window.innerWidth/2)*.1,r*=.7),o.bottom<window.innerHeight/2&&(this.translate.y+=(window.innerHeight/2-o.bottom)*.1,a*=.7),o.top>window.innerHeight/2&&(this.translate.y-=(o.top-window.innerHeight/2)*.1,a*=.7),this.image.style.transform=`translate3d(${this.translate.x}px, ${this.translate.y}px, 0px) scale(${this.scale})`,e=requestAnimationFrame(()=>n({x:r,y:a}))};return n({x:t.movementX,y:t.movementY}),()=>{i=!0,cancelAnimationFrame(e),this.normalize(!1)}}animateZoom(t){if(!this.image)return;this.rect||(this.rect=this.image.getBoundingClientRect());const e=Date.now(),i=this.image;this.rect.width*t<this.minDimension.closingWidth||i.width<Math.floor(this.minDimension.initialWidth)||(i.addEventListener("transitionend",()=>{this.animationTimestamp===e&&i&&(i.style.transition="",this.normalize())},{once:!0}),i.style.transition||(i.style.transition="all 222ms ease"),this.animationTimestamp=e,this.scaleMove(t))}normalize(t=!0){if(!this.image||!this.rect)return;const e=this.rect.width*this.scale,i=e<=this.minDimension.closingWidth,n=i?e:this.snapToTargetIfClose(this.rect.width*this.scale,this.minDimension.initialWidth),r=i?this.rect.height*this.scale:this.snapToTargetIfClose(this.rect.height*this.scale,this.minDimension.initialHeight);if(this.image.style.width=`${n}px`,this.image.style.height=`${r}px`,this.scale=1,this.image.style.opacity="",this.accumulatedTranslate.x+=this.translate.x,this.accumulatedTranslate.y+=this.translate.y,this.image.style.left=`calc(50% + ${this.accumulatedTranslate.x}px)`,this.image.style.top=`calc(50% + ${this.accumulatedTranslate.y}px)`,this.translate={x:0,y:0},this.image.style.transform="",this.rect=this.image.getBoundingClientRect(),i)return!0;if(n<this.minDimension.initialWidth)this.accumulatedTranslate.x=0,this.accumulatedTranslate.y=0,requestAnimationFrame(()=>{const a=this.image;a&&(a.addEventListener("transitionend",()=>{a&&(this.clean(),this.rect=null)},{once:!0}),a.style.transition="all 222ms ease",a.style.width=`${this.minDimension.initialWidth}px`,a.style.height=`${this.minDimension.initialHeight}px`,a.style.left="50%",a.style.top="50%")});else if(t){let a=!1;if(this.rect.right<window.innerWidth/2&&(a=!0,this.accumulatedTranslate.x+=window.innerWidth/2-this.rect.right),this.rect.left>window.innerWidth/2&&(a=!0,this.accumulatedTranslate.x-=this.rect.left-window.innerWidth/2),this.rect.bottom<window.innerHeight/2&&(a=!0,this.accumulatedTranslate.y+=window.innerHeight/2-this.rect.bottom),this.rect.top>window.innerHeight/2&&(a=!0,this.accumulatedTranslate.y-=this.rect.top-window.innerHeight/2),a){const o=this.image;o.addEventListener("transitionend",()=>{o&&(o.style.transition="",this.rect=null)},{once:!0}),o.style.transition="all 222ms ease",o.style.left=`calc(50% + ${this.accumulatedTranslate.x}px)`,o.style.top=`calc(50% + ${this.accumulatedTranslate.y}px)`}else this.rect=null}}}class it{constructor(){h(this,"fiolast",{})}fio(t,e,i=50){const r=Date.now()-(this.fiolast[e]??0),a=()=>{this.fiolast[e]=Date.now(),t()};if(!this.fiolast[e]){a();return}r>=i&&a()}}const C={somethingOpened:null};class nt{constructor(t,e={}){h(this,"options");h(this,"elements");h(this,"isReducedMotion");h(this,"currentIndex",-1);h(this,"currentChildren",null);h(this,"setupFunction",z);h(this,"initFunction",k);h(this,"closeFunction",q);h(this,"transitionFunction",O);h(this,"pointers",null);h(this,"imageState");h(this,"imageTransitions",new Map);h(this,"root",null);h(this,"imageContainer",null);h(this,"onClickElements",t=>{t.preventDefault();const e=t.currentTarget;e.dataset.vistaIdx&&this.open(parseInt(e.dataset.vistaIdx))});h(this,"defaultOnClickHandler",t=>t.preventDefault());h(this,"abortController",null);h(this,"throttle",new it);h(this,"lastSwapTime",0);h(this,"isRapidSwap",!1);h(this,"isRapidSwapRelease",0);h(this,"transitionCleanup",null);h(this,"isZoomedIn",!1);h(this,"onKeyDown",t=>{switch(t.key){case"ArrowLeft":t.preventDefault(),this.prev();break;case"ArrowRight":t.preventDefault(),this.next();break;case"ArrowUp":t.preventDefault(),this.zoomIn();break;case"ArrowDown":t.preventDefault(),this.zoomOut();break;case"Escape":t.preventDefault(),this.close();break}});h(this,"onScroll",t=>{t.preventDefault();const e=t.deltaY;this.imageState.setInitialCenter({x:t.clientX,y:t.clientY}),e<0?this.zoomIn():e>0&&this.zoomOut()});h(this,"onResizeHandler",()=>{this.currentChildren.htmls.forEach((t,e)=>{const i=this.currentChildren.images[e],n=t.querySelector("img.vvw-img-hi"),r=t.querySelector("img.vvw-img-lo");if(P(i,n,r,!1),n.classList.contains("vvw--loaded")){const{width:a,height:o}=F(n);n.style.setProperty("--vvw-current-w",`${a}px`),n.style.setProperty("--vvw-current-h",`${o}px`),n.dataset.vvwWidth=a.toString(),n.dataset.vvwHeight=o.toString()}})});h(this,"pointerListeners",[]);h(this,"getInternalPointerListener",()=>{const t=this.imageState;let e=0,i=!1,n=0;const r=33;let a=()=>{};function o(){return i||performance.now()-n<r}return l=>{if(l.event==="down"){if(a(),this.isZoomedIn&&l.pointers.length===1&&!o()){const c=this.pointers.getCentroid();t.setInitialCenter(c)}if(l.pointers.length>=2){i=!0;const c=this.pointers.getCentroid();e=this.pointers.getPointerDistance(l.pointers[0],l.pointers[1]),t.setInitialCenter(c)}}else if(l.event==="move"){if(this.isZoomedIn&&l.pointers.length===1&&l.lastPointerLen===0&&!o()){const c=this.pointers.getCentroid();t.move(c)}if(l.pointers.length>=2&&i){const c=this.pointers.getCentroid(),d=this.pointers.getPointerDistance(l.pointers[0],l.pointers[1]);t.scaleMove(d/e,c)}}else(l.event==="up"||l.event==="cancel")&&(i||this.isZoomedIn)&&(i?(n=performance.now(),i=!1,t.normalize()&&requestAnimationFrame(()=>{this.close()})):this.isZoomedIn&&l.pointers.length===0&&!o()&&(a=t.moveAndNormalize(l.pointer)));this.pointerListeners.forEach(c=>c({...l,hasInternalExecution:this.isZoomedIn||o(),abortController:this.abortController}))}});this.elements=t,this.options={...M,...e,controls:{...M.controls,...e.controls}},this.imageState=new et(this.options.maxZoomLevel,i=>{var n,r,a,o;i.isMin?(this.isZoomedIn=!1,(n=this.qs(".vvw-zoom-out"))==null||n.setAttribute("disabled","true")):(this.isZoomedIn=!0,(r=this.qs(".vvw-zoom-out"))==null||r.removeAttribute("disabled")),i.isMax?(a=this.qs(".vvw-zoom-in"))==null||a.setAttribute("disabled","true"):(o=this.qs(".vvw-zoom-in"))==null||o.removeAttribute("disabled")}),this.options.setupFunction&&(this.setupFunction=this.options.setupFunction),this.options.closeFunction&&(this.closeFunction=this.options.closeFunction),this.options.initFunction&&(this.initFunction=this.options.initFunction),this.options.transitionFunction&&(this.transitionFunction=this.options.transitionFunction),this.isReducedMotion=window.matchMedia("(prefers-reduced-motion: reduce)").matches,this.elements instanceof NodeList&&this.elements.forEach((i,n)=>{i.dataset.vistaIdx=n.toString(),i.addEventListener("click",this.defaultOnClickHandler),i.addEventListener("pointerup",this.onClickElements)})}qs(t){return this.root?this.root.querySelector(t):null}async swap(t,e){const i=this.options.preloads||0,n=this.currentIndex,{htmls:r,images:a}=this.getChildElements(i,n),o=this.imageContainer,l=this.currentChildren,c={htmlElements:{from:l.htmls,to:r},images:{from:l.images,to:a},index:{from:t,to:this.currentIndex},via:e||{next:!1,prev:!1},vistaView:this};this.setupFunction(c),this.currentChildren={htmls:r,images:a},this.displayActiveIndex();const d=this.abortController.signal,L=performance.now()-this.lastSwapTime<this.options.rapidLimit;if(this.isRapidSwap=L,o.querySelectorAll(".vvw-item img.vvw-img-hi").forEach(b=>b.classList.add("vvw--load-cancelled")),L){this.imageState.reset(),o.innerHTML="",this.transitionCleanup&&this.transitionCleanup(),r.forEach(b=>{o.appendChild(b)}),this.lastSwapTime=performance.now(),this.waitForImagesToLoad(),this.options.onImageView&&this.options.onImageView(c),this.isRapidSwapRelease&&clearTimeout(this.isRapidSwapRelease),this.isRapidSwapRelease=setTimeout(()=>{this.isRapidSwap=!1},333);return}const y=this.transitionFunction(c,d);y&&(this.transitionCleanup=y.cleanup,await y.transitionEnded),this.lastSwapTime=performance.now();const m=r[Math.floor(r.length/2)].dataset.vvwIdx,u=o.querySelector(`.vvw-item[data-vvw-idx="${m}"] img.vvw-img-hi`),E=this.imageTransitions.get(u);this.imageTransitions.delete(u);const x=u.getAttribute("style")||"",p=u.classList.contains("vvw--loaded"),S=u.classList.contains("vvw--ready"),T=u.width,H=u.height;this.imageState.reset(),o.innerHTML="",this.transitionCleanup&&this.transitionCleanup(),r.forEach(b=>{const g=b.querySelector("img.vvw-img-hi");b.dataset.vvwPos==="0"&&!d.aborted&&x&&T&&H&&(p&&(g.classList.add("vvw--loaded"),g.dataset.vvwWidth=u.dataset.vvwWidth||"",g.dataset.vvwHeight=u.dataset.vvwHeight||""),S&&(g.classList.add("vvw--ready"),g.width=T,g.height=H),g.setAttribute("style",x)),o.appendChild(b),b.dataset.vvwPos==="0"&&!d.aborted&&S?(this.imageState.setCurrentImage(g),this.imageState.setInitialCenter()):b.dataset.vvwPos==="0"&&!d.aborted&&x&&T&&H&&p&&E&&(this.imageTransitions.set(g,E),this.transitionImage(g,()=>{this.imageState.setCurrentImage(g),this.imageState.setInitialCenter(),g.classList.add("vvw--ready")}))}),this.isRapidSwap=!1,this.waitForImagesToLoad(),this.options.onImageView&&this.options.onImageView(c)}getChildElements(t,e){const i=[],n=[];for(let r=-t;r<=t;r++){const a=(e+r+this.elements.length)%this.elements.length,o=this.elements[a],l=o instanceof HTMLImageElement?o:o instanceof HTMLAnchorElement&&o.querySelector("img")||void 0,c=o instanceof HTMLElement?{index:a,imageElm:l instanceof HTMLImageElement?l:void 0,anchorElm:o instanceof HTMLAnchorElement?o:void 0,src:o.dataset.vistaviewSrc||o.getAttribute("href")||o.getAttribute("src")||"",thumb:o.dataset.vistaviewThumb||(l instanceof HTMLImageElement?l.getAttribute("src"):void 0)||o.getAttribute("href")||void 0,alt:l instanceof HTMLImageElement&&l.getAttribute("alt")||void 0}:{index:a,...o};n.push(c),i.push(G(c,r))}return{htmls:i,images:n}}zoomIn(){this.throttle.fio(()=>{this.imageState.animateZoom(1.68)},"zoom",222)}zoomOut(){this.throttle.fio(()=>{this.imageState.animateZoom(.68)},"zoom",222)}displayActiveIndex(){var a;const t=this.currentIndex;this.elements instanceof NodeList&&this.elements.forEach((o,l)=>{o.style.opacity="",l===t&&(o.style.opacity="0")});const e=this.qs(".vvw-index"),i=`${t+1}`,n=`${this.elements.length}`;e&&(e.textContent=`${i} / ${n}`);const r=this.qs(".vvw-desc");if(r){const o=(a=this.currentChildren)==null?void 0:a.images.find(c=>c.index===t),l=(o==null?void 0:o.alt)||"";l?(r.textContent=l,r.setAttribute("aria-label",`Image ${i} of ${n}: ${l}`)):(r.textContent="",r.setAttribute("aria-label",`Image ${i} of ${n}`))}}transitionImage(t,e){if(t.classList.contains("vvw--load-cancelled"))return;if(this.isRapidSwap){requestAnimationFrame(()=>{this.transitionImage(t,e)});return}const i=this.imageTransitions.get(t);i&&requestAnimationFrame(()=>{if(t.classList.contains("vvw--load-cancelled"))return;const{current:n,target:r}=i,a={width:n.width+(r.width-n.width)*.2,height:n.height+(r.height-n.height)*.2,radius:n.radius+(r.radius-n.radius)*.2};Math.abs(a.width-r.width)<1&&Math.abs(a.height-r.height)<1&&Math.abs(a.radius-r.radius)<1?(t.style.setProperty("--vvw-current-w",`${r.width}px`),t.style.setProperty("--vvw-current-h",`${r.height}px`),t.style.setProperty("--vvw-current-radius",`${r.radius}px`),this.imageTransitions.delete(t),e()):(t.style.setProperty("--vvw-current-w",`${a.width}px`),t.style.setProperty("--vvw-current-h",`${a.height}px`),t.style.setProperty("--vvw-current-radius",`${a.radius}px`),this.imageTransitions.set(t,{current:a,target:r}),this.transitionImage(t,e))})}waitForImagesToLoad(){this.imageContainer.querySelectorAll("img.vvw-img-hi:not(.vvw--loaded)").forEach(i=>{const n=i;if(n.classList.contains("vvw--load-cancelled"))return;const r=()=>{if(n.classList.contains("vvw--load-cancelled"))return;n.width=n.naturalWidth,n.height=n.naturalHeight;const{width:a,height:o}=F(n);n.dataset.vvwWidth=a.toString(),n.dataset.vvwHeight=o.toString(),n.classList.add("vvw--loaded"),this.imageTransitions.set(n,{current:{width:n.style.getPropertyValue("--vvw-current-w")?parseFloat(n.style.getPropertyValue("--vvw-current-w")):0,height:n.style.getPropertyValue("--vvw-current-h")?parseFloat(n.style.getPropertyValue("--vvw-current-h")):0,radius:n.style.getPropertyValue("--vvw-current-radius")?parseFloat(n.style.getPropertyValue("--vvw-current-radius")):0},target:{width:a,height:o,radius:0}}),this.transitionImage(n,()=>{var c;if(n.classList.contains("vvw--load-cancelled"))return;((c=n.parentElement)==null?void 0:c.matches(`[data-vvw-idx="${this.currentIndex}"][data-vvw-pos="0"]`))&&(this.imageState.setCurrentImage(n),this.imageState.setInitialCenter()),n.classList.add("vvw--ready")})};if(n.complete&&n.naturalWidth!==0){r();return}n.addEventListener("load",()=>{r()}),n.addEventListener("error",()=>{var o;n.classList.add("vvw--loaderror");const a=document.createElement("p");a.className="vvw-img-err",a.setAttribute("role","alert"),a.textContent="Error loading image",(o=n.parentNode)==null||o.appendChild(a)})})}registerPointerListener(t){this.pointerListeners.push(t)}unregisterPointerListeners(){this.pointerListeners=[]}open(t=0){var c,d,f,L,y;if(C.somethingOpened)return;C.somethingOpened=this,this.currentIndex=t,document.body.style.overflow="hidden";const e=J({controls:this.options.controls});if(document.body.prepend(e),this.root=document.body.querySelector("#vvw-root"),!this.root)throw new Error("Failed to setup VistaView root element.");this.imageContainer=this.qs(".vvw-image-container"),this.options.animationDurationBase&&this.root.style.setProperty("--vvw-anim-dur",`${this.options.animationDurationBase}`),this.options.initialZIndex!==void 0&&this.root.style.setProperty("--vvw-init-z",`${this.options.initialZIndex??0}`),this.options.arrowOnSmallScreens&&this.root.classList.add("vvw-arrow-sm");const i=this.options.preloads||0,n=t,{images:r,htmls:a}=this.getChildElements(i,n),o={htmlElements:{from:null,to:a},images:{from:null,to:r},index:{from:null,to:this.currentIndex},via:{next:!1,prev:!1},vistaView:this};this.setupFunction(o),this.currentChildren={htmls:a,images:r},a.forEach(m=>{this.imageContainer.appendChild(m)}),(c=this.qs(".vvw-close"))==null||c.addEventListener("click",()=>this.close()),(d=this.qs(".vvw-zoom-in"))==null||d.addEventListener("click",()=>this.zoomIn()),(f=this.qs(".vvw-zoom-out"))==null||f.addEventListener("click",()=>this.zoomOut()),(L=this.qs(".vvw-prev>button"))==null||L.addEventListener("click",()=>this.prev()),(y=this.qs(".vvw-next>button"))==null||y.addEventListener("click",()=>this.next()),this.options.keyboardListeners&&window.addEventListener("keydown",this.onKeyDown),window.addEventListener("wheel",this.onScroll,{passive:!1}),window.addEventListener("resize",this.onResizeHandler),this.pointers=new tt({elm:this.imageContainer,listeners:[this.getInternalPointerListener()]});const l={};[...this.options.controls.topLeft||[],...this.options.controls.topRight||[],...this.options.controls.topCenter||[],...this.options.controls.bottomCenter||[],...this.options.controls.bottomLeft||[],...this.options.controls.bottomRight||[]].forEach(m=>{typeof m!="string"&&(l[m.name]=m)}),this.root.querySelectorAll("button[data-vvw-control]").forEach(m=>{const u=m;u.addEventListener("click",E=>{const x=E.currentTarget.dataset.vvwControl,p=l[x],S=this.currentChildren.images.find(T=>T.index===this.currentIndex);p&&S&&(p.onClick.constructor.name==="AsyncFunction"?(u.classList.add("vvw--loading"),p.onClick(S,this).finally(()=>{u.classList.remove("vvw--loading")})):p.onClick(S,this))})}),this.initFunction(this),requestAnimationFrame(()=>{var m;(m=this.root)==null||m.addEventListener("transitionend",()=>{var u;(u=this.root)==null||u.classList.add("vvw--settled"),this.imageState.reset(),this.waitForImagesToLoad()},{once:!0}),this.root.classList.add("vvw--active"),this.displayActiveIndex(),this.options.onOpen&&this.options.onOpen(this),this.options.onImageView&&this.options.onImageView(o)})}async close(t=!0){C.somethingOpened===this&&this.root&&(t?await new Promise(e=>{let n=0;this.root.addEventListener("transitionend",r=>{r.target===this.root&&(n++,n===2&&this.elements instanceof NodeList&&this.elements.forEach(a=>{a.style.opacity=""}),n===3&&e(null))}),this.root.classList.add("vvw--closing")}):this.elements instanceof NodeList&&this.elements.forEach(e=>{e.style.opacity=""}),this.options.keyboardListeners&&window.removeEventListener("keydown",this.onKeyDown),window.removeEventListener("resize",this.onResizeHandler),window.removeEventListener("wheel",this.onScroll),this.unregisterPointerListeners(),this.pointers.removeListeners(),this.root.remove(),this.root=null,this.imageContainer=null,this.currentChildren=null,this.currentIndex=-1,document.body.style.overflow="",C.somethingOpened=null,this.closeFunction(this),this.options.onClose&&this.options.onClose(this))}next(){if(C.somethingOpened!==this)return;const t=(this.currentIndex+1)%this.elements.length;this.view(t,{next:!0,prev:!1})}prev(){if(C.somethingOpened!==this)return;const t=(this.currentIndex-1+this.elements.length)%this.elements.length;this.view(t,{next:!1,prev:!0})}destroy(){this.close(!1),this.elements instanceof NodeList&&this.elements.forEach(t=>{t.removeAttribute("data-vista-idx"),t.removeEventListener("click",this.defaultOnClickHandler),t.removeEventListener("pointerup",this.onClickElements)})}getCurrentIndex(){return C.somethingOpened!==this?-1:this.currentIndex}view(t,e){if(C.somethingOpened!==this||t<0||t>=this.elements.length)return;const i=this.currentIndex;this.currentIndex=t;const n=this.abortController;n==null||n.abort(),this.abortController=new AbortController,this.swap(i,e)}}function st(s){let t=null;if(typeof s=="string"?t=document.querySelectorAll(s):s instanceof NodeList&&(t=s),t)for(let e=0;e<t.length;e++){const i=t[e];if(!(i.dataset.vistaviewSrc||i.getAttribute("href")||i.getAttribute("src")||""))return`Element at index ${e} is missing 'src' / 'data-vistaview-src' / 'href' attribute.`}else{const e=s;for(let i=0;i<e.length;i++)if(!e[i].src)return`Element at index ${i} is missing 'src' attribute.`}return t||s}function ot({elements:s,...t}){if(!s)throw new Error("No elements");let e=st(s);if(typeof e=="string")return null;const i=new nt(e,t);return{open:(n=0)=>i.open(n),close:()=>i.close(),next:()=>i.next(),prev:()=>i.prev(),destroy:()=>i.destroy(),getCurrentIndex:()=>i.getCurrentIndex(),view:n=>{i.view(n)}}}v.DefaultOptions=M,v.close=q,v.init=k,v.setup=z,v.transition=O,v.vistaView=ot,v.vistaViewDownload=A,Object.defineProperty(v,Symbol.toStringTag,{value:"Module"})}));
|