@wpmoo/ui 2.1.1 → 2.3.0

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.
Files changed (41) hide show
  1. package/README.md +49 -2
  2. package/THIRD_PARTY_NOTICES.md +1 -1
  3. package/certification.json +3 -1
  4. package/dist/assets/css/moo-ui.css +429 -1
  5. package/dist/assets/css/moo-ui.min.css +2 -2
  6. package/dist/assets/css/moo.css +349 -1
  7. package/dist/assets/css/moo.min.css +2 -2
  8. package/dist/js/chart.js +1 -1
  9. package/dist/js/chart.min.js +1 -1
  10. package/dist/js/combobox.js +1 -1
  11. package/dist/js/consent.js +342 -0
  12. package/dist/js/context-menu.js +1 -1
  13. package/dist/js/datatable.js +1 -1
  14. package/dist/js/datepicker.js +1 -1
  15. package/dist/js/datepicker.min.js +1 -1
  16. package/dist/js/floating-panel.js +1 -1
  17. package/dist/js/image-gallery.js +247 -0
  18. package/dist/js/moo-ui.js +561 -4
  19. package/dist/js/moo-ui.min.js +2 -2
  20. package/dist/js/overlay-scrollbar.js +1 -1
  21. package/dist/js/password-requirements.js +1 -1
  22. package/dist/js/sheet.js +1 -1
  23. package/dist/js/sidebar.js +1 -1
  24. package/dist/js/slider.js +1 -1
  25. package/dist/js/state.js +1 -1
  26. package/dist/js/table-of-contents.js +1 -1
  27. package/dist/js/toc.js +1 -1
  28. package/dist/release-manifest.json +4 -4
  29. package/package.json +5 -1
  30. package/scss/_components.scss +2 -0
  31. package/scss/components/_gallery.scss +73 -0
  32. package/scss/components/_item.scss +96 -0
  33. package/scss/foundations/_globals.scss +1 -0
  34. package/scss/foundations/_scope.scss +2 -0
  35. package/scss/mixins/_banner.scss +1 -1
  36. package/scss/moo-core.scss +1 -0
  37. package/scss/moo-ui.scss +2 -0
  38. package/scss/settings/_component_variables.scss +8 -0
  39. package/scss/utilities/_gallery.scss +25 -0
  40. package/scss/utilities/_motion.scss +5 -0
  41. package/scss/utilities/_motion_primitives.scss +10 -0
package/dist/js/chart.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Moo UI chart.js v2.1.1 (https://wpmoo.org/)
2
+ * Moo UI chart.js v2.3.0 (https://wpmoo.org/)
3
3
  * Copyright 2026 WPMoo Authors
4
4
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
5
5
  */
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Moo UI chart.min.js v2.1.1 (https://wpmoo.org/)
2
+ * Moo UI chart.min.js v2.3.0 (https://wpmoo.org/)
3
3
  * Copyright 2026 WPMoo Authors
4
4
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
5
5
  */
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Moo UI combobox.js v2.1.1 (https://wpmoo.org/)
2
+ * Moo UI combobox.js v2.3.0 (https://wpmoo.org/)
3
3
  * Copyright 2026 WPMoo Authors
4
4
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
5
5
  */
@@ -0,0 +1,342 @@
1
+ /*!
2
+ * Moo UI consent.js v2.3.0 (https://wpmoo.org/)
3
+ * Copyright 2026 WPMoo Authors
4
+ * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
5
+ */
6
+
7
+ const instances = /* @__PURE__ */ new WeakMap();
8
+ const documents = /* @__PURE__ */ new WeakMap();
9
+ const RECORD_VERSION = 1;
10
+ const DAY_SECONDS = 86400;
11
+ const FOCUSABLE = "button, a[href], input:not([type='hidden']), select, textarea, [tabindex]:not([tabindex='-1'])";
12
+ function webSource(value, base) {
13
+ if (!value) return "";
14
+ try {
15
+ const url = new URL(value, base);
16
+ return url.protocol === "https:" || url.protocol === "http:" ? url.href : "";
17
+ } catch {
18
+ return "";
19
+ }
20
+ }
21
+ function matches(pattern, name) {
22
+ return pattern.endsWith("*") ? name.startsWith(pattern.slice(0, -1)) : name === pattern;
23
+ }
24
+ async function consentRevision(categories, reask = 0) {
25
+ const lines = [];
26
+ for (const category of categories || []) {
27
+ for (const service of category.services || []) lines.push(`${category.id}/${service.id}`);
28
+ }
29
+ lines.sort();
30
+ if (reask > 0) lines.push(`reask:${reask}`);
31
+ const bytes = new TextEncoder().encode(lines.join("\n"));
32
+ const digest = await globalThis.crypto.subtle.digest("SHA-256", bytes);
33
+ return Array.from(new Uint8Array(digest), (byte) => byte.toString(16).padStart(2, "0")).join("").slice(0, 12);
34
+ }
35
+ class ConsentManager {
36
+ /** The manager bound to a [data-consent] element or to a document. */
37
+ static getInstance(target) {
38
+ if (target?.nodeType === 9) return documents.get(target) || null;
39
+ return target?.nodeType === 1 ? instances.get(target) || null : null;
40
+ }
41
+ static getOrCreateInstance(element, options) {
42
+ return ConsentManager.getInstance(element) || new ConsentManager(element, options);
43
+ }
44
+ constructor(element, { reload } = {}) {
45
+ if (element?.nodeType !== 1 || !element.matches("[data-consent]") || !element.id) {
46
+ throw new TypeError("ConsentManager requires a named [data-consent] element.");
47
+ }
48
+ const existing = instances.get(element);
49
+ if (existing) return existing;
50
+ this._element = element;
51
+ this._document = element.ownerDocument;
52
+ if (documents.has(this._document)) {
53
+ throw new TypeError("ConsentManager allows one consent card per document.");
54
+ }
55
+ this._window = this._document.defaultView;
56
+ const source = element.querySelector("script[data-consent-config]");
57
+ if (!source) throw new TypeError("ConsentManager requires a [data-consent-config] script.");
58
+ this._config = JSON.parse(source.textContent);
59
+ this._cookie = { name: "moo_consent", days: 365, ...this._config.cookie || {} };
60
+ this._categories = this._config.categories || [];
61
+ this._optional = this._categories.filter((category) => !category.required).map((category) => category.id);
62
+ this._reload = reload || (() => this._window.location.reload());
63
+ this._waiting = /* @__PURE__ */ new Map();
64
+ this._listeners = [];
65
+ this._trapping = false;
66
+ this._returnFocus = null;
67
+ const record = this._read();
68
+ this._valid = Boolean(record);
69
+ this._choices = this._normalize(record ? record.c : {});
70
+ const control = (suffix) => this._document.getElementById(`${element.id}-${suffix}`);
71
+ const actions = [
72
+ [control("accept"), () => this.acceptAll()],
73
+ [control("decline"), () => this.declineAll()],
74
+ [control("save"), () => this.save(this._switchChoices(), "save")]
75
+ ];
76
+ for (const [button, action] of actions) {
77
+ if (button) this._listen(button, "click", action);
78
+ }
79
+ this._listen(this._document, "click", (event) => this._onDocumentClick(event));
80
+ this._listen(element, "keydown", (event) => this._onKeydown(event));
81
+ instances.set(element, this);
82
+ documents.set(this._document, this);
83
+ this.activate(this._document);
84
+ if (!this._valid) this._show();
85
+ this.ready = Promise.resolve(this);
86
+ queueMicrotask(() => this._emit("ready", { choices: this.choices, valid: this._valid, revision: this.revision }));
87
+ }
88
+ get revision() {
89
+ return String(this._config.revision);
90
+ }
91
+ get valid() {
92
+ return this._valid;
93
+ }
94
+ get choices() {
95
+ return { ...this._choices };
96
+ }
97
+ get isOpen() {
98
+ return !this._element.hidden;
99
+ }
100
+ granted(id) {
101
+ const category = this._categories.find((entry) => entry.id === id);
102
+ if (!category) return false;
103
+ return category.required ? true : this._valid && this._choices[id] === true;
104
+ }
105
+ /** Runs callback now if granted, otherwise on grant. Returns an unsubscribe function. */
106
+ whenGranted(id, callback) {
107
+ if (this.granted(id)) {
108
+ this._run(callback);
109
+ return () => {
110
+ };
111
+ }
112
+ if (!this._waiting.has(id)) this._waiting.set(id, /* @__PURE__ */ new Set());
113
+ this._waiting.get(id).add(callback);
114
+ return () => this._waiting.get(id)?.delete(callback);
115
+ }
116
+ acceptAll() {
117
+ return this.save(Object.fromEntries(this._optional.map((id) => [id, true])), "accept-all");
118
+ }
119
+ declineAll() {
120
+ return this.save({}, "decline");
121
+ }
122
+ grant(id) {
123
+ return this.save({ ...this._choices, [id]: true }, "grant");
124
+ }
125
+ deny(id) {
126
+ return this.save({ ...this._choices, [id]: false }, "deny");
127
+ }
128
+ /** Stores the choice; optional categories not named become false. */
129
+ save(choices, source = "save") {
130
+ const previous = this._valid ? this.choices : this._normalize({});
131
+ const wasValid = this._valid;
132
+ const next = this._normalize(choices);
133
+ this._write(next);
134
+ this._valid = true;
135
+ this._choices = next;
136
+ const granted = this._optional.filter((id) => next[id] && !previous[id]);
137
+ const revoked = wasValid ? this._optional.filter((id) => previous[id] && !next[id]) : [];
138
+ this.close();
139
+ this.activate(this._document);
140
+ for (const id of granted) {
141
+ const waiting = this._waiting.get(id);
142
+ this._waiting.delete(id);
143
+ waiting?.forEach((callback) => this._run(callback));
144
+ }
145
+ this._emit("change", { choices: this.choices, previous, granted, revoked, source });
146
+ if (revoked.length) {
147
+ revoked.forEach((id) => this._forget(id));
148
+ this._reload();
149
+ }
150
+ return this.choices;
151
+ }
152
+ /** Opens the card with the stored choices; traps focus until closed. */
153
+ open(trigger = null) {
154
+ this._returnFocus = trigger;
155
+ this._trapping = true;
156
+ this._show();
157
+ this._document.getElementById(`${this._element.id}-title`)?.focus({ preventScroll: true });
158
+ this._emit("open", {});
159
+ }
160
+ /** Hides the card; it stays open while no valid choice exists. */
161
+ close() {
162
+ if (!this._valid) return false;
163
+ const wasOpen = this.isOpen;
164
+ const returnFocus = this._trapping ? this._returnFocus : null;
165
+ this._element.hidden = true;
166
+ this._trapping = false;
167
+ this._returnFocus = null;
168
+ if (returnFocus?.isConnected) returnFocus.focus({ preventScroll: true });
169
+ if (wasOpen) this._emit("close", {});
170
+ return true;
171
+ }
172
+ /** Activates gated elements under root whose category is granted. */
173
+ activate(root = this._document) {
174
+ this._activateWhere(root, (id) => this.granted(id));
175
+ }
176
+ dispose() {
177
+ if (instances.get(this._element) !== this) return;
178
+ this._listeners.forEach(([target, type, handler]) => target.removeEventListener(type, handler));
179
+ this._listeners = [];
180
+ this._waiting.clear();
181
+ instances.delete(this._element);
182
+ documents.delete(this._document);
183
+ }
184
+ // A failing site callback must not stop the rest of a save, such as the
185
+ // cleanup and reload after a withdrawal; the error is still reported.
186
+ _run(callback) {
187
+ try {
188
+ callback(this);
189
+ } catch (error) {
190
+ if (typeof this._window.reportError === "function") this._window.reportError(error);
191
+ else this._window.console?.error(error);
192
+ }
193
+ }
194
+ _activateWhere(root, allowed) {
195
+ for (const element of root.querySelectorAll("[data-consent-category]")) {
196
+ if (allowed(element.getAttribute("data-consent-category"))) this._activateElement(element);
197
+ }
198
+ for (const placeholder of root.querySelectorAll("[data-consent-placeholder]")) {
199
+ if (allowed(placeholder.getAttribute("data-consent-placeholder"))) placeholder.hidden = true;
200
+ }
201
+ }
202
+ _listen(target, type, handler) {
203
+ target.addEventListener(type, handler);
204
+ this._listeners.push([target, type, handler]);
205
+ }
206
+ _emit(name, detail) {
207
+ this._document.dispatchEvent(new this._window.CustomEvent(`moo:consent:${name}`, { bubbles: true, detail }));
208
+ }
209
+ _normalize(choices) {
210
+ return Object.fromEntries(this._optional.map((id) => [id, choices?.[id] === true || choices?.[id] === 1]));
211
+ }
212
+ _switch(id) {
213
+ return this._document.getElementById(`${this._element.id}-category-${id}`);
214
+ }
215
+ _switchChoices() {
216
+ return Object.fromEntries(this._optional.map((id) => [id, Boolean(this._switch(id)?.checked)]));
217
+ }
218
+ _show() {
219
+ for (const id of this._optional) {
220
+ const input = this._switch(id);
221
+ if (input) input.checked = this.granted(id);
222
+ }
223
+ this._element.hidden = false;
224
+ }
225
+ _read() {
226
+ const prefix = `${this._cookie.name}=`;
227
+ const raw = this._document.cookie.split("; ").find((part) => part.startsWith(prefix));
228
+ if (!raw) return null;
229
+ try {
230
+ const record = JSON.parse(decodeURIComponent(raw.slice(prefix.length)));
231
+ const age = Date.now() / 1e3 - Number(record.t);
232
+ if (record.v !== RECORD_VERSION || record.r !== this.revision) return null;
233
+ if (!(age >= 0 && age < this._cookie.days * DAY_SECONDS)) return null;
234
+ return record;
235
+ } catch {
236
+ return null;
237
+ }
238
+ }
239
+ _write(choices) {
240
+ const record = {
241
+ v: RECORD_VERSION,
242
+ r: this.revision,
243
+ t: Math.floor(Date.now() / 1e3),
244
+ c: Object.fromEntries(Object.entries(choices).map(([id, value]) => [id, value ? 1 : 0]))
245
+ };
246
+ const secure = this._window.location.protocol === "https:" ? "; Secure" : "";
247
+ this._document.cookie = `${this._cookie.name}=${encodeURIComponent(JSON.stringify(record))}; Path=/; Max-Age=${this._cookie.days * DAY_SECONDS}; SameSite=Lax${secure}`;
248
+ }
249
+ _forget(id) {
250
+ const category = this._categories.find((entry) => entry.id === id);
251
+ const host = this._window.location.hostname;
252
+ const parts = host.split(".");
253
+ const domains = [""];
254
+ for (let index = 0; index < parts.length - 1; index += 1) domains.push(`; Domain=${parts.slice(index).join(".")}`);
255
+ const cookieNames = this._document.cookie.split("; ").map((part) => part.split("=")[0]).filter(Boolean);
256
+ for (const item of category?.storage || []) {
257
+ if (item.type === "cookie") {
258
+ for (const name of cookieNames.filter((candidate) => matches(item.name, candidate))) {
259
+ for (const domain of domains) this._document.cookie = `${name}=; Path=/; Max-Age=0${domain}`;
260
+ }
261
+ } else {
262
+ try {
263
+ const storage = item.type === "local" ? this._window.localStorage : this._window.sessionStorage;
264
+ Object.keys(storage).filter((key) => matches(item.name, key)).forEach((key) => storage.removeItem(key));
265
+ } catch {
266
+ }
267
+ }
268
+ }
269
+ }
270
+ _activateElement(element) {
271
+ if (element.hasAttribute("data-consent-active")) return;
272
+ const declared = element.getAttribute("data-consent-src");
273
+ const src = webSource(declared, this._document.baseURI);
274
+ if (declared && !src) return;
275
+ if (element.localName === "script") {
276
+ const script = this._document.createElement("script");
277
+ for (const { name, value } of element.attributes) {
278
+ if (name !== "type" && !name.startsWith("data-consent-")) script.setAttribute(name, value);
279
+ }
280
+ const type = element.getAttribute("data-consent-type");
281
+ if (type) script.type = type;
282
+ if (src) script.src = src;
283
+ else script.textContent = element.textContent;
284
+ script.setAttribute("data-consent-category", element.getAttribute("data-consent-category"));
285
+ script.setAttribute("data-consent-active", "");
286
+ element.replaceWith(script);
287
+ return;
288
+ }
289
+ element.setAttribute("data-consent-active", "");
290
+ if (src) element.setAttribute("src", src);
291
+ element.hidden = false;
292
+ }
293
+ _onDocumentClick(event) {
294
+ const control = event.target.closest?.("[data-consent-open], [data-consent-grant]");
295
+ if (!control || control.matches(":disabled")) return;
296
+ if (control.hasAttribute("data-consent-open")) {
297
+ if (control.getAttribute("data-consent-open") !== this._element.id) return;
298
+ event.preventDefault();
299
+ this.open(control);
300
+ return;
301
+ }
302
+ const id = control.getAttribute("data-consent-grant");
303
+ if (!this._categories.some((category) => category.id === id)) return;
304
+ event.preventDefault();
305
+ const placeholder = control.closest("[data-consent-placeholder]");
306
+ const scope = control.closest("[data-consent-embed]") || placeholder?.parentElement;
307
+ if (placeholder?.querySelector("[data-consent-remember]")?.checked || !scope) {
308
+ this.grant(id);
309
+ } else {
310
+ this._activateWhere(scope, (category) => category === id);
311
+ }
312
+ }
313
+ _onKeydown(event) {
314
+ if (!this._trapping) return;
315
+ if (event.key === "Escape") {
316
+ if (this.close()) event.preventDefault();
317
+ return;
318
+ }
319
+ if (event.key !== "Tab") return;
320
+ const focusable = Array.from(this._element.querySelectorAll(FOCUSABLE)).filter((control) => !control.matches(":disabled") && control.getClientRects().length > 0);
321
+ if (!focusable.length) return;
322
+ const first = focusable[0];
323
+ const last = focusable[focusable.length - 1];
324
+ const active = this._document.activeElement;
325
+ if (event.shiftKey && (active === first || !this._element.contains(active) || active.id === `${this._element.id}-title`)) {
326
+ event.preventDefault();
327
+ last.focus();
328
+ } else if (!event.shiftKey && active === last) {
329
+ event.preventDefault();
330
+ first.focus();
331
+ }
332
+ }
333
+ }
334
+ function initConsent(root = document, options) {
335
+ const element = root.querySelector?.("[data-consent]");
336
+ return element ? ConsentManager.getOrCreateInstance(element, options) : null;
337
+ }
338
+ export {
339
+ consentRevision,
340
+ ConsentManager as default,
341
+ initConsent
342
+ };
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Moo UI context-menu.js v2.1.1 (https://wpmoo.org/)
2
+ * Moo UI context-menu.js v2.3.0 (https://wpmoo.org/)
3
3
  * Copyright 2026 WPMoo Authors
4
4
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
5
5
  */
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Moo UI datatable.js v2.1.1 (https://wpmoo.org/)
2
+ * Moo UI datatable.js v2.3.0 (https://wpmoo.org/)
3
3
  * Copyright 2026 WPMoo Authors
4
4
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
5
5
  */
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Moo UI datepicker.js v2.1.1 (https://wpmoo.org/)
2
+ * Moo UI datepicker.js v2.3.0 (https://wpmoo.org/)
3
3
  * Copyright 2026 WPMoo Authors
4
4
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
5
5
  */
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Moo UI datepicker.min.js v2.1.1 (https://wpmoo.org/)
2
+ * Moo UI datepicker.min.js v2.3.0 (https://wpmoo.org/)
3
3
  * Copyright 2026 WPMoo Authors
4
4
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
5
5
  */
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Moo UI floating-panel.js v2.1.1 (https://wpmoo.org/)
2
+ * Moo UI floating-panel.js v2.3.0 (https://wpmoo.org/)
3
3
  * Copyright 2026 WPMoo Authors
4
4
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
5
5
  */
@@ -0,0 +1,247 @@
1
+ /*!
2
+ * Moo UI image-gallery.js v2.3.0 (https://wpmoo.org/)
3
+ * Copyright 2026 WPMoo Authors
4
+ * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
5
+ */
6
+
7
+ const instances = /* @__PURE__ */ new WeakMap();
8
+ const SLIDESHOW_INTERVAL = 5e3;
9
+ const RESIZE_DURATION = 250;
10
+ class ImageGallery {
11
+ static getInstance(element) {
12
+ return element?.nodeType === 1 ? instances.get(element) || null : null;
13
+ }
14
+ static getOrCreateInstance(element) {
15
+ return ImageGallery.getInstance(element) || new ImageGallery(element);
16
+ }
17
+ constructor(element) {
18
+ if (element?.nodeType !== 1 || !element.matches("[data-image-gallery]")) {
19
+ throw new TypeError("ImageGallery requires a [data-image-gallery] root element.");
20
+ }
21
+ const existing = instances.get(element);
22
+ if (existing) return existing;
23
+ this._element = element;
24
+ this._window = element.ownerDocument.defaultView;
25
+ this._dialog = element.querySelector(".modal");
26
+ this._carousel = this._dialog?.querySelector(".carousel");
27
+ if (!this._dialog || !this._carousel) {
28
+ throw new TypeError("ImageGallery requires a lightbox Dialog with a Carousel.");
29
+ }
30
+ this._slides = Array.from(this._carousel.querySelectorAll(".carousel-item"));
31
+ this._counter = this._dialog.querySelector("[data-gallery-counter]");
32
+ this._caption = this._dialog.querySelector("[data-gallery-caption]");
33
+ this._credit = this._dialog.querySelector("[data-gallery-credit]");
34
+ this._stage = this._dialog.querySelector("[data-gallery-stage]");
35
+ this._frame = this._dialog.querySelector(".modal-dialog");
36
+ this._progress = this._dialog.querySelector(".progress");
37
+ this._progressBar = this._progress?.querySelector(".progress-bar");
38
+ this._progress?.setAttribute("aria-hidden", "true");
39
+ const controls = (suffix) => this._dialog.id ? element.ownerDocument.getElementById(`${this._dialog.id}-${suffix}`) : null;
40
+ this._enterButton = controls("fullscreen");
41
+ this._exitButton = controls("windowed");
42
+ this._playButton = controls("play");
43
+ this._pauseButton = controls("pause");
44
+ this._listeners = [];
45
+ this._listen(this._dialog, "show.bs.modal", (event) => this._onShow(event));
46
+ this._listen(this._window, "resize", () => this._layoutStage());
47
+ this._listen(this._dialog, "shown.bs.modal", () => this._carouselInstance());
48
+ this._listen(this._carousel, "slide.bs.carousel", (event) => this.show(event.to, false));
49
+ this._listen(this._carousel, "slid.bs.carousel", () => this._restartTimer());
50
+ this._listen(this._dialog, "keydown", (event) => this._onKeydown(event));
51
+ this._listen(this._dialog, "hidden.bs.modal", () => {
52
+ this.play(false);
53
+ this.fullscreen(false);
54
+ });
55
+ const actions = [
56
+ [controls("previous"), () => this._step(false)],
57
+ [controls("next"), () => this._step(true)],
58
+ [this._playButton, () => this.play(true, true)],
59
+ [this._pauseButton, () => this.play(false, true)],
60
+ [this._enterButton, () => this.fullscreen(true, true)],
61
+ [this._exitButton, () => this.fullscreen(false, true)]
62
+ ];
63
+ for (const [button, action] of actions) {
64
+ if (button) this._listen(button, "click", action);
65
+ }
66
+ instances.set(element, this);
67
+ }
68
+ get index() {
69
+ const active = this._slides.findIndex((slide) => slide.classList.contains("active"));
70
+ return Math.max(active, 0);
71
+ }
72
+ /** Marks photo `index` current, loads it and its neighbours. */
73
+ show(index, activate = true) {
74
+ const count = this._slides.length;
75
+ if (!count) return this;
76
+ const current = (Number(index) % count + count) % count;
77
+ if (activate) {
78
+ this._slides.forEach((slide2, position) => {
79
+ slide2.classList.toggle("active", position === current);
80
+ });
81
+ }
82
+ for (const offset of [0, 1, -1]) {
83
+ this._load(this._slides[(current + offset + count) % count]);
84
+ }
85
+ const slide = this._slides[current];
86
+ if (this._caption) {
87
+ this._caption.textContent = slide.getAttribute("data-gallery-slide-title") || slide.querySelector("img")?.alt || "";
88
+ }
89
+ if (this._credit) {
90
+ const credit = slide.getAttribute("data-gallery-slide-credit") || "";
91
+ this._credit.textContent = credit;
92
+ this._credit.classList.toggle("d-none", !credit);
93
+ }
94
+ if (this._counter) {
95
+ const template = this._counter.getAttribute("data-gallery-counter") || "{current} / {total}";
96
+ this._counter.textContent = template.replaceAll("{current}", String(current + 1)).replaceAll("{total}", String(count));
97
+ }
98
+ return this;
99
+ }
100
+ /** Starts or stops the slideshow. */
101
+ play(on = true, moveFocus = false) {
102
+ this._playing = Boolean(on) && Boolean(this._carouselInstance());
103
+ this._progress?.classList.toggle("d-none", !this._playing);
104
+ this._restartTimer();
105
+ this._playButton?.classList.toggle("d-none", this._playing);
106
+ this._pauseButton?.classList.toggle("d-none", !this._playing);
107
+ this._counter?.setAttribute("aria-live", this._playing ? "off" : "polite");
108
+ if (moveFocus) (this._playing ? this._pauseButton : this._playButton)?.focus();
109
+ return this;
110
+ }
111
+ get isFullscreen() {
112
+ return Boolean(this._frame?.classList.contains("modal-fullscreen"));
113
+ }
114
+ /** Switches between the large dialog and full screen. */
115
+ fullscreen(on = true, moveFocus = false) {
116
+ if (!this._frame) return this;
117
+ const value = Boolean(on);
118
+ this._resize(() => {
119
+ this._frame.classList.toggle("modal-fullscreen", value);
120
+ this._layoutStage();
121
+ });
122
+ if (moveFocus) (value ? this._exitButton : this._enterButton)?.focus();
123
+ return this;
124
+ }
125
+ dispose() {
126
+ this._stopTimer();
127
+ for (const [target, type, listener] of this._listeners) {
128
+ target.removeEventListener(type, listener);
129
+ }
130
+ this._listeners = [];
131
+ instances.delete(this._element);
132
+ }
133
+ _listen(target, type, listener) {
134
+ target.addEventListener(type, listener);
135
+ this._listeners.push([target, type, listener]);
136
+ }
137
+ // The dialog fills the screen after the full-screen button, or below the
138
+ // breakpoint of Bootstrap's .modal-fullscreen-{breakpoint}-down.
139
+ _fillsScreen() {
140
+ if (this.isFullscreen) return true;
141
+ const breakpoint = this._frame?.className.match(/\bmodal-fullscreen-(\w+)-down\b/)?.[1];
142
+ if (!breakpoint) return false;
143
+ const width = Number.parseFloat(this._window.getComputedStyle(this._element.ownerDocument.documentElement).getPropertyValue(`--bs-breakpoint-${breakpoint}`));
144
+ return Number.isFinite(width) && this._window.matchMedia(`(max-width: ${width - 0.02}px)`).matches;
145
+ }
146
+ // Runs one photo's time on the Progress bar, then shows the next photo.
147
+ _restartTimer() {
148
+ this._stopTimer();
149
+ if (!this._playing) return;
150
+ const advance = () => {
151
+ if (this._playing) this._step(true);
152
+ };
153
+ if (typeof this._progressBar?.animate === "function") {
154
+ const timer = this._progressBar.animate(
155
+ [{ width: "0%" }, { width: "100%" }],
156
+ { duration: SLIDESHOW_INTERVAL, easing: "linear", fill: "forwards" }
157
+ );
158
+ timer.addEventListener("finish", () => {
159
+ if (this._timer === timer) advance();
160
+ });
161
+ this._timer = timer;
162
+ } else {
163
+ this._timeout = this._window.setTimeout(advance, SLIDESHOW_INTERVAL);
164
+ }
165
+ }
166
+ _stopTimer() {
167
+ this._timer?.cancel();
168
+ this._timer = null;
169
+ this._window.clearTimeout(this._timeout);
170
+ }
171
+ // Animates the dialog from its old box to the new one: the content keeps
172
+ // its final layout and starts scaled to where it was (first, last, invert,
173
+ // play). Without motion the change applies at once.
174
+ _resize(change) {
175
+ const content = this._frame.querySelector(".modal-content");
176
+ const reduced = this._window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
177
+ if (!content || typeof content.animate !== "function" || reduced || !this._dialog.classList.contains("show")) {
178
+ change();
179
+ return;
180
+ }
181
+ this._resizing?.cancel();
182
+ const first = content.getBoundingClientRect();
183
+ change();
184
+ const last = content.getBoundingClientRect();
185
+ if (!first.width || !first.height || !last.width || !last.height) return;
186
+ this._resizing = content.animate([
187
+ {
188
+ transformOrigin: "0 0",
189
+ transform: `translate(${first.left - last.left}px, ${first.top - last.top}px) scale(${first.width / last.width}, ${first.height / last.height})`
190
+ },
191
+ { transformOrigin: "0 0", transform: "none" }
192
+ ], { duration: RESIZE_DURATION, easing: "cubic-bezier(0.2, 0, 0, 1)" });
193
+ }
194
+ _layoutStage() {
195
+ const fill = this._fillsScreen();
196
+ this._stage?.classList.toggle("gallery-stage", !fill);
197
+ this._enterButton?.classList.toggle("d-none", fill);
198
+ this._exitButton?.classList.toggle("d-none", !this.isFullscreen);
199
+ }
200
+ _onShow(event) {
201
+ this._layoutStage();
202
+ const trigger = event.relatedTarget;
203
+ const value = trigger?.closest?.("[data-gallery-index]")?.getAttribute("data-gallery-index");
204
+ this.show(value === null || value === void 0 ? 0 : Number.parseInt(value, 10) || 0);
205
+ }
206
+ _onKeydown(event) {
207
+ if (!["ArrowLeft", "ArrowRight"].includes(event.key)) return;
208
+ if (this._carousel.contains(event.target)) return;
209
+ event.preventDefault();
210
+ const rtl = this._element.ownerDocument.documentElement.dir === "rtl";
211
+ this._step(event.key === "ArrowRight" !== rtl);
212
+ }
213
+ _step(forward) {
214
+ const carousel = this._carouselInstance();
215
+ if (!carousel) return;
216
+ if (forward) carousel.next();
217
+ else carousel.prev();
218
+ }
219
+ _carouselInstance(create = true) {
220
+ const Carousel = this._window.bootstrap?.Carousel;
221
+ if (!Carousel) return null;
222
+ if (!create) return Carousel.getInstance(this._carousel);
223
+ return Carousel.getOrCreateInstance(this._carousel, {
224
+ interval: false,
225
+ pause: false,
226
+ ride: false,
227
+ keyboard: true,
228
+ touch: true,
229
+ wrap: true
230
+ });
231
+ }
232
+ _load(slide) {
233
+ const image = slide?.querySelector("img[data-gallery-src]");
234
+ if (!image || image.hasAttribute("src")) return;
235
+ const srcset = image.getAttribute("data-gallery-srcset");
236
+ if (srcset) image.setAttribute("srcset", srcset);
237
+ image.setAttribute("src", image.getAttribute("data-gallery-src"));
238
+ }
239
+ }
240
+ function initImageGalleries(root = document) {
241
+ const galleries = Array.from(root.querySelectorAll("[data-image-gallery]")).map((element) => ImageGallery.getOrCreateInstance(element));
242
+ return () => galleries.forEach((gallery) => gallery.dispose());
243
+ }
244
+ export {
245
+ ImageGallery as default,
246
+ initImageGalleries
247
+ };