Convert `Bbcode/Spoiler` to TypeScript

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Bbcode/Spoiler.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Bbcode/Spoiler.js
index 726eb2f7112b32f8889fdcabc8ba52605e7d3ca4..c39113b74c13a96380cbe4d33722caefe9112628 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Bbcode/Spoiler.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Bbcode/Spoiler.js
@@ -6,33 +6,37 @@
  * @license     GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
  * @module      WoltLabSuite/Core/Bbcode/Spoiler
  */
-define(['Language'], function (Language) {
-    'use strict';
-    var _containers = elByClass('jsSpoilerBox');
-    /**
-     * @exports        WoltLabSuite/Core/Bbcode/Spoiler
-     */
-    return {
-        observe: function () {
-            var container, toggleButton;
-            while (_containers.length) {
-                container = _containers[0];
-                container.classList.remove('jsSpoilerBox');
-                toggleButton = elBySel('.jsSpoilerToggle', container);
-                container = toggleButton.parentNode.nextElementSibling;
-                toggleButton.addEventListener('click', this._onClick.bind(this, container, toggleButton));
-            }
-        },
-        _onClick: function (container, toggleButton, event) {
-            event.preventDefault();
-            toggleButton.classList.toggle('active');
-            var isActive = toggleButton.classList.contains('active');
-            window[(isActive ? 'elShow' : 'elHide')](container);
-            elAttr(toggleButton, 'aria-expanded', isActive);
-            elAttr(container, 'aria-hidden', !isActive);
-            if (!elDataBool(toggleButton, 'has-custom-label')) {
-                toggleButton.textContent = Language.get(toggleButton.classList.contains('active') ? 'wcf.bbcode.spoiler.hide' : 'wcf.bbcode.spoiler.show');
-            }
+define(["require", "exports", "tslib", "../Core", "../Language", "../Dom/Util"], function (require, exports, tslib_1, Core, Language, Util_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.observe = void 0;
+    Core = tslib_1.__importStar(Core);
+    Language = tslib_1.__importStar(Language);
+    Util_1 = tslib_1.__importDefault(Util_1);
+    function onClick(event, content, toggleButton) {
+        event.preventDefault();
+        toggleButton.classList.toggle("active");
+        const isActive = toggleButton.classList.contains("active");
+        if (isActive) {
+            Util_1.default.show(content);
         }
-    };
+        else {
+            Util_1.default.hide(content);
+        }
+        toggleButton.setAttribute("aria-expanded", isActive ? "true" : "false");
+        content.setAttribute("aria-hidden", isActive ? "false" : "true");
+        if (!Core.stringToBool(toggleButton.dataset.hasCustomLabel || "")) {
+            toggleButton.textContent = Language.get(toggleButton.classList.contains("active") ? "wcf.bbcode.spoiler.hide" : "wcf.bbcode.spoiler.show");
+        }
+    }
+    function observe() {
+        const className = "jsSpoilerBox";
+        document.querySelectorAll(`.${className}`).forEach((container) => {
+            container.classList.remove(className);
+            const toggleButton = container.querySelector(".jsSpoilerToggle");
+            const content = container.querySelector(".spoilerBoxContent");
+            toggleButton.addEventListener("click", (ev) => onClick(ev, content, toggleButton));
+        });
+    }
+    exports.observe = observe;
 });

diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Bbcode/Spoiler.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Bbcode/Spoiler.js
deleted file mode 100644 (file)
index 1c78664..0000000
--- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Bbcode/Spoiler.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * Generic handler for spoiler boxes.
- *
- * @author      Alexander Ebert
- * @copyright   2001-2020 WoltLab GmbH
- * @license     GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
- * @module      WoltLabSuite/Core/Bbcode/Spoiler
- */
-define(['Language'], function (Language) {
-       'use strict';
-       
-       var _containers = elByClass('jsSpoilerBox');
-       
-       /**
-        * @exports     WoltLabSuite/Core/Bbcode/Spoiler
-        */
-       return {
-               observe: function () {
-                       var container, toggleButton;
-                       while (_containers.length) {
-                               container = _containers[0];
-                               container.classList.remove('jsSpoilerBox');
-                               
-                               toggleButton = elBySel('.jsSpoilerToggle', container);
-                               container = toggleButton.parentNode.nextElementSibling;
-                               
-                               toggleButton.addEventListener(
-                                       'click',
-                                       this._onClick.bind(this, container, toggleButton)
-                               );
-                       }
-               },
-               
-               _onClick: function (container, toggleButton, event) {
-                       event.preventDefault();
-                       
-                       toggleButton.classList.toggle('active');
-                       
-                       var isActive = toggleButton.classList.contains('active');
-                       window[(isActive ? 'elShow' : 'elHide')](container);
-                       elAttr(toggleButton, 'aria-expanded', isActive);
-                       elAttr(container, 'aria-hidden', !isActive);
-                       
-                       if (!elDataBool(toggleButton, 'has-custom-label')) {
-                               toggleButton.textContent = Language.get(toggleButton.classList.contains('active') ? 'wcf.bbcode.spoiler.hide' : 'wcf.bbcode.spoiler.show');
-                       }
-               }
-       };
-});

diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Bbcode/Spoiler.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Bbcode/Spoiler.ts
new file mode 100644 (file)
index 0000000..0877dfd
--- /dev/null
+++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Bbcode/Spoiler.ts
@@ -0,0 +1,46 @@
+/**
+ * Generic handler for spoiler boxes.
+ *
+ * @author      Alexander Ebert
+ * @copyright   2001-2020 WoltLab GmbH
+ * @license     GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module      WoltLabSuite/Core/Bbcode/Spoiler
+ */
+
+import * as Core from "../Core";
+import * as Language from "../Language";
+import DomUtil from "../Dom/Util";
+
+function onClick(event: Event, content: HTMLElement, toggleButton: HTMLAnchorElement): void {
+  event.preventDefault();
+
+  toggleButton.classList.toggle("active");
+
+  const isActive = toggleButton.classList.contains("active");
+  if (isActive) {
+    DomUtil.show(content);
+  } else {
+    DomUtil.hide(content);
+  }
+
+  toggleButton.setAttribute("aria-expanded", isActive ? "true" : "false");
+  content.setAttribute("aria-hidden", isActive ? "false" : "true");
+
+  if (!Core.stringToBool(toggleButton.dataset.hasCustomLabel || "")) {
+    toggleButton.textContent = Language.get(
+      toggleButton.classList.contains("active") ? "wcf.bbcode.spoiler.hide" : "wcf.bbcode.spoiler.show",
+    );
+  }
+}
+
+export function observe(): void {
+  const className = "jsSpoilerBox";
+  document.querySelectorAll(`.${className}`).forEach((container: HTMLElement) => {
+    container.classList.remove(className);
+
+    const toggleButton = container.querySelector(".jsSpoilerToggle") as HTMLAnchorElement;
+    const content = container.querySelector(".spoilerBoxContent") as HTMLElement;
+
+    toggleButton.addEventListener("click", (ev) => onClick(ev, content, toggleButton));
+  });
+}