vistaview 0.6.1 → 0.6.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../src/lib/components.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAoB,eAAe,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AA4CxF,wBAAgB,iBAAiB,IAAI,eAAe,CAgBnD;AAuBD,wBAAgB,aAAa,CAAC,EAAE,EAAE,WAAW,EAAE,eAAe,CAAC,EAAE,MAAM,GAAG,cAAc,
|
|
1
|
+
{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../src/lib/components.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAoB,eAAe,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AA4CxF,wBAAgB,iBAAiB,IAAI,eAAe,CAgBnD;AAuBD,wBAAgB,aAAa,CAAC,EAAE,EAAE,WAAW,EAAE,eAAe,CAAC,EAAE,MAAM,GAAG,cAAc,CAmBvF;AAED,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC;CAChC,GAAG,gBAAgB,CAkBnB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image-state.d.ts","sourceRoot":"","sources":["../../src/lib/image-state.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAG5C,MAAM,MAAM,0BAA0B,GAAG;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,qBAAa,eAAe;IAC1B,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,KAAK,CAAiC;IAC9C,OAAO,CAAC,IAAI,CAAwB;IACpC,OAAO,CAAC,aAAa,CAA4C;IACjE,OAAO,CAAC,YAAY,CAAgB;IACpC,OAAO,CAAC,YAAY,CAAuE;IAC3F,OAAO,CAAC,oBAAoB,CAAkB;IAG9C,OAAO,CAAC,KAAK,CAAa;IAC1B,OAAO,CAAC,SAAS,CAAkB;IACnC,OAAO,CAAC,OAAO,CAA4D;gBAE/D,YAAY,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,GAAG,EAAE,0BAA0B,KAAK,IAAI;IAKpF,KAAK;IAUL,KAAK;IAYL,eAAe,CAAC,KAAK,EAAE,gBAAgB;IAsBvC,gBAAgB,CAAC,MAAM,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE;IAIlD,IAAI,CAAC,MAAM,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE;IAcrC,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE;
|
|
1
|
+
{"version":3,"file":"image-state.d.ts","sourceRoot":"","sources":["../../src/lib/image-state.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAG5C,MAAM,MAAM,0BAA0B,GAAG;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,qBAAa,eAAe;IAC1B,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,KAAK,CAAiC;IAC9C,OAAO,CAAC,IAAI,CAAwB;IACpC,OAAO,CAAC,aAAa,CAA4C;IACjE,OAAO,CAAC,YAAY,CAAgB;IACpC,OAAO,CAAC,YAAY,CAAuE;IAC3F,OAAO,CAAC,oBAAoB,CAAkB;IAG9C,OAAO,CAAC,KAAK,CAAa;IAC1B,OAAO,CAAC,SAAS,CAAkB;IACnC,OAAO,CAAC,OAAO,CAA4D;gBAE/D,YAAY,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,GAAG,EAAE,0BAA0B,KAAK,IAAI;IAKpF,KAAK;IAUL,KAAK;IAYL,eAAe,CAAC,KAAK,EAAE,gBAAgB;IAsBvC,gBAAgB,CAAC,MAAM,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE;IAIlD,IAAI,CAAC,MAAM,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE;IAcrC,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE;IA2D1D,gBAAgB,CAAC,OAAO,EAAE,YAAY,GAAG,MAAM,IAAI;IAqDnD,OAAO,CAAC,kBAAkB,CAAa;IACvC,WAAW,CAAC,WAAW,EAAE,MAAM;IA+B/B,SAAS,CAAC,UAAU,GAAE,OAAc,GAAG,OAAO,GAAG,IAAI;CAmGtD"}
|
|
@@ -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;IAEpC,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;IAsElF,OAAO,CAAC,YAAY,CAAK;YACX,IAAI;IAmFlB,OAAO,CAAC,gBAAgB;IAkDxB,UAAU,EAAE,OAAO,CAAS;IAC5B,OAAO,CAAC,MAAM;IASd,OAAO,CAAC,OAAO;IAUf,OAAO,CAAC,kBAAkB;IAmC1B,OAAO,CAAC,mBAAmB;
|
|
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;IAEpC,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;IAsElF,OAAO,CAAC,YAAY,CAAK;YACX,IAAI;IAmFlB,OAAO,CAAC,gBAAgB;IAkDxB,UAAU,EAAE,OAAO,CAAS;IAC5B,OAAO,CAAC,MAAM;IASd,OAAO,CAAC,OAAO;IAUf,OAAO,CAAC,kBAAkB;IAmC1B,OAAO,CAAC,mBAAmB;IAwD3B,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,CAuDhC;IAGF,IAAI,CAAC,UAAU,GAAE,MAAU,GAAG,IAAI;IA+I5B,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
|
@@ -4,28 +4,28 @@ var l = (s, t, e) => z(s, typeof t != "symbol" ? t + "" : t, e);
|
|
|
4
4
|
function $(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
|
-
function
|
|
8
|
-
const e = window.getComputedStyle(s).objectFit || "", { width:
|
|
7
|
+
function A(s) {
|
|
8
|
+
const e = window.getComputedStyle(s).objectFit || "", { width: n, height: i } = s.getBoundingClientRect(), o = s.naturalWidth, a = s.naturalHeight;
|
|
9
9
|
if (!e)
|
|
10
|
-
return { width:
|
|
10
|
+
return { width: n, height: i };
|
|
11
11
|
if (!o || !a)
|
|
12
|
-
return { width:
|
|
13
|
-
const r = o / a, h =
|
|
12
|
+
return { width: n, height: i };
|
|
13
|
+
const r = o / a, h = n / i;
|
|
14
14
|
switch (e) {
|
|
15
15
|
case "fill":
|
|
16
|
-
return { width:
|
|
16
|
+
return { width: n, height: i };
|
|
17
17
|
case "none":
|
|
18
18
|
return { width: o, height: a };
|
|
19
19
|
case "contain":
|
|
20
|
-
return r > h ? { width:
|
|
20
|
+
return r > h ? { width: n, height: n / r } : { width: i * r, height: i };
|
|
21
21
|
case "cover":
|
|
22
|
-
return r < h ? { width:
|
|
22
|
+
return r < h ? { width: n, height: n / r } : { width: i * r, height: i };
|
|
23
23
|
case "scale-down": {
|
|
24
|
-
const c = { width: o, height: a }, m = r > h ? { width:
|
|
24
|
+
const c = { width: o, height: a }, m = r > h ? { width: n, height: n / r } : { width: i * r, height: i };
|
|
25
25
|
return m.width <= c.width && m.height <= c.height ? m : c;
|
|
26
26
|
}
|
|
27
27
|
}
|
|
28
|
-
return { width:
|
|
28
|
+
return { width: n, height: i };
|
|
29
29
|
}
|
|
30
30
|
function S(s) {
|
|
31
31
|
const t = getComputedStyle(s), e = s.getBoundingClientRect();
|
|
@@ -42,13 +42,13 @@ function S(s) {
|
|
|
42
42
|
naturalHeight: s.naturalHeight
|
|
43
43
|
};
|
|
44
44
|
}
|
|
45
|
-
function
|
|
46
|
-
const t = s.imageElm ? S(s.imageElm) : null, e = s.anchorElm ? S(s.anchorElm) : null,
|
|
45
|
+
function F(s) {
|
|
46
|
+
const t = s.imageElm ? S(s.imageElm) : null, e = s.anchorElm ? S(s.anchorElm) : null, n = $(t == null ? void 0 : t.borderRadius), i = e && $(e == null ? void 0 : e.borderRadius), o = (i ? e == null ? void 0 : e.borderRadius : n ? 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
50
|
br: o,
|
|
51
|
-
overflow:
|
|
51
|
+
overflow: i ? e.overflow : n ? t.overflow : "",
|
|
52
52
|
nw: (t == null ? void 0 : t.naturalWidth) || 0,
|
|
53
53
|
nh: (t == null ? void 0 : t.naturalHeight) || 0,
|
|
54
54
|
w: (e == null ? void 0 : e.width) || (t == null ? void 0 : t.width) || 0,
|
|
@@ -57,9 +57,9 @@ function A(s) {
|
|
|
57
57
|
left: (e == null ? void 0 : e.left) || (t == null ? void 0 : t.left) || 0
|
|
58
58
|
};
|
|
59
59
|
}
|
|
60
|
-
function M(s, t, e,
|
|
60
|
+
function M(s, t, e, n = !1) {
|
|
61
61
|
const {
|
|
62
|
-
fit:
|
|
62
|
+
fit: i,
|
|
63
63
|
w: o,
|
|
64
64
|
h: a,
|
|
65
65
|
// this ones makes things hard. not used.
|
|
@@ -70,21 +70,21 @@ function M(s, t, e, i = !1) {
|
|
|
70
70
|
br: c,
|
|
71
71
|
top: m,
|
|
72
72
|
left: w
|
|
73
|
-
} =
|
|
74
|
-
d.width = `${o}px`, d.height = `${a}px`, d.objectFit =
|
|
75
|
-
const v =
|
|
76
|
-
u.setProperty("--vvw-init-radius", `${c}`), u.setProperty("--vvw-init-w", `${g}px`), u.setProperty("--vvw-init-h", `${f}px`),
|
|
73
|
+
} = F(s), b = Math.min(Math.max(w, -o), window.innerWidth + o) - window.innerWidth / 2 + o / 2, p = Math.min(Math.max(m, -a), window.innerHeight + a) - window.innerHeight / 2 + a / 2, d = e.style;
|
|
74
|
+
d.width = `${o}px`, d.height = `${a}px`, d.objectFit = i, e.width = r, e.height = h, d.setProperty("--vvw-init-radius", `${c}`), d.setProperty("--vvw-pulse-radius", `calc(1.3 * ${c})`), d.setProperty("--vvw-init-x", `${b}px`), d.setProperty("--vvw-init-y", `${p}px`), n && (d.setProperty("--vvw-current-x", `${b}px`), d.setProperty("--vvw-current-y", `${p}px`));
|
|
75
|
+
const v = A(s.imageElm), g = Math.min(o, v.width), f = Math.min(a, v.height), u = t.style;
|
|
76
|
+
u.setProperty("--vvw-init-radius", `${c}`), u.setProperty("--vvw-init-w", `${g}px`), u.setProperty("--vvw-init-h", `${f}px`), n && (u.setProperty("--vvw-current-radius", `${c}`), u.setProperty("--vvw-current-w", `${g}px`), u.setProperty("--vvw-current-h", `${f}px`), t.dataset.vvwWidth = g.toString(), t.dataset.vvwHeight = f.toString());
|
|
77
77
|
}
|
|
78
78
|
function D(s) {
|
|
79
|
-
const t = window.innerWidth, e = window.innerHeight,
|
|
80
|
-
if (!
|
|
79
|
+
const t = window.innerWidth, e = window.innerHeight, n = s.naturalWidth, i = s.naturalHeight;
|
|
80
|
+
if (!n || !i)
|
|
81
81
|
throw new Error("Image natural dimensions are zero");
|
|
82
|
-
if (
|
|
82
|
+
if (n < t && i < e)
|
|
83
83
|
return {
|
|
84
|
-
width:
|
|
85
|
-
height:
|
|
84
|
+
width: n,
|
|
85
|
+
height: i
|
|
86
86
|
};
|
|
87
|
-
const o =
|
|
87
|
+
const o = n / i, a = t / e;
|
|
88
88
|
let r, h;
|
|
89
89
|
return o > a ? (r = t, h = t / o) : (h = e, r = e * o), {
|
|
90
90
|
width: r,
|
|
@@ -115,23 +115,23 @@ function X() {
|
|
|
115
115
|
}), I);
|
|
116
116
|
}
|
|
117
117
|
function W(s) {
|
|
118
|
-
const e = X().createHTML(s),
|
|
119
|
-
|
|
120
|
-
const
|
|
121
|
-
return
|
|
118
|
+
const e = X().createHTML(s), n = document.createElement("template");
|
|
119
|
+
n.innerHTML = e;
|
|
120
|
+
const i = n.content;
|
|
121
|
+
return n.remove(), i;
|
|
122
122
|
}
|
|
123
|
-
function
|
|
123
|
+
function N() {
|
|
124
124
|
return {
|
|
125
125
|
name: "download",
|
|
126
126
|
icon: Y,
|
|
127
127
|
onClick: async (s) => {
|
|
128
128
|
var o;
|
|
129
|
-
const t = await fetch(s.src), e = await t.blob(),
|
|
130
|
-
|
|
129
|
+
const t = await fetch(s.src), e = await t.blob(), n = t.url, i = document.createElement("a");
|
|
130
|
+
i.href = URL.createObjectURL(e), i.download = ((o = n.split("/").pop()) == null ? void 0 : o.split("?")[0].split("#")[0]) || "download", document.body.appendChild(i), i.click(), document.body.removeChild(i);
|
|
131
131
|
}
|
|
132
132
|
};
|
|
133
133
|
}
|
|
134
|
-
function
|
|
134
|
+
function B(s) {
|
|
135
135
|
if (typeof s == "string")
|
|
136
136
|
switch (s) {
|
|
137
137
|
case "zoomIn":
|
|
@@ -153,18 +153,17 @@ function j(s, t) {
|
|
|
153
153
|
const e = document.createElement("div");
|
|
154
154
|
e.className = "vvw-item", e.dataset.vvwPos = `${t !== void 0 ? t : ""}`, e.dataset.vvwIdx = s.index.toString(), e.appendChild(
|
|
155
155
|
W(
|
|
156
|
-
`<
|
|
157
|
-
<img class="vvw-img-lo" src="${s.thumb || s.src}" alt="${s.alt || ""}" />
|
|
156
|
+
`<img class="vvw-img-lo" src="${s.thumb || s.src}" alt="${s.alt || ""}" />
|
|
158
157
|
<img class="vvw-img-hi" src="${s.src}" alt="${s.alt || ""}" />`
|
|
159
158
|
)
|
|
160
159
|
);
|
|
161
|
-
const
|
|
162
|
-
return M(s,
|
|
160
|
+
const n = e.querySelector("img.vvw-img-lo"), i = e.querySelector("img.vvw-img-hi");
|
|
161
|
+
return M(s, i, n, t === 0), e;
|
|
163
162
|
}
|
|
164
163
|
function U({
|
|
165
164
|
controls: s
|
|
166
165
|
}) {
|
|
167
|
-
const t = (
|
|
166
|
+
const t = (n) => n ? n.map(B).join("") : "";
|
|
168
167
|
return W(
|
|
169
168
|
`<div class="vvw-root" id="vvw-root">
|
|
170
169
|
<div class="vvw-container">
|
|
@@ -172,8 +171,8 @@ function U({
|
|
|
172
171
|
<div class="vvw-image-container"></div>
|
|
173
172
|
<div class="vvw-top-bar vvw-ui"><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>
|
|
174
173
|
<div class="vvw-bottom-bar vvw-ui"><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>
|
|
175
|
-
<div class="vvw-prev vvw-ui"><button>${q}</button></div>
|
|
176
|
-
<div class="vvw-next vvw-ui"><button>${k}</button></div>
|
|
174
|
+
<div class="vvw-prev vvw-ui"><button aria-label="Previous">${q}</button></div>
|
|
175
|
+
<div class="vvw-next vvw-ui"><button aria-label="Next">${k}</button></div>
|
|
177
176
|
</div>
|
|
178
177
|
</div>`
|
|
179
178
|
);
|
|
@@ -191,7 +190,7 @@ const H = {
|
|
|
191
190
|
rapidLimit: 222,
|
|
192
191
|
controls: {
|
|
193
192
|
topLeft: ["indexDisplay"],
|
|
194
|
-
topRight: ["zoomIn", "zoomOut",
|
|
193
|
+
topRight: ["zoomIn", "zoomOut", N(), "close"],
|
|
195
194
|
bottomLeft: ["description"]
|
|
196
195
|
}
|
|
197
196
|
};
|
|
@@ -202,21 +201,21 @@ function _(s) {
|
|
|
202
201
|
s.imageContainer.style.width = `${(t * 2 + 1) * 100}vw`, s.imageContainer.style.left = `-${t * 100}vw`, s.imageContainer.style.display = "flex", G(s);
|
|
203
202
|
}
|
|
204
203
|
function G(s) {
|
|
205
|
-
let t = { x: 0, y: 0 }, e = { x: 0, y: 0 },
|
|
206
|
-
s.registerPointerListener((
|
|
207
|
-
if (!
|
|
208
|
-
if (
|
|
209
|
-
e = { x:
|
|
204
|
+
let t = { x: 0, y: 0 }, e = { x: 0, y: 0 }, n = null;
|
|
205
|
+
s.registerPointerListener((i) => {
|
|
206
|
+
if (!i.hasInternalExecution && !(i.pointers.length > 1)) {
|
|
207
|
+
if (i.event === "down" && (t = { x: i.pointer.x, y: i.pointer.y }, e = { x: i.pointer.x, y: i.pointer.y }), i.event === "move") {
|
|
208
|
+
e = { x: i.pointer.x, y: i.pointer.y };
|
|
210
209
|
const o = e.x - t.x, a = e.y - t.y;
|
|
211
|
-
if (!
|
|
210
|
+
if (!n && Math.abs(a) > Math.abs(o) || n === "y") {
|
|
212
211
|
const r = a / window.innerHeight * 100;
|
|
213
|
-
s.imageContainer.style.transition = "none", s.imageContainer.style.transform = `translateY(${r}vh)`,
|
|
214
|
-
} else if (!
|
|
212
|
+
s.imageContainer.style.transition = "none", s.imageContainer.style.transform = `translateY(${r}vh)`, n = "y";
|
|
213
|
+
} else if (!n && Math.abs(o) > Math.abs(a) || n === "x") {
|
|
215
214
|
const r = o / window.innerWidth * 100;
|
|
216
|
-
s.imageContainer.style.transition = "none", s.imageContainer.style.transform = `translateX(${r}vw)`,
|
|
215
|
+
s.imageContainer.style.transition = "none", s.imageContainer.style.transform = `translateX(${r}vw)`, n = "x";
|
|
217
216
|
}
|
|
218
217
|
}
|
|
219
|
-
if (
|
|
218
|
+
if (i.event === "up" || i.event === "cancel") {
|
|
220
219
|
let o = function(a) {
|
|
221
220
|
var r;
|
|
222
221
|
(r = s.imageContainer) == null || r.addEventListener("transitionend", function h() {
|
|
@@ -224,15 +223,15 @@ function G(s) {
|
|
|
224
223
|
(c = s.imageContainer) == null || c.removeEventListener("transitionend", h), s.imageContainer.style.transition = "", s.imageContainer.style.transform = "";
|
|
225
224
|
}), s.imageContainer.style.transition = "transform 222ms ease", s.imageContainer.style.transform = a;
|
|
226
225
|
};
|
|
227
|
-
if (
|
|
228
|
-
const a = e.y - t.y, r =
|
|
226
|
+
if (n === "y") {
|
|
227
|
+
const a = e.y - t.y, r = i.pointer.movementY, h = 8;
|
|
229
228
|
s.imageContainer.style.transition = "", a > 0 && Math.abs(r) > h || a < 0 && Math.abs(r) > h ? (s.imageContainer.style.transition = "transform 222ms ease", s.imageContainer.style.transform = "translateY(0vh)", s.close()) : o("translateY(0vh)");
|
|
230
229
|
}
|
|
231
|
-
if (
|
|
232
|
-
const a = e.x - t.x, r =
|
|
230
|
+
if (n === "x") {
|
|
231
|
+
const a = e.x - t.x, r = i.pointer.movementX, h = 8;
|
|
233
232
|
s.imageContainer.style.transition = "", a > 0 && Math.abs(r) > h ? s.prev() : a < 0 && Math.abs(r) > h ? s.next() : o("translateX(0vw)");
|
|
234
233
|
}
|
|
235
|
-
|
|
234
|
+
n = null;
|
|
236
235
|
}
|
|
237
236
|
}
|
|
238
237
|
});
|
|
@@ -242,10 +241,10 @@ function J(s) {
|
|
|
242
241
|
async function Q({
|
|
243
242
|
vistaView: { isReducedMotion: s },
|
|
244
243
|
htmlElements: { to: t },
|
|
245
|
-
index: { from: e, to:
|
|
246
|
-
vistaView: { elements:
|
|
244
|
+
index: { from: e, to: n },
|
|
245
|
+
vistaView: { elements: i, imageContainer: o, options: a }
|
|
247
246
|
}, r) {
|
|
248
|
-
if (!t || r.aborted || s || !(Math.abs(
|
|
247
|
+
if (!t || r.aborted || s || !(Math.abs(n - e) === 1 || e === 0 && n === i.length - 1 || e === i.length - 1 && n === 0))
|
|
249
248
|
return;
|
|
250
249
|
const c = Math.round(a.animationDurationBase * 1.5 * 100) / 100;
|
|
251
250
|
return new Promise((m) => {
|
|
@@ -258,7 +257,7 @@ async function Q({
|
|
|
258
257
|
},
|
|
259
258
|
{ once: !0 }
|
|
260
259
|
);
|
|
261
|
-
const w =
|
|
260
|
+
const w = n === e + 1 || e === i.length - 1 && n === 0 ? "translateX(-100vw)" : "translateX(100vw)";
|
|
262
261
|
o.style.transition = `transform ${c}ms ease`, o.style.transform = w;
|
|
263
262
|
});
|
|
264
263
|
}
|
|
@@ -285,7 +284,7 @@ class V {
|
|
|
285
284
|
id: t.pointerId
|
|
286
285
|
};
|
|
287
286
|
this.pointers.push(e), this.listeners.forEach(
|
|
288
|
-
(
|
|
287
|
+
(n) => n({
|
|
289
288
|
event: "down",
|
|
290
289
|
pointer: e,
|
|
291
290
|
pointers: this.pointers,
|
|
@@ -296,9 +295,9 @@ class V {
|
|
|
296
295
|
l(this, "onPointerMove", (t) => {
|
|
297
296
|
if (!this.listeners.length) return;
|
|
298
297
|
t.preventDefault();
|
|
299
|
-
const e = this.pointers.find((
|
|
298
|
+
const e = this.pointers.find((n) => n.id === t.pointerId);
|
|
300
299
|
e && (e.movementX = t.movementX, e.movementY = t.movementY, e.x = t.clientX, e.y = t.clientY, this.listeners.forEach(
|
|
301
|
-
(
|
|
300
|
+
(n) => n({
|
|
302
301
|
event: "move",
|
|
303
302
|
pointer: e,
|
|
304
303
|
pointers: this.pointers,
|
|
@@ -312,15 +311,15 @@ class V {
|
|
|
312
311
|
t.preventDefault();
|
|
313
312
|
const e = this.pointers.findIndex((o) => o.id === t.pointerId);
|
|
314
313
|
if (e === -1) return;
|
|
315
|
-
const
|
|
316
|
-
|
|
317
|
-
const
|
|
314
|
+
const n = this.pointers[e];
|
|
315
|
+
n.x = t.clientX, n.y = t.clientY;
|
|
316
|
+
const i = this.pointers.length;
|
|
318
317
|
this.pointers.splice(e, 1), this.listeners.forEach(
|
|
319
318
|
(o) => o({
|
|
320
319
|
event: "up",
|
|
321
|
-
pointer:
|
|
320
|
+
pointer: n,
|
|
322
321
|
pointers: this.pointers,
|
|
323
|
-
lastPointerLen:
|
|
322
|
+
lastPointerLen: i
|
|
324
323
|
})
|
|
325
324
|
);
|
|
326
325
|
});
|
|
@@ -330,15 +329,15 @@ class V {
|
|
|
330
329
|
t.preventDefault();
|
|
331
330
|
const e = this.pointers.findIndex((o) => o.id === t.pointerId);
|
|
332
331
|
if (e === -1) return;
|
|
333
|
-
const
|
|
334
|
-
|
|
335
|
-
const
|
|
332
|
+
const n = this.pointers[e];
|
|
333
|
+
n.x = t.clientX, n.y = t.clientY;
|
|
334
|
+
const i = this.pointers.length;
|
|
336
335
|
this.pointers.splice(e, 1), this.listeners.forEach(
|
|
337
336
|
(o) => o({
|
|
338
337
|
event: "cancel",
|
|
339
|
-
pointer:
|
|
338
|
+
pointer: n,
|
|
340
339
|
pointers: this.pointers,
|
|
341
|
-
lastPointerLen:
|
|
340
|
+
lastPointerLen: i
|
|
342
341
|
})
|
|
343
342
|
);
|
|
344
343
|
});
|
|
@@ -357,13 +356,13 @@ class V {
|
|
|
357
356
|
this.listeners = this.listeners.filter((e) => e !== t);
|
|
358
357
|
}
|
|
359
358
|
getPointerDistance(t, e) {
|
|
360
|
-
const
|
|
361
|
-
return Math.sqrt(
|
|
359
|
+
const n = t.x - e.x, i = t.y - e.y;
|
|
360
|
+
return Math.sqrt(n * n + i * i);
|
|
362
361
|
}
|
|
363
362
|
getCentroid() {
|
|
364
363
|
if (this.pointers.length === 0) return null;
|
|
365
364
|
const t = this.pointers.reduce(
|
|
366
|
-
(e,
|
|
365
|
+
(e, n) => (e.x += n.x, e.y += n.y, e),
|
|
367
366
|
{ x: 0, y: 0 }
|
|
368
367
|
);
|
|
369
368
|
return {
|
|
@@ -399,10 +398,10 @@ class tt {
|
|
|
399
398
|
width: t.naturalWidth * this.maxZoomLevel
|
|
400
399
|
}, !t.dataset.vvwWidth || !t.dataset.vvwHeight)
|
|
401
400
|
throw new Error("VistaImageState: Image dataset vvwWidth or vvwHeight not set.");
|
|
402
|
-
const e = parseFloat(t.dataset.vvwWidth),
|
|
401
|
+
const e = parseFloat(t.dataset.vvwWidth), n = parseFloat(t.dataset.vvwHeight);
|
|
403
402
|
this.minDimension = {
|
|
404
403
|
initialWidth: e,
|
|
405
|
-
initialHeight:
|
|
404
|
+
initialHeight: n,
|
|
406
405
|
minWidth: e * 0.1,
|
|
407
406
|
closingWidth: e * 0.5
|
|
408
407
|
}, this.accumulatedTranslate = { x: 0, y: 0 };
|
|
@@ -416,68 +415,68 @@ class tt {
|
|
|
416
415
|
scaleMove(t, e) {
|
|
417
416
|
if (!this.image) return;
|
|
418
417
|
this.rect || (this.rect = this.image.getBoundingClientRect()), e || (e = this.initialCenter);
|
|
419
|
-
const
|
|
418
|
+
const n = P(
|
|
420
419
|
this.rect.width * t,
|
|
421
420
|
this.minDimension.minWidth,
|
|
422
421
|
this.maxDimension.width
|
|
423
422
|
);
|
|
424
423
|
this.onScale && this.onScale({
|
|
425
|
-
scale:
|
|
426
|
-
isMax:
|
|
427
|
-
isMin:
|
|
428
|
-
}), this.scale = C(
|
|
429
|
-
const
|
|
430
|
-
this.translate.x = C(h + m), this.translate.y = C(c + w), this.image.style.transform = `translate3d(${this.translate.x}px, ${this.translate.y}px, 0px) scale(${this.scale})`,
|
|
424
|
+
scale: n / (this.maxDimension.width / this.maxZoomLevel),
|
|
425
|
+
isMax: n >= this.maxDimension.width,
|
|
426
|
+
isMin: n <= this.minDimension.initialWidth
|
|
427
|
+
}), this.scale = C(n / this.rect.width);
|
|
428
|
+
const i = this.rect.left + this.rect.width / 2, o = this.rect.top + this.rect.height / 2, a = this.initialCenter.x - i, r = this.initialCenter.y - o, h = a * (1 - this.scale), c = r * (1 - this.scale), m = e.x - this.initialCenter.x, w = e.y - this.initialCenter.y;
|
|
429
|
+
this.translate.x = C(h + m), this.translate.y = C(c + w), this.image.style.transform = `translate3d(${this.translate.x}px, ${this.translate.y}px, 0px) scale(${this.scale})`, n <= this.minDimension.closingWidth ? this.image.style.opacity = "0.5" : this.image.style.opacity = "";
|
|
431
430
|
}
|
|
432
431
|
moveAndNormalize(t) {
|
|
433
|
-
let e = 0,
|
|
434
|
-
const
|
|
435
|
-
if (
|
|
432
|
+
let e = 0, n = !1;
|
|
433
|
+
const i = ({ x: o, y: a }) => {
|
|
434
|
+
if (n)
|
|
436
435
|
return;
|
|
437
436
|
if (Math.abs(o) < 1e-3 && Math.abs(a) < 1e-3)
|
|
438
437
|
return this.normalize();
|
|
439
438
|
o *= 0.9, a *= 0.9;
|
|
440
439
|
const r = this.image.getBoundingClientRect();
|
|
441
|
-
this.translate.x = C(this.translate.x + o), this.translate.y = C(this.translate.y + a), r.right < window.innerWidth / 2 && (this.translate.x += (window.innerWidth / 2 - r.right) * 0.1, o *= 0.7), r.left > window.innerWidth / 2 && (this.translate.x -= (r.left - window.innerWidth / 2) * 0.1, o *= 0.7), r.bottom < window.innerHeight / 2 && (this.translate.y += (window.innerHeight / 2 - r.bottom) * 0.1, a *= 0.7), r.top > window.innerHeight / 2 && (this.translate.y -= (r.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(() =>
|
|
440
|
+
this.translate.x = C(this.translate.x + o), this.translate.y = C(this.translate.y + a), r.right < window.innerWidth / 2 && (this.translate.x += (window.innerWidth / 2 - r.right) * 0.1, o *= 0.7), r.left > window.innerWidth / 2 && (this.translate.x -= (r.left - window.innerWidth / 2) * 0.1, o *= 0.7), r.bottom < window.innerHeight / 2 && (this.translate.y += (window.innerHeight / 2 - r.bottom) * 0.1, a *= 0.7), r.top > window.innerHeight / 2 && (this.translate.y -= (r.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(() => i({ x: o, y: a }));
|
|
442
441
|
};
|
|
443
|
-
return
|
|
442
|
+
return i({
|
|
444
443
|
x: t.movementX,
|
|
445
444
|
y: t.movementY
|
|
446
445
|
}), () => {
|
|
447
|
-
|
|
446
|
+
n = !0, cancelAnimationFrame(e), this.normalize(!1);
|
|
448
447
|
};
|
|
449
448
|
}
|
|
450
449
|
animateZoom(t) {
|
|
451
450
|
if (!this.image) return;
|
|
452
451
|
this.rect || (this.rect = this.image.getBoundingClientRect());
|
|
453
|
-
const e = Date.now(),
|
|
454
|
-
this.rect.width * t < this.minDimension.closingWidth ||
|
|
452
|
+
const e = Date.now(), n = this.image;
|
|
453
|
+
this.rect.width * t < this.minDimension.closingWidth || n.width < Math.floor(this.minDimension.initialWidth) || (n.addEventListener(
|
|
455
454
|
"transitionend",
|
|
456
455
|
() => {
|
|
457
|
-
this.animationTimestamp === e &&
|
|
456
|
+
this.animationTimestamp === e && n && (n.style.transition = "", this.normalize());
|
|
458
457
|
},
|
|
459
458
|
{ once: !0 }
|
|
460
|
-
),
|
|
459
|
+
), n.style.transition || (n.style.transition = "all 222ms ease"), this.animationTimestamp = e, this.scaleMove(t));
|
|
461
460
|
}
|
|
462
461
|
normalize(t = !0) {
|
|
463
462
|
if (!this.image || !this.rect) return;
|
|
464
|
-
let e = this.rect.width * this.scale,
|
|
465
|
-
if (Math.round(e) === Math.round(this.minDimension.initialWidth) && (e = this.minDimension.initialWidth,
|
|
463
|
+
let e = this.rect.width * this.scale, n = this.rect.height * this.scale;
|
|
464
|
+
if (Math.round(e) === Math.round(this.minDimension.initialWidth) && (e = this.minDimension.initialWidth, n = this.minDimension.initialHeight), this.image.style.width = `${e}px`, this.image.style.height = `${n}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(), e <= this.minDimension.closingWidth)
|
|
466
465
|
return this.clean(), !0;
|
|
467
466
|
if (e < this.minDimension.initialWidth)
|
|
468
467
|
this.accumulatedTranslate.x = 0, this.accumulatedTranslate.y = 0, requestAnimationFrame(() => {
|
|
469
|
-
const
|
|
470
|
-
|
|
468
|
+
const i = this.image;
|
|
469
|
+
i && (i.addEventListener(
|
|
471
470
|
"transitionend",
|
|
472
471
|
() => {
|
|
473
|
-
|
|
472
|
+
i && (this.clean(), this.rect = null);
|
|
474
473
|
},
|
|
475
474
|
{ once: !0 }
|
|
476
|
-
),
|
|
475
|
+
), i.style.transition = "all 222ms ease", i.style.width = `${this.minDimension.initialWidth}px`, i.style.height = `${this.minDimension.initialHeight}px`, i.style.left = "50%", i.style.top = "50%");
|
|
477
476
|
});
|
|
478
477
|
else if (t) {
|
|
479
|
-
let
|
|
480
|
-
if (this.rect.right < window.innerWidth / 2 && (
|
|
478
|
+
let i = !1;
|
|
479
|
+
if (this.rect.right < window.innerWidth / 2 && (i = !0, this.accumulatedTranslate.x += window.innerWidth / 2 - this.rect.right), this.rect.left > window.innerWidth / 2 && (i = !0, this.accumulatedTranslate.x -= this.rect.left - window.innerWidth / 2), this.rect.bottom < window.innerHeight / 2 && (i = !0, this.accumulatedTranslate.y += window.innerHeight / 2 - this.rect.bottom), this.rect.top > window.innerHeight / 2 && (i = !0, this.accumulatedTranslate.y -= this.rect.top - window.innerHeight / 2), i) {
|
|
481
480
|
const o = this.image;
|
|
482
481
|
o.addEventListener(
|
|
483
482
|
"transitionend",
|
|
@@ -496,7 +495,7 @@ class et {
|
|
|
496
495
|
l(this, "fiolast", {});
|
|
497
496
|
}
|
|
498
497
|
// first in out
|
|
499
|
-
fio(t, e,
|
|
498
|
+
fio(t, e, n = 50) {
|
|
500
499
|
const o = Date.now() - (this.fiolast[e] ?? 0), a = () => {
|
|
501
500
|
this.fiolast[e] = Date.now(), t();
|
|
502
501
|
};
|
|
@@ -504,7 +503,7 @@ class et {
|
|
|
504
503
|
a();
|
|
505
504
|
return;
|
|
506
505
|
}
|
|
507
|
-
o >=
|
|
506
|
+
o >= n && a();
|
|
508
507
|
}
|
|
509
508
|
}
|
|
510
509
|
const x = {
|
|
@@ -564,10 +563,10 @@ class it {
|
|
|
564
563
|
});
|
|
565
564
|
l(this, "onResizeHandler", () => {
|
|
566
565
|
this.currentChildren.htmls.forEach((t, e) => {
|
|
567
|
-
const
|
|
568
|
-
if (M(
|
|
569
|
-
const { width: a, height: r } = D(
|
|
570
|
-
|
|
566
|
+
const n = this.currentChildren.images[e], i = t.querySelector("img.vvw-img-hi"), o = t.querySelector("img.vvw-img-lo");
|
|
567
|
+
if (M(n, i, o, !1), i.classList.contains("vvw--loaded")) {
|
|
568
|
+
const { width: a, height: r } = D(i);
|
|
569
|
+
i.style.setProperty("--vvw-current-w", `${a}px`), i.style.setProperty("--vvw-current-h", `${r}px`), i.dataset.vvwWidth = a.toString(), i.dataset.vvwHeight = r.toString();
|
|
571
570
|
}
|
|
572
571
|
});
|
|
573
572
|
});
|
|
@@ -575,16 +574,16 @@ class it {
|
|
|
575
574
|
l(this, "pointerListeners", []);
|
|
576
575
|
l(this, "getInternalPointerListener", () => {
|
|
577
576
|
const t = this.imageState;
|
|
578
|
-
let e = 0,
|
|
577
|
+
let e = 0, n = !1, i = () => {
|
|
579
578
|
};
|
|
580
579
|
return (o) => {
|
|
581
580
|
if (o.event === "down") {
|
|
582
|
-
if (
|
|
581
|
+
if (i(), this.isZoomedIn && o.pointers.length === 1) {
|
|
583
582
|
const a = this.pointers.getCentroid();
|
|
584
583
|
t.setInitialCenter(a);
|
|
585
584
|
}
|
|
586
585
|
if (o.pointers.length >= 2) {
|
|
587
|
-
|
|
586
|
+
n = !0;
|
|
588
587
|
const a = this.pointers.getCentroid();
|
|
589
588
|
e = this.pointers.getPointerDistance(o.pointers[0], o.pointers[1]), t.setInitialCenter(a);
|
|
590
589
|
}
|
|
@@ -593,17 +592,17 @@ class it {
|
|
|
593
592
|
const a = this.pointers.getCentroid();
|
|
594
593
|
t.move(a);
|
|
595
594
|
}
|
|
596
|
-
if (o.pointers.length >= 2 &&
|
|
595
|
+
if (o.pointers.length >= 2 && n) {
|
|
597
596
|
const a = this.pointers.getCentroid(), r = this.pointers.getPointerDistance(o.pointers[0], o.pointers[1]);
|
|
598
597
|
t.scaleMove(r / e, a);
|
|
599
598
|
}
|
|
600
|
-
} else (o.event === "up" || o.event === "cancel") && (
|
|
599
|
+
} else (o.event === "up" || o.event === "cancel") && (n || this.isZoomedIn) && (n ? (n = !1, t.normalize() && requestAnimationFrame(() => {
|
|
601
600
|
this.close();
|
|
602
|
-
})) : this.isZoomedIn && o.pointers.length === 0 && (
|
|
601
|
+
})) : this.isZoomedIn && o.pointers.length === 0 && (i = t.moveAndNormalize(o.pointer)));
|
|
603
602
|
this.pointerListeners.forEach(
|
|
604
603
|
(a) => a({
|
|
605
604
|
...o,
|
|
606
|
-
hasInternalExecution: this.isZoomedIn ||
|
|
605
|
+
hasInternalExecution: this.isZoomedIn || n
|
|
607
606
|
})
|
|
608
607
|
);
|
|
609
608
|
};
|
|
@@ -617,25 +616,25 @@ class it {
|
|
|
617
616
|
}
|
|
618
617
|
}, this.imageState = new tt(
|
|
619
618
|
this.options.maxZoomLevel,
|
|
620
|
-
(
|
|
621
|
-
var
|
|
622
|
-
|
|
619
|
+
(n) => {
|
|
620
|
+
var i, o, a, r, h, c;
|
|
621
|
+
n.isMin ? (this.isZoomedIn = !1, (i = this.qs(".vvw-zoom-out")) == null || i.setAttribute("disabled", "true"), (o = this.qs('.vvw-item[data-vvw-idx="' + this.currentIndex + '"]')) == null || o.style.setProperty(
|
|
623
622
|
"pointer-events",
|
|
624
623
|
"none"
|
|
625
624
|
)) : (this.isZoomedIn = !0, (a = this.qs(".vvw-zoom-out")) == null || a.removeAttribute("disabled"), (r = this.qs('.vvw-item[data-vvw-idx="' + this.currentIndex + '"]')) == null || r.style.setProperty(
|
|
626
625
|
"pointer-events",
|
|
627
626
|
"auto"
|
|
628
|
-
)),
|
|
627
|
+
)), n.isMax ? (h = this.qs(".vvw-zoom-in")) == null || h.setAttribute("disabled", "true") : (c = this.qs(".vvw-zoom-in")) == null || c.removeAttribute("disabled");
|
|
629
628
|
}
|
|
630
|
-
), 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((
|
|
631
|
-
|
|
629
|
+
), 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((n, i) => {
|
|
630
|
+
n.dataset.vistaIdx = i.toString(), n.addEventListener("click", this.defaultOnClickHandler), n.addEventListener("pointerup", this.onClickElements);
|
|
632
631
|
});
|
|
633
632
|
}
|
|
634
633
|
qs(t) {
|
|
635
634
|
return this.root ? this.root.querySelector(t) : null;
|
|
636
635
|
}
|
|
637
636
|
async swap(t, e) {
|
|
638
|
-
const
|
|
637
|
+
const n = this.options.preloads || 0, i = this.currentIndex, { htmls: o, images: a } = this.getChildElements(n, i), r = this.imageContainer, h = this.currentChildren, c = {
|
|
639
638
|
htmlElements: { from: h.htmls, to: o },
|
|
640
639
|
images: { from: h.images, to: a },
|
|
641
640
|
index: { from: t, to: this.currentIndex },
|
|
@@ -656,7 +655,7 @@ class it {
|
|
|
656
655
|
}), this.waitForImagesToLoad(), this.options.onImageView && this.options.onImageView(c);
|
|
657
656
|
}
|
|
658
657
|
getChildElements(t, e) {
|
|
659
|
-
const
|
|
658
|
+
const n = [], i = [];
|
|
660
659
|
for (let o = -t; o <= t; o++) {
|
|
661
660
|
const a = (e + o + this.elements.length) % this.elements.length, r = this.elements[a], h = r instanceof HTMLImageElement ? r : r instanceof HTMLAnchorElement && r.querySelector("img") || void 0, c = r instanceof HTMLElement ? {
|
|
662
661
|
index: a,
|
|
@@ -669,11 +668,11 @@ class it {
|
|
|
669
668
|
index: a,
|
|
670
669
|
...r
|
|
671
670
|
};
|
|
672
|
-
|
|
671
|
+
i.push(c), n.push(j(c, o));
|
|
673
672
|
}
|
|
674
673
|
return {
|
|
675
|
-
htmls:
|
|
676
|
-
images:
|
|
674
|
+
htmls: n,
|
|
675
|
+
images: i
|
|
677
676
|
};
|
|
678
677
|
}
|
|
679
678
|
zoomIn() {
|
|
@@ -700,39 +699,42 @@ class it {
|
|
|
700
699
|
this.elements instanceof NodeList && this.elements.forEach((r, h) => {
|
|
701
700
|
r.style.opacity = "", h === t && (r.style.opacity = "0");
|
|
702
701
|
});
|
|
703
|
-
const e = this.qs(".vvw-index"),
|
|
704
|
-
e && (e.textContent = `${
|
|
702
|
+
const e = this.qs(".vvw-index"), n = `${t + 1}`, i = `${this.elements.length}`;
|
|
703
|
+
e && (e.textContent = `${n} / ${i}`);
|
|
705
704
|
const o = this.qs(".vvw-desc");
|
|
706
705
|
if (o) {
|
|
707
706
|
const r = (a = this.currentChildren) == null ? void 0 : a.images.find((c) => c.index === t), h = (r == null ? void 0 : r.alt) || "";
|
|
708
|
-
h ? (o.textContent = h, o.setAttribute("aria-label", `Image ${
|
|
707
|
+
h ? (o.textContent = h, o.setAttribute("aria-label", `Image ${n} of ${i}: ${h}`)) : (o.textContent = "", o.setAttribute("aria-label", `Image ${n} of ${i}`));
|
|
709
708
|
}
|
|
710
709
|
}
|
|
711
710
|
waitForImagesToLoad() {
|
|
712
|
-
this.imageContainer.querySelectorAll("img.vvw-img-hi:not(.vvw--loaded)").forEach((
|
|
713
|
-
const
|
|
711
|
+
this.imageContainer.querySelectorAll("img.vvw-img-hi:not(.vvw--loaded)").forEach((n) => {
|
|
712
|
+
const i = n, o = () => {
|
|
714
713
|
var r;
|
|
715
|
-
|
|
716
|
-
const a = (r =
|
|
717
|
-
|
|
714
|
+
i.width = i.naturalWidth, i.height = i.naturalHeight;
|
|
715
|
+
const a = (r = i.parentElement) == null ? void 0 : r.matches(`[data-vvw-idx="${this.currentIndex}"]`);
|
|
716
|
+
i.addEventListener(
|
|
718
717
|
"transitionend",
|
|
719
718
|
() => {
|
|
720
|
-
a && (this.imageState.setCurrentImage(
|
|
719
|
+
a && (this.imageState.setCurrentImage(i), this.imageState.setInitialCenter()), i.classList.add("vvw--ready");
|
|
721
720
|
},
|
|
722
721
|
{ once: !0 }
|
|
723
|
-
),
|
|
724
|
-
const { width: h, height: c } = D(
|
|
725
|
-
|
|
722
|
+
), i.classList.add("vvw--loaded"), requestAnimationFrame(() => {
|
|
723
|
+
const { width: h, height: c } = D(i);
|
|
724
|
+
i.style.setProperty("--vvw-current-w", `${h}px`), i.style.setProperty("--vvw-current-h", `${c}px`), i.dataset.vvwWidth = h.toString(), i.dataset.vvwHeight = c.toString(), i.style.setProperty("--vvw-current-radius", "0px");
|
|
726
725
|
});
|
|
727
726
|
};
|
|
728
|
-
if (
|
|
727
|
+
if (i.complete && i.naturalWidth !== 0) {
|
|
729
728
|
o();
|
|
730
729
|
return;
|
|
731
730
|
}
|
|
732
|
-
|
|
731
|
+
i.addEventListener("load", () => {
|
|
733
732
|
o();
|
|
734
|
-
}),
|
|
735
|
-
|
|
733
|
+
}), i.addEventListener("error", () => {
|
|
734
|
+
var r;
|
|
735
|
+
i.classList.add("vvw--loaderror");
|
|
736
|
+
const a = document.createElement("p");
|
|
737
|
+
a.className = "vvw-img-err", a.setAttribute("role", "alert"), a.textContent = "Error loading image", (r = i.parentNode) == null || r.appendChild(a);
|
|
736
738
|
});
|
|
737
739
|
});
|
|
738
740
|
}
|
|
@@ -754,7 +756,7 @@ class it {
|
|
|
754
756
|
if (document.body.prepend(e), this.root = document.body.querySelector("#vvw-root"), !this.root)
|
|
755
757
|
throw new Error("Failed to setup VistaView root element.");
|
|
756
758
|
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}`);
|
|
757
|
-
const
|
|
759
|
+
const n = this.options.preloads || 0, i = t, { images: o, htmls: a } = this.getChildElements(n, i), r = {
|
|
758
760
|
htmlElements: { from: null, to: a },
|
|
759
761
|
images: { from: null, to: o },
|
|
760
762
|
index: { from: null, to: this.currentIndex },
|
|
@@ -804,11 +806,11 @@ class it {
|
|
|
804
806
|
/// CLOSE
|
|
805
807
|
async close(t = !0) {
|
|
806
808
|
x.somethingOpened === this && this.root && (t ? await new Promise((e) => {
|
|
807
|
-
let
|
|
809
|
+
let i = 0;
|
|
808
810
|
this.root.addEventListener("transitionend", (o) => {
|
|
809
|
-
o.target === this.root && (
|
|
811
|
+
o.target === this.root && (i++, i === 2 && this.elements instanceof NodeList && this.elements.forEach((a) => {
|
|
810
812
|
a.style.opacity = "";
|
|
811
|
-
}),
|
|
813
|
+
}), i === 3 && e(null));
|
|
812
814
|
}), this.root.classList.add("vvw--closing");
|
|
813
815
|
}) : this.elements instanceof NodeList && this.elements.forEach((e) => {
|
|
814
816
|
e.style.opacity = "";
|
|
@@ -837,25 +839,25 @@ class it {
|
|
|
837
839
|
view(t, e) {
|
|
838
840
|
if (x.somethingOpened !== this || t < 0 || t >= this.elements.length)
|
|
839
841
|
return;
|
|
840
|
-
const
|
|
842
|
+
const n = this.currentIndex;
|
|
841
843
|
this.currentIndex = t;
|
|
842
|
-
const
|
|
843
|
-
|
|
844
|
+
const i = this.abortController;
|
|
845
|
+
i == null || i.abort(), this.abortController = new AbortController(), this.swap(n, e);
|
|
844
846
|
}
|
|
845
847
|
}
|
|
846
848
|
function nt(s) {
|
|
847
849
|
let t = null;
|
|
848
850
|
if (typeof s == "string" ? t = document.querySelectorAll(s) : s instanceof NodeList && (t = s), t)
|
|
849
851
|
for (let e = 0; e < t.length; e++) {
|
|
850
|
-
const
|
|
851
|
-
if (!(
|
|
852
|
+
const n = t[e];
|
|
853
|
+
if (!(n.dataset.vistaviewSrc || n.getAttribute("href") || n.getAttribute("src") || ""))
|
|
852
854
|
return `Element at index ${e} is missing 'src' / 'data-vistaview-src' / 'href' attribute.`;
|
|
853
855
|
}
|
|
854
856
|
else {
|
|
855
857
|
const e = s;
|
|
856
|
-
for (let
|
|
857
|
-
if (!e[
|
|
858
|
-
return `Element at index ${
|
|
858
|
+
for (let n = 0; n < e.length; n++)
|
|
859
|
+
if (!e[n].src)
|
|
860
|
+
return `Element at index ${n} is missing 'src' attribute.`;
|
|
859
861
|
}
|
|
860
862
|
return t || s;
|
|
861
863
|
}
|
|
@@ -864,21 +866,21 @@ function ot({ elements: s, ...t }) {
|
|
|
864
866
|
let e = nt(s);
|
|
865
867
|
if (typeof e == "string")
|
|
866
868
|
return null;
|
|
867
|
-
const
|
|
869
|
+
const n = new it(e, t);
|
|
868
870
|
return {
|
|
869
|
-
open: (
|
|
870
|
-
close: () =>
|
|
871
|
-
next: () =>
|
|
872
|
-
prev: () =>
|
|
873
|
-
destroy: () =>
|
|
874
|
-
getCurrentIndex: () =>
|
|
875
|
-
view: (
|
|
876
|
-
|
|
871
|
+
open: (i = 0) => n.open(i),
|
|
872
|
+
close: () => n.close(),
|
|
873
|
+
next: () => n.next(),
|
|
874
|
+
prev: () => n.prev(),
|
|
875
|
+
destroy: () => n.destroy(),
|
|
876
|
+
getCurrentIndex: () => n.getCurrentIndex(),
|
|
877
|
+
view: (i) => {
|
|
878
|
+
n.view(i);
|
|
877
879
|
}
|
|
878
880
|
};
|
|
879
881
|
}
|
|
880
882
|
export {
|
|
881
883
|
H as DefaultOptions,
|
|
882
884
|
ot as vistaView,
|
|
883
|
-
|
|
885
|
+
N as vistaViewDownload
|
|
884
886
|
};
|
package/dist/vistaview.umd.js
CHANGED
|
@@ -1,12 +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 st=Object.defineProperty;var ot=(v,w,$)=>w in v?st(v,w,{enumerable:!0,configurable:!0,writable:!0,value:$}):v[w]=$;var l=(v,w,$)=>ot(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:
|
|
2
|
-
<img class="vvw-img-
|
|
3
|
-
<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 W(s,n,i,t===0),e}function j({controls:s}){const t=i=>i?i.map(B).join(""):"";return z(`<div class="vvw-root" id="vvw-root">
|
|
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 st=Object.defineProperty;var ot=(v,w,$)=>w in v?st(v,w,{enumerable:!0,configurable:!0,writable:!0,value:$}):v[w]=$;var l=(v,w,$)=>ot(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:n,height:i}=s.getBoundingClientRect(),o=s.naturalWidth,a=s.naturalHeight;if(!e)return{width:n,height:i};if(!o||!a)return{width:n,height:i};const r=o/a,h=n/i;switch(e){case"fill":return{width:n,height:i};case"none":return{width:o,height:a};case"contain":return r>h?{width:n,height:n/r}:{width:i*r,height:i};case"cover":return r<h?{width:n,height:n/r}:{width:i*r,height:i};case"scale-down":{const c={width:o,height:a},m=r>h?{width:n,height:n/r}:{width:i*r,height:i};return m.width<=c.width&&m.height<=c.height?m:c}}return{width:n,height:i}}function H(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 F(s){const t=s.imageElm?H(s.imageElm):null,e=s.anchorElm?H(s.anchorElm):null,n=w(t==null?void 0:t.borderRadius),i=e&&w(e==null?void 0:e.borderRadius),o=(i?e==null?void 0:e.borderRadius:n?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:o,overflow:i?e.overflow:n?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 W(s,t,e,n=!1){const{fit:i,w:o,h:a,nw:r,nh:h,br:c,top:m,left:f}=F(s),E=Math.min(Math.max(f,-o),window.innerWidth+o)-window.innerWidth/2+o/2,y=Math.min(Math.max(m,-a),window.innerHeight+a)-window.innerHeight/2+a/2,d=e.style;d.width=`${o}px`,d.height=`${a}px`,d.objectFit=i,e.width=r,e.height=h,d.setProperty("--vvw-init-radius",`${c}`),d.setProperty("--vvw-pulse-radius",`calc(1.3 * ${c})`),d.setProperty("--vvw-init-x",`${E}px`),d.setProperty("--vvw-init-y",`${y}px`),n&&(d.setProperty("--vvw-current-x",`${E}px`),d.setProperty("--vvw-current-y",`${y}px`));const g=$(s.imageElm),p=Math.min(o,g.width),x=Math.min(a,g.height),u=t.style;u.setProperty("--vvw-init-radius",`${c}`),u.setProperty("--vvw-init-w",`${p}px`),u.setProperty("--vvw-init-h",`${x}px`),n&&(u.setProperty("--vvw-current-radius",`${c}`),u.setProperty("--vvw-current-w",`${p}px`),u.setProperty("--vvw-current-h",`${x}px`),t.dataset.vvwWidth=p.toString(),t.dataset.vvwHeight=x.toString())}function T(s){const t=window.innerWidth,e=window.innerHeight,n=s.naturalWidth,i=s.naturalHeight;if(!n||!i)throw new Error("Image natural dimensions are zero");if(n<t&&i<e)return{width:n,height:i};const o=n/i,a=t/e;let r,h;return o>a?(r=t,h=t/o):(h=e,r=e*o),{width:r,height:h}}function P(s,t,e){return Math.min(Math.max(s,t),e)}function C(s,t=2){const e=Math.pow(10,t);return Math.round(s*e)/e}const q='<svg viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>',k='<svg viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>',R='<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>',O='<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>',Z='<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>';let D=null;function X(){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 z(s){const e=X().createHTML(s),n=document.createElement("template");n.innerHTML=e;const i=n.content;return n.remove(),i}function A(){return{name:"download",icon:Y,onClick:async s=>{var o;const t=await fetch(s.src),e=await t.blob(),n=t.url,i=document.createElement("a");i.href=URL.createObjectURL(e),i.download=((o=n.split("/").pop())==null?void 0:o.split("?")[0].split("#")[0])||"download",document.body.appendChild(i),i.click(),document.body.removeChild(i)}}}function N(s){if(typeof s=="string")switch(s){case"zoomIn":return`<button aria-label="Zoom In" class="vvw-zoom-in vvw-ui">${R}</button>`;case"zoomOut":return`<button aria-label="Zoom Out" disabled class="vvw-zoom-out vvw-ui">${O}</button>`;case"close":return`<button aria-label="Close" class="vvw-close vvw-ui">${Z}</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 aria-label="${s.description||s.name}" data-vvw-control="${s.name}">${s.icon}</button>`}function B(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(z(`<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 n=e.querySelector("img.vvw-img-lo"),i=e.querySelector("img.vvw-img-hi");return W(s,i,n,t===0),e}function j({controls:s}){const t=n=>n?n.map(N).join(""):"";return z(`<div class="vvw-root" id="vvw-root">
|
|
4
3
|
<div class="vvw-container">
|
|
5
4
|
<div class="vvw-bg"></div>
|
|
6
5
|
<div class="vvw-image-container"></div>
|
|
7
6
|
<div class="vvw-top-bar vvw-ui"><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>
|
|
8
7
|
<div class="vvw-bottom-bar vvw-ui"><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>
|
|
9
|
-
<div class="vvw-prev vvw-ui"><button>${q}</button></div>
|
|
10
|
-
<div class="vvw-next vvw-ui"><button>${k}</button></div>
|
|
8
|
+
<div class="vvw-prev vvw-ui"><button aria-label="Previous">${q}</button></div>
|
|
9
|
+
<div class="vvw-next vvw-ui"><button aria-label="Next">${k}</button></div>
|
|
11
10
|
</div>
|
|
12
|
-
</div>`)}const H={animationDurationBase:333,zoomStep:500,maxZoomLevel:2,touchSpeedThreshold:.5,preloads:1,keyboardListeners:!0,arrowOnSmallScreens:!1,rapidLimit:222,controls:{topLeft:["indexDisplay"],topRight:["zoomIn","zoomOut",F(),"close"],bottomLeft:["description"]}};function U(s){}function V(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",K(s)}function K(s){let t={x:0,y:0},e={x:0,y:0},i=null;s.registerPointerListener(n=>{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}),n.event==="move"){e={x:n.pointer.x,y:n.pointer.y};const o=e.x-t.x,a=e.y-t.y;if(!i&&Math.abs(a)>Math.abs(o)||i==="y"){const r=a/window.innerHeight*100;s.imageContainer.style.transition="none",s.imageContainer.style.transform=`translateY(${r}vh)`,i="y"}else if(!i&&Math.abs(o)>Math.abs(a)||i==="x"){const r=o/window.innerWidth*100;s.imageContainer.style.transition="none",s.imageContainer.style.transform=`translateX(${r}vw)`,i="x"}}if(n.event==="up"||n.event==="cancel"){let o=function(a){var r;(r=s.imageContainer)==null||r.addEventListener("transitionend",function h(){var c;(c=s.imageContainer)==null||c.removeEventListener("transitionend",h),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,r=n.pointer.movementY,h=8;s.imageContainer.style.transition="",a>0&&Math.abs(r)>h||a<0&&Math.abs(r)>h?(s.imageContainer.style.transition="transform 222ms ease",s.imageContainer.style.transform="translateY(0vh)",s.close()):o("translateY(0vh)")}if(i==="x"){const a=e.x-t.x,r=n.pointer.movementX,h=8;s.imageContainer.style.transition="",a>0&&Math.abs(r)>h?s.prev():a<0&&Math.abs(r)>h?s.next():o("translateX(0vw)")}i=null}}})}function _(s){}async function G({vistaView:{isReducedMotion:s},htmlElements:{to:t},index:{from:e,to:i},vistaView:{elements:n,imageContainer:o,options:a}},r){if(!t||r.aborted||s||!(Math.abs(i-e)===1||e===0&&i===n.length-1||e===n.length-1&&i===0))return;const c=Math.round(a.animationDurationBase*1.5*100)/100;return new Promise(m=>{o.addEventListener("transitionend",()=>{m(()=>{o.style.transition="",o.style.transform=""})},{once:!0});const f=i===e+1||e===n.length-1&&i===0?"translateX(-100vw)":"translateX(100vw)";o.style.transition=`transform ${c}ms ease`,o.style.transform=f})}class J{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 Q{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=C(t.x-this.initialCenter.x),this.translate.y=C(t.y-this.initialCenter.y),this.image.style.transform=`translate3d(${this.translate.x}px, ${this.translate.y}px, 0px) scale(${this.scale})`)}scaleMove(t,e){if(!this.image)return;this.rect||(this.rect=this.image.getBoundingClientRect()),e||(e=this.initialCenter);const i=P(this.rect.width*t,this.minDimension.minWidth,this.maxDimension.width);this.onScale&&this.onScale({scale:i/(this.maxDimension.width/this.maxZoomLevel),isMax:i>=this.maxDimension.width,isMin:i<=this.minDimension.initialWidth}),this.scale=C(i/this.rect.width);const n=this.rect.left+this.rect.width/2,o=this.rect.top+this.rect.height/2,a=this.initialCenter.x-n,r=this.initialCenter.y-o,h=a*(1-this.scale),c=r*(1-this.scale),m=e.x-this.initialCenter.x,f=e.y-this.initialCenter.y;this.translate.x=C(h+m),this.translate.y=C(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:a})=>{if(i)return;if(Math.abs(o)<.001&&Math.abs(a)<.001)return this.normalize();o*=.9,a*=.9;const r=this.image.getBoundingClientRect();this.translate.x=C(this.translate.x+o),this.translate.y=C(this.translate.y+a),r.right<window.innerWidth/2&&(this.translate.x+=(window.innerWidth/2-r.right)*.1,o*=.7),r.left>window.innerWidth/2&&(this.translate.x-=(r.left-window.innerWidth/2)*.1,o*=.7),r.bottom<window.innerHeight/2&&(this.translate.y+=(window.innerHeight/2-r.bottom)*.1,a*=.7),r.top>window.innerHeight/2&&(this.translate.y-=(r.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:o,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;let e=this.rect.width*this.scale,i=this.rect.height*this.scale;if(Math.round(e)===Math.round(this.minDimension.initialWidth)&&(e=this.minDimension.initialWidth,i=this.minDimension.initialHeight),this.image.style.width=`${e}px`,this.image.style.height=`${i}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(),e<=this.minDimension.closingWidth)return this.clean(),!0;if(e<this.minDimension.initialWidth)this.accumulatedTranslate.x=0,this.accumulatedTranslate.y=0,requestAnimationFrame(()=>{const n=this.image;n&&(n.addEventListener("transitionend",()=>{n&&(this.clean(),this.rect=null)},{once:!0}),n.style.transition="all 222ms ease",n.style.width=`${this.minDimension.initialWidth}px`,n.style.height=`${this.minDimension.initialHeight}px`,n.style.left="50%",n.style.top="50%")});else if(t){let n=!1;if(this.rect.right<window.innerWidth/2&&(n=!0,this.accumulatedTranslate.x+=window.innerWidth/2-this.rect.right),this.rect.left>window.innerWidth/2&&(n=!0,this.accumulatedTranslate.x-=this.rect.left-window.innerWidth/2),this.rect.bottom<window.innerHeight/2&&(n=!0,this.accumulatedTranslate.y+=window.innerHeight/2-this.rect.bottom),this.rect.top>window.innerHeight/2&&(n=!0,this.accumulatedTranslate.y-=this.rect.top-window.innerHeight/2),n){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 tt{constructor(){l(this,"fiolast",{})}fio(t,e,i=50){const o=Date.now()-(this.fiolast[e]??0),a=()=>{this.fiolast[e]=Date.now(),t()};if(!this.fiolast[e]){a();return}o>=i&&a()}}const L={somethingOpened:null};class et{constructor(t,e={}){l(this,"options");l(this,"elements");l(this,"isReducedMotion");l(this,"currentIndex",-1);l(this,"currentChildren",null);l(this,"setupFunction",U);l(this,"initFunction",V);l(this,"closeFunction",_);l(this,"transitionFunction",G);l(this,"pointers",null);l(this,"imageState");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 tt);l(this,"lastSwapTime",0);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(W(i,n,o,!1),n.classList.contains("vvw--loaded")){const{width:a,height:r}=T(n);n.style.setProperty("--vvw-current-w",`${a}px`),n.style.setProperty("--vvw-current-h",`${r}px`),n.dataset.vvwWidth=a.toString(),n.dataset.vvwHeight=r.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 a=this.pointers.getCentroid();t.setInitialCenter(a)}if(o.pointers.length>=2){i=!0;const a=this.pointers.getCentroid();e=this.pointers.getPointerDistance(o.pointers[0],o.pointers[1]),t.setInitialCenter(a)}}else if(o.event==="move"){if(this.isZoomedIn&&o.pointers.length===1&&o.lastPointerLen===0){const a=this.pointers.getCentroid();t.move(a)}if(o.pointers.length>=2&&i){const a=this.pointers.getCentroid(),r=this.pointers.getPointerDistance(o.pointers[0],o.pointers[1]);t.scaleMove(r/e,a)}}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(a=>a({...o,hasInternalExecution:this.isZoomedIn||i}))}});this.elements=t,this.options={...H,...e,controls:{...H.controls,...e.controls}},this.imageState=new Q(this.options.maxZoomLevel,i=>{var n,o,a,r,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,(a=this.qs(".vvw-zoom-out"))==null||a.removeAttribute("disabled"),(r=this.qs('.vvw-item[data-vvw-idx="'+this.currentIndex+'"]'))==null||r.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:a}=this.getChildElements(i,n),r=this.imageContainer,h=this.currentChildren,c={htmlElements:{from:h.htmls,to:o},images:{from:h.images,to:a},index:{from:t,to:this.currentIndex},via:e||{next:!1,prev:!1},vistaView:this};this.setupFunction(c),this.currentChildren={htmls:o,images:a},this.displayActiveIndex();const m=this.abortController.signal,f=performance.now(),E=f-this.lastSwapTime<this.options.rapidLimit;let y=null;E||(y=await this.transitionFunction(c,m)),this.lastSwapTime=f;const d=o[Math.floor(o.length/2)].dataset.vvwIdx,g=r.querySelector(`.vvw-item[data-vvw-idx="${d}"] img.vvw-img-hi`),p=g.getAttribute("style")||"",x=g.classList.contains("vvw--loaded"),u=g.width,I=g.height;this.imageState.reset(),r.innerHTML="",y instanceof Function&&y(),o.forEach(S=>{const b=S.querySelector("img.vvw-img-hi");S.dataset.vvwPos==="0"&&!m.aborted&&p&&x&&u&&I&&(b.classList.add("vvw--loaded"),b.classList.add("vvw--ready"),b.setAttribute("style",p),b.width=u,b.height=I,b.dataset.vvwWidth=u.toString(),b.dataset.vvwHeight=I.toString()),r.appendChild(S),b.classList.contains("vvw--ready")&&(this.imageState.setCurrentImage(b),this.imageState.setInitialCenter())}),this.waitForImagesToLoad(),this.options.onImageView&&this.options.onImageView(c)}getChildElements(t,e){const i=[],n=[];for(let o=-t;o<=t;o++){const a=(e+o+this.elements.length)%this.elements.length,r=this.elements[a],h=r instanceof HTMLImageElement?r:r instanceof HTMLAnchorElement&&r.querySelector("img")||void 0,c=r instanceof HTMLElement?{index:a,imageElm:h instanceof HTMLImageElement?h:void 0,anchorElm:r instanceof HTMLAnchorElement?r:void 0,src:r.dataset.vistaviewSrc||r.getAttribute("href")||r.getAttribute("src")||"",thumb:r.dataset.vistaviewThumb||(h instanceof HTMLImageElement?h.getAttribute("src"):void 0)||r.getAttribute("href")||void 0,alt:h instanceof HTMLImageElement&&h.getAttribute("alt")||void 0}:{index:a,...r};n.push(c),i.push(N(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 a;const t=this.currentIndex;this.elements instanceof NodeList&&this.elements.forEach((r,h)=>{r.style.opacity="",h===t&&(r.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 r=(a=this.currentChildren)==null?void 0:a.images.find(c=>c.index===t),h=(r==null?void 0:r.alt)||"";h?(o.textContent=h,o.setAttribute("aria-label",`Image ${i} of ${n}: ${h}`)):(o.textContent="",o.setAttribute("aria-label",`Image ${i} of ${n}`))}}waitForImagesToLoad(){this.imageContainer.querySelectorAll("img.vvw-img-hi:not(.vvw--loaded)").forEach(i=>{const n=i,o=()=>{var r;n.width=n.naturalWidth,n.height=n.naturalHeight;const a=(r=n.parentElement)==null?void 0:r.matches(`[data-vvw-idx="${this.currentIndex}"]`);n.addEventListener("transitionend",()=>{a&&(this.imageState.setCurrentImage(n),this.imageState.setInitialCenter()),n.classList.add("vvw--ready")},{once:!0}),n.classList.add("vvw--loaded"),requestAnimationFrame(()=>{const{width:h,height:c}=T(n);n.style.setProperty("--vvw-current-w",`${h}px`),n.style.setProperty("--vvw-current-h",`${c}px`),n.dataset.vvwWidth=h.toString(),n.dataset.vvwHeight=c.toString(),n.style.setProperty("--vvw-current-radius","0px")})};if(n.complete&&n.naturalWidth!==0){o();return}n.addEventListener("load",()=>{o()}),n.addEventListener("error",()=>{n.classList.add("vvw--loaderror")})})}registerPointerListener(t){this.pointerListeners.push(t)}unregisterPointerListeners(){this.pointerListeners=[]}open(t=0){var c,m,f,E,y;if(L.somethingOpened)return;L.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}`);const i=this.options.preloads||0,n=t,{images:o,htmls:a}=this.getChildElements(i,n),r={htmlElements:{from:null,to:a},images:{from:null,to:o},index:{from:null,to:this.currentIndex},via:{next:!1,prev:!1},vistaView:this};this.setupFunction(r),this.currentChildren={htmls:a,images:o},a.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()),(E=this.qs(".vvw-prev>button"))==null||E.addEventListener("click",()=>this.prev()),(y=this.qs(".vvw-next>button"))==null||y.addEventListener("click",()=>this.next()),window.addEventListener("keydown",this.onKeyDown),window.addEventListener("wheel",this.onScroll,{passive:!1}),window.addEventListener("resize",this.onResizeHandler),this.pointers=new J({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 g=d;g.addEventListener("click",p=>{const x=p.currentTarget.dataset.vvwControl,u=h[x],I=this.currentChildren.images.find(S=>S.index===this.currentIndex);u&&I&&(u.onClick.constructor.name==="AsyncFunction"?(g.classList.add("vvw--loading"),u.onClick(I,this).finally(()=>{g.classList.remove("vvw--loading")})):u.onClick(I,this))})}),this.initFunction(this),requestAnimationFrame(()=>{var d;(d=this.root)==null||d.addEventListener("transitionend",()=>{var g,p;(g=this.root)==null||g.classList.add("vvw--settled"),this.waitForImagesToLoad(),(p=this.qs(".vvw-bg"))==null||p.addEventListener("click",x=>{x.preventDefault(),this.close()}),this.imageState.reset()},{once:!0}),this.root.classList.add("vvw--active"),this.displayActiveIndex(),this.options.onOpen&&this.options.onOpen(this),this.options.onImageView&&this.options.onImageView(r)})}async close(t=!0){L.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(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=""}),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="",L.somethingOpened=null,this.closeFunction(this),this.options.onClose&&this.options.onClose(this))}next(){if(L.somethingOpened!==this)return;const t=(this.currentIndex+1)%this.elements.length;this.view(t,{next:!0,prev:!1})}prev(){if(L.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 L.somethingOpened!==this?-1:this.currentIndex}view(t,e){if(L.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 it(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 nt({elements:s,...t}){if(!s)throw new Error("No elements");let e=it(s);if(typeof e=="string")return null;const i=new et(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=H,v.vistaView=nt,v.vistaViewDownload=F,Object.defineProperty(v,Symbol.toStringTag,{value:"Module"})}));
|
|
11
|
+
</div>`)}const M={animationDurationBase:333,zoomStep:500,maxZoomLevel:2,touchSpeedThreshold:.5,preloads:1,keyboardListeners:!0,arrowOnSmallScreens:!1,rapidLimit:222,controls:{topLeft:["indexDisplay"],topRight:["zoomIn","zoomOut",A(),"close"],bottomLeft:["description"]}};function U(s){}function V(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",K(s)}function K(s){let t={x:0,y:0},e={x:0,y:0},n=null;s.registerPointerListener(i=>{if(!i.hasInternalExecution&&!(i.pointers.length>1)){if(i.event==="down"&&(t={x:i.pointer.x,y:i.pointer.y},e={x:i.pointer.x,y:i.pointer.y}),i.event==="move"){e={x:i.pointer.x,y:i.pointer.y};const o=e.x-t.x,a=e.y-t.y;if(!n&&Math.abs(a)>Math.abs(o)||n==="y"){const r=a/window.innerHeight*100;s.imageContainer.style.transition="none",s.imageContainer.style.transform=`translateY(${r}vh)`,n="y"}else if(!n&&Math.abs(o)>Math.abs(a)||n==="x"){const r=o/window.innerWidth*100;s.imageContainer.style.transition="none",s.imageContainer.style.transform=`translateX(${r}vw)`,n="x"}}if(i.event==="up"||i.event==="cancel"){let o=function(a){var r;(r=s.imageContainer)==null||r.addEventListener("transitionend",function h(){var c;(c=s.imageContainer)==null||c.removeEventListener("transitionend",h),s.imageContainer.style.transition="",s.imageContainer.style.transform=""}),s.imageContainer.style.transition="transform 222ms ease",s.imageContainer.style.transform=a};if(n==="y"){const a=e.y-t.y,r=i.pointer.movementY,h=8;s.imageContainer.style.transition="",a>0&&Math.abs(r)>h||a<0&&Math.abs(r)>h?(s.imageContainer.style.transition="transform 222ms ease",s.imageContainer.style.transform="translateY(0vh)",s.close()):o("translateY(0vh)")}if(n==="x"){const a=e.x-t.x,r=i.pointer.movementX,h=8;s.imageContainer.style.transition="",a>0&&Math.abs(r)>h?s.prev():a<0&&Math.abs(r)>h?s.next():o("translateX(0vw)")}n=null}}})}function _(s){}async function G({vistaView:{isReducedMotion:s},htmlElements:{to:t},index:{from:e,to:n},vistaView:{elements:i,imageContainer:o,options:a}},r){if(!t||r.aborted||s||!(Math.abs(n-e)===1||e===0&&n===i.length-1||e===i.length-1&&n===0))return;const c=Math.round(a.animationDurationBase*1.5*100)/100;return new Promise(m=>{o.addEventListener("transitionend",()=>{m(()=>{o.style.transition="",o.style.transform=""})},{once:!0});const f=n===e+1||e===i.length-1&&n===0?"translateX(-100vw)":"translateX(100vw)";o.style.transition=`transform ${c}ms ease`,o.style.transform=f})}class J{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(n=>n({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(n=>n.id===t.pointerId);e&&(e.movementX=t.movementX,e.movementY=t.movementY,e.x=t.clientX,e.y=t.clientY,this.listeners.forEach(n=>n({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 n=this.pointers[e];n.x=t.clientX,n.y=t.clientY;const i=this.pointers.length;this.pointers.splice(e,1),this.listeners.forEach(o=>o({event:"up",pointer:n,pointers:this.pointers,lastPointerLen:i}))});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 n=this.pointers[e];n.x=t.clientX,n.y=t.clientY;const i=this.pointers.length;this.pointers.splice(e,1),this.listeners.forEach(o=>o({event:"cancel",pointer:n,pointers:this.pointers,lastPointerLen:i}))});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 n=t.x-e.x,i=t.y-e.y;return Math.sqrt(n*n+i*i)}getCentroid(){if(this.pointers.length===0)return null;const t=this.pointers.reduce((e,n)=>(e.x+=n.x,e.y+=n.y,e),{x:0,y:0});return{x:t.x/this.pointers.length,y:t.y/this.pointers.length}}}class Q{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),n=parseFloat(t.dataset.vvwHeight);this.minDimension={initialWidth:e,initialHeight:n,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=C(t.x-this.initialCenter.x),this.translate.y=C(t.y-this.initialCenter.y),this.image.style.transform=`translate3d(${this.translate.x}px, ${this.translate.y}px, 0px) scale(${this.scale})`)}scaleMove(t,e){if(!this.image)return;this.rect||(this.rect=this.image.getBoundingClientRect()),e||(e=this.initialCenter);const n=P(this.rect.width*t,this.minDimension.minWidth,this.maxDimension.width);this.onScale&&this.onScale({scale:n/(this.maxDimension.width/this.maxZoomLevel),isMax:n>=this.maxDimension.width,isMin:n<=this.minDimension.initialWidth}),this.scale=C(n/this.rect.width);const i=this.rect.left+this.rect.width/2,o=this.rect.top+this.rect.height/2,a=this.initialCenter.x-i,r=this.initialCenter.y-o,h=a*(1-this.scale),c=r*(1-this.scale),m=e.x-this.initialCenter.x,f=e.y-this.initialCenter.y;this.translate.x=C(h+m),this.translate.y=C(c+f),this.image.style.transform=`translate3d(${this.translate.x}px, ${this.translate.y}px, 0px) scale(${this.scale})`,n<=this.minDimension.closingWidth?this.image.style.opacity="0.5":this.image.style.opacity=""}moveAndNormalize(t){let e=0,n=!1;const i=({x:o,y:a})=>{if(n)return;if(Math.abs(o)<.001&&Math.abs(a)<.001)return this.normalize();o*=.9,a*=.9;const r=this.image.getBoundingClientRect();this.translate.x=C(this.translate.x+o),this.translate.y=C(this.translate.y+a),r.right<window.innerWidth/2&&(this.translate.x+=(window.innerWidth/2-r.right)*.1,o*=.7),r.left>window.innerWidth/2&&(this.translate.x-=(r.left-window.innerWidth/2)*.1,o*=.7),r.bottom<window.innerHeight/2&&(this.translate.y+=(window.innerHeight/2-r.bottom)*.1,a*=.7),r.top>window.innerHeight/2&&(this.translate.y-=(r.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(()=>i({x:o,y:a}))};return i({x:t.movementX,y:t.movementY}),()=>{n=!0,cancelAnimationFrame(e),this.normalize(!1)}}animateZoom(t){if(!this.image)return;this.rect||(this.rect=this.image.getBoundingClientRect());const e=Date.now(),n=this.image;this.rect.width*t<this.minDimension.closingWidth||n.width<Math.floor(this.minDimension.initialWidth)||(n.addEventListener("transitionend",()=>{this.animationTimestamp===e&&n&&(n.style.transition="",this.normalize())},{once:!0}),n.style.transition||(n.style.transition="all 222ms ease"),this.animationTimestamp=e,this.scaleMove(t))}normalize(t=!0){if(!this.image||!this.rect)return;let e=this.rect.width*this.scale,n=this.rect.height*this.scale;if(Math.round(e)===Math.round(this.minDimension.initialWidth)&&(e=this.minDimension.initialWidth,n=this.minDimension.initialHeight),this.image.style.width=`${e}px`,this.image.style.height=`${n}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(),e<=this.minDimension.closingWidth)return this.clean(),!0;if(e<this.minDimension.initialWidth)this.accumulatedTranslate.x=0,this.accumulatedTranslate.y=0,requestAnimationFrame(()=>{const i=this.image;i&&(i.addEventListener("transitionend",()=>{i&&(this.clean(),this.rect=null)},{once:!0}),i.style.transition="all 222ms ease",i.style.width=`${this.minDimension.initialWidth}px`,i.style.height=`${this.minDimension.initialHeight}px`,i.style.left="50%",i.style.top="50%")});else if(t){let i=!1;if(this.rect.right<window.innerWidth/2&&(i=!0,this.accumulatedTranslate.x+=window.innerWidth/2-this.rect.right),this.rect.left>window.innerWidth/2&&(i=!0,this.accumulatedTranslate.x-=this.rect.left-window.innerWidth/2),this.rect.bottom<window.innerHeight/2&&(i=!0,this.accumulatedTranslate.y+=window.innerHeight/2-this.rect.bottom),this.rect.top>window.innerHeight/2&&(i=!0,this.accumulatedTranslate.y-=this.rect.top-window.innerHeight/2),i){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 tt{constructor(){l(this,"fiolast",{})}fio(t,e,n=50){const o=Date.now()-(this.fiolast[e]??0),a=()=>{this.fiolast[e]=Date.now(),t()};if(!this.fiolast[e]){a();return}o>=n&&a()}}const L={somethingOpened:null};class et{constructor(t,e={}){l(this,"options");l(this,"elements");l(this,"isReducedMotion");l(this,"currentIndex",-1);l(this,"currentChildren",null);l(this,"setupFunction",U);l(this,"initFunction",V);l(this,"closeFunction",_);l(this,"transitionFunction",G);l(this,"pointers",null);l(this,"imageState");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 tt);l(this,"lastSwapTime",0);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 n=this.currentChildren.images[e],i=t.querySelector("img.vvw-img-hi"),o=t.querySelector("img.vvw-img-lo");if(W(n,i,o,!1),i.classList.contains("vvw--loaded")){const{width:a,height:r}=T(i);i.style.setProperty("--vvw-current-w",`${a}px`),i.style.setProperty("--vvw-current-h",`${r}px`),i.dataset.vvwWidth=a.toString(),i.dataset.vvwHeight=r.toString()}})});l(this,"pointerListeners",[]);l(this,"getInternalPointerListener",()=>{const t=this.imageState;let e=0,n=!1,i=()=>{};return o=>{if(o.event==="down"){if(i(),this.isZoomedIn&&o.pointers.length===1){const a=this.pointers.getCentroid();t.setInitialCenter(a)}if(o.pointers.length>=2){n=!0;const a=this.pointers.getCentroid();e=this.pointers.getPointerDistance(o.pointers[0],o.pointers[1]),t.setInitialCenter(a)}}else if(o.event==="move"){if(this.isZoomedIn&&o.pointers.length===1&&o.lastPointerLen===0){const a=this.pointers.getCentroid();t.move(a)}if(o.pointers.length>=2&&n){const a=this.pointers.getCentroid(),r=this.pointers.getPointerDistance(o.pointers[0],o.pointers[1]);t.scaleMove(r/e,a)}}else(o.event==="up"||o.event==="cancel")&&(n||this.isZoomedIn)&&(n?(n=!1,t.normalize()&&requestAnimationFrame(()=>{this.close()})):this.isZoomedIn&&o.pointers.length===0&&(i=t.moveAndNormalize(o.pointer)));this.pointerListeners.forEach(a=>a({...o,hasInternalExecution:this.isZoomedIn||n}))}});this.elements=t,this.options={...M,...e,controls:{...M.controls,...e.controls}},this.imageState=new Q(this.options.maxZoomLevel,n=>{var i,o,a,r,h,c;n.isMin?(this.isZoomedIn=!1,(i=this.qs(".vvw-zoom-out"))==null||i.setAttribute("disabled","true"),(o=this.qs('.vvw-item[data-vvw-idx="'+this.currentIndex+'"]'))==null||o.style.setProperty("pointer-events","none")):(this.isZoomedIn=!0,(a=this.qs(".vvw-zoom-out"))==null||a.removeAttribute("disabled"),(r=this.qs('.vvw-item[data-vvw-idx="'+this.currentIndex+'"]'))==null||r.style.setProperty("pointer-events","auto")),n.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((n,i)=>{n.dataset.vistaIdx=i.toString(),n.addEventListener("click",this.defaultOnClickHandler),n.addEventListener("pointerup",this.onClickElements)})}qs(t){return this.root?this.root.querySelector(t):null}async swap(t,e){const n=this.options.preloads||0,i=this.currentIndex,{htmls:o,images:a}=this.getChildElements(n,i),r=this.imageContainer,h=this.currentChildren,c={htmlElements:{from:h.htmls,to:o},images:{from:h.images,to:a},index:{from:t,to:this.currentIndex},via:e||{next:!1,prev:!1},vistaView:this};this.setupFunction(c),this.currentChildren={htmls:o,images:a},this.displayActiveIndex();const m=this.abortController.signal,f=performance.now(),E=f-this.lastSwapTime<this.options.rapidLimit;let y=null;E||(y=await this.transitionFunction(c,m)),this.lastSwapTime=f;const d=o[Math.floor(o.length/2)].dataset.vvwIdx,g=r.querySelector(`.vvw-item[data-vvw-idx="${d}"] img.vvw-img-hi`),p=g.getAttribute("style")||"",x=g.classList.contains("vvw--loaded"),u=g.width,I=g.height;this.imageState.reset(),r.innerHTML="",y instanceof Function&&y(),o.forEach(S=>{const b=S.querySelector("img.vvw-img-hi");S.dataset.vvwPos==="0"&&!m.aborted&&p&&x&&u&&I&&(b.classList.add("vvw--loaded"),b.classList.add("vvw--ready"),b.setAttribute("style",p),b.width=u,b.height=I,b.dataset.vvwWidth=u.toString(),b.dataset.vvwHeight=I.toString()),r.appendChild(S),b.classList.contains("vvw--ready")&&(this.imageState.setCurrentImage(b),this.imageState.setInitialCenter())}),this.waitForImagesToLoad(),this.options.onImageView&&this.options.onImageView(c)}getChildElements(t,e){const n=[],i=[];for(let o=-t;o<=t;o++){const a=(e+o+this.elements.length)%this.elements.length,r=this.elements[a],h=r instanceof HTMLImageElement?r:r instanceof HTMLAnchorElement&&r.querySelector("img")||void 0,c=r instanceof HTMLElement?{index:a,imageElm:h instanceof HTMLImageElement?h:void 0,anchorElm:r instanceof HTMLAnchorElement?r:void 0,src:r.dataset.vistaviewSrc||r.getAttribute("href")||r.getAttribute("src")||"",thumb:r.dataset.vistaviewThumb||(h instanceof HTMLImageElement?h.getAttribute("src"):void 0)||r.getAttribute("href")||void 0,alt:h instanceof HTMLImageElement&&h.getAttribute("alt")||void 0}:{index:a,...r};i.push(c),n.push(B(c,o))}return{htmls:n,images:i}}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((r,h)=>{r.style.opacity="",h===t&&(r.style.opacity="0")});const e=this.qs(".vvw-index"),n=`${t+1}`,i=`${this.elements.length}`;e&&(e.textContent=`${n} / ${i}`);const o=this.qs(".vvw-desc");if(o){const r=(a=this.currentChildren)==null?void 0:a.images.find(c=>c.index===t),h=(r==null?void 0:r.alt)||"";h?(o.textContent=h,o.setAttribute("aria-label",`Image ${n} of ${i}: ${h}`)):(o.textContent="",o.setAttribute("aria-label",`Image ${n} of ${i}`))}}waitForImagesToLoad(){this.imageContainer.querySelectorAll("img.vvw-img-hi:not(.vvw--loaded)").forEach(n=>{const i=n,o=()=>{var r;i.width=i.naturalWidth,i.height=i.naturalHeight;const a=(r=i.parentElement)==null?void 0:r.matches(`[data-vvw-idx="${this.currentIndex}"]`);i.addEventListener("transitionend",()=>{a&&(this.imageState.setCurrentImage(i),this.imageState.setInitialCenter()),i.classList.add("vvw--ready")},{once:!0}),i.classList.add("vvw--loaded"),requestAnimationFrame(()=>{const{width:h,height:c}=T(i);i.style.setProperty("--vvw-current-w",`${h}px`),i.style.setProperty("--vvw-current-h",`${c}px`),i.dataset.vvwWidth=h.toString(),i.dataset.vvwHeight=c.toString(),i.style.setProperty("--vvw-current-radius","0px")})};if(i.complete&&i.naturalWidth!==0){o();return}i.addEventListener("load",()=>{o()}),i.addEventListener("error",()=>{var r;i.classList.add("vvw--loaderror");const a=document.createElement("p");a.className="vvw-img-err",a.setAttribute("role","alert"),a.textContent="Error loading image",(r=i.parentNode)==null||r.appendChild(a)})})}registerPointerListener(t){this.pointerListeners.push(t)}unregisterPointerListeners(){this.pointerListeners=[]}open(t=0){var c,m,f,E,y;if(L.somethingOpened)return;L.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}`);const n=this.options.preloads||0,i=t,{images:o,htmls:a}=this.getChildElements(n,i),r={htmlElements:{from:null,to:a},images:{from:null,to:o},index:{from:null,to:this.currentIndex},via:{next:!1,prev:!1},vistaView:this};this.setupFunction(r),this.currentChildren={htmls:a,images:o},a.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()),(E=this.qs(".vvw-prev>button"))==null||E.addEventListener("click",()=>this.prev()),(y=this.qs(".vvw-next>button"))==null||y.addEventListener("click",()=>this.next()),window.addEventListener("keydown",this.onKeyDown),window.addEventListener("wheel",this.onScroll,{passive:!1}),window.addEventListener("resize",this.onResizeHandler),this.pointers=new J({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 g=d;g.addEventListener("click",p=>{const x=p.currentTarget.dataset.vvwControl,u=h[x],I=this.currentChildren.images.find(S=>S.index===this.currentIndex);u&&I&&(u.onClick.constructor.name==="AsyncFunction"?(g.classList.add("vvw--loading"),u.onClick(I,this).finally(()=>{g.classList.remove("vvw--loading")})):u.onClick(I,this))})}),this.initFunction(this),requestAnimationFrame(()=>{var d;(d=this.root)==null||d.addEventListener("transitionend",()=>{var g,p;(g=this.root)==null||g.classList.add("vvw--settled"),this.waitForImagesToLoad(),(p=this.qs(".vvw-bg"))==null||p.addEventListener("click",x=>{x.preventDefault(),this.close()}),this.imageState.reset()},{once:!0}),this.root.classList.add("vvw--active"),this.displayActiveIndex(),this.options.onOpen&&this.options.onOpen(this),this.options.onImageView&&this.options.onImageView(r)})}async close(t=!0){L.somethingOpened===this&&this.root&&(t?await new Promise(e=>{let i=0;this.root.addEventListener("transitionend",o=>{o.target===this.root&&(i++,i===2&&this.elements instanceof NodeList&&this.elements.forEach(a=>{a.style.opacity=""}),i===3&&e(null))}),this.root.classList.add("vvw--closing")}):this.elements instanceof NodeList&&this.elements.forEach(e=>{e.style.opacity=""}),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="",L.somethingOpened=null,this.closeFunction(this),this.options.onClose&&this.options.onClose(this))}next(){if(L.somethingOpened!==this)return;const t=(this.currentIndex+1)%this.elements.length;this.view(t,{next:!0,prev:!1})}prev(){if(L.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 L.somethingOpened!==this?-1:this.currentIndex}view(t,e){if(L.somethingOpened!==this||t<0||t>=this.elements.length)return;const n=this.currentIndex;this.currentIndex=t;const i=this.abortController;i==null||i.abort(),this.abortController=new AbortController,this.swap(n,e)}}function it(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 n=t[e];if(!(n.dataset.vistaviewSrc||n.getAttribute("href")||n.getAttribute("src")||""))return`Element at index ${e} is missing 'src' / 'data-vistaview-src' / 'href' attribute.`}else{const e=s;for(let n=0;n<e.length;n++)if(!e[n].src)return`Element at index ${n} is missing 'src' attribute.`}return t||s}function nt({elements:s,...t}){if(!s)throw new Error("No elements");let e=it(s);if(typeof e=="string")return null;const n=new et(e,t);return{open:(i=0)=>n.open(i),close:()=>n.close(),next:()=>n.next(),prev:()=>n.prev(),destroy:()=>n.destroy(),getCurrentIndex:()=>n.getCurrentIndex(),view:i=>{n.view(i)}}}v.DefaultOptions=M,v.vistaView=nt,v.vistaViewDownload=A,Object.defineProperty(v,Symbol.toStringTag,{value:"Module"})}));
|