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 567afbdfca40d93e71d3aa8ae7f535829f9edaef..6391bdc5f7354016048320b06831928c173a6bfc 100644 (file)
--- 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 048f5ac311762c8295219f58ccf927d3f0e1a852..49c2adf6a4db9d3f393317f326393c376dc8944d 100644 (file)
--- 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 8b98bd216ee4e72ed02f0c7e12a853bcc4837871..b63e4921799483803381a4f17e2c87ce443cad12 100644 (file)
--- 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 ce506f334fa9b470f9d72ccfe320287286033533..66057c8e29848e35af3759b61877d226115fbd91 100644 (file)
--- 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 befff2e201a2fecffa848c599ec2c4a336080723..91e7188bc535ce6ccf5fd61162c5a9191390fd38 100644 (file)
--- 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 480b9c211a7e7a3205b43f7b05d67e8f8073dda1..a6dd045f53b9d29ed092d5698912c06a0f4cacb4 100644 (file)
--- 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 b28b32e1ee0d2edeed5086d34175bc14fc73c70d..d4d4d0492b21990c2824e26f9115ecb4b858cad9 100644 (file)
--- 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 8c807cc59dd673399b938071d31dc36a709064b8..7effcac1c3a0d924911d88b0e6204d58ff798d3e 100644 (file)
--- 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;
     }