From: Matthias Schmidt Date: Sat, 12 Dec 2020 15:03:48 +0000 (+0100) Subject: Convert `Form/Builder/Field/Dependency/Container/Tab` to TypeScript X-Git-Tag: 5.4.0_Alpha_1~526^2~12 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=b1da5588f2c85dea1fc792fa42eb88d95b7c0ce0;p=GitHub%2FWoltLab%2FWCF.git Convert `Form/Builder/Field/Dependency/Container/Tab` to TypeScript --- diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/Tab.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/Tab.js index d9fc31fe65..d4a2898a66 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/Tab.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/Tab.js @@ -2,63 +2,58 @@ * Container visibility handler implementation for a tab menu tab that, in addition to the * tab itself, also handles the visibility of the tab menu list item. * - * @author Matthias Schmidt - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/Tab - * @see module:WoltLabSuite/Core/Form/Builder/Field/Dependency/Abstract - * @since 5.2 + * @author Matthias Schmidt + * @copyright 2001-2020 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/Tab + * @see module:WoltLabSuite/Core/Form/Builder/Field/Dependency/Abstract + * @since 5.2 */ -define(['./Abstract', 'Core', 'Dom/Util', '../Manager', 'Ui/TabMenu'], function (Abstract, Core, DomUtil, DependencyManager, UiTabMenu) { +define(["require", "exports", "tslib", "./Abstract", "../Manager", "../../../../../Dom/Util", "../../../../../Ui/TabMenu", "../../../../../Core"], function (require, exports, tslib_1, Abstract_1, Manager_1, DomUtil, UiTabMenu, Core) { "use strict"; - /** - * @constructor - */ - function Tab(containerId) { - this.init(containerId); - } - ; - Core.inherit(Tab, Abstract, { - /** - * @see WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/Default#checkContainer - */ - checkContainer: function () { + Abstract_1 = tslib_1.__importDefault(Abstract_1); + Manager_1 = tslib_1.__importDefault(Manager_1); + DomUtil = tslib_1.__importStar(DomUtil); + UiTabMenu = tslib_1.__importStar(UiTabMenu); + Core = tslib_1.__importStar(Core); + class Tab extends Abstract_1.default { + checkContainer() { // only consider containers that have not been hidden by their own dependencies - if (DependencyManager.isHiddenByDependencies(this._container)) { + if (Manager_1.default.isHiddenByDependencies(this._container)) { return; } - var containerIsVisible = !elIsHidden(this._container); - var containerShouldBeVisible = false; - var children = this._container.children; - for (var i = 0, length = children.length; i < length; i++) { - if (!elIsHidden(children.item(i))) { - containerShouldBeVisible = true; - break; - } - } + const containerIsVisible = this._container.style.display !== "none"; + const containerShouldBeVisible = Array.from(this._container.children).some((child) => { + return child.style.display !== "none"; + }); if (containerIsVisible !== containerShouldBeVisible) { - var tabMenuListItem = elBySel('#' + DomUtil.identify(this._container.parentNode) + ' > nav > ul > li[data-name=' + this._container.id + ']', this._container.parentNode.parentNode); + const tabMenuListItem = this._container.parentNode.parentNode.querySelector("#" + + DomUtil.identify(this._container.parentNode) + + " > nav > ul > li[data-name=" + + this._container.id + + "]"); if (tabMenuListItem === null) { throw new Error("Cannot find tab menu entry for tab '" + this._container.id + "'."); } if (containerShouldBeVisible) { - elShow(this._container); - elShow(tabMenuListItem); + this._container.style.display = "block"; + tabMenuListItem.style.display = "block"; } else { - elHide(this._container); - elHide(tabMenuListItem); - var tabMenu = UiTabMenu.getTabMenu(DomUtil.identify(tabMenuListItem.closest('.tabMenuContainer'))); + this._container.style.display = "none"; + tabMenuListItem.style.display = "none"; + const tabMenu = UiTabMenu.getTabMenu(DomUtil.identify(tabMenuListItem.closest(".tabMenuContainer"))); // check if currently active tab will be hidden if (tabMenu.getActiveTab() === tabMenuListItem) { tabMenu.selectFirstVisible(); } } - // check containers again to make sure parent containers can react to - // changing the visibility of this container - DependencyManager.checkContainers(); + // Check containers again to make sure parent containers can react to changing the visibility + // of this container. + Manager_1.default.checkContainers(); } } - }); + } + Core.enableLegacyInheritance(Tab); return Tab; }); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/Tab.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/Tab.js deleted file mode 100644 index 9d95a35e2c..0000000000 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/Tab.js +++ /dev/null @@ -1,72 +0,0 @@ -/** - * Container visibility handler implementation for a tab menu tab that, in addition to the - * tab itself, also handles the visibility of the tab menu list item. - * - * @author Matthias Schmidt - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/Tab - * @see module:WoltLabSuite/Core/Form/Builder/Field/Dependency/Abstract - * @since 5.2 - */ -define(['./Abstract', 'Core', 'Dom/Util', '../Manager', 'Ui/TabMenu'], function(Abstract, Core, DomUtil, DependencyManager, UiTabMenu) { - "use strict"; - - /** - * @constructor - */ - function Tab(containerId) { - this.init(containerId); - }; - Core.inherit(Tab, Abstract, { - /** - * @see WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/Default#checkContainer - */ - checkContainer: function() { - // only consider containers that have not been hidden by their own dependencies - if (DependencyManager.isHiddenByDependencies(this._container)) { - return; - } - - var containerIsVisible = !elIsHidden(this._container); - var containerShouldBeVisible = false; - - var children = this._container.children; - for (var i = 0, length = children.length; i < length; i++) { - if (!elIsHidden(children.item(i))) { - containerShouldBeVisible = true; - break; - } - } - - if (containerIsVisible !== containerShouldBeVisible) { - var tabMenuListItem = elBySel('#' + DomUtil.identify(this._container.parentNode) + ' > nav > ul > li[data-name=' + this._container.id + ']', this._container.parentNode.parentNode); - if (tabMenuListItem === null) { - throw new Error("Cannot find tab menu entry for tab '" + this._container.id + "'."); - } - - if (containerShouldBeVisible) { - elShow(this._container); - elShow(tabMenuListItem); - } - else { - elHide(this._container); - elHide(tabMenuListItem); - - var tabMenu = UiTabMenu.getTabMenu(DomUtil.identify(tabMenuListItem.closest('.tabMenuContainer'))); - - // check if currently active tab will be hidden - if (tabMenu.getActiveTab() === tabMenuListItem) { - tabMenu.selectFirstVisible(); - } - } - - // check containers again to make sure parent containers can react to - // changing the visibility of this container - DependencyManager.checkContainers(); - } - } - }); - - return Tab; -}); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/Tab.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/Tab.ts new file mode 100644 index 0000000000..85e067a264 --- /dev/null +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/Tab.ts @@ -0,0 +1,69 @@ +/** + * Container visibility handler implementation for a tab menu tab that, in addition to the + * tab itself, also handles the visibility of the tab menu list item. + * + * @author Matthias Schmidt + * @copyright 2001-2020 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/Tab + * @see module:WoltLabSuite/Core/Form/Builder/Field/Dependency/Abstract + * @since 5.2 + */ + +import Abstract from "./Abstract"; +import DependencyManager from "../Manager"; +import * as DomUtil from "../../../../../Dom/Util"; +import * as UiTabMenu from "../../../../../Ui/TabMenu"; +import * as Core from "../../../../../Core"; + +class Tab extends Abstract { + public checkContainer(): void { + // only consider containers that have not been hidden by their own dependencies + if (DependencyManager.isHiddenByDependencies(this._container)) { + return; + } + + const containerIsVisible = this._container.style.display !== "none"; + const containerShouldBeVisible = Array.from(this._container.children).some((child: HTMLElement) => { + return child.style.display !== "none"; + }); + + if (containerIsVisible !== containerShouldBeVisible) { + const tabMenuListItem = this._container.parentNode!.parentNode!.querySelector( + "#" + + DomUtil.identify(this._container.parentNode! as HTMLElement) + + " > nav > ul > li[data-name=" + + this._container.id + + "]", + )! as HTMLElement; + if (tabMenuListItem === null) { + throw new Error("Cannot find tab menu entry for tab '" + this._container.id + "'."); + } + + if (containerShouldBeVisible) { + this._container.style.display = "block"; + tabMenuListItem.style.display = "block"; + } else { + this._container.style.display = "none"; + tabMenuListItem.style.display = "none"; + + const tabMenu = UiTabMenu.getTabMenu( + DomUtil.identify(tabMenuListItem.closest(".tabMenuContainer") as HTMLElement), + )!; + + // check if currently active tab will be hidden + if (tabMenu.getActiveTab() === tabMenuListItem) { + tabMenu.selectFirstVisible(); + } + } + + // Check containers again to make sure parent containers can react to changing the visibility + // of this container. + DependencyManager.checkContainers(); + } + } +} + +Core.enableLegacyInheritance(Tab); + +export = Tab;