Convert `Acp/Ui/Box/Controller/Handler` to TypeScript

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Box/Controller/Handler.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Box/Controller/Handler.js
index 9d5d5a20261cab2252ec417ae52a6d564e531d90..055d9ac1943d9f16635e23152904606deae4f0da 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Box/Controller/Handler.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Box/Controller/Handler.js
@@ -1,60 +1,63 @@
 /**
  * Provides the interface logic to add and edit boxes.
  *
- * @author     Matthias Schmidt
- * @copyright  2001-2019 WoltLab GmbH
- * @license    GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
- * @module     WoltLabSuite/Core/Acp/Ui/Box/Controller/Handler
+ * @author  Matthias Schmidt
+ * @copyright  2001-2019 WoltLab GmbH
+ * @license  GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module  WoltLabSuite/Core/Acp/Ui/Box/Controller/Handler
  */
-define(['Ajax', 'Dom/Util', 'EventHandler'], function (Ajax, DomUtil, EventHandler) {
+define(["require", "exports", "tslib", "../../../../Ajax", "../../../../Dom/Util", "../../../../Event/Handler"], function (require, exports, tslib_1, Ajax, Util_1, EventHandler) {
     "use strict";
-    var _boxControllerContainer = elById('boxControllerContainer');
-    var _boxController = elById('boxControllerID');
-    var _boxConditions = elById('boxConditions');
-    /**
-     * @exports        WoltLabSuite/Core/Acp/Ui/Box/Controller/Handler
-     */
-    return {
-        init: function (initialObjectTypeId) {
-            _boxController.addEventListener('change', this._updateConditions.bind(this));
-            elShow(_boxControllerContainer);
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.init = void 0;
+    Ajax = tslib_1.__importStar(Ajax);
+    Util_1 = tslib_1.__importDefault(Util_1);
+    EventHandler = tslib_1.__importStar(EventHandler);
+    class AcpUiBoxControllerHandler {
+        constructor(initialObjectTypeId) {
+            this.boxControllerContainer = document.getElementById("boxControllerContainer");
+            this.boxController = document.getElementById("boxControllerID");
+            this.boxConditions = document.getElementById("boxConditions");
+            this.boxController.addEventListener("change", () => this.updateConditions());
+            Util_1.default.show(this.boxControllerContainer);
             if (initialObjectTypeId === undefined) {
-                this._updateConditions();
+                this.updateConditions();
             }
-        },
+        }
         /**
          * Sets up ajax request object.
-         *
-         * @return     {object}        request options
          */
-        _ajaxSetup: function () {
+        _ajaxSetup() {
             return {
                 data: {
-                    actionName: 'getBoxConditionsTemplate',
-                    className: 'wcf\\data\\box\\BoxAction'
-                }
+                    actionName: "getBoxConditionsTemplate",
+                    className: "wcf\\data\\box\\BoxAction",
+                },
             };
-        },
+        }
         /**
          * Handles successful AJAX requests.
-         *
-         * @param      {object}        data    response data
          */
-        _ajaxSuccess: function (data) {
-            DomUtil.setInnerHtml(_boxConditions, data.returnValues.template);
-        },
+        _ajaxSuccess(data) {
+            Util_1.default.setInnerHtml(this.boxConditions, data.returnValues.template);
+        }
         /**
          * Updates the displayed box conditions based on the selected dynamic box controller.
-         *
-         * @protected
          */
-        _updateConditions: function () {
-            EventHandler.fire('com.woltlab.wcf.boxControllerHandler', 'updateConditions');
+        updateConditions() {
+            EventHandler.fire("com.woltlab.wcf.boxControllerHandler", "updateConditions");
             Ajax.api(this, {
                 parameters: {
-                    objectTypeID: ~~_boxController.value
-                }
+                    objectTypeID: ~~this.boxController.value,
+                },
             });
         }
-    };
+    }
+    let acpUiBoxControllerHandler;
+    function init(initialObjectTypeId) {
+        if (!acpUiBoxControllerHandler) {
+            acpUiBoxControllerHandler = new AcpUiBoxControllerHandler(initialObjectTypeId);
+        }
+    }
+    exports.init = init;
 });

diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Box/Controller/Handler.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Box/Controller/Handler.js
deleted file mode 100644 (file)
index ba975e4..0000000
--- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Box/Controller/Handler.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * Provides the interface logic to add and edit boxes.
- * 
- * @author     Matthias Schmidt
- * @copyright  2001-2019 WoltLab GmbH
- * @license    GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
- * @module     WoltLabSuite/Core/Acp/Ui/Box/Controller/Handler
- */
-define(['Ajax', 'Dom/Util', 'EventHandler'], function(Ajax, DomUtil, EventHandler) {
-       "use strict";
-       
-       var _boxControllerContainer = elById('boxControllerContainer');
-       var _boxController = elById('boxControllerID');
-       var _boxConditions = elById('boxConditions');
-       
-       /**
-        * @exports     WoltLabSuite/Core/Acp/Ui/Box/Controller/Handler
-        */
-       return {
-               init: function(initialObjectTypeId) {
-                       _boxController.addEventListener('change', this._updateConditions.bind(this));
-                       
-                       elShow(_boxControllerContainer);
-                       
-                       if (initialObjectTypeId === undefined) {
-                               this._updateConditions();
-                       }
-               },
-               
-               /**
-                * Sets up ajax request object.
-                *
-                * @return      {object}        request options
-                */
-               _ajaxSetup: function() {
-                       return {
-                               data: {
-                                       actionName: 'getBoxConditionsTemplate',
-                                       className: 'wcf\\data\\box\\BoxAction'
-                               }
-                       };
-               },
-               
-               /**
-                * Handles successful AJAX requests.
-                *
-                * @param       {object}        data    response data
-                */
-               _ajaxSuccess: function(data) {
-                       DomUtil.setInnerHtml(_boxConditions, data.returnValues.template);
-               },
-               
-               /**
-                * Updates the displayed box conditions based on the selected dynamic box controller.
-                * 
-                * @protected
-                */
-               _updateConditions: function() {
-                       EventHandler.fire('com.woltlab.wcf.boxControllerHandler', 'updateConditions');
-                       
-                       Ajax.api(this, {
-                               parameters: {
-                                       objectTypeID: ~~_boxController.value
-                               }
-                       });
-               }
-       };
-});

diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Box/Controller/Handler.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Box/Controller/Handler.ts
new file mode 100644 (file)
index 0000000..7aa68ec
--- /dev/null
+++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Box/Controller/Handler.ts
@@ -0,0 +1,79 @@
+/**
+ * Provides the interface logic to add and edit boxes.
+ *
+ * @author  Matthias Schmidt
+ * @copyright  2001-2019 WoltLab GmbH
+ * @license  GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module  WoltLabSuite/Core/Acp/Ui/Box/Controller/Handler
+ */
+
+import * as Ajax from "../../../../Ajax";
+import DomUtil from "../../../../Dom/Util";
+import * as EventHandler from "../../../../Event/Handler";
+import { AjaxCallbackObject, AjaxCallbackSetup } from "../../../../Ajax/Data";
+
+interface AjaxResponse {
+  returnValues: {
+    template: string;
+  };
+}
+
+class AcpUiBoxControllerHandler implements AjaxCallbackObject {
+  private readonly boxConditions: HTMLElement;
+  private readonly boxController: HTMLInputElement;
+  private readonly boxControllerContainer: HTMLElement;
+
+  constructor(initialObjectTypeId: number | undefined) {
+    this.boxControllerContainer = document.getElementById("boxControllerContainer")!;
+    this.boxController = document.getElementById("boxControllerID") as HTMLInputElement;
+    this.boxConditions = document.getElementById("boxConditions")!;
+
+    this.boxController.addEventListener("change", () => this.updateConditions());
+
+    DomUtil.show(this.boxControllerContainer);
+
+    if (initialObjectTypeId === undefined) {
+      this.updateConditions();
+    }
+  }
+
+  /**
+   * Sets up ajax request object.
+   */
+  _ajaxSetup(): ReturnType<AjaxCallbackSetup> {
+    return {
+      data: {
+        actionName: "getBoxConditionsTemplate",
+        className: "wcf\\data\\box\\BoxAction",
+      },
+    };
+  }
+
+  /**
+   * Handles successful AJAX requests.
+   */
+  _ajaxSuccess(data: AjaxResponse): void {
+    DomUtil.setInnerHtml(this.boxConditions, data.returnValues.template);
+  }
+
+  /**
+   * Updates the displayed box conditions based on the selected dynamic box controller.
+   */
+  private updateConditions(): void {
+    EventHandler.fire("com.woltlab.wcf.boxControllerHandler", "updateConditions");
+
+    Ajax.api(this, {
+      parameters: {
+        objectTypeID: ~~this.boxController.value,
+      },
+    });
+  }
+}
+
+let acpUiBoxControllerHandler: AcpUiBoxControllerHandler;
+
+export function init(initialObjectTypeId: number | undefined): void {
+  if (!acpUiBoxControllerHandler) {
+    acpUiBoxControllerHandler = new AcpUiBoxControllerHandler(initialObjectTypeId);
+  }
+}