Convert `Form/Builder/Container/SuffixFormField` to TypeScript
authorMatthias Schmidt <gravatronics@live.com>
Sat, 12 Dec 2020 15:02:49 +0000 (16:02 +0100)
committerMatthias Schmidt <gravatronics@live.com>
Tue, 15 Dec 2020 17:23:05 +0000 (18:23 +0100)
wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Container/SuffixFormField.js
wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Container/SuffixFormField.js [deleted file]
wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Container/SuffixFormField.ts [new file with mode: 0644]

index cef2cd8b352529fb6a6d925974b52dcee102688d..c008b02edaeaf6d4058a8cbe730b03ab6b05a061 100644 (file)
@@ -1,61 +1,57 @@
 /**
  * Handles the dropdowns of form fields with a suffix.
  *
- * @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/Container/SuffixFormField
- * @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/Container/SuffixFormField
+ * @since 5.2
  */
-define(['EventHandler', 'Ui/SimpleDropdown'], function (EventHandler, UiSimpleDropdown) {
+define(["require", "exports", "tslib", "../../../Ui/Dropdown/Simple", "../../../Event/Handler", "../../../Core"], function (require, exports, tslib_1, Simple_1, EventHandler, Core) {
     "use strict";
-    /**
-     * @constructor
-     */
-    function PrefixSuffixFormFieldContainer(formId, suffixFieldId) {
-        this._formId = formId;
-        this._suffixField = elById(suffixFieldId);
-        this._suffixDropdownMenu = UiSimpleDropdown.getDropdownMenu(suffixFieldId + '_dropdown');
-        this._suffixDropdownToggle = elByClass('dropdownToggle', UiSimpleDropdown.getDropdown(suffixFieldId + '_dropdown'))[0];
-        var listItems = this._suffixDropdownMenu.children;
-        for (var i = 0, length = listItems.length; i < length; i++) {
-            listItems[i].addEventListener('click', this._changeSuffixSelection.bind(this));
+    Simple_1 = tslib_1.__importDefault(Simple_1);
+    EventHandler = tslib_1.__importStar(EventHandler);
+    Core = tslib_1.__importStar(Core);
+    class SuffixFormField {
+        constructor(formId, suffixFieldId) {
+            this._formId = formId;
+            this._suffixField = document.getElementById(suffixFieldId);
+            this._suffixDropdownMenu = Simple_1.default.getDropdownMenu(suffixFieldId + "_dropdown");
+            this._suffixDropdownToggle = Simple_1.default.getDropdown(suffixFieldId + "_dropdown").getElementsByClassName("dropdownToggle")[0];
+            Array.from(this._suffixDropdownMenu.children).forEach((listItem) => {
+                listItem.addEventListener("click", (ev) => this._changeSuffixSelection(ev));
+            });
+            EventHandler.add("WoltLabSuite/Core/Form/Builder/Manager", "afterUnregisterForm", (data) => this._destroyDropdown(data));
         }
-        EventHandler.add('WoltLabSuite/Core/Form/Builder/Manager', 'afterUnregisterForm', this._destroyDropdown.bind(this));
-    }
-    ;
-    PrefixSuffixFormFieldContainer.prototype = {
         /**
          * Handles changing the suffix selection.
-         *
-         * @param      {Event}         event
          */
-        _changeSuffixSelection: function (event) {
-            if (event.currentTarget.classList.contains('disabled')) {
+        _changeSuffixSelection(event) {
+            const target = event.currentTarget;
+            if (target.classList.contains("disabled")) {
                 return;
             }
-            var listItems = this._suffixDropdownMenu.children;
-            for (var i = 0, length = listItems.length; i < length; i++) {
-                if (listItems[i] === event.currentTarget) {
-                    listItems[i].classList.add('active');
+            Array.from(this._suffixDropdownMenu.children).forEach((listItem) => {
+                if (listItem === target) {
+                    listItem.classList.add("active");
                 }
                 else {
-                    listItems[i].classList.remove('active');
+                    listItem.classList.remove("active");
                 }
-            }
-            this._suffixField.value = elData(event.currentTarget, 'value');
-            this._suffixDropdownToggle.innerHTML = elData(event.currentTarget, 'label') + ' <span class="icon icon16 fa-caret-down pointer"></span>';
-        },
+            });
+            this._suffixField.value = target.dataset.value;
+            this._suffixDropdownToggle.innerHTML =
+                target.dataset.label + ' <span class="icon icon16 fa-caret-down pointer"></span>';
+        }
         /**
-         * Destorys the suffix dropdown if the parent form is unregistered.
-         *
-         * @param      {object}        data    event data
+         * Destroys the suffix dropdown if the parent form is unregistered.
          */
-        _destroyDropdown: function (data) {
+        _destroyDropdown(data) {
             if (data.formId === this._formId) {
-                UiSimpleDropdown.destroy(this._suffixDropdownMenu.id);
+                Simple_1.default.destroy(this._suffixDropdownMenu.id);
             }
         }
-    };
-    return PrefixSuffixFormFieldContainer;
+    }
+    Core.enableLegacyInheritance(SuffixFormField);
+    return SuffixFormField;
 });
diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Container/SuffixFormField.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Container/SuffixFormField.js
deleted file mode 100644 (file)
index f945113..0000000
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * Handles the dropdowns of form fields with a suffix.
- * 
- * @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/Container/SuffixFormField
- * @since      5.2
- */
-define(['EventHandler', 'Ui/SimpleDropdown'], function(EventHandler, UiSimpleDropdown) {
-       "use strict";
-       
-       /**
-        * @constructor
-        */
-       function PrefixSuffixFormFieldContainer(formId, suffixFieldId) {
-               this._formId = formId;
-               
-               this._suffixField = elById(suffixFieldId);
-               this._suffixDropdownMenu = UiSimpleDropdown.getDropdownMenu(suffixFieldId + '_dropdown');
-               this._suffixDropdownToggle = elByClass('dropdownToggle', UiSimpleDropdown.getDropdown(suffixFieldId + '_dropdown'))[0];
-               
-               var listItems = this._suffixDropdownMenu.children;
-               for (var i = 0, length = listItems.length; i < length; i++) {
-                       listItems[i].addEventListener('click', this._changeSuffixSelection.bind(this));
-               }
-               
-               EventHandler.add('WoltLabSuite/Core/Form/Builder/Manager', 'afterUnregisterForm', this._destroyDropdown.bind(this));
-       };
-       PrefixSuffixFormFieldContainer.prototype = {
-               /**
-                * Handles changing the suffix selection.
-                * 
-                * @param       {Event}         event
-                */
-               _changeSuffixSelection: function(event) {
-                       if (event.currentTarget.classList.contains('disabled')) {
-                               return;
-                       }
-                       
-                       var listItems = this._suffixDropdownMenu.children;
-                       for (var i = 0, length = listItems.length; i < length; i++) {
-                               if (listItems[i] === event.currentTarget) {
-                                       listItems[i].classList.add('active');
-                               }
-                               else {
-                                       listItems[i].classList.remove('active');
-                               }
-                       }
-                       
-                       this._suffixField.value = elData(event.currentTarget, 'value');
-                       this._suffixDropdownToggle.innerHTML = elData(event.currentTarget, 'label') + ' <span class="icon icon16 fa-caret-down pointer"></span>';
-               },
-               
-               /**
-                * Destorys the suffix dropdown if the parent form is unregistered.
-                * 
-                * @param       {object}        data    event data
-                */
-               _destroyDropdown: function(data) {
-                       if (data.formId === this._formId) {
-                               UiSimpleDropdown.destroy(this._suffixDropdownMenu.id);
-                       }
-               }
-       };
-       
-       return PrefixSuffixFormFieldContainer;
-});
diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Container/SuffixFormField.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Form/Builder/Container/SuffixFormField.ts
new file mode 100644 (file)
index 0000000..4bb18d9
--- /dev/null
@@ -0,0 +1,76 @@
+/**
+ * Handles the dropdowns of form fields with a suffix.
+ *
+ * @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/Container/SuffixFormField
+ * @since 5.2
+ */
+
+import UiSimpleDropdown from "../../../Ui/Dropdown/Simple";
+import * as EventHandler from "../../../Event/Handler";
+import * as Core from "../../../Core";
+
+type DestroyDropdownData = {
+  formId: string;
+};
+
+class SuffixFormField {
+  protected readonly _formId: string;
+  protected readonly _suffixField: HTMLInputElement;
+  protected readonly _suffixDropdownMenu: HTMLElement;
+  protected readonly _suffixDropdownToggle: HTMLElement;
+
+  constructor(formId: string, suffixFieldId: string) {
+    this._formId = formId;
+
+    this._suffixField = document.getElementById(suffixFieldId)! as HTMLInputElement;
+    this._suffixDropdownMenu = UiSimpleDropdown.getDropdownMenu(suffixFieldId + "_dropdown")!;
+    this._suffixDropdownToggle = UiSimpleDropdown.getDropdown(suffixFieldId + "_dropdown")!.getElementsByClassName(
+      "dropdownToggle",
+    )[0] as HTMLInputElement;
+    Array.from(this._suffixDropdownMenu.children).forEach((listItem: HTMLLIElement) => {
+      listItem.addEventListener("click", (ev) => this._changeSuffixSelection(ev));
+    });
+
+    EventHandler.add("WoltLabSuite/Core/Form/Builder/Manager", "afterUnregisterForm", (data) =>
+      this._destroyDropdown(data),
+    );
+  }
+
+  /**
+   * Handles changing the suffix selection.
+   */
+  protected _changeSuffixSelection(event: MouseEvent): void {
+    const target = event.currentTarget! as HTMLElement;
+    if (target.classList.contains("disabled")) {
+      return;
+    }
+
+    Array.from(this._suffixDropdownMenu.children).forEach((listItem: HTMLLIElement) => {
+      if (listItem === target) {
+        listItem.classList.add("active");
+      } else {
+        listItem.classList.remove("active");
+      }
+    });
+
+    this._suffixField.value = target.dataset.value!;
+    this._suffixDropdownToggle.innerHTML =
+      target.dataset.label! + ' <span class="icon icon16 fa-caret-down pointer"></span>';
+  }
+
+  /**
+   * Destroys the suffix dropdown if the parent form is unregistered.
+   */
+  protected _destroyDropdown(data: DestroyDropdownData): void {
+    if (data.formId === this._formId) {
+      UiSimpleDropdown.destroy(this._suffixDropdownMenu.id);
+    }
+  }
+}
+
+Core.enableLegacyInheritance(SuffixFormField);
+
+export = SuffixFormField;