From: Alexander Ebert <ebert@woltlab.com>
Date: Thu, 5 Nov 2020 10:10:25 +0000 (+0100)
Subject: Convert `Ui/Redactor/Table` to TypeScript
X-Git-Tag: 5.4.0_Alpha_1~636^2~4
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=7e758e9ef25c6206d4e989a68a03faf0a2bf7e79;p=GitHub%2FWoltLab%2FWCF.git

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 2042d2fce0..1dddf700fb 100644
--- 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
index 5da25e6a3d..0000000000
--- 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
index 0000000000..5089a83ab2
--- /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);
+}