Convert `Ui/Redactor/Link` to TypeScript

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Link.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Link.js
index fe9fc94ac77354f536695e6c07aa50b10b1ddcf1..c4c27f004b40e0f5a4569c469194ad5ee7012480 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Link.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Link.js
@@ -1,76 +1,92 @@
-define(['Core', 'EventKey', 'Language', 'Ui/Dialog'], function (Core, EventKey, Language, UiDialog) {
+define(["require", "exports", "tslib", "../../Dom/Util", "../../Language", "../Dialog"], function (require, exports, tslib_1, Util_1, Language, Dialog_1) {
     "use strict";
-    if (!COMPILER_TARGET_DEFAULT) {
-        var Fake = function () { };
-        Fake.prototype = {
-            showDialog: function () { },
-            _submit: function () { },
-            _dialogSetup: function () { }
-        };
-        return Fake;
-    }
-    var _boundListener = false;
-    var _callback = null;
-    return {
-        showDialog: function (options) {
-            UiDialog.open(this);
-            UiDialog.setTitle(this, Language.get('wcf.editor.link.' + (options.insert ? 'add' : 'edit')));
-            var submitButton = elById('redactor-modal-button-action');
-            submitButton.textContent = Language.get('wcf.global.button.' + (options.insert ? 'insert' : 'save'));
-            _callback = options.submitCallback;
-            if (!_boundListener) {
-                _boundListener = true;
-                submitButton.addEventListener('click', this._submit.bind(this));
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.showDialog = void 0;
+    Util_1 = tslib_1.__importDefault(Util_1);
+    Language = tslib_1.__importStar(Language);
+    Dialog_1 = tslib_1.__importDefault(Dialog_1);
+    class UiRedactorLink {
+        constructor() {
+            this.boundListener = false;
+        }
+        open(options) {
+            Dialog_1.default.open(this);
+            Dialog_1.default.setTitle(this, Language.get("wcf.editor.link." + (options.insert ? "add" : "edit")));
+            const submitButton = document.getElementById("redactor-modal-button-action");
+            submitButton.textContent = Language.get("wcf.global.button." + (options.insert ? "insert" : "save"));
+            this.submitCallback = options.submitCallback;
+            // Redactor might modify the button, thus we cannot bind it in the dialog's `onSetup()` callback.
+            if (!this.boundListener) {
+                this.boundListener = true;
+                submitButton.addEventListener("click", this.submit.bind(this));
             }
-        },
-        _submit: function () {
-            if (_callback()) {
-                UiDialog.close(this);
+        }
+        submit() {
+            if (this.submitCallback()) {
+                Dialog_1.default.close(this);
             }
             else {
-                var url = elById('redactor-link-url');
-                elInnerError(url, Language.get((url.value.trim() === '' ? 'wcf.global.form.error.empty' : 'wcf.editor.link.error.invalid')));
+                const url = document.getElementById("redactor-link-url");
+                const errorMessage = url.value.trim() === "" ? "wcf.global.form.error.empty" : "wcf.editor.link.error.invalid";
+                Util_1.default.innerError(url, Language.get(errorMessage));
             }
-        },
-        _dialogSetup: function () {
+        }
+        _dialogSetup() {
             return {
-                id: 'redactorDialogLink',
+                id: "redactorDialogLink",
                 options: {
-                    onClose: function () {
-                        var url = elById('redactor-link-url');
-                        var small = (url.nextElementSibling && url.nextElementSibling.nodeName === 'SMALL') ? url.nextElementSibling : null;
-                        if (small !== null) {
-                            elRemove(small);
+                    onClose: () => {
+                        const url = document.getElementById("redactor-link-url");
+                        const small = url.nextElementSibling;
+                        if (small && small.nodeName === "SMALL") {
+                            small.remove();
                         }
                     },
-                    onSetup: function (content) {
-                        var submitButton = elBySel('.formSubmit > .buttonPrimary', content);
+                    onSetup: (content) => {
+                        const submitButton = content.querySelector(".formSubmit > .buttonPrimary");
                         if (submitButton !== null) {
-                            elBySelAll('input[type="url"], input[type="text"]', content, function (input) {
-                                input.addEventListener('keyup', function (event) {
-                                    if (EventKey.Enter(event)) {
-                                        Core.triggerEvent(submitButton, 'click');
+                            content.querySelectorAll('input[type="url"], input[type="text"]').forEach((input) => {
+                                input.addEventListener("keyup", (event) => {
+                                    if (event.key === "Enter") {
+                                        submitButton.click();
                                     }
                                 });
                             });
                         }
                     },
-                    onShow: function () {
-                        elById('redactor-link-url').focus();
-                    }
+                    onShow: () => {
+                        const url = document.getElementById("redactor-link-url");
+                        url.focus();
+                    },
                 },
-                source: '<dl>'
-                    + '<dt><label for="redactor-link-url">' + Language.get('wcf.editor.link.url') + '</label></dt>'
-                    + '<dd><input type="url" id="redactor-link-url" class="long"></dd>'
-                    + '</dl>'
-                    + '<dl>'
-                    + '<dt><label for="redactor-link-url-text">' + Language.get('wcf.editor.link.text') + '</label></dt>'
-                    + '<dd><input type="text" id="redactor-link-url-text" class="long"></dd>'
-                    + '</dl>'
-                    + '<div class="formSubmit">'
-                    + '<button id="redactor-modal-button-action" class="buttonPrimary"></button>'
-                    + '</div>'
+                source: `<dl>
+          <dt>
+            <label for="redactor-link-url">${Language.get("wcf.editor.link.url")}</label>
+          </dt>
+          <dd>
+            <input type="url" id="redactor-link-url" class="long">
+          </dd>
+        </dl>
+        <dl>
+          <dt>
+            <label for="redactor-link-url-text">${Language.get("wcf.editor.link.text")}</label>
+          </dt>
+          <dd>
+            <input type="text" id="redactor-link-url-text" class="long">
+          </dd>
+        </dl>
+        <div class="formSubmit">
+          <button id="redactor-modal-button-action" class="buttonPrimary"></button>
+        </div>`,
             };
         }
-    };
+    }
+    let uiRedactorLink;
+    function showDialog(options) {
+        if (!uiRedactorLink) {
+            uiRedactorLink = new UiRedactorLink();
+        }
+        uiRedactorLink.open(options);
+    }
+    exports.showDialog = showDialog;
 });

diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Redactor/Link.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Redactor/Link.js
deleted file mode 100644 (file)
index 1d5408b..0000000
--- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Redactor/Link.js
+++ /dev/null
@@ -1,87 +0,0 @@
-define(['Core', 'EventKey', 'Language', 'Ui/Dialog'], function(Core, EventKey, Language, UiDialog) {
-       "use strict";
-       
-       if (!COMPILER_TARGET_DEFAULT) {
-               var Fake = function() {};
-               Fake.prototype = {
-                       showDialog: function() {},
-                       _submit: function() {},
-                       _dialogSetup: function() {}
-               };
-               return Fake;
-       }
-       
-       var _boundListener = false;
-       var _callback = null;
-       
-       return {
-               showDialog: function(options) {
-                       UiDialog.open(this);
-                       
-                       UiDialog.setTitle(this, Language.get('wcf.editor.link.' + (options.insert ? 'add' : 'edit')));
-                       
-                       var submitButton = elById('redactor-modal-button-action');
-                       submitButton.textContent = Language.get('wcf.global.button.' + (options.insert ? 'insert' : 'save'));
-                       
-                       _callback = options.submitCallback;
-                       
-                       if (!_boundListener) {
-                               _boundListener = true;
-                               
-                               submitButton.addEventListener('click', this._submit.bind(this));
-                       }
-               },
-               
-               _submit: function() {
-                       if (_callback()) {
-                               UiDialog.close(this);
-                       }
-                       else {
-                               var url = elById('redactor-link-url');
-                               elInnerError(url, Language.get((url.value.trim() === '' ? 'wcf.global.form.error.empty' : 'wcf.editor.link.error.invalid')));
-                       }
-               },
-               
-               _dialogSetup: function() {
-                       return {
-                               id: 'redactorDialogLink',
-                               options: {
-                                       onClose: function() {
-                                               var url = elById('redactor-link-url');
-                                               var small = (url.nextElementSibling && url.nextElementSibling.nodeName === 'SMALL') ? url.nextElementSibling : null;
-                                               if (small !== null) {
-                                                       elRemove(small);
-                                               }
-                                       },
-                                       onSetup: function (content) {
-                                               var submitButton = elBySel('.formSubmit > .buttonPrimary', content);
-                                               
-                                               if (submitButton !== null) {
-                                                       elBySelAll('input[type="url"], input[type="text"]', content, function (input) {
-                                                               input.addEventListener('keyup', function (event) {
-                                                                       if (EventKey.Enter(event)) {
-                                                                               Core.triggerEvent(submitButton, 'click');
-                                                                       }
-                                                               });
-                                                       });
-                                               }
-                                       },
-                                       onShow: function () {
-                                               elById('redactor-link-url').focus();
-                                       }
-                               },
-                               source: '<dl>'
-                                               + '<dt><label for="redactor-link-url">' + Language.get('wcf.editor.link.url') + '</label></dt>'
-                                               + '<dd><input type="url" id="redactor-link-url" class="long"></dd>'
-                                       + '</dl>'
-                                       + '<dl>'
-                                               + '<dt><label for="redactor-link-url-text">' + Language.get('wcf.editor.link.text') + '</label></dt>'
-                                               + '<dd><input type="text" id="redactor-link-url-text" class="long"></dd>'
-                                       + '</dl>'
-                                       + '<div class="formSubmit">'
-                                               + '<button id="redactor-modal-button-action" class="buttonPrimary"></button>'
-                                       + '</div>'
-                       };
-               }
-       };
-});

diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Redactor/Link.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Redactor/Link.ts
new file mode 100644 (file)
index 0000000..97c3734
--- /dev/null
+++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Redactor/Link.ts
@@ -0,0 +1,106 @@
+import DomUtil from "../../Dom/Util";
+import * as Language from "../../Language";
+import UiDialog from "../Dialog";
+import { DialogCallbackObject, DialogCallbackSetup } from "../Dialog/Data";
+
+type SubmitCallback = () => boolean;
+
+interface LinkOptions {
+  insert: boolean;
+  submitCallback: SubmitCallback;
+}
+
+class UiRedactorLink implements DialogCallbackObject {
+  private boundListener = false;
+  private submitCallback: SubmitCallback;
+
+  open(options: LinkOptions) {
+    UiDialog.open(this);
+
+    UiDialog.setTitle(this, Language.get("wcf.editor.link." + (options.insert ? "add" : "edit")));
+
+    const submitButton = document.getElementById("redactor-modal-button-action")!;
+    submitButton.textContent = Language.get("wcf.global.button." + (options.insert ? "insert" : "save"));
+
+    this.submitCallback = options.submitCallback;
+
+    // Redactor might modify the button, thus we cannot bind it in the dialog's `onSetup()` callback.
+    if (!this.boundListener) {
+      this.boundListener = true;
+
+      submitButton.addEventListener("click", this.submit.bind(this));
+    }
+  }
+
+  private submit(): void {
+    if (this.submitCallback()) {
+      UiDialog.close(this);
+    } else {
+      const url = document.getElementById("redactor-link-url") as HTMLInputElement;
+
+      const errorMessage = url.value.trim() === "" ? "wcf.global.form.error.empty" : "wcf.editor.link.error.invalid";
+      DomUtil.innerError(url, Language.get(errorMessage));
+    }
+  }
+
+  _dialogSetup(): ReturnType<DialogCallbackSetup> {
+    return {
+      id: "redactorDialogLink",
+      options: {
+        onClose: () => {
+          const url = document.getElementById("redactor-link-url") as HTMLInputElement;
+          const small = url.nextElementSibling;
+          if (small && small.nodeName === "SMALL") {
+            small.remove();
+          }
+        },
+        onSetup: (content) => {
+          const submitButton = content.querySelector(".formSubmit > .buttonPrimary") as HTMLButtonElement;
+
+          if (submitButton !== null) {
+            content.querySelectorAll('input[type="url"], input[type="text"]').forEach((input: HTMLInputElement) => {
+              input.addEventListener("keyup", (event) => {
+                if (event.key === "Enter") {
+                  submitButton.click();
+                }
+              });
+            });
+          }
+        },
+        onShow: () => {
+          const url = document.getElementById("redactor-link-url") as HTMLInputElement;
+          url.focus();
+        },
+      },
+      source: `<dl>
+          <dt>
+            <label for="redactor-link-url">${Language.get("wcf.editor.link.url")}</label>
+          </dt>
+          <dd>
+            <input type="url" id="redactor-link-url" class="long">
+          </dd>
+        </dl>
+        <dl>
+          <dt>
+            <label for="redactor-link-url-text">${Language.get("wcf.editor.link.text")}</label>
+          </dt>
+          <dd>
+            <input type="text" id="redactor-link-url-text" class="long">
+          </dd>
+        </dl>
+        <div class="formSubmit">
+          <button id="redactor-modal-button-action" class="buttonPrimary"></button>
+        </div>`,
+    };
+  }
+}
+
+let uiRedactorLink: UiRedactorLink;
+
+export function showDialog(options: LinkOptions): void {
+  if (!uiRedactorLink) {
+    uiRedactorLink = new UiRedactorLink();
+  }
+
+  uiRedactorLink.open(options);
+}