Support `.jsImageViewer` for backwards compatibility.

diff --git a/ts/WoltLabSuite/Core/Bootstrap.ts b/ts/WoltLabSuite/Core/Bootstrap.ts
index c7786d6650f74a7cf5428f300384442e99224408..0a31fc2add63ead0fd5431234327b65cd0d3e89e 100644 (file)
--- a/ts/WoltLabSuite/Core/Bootstrap.ts
+++ b/ts/WoltLabSuite/Core/Bootstrap.ts
@@ -179,6 +179,10 @@ export function setup(options: BoostrapOptions): void {
   whenFirstSeen("[data-fancybox]", () => {
     void import("./Component/Image/Viewer").then(({ setup }) => setup());
   });
+  whenFirstSeen(".jsImageViewer", () => {
+    console.warn("The class `jsImageViewer` is deprecated. Use the attribute `data-fancybox` instead.");
+    void import("./Component/Image/Viewer").then(({ setupLegacy }) => setupLegacy());
+  });
 
   // Move the reCAPTCHA widget overlay to the `pageOverlayContainer`
   // when widget form elements are placed in a dialog.

diff --git a/ts/WoltLabSuite/Core/Component/Image/Viewer.ts b/ts/WoltLabSuite/Core/Component/Image/Viewer.ts
index 14b699b8e9526148da4fb80046c38e0eacc6323b..2f3069a7e68d241b39c9449c821763726d0e6a76 100644 (file)
--- a/ts/WoltLabSuite/Core/Component/Image/Viewer.ts
+++ b/ts/WoltLabSuite/Core/Component/Image/Viewer.ts
@@ -10,6 +10,15 @@ export function setup() {
   });
 }
 
+export function setupLegacy() {
+  void getDefaultConfig().then((config) => {
+    Fancybox.bind(".jsImageViewer", {
+      ...config,
+      groupAll: true,
+    });
+  });
+}
+
 export async function createFancybox(userSlides?: Array<userSlideType>): Promise<Fancybox> {
   return new Fancybox(userSlides, await getDefaultConfig());
 }

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Bootstrap.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Bootstrap.js
index 77b0920da25b446bf0d3e15e5691168fbcb59d16..30bed49592b9dc1f621d7881c4bffc1afb7097c9 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Bootstrap.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Bootstrap.js
@@ -143,6 +143,10 @@ define(["require", "exports", "tslib", "./Core", "./Date/Picker", "./Devtools",
         (0, LazyLoader_1.whenFirstSeen)("[data-fancybox]", () => {
             void new Promise((resolve_9, reject_9) => { require(["./Component/Image/Viewer"], resolve_9, reject_9); }).then(tslib_1.__importStar).then(({ setup }) => setup());
         });
+        (0, LazyLoader_1.whenFirstSeen)(".jsImageViewer", () => {
+            console.warn("The class `jsImageViewer` is deprecated. Use the attribute `data-fancybox` instead.");
+            void new Promise((resolve_10, reject_10) => { require(["./Component/Image/Viewer"], resolve_10, reject_10); }).then(tslib_1.__importStar).then(({ setupLegacy }) => setupLegacy());
+        });
         // Move the reCAPTCHA widget overlay to the `pageOverlayContainer`
         // when widget form elements are placed in a dialog.
         const observer = new MutationObserver((mutations) => {

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Image/Viewer.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Image/Viewer.js
index af94887533bb44454edaac174a00fee84e783c5a..8b69900bdd8263f40ec7838bc3a0e34a13fcbcfb 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Image/Viewer.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Image/Viewer.js
@@ -25,6 +25,7 @@ define(["require", "exports", "@fancyapps/ui"], function (require, exports, ui_1
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.setup = setup;
+    exports.setupLegacy = setupLegacy;
     exports.createFancybox = createFancybox;
     exports.getLocalization = getLocalization;
     const LOCALES = ["cs", "de", "en", "es", "fr", "it", "lv", "pl", "sk"];
@@ -33,6 +34,14 @@ define(["require", "exports", "@fancyapps/ui"], function (require, exports, ui_1
             ui_1.Fancybox.bind("[data-fancybox]", config);
         });
     }
+    function setupLegacy() {
+        void getDefaultConfig().then((config) => {
+            ui_1.Fancybox.bind(".jsImageViewer", {
+                ...config,
+                groupAll: true,
+            });
+        });
+    }
     async function createFancybox(userSlides) {
         return new ui_1.Fancybox(userSlides, await getDefaultConfig());
     }