From 43bb679208bbd35f750e0a36546d37b5f9f3cca4 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Wed, 4 Nov 2020 23:14:52 +0100 Subject: [PATCH] Convert `Ui/Redactor/Link` to TypeScript --- .../js/WoltLabSuite/Core/Ui/Redactor/Link.js | 130 ++++++++++-------- .../ts/WoltLabSuite/Core/Ui/Redactor/Link.js | 87 ------------ .../ts/WoltLabSuite/Core/Ui/Redactor/Link.ts | 106 ++++++++++++++ 3 files changed, 179 insertions(+), 144 deletions(-) delete mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Redactor/Link.js create mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Redactor/Link.ts 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 fe9fc94ac7..c4c27f004b 100644 --- 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: '
' - + '
' - + '
' - + '
' - + '
' - + '
' - + '
' - + '
' - + '
' - + '' - + '
' + source: `
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+ +
`, }; } - }; + } + 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 index 1d5408bc56..0000000000 --- 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: '
' - + '
' - + '
' - + '
' - + '
' - + '
' - + '
' - + '
' - + '
' - + '' - + '
' - }; - } - }; -}); 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 index 0000000000..97c3734674 --- /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 { + 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: `
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+ +
`, + }; + } +} + +let uiRedactorLink: UiRedactorLink; + +export function showDialog(options: LinkOptions): void { + if (!uiRedactorLink) { + uiRedactorLink = new UiRedactorLink(); + } + + uiRedactorLink.open(options); +} -- 2.20.1