Convert `Acp/Ui/Article/Add` to TypeScript

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Article/Add.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Article/Add.js
index acf9b28fc86e91f5c880ee7f7eb1c8d9378d4b42..1d5492bcc46eb0e462b7ebb69d52112a0456f176 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Article/Add.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Article/Add.js
@@ -1,55 +1,62 @@
 /**
  * Provides the dialog overlay to add a new article.
  *
- * @author     Alexander Ebert
- * @copyright  2001-2019 WoltLab GmbH
- * @license    GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
- * @module     WoltLabSuite/Core/Acp/Ui/Article/Add
+ * @author  Alexander Ebert
+ * @copyright  2001-2019 WoltLab GmbH
+ * @license  GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module  WoltLabSuite/Core/Acp/Ui/Article/Add
  */
-define(['Core', 'Language', 'Ui/Dialog'], function (Core, Language, UiDialog) {
+define(["require", "exports", "tslib", "../../../Language", "../../../Ui/Dialog"], function (require, exports, tslib_1, Language, Dialog_1) {
     "use strict";
-    var _link;
-    /**
-     * @exports     WoltLabSuite/Core/Acp/Ui/Article/Add
-     */
-    return {
-        /**
-         * Initializes the article add handler.
-         *
-         * @param       {string}        link    redirect URL
-         */
-        init: function (link) {
-            _link = link;
-            var buttons = elBySelAll('.jsButtonArticleAdd');
-            for (var i = 0, length = buttons.length; i < length; i++) {
-                buttons[i].addEventListener('click', this.openDialog.bind(this));
-            }
-        },
-        /**
-         * Opens the 'Add Article' dialog.
-         *
-         * @param       {Event=}        event   event object
-         */
-        openDialog: function (event) {
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.openDialog = exports.init = void 0;
+    Language = tslib_1.__importStar(Language);
+    Dialog_1 = tslib_1.__importDefault(Dialog_1);
+    class ArticleAdd {
+        constructor(link) {
+            this.link = link;
+            document.querySelectorAll(".jsButtonArticleAdd").forEach((button) => {
+                button.addEventListener("click", (ev) => this.openDialog(ev));
+            });
+        }
+        openDialog(event) {
             if (event instanceof Event) {
                 event.preventDefault();
             }
-            UiDialog.open(this);
-        },
-        _dialogSetup: function () {
+            Dialog_1.default.open(this);
+        }
+        _dialogSetup() {
             return {
-                id: 'articleAddDialog',
+                id: "articleAddDialog",
                 options: {
-                    onSetup: function (content) {
-                        elBySel('button', content).addEventListener('click', function (event) {
+                    onSetup: (content) => {
+                        const button = content.querySelector("button");
+                        button.addEventListener("click", (event) => {
                             event.preventDefault();
-                            var isMultilingual = elBySel('input[name="isMultilingual"]:checked', content).value;
-                            window.location = _link.replace(/{\$isMultilingual}/, isMultilingual);
+                            const input = content.querySelector('input[name="isMultilingual"]:checked');
+                            window.location.href = this.link.replace("{$isMultilingual}", input.value);
                         });
                     },
-                    title: Language.get('wcf.acp.article.add')
-                }
+                    title: Language.get("wcf.acp.article.add"),
+                },
             };
         }
-    };
+    }
+    let articleAdd;
+    /**
+     * Initializes the article add handler.
+     */
+    function init(link) {
+        if (!articleAdd) {
+            articleAdd = new ArticleAdd(link);
+        }
+    }
+    exports.init = init;
+    /**
+     * Opens the 'Add Article' dialog.
+     */
+    function openDialog() {
+        articleAdd.openDialog();
+    }
+    exports.openDialog = openDialog;
 });

diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Article/Add.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Article/Add.js
deleted file mode 100644 (file)
index 667655b..0000000
--- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Article/Add.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * Provides the dialog overlay to add a new article.
- * 
- * @author     Alexander Ebert
- * @copyright  2001-2019 WoltLab GmbH
- * @license    GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
- * @module     WoltLabSuite/Core/Acp/Ui/Article/Add
- */
-define(['Core', 'Language', 'Ui/Dialog'], function(Core, Language, UiDialog) {
-       "use strict";
-       
-       var _link;
-       
-       /**
-        * @exports     WoltLabSuite/Core/Acp/Ui/Article/Add
-        */
-       return {
-               /**
-                * Initializes the article add handler.
-                * 
-                * @param       {string}        link    redirect URL
-                */
-               init: function(link) {
-                       _link = link;
-                       
-                       var buttons = elBySelAll('.jsButtonArticleAdd');
-                       for (var i = 0, length = buttons.length; i < length; i++) {
-                               buttons[i].addEventListener('click', this.openDialog.bind(this));
-                       }
-               },
-               
-               /**
-                * Opens the 'Add Article' dialog.
-                * 
-                * @param       {Event=}        event   event object
-                */
-               openDialog: function(event) {
-                       if (event instanceof Event) {
-                               event.preventDefault();
-                       }
-                       
-                       UiDialog.open(this);
-               },
-               
-               _dialogSetup: function() {
-                       return {
-                               id: 'articleAddDialog',
-                               options: {
-                                       onSetup: function(content) {
-                                               elBySel('button', content).addEventListener('click', function(event) {
-                                                       event.preventDefault();
-                                                       
-                                                       var isMultilingual = elBySel('input[name="isMultilingual"]:checked', content).value;
-                                                       
-                                                       window.location = _link.replace(/{\$isMultilingual}/, isMultilingual);
-                                               });
-                                       },
-                                       title: Language.get('wcf.acp.article.add')
-                               }
-                       };
-               }
-       };
-});

diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Article/Add.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Article/Add.ts
new file mode 100644 (file)
index 0000000..21cd03b
--- /dev/null
+++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Article/Add.ts
@@ -0,0 +1,65 @@
+/**
+ * Provides the dialog overlay to add a new article.
+ *
+ * @author  Alexander Ebert
+ * @copyright  2001-2019 WoltLab GmbH
+ * @license  GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module  WoltLabSuite/Core/Acp/Ui/Article/Add
+ */
+
+import * as Language from "../../../Language";
+import UiDialog from "../../../Ui/Dialog";
+import { DialogCallbackObject, DialogCallbackSetup } from "../../../Ui/Dialog/Data";
+
+class ArticleAdd implements DialogCallbackObject {
+  constructor(private readonly link: string) {
+    document.querySelectorAll(".jsButtonArticleAdd").forEach((button: HTMLElement) => {
+      button.addEventListener("click", (ev) => this.openDialog(ev));
+    });
+  }
+
+  openDialog(event?: MouseEvent): void {
+    if (event instanceof Event) {
+      event.preventDefault();
+    }
+
+    UiDialog.open(this);
+  }
+
+  _dialogSetup(): ReturnType<DialogCallbackSetup> {
+    return {
+      id: "articleAddDialog",
+      options: {
+        onSetup: (content) => {
+          const button = content.querySelector("button") as HTMLElement;
+          button.addEventListener("click", (event) => {
+            event.preventDefault();
+
+            const input = content.querySelector('input[name="isMultilingual"]:checked') as HTMLInputElement;
+
+            window.location.href = this.link.replace("{$isMultilingual}", input.value);
+          });
+        },
+        title: Language.get("wcf.acp.article.add"),
+      },
+    };
+  }
+}
+
+let articleAdd: ArticleAdd;
+
+/**
+ * Initializes the article add handler.
+ */
+export function init(link: string): void {
+  if (!articleAdd) {
+    articleAdd = new ArticleAdd(link);
+  }
+}
+
+/**
+ * Opens the 'Add Article' dialog.
+ */
+export function openDialog(): void {
+  articleAdd.openDialog();
+}