From 408b5e97e3c08ef2d98724a46354258ad71283c0 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Sat, 2 Jan 2021 15:30:17 +0100 Subject: [PATCH] Convert `Bbcode/Spoiler` to TypeScript --- .../js/WoltLabSuite/Core/Bbcode/Spoiler.js | 60 ++++++++++--------- .../ts/WoltLabSuite/Core/Bbcode/Spoiler.js | 49 --------------- .../ts/WoltLabSuite/Core/Bbcode/Spoiler.ts | 46 ++++++++++++++ 3 files changed, 78 insertions(+), 77 deletions(-) delete mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Bbcode/Spoiler.js create mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Bbcode/Spoiler.ts diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Bbcode/Spoiler.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Bbcode/Spoiler.js index 726eb2f711..c39113b74c 100644 --- 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 * @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 index 1c78664a96..0000000000 --- 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 - * @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 index 0000000000..0877dfd01f --- /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 + * @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)); + }); +} -- 2.20.1