Convert `Ui/Redactor/Table` to TypeScript

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Table.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Table.js
index 2042d2fce0442a0604c38be9850a854c398a1526..1dddf700fb2628f4d66276a89ef101a1fb584ffe 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Table.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Table.js
@@ -1,56 +1,69 @@
-define(['Language', 'Ui/Dialog'], function (Language, UiDialog) {
+define(["require", "exports", "tslib", "../../Language", "../Dialog"], function (require, exports, tslib_1, Language, Dialog_1) {
     "use strict";
-    if (!COMPILER_TARGET_DEFAULT) {
-        var Fake = function () { };
-        Fake.prototype = {
-            showDialog: function () { },
-            _submit: function () { },
-            _dialogSetup: function () { }
-        };
-        return Fake;
-    }
-    var _callback = null;
-    return {
-        showDialog: function (options) {
-            UiDialog.open(this);
-            _callback = options.submitCallback;
-        },
-        _dialogSubmit: function () {
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.showDialog = void 0;
+    Language = tslib_1.__importStar(Language);
+    Dialog_1 = tslib_1.__importDefault(Dialog_1);
+    class UiRedactorTable {
+        open(options) {
+            Dialog_1.default.open(this);
+            this.callbackSubmit = options.submitCallback;
+        }
+        _dialogSubmit() {
             // check if rows and cols are within the boundaries
-            var isValid = true;
-            ['rows', 'cols'].forEach(function (type) {
-                var input = elById('redactor-table-' + type);
-                if (input.value < 1 || input.value > 100) {
+            let isValid = true;
+            ["rows", "cols"].forEach((type) => {
+                const input = document.getElementById("redactor-table-" + type);
+                if (+input.value < 1 || +input.value > 100) {
                     isValid = false;
                 }
             });
-            if (!isValid)
+            if (!isValid) {
                 return;
-            _callback();
-            UiDialog.close(this);
-        },
-        _dialogSetup: function () {
+            }
+            this.callbackSubmit();
+            Dialog_1.default.close(this);
+        }
+        _dialogSetup() {
             return {
-                id: 'redactorDialogTable',
+                id: "redactorDialogTable",
                 options: {
-                    onShow: function () {
-                        elById('redactor-table-rows').value = 2;
-                        elById('redactor-table-cols').value = 3;
+                    onShow: () => {
+                        const rows = document.getElementById("redactor-table-rows");
+                        rows.value = "2";
+                        const cols = document.getElementById("redactor-table-cols");
+                        cols.value = "3";
                     },
-                    title: Language.get('wcf.editor.table.insertTable')
+                    title: Language.get("wcf.editor.table.insertTable"),
                 },
-                source: '<dl>'
-                    + '<dt><label for="redactor-table-rows">' + Language.get('wcf.editor.table.rows') + '</label></dt>'
-                    + '<dd><input type="number" id="redactor-table-rows" class="small" min="1" max="100" value="2" data-dialog-submit-on-enter="true"></dd>'
-                    + '</dl>'
-                    + '<dl>'
-                    + '<dt><label for="redactor-table-cols">' + Language.get('wcf.editor.table.cols') + '</label></dt>'
-                    + '<dd><input type="number" id="redactor-table-cols" class="small" min="1" max="100" value="3" data-dialog-submit-on-enter="true"></dd>'
-                    + '</dl>'
-                    + '<div class="formSubmit">'
-                    + '<button id="redactor-modal-button-action" class="buttonPrimary" data-type="submit">' + Language.get('wcf.global.button.insert') + '</button>'
-                    + '</div>'
+                source: `<dl>
+          <dt>
+            <label for="redactor-table-rows">${Language.get("wcf.editor.table.rows")}</label>
+          </dt>
+          <dd>
+            <input type="number" id="redactor-table-rows" class="small" min="1" max="100" value="2" data-dialog-submit-on-enter="true">
+          </dd>
+        </dl>
+        <dl>
+          <dt>
+            <label for="redactor-table-cols">${Language.get("wcf.editor.table.cols")}</label>
+          </dt>
+          <dd>
+            <input type="number" id="redactor-table-cols" class="small" min="1" max="100" value="3" data-dialog-submit-on-enter="true">
+          </dd>
+        </dl>
+        <div class="formSubmit">
+          <button id="redactor-modal-button-action" class="buttonPrimary" data-type="submit">${Language.get("wcf.global.button.insert")}</button>
+        </div>`,
             };
         }
-    };
+    }
+    let uiRedactorTable;
+    function showDialog(options) {
+        if (!uiRedactorTable) {
+            uiRedactorTable = new UiRedactorTable();
+        }
+        uiRedactorTable.open(options);
+    }
+    exports.showDialog = showDialog;
 });

diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Redactor/Table.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Redactor/Table.js
deleted file mode 100644 (file)
index 5da25e6..0000000
--- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Redactor/Table.js
+++ /dev/null
@@ -1,64 +0,0 @@
-define(['Language', 'Ui/Dialog'], function(Language, UiDialog) {
-       "use strict";
-       
-       if (!COMPILER_TARGET_DEFAULT) {
-               var Fake = function() {};
-               Fake.prototype = {
-                       showDialog: function() {},
-                       _submit: function() {},
-                       _dialogSetup: function() {}
-               };
-               return Fake;
-       }
-       
-       var _callback = null;
-       
-       return {
-               showDialog: function(options) {
-                       UiDialog.open(this);
-                       
-                       _callback = options.submitCallback;
-               },
-               
-               _dialogSubmit: function() {
-                       // check if rows and cols are within the boundaries
-                       var isValid = true;
-                       ['rows', 'cols'].forEach(function(type) {
-                               var input = elById('redactor-table-' + type);
-                               if (input.value < 1 || input.value > 100) {
-                                       isValid = false;
-                               }
-                       });
-                       
-                       if (!isValid) return;
-                       
-                       _callback();
-                       
-                       UiDialog.close(this);
-               },
-               
-               _dialogSetup: function() {
-                       return {
-                               id: 'redactorDialogTable',
-                               options: {
-                                       onShow: function () {
-                                               elById('redactor-table-rows').value = 2;
-                                               elById('redactor-table-cols').value = 3;
-                                       },
-                                       title: Language.get('wcf.editor.table.insertTable')
-                               },
-                               source: '<dl>'
-                                               + '<dt><label for="redactor-table-rows">' + Language.get('wcf.editor.table.rows') + '</label></dt>'
-                                               + '<dd><input type="number" id="redactor-table-rows" class="small" min="1" max="100" value="2" data-dialog-submit-on-enter="true"></dd>'
-                                       + '</dl>'
-                                       + '<dl>'
-                                               + '<dt><label for="redactor-table-cols">' + Language.get('wcf.editor.table.cols') + '</label></dt>'
-                                               + '<dd><input type="number" id="redactor-table-cols" class="small" min="1" max="100" value="3" data-dialog-submit-on-enter="true"></dd>'
-                                       + '</dl>'
-                                       + '<div class="formSubmit">'
-                                               + '<button id="redactor-modal-button-action" class="buttonPrimary" data-type="submit">' + Language.get('wcf.global.button.insert') + '</button>'
-                                       + '</div>'
-                       };
-               }
-       };
-});

diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Redactor/Table.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Redactor/Table.ts
new file mode 100644 (file)
index 0000000..5089a83
--- /dev/null
+++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Redactor/Table.ts
@@ -0,0 +1,86 @@
+import * as Language from "../../Language";
+import UiDialog from "../Dialog";
+import { DialogCallbackObject, DialogCallbackSetup } from "../Dialog/Data";
+
+type CallbackSubmit = () => void;
+
+interface TableOptions {
+  submitCallback: CallbackSubmit;
+}
+
+class UiRedactorTable implements DialogCallbackObject {
+  protected callbackSubmit: CallbackSubmit;
+
+  open(options: TableOptions): void {
+    UiDialog.open(this);
+
+    this.callbackSubmit = options.submitCallback;
+  }
+
+  _dialogSubmit(): void {
+    // check if rows and cols are within the boundaries
+    let isValid = true;
+    ["rows", "cols"].forEach((type) => {
+      const input = document.getElementById("redactor-table-" + type) as HTMLInputElement;
+      if (+input.value < 1 || +input.value > 100) {
+        isValid = false;
+      }
+    });
+
+    if (!isValid) {
+      return;
+    }
+
+    this.callbackSubmit();
+
+    UiDialog.close(this);
+  }
+
+  _dialogSetup(): ReturnType<DialogCallbackSetup> {
+    return {
+      id: "redactorDialogTable",
+      options: {
+        onShow: () => {
+          const rows = document.getElementById("redactor-table-rows") as HTMLInputElement;
+          rows.value = "2";
+
+          const cols = document.getElementById("redactor-table-cols") as HTMLInputElement;
+          cols.value = "3";
+        },
+
+        title: Language.get("wcf.editor.table.insertTable"),
+      },
+      source: `<dl>
+          <dt>
+            <label for="redactor-table-rows">${Language.get("wcf.editor.table.rows")}</label>
+          </dt>
+          <dd>
+            <input type="number" id="redactor-table-rows" class="small" min="1" max="100" value="2" data-dialog-submit-on-enter="true">
+          </dd>
+        </dl>
+        <dl>
+          <dt>
+            <label for="redactor-table-cols">${Language.get("wcf.editor.table.cols")}</label>
+          </dt>
+          <dd>
+            <input type="number" id="redactor-table-cols" class="small" min="1" max="100" value="3" data-dialog-submit-on-enter="true">
+          </dd>
+        </dl>
+        <div class="formSubmit">
+          <button id="redactor-modal-button-action" class="buttonPrimary" data-type="submit">${Language.get(
+            "wcf.global.button.insert",
+          )}</button>
+        </div>`,
+    };
+  }
+}
+
+let uiRedactorTable: UiRedactorTable;
+
+export function showDialog(options: TableOptions): void {
+  if (!uiRedactorTable) {
+    uiRedactorTable = new UiRedactorTable();
+  }
+
+  uiRedactorTable.open(options);
+}