@redot-src/glare 1.1.0 → 1.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/glare.css +1 -1
- package/dist/glare.esm.js +460 -398
- package/dist/glare.esm.js.map +1 -1
- package/dist/glare.js +3 -3
- package/dist/glare.js.map +1 -1
- package/dist/icons.d.ts +1 -0
- package/dist/types.d.ts +5 -2
- package/package.json +1 -1
package/dist/glare.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const
|
|
1
|
+
const it = {
|
|
2
2
|
CLOSE: "Close",
|
|
3
3
|
NEXT: "Next",
|
|
4
4
|
PREV: "Previous",
|
|
@@ -14,34 +14,35 @@ const K = {
|
|
|
14
14
|
THUMBS: "Thumbnails",
|
|
15
15
|
DOWNLOAD: "Download",
|
|
16
16
|
SHARE: "Share",
|
|
17
|
+
MORE: "More options",
|
|
17
18
|
COPY: "Copy link",
|
|
18
19
|
ZOOM: "Zoom",
|
|
19
20
|
ZOOM_OUT: "Zoom out"
|
|
20
21
|
};
|
|
21
|
-
function
|
|
22
|
+
function pt(e) {
|
|
22
23
|
const t = e.lang ?? "en";
|
|
23
|
-
return { ...
|
|
24
|
+
return { ...it, ...e.i18n?.en, ...e.i18n?.[t] };
|
|
24
25
|
}
|
|
25
|
-
function
|
|
26
|
+
function y(e, t) {
|
|
26
27
|
return e.replace(/\{\{(\w+)\}\}/g, (s, i) => t[i] ?? "");
|
|
27
28
|
}
|
|
28
|
-
function
|
|
29
|
+
function mt(e) {
|
|
29
30
|
return Object.entries(e).map(([t, s]) => `${encodeURIComponent(t)}=${encodeURIComponent(String(s))}`).join("&");
|
|
30
31
|
}
|
|
31
|
-
function
|
|
32
|
+
function gt(e, t) {
|
|
32
33
|
return e.replace(/\$(\d+)/g, (s, i) => t[Number(i)] ?? "");
|
|
33
34
|
}
|
|
34
|
-
const
|
|
35
|
+
const yt = {
|
|
35
36
|
youtube: {
|
|
36
37
|
matcher: /(?:youtube\.com|youtu\.be|youtube-nocookie\.com)\/(?:watch\?(?:.*&)?v=|v\/|u\/\w\/|embed\/|shorts\/)?([\w-]{11})/i,
|
|
37
|
-
type: "
|
|
38
|
+
type: "embed",
|
|
38
39
|
url: "https://www.youtube-nocookie.com/embed/$1",
|
|
39
40
|
thumb: "https://img.youtube.com/vi/$1/hqdefault.jpg",
|
|
40
41
|
params: { autoplay: 1, rel: 0, modestbranding: 1, playsinline: 1 }
|
|
41
42
|
},
|
|
42
43
|
vimeo: {
|
|
43
44
|
matcher: /vimeo\.com\/(?:video\/)?(\d+)/i,
|
|
44
|
-
type: "
|
|
45
|
+
type: "embed",
|
|
45
46
|
url: "https://player.vimeo.com/video/$1",
|
|
46
47
|
params: { autoplay: 1, title: 0, byline: 0, portrait: 0 }
|
|
47
48
|
},
|
|
@@ -49,29 +50,29 @@ const ht = {
|
|
|
49
50
|
matcher: /(?:maps\.)?google\.([a-z]{2,3}(?:\.[a-z]{2})?)\/(?:maps\/(?:place\/[^/]+\/)?@([^/]+)|maps\?q=([^&]+)|maps\/search\/([^/?]+))/i,
|
|
50
51
|
type: "iframe",
|
|
51
52
|
url: (e) => {
|
|
52
|
-
const [, t, s, i,
|
|
53
|
+
const [, t, s, i, r] = e;
|
|
53
54
|
if (s) {
|
|
54
|
-
const [
|
|
55
|
-
return `https://maps.google.${t}/maps?ll=${
|
|
55
|
+
const [n, a, l] = s.split(","), d = l ? Math.floor(parseFloat(l)) : 14;
|
|
56
|
+
return `https://maps.google.${t}/maps?ll=${n},${a}&z=${d}&output=embed`;
|
|
56
57
|
}
|
|
57
|
-
const
|
|
58
|
-
return `https://maps.google.${t}/maps?q=${
|
|
58
|
+
const o = encodeURIComponent(decodeURIComponent(i || r || ""));
|
|
59
|
+
return `https://maps.google.${t}/maps?q=${o}&output=embed`;
|
|
59
60
|
}
|
|
60
61
|
}
|
|
61
62
|
};
|
|
62
|
-
function
|
|
63
|
+
function q(e, t, s) {
|
|
63
64
|
if (typeof e == "function") return e(t, s);
|
|
64
|
-
if (typeof e == "string") return
|
|
65
|
+
if (typeof e == "string") return gt(e, t);
|
|
65
66
|
}
|
|
66
|
-
function
|
|
67
|
+
function bt(e, t) {
|
|
67
68
|
for (const s of Object.values(t ?? {})) {
|
|
68
69
|
const i = e.match(s.matcher);
|
|
69
70
|
if (!i) continue;
|
|
70
|
-
let
|
|
71
|
-
return s.params && (
|
|
72
|
-
src:
|
|
71
|
+
let r = q(s.url, i, e) ?? e;
|
|
72
|
+
return s.params && (r += (r.includes("?") ? "&" : "?") + mt(s.params)), {
|
|
73
|
+
src: r,
|
|
73
74
|
type: s.type ?? "iframe",
|
|
74
|
-
thumb:
|
|
75
|
+
thumb: q(s.thumb, i, e)
|
|
75
76
|
};
|
|
76
77
|
}
|
|
77
78
|
return null;
|
|
@@ -88,8 +89,9 @@ const f = (e) => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fi
|
|
|
88
89
|
play: f('<polygon points="6 3 20 12 6 21 6 3"/>'),
|
|
89
90
|
pause: f('<rect width="4" height="16" x="6" y="4"/><rect width="4" height="16" x="14" y="4"/>'),
|
|
90
91
|
fullscreen: f('<path d="M8 3H5a2 2 0 0 0-2 2v3"/><path d="M21 8V5a2 2 0 0 0-2-2h-3"/><path d="M3 16v3a2 2 0 0 0 2 2h3"/><path d="M16 21h3a2 2 0 0 0 2-2v-3"/>'),
|
|
91
|
-
fullscreenExit: f('<path d="M8 3v3a2 2 0 0 1-2 2H3"/><path d="M21 8h-3a2 2 0 0 1-2-2V3"/><path d="M3 16h3a2 2 0 0 1 2 2v3"/><path d="M16 21v-3a2 2 0 0 1 2-2h3"/>')
|
|
92
|
-
|
|
92
|
+
fullscreenExit: f('<path d="M8 3v3a2 2 0 0 1-2 2H3"/><path d="M21 8h-3a2 2 0 0 1-2-2V3"/><path d="M3 16h3a2 2 0 0 1 2 2v3"/><path d="M16 21v-3a2 2 0 0 1 2-2h3"/>'),
|
|
93
|
+
more: f('<circle cx="5" cy="12" r="1" fill="currentColor" stroke="none"/><circle cx="12" cy="12" r="1" fill="currentColor" stroke="none"/><circle cx="19" cy="12" r="1" fill="currentColor" stroke="none"/>')
|
|
94
|
+
}, v = (e, t, s, i = "") => `<button type="button" class="glare-button glare-button--${e}" data-glare-${e} title="{{${t}}}" aria-label="{{${t}}}"${i}>${s}</button>`, vt = `
|
|
93
95
|
<div class="glare-container" role="dialog" aria-modal="true" tabindex="-1">
|
|
94
96
|
<div class="glare-bg"></div>
|
|
95
97
|
<div class="glare-progress" hidden></div>
|
|
@@ -98,22 +100,23 @@ const f = (e) => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fi
|
|
|
98
100
|
<div class="glare-infobar"><span class="glare-infobar-index"></span></div>
|
|
99
101
|
<div class="glare-toolbar"></div>
|
|
100
102
|
<div class="glare-navigation">
|
|
101
|
-
${
|
|
102
|
-
${
|
|
103
|
+
${v("prev", "PREV", u.prev)}
|
|
104
|
+
${v("next", "NEXT", u.next)}
|
|
103
105
|
</div>
|
|
104
106
|
<div class="glare-stage"></div>
|
|
105
107
|
<div class="glare-caption"></div>
|
|
106
108
|
</div>
|
|
107
|
-
</div>`,
|
|
108
|
-
zoom:
|
|
109
|
-
slideshow:
|
|
110
|
-
thumbs:
|
|
111
|
-
share:
|
|
112
|
-
fullscreen:
|
|
113
|
-
|
|
109
|
+
</div>`, xt = {
|
|
110
|
+
zoom: v("zoom", "ZOOM", u.zoomIn),
|
|
111
|
+
slideshow: v("slideshow", "PLAY_START", u.play),
|
|
112
|
+
thumbs: v("thumbs", "THUMBS", u.thumbs, ' aria-expanded="false"'),
|
|
113
|
+
share: v("share", "SHARE", u.share),
|
|
114
|
+
fullscreen: v("fullscreen", "FULL_SCREEN", u.fullscreen),
|
|
115
|
+
more: v("more", "MORE", u.more, ' aria-expanded="false" aria-haspopup="true"'),
|
|
116
|
+
close: v("close", "CLOSE", u.close),
|
|
114
117
|
download: `<a class="glare-button glare-button--download" data-glare-download download target="_blank" rel="noopener" title="{{DOWNLOAD}}" aria-label="{{DOWNLOAD}}">${u.download}</a>`,
|
|
115
118
|
smallBtn: `<button type="button" class="glare-button glare-close-small" data-glare-close title="{{CLOSE}}" aria-label="{{CLOSE}}">${u.close}</button>`
|
|
116
|
-
},
|
|
119
|
+
}, wt = '<div class="glare-spinner" role="status" aria-label="{{LOADING}}"></div>', Et = '<div class="glare-error"><p>{{ERROR}}</p></div>', St = '<video class="glare-video" controls playsinline controlsList="nodownload" poster="{{poster}}"><source src="{{src}}" type="{{format}}"/>{{VIDEO_UNSUPPORTED}}</video>', Tt = '<iframe class="glare-iframe"></iframe>', Lt = `
|
|
117
120
|
<div class="glare-share" role="dialog" aria-label="{{SHARE}}">
|
|
118
121
|
<div class="glare-share-head">
|
|
119
122
|
<h4 class="glare-share-title">{{SHARE}}</h4>
|
|
@@ -126,15 +129,15 @@ const f = (e) => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fi
|
|
|
126
129
|
<input class="glare-share-input" type="text" value="{{url_direct}}" readonly />
|
|
127
130
|
<button type="button" class="glare-share-copy" data-glare-share-copy>{{COPY}}</button>
|
|
128
131
|
</div>
|
|
129
|
-
</div>`,
|
|
132
|
+
</div>`, rt = {
|
|
130
133
|
autoStart: !1,
|
|
131
134
|
axis: "x"
|
|
132
|
-
},
|
|
135
|
+
}, z = {
|
|
133
136
|
autoStart: !1,
|
|
134
137
|
speed: 3e3
|
|
135
|
-
},
|
|
138
|
+
}, ot = {
|
|
136
139
|
autoStart: !1
|
|
137
|
-
},
|
|
140
|
+
}, nt = {
|
|
138
141
|
closeExisting: !1,
|
|
139
142
|
loop: !1,
|
|
140
143
|
keyboard: !0,
|
|
@@ -173,65 +176,66 @@ const f = (e) => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fi
|
|
|
173
176
|
dblclickSlide: (e) => e.type === "image" ? "zoom" : !1
|
|
174
177
|
},
|
|
175
178
|
image: { preload: !1 },
|
|
176
|
-
video: { tpl:
|
|
179
|
+
video: { tpl: St, format: "", autoStart: !0 },
|
|
177
180
|
iframe: {
|
|
178
181
|
preload: !0,
|
|
179
182
|
css: {},
|
|
180
183
|
attr: { allowfullscreen: "true", allow: "autoplay; fullscreen; picture-in-picture" },
|
|
181
|
-
tpl:
|
|
184
|
+
tpl: Tt
|
|
182
185
|
},
|
|
183
186
|
ajax: { settings: { headers: { "X-Requested-With": "XMLHttpRequest" } } },
|
|
184
|
-
media:
|
|
187
|
+
media: yt,
|
|
185
188
|
hash: !0,
|
|
186
|
-
slideshow:
|
|
187
|
-
thumbs:
|
|
188
|
-
fullscreen:
|
|
189
|
+
slideshow: z,
|
|
190
|
+
thumbs: rt,
|
|
191
|
+
fullscreen: ot,
|
|
189
192
|
share: !0,
|
|
190
193
|
lang: "en",
|
|
191
|
-
i18n: { en:
|
|
192
|
-
baseTpl:
|
|
193
|
-
btnTpl:
|
|
194
|
-
spinnerTpl:
|
|
195
|
-
errorTpl:
|
|
196
|
-
},
|
|
197
|
-
function
|
|
198
|
-
return e ?
|
|
199
|
-
}
|
|
200
|
-
function
|
|
194
|
+
i18n: { en: it },
|
|
195
|
+
baseTpl: vt,
|
|
196
|
+
btnTpl: xt,
|
|
197
|
+
spinnerTpl: wt,
|
|
198
|
+
errorTpl: Et
|
|
199
|
+
}, Ct = /\.(avif|bmp|gif|jpe?g|png|svg|webp|ico)(\?.*)?$/i, Mt = /\.(mp4|webm|ogg|ogv|mov|m4v)(\?.*)?$/i, $t = /\.pdf(\?.*)?$/i, Ot = /^(#[\w-]+|\.[\w-]+)$/;
|
|
200
|
+
function At(e, t = "image") {
|
|
201
|
+
return e ? Ot.test(e) ? "inline" : Ct.test(e) ? "image" : Mt.test(e) ? "video" : $t.test(e) ? "iframe" : t : "html";
|
|
202
|
+
}
|
|
203
|
+
function It(e) {
|
|
201
204
|
const t = e.match(/\.(\w+)(?:\?|$)/)?.[1]?.toLowerCase();
|
|
202
205
|
return t ? `video/${t === "ogv" ? "ogg" : t}` : "video/mp4";
|
|
203
206
|
}
|
|
204
|
-
function
|
|
207
|
+
function at(e, t, s) {
|
|
205
208
|
const i = typeof e == "string" ? { src: e } : { ...e };
|
|
206
|
-
let
|
|
207
|
-
const a =
|
|
208
|
-
return a && (
|
|
209
|
+
let r = i.src ?? "", o = i.type, n = i.thumb;
|
|
210
|
+
const a = r ? bt(r, s.media) : null;
|
|
211
|
+
return a && (r = a.src ?? r, o ??= a.type, n ??= a.thumb), o || (o = i.html || i.content ? "html" : At(r, s.defaultType)), {
|
|
209
212
|
...i,
|
|
210
213
|
index: t,
|
|
211
|
-
src:
|
|
212
|
-
type:
|
|
213
|
-
thumb:
|
|
214
|
+
src: r,
|
|
215
|
+
type: o,
|
|
216
|
+
thumb: n,
|
|
214
217
|
caption: i.caption ?? i.title ?? "",
|
|
215
218
|
isLoaded: !1,
|
|
216
219
|
hasError: !1
|
|
217
220
|
};
|
|
218
221
|
}
|
|
219
|
-
const
|
|
220
|
-
function
|
|
222
|
+
const m = (e, t) => e.getAttribute(t) || void 0;
|
|
223
|
+
function Dt(e, t) {
|
|
221
224
|
return e.map((s, i) => {
|
|
222
|
-
const
|
|
223
|
-
return
|
|
225
|
+
const r = s.querySelector("img"), o = m(s, "data-caption") ?? m(s, "title") ?? "";
|
|
226
|
+
return at(
|
|
224
227
|
{
|
|
225
|
-
src:
|
|
226
|
-
type:
|
|
227
|
-
caption:
|
|
228
|
-
alt:
|
|
229
|
-
thumb:
|
|
230
|
-
width:
|
|
231
|
-
height:
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
228
|
+
src: m(s, "data-src") ?? m(s, "href") ?? "",
|
|
229
|
+
type: m(s, "data-type"),
|
|
230
|
+
caption: o,
|
|
231
|
+
alt: r?.getAttribute("alt") || o,
|
|
232
|
+
thumb: m(s, "data-thumb") ?? r?.getAttribute("src") ?? void 0,
|
|
233
|
+
width: m(s, "data-width"),
|
|
234
|
+
height: m(s, "data-height"),
|
|
235
|
+
ratio: m(s, "data-ratio"),
|
|
236
|
+
poster: m(s, "data-poster"),
|
|
237
|
+
downloadSrc: m(s, "data-download-src"),
|
|
238
|
+
html: m(s, "data-html"),
|
|
235
239
|
$trigger: s
|
|
236
240
|
},
|
|
237
241
|
i,
|
|
@@ -239,8 +243,8 @@ function Lt(e, t) {
|
|
|
239
243
|
);
|
|
240
244
|
});
|
|
241
245
|
}
|
|
242
|
-
function
|
|
243
|
-
return e.length && e[0] instanceof HTMLElement ?
|
|
246
|
+
function kt(e, t) {
|
|
247
|
+
return e.length && e[0] instanceof HTMLElement ? Dt(e, t) : e.map((s, i) => at(s, i, t));
|
|
244
248
|
}
|
|
245
249
|
function c(e, t = document) {
|
|
246
250
|
return t.querySelector(e);
|
|
@@ -248,167 +252,179 @@ function c(e, t = document) {
|
|
|
248
252
|
function $(e, t = document) {
|
|
249
253
|
return Array.from(t.querySelectorAll(e));
|
|
250
254
|
}
|
|
251
|
-
function
|
|
255
|
+
function g(e, t = "", s = "") {
|
|
252
256
|
const i = document.createElement(e);
|
|
253
257
|
return t && (i.className = t), s && (i.innerHTML = s), i;
|
|
254
258
|
}
|
|
255
|
-
function
|
|
256
|
-
return
|
|
259
|
+
function Rt(e) {
|
|
260
|
+
return g("div", "", e.trim()).firstElementChild;
|
|
257
261
|
}
|
|
258
|
-
function
|
|
262
|
+
function O(e) {
|
|
259
263
|
return /[<&]/.test(e) ? new DOMParser().parseFromString(e, "text/html").body.textContent?.trim() ?? "" : e.trim();
|
|
260
264
|
}
|
|
261
|
-
function
|
|
265
|
+
function _t(e, t = document) {
|
|
262
266
|
return e ? typeof e != "string" ? e : c(e, t) ?? c(e) : null;
|
|
263
267
|
}
|
|
264
|
-
function
|
|
268
|
+
function U(e) {
|
|
265
269
|
return typeof e == "number" ? `${e}px` : e;
|
|
266
270
|
}
|
|
267
271
|
function h(e, t, s, i) {
|
|
268
272
|
return e.addEventListener(t, s, i), () => e.removeEventListener(t, s, i);
|
|
269
273
|
}
|
|
270
|
-
function
|
|
274
|
+
function lt(e) {
|
|
271
275
|
requestAnimationFrame(() => requestAnimationFrame(e));
|
|
272
276
|
}
|
|
273
|
-
function
|
|
277
|
+
function Ft(e, t, s) {
|
|
274
278
|
let i = !1;
|
|
275
|
-
const
|
|
276
|
-
i || (i = !0, clearTimeout(
|
|
277
|
-
},
|
|
278
|
-
a.target === e &&
|
|
279
|
+
const r = () => {
|
|
280
|
+
i || (i = !0, clearTimeout(n), e.removeEventListener("transitionend", o), s());
|
|
281
|
+
}, o = (a) => {
|
|
282
|
+
a.target === e && r();
|
|
279
283
|
};
|
|
280
|
-
e.addEventListener("transitionend",
|
|
281
|
-
const
|
|
284
|
+
e.addEventListener("transitionend", o);
|
|
285
|
+
const n = setTimeout(r, t + 50);
|
|
282
286
|
}
|
|
283
|
-
function
|
|
287
|
+
function Ht() {
|
|
284
288
|
return navigator.maxTouchPoints > 0 && window.matchMedia("(pointer: coarse)").matches;
|
|
285
289
|
}
|
|
286
|
-
function
|
|
290
|
+
function A() {
|
|
287
291
|
return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
288
292
|
}
|
|
289
|
-
function
|
|
293
|
+
function ct() {
|
|
290
294
|
const e = document;
|
|
291
295
|
return !!(e.fullscreenEnabled ?? e.webkitFullscreenEnabled);
|
|
292
296
|
}
|
|
293
|
-
const
|
|
294
|
-
function
|
|
297
|
+
const B = "glare-lock";
|
|
298
|
+
function W(e) {
|
|
295
299
|
const t = document.documentElement;
|
|
296
300
|
if (e) {
|
|
297
301
|
const s = window.innerWidth - t.clientWidth;
|
|
298
|
-
t.classList.add(
|
|
302
|
+
t.classList.add(B), s > 0 && (t.style.marginRight = `${s}px`);
|
|
299
303
|
} else
|
|
300
|
-
t.classList.remove(
|
|
304
|
+
t.classList.remove(B), t.style.marginRight = "";
|
|
301
305
|
}
|
|
302
306
|
const S = "glare-hidden";
|
|
303
|
-
function
|
|
304
|
-
const
|
|
305
|
-
|
|
306
|
-
const
|
|
307
|
-
if (!
|
|
308
|
-
const
|
|
309
|
-
container:
|
|
310
|
-
bg: c(".glare-bg",
|
|
311
|
-
inner: c(".glare-inner",
|
|
312
|
-
stage:
|
|
313
|
-
caption: c(".glare-caption",
|
|
314
|
-
toolbar: c(".glare-toolbar",
|
|
315
|
-
infobar: c(".glare-infobar",
|
|
316
|
-
navigation: c(".glare-navigation",
|
|
307
|
+
function Pt(e, t, s, i) {
|
|
308
|
+
const r = Rt(y(e.baseTpl, t));
|
|
309
|
+
r.dataset.glareId = String(s), e.baseClass && r.classList.add(e.baseClass), e.modal && r.classList.add("glare-is-modal");
|
|
310
|
+
const o = c(".glare-stage", r);
|
|
311
|
+
if (!o) throw new Error("baseTpl must contain a .glare-stage element");
|
|
312
|
+
const n = {
|
|
313
|
+
container: r,
|
|
314
|
+
bg: c(".glare-bg", r),
|
|
315
|
+
inner: c(".glare-inner", r),
|
|
316
|
+
stage: o,
|
|
317
|
+
caption: c(".glare-caption", r),
|
|
318
|
+
toolbar: c(".glare-toolbar", r),
|
|
319
|
+
infobar: c(".glare-infobar", r),
|
|
320
|
+
navigation: c(".glare-navigation", r)
|
|
317
321
|
}, a = i < 2;
|
|
318
|
-
return
|
|
322
|
+
return n.navigation?.classList.toggle(S, !e.arrows || a), n.infobar?.classList.toggle(S, !e.infobar || a), n.toolbar && zt(n.toolbar, e, t, a), n;
|
|
319
323
|
}
|
|
320
|
-
function
|
|
324
|
+
function zt(e, t, s, i) {
|
|
321
325
|
if (t.toolbar === !1) {
|
|
322
326
|
e.classList.add(S);
|
|
323
327
|
return;
|
|
324
328
|
}
|
|
329
|
+
const r = g("div", "glare-toolbar-menu");
|
|
330
|
+
r.id = `glare-toolbar-menu-${e.closest(".glare-container")?.dataset.glareId ?? ""}`;
|
|
325
331
|
for (const o of t.buttons) {
|
|
326
|
-
if (i && (o === "thumbs" || o === "slideshow") || o === "fullscreen" && !
|
|
332
|
+
if (i && (o === "thumbs" || o === "slideshow") || o === "fullscreen" && !ct() || o === "more" || o === "close") continue;
|
|
327
333
|
const n = t.btnTpl[o];
|
|
328
|
-
n &&
|
|
334
|
+
n && r.insertAdjacentHTML("beforeend", y(n, s));
|
|
335
|
+
}
|
|
336
|
+
if (r.childElementCount) {
|
|
337
|
+
e.appendChild(r);
|
|
338
|
+
const o = t.btnTpl.more;
|
|
339
|
+
o && (e.insertAdjacentHTML("beforeend", y(o, s)), e.querySelector("[data-glare-more]")?.setAttribute("aria-controls", r.id));
|
|
340
|
+
}
|
|
341
|
+
if (t.buttons.includes("close")) {
|
|
342
|
+
const o = t.btnTpl.close;
|
|
343
|
+
o && e.insertAdjacentHTML("beforeend", y(o, s));
|
|
329
344
|
}
|
|
330
345
|
}
|
|
331
|
-
function
|
|
332
|
-
const i =
|
|
346
|
+
function Nt(e, t, s) {
|
|
347
|
+
const i = g("div", `glare-slide glare-slide--${t.type}`);
|
|
333
348
|
s.slideClass && i.classList.add(s.slideClass);
|
|
334
|
-
const
|
|
335
|
-
return i.appendChild(
|
|
349
|
+
const r = g("div", "glare-content");
|
|
350
|
+
return i.appendChild(r), e.appendChild(i), t.$slide = i, t.$content = r, i;
|
|
336
351
|
}
|
|
337
|
-
function
|
|
352
|
+
function Zt(e, t) {
|
|
338
353
|
t && (e.style.transition = "none"), e.offsetWidth, e.classList.add("glare-slide--current"), t && (e.offsetWidth, e.style.transition = "");
|
|
339
354
|
}
|
|
340
|
-
function
|
|
355
|
+
function qt(e, t, s) {
|
|
341
356
|
for (const i of $(".glare-slide", e))
|
|
342
357
|
i !== t && (i.classList.remove("glare-slide--current"), i.classList.add("glare-slide--out"), setTimeout(() => i.remove(), s));
|
|
343
358
|
}
|
|
344
|
-
function
|
|
345
|
-
e.insertAdjacentHTML("beforeend",
|
|
359
|
+
function Ut(e, t, s) {
|
|
360
|
+
e.insertAdjacentHTML("beforeend", y(t.btnTpl.smallBtn ?? "", s));
|
|
346
361
|
}
|
|
347
|
-
function
|
|
348
|
-
e.querySelector(":scope > .glare-spinner") || e.insertAdjacentHTML("beforeend",
|
|
362
|
+
function Bt(e, t, s) {
|
|
363
|
+
e.querySelector(":scope > .glare-spinner") || e.insertAdjacentHTML("beforeend", y(t.spinnerTpl, s));
|
|
349
364
|
}
|
|
350
|
-
function
|
|
365
|
+
function Wt(e) {
|
|
351
366
|
e.querySelector(":scope > .glare-spinner")?.remove();
|
|
352
367
|
}
|
|
353
|
-
function
|
|
354
|
-
e.hasError = !0, e.error = t, e.$content && (e.$content.className = "glare-content glare-content--error", e.$content.innerHTML =
|
|
368
|
+
function jt(e, t, s, i) {
|
|
369
|
+
e.hasError = !0, e.error = t, e.$content && (e.$content.className = "glare-content glare-content--error", e.$content.innerHTML = y(s.errorTpl, i));
|
|
355
370
|
}
|
|
356
|
-
function
|
|
371
|
+
function ht(e, t) {
|
|
357
372
|
return typeof e.toolbar == "boolean" ? e.toolbar : t.type === "image";
|
|
358
373
|
}
|
|
359
|
-
function
|
|
360
|
-
return typeof e.smallBtn == "boolean" ? e.smallBtn : !
|
|
374
|
+
function Xt(e, t) {
|
|
375
|
+
return typeof e.smallBtn == "boolean" ? e.smallBtn : !ht(e, t);
|
|
361
376
|
}
|
|
362
|
-
function
|
|
363
|
-
const { container:
|
|
364
|
-
|
|
377
|
+
function Yt(e, t, s, i, r, o) {
|
|
378
|
+
const { container: n, toolbar: a, infobar: l } = e;
|
|
379
|
+
ee(n, i.type), a && Gt(a, t, i), Vt(n, i), l && Kt(l, i.index, r), e.caption && Qt(e.caption, o), Jt(n, t, i.index, r), te(n, s, i, r);
|
|
365
380
|
}
|
|
366
|
-
function
|
|
381
|
+
function Gt(e, t, s) {
|
|
367
382
|
if (t.toolbar === !1) return;
|
|
368
|
-
|
|
383
|
+
e.classList.remove("glare-toolbar--expanded"), e.querySelector("[data-glare-more]")?.setAttribute("aria-expanded", "false");
|
|
384
|
+
const i = ht(t, s);
|
|
369
385
|
if (e.classList.toggle(S, !i), !i) return;
|
|
370
|
-
const
|
|
371
|
-
c("[data-glare-zoom]", e)?.classList.toggle(S, !
|
|
386
|
+
const r = s.type === "image";
|
|
387
|
+
c("[data-glare-zoom]", e)?.classList.toggle(S, !r);
|
|
372
388
|
}
|
|
373
|
-
function
|
|
389
|
+
function Vt(e, t) {
|
|
374
390
|
const s = e.querySelector("[data-glare-download]");
|
|
375
391
|
if (!s) return;
|
|
376
392
|
const i = t.downloadSrc || (t.type === "image" ? t.src : "");
|
|
377
393
|
s.classList.toggle(S, !i), i && (s.href = i);
|
|
378
394
|
}
|
|
379
|
-
function
|
|
395
|
+
function Kt(e, t, s) {
|
|
380
396
|
const i = c(".glare-infobar-index", e);
|
|
381
397
|
i && (i.textContent = `${t + 1} / ${s}`);
|
|
382
398
|
}
|
|
383
|
-
function
|
|
399
|
+
function Qt(e, t) {
|
|
384
400
|
e.innerHTML = t, e.classList.toggle(S, !t);
|
|
385
401
|
}
|
|
386
|
-
function
|
|
387
|
-
const
|
|
388
|
-
|
|
402
|
+
function Jt(e, t, s, i) {
|
|
403
|
+
const r = !t.loop && s === 0, o = !t.loop && s === i - 1;
|
|
404
|
+
j(c("[data-glare-prev]", e), r), j(c("[data-glare-next]", e), o);
|
|
389
405
|
}
|
|
390
|
-
function
|
|
406
|
+
function j(e, t) {
|
|
391
407
|
e && (e.classList.toggle("glare-is-disabled", t), e.setAttribute("aria-disabled", String(t)));
|
|
392
408
|
}
|
|
393
|
-
function
|
|
394
|
-
const
|
|
395
|
-
e.setAttribute("aria-label",
|
|
396
|
-
const
|
|
397
|
-
|
|
409
|
+
function te(e, t, s, i) {
|
|
410
|
+
const r = O(s.caption) || s.alt || t.LIGHTBOX, o = i > 1 ? `${r} (${s.index + 1} of ${i})` : r;
|
|
411
|
+
e.setAttribute("aria-label", o);
|
|
412
|
+
const n = c(".glare-live", e);
|
|
413
|
+
n && (n.textContent = o);
|
|
398
414
|
}
|
|
399
|
-
function
|
|
415
|
+
function ee(e, t) {
|
|
400
416
|
const s = e.dataset.type;
|
|
401
417
|
s && e.classList.remove(`glare-type-${s}`), e.dataset.type = t, e.classList.add(`glare-type-${t}`);
|
|
402
418
|
}
|
|
403
|
-
function
|
|
419
|
+
function se(e, t, s, i) {
|
|
404
420
|
e.classList.toggle("glare-can-zoom-out", s), e.classList.toggle("glare-can-zoom-in", !s && i);
|
|
405
|
-
const
|
|
406
|
-
!
|
|
421
|
+
const r = c("[data-glare-zoom]", e), o = s ? "out" : "in";
|
|
422
|
+
!r || r.dataset.state === o || (r.dataset.state = o, N(r, s, s ? t.ZOOM_OUT : t.ZOOM, s ? u.zoomOut : u.zoomIn));
|
|
407
423
|
}
|
|
408
|
-
function
|
|
424
|
+
function N(e, t, s, i) {
|
|
409
425
|
e.setAttribute("title", s), e.setAttribute("aria-label", s), e.innerHTML = i, e.classList.toggle("glare-is-active", t);
|
|
410
426
|
}
|
|
411
|
-
class
|
|
427
|
+
class ie {
|
|
412
428
|
constructor(t, s, i) {
|
|
413
429
|
this.glare = t, this.container = s, this.offs = [
|
|
414
430
|
h(document, "fullscreenchange", () => this.sync()),
|
|
@@ -440,7 +456,7 @@ class Vt {
|
|
|
440
456
|
const s = c("[data-glare-fullscreen]", this.container);
|
|
441
457
|
if (!s) return;
|
|
442
458
|
const { dict: i } = this.glare;
|
|
443
|
-
|
|
459
|
+
N(
|
|
444
460
|
s,
|
|
445
461
|
t,
|
|
446
462
|
t ? i.FULL_SCREEN_EXIT : i.FULL_SCREEN,
|
|
@@ -448,32 +464,32 @@ class Vt {
|
|
|
448
464
|
);
|
|
449
465
|
}
|
|
450
466
|
}
|
|
451
|
-
function
|
|
467
|
+
function X(e) {
|
|
452
468
|
if (typeof e != "object" || e === null) return !1;
|
|
453
469
|
const t = Object.getPrototypeOf(e);
|
|
454
470
|
return t === Object.prototype || t === null;
|
|
455
471
|
}
|
|
456
|
-
function
|
|
472
|
+
function R(...e) {
|
|
457
473
|
const t = {};
|
|
458
474
|
for (const s of e)
|
|
459
475
|
if (s)
|
|
460
|
-
for (const [i,
|
|
461
|
-
if (
|
|
462
|
-
const
|
|
463
|
-
t[i] =
|
|
476
|
+
for (const [i, r] of Object.entries(s)) {
|
|
477
|
+
if (r === void 0) continue;
|
|
478
|
+
const o = t[i];
|
|
479
|
+
t[i] = X(r) ? R(X(o) ? o : {}, r) : r;
|
|
464
480
|
}
|
|
465
481
|
return t;
|
|
466
482
|
}
|
|
467
|
-
function
|
|
483
|
+
function E(e, t, s) {
|
|
468
484
|
return Math.min(s, Math.max(t, e));
|
|
469
485
|
}
|
|
470
|
-
const T = 1, _ = 5,
|
|
471
|
-
class
|
|
486
|
+
const T = 1, _ = 5, re = 1.01;
|
|
487
|
+
class oe {
|
|
472
488
|
constructor(t) {
|
|
473
489
|
this.target = t, this.scale = T, this.x = 0, this.y = 0;
|
|
474
490
|
}
|
|
475
491
|
get isZoomed() {
|
|
476
|
-
return this.scale >
|
|
492
|
+
return this.scale > re;
|
|
477
493
|
}
|
|
478
494
|
get state() {
|
|
479
495
|
return { scale: this.scale, x: this.x, y: this.y };
|
|
@@ -485,22 +501,22 @@ class Qt {
|
|
|
485
501
|
const s = t.getBoundingClientRect();
|
|
486
502
|
return { x: s.left + s.width / 2 - this.x, y: s.top + s.height / 2 - this.y };
|
|
487
503
|
}
|
|
488
|
-
apply(t, s, i,
|
|
489
|
-
const
|
|
490
|
-
if (!
|
|
491
|
-
this.scale =
|
|
492
|
-
const
|
|
493
|
-
this.x =
|
|
504
|
+
apply(t, s, i, r = 0) {
|
|
505
|
+
const o = this.target.image();
|
|
506
|
+
if (!o) return;
|
|
507
|
+
this.scale = E(t, T, _);
|
|
508
|
+
const n = this.isZoomed ? this.bounded(s, i) : { x: 0, y: 0 };
|
|
509
|
+
this.x = n.x, this.y = n.y, o.style.transitionDuration = `${r}ms`, o.style.transform = `translate3d(${this.x}px, ${this.y}px, 0) scale(${this.scale})`, this.target.onChange(this.isZoomed);
|
|
494
510
|
}
|
|
495
511
|
toFit(t = 300) {
|
|
496
512
|
this.apply(T, 0, 0, t);
|
|
497
513
|
}
|
|
498
514
|
/** Zooms to the image's natural size (at least 1.5x), keeping `focus` under the pointer. */
|
|
499
515
|
toActual(t, s = 300) {
|
|
500
|
-
const i = this.target.image(),
|
|
501
|
-
if (!i || !
|
|
502
|
-
const
|
|
503
|
-
this.apply(
|
|
516
|
+
const i = this.target.image(), r = this.center();
|
|
517
|
+
if (!i || !r) return;
|
|
518
|
+
const o = i.naturalWidth / Math.max(i.offsetWidth, 1), n = E(Math.max(o, 1.5), T, _), a = t?.x ?? r.x, l = t?.y ?? r.y;
|
|
519
|
+
this.apply(n, (r.x - a) * (n - 1), (r.y - l) * (n - 1), s);
|
|
504
520
|
}
|
|
505
521
|
reset() {
|
|
506
522
|
const t = this.target.image();
|
|
@@ -508,14 +524,14 @@ class Qt {
|
|
|
508
524
|
}
|
|
509
525
|
/** Keeps the scaled image from being dragged fully out of the stage. */
|
|
510
526
|
bounded(t, s) {
|
|
511
|
-
const i = this.target.image(),
|
|
512
|
-
if (!i || !
|
|
513
|
-
const
|
|
514
|
-
return { x:
|
|
527
|
+
const i = this.target.image(), r = this.target.stage();
|
|
528
|
+
if (!i || !r) return { x: t, y: s };
|
|
529
|
+
const o = Math.max(0, (i.offsetWidth * this.scale - r.clientWidth) / 2), n = Math.max(0, (i.offsetHeight * this.scale - r.clientHeight) / 2);
|
|
530
|
+
return { x: E(t, -o, o), y: E(s, -n, n) };
|
|
515
531
|
}
|
|
516
532
|
}
|
|
517
|
-
const
|
|
518
|
-
class
|
|
533
|
+
const ne = 6, Y = 120, ae = 100, le = 0.5, ce = 80, he = 0.4, ue = "a, button, input, textarea, select, video, .glare-thumbs", G = (e, t) => Math.hypot(e.x - t.x, e.y - t.y), V = (e, t) => ({ x: (e.x + t.x) / 2, y: (e.y + t.y) / 2 }), I = (e) => ({ x: e.clientX, y: e.clientY });
|
|
534
|
+
class de {
|
|
519
535
|
constructor(t, s) {
|
|
520
536
|
this.stage = t, this.host = s, this.pointers = /* @__PURE__ */ new Map(), this.mode = "idle", this.moved = !1, this.start = [], this.startTime = 0, this.startZoom = { scale: 1, x: 0, y: 0 }, this.startMid = { x: 0, y: 0 }, this.startDistance = 0, this.offs = [
|
|
521
537
|
h(t, "pointerdown", (i) => this.onDown(i)),
|
|
@@ -533,7 +549,7 @@ class ne {
|
|
|
533
549
|
return this.moved = !1, t;
|
|
534
550
|
}
|
|
535
551
|
onDown(t) {
|
|
536
|
-
t.pointerType === "mouse" && t.button !== 0 || t.target.closest(
|
|
552
|
+
t.pointerType === "mouse" && t.button !== 0 || t.target.closest(ue) || (this.pointers.set(t.pointerId, I(t)), this.pointers.size <= 2 && this.begin());
|
|
537
553
|
}
|
|
538
554
|
onMove(t) {
|
|
539
555
|
this.pointers.has(t.pointerId) && (this.pointers.set(t.pointerId, I(t)), this.move(t));
|
|
@@ -545,7 +561,7 @@ class ne {
|
|
|
545
561
|
begin() {
|
|
546
562
|
this.mode === "swipe" && this.releaseStage();
|
|
547
563
|
const t = [...this.pointers.values()];
|
|
548
|
-
this.start = t, this.startTime = performance.now(), this.startZoom = this.host.zoom.state, this.mode = t.length >= 2 ? "pinch" : "idle", t.length >= 2 && (this.startDistance =
|
|
564
|
+
this.start = t, this.startTime = performance.now(), this.startZoom = this.host.zoom.state, this.mode = t.length >= 2 ? "pinch" : "idle", t.length >= 2 && (this.startDistance = G(t[0], t[1]), this.startMid = V(t[0], t[1]));
|
|
549
565
|
}
|
|
550
566
|
move(t) {
|
|
551
567
|
const s = [...this.pointers.values()];
|
|
@@ -554,34 +570,34 @@ class ne {
|
|
|
554
570
|
t.preventDefault(), this.moved = !0, this.pinch(s[0], s[1]);
|
|
555
571
|
return;
|
|
556
572
|
}
|
|
557
|
-
const i = s[0].x - this.start[0].x,
|
|
558
|
-
if (!(!this.moved && Math.hypot(i,
|
|
573
|
+
const i = s[0].x - this.start[0].x, r = s[0].y - this.start[0].y;
|
|
574
|
+
if (!(!this.moved && Math.hypot(i, r) < ne)) {
|
|
559
575
|
if (this.moved = !0, this.mode === "idle" && (this.mode = this.host.zoom.isZoomed && this.host.canPan() ? "pan" : "swipe"), this.mode === "pan")
|
|
560
|
-
t.preventDefault(), this.host.zoom.apply(this.startZoom.scale, this.startZoom.x + i, this.startZoom.y +
|
|
576
|
+
t.preventDefault(), this.host.zoom.apply(this.startZoom.scale, this.startZoom.x + i, this.startZoom.y + r);
|
|
561
577
|
else if (this.mode === "swipe") {
|
|
562
|
-
const
|
|
563
|
-
if (!
|
|
564
|
-
t.preventDefault(), this.dragStage(i,
|
|
578
|
+
const o = this.host.touch.vertical !== !1;
|
|
579
|
+
if (!o && Math.abs(r) > Math.abs(i)) return;
|
|
580
|
+
t.preventDefault(), this.dragStage(i, o ? r : 0);
|
|
565
581
|
}
|
|
566
582
|
}
|
|
567
583
|
}
|
|
568
584
|
/** Scales around the pinch midpoint so the content under the fingers stays put. */
|
|
569
585
|
pinch(t, s) {
|
|
570
|
-
const { zoom: i } = this.host,
|
|
571
|
-
this.startZoom.scale *
|
|
586
|
+
const { zoom: i } = this.host, r = V(t, s), o = i.center() ?? r, n = E(
|
|
587
|
+
this.startZoom.scale * G(t, s) / (this.startDistance || 1),
|
|
572
588
|
T,
|
|
573
589
|
_
|
|
574
|
-
), a = (this.startMid.x -
|
|
575
|
-
i.apply(
|
|
590
|
+
), a = (this.startMid.x - o.x - this.startZoom.x) / this.startZoom.scale, l = (this.startMid.y - o.y - this.startZoom.y) / this.startZoom.scale;
|
|
591
|
+
i.apply(n, r.x - o.x - n * a, r.y - o.y - n * l);
|
|
576
592
|
}
|
|
577
593
|
end(t) {
|
|
578
594
|
if (!this.start.length) return;
|
|
579
|
-
const s = Math.max(performance.now() - this.startTime, 1), i = t.x - this.start[0].x,
|
|
595
|
+
const s = Math.max(performance.now() - this.startTime, 1), i = t.x - this.start[0].x, r = t.y - this.start[0].y, o = { x: i / s, y: r / s };
|
|
580
596
|
if (this.mode === "swipe")
|
|
581
|
-
this.releaseStage(), this.finishSwipe(i,
|
|
597
|
+
this.releaseStage(), this.finishSwipe(i, r, o);
|
|
582
598
|
else if (this.mode === "pan" && this.host.touch.momentum !== !1) {
|
|
583
|
-
const { zoom:
|
|
584
|
-
|
|
599
|
+
const { zoom: n } = this.host;
|
|
600
|
+
n.apply(n.scale, n.x + o.x * Y, n.y + o.y * Y, 250);
|
|
585
601
|
}
|
|
586
602
|
this.mode = "idle", this.start = [], this.moved && setTimeout(() => this.moved = !1, 0);
|
|
587
603
|
}
|
|
@@ -589,7 +605,7 @@ class ne {
|
|
|
589
605
|
dragStage(t, s) {
|
|
590
606
|
this.stage.style.transitionDuration = "0ms", this.stage.style.transform = `translate3d(${t}px, ${s}px, 0)`;
|
|
591
607
|
const { bg: i } = this.host;
|
|
592
|
-
i && (i.style.transitionDuration = "0ms", i.style.opacity = String(
|
|
608
|
+
i && (i.style.transitionDuration = "0ms", i.style.opacity = String(E(1 - Math.abs(s) / 400, 0.35, 1)));
|
|
593
609
|
}
|
|
594
610
|
releaseStage() {
|
|
595
611
|
this.stage.style.transitionDuration = "", this.stage.style.transform = "";
|
|
@@ -599,35 +615,35 @@ class ne {
|
|
|
599
615
|
/** A long or fast vertical swipe closes; a horizontal one navigates. */
|
|
600
616
|
finishSwipe(t, s, i) {
|
|
601
617
|
if (Math.abs(s) > Math.abs(t)) {
|
|
602
|
-
(Math.abs(s) >
|
|
618
|
+
(Math.abs(s) > ae || Math.abs(i.y) > le) && this.host.close();
|
|
603
619
|
return;
|
|
604
620
|
}
|
|
605
|
-
(Math.abs(t) >
|
|
621
|
+
(Math.abs(t) > ce || Math.abs(i.x) > he) && (t < 0 ? this.host.next() : this.host.prev());
|
|
606
622
|
}
|
|
607
623
|
}
|
|
608
|
-
const
|
|
609
|
-
function
|
|
610
|
-
const t = e.replace(/^#/, "").match(
|
|
624
|
+
const fe = /^(.+)-(\d+)$/;
|
|
625
|
+
function F(e = window.location.hash) {
|
|
626
|
+
const t = e.replace(/^#/, "").match(fe);
|
|
611
627
|
return t ? { gallery: t[1], index: Math.max(0, parseInt(t[2], 10) - 1) } : null;
|
|
612
628
|
}
|
|
613
|
-
function
|
|
629
|
+
function K(e, t) {
|
|
614
630
|
return `${e}-${t + 1}`;
|
|
615
631
|
}
|
|
616
|
-
class
|
|
632
|
+
class pe {
|
|
617
633
|
constructor(t, s) {
|
|
618
634
|
this.glare = t, this.gallery = s, this.pushed = !1, this.off = h(window, "hashchange", () => this.onHashChange());
|
|
619
|
-
const i =
|
|
620
|
-
|
|
635
|
+
const i = K(s, t.currIndex);
|
|
636
|
+
Q() !== i && (window.history.pushState(null, "", `#${i}`), this.pushed = !0);
|
|
621
637
|
}
|
|
622
638
|
update(t = this.glare.currIndex) {
|
|
623
|
-
const s =
|
|
624
|
-
|
|
639
|
+
const s = K(this.gallery, t);
|
|
640
|
+
Q() !== s && this.replace(`#${s}`);
|
|
625
641
|
}
|
|
626
642
|
destroy() {
|
|
627
|
-
this.off(),
|
|
643
|
+
this.off(), F()?.gallery === this.gallery && (this.pushed ? window.history.back() : this.replace(""));
|
|
628
644
|
}
|
|
629
645
|
onHashChange() {
|
|
630
|
-
const t =
|
|
646
|
+
const t = F();
|
|
631
647
|
!t || t.gallery !== this.gallery ? (this.pushed = !1, this.glare.close()) : t.index !== this.glare.currIndex && this.glare.jumpTo(t.index);
|
|
632
648
|
}
|
|
633
649
|
replace(t) {
|
|
@@ -635,8 +651,8 @@ class ae {
|
|
|
635
651
|
window.history.replaceState(null, "", `${s}${i}${t}`);
|
|
636
652
|
}
|
|
637
653
|
}
|
|
638
|
-
const
|
|
639
|
-
class
|
|
654
|
+
const Q = () => window.location.hash.replace(/^#/, "");
|
|
655
|
+
class me {
|
|
640
656
|
constructor(t, s, i) {
|
|
641
657
|
this.glare = t, this.container = s, this.opts = i, this.overlay = null, this.off = null;
|
|
642
658
|
}
|
|
@@ -647,18 +663,18 @@ class le {
|
|
|
647
663
|
const { current: t, dict: s } = this.glare;
|
|
648
664
|
if (!t) return;
|
|
649
665
|
this.close();
|
|
650
|
-
const i = this.resolveUrl(t),
|
|
666
|
+
const i = this.resolveUrl(t), r = encodeURIComponent(i), o = encodeURIComponent(t.thumb || t.src || i), n = encodeURIComponent(O(t.caption)), a = y(this.opts.tpl ?? Lt, {
|
|
651
667
|
...s,
|
|
652
668
|
url_direct: i,
|
|
653
|
-
url_facebook: `https://www.facebook.com/sharer/sharer.php?u=${
|
|
654
|
-
url_twitter: `https://twitter.com/intent/tweet?url=${
|
|
655
|
-
url_pinterest: `https://pinterest.com/pin/create/button/?url=${
|
|
669
|
+
url_facebook: `https://www.facebook.com/sharer/sharer.php?u=${r}`,
|
|
670
|
+
url_twitter: `https://twitter.com/intent/tweet?url=${r}&text=${n}`,
|
|
671
|
+
url_pinterest: `https://pinterest.com/pin/create/button/?url=${r}&media=${o}&description=${n}`
|
|
656
672
|
});
|
|
657
|
-
this.overlay =
|
|
673
|
+
this.overlay = g("div", "glare-share-overlay", a), this.container.appendChild(this.overlay);
|
|
658
674
|
const l = c(".glare-share-input", this.overlay);
|
|
659
675
|
l?.select(), this.off = h(this.overlay, "click", (d) => {
|
|
660
|
-
const
|
|
661
|
-
|
|
676
|
+
const p = d.target;
|
|
677
|
+
p === this.overlay || p.closest("[data-glare-share-close]") ? this.close() : p.closest("[data-glare-share-copy]") && this.copy(i, l);
|
|
662
678
|
});
|
|
663
679
|
}
|
|
664
680
|
close() {
|
|
@@ -684,7 +700,7 @@ class le {
|
|
|
684
700
|
return typeof s == "function" ? s(t) : s || (/^https?:\/\//i.test(t.src) ? t.src : window.location.href);
|
|
685
701
|
}
|
|
686
702
|
}
|
|
687
|
-
class
|
|
703
|
+
class ge {
|
|
688
704
|
constructor(t, s, i) {
|
|
689
705
|
this.glare = t, this.container = s, this.opts = i, this.timer = null, this.active = !1, this.bar = c(".glare-progress", s), this.button = c("[data-glare-slideshow]", s), i.autoStart && this.start();
|
|
690
706
|
}
|
|
@@ -707,13 +723,13 @@ class ce {
|
|
|
707
723
|
this.stop();
|
|
708
724
|
}
|
|
709
725
|
get speed() {
|
|
710
|
-
return this.opts.speed ??
|
|
726
|
+
return this.opts.speed ?? z.speed;
|
|
711
727
|
}
|
|
712
728
|
get atEnd() {
|
|
713
729
|
return !this.glare.opts.loop && this.glare.currIndex === this.glare.group.length - 1;
|
|
714
730
|
}
|
|
715
731
|
schedule() {
|
|
716
|
-
this.clearTimer(), this.setProgress(0),
|
|
732
|
+
this.clearTimer(), this.setProgress(0), A() || (this.bar?.offsetWidth, this.setProgress(1)), this.timer = setTimeout(() => this.atEnd ? this.stop() : this.glare.next(), this.speed);
|
|
717
733
|
}
|
|
718
734
|
clearTimer() {
|
|
719
735
|
this.timer && clearTimeout(this.timer), this.timer = null;
|
|
@@ -724,7 +740,7 @@ class ce {
|
|
|
724
740
|
syncButton() {
|
|
725
741
|
if (!this.button) return;
|
|
726
742
|
const { dict: t } = this.glare;
|
|
727
|
-
|
|
743
|
+
N(
|
|
728
744
|
this.button,
|
|
729
745
|
this.active,
|
|
730
746
|
this.active ? t.PLAY_STOP : t.PLAY_START,
|
|
@@ -732,9 +748,9 @@ class ce {
|
|
|
732
748
|
);
|
|
733
749
|
}
|
|
734
750
|
}
|
|
735
|
-
class
|
|
751
|
+
class ye {
|
|
736
752
|
constructor(t, s, i) {
|
|
737
|
-
this.glare = t, this.container = s, this.opts = i, this.isActive = !1, this.offs = [], this.axis = i.axis === "y" ? "y" : "x", this.list =
|
|
753
|
+
this.glare = t, this.container = s, this.opts = i, this.isActive = !1, this.offs = [], this.axis = i.axis === "y" ? "y" : "x", this.list = g("div", "glare-thumbs-list"), this.strip = g("div", `glare-thumbs glare-thumbs--${this.axis}`), this.strip.appendChild(this.list), this.build();
|
|
738
754
|
}
|
|
739
755
|
show() {
|
|
740
756
|
this.setActive(!0);
|
|
@@ -763,29 +779,29 @@ class he {
|
|
|
763
779
|
const { group: t, dict: s } = this.glare;
|
|
764
780
|
if (t.length < 2) return;
|
|
765
781
|
this.container.classList.add(`glare-thumbs-axis-${this.axis}`);
|
|
766
|
-
for (const
|
|
767
|
-
const
|
|
768
|
-
|
|
769
|
-
const
|
|
770
|
-
if (
|
|
771
|
-
const a =
|
|
772
|
-
a.src =
|
|
782
|
+
for (const r of t) {
|
|
783
|
+
const o = g("button", "glare-thumbs-item");
|
|
784
|
+
o.type = "button", o.dataset.index = String(r.index), o.setAttribute("aria-label", y(s.GO_TO_SLIDE, { index: String(r.index + 1) }));
|
|
785
|
+
const n = r.thumb || (r.type === "image" ? r.src : "");
|
|
786
|
+
if (n) {
|
|
787
|
+
const a = g("img");
|
|
788
|
+
a.src = n, a.alt = r.alt || O(r.caption), a.loading = "lazy", o.appendChild(a);
|
|
773
789
|
} else
|
|
774
|
-
|
|
775
|
-
this.list.appendChild(
|
|
790
|
+
o.textContent = String(r.index + 1);
|
|
791
|
+
this.list.appendChild(o), this.offs.push(h(o, "click", () => this.glare.jumpTo(r.index)));
|
|
776
792
|
}
|
|
777
|
-
(
|
|
793
|
+
(_t(this.opts.parentEl, this.container) ?? this.container).appendChild(this.strip), this.opts.autoStart && this.show(), this.focus();
|
|
778
794
|
}
|
|
779
795
|
}
|
|
780
|
-
const
|
|
781
|
-
class
|
|
796
|
+
const be = 40, ve = 150, xe = 16;
|
|
797
|
+
class we {
|
|
782
798
|
constructor(t, s) {
|
|
783
799
|
this.distance = 0, this.fired = !1, this.settle = null, this.off = h(
|
|
784
800
|
t,
|
|
785
801
|
"wheel",
|
|
786
802
|
(i) => {
|
|
787
|
-
const
|
|
788
|
-
!
|
|
803
|
+
const r = s.current();
|
|
804
|
+
!r || i.deltaY === 0 || s.mode === "auto" && r.type !== "image" || r.type === "image" && s.isZoomed() || (i.preventDefault(), this.restartSettle(), !this.fired && (this.distance += Ee(i, t), !(Math.abs(this.distance) < be) && (this.fired = !0, this.distance > 0 ? s.next() : s.prev())));
|
|
789
805
|
},
|
|
790
806
|
{ passive: !1 }
|
|
791
807
|
);
|
|
@@ -796,71 +812,71 @@ class pe {
|
|
|
796
812
|
restartSettle() {
|
|
797
813
|
this.settle && clearTimeout(this.settle), this.settle = setTimeout(() => {
|
|
798
814
|
this.distance = 0, this.fired = !1;
|
|
799
|
-
},
|
|
815
|
+
}, ve);
|
|
800
816
|
}
|
|
801
817
|
}
|
|
802
|
-
function
|
|
803
|
-
return e.deltaMode === WheelEvent.DOM_DELTA_LINE ? e.deltaY *
|
|
818
|
+
function Ee(e, t) {
|
|
819
|
+
return e.deltaMode === WheelEvent.DOM_DELTA_LINE ? e.deltaY * xe : e.deltaMode === WheelEvent.DOM_DELTA_PAGE ? e.deltaY * t.clientHeight : e.deltaY;
|
|
804
820
|
}
|
|
805
|
-
function
|
|
806
|
-
const s =
|
|
807
|
-
e.dataset.animation = i || "none", e.style.setProperty("--glare-duration", `${i ? t.animationDuration : 0}ms`), e.style.setProperty("--glare-transition-duration", `${
|
|
821
|
+
function Se(e, t) {
|
|
822
|
+
const s = A(), i = s ? !1 : t.animationEffect, r = s ? !1 : t.transitionEffect;
|
|
823
|
+
e.dataset.animation = i || "none", e.style.setProperty("--glare-duration", `${i ? t.animationDuration : 0}ms`), e.style.setProperty("--glare-transition-duration", `${r ? t.transitionDuration : 0}ms`);
|
|
808
824
|
}
|
|
809
|
-
function
|
|
810
|
-
const s =
|
|
825
|
+
function Te(e, t) {
|
|
826
|
+
const s = A() ? !1 : t.transitionEffect;
|
|
811
827
|
e.dataset.transition = s || "none";
|
|
812
828
|
}
|
|
813
|
-
function
|
|
814
|
-
const i = t.$image,
|
|
815
|
-
if (e.dataset.animation !== "zoom" || !i || !
|
|
816
|
-
const
|
|
829
|
+
function Le(e, t, s) {
|
|
830
|
+
const i = t.$image, r = t.$trigger;
|
|
831
|
+
if (e.dataset.animation !== "zoom" || !i || !r) return;
|
|
832
|
+
const o = r.getBoundingClientRect(), n = i.getBoundingClientRect(), a = Math.max(o.width / Math.max(n.width, 1), o.height / Math.max(n.height, 1)), l = o.left + o.width / 2 - (n.left + n.width / 2), d = o.top + o.height / 2 - (n.top + n.height / 2);
|
|
817
833
|
Object.assign(i.style, {
|
|
818
834
|
transform: `translate3d(${l}px, ${d}px, 0) scale(${a})`,
|
|
819
835
|
opacity: s.zoomOpacity ? "0.2" : "1",
|
|
820
836
|
transitionDuration: "0ms"
|
|
821
|
-
}),
|
|
837
|
+
}), lt(() => {
|
|
822
838
|
Object.assign(i.style, { transform: "", opacity: "", transitionDuration: "" });
|
|
823
839
|
});
|
|
824
840
|
}
|
|
825
|
-
function
|
|
826
|
-
const t =
|
|
827
|
-
return
|
|
841
|
+
function ut(e) {
|
|
842
|
+
const t = R(nt, e);
|
|
843
|
+
return Ht() && t.mobile ? R(t, t.mobile) : t;
|
|
828
844
|
}
|
|
829
|
-
function
|
|
845
|
+
function C(e, t) {
|
|
830
846
|
return e ? e === !0 ? { ...t } : { ...t, ...e } : null;
|
|
831
847
|
}
|
|
832
|
-
const
|
|
833
|
-
function
|
|
848
|
+
const M = [], H = (e) => e.getAttribute("data-glare") ?? "";
|
|
849
|
+
function Ce(e) {
|
|
834
850
|
return typeof e == "string" ? $(e) : e instanceof HTMLElement ? [e] : Array.from(e);
|
|
835
851
|
}
|
|
836
|
-
function
|
|
837
|
-
const i =
|
|
838
|
-
const l =
|
|
852
|
+
function Me(e, t, s) {
|
|
853
|
+
const i = Ce(e), r = (a) => {
|
|
854
|
+
const l = H(a), d = l ? i.filter((p) => H(p) === l) : [a];
|
|
839
855
|
s(d, d.indexOf(a), l);
|
|
840
|
-
},
|
|
856
|
+
}, o = i.map(
|
|
841
857
|
(a) => h(a, "click", (l) => {
|
|
842
|
-
l.preventDefault(),
|
|
858
|
+
l.preventDefault(), r(a);
|
|
843
859
|
})
|
|
844
|
-
),
|
|
860
|
+
), n = {
|
|
845
861
|
elements: i,
|
|
846
862
|
destroy() {
|
|
847
|
-
|
|
848
|
-
const a =
|
|
849
|
-
a >= 0 &&
|
|
863
|
+
o.forEach((l) => l());
|
|
864
|
+
const a = M.indexOf(n);
|
|
865
|
+
a >= 0 && M.splice(a, 1);
|
|
850
866
|
}
|
|
851
867
|
};
|
|
852
|
-
return
|
|
868
|
+
return M.push(n), ut(t).hash && Oe(i, r), n;
|
|
853
869
|
}
|
|
854
|
-
function
|
|
855
|
-
for (const e of [...
|
|
870
|
+
function $e() {
|
|
871
|
+
for (const e of [...M]) e.destroy();
|
|
856
872
|
}
|
|
857
|
-
function
|
|
858
|
-
const s =
|
|
873
|
+
function Oe(e, t) {
|
|
874
|
+
const s = F();
|
|
859
875
|
if (!s) return;
|
|
860
|
-
const
|
|
861
|
-
|
|
876
|
+
const r = e.filter((o) => H(o) === s.gallery)[s.index];
|
|
877
|
+
r && t(r);
|
|
862
878
|
}
|
|
863
|
-
class
|
|
879
|
+
class Ae {
|
|
864
880
|
constructor(t, s) {
|
|
865
881
|
this.seconds = t, this.onIdle = s, this.timer = null;
|
|
866
882
|
}
|
|
@@ -871,27 +887,27 @@ class Se {
|
|
|
871
887
|
this.timer && clearTimeout(this.timer), this.timer = null;
|
|
872
888
|
}
|
|
873
889
|
}
|
|
874
|
-
const
|
|
890
|
+
const x = [], b = {
|
|
875
891
|
add(e) {
|
|
876
|
-
|
|
892
|
+
x.push(e);
|
|
877
893
|
},
|
|
878
894
|
remove(e) {
|
|
879
|
-
const t =
|
|
880
|
-
t >= 0 &&
|
|
895
|
+
const t = x.indexOf(e);
|
|
896
|
+
t >= 0 && x.splice(t, 1);
|
|
881
897
|
},
|
|
882
898
|
top() {
|
|
883
|
-
return
|
|
899
|
+
return x[x.length - 1] ?? null;
|
|
884
900
|
},
|
|
885
901
|
get(e) {
|
|
886
|
-
return
|
|
902
|
+
return x.find((t) => t.id === e) ?? null;
|
|
887
903
|
},
|
|
888
904
|
all() {
|
|
889
|
-
return [...
|
|
905
|
+
return [...x];
|
|
890
906
|
},
|
|
891
907
|
get size() {
|
|
892
|
-
return
|
|
908
|
+
return x.length;
|
|
893
909
|
}
|
|
894
|
-
},
|
|
910
|
+
}, Ie = [
|
|
895
911
|
["[data-glare-close]", (e) => e.close()],
|
|
896
912
|
["[data-glare-next]", (e) => e.next()],
|
|
897
913
|
["[data-glare-prev]", (e) => e.prev()],
|
|
@@ -900,54 +916,62 @@ const y = [], g = {
|
|
|
900
916
|
["[data-glare-thumbs]", (e) => e.thumbs?.toggle()],
|
|
901
917
|
["[data-glare-fullscreen]", (e) => e.fullscreen?.toggle()],
|
|
902
918
|
["[data-glare-share]", (e) => e.share?.open()]
|
|
903
|
-
],
|
|
904
|
-
function
|
|
919
|
+
], De = ".glare-content", ke = ".glare-slide, .glare-stage", Re = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])', _e = /* @__PURE__ */ new Set(["INPUT", "TEXTAREA", "SELECT"]), Fe = 300;
|
|
920
|
+
function He(e, t, s) {
|
|
905
921
|
let i = null;
|
|
906
|
-
const
|
|
922
|
+
const r = () => {
|
|
907
923
|
i && clearTimeout(i), i = null;
|
|
908
|
-
},
|
|
909
|
-
h(t, "click", (
|
|
924
|
+
}, o = [
|
|
925
|
+
h(t, "click", (n) => {
|
|
910
926
|
if (e.consumeGesture()) return;
|
|
911
|
-
const a =
|
|
912
|
-
if (l)
|
|
927
|
+
const a = n.target, l = a.closest("[data-glare-more]");
|
|
928
|
+
if (l) {
|
|
929
|
+
const L = l.closest(".glare-toolbar"), Z = !L?.classList.contains("glare-toolbar--expanded");
|
|
930
|
+
L?.classList.toggle("glare-toolbar--expanded", Z), l.setAttribute("aria-expanded", String(Z));
|
|
931
|
+
return;
|
|
932
|
+
}
|
|
933
|
+
ft(t);
|
|
934
|
+
const d = Ie.find(([L]) => a.closest(L));
|
|
935
|
+
if (d) return d[1](e);
|
|
913
936
|
if (a.closest(".glare-button")) return;
|
|
914
|
-
const
|
|
915
|
-
if (
|
|
916
|
-
if (!
|
|
917
|
-
return
|
|
918
|
-
|
|
937
|
+
const p = D(e, a, "click");
|
|
938
|
+
if (p) {
|
|
939
|
+
if (!dt(e, D(e, a, "dblclick"), n))
|
|
940
|
+
return k(e, p, n);
|
|
941
|
+
r(), i = setTimeout(() => k(e, p, n), Fe);
|
|
919
942
|
}
|
|
920
943
|
}),
|
|
921
|
-
h(t, "dblclick", (
|
|
922
|
-
|
|
923
|
-
const a =
|
|
924
|
-
a.closest(".glare-button") ||
|
|
944
|
+
h(t, "dblclick", (n) => {
|
|
945
|
+
r();
|
|
946
|
+
const a = n.target;
|
|
947
|
+
a.closest(".glare-button") || k(e, D(e, a, "dblclick"), n);
|
|
925
948
|
}),
|
|
926
|
-
h(document, "keydown", (
|
|
949
|
+
h(document, "keydown", (n) => Pe(e, n)),
|
|
927
950
|
h(document, "keydown", s),
|
|
951
|
+
h(document, "click", s, { capture: !0 }),
|
|
928
952
|
h(document, "mousemove", s),
|
|
929
953
|
h(document, "touchstart", s, { passive: !0 })
|
|
930
954
|
];
|
|
931
|
-
return e.opts.trapFocus &&
|
|
932
|
-
h(t, "contextmenu", (
|
|
933
|
-
h(t, "dragstart", (
|
|
934
|
-
|
|
955
|
+
return e.opts.trapFocus && o.push(h(t, "keydown", (n) => ze(t, n))), e.opts.protect && o.push(
|
|
956
|
+
h(t, "contextmenu", (n) => n.preventDefault()),
|
|
957
|
+
h(t, "dragstart", (n) => {
|
|
958
|
+
n.target.tagName === "IMG" && n.preventDefault();
|
|
935
959
|
})
|
|
936
960
|
), () => {
|
|
937
|
-
|
|
961
|
+
r(), o.forEach((n) => n());
|
|
938
962
|
};
|
|
939
963
|
}
|
|
940
|
-
function
|
|
964
|
+
function D(e, t, s) {
|
|
941
965
|
const { opts: i } = e;
|
|
942
|
-
if (t.closest(
|
|
943
|
-
if (!(i.modal || !t.closest(
|
|
966
|
+
if (t.closest(De)) return s === "click" ? i.clickContent : i.dblclickContent;
|
|
967
|
+
if (!(i.modal || !t.closest(ke)))
|
|
944
968
|
return s === "click" ? i.clickSlide : i.dblclickSlide;
|
|
945
969
|
}
|
|
946
|
-
function
|
|
970
|
+
function dt(e, t, s) {
|
|
947
971
|
return !t || !e.current ? !1 : typeof t == "function" ? t(e.current, s) : t;
|
|
948
972
|
}
|
|
949
|
-
function
|
|
950
|
-
switch (
|
|
973
|
+
function k(e, t, s) {
|
|
974
|
+
switch (dt(e, t, s)) {
|
|
951
975
|
case "close":
|
|
952
976
|
return e.close();
|
|
953
977
|
case "next":
|
|
@@ -962,13 +986,17 @@ function D(e, t, s) {
|
|
|
962
986
|
}
|
|
963
987
|
}
|
|
964
988
|
}
|
|
965
|
-
function
|
|
966
|
-
if (
|
|
989
|
+
function Pe(e, t) {
|
|
990
|
+
if (b.top() !== e) return;
|
|
991
|
+
if (t.key === "Escape" && ft(e.$refs?.container ?? null)) {
|
|
992
|
+
t.preventDefault();
|
|
993
|
+
return;
|
|
994
|
+
}
|
|
967
995
|
if (t.key === "Escape" && e.share?.isOpen)
|
|
968
996
|
return t.preventDefault(), e.share.close();
|
|
969
997
|
if (!e.opts.keyboard || e.opts.modal) return;
|
|
970
998
|
const s = t.target;
|
|
971
|
-
if (!
|
|
999
|
+
if (!_e.has(s.tagName) && !(t.key === " " && s.closest("button")))
|
|
972
1000
|
switch (t.key) {
|
|
973
1001
|
case "Escape":
|
|
974
1002
|
return t.preventDefault(), e.close();
|
|
@@ -985,83 +1013,117 @@ function Ae(e, t) {
|
|
|
985
1013
|
return e.fullscreen?.toggle();
|
|
986
1014
|
}
|
|
987
1015
|
}
|
|
988
|
-
function
|
|
1016
|
+
function ft(e) {
|
|
1017
|
+
const t = e?.querySelector(".glare-toolbar--expanded");
|
|
1018
|
+
return t ? (t.classList.remove("glare-toolbar--expanded"), t.querySelector("[data-glare-more]")?.setAttribute("aria-expanded", "false"), !0) : !1;
|
|
1019
|
+
}
|
|
1020
|
+
function ze(e, t) {
|
|
989
1021
|
if (t.key !== "Tab") return;
|
|
990
|
-
const s = $(
|
|
991
|
-
(
|
|
1022
|
+
const s = $(Re, e).filter(
|
|
1023
|
+
(o) => !o.hasAttribute("disabled") && o.offsetParent !== null && getComputedStyle(o).visibility !== "hidden"
|
|
992
1024
|
);
|
|
993
1025
|
if (!s.length) return;
|
|
994
|
-
const i = s[0],
|
|
995
|
-
t.shiftKey && document.activeElement === i ? (t.preventDefault(),
|
|
996
|
-
}
|
|
997
|
-
const
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
}
|
|
1003
|
-
|
|
1004
|
-
|
|
1026
|
+
const i = s[0], r = s[s.length - 1];
|
|
1027
|
+
t.shiftKey && document.activeElement === i ? (t.preventDefault(), r.focus()) : !t.shiftKey && document.activeElement === r && (t.preventDefault(), i.focus());
|
|
1028
|
+
}
|
|
1029
|
+
const Ne = 1200, J = 16 / 9;
|
|
1030
|
+
function Ze(e, t, s) {
|
|
1031
|
+
if (t && s) return t / s;
|
|
1032
|
+
const i = String(e.ratio || J).replace(":", "/"), [r, o = "1"] = i.split("/").map((l) => l.trim()), n = parseFloat(r), a = parseFloat(o);
|
|
1033
|
+
return n > 0 && a > 0 ? n / a : J;
|
|
1034
|
+
}
|
|
1035
|
+
function tt(e, t, s) {
|
|
1036
|
+
if (!e) return 0;
|
|
1037
|
+
if (typeof e == "number") return e;
|
|
1038
|
+
const i = e.trim(), r = parseFloat(i);
|
|
1039
|
+
return r > 0 ? i.endsWith("%") ? t * r / 100 : i.endsWith("vw") || i.endsWith("vh") ? s * r / 100 : r : 0;
|
|
1040
|
+
}
|
|
1041
|
+
function et(e, t) {
|
|
1042
|
+
const s = t.parentElement;
|
|
1043
|
+
if (!s) return;
|
|
1044
|
+
const i = getComputedStyle(s), r = s.clientWidth - parseFloat(i.paddingLeft) - parseFloat(i.paddingRight), o = s.clientHeight - parseFloat(i.paddingTop) - parseFloat(i.paddingBottom);
|
|
1045
|
+
if (!(r > 0 && o > 0)) return;
|
|
1046
|
+
const n = e.width !== void 0 && e.height !== void 0;
|
|
1047
|
+
let a = n ? tt(e.width, r, innerWidth) : r, l = n ? tt(e.height, o, innerHeight) : o;
|
|
1048
|
+
const d = Ze(e, n ? a : void 0, n ? l : void 0), p = Math.min(1, r / a, o / l);
|
|
1049
|
+
a *= p, l *= p, l > a / d ? l = a / d : a > l * d && (a = l * d), t.style.width = `${a}px`, t.style.height = `${l}px`, t.style.aspectRatio = String(d);
|
|
1050
|
+
}
|
|
1051
|
+
function qe(e, t) {
|
|
1052
|
+
if (et(e, t), typeof ResizeObserver > "u" || !t.parentElement) return;
|
|
1053
|
+
const s = new ResizeObserver(() => {
|
|
1054
|
+
if (!t.isConnected) return s.disconnect();
|
|
1055
|
+
et(e, t);
|
|
1056
|
+
});
|
|
1057
|
+
s.observe(t.parentElement);
|
|
1058
|
+
}
|
|
1059
|
+
const Ue = (e, t, s) => new Promise((i, r) => {
|
|
1060
|
+
const o = g("img", "glare-image");
|
|
1061
|
+
o.alt = e.alt || O(e.caption), o.decoding = "async", o.draggable = !1, s.protect && (o.style.pointerEvents = "none"), o.onload = () => {
|
|
1062
|
+
e.$image = o, e.contentWidth = o.naturalWidth, e.contentHeight = o.naturalHeight, t.appendChild(o), i();
|
|
1063
|
+
}, o.onerror = () => r(new Error(`Failed to load image: ${e.src}`)), o.src = e.src;
|
|
1064
|
+
}), Be = (e, t, s, i) => {
|
|
1065
|
+
const r = e.format || s.video.format || It(e.src);
|
|
1066
|
+
t.innerHTML = y(s.video.tpl, {
|
|
1005
1067
|
...i,
|
|
1006
1068
|
src: e.src,
|
|
1007
|
-
format:
|
|
1069
|
+
format: r,
|
|
1008
1070
|
poster: e.poster ?? ""
|
|
1009
1071
|
});
|
|
1010
|
-
const
|
|
1011
|
-
|
|
1072
|
+
const o = t.querySelector("video");
|
|
1073
|
+
o && (e.autoStart ?? s.video.autoStart) && o.play().catch(() => {
|
|
1012
1074
|
});
|
|
1013
|
-
},
|
|
1014
|
-
const
|
|
1015
|
-
if (!
|
|
1016
|
-
for (const [a, l] of Object.entries(
|
|
1017
|
-
if (Object.assign(
|
|
1018
|
-
|
|
1075
|
+
}, st = (e, t, s) => new Promise((i) => {
|
|
1076
|
+
const r = s.iframe, o = g("div", "glare-iframe-wrap", r.tpl), n = o.querySelector("iframe");
|
|
1077
|
+
if (!n) throw new Error("Iframe template must contain an <iframe>");
|
|
1078
|
+
for (const [a, l] of Object.entries(r.attr)) n.setAttribute(a, l);
|
|
1079
|
+
if (Object.assign(n.style, r.css), t.appendChild(o), e.type === "embed" ? qe(e, t) : (e.width && (o.style.width = U(e.width)), e.height && (o.style.height = U(e.height))), !r.preload) {
|
|
1080
|
+
n.src = e.src, i();
|
|
1019
1081
|
return;
|
|
1020
1082
|
}
|
|
1021
|
-
|
|
1022
|
-
}),
|
|
1083
|
+
n.onload = () => i(), n.src = e.src, setTimeout(i, Ne);
|
|
1084
|
+
}), We = (e, t) => {
|
|
1023
1085
|
const s = e.src ? c(e.src) : null;
|
|
1024
1086
|
if (!s) throw new Error(`Inline target not found: ${e.src}`);
|
|
1025
1087
|
const i = s.cloneNode(!0);
|
|
1026
1088
|
i.removeAttribute("id"), i.hidden = !1, i.style.display = "", t.appendChild(i);
|
|
1027
|
-
},
|
|
1089
|
+
}, je = async (e, t, s) => {
|
|
1028
1090
|
const i = await fetch(e.src, s.ajax.settings);
|
|
1029
1091
|
if (!i.ok) throw new Error(`Request failed: ${i.status} ${e.src}`);
|
|
1030
1092
|
t.innerHTML = await i.text();
|
|
1031
|
-
},
|
|
1093
|
+
}, Xe = (e, t) => {
|
|
1032
1094
|
e.content instanceof HTMLElement ? t.appendChild(e.content) : t.innerHTML = e.html ?? e.content ?? e.src;
|
|
1033
|
-
},
|
|
1034
|
-
async function
|
|
1035
|
-
t.innerHTML = "", t.className = `glare-content glare-content--${e.type}`, await
|
|
1095
|
+
}, Ye = { image: Ue, video: Be, embed: st, iframe: st, inline: We, ajax: je, html: Xe };
|
|
1096
|
+
async function Ge(e, t, s, i) {
|
|
1097
|
+
t.innerHTML = "", t.className = `glare-content glare-content--${e.type}`, await Ye[e.type](e, t, s, i), e.isLoaded = !0;
|
|
1036
1098
|
}
|
|
1037
|
-
function
|
|
1099
|
+
function Ve(e, t) {
|
|
1038
1100
|
for (const s of [e[t - 1], e[t + 1]])
|
|
1039
1101
|
s?.type === "image" && s.src && (new Image().src = s.src);
|
|
1040
1102
|
}
|
|
1041
|
-
let
|
|
1042
|
-
const
|
|
1043
|
-
constructor(t, s = {}, i = 0,
|
|
1044
|
-
this.id = ++
|
|
1103
|
+
let Ke = 0;
|
|
1104
|
+
const w = class w {
|
|
1105
|
+
constructor(t, s = {}, i = 0, r = "") {
|
|
1106
|
+
this.id = ++Ke, this.current = null, this.currIndex = 0, this.prevIndex = 0, this.isActive = !1, this.isClosing = !1, this.isIdle = !1, this.$refs = null, this.hash = null, this.gestures = null, this.wheel = null, this.cleanups = [], this.previouslyFocused = null, this.opts = ut(s), this.dict = pt(this.opts), this.group = kt(t, this.opts), this.galleryName = r, this.currIndex = this.clampIndex(i), this.zoom = new oe({
|
|
1045
1107
|
image: () => this.current?.$image ?? null,
|
|
1046
1108
|
stage: () => this.$refs?.stage ?? null,
|
|
1047
|
-
onChange: (
|
|
1048
|
-
}), this.idle = new
|
|
1109
|
+
onChange: (o) => this.syncZoomState(o)
|
|
1110
|
+
}), this.idle = new Ae(this.opts.modal ? !1 : this.opts.idleTime, () => this.toggleControls(!0));
|
|
1049
1111
|
}
|
|
1050
1112
|
open(t = this.currIndex) {
|
|
1051
1113
|
if (this.isActive) return this.jumpTo(t);
|
|
1052
1114
|
if (!this.group.length) return;
|
|
1053
|
-
this.opts.closeExisting &&
|
|
1054
|
-
const s =
|
|
1055
|
-
this.$refs = s,
|
|
1056
|
-
this.isActive && (i.classList.add("glare-is-open"), this.showSlide(this.currIndex, !0), this.cleanups.push(
|
|
1115
|
+
this.opts.closeExisting && w.close(!0), this.currIndex = this.clampIndex(t), this.current = this.group[this.currIndex], this.previouslyFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null, this.emit("onInit");
|
|
1116
|
+
const s = Pt(this.opts, this.dict, this.id, this.group.length), { container: i } = s;
|
|
1117
|
+
this.$refs = s, Se(i, this.opts), this.syncChrome(), this.resolveParent().appendChild(i), this.isActive = !0, b.add(this), this.opts.hideScrollbar && W(!0), this.emit("onActivate"), this.emitSlide("beforeShow", this.current), lt(() => {
|
|
1118
|
+
this.isActive && (i.classList.add("glare-is-open"), this.showSlide(this.currIndex, !0), this.cleanups.push(He(this, i, () => this.onActivity())), this.startModules(s), this.opts.autoFocus && this.focus(), this.idle.reset());
|
|
1057
1119
|
});
|
|
1058
1120
|
}
|
|
1059
1121
|
close() {
|
|
1060
1122
|
if (!this.isActive || this.isClosing || !this.current || !this.$refs || this.emitSlide("beforeClose", this.current) === !1) return;
|
|
1061
1123
|
this.isClosing = !0, this.slideshow?.stop(), this.idle.stop();
|
|
1062
|
-
const { container: t, bg: s } = this.$refs, i =
|
|
1124
|
+
const { container: t, bg: s } = this.$refs, i = A() ? 0 : this.opts.animationDuration;
|
|
1063
1125
|
if (i === 0) return this.teardown();
|
|
1064
|
-
t.classList.remove("glare-is-open"), t.classList.add("glare-is-closing"),
|
|
1126
|
+
t.classList.remove("glare-is-open"), t.classList.add("glare-is-closing"), Ft(s ?? t, i, () => this.teardown());
|
|
1065
1127
|
}
|
|
1066
1128
|
next() {
|
|
1067
1129
|
this.jumpTo(this.currIndex + 1);
|
|
@@ -1071,7 +1133,7 @@ const v = class v {
|
|
|
1071
1133
|
}
|
|
1072
1134
|
jumpTo(t) {
|
|
1073
1135
|
if (!this.isActive || this.isClosing) return;
|
|
1074
|
-
const s = this.group.length, i = this.opts.loop ? (t % s + s) % s :
|
|
1136
|
+
const s = this.group.length, i = this.opts.loop ? (t % s + s) % s : E(t, 0, s - 1);
|
|
1075
1137
|
i !== this.currIndex && (this.prevIndex = this.currIndex, this.currIndex = i, this.zoom.reset(), this.current = this.group[i], this.syncChrome(), this.showSlide(i, !1), this.thumbs?.focus(i), this.hash?.update(i), this.slideshow?.onIndexChange(), this.emitSlide("onUpdate", this.current));
|
|
1076
1138
|
}
|
|
1077
1139
|
toggleZoom(t) {
|
|
@@ -1093,48 +1155,48 @@ const v = class v {
|
|
|
1093
1155
|
async showSlide(t, s) {
|
|
1094
1156
|
const i = this.group[t];
|
|
1095
1157
|
if (!this.$refs || !i) return;
|
|
1096
|
-
const { container:
|
|
1097
|
-
|
|
1158
|
+
const { container: r, stage: o } = this.$refs, n = Nt(o, i, this.opts);
|
|
1159
|
+
Xt(this.opts, i) && Ut(n, this.opts, this.dict), Bt(o, this.opts, this.dict), this.emitSlide("beforeLoad", i), this.opts.image.preload && Ve(this.group, t);
|
|
1098
1160
|
let a = !1;
|
|
1099
1161
|
try {
|
|
1100
|
-
await
|
|
1162
|
+
await Ge(i, i.$content, this.opts, this.dict);
|
|
1101
1163
|
} catch (l) {
|
|
1102
|
-
a = !0,
|
|
1164
|
+
a = !0, jt(i, l, this.opts, this.dict), this.emitSlide("onError", i), this.opts.onError || console.warn("[glare]", l);
|
|
1103
1165
|
}
|
|
1104
|
-
if (!this.isActive || this.currIndex !== t) return
|
|
1105
|
-
a || this.emitSlide("afterLoad", i),
|
|
1166
|
+
if (!this.isActive || this.currIndex !== t) return n.remove();
|
|
1167
|
+
a || this.emitSlide("afterLoad", i), Wt(o), s || Te(r, this.opts), Zt(n, s), qt(o, n, this.opts.transitionDuration), this.syncZoomState(this.zoom.isZoomed), !a && (s && Le(r, i, this.opts), this.emitSlide("afterShow", i));
|
|
1106
1168
|
}
|
|
1107
1169
|
syncChrome() {
|
|
1108
|
-
!this.$refs || !this.current || (
|
|
1170
|
+
!this.$refs || !this.current || (Yt(this.$refs, this.opts, this.dict, this.current, this.group.length, this.captionFor(this.current)), this.syncZoomState(this.zoom.isZoomed));
|
|
1109
1171
|
}
|
|
1110
1172
|
captionFor(t) {
|
|
1111
1173
|
const { caption: s } = this.opts;
|
|
1112
1174
|
return typeof s == "function" ? s(this, t) : s ?? t.caption;
|
|
1113
1175
|
}
|
|
1114
1176
|
syncZoomState(t) {
|
|
1115
|
-
this.$refs &&
|
|
1177
|
+
this.$refs && se(this.$refs.container, this.dict, t, !!this.current?.$image);
|
|
1116
1178
|
}
|
|
1117
1179
|
resolveParent() {
|
|
1118
1180
|
const { parentEl: t } = this.opts;
|
|
1119
1181
|
return (typeof t == "string" ? document.querySelector(t) : t) ?? document.body;
|
|
1120
1182
|
}
|
|
1121
1183
|
startModules({ container: t, stage: s, bg: i }) {
|
|
1122
|
-
const
|
|
1123
|
-
|
|
1124
|
-
const
|
|
1125
|
-
|
|
1126
|
-
const a =
|
|
1127
|
-
a &&
|
|
1128
|
-
const l =
|
|
1129
|
-
l && (this.share = new
|
|
1130
|
-
mode:
|
|
1184
|
+
const r = this.opts, o = C(r.thumbs, rt);
|
|
1185
|
+
o && (this.thumbs = new ye(this, t, o));
|
|
1186
|
+
const n = C(r.slideshow, z);
|
|
1187
|
+
n && (this.slideshow = new ge(this, t, n));
|
|
1188
|
+
const a = C(r.fullscreen, ot);
|
|
1189
|
+
a && ct() && (this.fullscreen = new ie(this, t, a));
|
|
1190
|
+
const l = C(r.share, {});
|
|
1191
|
+
l && (this.share = new me(this, t, l)), r.hash && this.galleryName && (this.hash = new pe(this, this.galleryName)), r.wheel && (this.wheel = new we(s, {
|
|
1192
|
+
mode: r.wheel,
|
|
1131
1193
|
current: () => this.current,
|
|
1132
1194
|
isZoomed: () => this.zoom.isZoomed,
|
|
1133
1195
|
next: () => this.next(),
|
|
1134
1196
|
prev: () => this.prev()
|
|
1135
|
-
})),
|
|
1197
|
+
})), r.touch && (this.gestures = new de(s, {
|
|
1136
1198
|
zoom: this.zoom,
|
|
1137
|
-
touch:
|
|
1199
|
+
touch: r.touch,
|
|
1138
1200
|
bg: i,
|
|
1139
1201
|
canPan: () => this.current?.type === "image",
|
|
1140
1202
|
close: () => this.close(),
|
|
@@ -1156,7 +1218,7 @@ const v = class v {
|
|
|
1156
1218
|
this.fullscreen
|
|
1157
1219
|
])
|
|
1158
1220
|
t?.destroy();
|
|
1159
|
-
this.gestures = this.wheel = this.hash = null, this.share = this.thumbs = this.slideshow = this.fullscreen = void 0, this.cleanups.forEach((t) => t()), this.cleanups = [], this.$refs?.container.remove(), this.$refs = null,
|
|
1221
|
+
this.gestures = this.wheel = this.hash = null, this.share = this.thumbs = this.slideshow = this.fullscreen = void 0, this.cleanups.forEach((t) => t()), this.cleanups = [], this.$refs?.container.remove(), this.$refs = null, b.remove(this), this.opts.hideScrollbar && b.size === 0 && W(!1), this.opts.backFocus && (this.current?.$trigger ?? this.previouslyFocused)?.focus({ preventScroll: !0 }), this.isActive = !1, this.isClosing = !1, this.current && this.emitSlide("afterClose", this.current);
|
|
1160
1222
|
}
|
|
1161
1223
|
emit(t) {
|
|
1162
1224
|
return this.opts[t]?.(this);
|
|
@@ -1165,42 +1227,42 @@ const v = class v {
|
|
|
1165
1227
|
return this.opts[t]?.(this, s);
|
|
1166
1228
|
}
|
|
1167
1229
|
clampIndex(t) {
|
|
1168
|
-
return
|
|
1230
|
+
return E(t, 0, Math.max(0, this.group.length - 1));
|
|
1169
1231
|
}
|
|
1170
1232
|
static open(t, s = {}, i = 0) {
|
|
1171
|
-
const
|
|
1172
|
-
return
|
|
1233
|
+
const r = new w(t, s, i);
|
|
1234
|
+
return r.open(), r;
|
|
1173
1235
|
}
|
|
1174
1236
|
static bind(t, s = {}) {
|
|
1175
|
-
return
|
|
1176
|
-
new
|
|
1237
|
+
return Me(t, s, (i, r, o) => {
|
|
1238
|
+
new w(i, s, r, o).open();
|
|
1177
1239
|
});
|
|
1178
1240
|
}
|
|
1179
1241
|
static close(t = !1) {
|
|
1180
|
-
t ?
|
|
1242
|
+
t ? b.all().reverse().forEach((s) => s.close()) : b.top()?.close();
|
|
1181
1243
|
}
|
|
1182
1244
|
static getInstance(t) {
|
|
1183
|
-
return t == null ?
|
|
1245
|
+
return t == null ? b.top() : b.get(t);
|
|
1184
1246
|
}
|
|
1185
1247
|
static getInstances() {
|
|
1186
|
-
return
|
|
1248
|
+
return b.all();
|
|
1187
1249
|
}
|
|
1188
1250
|
/** Closes every instance and removes all `bind()` handlers. */
|
|
1189
1251
|
static destroy() {
|
|
1190
|
-
|
|
1252
|
+
w.close(!0), $e();
|
|
1191
1253
|
}
|
|
1192
1254
|
/** Binds every `[data-glare]` element once the DOM is ready. */
|
|
1193
1255
|
static autoBind(t = {}) {
|
|
1194
|
-
const s = () =>
|
|
1256
|
+
const s = () => w.bind("[data-glare]", t);
|
|
1195
1257
|
document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", s, { once: !0 }) : s();
|
|
1196
1258
|
}
|
|
1197
1259
|
};
|
|
1198
|
-
|
|
1199
|
-
let
|
|
1200
|
-
const
|
|
1260
|
+
w.defaults = nt;
|
|
1261
|
+
let P = w;
|
|
1262
|
+
const Qe = P.autoBind;
|
|
1201
1263
|
export {
|
|
1202
|
-
|
|
1203
|
-
|
|
1204
|
-
|
|
1264
|
+
P as Glare,
|
|
1265
|
+
Qe as autoBind,
|
|
1266
|
+
P as default
|
|
1205
1267
|
};
|
|
1206
1268
|
//# sourceMappingURL=glare.esm.js.map
|