From: Matthias Schmidt Date: Tue, 12 Jan 2021 09:35:40 +0000 (+0100) Subject: Use DomUtil for element visibility in form builder modules X-Git-Tag: 5.4.0_Alpha_1~456 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=009cc5813b34da4bbef6549230be1b3fd3c2464a;p=GitHub%2FWoltLab%2FWCF.git Use DomUtil for element visibility in form builder modules --- diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/Default.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/Default.js index 567afbdfca..6391bdc5f7 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/Default.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/Default.js @@ -9,11 +9,12 @@ * @see module:WoltLabSuite/Core/Form/Builder/Field/Dependency/Abstract * @since 5.2 */ -define(["require", "exports", "tslib", "./Abstract", "../../../../../Core", "../Manager"], function (require, exports, tslib_1, Abstract_1, Core, DependencyManager) { +define(["require", "exports", "tslib", "./Abstract", "../../../../../Core", "../Manager", "../../../../../Dom/Util"], function (require, exports, tslib_1, Abstract_1, Core, DependencyManager, Util_1) { "use strict"; Abstract_1 = tslib_1.__importDefault(Abstract_1); Core = tslib_1.__importStar(Core); DependencyManager = tslib_1.__importStar(DependencyManager); + Util_1 = tslib_1.__importDefault(Util_1); class Default extends Abstract_1.default { checkContainer() { if (Core.stringToBool(this._container.dataset.ignoreDependencies || "")) { @@ -23,20 +24,20 @@ define(["require", "exports", "tslib", "./Abstract", "../../../../../Core", "../ if (DependencyManager.isHiddenByDependencies(this._container)) { return; } - const containerIsVisible = this._container.style.display !== "none"; + const containerIsVisible = !Util_1.default.isHidden(this._container); const containerShouldBeVisible = Array.from(this._container.children).some((child, index) => { // ignore container header for visibility considerations if (index === 0 && (child.tagName === "H2" || child.tagName === "HEADER")) { return false; } - return child.style.display !== "none"; + return !Util_1.default.isHidden(child); }); if (containerIsVisible !== containerShouldBeVisible) { if (containerShouldBeVisible) { - this._container.style.display = "block"; + Util_1.default.show(this._container); } else { - this._container.style.display = "none"; + Util_1.default.hide(this._container); } // check containers again to make sure parent containers can react to // changing the visibility of this container 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 048f5ac311..49c2adf6a4 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 @@ -22,10 +22,8 @@ define(["require", "exports", "tslib", "./Abstract", "../Manager", "../../../../ if (DependencyManager.isHiddenByDependencies(this._container)) { return; } - const containerIsVisible = this._container.style.display !== "none"; - const containerShouldBeVisible = Array.from(this._container.children).some((child) => { - return child.style.display !== "none"; - }); + const containerIsVisible = !DomUtil.isHidden(this._container); + const containerShouldBeVisible = Array.from(this._container.children).some((child) => !DomUtil.isHidden(child)); if (containerIsVisible !== containerShouldBeVisible) { const tabMenuListItem = this._container.parentNode.parentNode.querySelector("#" + DomUtil.identify(this._container.parentNode) + @@ -36,12 +34,12 @@ define(["require", "exports", "tslib", "./Abstract", "../Manager", "../../../../ throw new Error("Cannot find tab menu entry for tab '" + this._container.id + "'."); } if (containerShouldBeVisible) { - this._container.style.display = "block"; - tabMenuListItem.style.display = "block"; + DomUtil.show(this._container); + DomUtil.show(tabMenuListItem); } else { - this._container.style.display = "none"; - tabMenuListItem.style.display = "none"; + DomUtil.hide(this._container); + DomUtil.hide(tabMenuListItem); const tabMenu = UiTabMenu.getTabMenu(DomUtil.identify(tabMenuListItem.closest(".tabMenuContainer"))); // check if currently active tab will be hidden if (tabMenu.getActiveTab() === tabMenuListItem) { diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/TabMenu.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/TabMenu.js index 8b98bd216e..b63e492179 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/TabMenu.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/TabMenu.js @@ -22,18 +22,16 @@ define(["require", "exports", "tslib", "./Abstract", "../Manager", "../../../../ if (DependencyManager.isHiddenByDependencies(this._container)) { return; } - const containerIsVisible = this._container.style.display !== "none"; + const containerIsVisible = !DomUtil.isHidden(this._container); const listItems = this._container.parentNode.querySelectorAll("#" + DomUtil.identify(this._container) + " > nav > ul > li"); - const containerShouldBeVisible = Array.from(listItems).some((child) => { - return child.style.display !== "none"; - }); + const containerShouldBeVisible = Array.from(listItems).some((child) => !DomUtil.isHidden(child)); if (containerIsVisible !== containerShouldBeVisible) { if (containerShouldBeVisible) { - this._container.style.display = "block"; + DomUtil.show(this._container); UiTabMenu.getTabMenu(DomUtil.identify(this._container)).selectFirstVisible(); } else { - this._container.style.display = "none"; + DomUtil.hide(this._container); } // check containers again to make sure parent containers can react to // changing the visibility of this container diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Dependency/Manager.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Dependency/Manager.js index ce506f334f..66057c8e29 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Dependency/Manager.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Dependency/Manager.js @@ -24,7 +24,7 @@ define(["require", "exports", "tslib", "../../../../Dom/Util", "../../../../Even * Hides the given node because of its own dependencies. */ function _hide(node) { - node.style.display = "none"; + Util_1.default.hide(node); _dependencyHiddenNodes.add(node); // also hide tab menu entry if (node.classList.contains("tabMenuContent")) { @@ -33,7 +33,7 @@ define(["require", "exports", "tslib", "../../../../Dom/Util", "../../../../Even .querySelectorAll("li") .forEach((tabLink) => { if (tabLink.dataset.name === node.dataset.name) { - tabLink.style.display = "none"; + Util_1.default.hide(tabLink); } }); } @@ -65,7 +65,7 @@ define(["require", "exports", "tslib", "../../../../Dom/Util", "../../../../Even * Shows the given node because of its own dependencies. */ function _show(node) { - node.style.display = "block"; + Util_1.default.show(node); _dependencyHiddenNodes.delete(node); // also show tab menu entry if (node.classList.contains("tabMenuContent")) { @@ -74,7 +74,7 @@ define(["require", "exports", "tslib", "../../../../Dom/Util", "../../../../Even .querySelectorAll("li") .forEach((tabLink) => { if (tabLink.dataset.name === node.dataset.name) { - tabLink.style.display = "block"; + Util_1.default.show(tabLink); } }); } @@ -82,7 +82,7 @@ define(["require", "exports", "tslib", "../../../../Dom/Util", "../../../../Even // if a container is shown, ignore all fields that // have a hidden parent element within the container let parentNode = validatedField.parentNode; - while (parentNode !== node && parentNode.style.getPropertyValue("display") !== "none") { + while (parentNode !== node && !Util_1.default.isHidden(parentNode)) { parentNode = parentNode.parentNode; } if (parentNode === node && _validatedFieldProperties.has(validatedField)) { diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/Default.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/Default.ts index befff2e201..91e7188bc5 100644 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/Default.ts +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/Default.ts @@ -13,6 +13,7 @@ import Abstract from "./Abstract"; import * as Core from "../../../../../Core"; import * as DependencyManager from "../Manager"; +import DomUtil from "../../../../../Dom/Util"; class Default extends Abstract { public checkContainer(): void { @@ -25,21 +26,21 @@ class Default extends Abstract { return; } - const containerIsVisible = this._container.style.display !== "none"; + const containerIsVisible = !DomUtil.isHidden(this._container); const containerShouldBeVisible = Array.from(this._container.children).some((child: HTMLElement, index) => { // ignore container header for visibility considerations if (index === 0 && (child.tagName === "H2" || child.tagName === "HEADER")) { return false; } - return child.style.display !== "none"; + return !DomUtil.isHidden(child); }); if (containerIsVisible !== containerShouldBeVisible) { if (containerShouldBeVisible) { - this._container.style.display = "block"; + DomUtil.show(this._container); } else { - this._container.style.display = "none"; + DomUtil.hide(this._container); } // check containers again to make sure parent containers can react to 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 index 480b9c211a..a6dd045f53 100644 --- 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 @@ -23,10 +23,10 @@ class Tab extends Abstract { return; } - const containerIsVisible = this._container.style.display !== "none"; - const containerShouldBeVisible = Array.from(this._container.children).some((child: HTMLElement) => { - return child.style.display !== "none"; - }); + const containerIsVisible = !DomUtil.isHidden(this._container); + const containerShouldBeVisible = Array.from(this._container.children).some( + (child: HTMLElement) => !DomUtil.isHidden(child), + ); if (containerIsVisible !== containerShouldBeVisible) { const tabMenuListItem = this._container.parentNode!.parentNode!.querySelector( @@ -41,11 +41,11 @@ class Tab extends Abstract { } if (containerShouldBeVisible) { - this._container.style.display = "block"; - tabMenuListItem.style.display = "block"; + DomUtil.show(this._container); + DomUtil.show(tabMenuListItem); } else { - this._container.style.display = "none"; - tabMenuListItem.style.display = "none"; + DomUtil.hide(this._container); + DomUtil.hide(tabMenuListItem); const tabMenu = UiTabMenu.getTabMenu( DomUtil.identify(tabMenuListItem.closest(".tabMenuContainer") as HTMLElement), diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/TabMenu.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/TabMenu.ts index b28b32e1ee..d4d4d0492b 100644 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/TabMenu.ts +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/TabMenu.ts @@ -23,21 +23,19 @@ class TabMenu extends Abstract { return; } - const containerIsVisible = this._container.style.display !== "none"; + const containerIsVisible = !DomUtil.isHidden(this._container); const listItems = this._container.parentNode!.querySelectorAll( "#" + DomUtil.identify(this._container) + " > nav > ul > li", ); - const containerShouldBeVisible = Array.from(listItems).some((child: HTMLElement) => { - return child.style.display !== "none"; - }); + const containerShouldBeVisible = Array.from(listItems).some((child: HTMLElement) => !DomUtil.isHidden(child)); if (containerIsVisible !== containerShouldBeVisible) { if (containerShouldBeVisible) { - this._container.style.display = "block"; + DomUtil.show(this._container); UiTabMenu.getTabMenu(DomUtil.identify(this._container))!.selectFirstVisible(); } else { - this._container.style.display = "none"; + DomUtil.hide(this._container); } // check containers again to make sure parent containers can react to diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Field/Dependency/Manager.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Field/Dependency/Manager.ts index 8c807cc59d..7effcac1c3 100644 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Field/Dependency/Manager.ts +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Field/Dependency/Manager.ts @@ -29,7 +29,7 @@ type Callback = (...args: any[]) => void; * Hides the given node because of its own dependencies. */ function _hide(node: HTMLElement): void { - node.style.display = "none"; + DomUtil.hide(node); _dependencyHiddenNodes.add(node); // also hide tab menu entry @@ -39,7 +39,7 @@ function _hide(node: HTMLElement): void { .querySelectorAll("li") .forEach((tabLink) => { if (tabLink.dataset.name === node.dataset.name) { - tabLink.style.display = "none"; + DomUtil.hide(tabLink); } }); } @@ -78,7 +78,7 @@ function _hide(node: HTMLElement): void { * Shows the given node because of its own dependencies. */ function _show(node: HTMLElement): void { - node.style.display = "block"; + DomUtil.show(node); _dependencyHiddenNodes.delete(node); // also show tab menu entry @@ -88,7 +88,7 @@ function _show(node: HTMLElement): void { .querySelectorAll("li") .forEach((tabLink) => { if (tabLink.dataset.name === node.dataset.name) { - tabLink.style.display = "block"; + DomUtil.show(tabLink); } }); } @@ -97,7 +97,7 @@ function _show(node: HTMLElement): void { // if a container is shown, ignore all fields that // have a hidden parent element within the container let parentNode = validatedField.parentNode! as HTMLElement; - while (parentNode !== node && parentNode.style.getPropertyValue("display") !== "none") { + while (parentNode !== node && !DomUtil.isHidden(parentNode)) { parentNode = parentNode.parentNode! as HTMLElement; }