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 d9fc31fe65d57a5b8acb0248cf6b3d016d992351..d4a2898a663fe00602ab8a570890d9d2518f83f2 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
@@ -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 <http://opensource.org/licenses/lgpl-license.php>
- * @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 <http://opensource.org/licenses/lgpl-license.php>
+ * @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 (file)
index 9d95a35..0000000
--- 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 <http://opensource.org/licenses/lgpl-license.php>
- * @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 (file)
index 0000000..85e067a
--- /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 <http://opensource.org/licenses/lgpl-license.php>
+ * @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;