Convert `Form/Builder/Field/Dependency/Container/TabMenu` to TypeScript

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 11c799a6dbb2607add48905b9e5d7107c3af6273..b6dafd9c82b1b053fe7b8f806ca486b845c26c82 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
@@ -2,53 +2,45 @@
  * Container visibility handler implementation for a tab menu that checks visibility
  * based on the visibility of its tab menu list items.
  *
- * @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/TabMenu
- * @see        module:WoltLabSuite/Core/Form/Builder/Field/Dependency/Abstract
+ * @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/TabMenu
+ * @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 TabMenu(containerId) {
-        this.init(containerId);
-    }
-    ;
-    Core.inherit(TabMenu, 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 TabMenu 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 tabMenuListItems = elBySelAll('#' + DomUtil.identify(this._container) + ' > nav > ul > li', this._container.parentNode);
-            for (var i = 0, length = tabMenuListItems.length; i < length; i++) {
-                if (!elIsHidden(tabMenuListItems[i])) {
-                    containerShouldBeVisible = true;
-                    break;
-                }
-            }
+            const containerIsVisible = this._container.style.display !== "none";
+            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";
+            });
             if (containerIsVisible !== containerShouldBeVisible) {
                 if (containerShouldBeVisible) {
-                    elShow(this._container);
+                    this._container.style.display = "block";
                     UiTabMenu.getTabMenu(DomUtil.identify(this._container)).selectFirstVisible();
                 }
                 else {
-                    elHide(this._container);
+                    this._container.style.display = "none";
                 }
                 // check containers again to make sure parent containers can react to
                 // changing the visibility of this container
-                DependencyManager.checkContainers();
+                Manager_1.default.checkContainers();
             }
         }
-    });
+    }
+    Core.enableLegacyInheritance(TabMenu);
     return TabMenu;
 });

diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/TabMenu.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/TabMenu.js
deleted file mode 100644 (file)
index 1602b8f..0000000
--- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/TabMenu.js
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- * Container visibility handler implementation for a tab menu that checks visibility
- * based on the visibility of its tab menu list items.
- * 
- * @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/TabMenu
- * @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 TabMenu(containerId) {
-               this.init(containerId);
-       };
-       Core.inherit(TabMenu, 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 tabMenuListItems = elBySelAll('#' + DomUtil.identify(this._container) + ' > nav > ul > li', this._container.parentNode);
-                       for (var i = 0, length = tabMenuListItems.length; i < length; i++) {
-                               if (!elIsHidden(tabMenuListItems[i])) {
-                                       containerShouldBeVisible = true;
-                                       break;
-                               }
-                       }
-                       
-                       if (containerIsVisible !== containerShouldBeVisible) {
-                               if (containerShouldBeVisible) {
-                                       elShow(this._container);
-                                       
-                                       UiTabMenu.getTabMenu(DomUtil.identify(this._container)).selectFirstVisible();
-                               }
-                               else {
-                                       elHide(this._container);
-                               }
-                               
-                               // check containers again to make sure parent containers can react to
-                               // changing the visibility of this container
-                               DependencyManager.checkContainers();
-                       }
-               }
-       });
-       
-       return TabMenu;
-});

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
new file mode 100644 (file)
index 0000000..cf13263
--- /dev/null
+++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/TabMenu.ts
@@ -0,0 +1,52 @@
+/**
+ * Container visibility handler implementation for a tab menu that checks visibility
+ * based on the visibility of its tab menu list items.
+ *
+ * @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/TabMenu
+ * @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 TabMenu 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 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";
+    });
+
+    if (containerIsVisible !== containerShouldBeVisible) {
+      if (containerShouldBeVisible) {
+        this._container.style.display = "block";
+
+        UiTabMenu.getTabMenu(DomUtil.identify(this._container))!.selectFirstVisible();
+      } else {
+        this._container.style.display = "none";
+      }
+
+      // check containers again to make sure parent containers can react to
+      // changing the visibility of this container
+      DependencyManager.checkContainers();
+    }
+  }
+}
+
+Core.enableLegacyInheritance(TabMenu);
+
+export = TabMenu;