From: Alexander Ebert Date: Sat, 2 Jan 2021 13:16:01 +0000 (+0100) Subject: Convert `Bbcode/Collapsible` to TypeScript X-Git-Tag: 5.4.0_Alpha_1~484^2~11 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=00ca40d3a91c10732de7fc0bfa2552fe046d4bd6;p=GitHub%2FWoltLab%2FWCF.git Convert `Bbcode/Collapsible` to TypeScript --- diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Bbcode/Collapsible.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Bbcode/Collapsible.js index f86e20feb5..0e35100716 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Bbcode/Collapsible.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Bbcode/Collapsible.js @@ -1,88 +1,86 @@ /** * Generic handler for collapsible bbcode boxes. * - * @author Alexander Ebert - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Bbcode/Collapsible + * @author Alexander Ebert + * @copyright 2001-2019 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Bbcode/Collapsible */ -define([], function () { +define(["require", "exports"], function (require, exports) { "use strict"; - var _containers = elByClass('jsCollapsibleBbcode'); - /** - * @exports WoltLabSuite/Core/Bbcode/Collapsible - */ - return { - observe: function () { - var container, toggleButtons, overflowContainer; - while (_containers.length) { - container = _containers[0]; - // find the matching toggle button - toggleButtons = []; - elBySelAll('.toggleButton:not(.jsToggleButtonEnabled)', container, function (button) { - //noinspection JSReferencingMutableVariableFromClosure - if (button.closest('.jsCollapsibleBbcode') === container) { - toggleButtons.push(button); + Object.defineProperty(exports, "__esModule", { value: true }); + exports.observe = void 0; + function initContainer(container, toggleButtons, overflowContainer) { + toggleButtons.forEach((toggleButton) => { + toggleButton.classList.add("jsToggleButtonEnabled"); + toggleButton.addEventListener("click", (ev) => toggleContainer(container, toggleButtons, ev)); + }); + // expand boxes that are initially scrolled + if (overflowContainer.scrollTop !== 0) { + overflowContainer.scrollTop = 0; + toggleContainer(container, toggleButtons); + } + overflowContainer.addEventListener("scroll", () => { + overflowContainer.scrollTop = 0; + if (container.classList.contains("collapsed")) { + toggleContainer(container, toggleButtons); + } + }); + } + function toggleContainer(container, toggleButtons, event) { + if (container.classList.toggle("collapsed")) { + toggleButtons.forEach((toggleButton) => { + const title = toggleButton.dataset.titleExpand; + if (toggleButton.classList.contains("icon")) { + toggleButton.classList.remove("fa-compress"); + toggleButton.classList.add("fa-expand"); + toggleButton.title = title; + } + else { + toggleButton.textContent = title; + } + }); + if (event instanceof Event) { + // negative top value means the upper boundary is not within the viewport + const top = container.getBoundingClientRect().top; + if (top < 0) { + let y = window.pageYOffset + (top - 100); + if (y < 0) { + y = 0; } - }); - overflowContainer = elBySel('.collapsibleBbcodeOverflow', container) || container; - if (toggleButtons.length > 0) { - (function (container, toggleButtons) { - var toggle = function (event) { - if (container.classList.toggle('collapsed')) { - toggleButtons.forEach(function (toggleButton) { - if (toggleButton.classList.contains('icon')) { - toggleButton.classList.remove('fa-compress'); - toggleButton.classList.add('fa-expand'); - toggleButton.title = elData(toggleButton, 'title-expand'); - } - else { - toggleButton.textContent = elData(toggleButton, 'title-expand'); - } - }); - if (event instanceof Event) { - // negative top value means the upper boundary is not within the viewport - var top = container.getBoundingClientRect().top; - if (top < 0) { - var y = window.pageYOffset + (top - 100); - if (y < 0) - y = 0; - window.scrollTo(window.pageXOffset, y); - } - } - } - else { - toggleButtons.forEach(function (toggleButton) { - if (toggleButton.classList.contains('icon')) { - toggleButton.classList.add('fa-compress'); - toggleButton.classList.remove('fa-expand'); - toggleButton.title = elData(toggleButton, 'title-collapse'); - } - else { - toggleButton.textContent = elData(toggleButton, 'title-collapse'); - } - }); - } - }; - toggleButtons.forEach(function (toggleButton) { - toggleButton.classList.add('jsToggleButtonEnabled'); - toggleButton.addEventListener('click', toggle); - }); - // expand boxes that are initially scrolled - if (overflowContainer.scrollTop !== 0) { - overflowContainer.scrollTop = 0; - toggle(); - } - overflowContainer.addEventListener('scroll', function () { - overflowContainer.scrollTop = 0; - if (container.classList.contains('collapsed')) { - toggle(); - } - }); - })(container, toggleButtons); + window.scrollTo(window.pageXOffset, y); } - container.classList.remove('jsCollapsibleBbcode'); } } - }; + else { + toggleButtons.forEach((toggleButton) => { + const title = toggleButton.dataset.titleCollapse; + if (toggleButton.classList.contains("icon")) { + toggleButton.classList.add("fa-compress"); + toggleButton.classList.remove("fa-expand"); + toggleButton.title = title; + } + else { + toggleButton.textContent = title; + } + }); + } + } + function observe() { + document.querySelectorAll(".jsCollapsibleBbcode").forEach((container) => { + // find the matching toggle button + const toggleButtons = []; + container.querySelectorAll(".toggleButton:not(.jsToggleButtonEnabled)").forEach((button) => { + if (button.closest(".jsCollapsibleBbcode") === container) { + toggleButtons.push(button); + } + }); + const overflowContainer = container.querySelector(".collapsibleBbcodeOverflow") || container; + if (toggleButtons.length > 0) { + initContainer(container, toggleButtons, overflowContainer); + } + container.classList.remove("jsCollapsibleBbcode"); + }); + } + exports.observe = observe; }); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Bbcode/Collapsible.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Bbcode/Collapsible.js deleted file mode 100644 index 6333ceb861..0000000000 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Bbcode/Collapsible.js +++ /dev/null @@ -1,95 +0,0 @@ -/** - * Generic handler for collapsible bbcode boxes. - * - * @author Alexander Ebert - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Bbcode/Collapsible - */ -define([], function() { - "use strict"; - - var _containers = elByClass('jsCollapsibleBbcode'); - - /** - * @exports WoltLabSuite/Core/Bbcode/Collapsible - */ - return { - observe: function() { - var container, toggleButtons, overflowContainer; - while (_containers.length) { - container = _containers[0]; - - // find the matching toggle button - toggleButtons = []; - elBySelAll('.toggleButton:not(.jsToggleButtonEnabled)', container, function (button) { - //noinspection JSReferencingMutableVariableFromClosure - if (button.closest('.jsCollapsibleBbcode') === container) { - toggleButtons.push(button); - } - }); - overflowContainer = elBySel('.collapsibleBbcodeOverflow', container) || container; - - if (toggleButtons.length > 0) { - (function (container, toggleButtons) { - var toggle = function (event) { - if (container.classList.toggle('collapsed')) { - toggleButtons.forEach(function (toggleButton) { - if (toggleButton.classList.contains('icon')) { - toggleButton.classList.remove('fa-compress'); - toggleButton.classList.add('fa-expand'); - toggleButton.title = elData(toggleButton, 'title-expand'); - } - else { - toggleButton.textContent = elData(toggleButton, 'title-expand'); - } - }); - - if (event instanceof Event) { - // negative top value means the upper boundary is not within the viewport - var top = container.getBoundingClientRect().top; - if (top < 0) { - var y = window.pageYOffset + (top - 100); - if (y < 0) y = 0; - window.scrollTo(window.pageXOffset, y); - } - } - } - else { - toggleButtons.forEach(function (toggleButton) { - if (toggleButton.classList.contains('icon')) { - toggleButton.classList.add('fa-compress'); - toggleButton.classList.remove('fa-expand'); - toggleButton.title = elData(toggleButton, 'title-collapse'); - } - else { - toggleButton.textContent = elData(toggleButton, 'title-collapse'); - } - }); - } - }; - - toggleButtons.forEach(function (toggleButton) { - toggleButton.classList.add('jsToggleButtonEnabled'); - toggleButton.addEventListener('click', toggle); - }); - - // expand boxes that are initially scrolled - if (overflowContainer.scrollTop !== 0) { - overflowContainer.scrollTop = 0; - toggle(); - } - overflowContainer.addEventListener('scroll', function () { - overflowContainer.scrollTop = 0; - if (container.classList.contains('collapsed')) { - toggle(); - } - }); - })(container, toggleButtons); - } - - container.classList.remove('jsCollapsibleBbcode'); - } - } - }; -}); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Bbcode/Collapsible.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Bbcode/Collapsible.ts new file mode 100644 index 0000000000..cf0c0e5fc3 --- /dev/null +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Bbcode/Collapsible.ts @@ -0,0 +1,86 @@ +/** + * Generic handler for collapsible bbcode boxes. + * + * @author Alexander Ebert + * @copyright 2001-2019 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Bbcode/Collapsible + */ + +function initContainer(container: HTMLElement, toggleButtons: HTMLElement[], overflowContainer: HTMLElement): void { + toggleButtons.forEach((toggleButton) => { + toggleButton.classList.add("jsToggleButtonEnabled"); + toggleButton.addEventListener("click", (ev) => toggleContainer(container, toggleButtons, ev)); + }); + + // expand boxes that are initially scrolled + if (overflowContainer.scrollTop !== 0) { + overflowContainer.scrollTop = 0; + toggleContainer(container, toggleButtons); + } + overflowContainer.addEventListener("scroll", () => { + overflowContainer.scrollTop = 0; + if (container.classList.contains("collapsed")) { + toggleContainer(container, toggleButtons); + } + }); +} + +function toggleContainer(container: HTMLElement, toggleButtons: HTMLElement[], event?: Event): void { + if (container.classList.toggle("collapsed")) { + toggleButtons.forEach((toggleButton) => { + const title = toggleButton.dataset.titleExpand!; + if (toggleButton.classList.contains("icon")) { + toggleButton.classList.remove("fa-compress"); + toggleButton.classList.add("fa-expand"); + toggleButton.title = title; + } else { + toggleButton.textContent = title; + } + }); + + if (event instanceof Event) { + // negative top value means the upper boundary is not within the viewport + const top = container.getBoundingClientRect().top; + if (top < 0) { + let y = window.pageYOffset + (top - 100); + if (y < 0) { + y = 0; + } + + window.scrollTo(window.pageXOffset, y); + } + } + } else { + toggleButtons.forEach((toggleButton) => { + const title = toggleButton.dataset.titleCollapse!; + if (toggleButton.classList.contains("icon")) { + toggleButton.classList.add("fa-compress"); + toggleButton.classList.remove("fa-expand"); + toggleButton.title = title; + } else { + toggleButton.textContent = title; + } + }); + } +} + +export function observe(): void { + document.querySelectorAll(".jsCollapsibleBbcode").forEach((container: HTMLElement) => { + // find the matching toggle button + const toggleButtons: HTMLElement[] = []; + container.querySelectorAll(".toggleButton:not(.jsToggleButtonEnabled)").forEach((button: HTMLElement) => { + if (button.closest(".jsCollapsibleBbcode") === container) { + toggleButtons.push(button); + } + }); + + const overflowContainer = (container.querySelector(".collapsibleBbcodeOverflow") as HTMLElement) || container; + + if (toggleButtons.length > 0) { + initContainer(container, toggleButtons, overflowContainer); + } + + container.classList.remove("jsCollapsibleBbcode"); + }); +}