From: Alexander Ebert Date: Sun, 3 Jan 2021 12:09:14 +0000 (+0100) Subject: Convert `Acp/Ui/Devtools/Project/QuickSetup` to TypeScript X-Git-Tag: 5.4.0_Alpha_1~484^2~6 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=e7b05d64534e38e069ba36c427f1000887180225;p=GitHub%2FWoltLab%2FWCF.git Convert `Acp/Ui/Devtools/Project/QuickSetup` to TypeScript --- diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Devtools/Project/QuickSetup.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Devtools/Project/QuickSetup.js index c28901c2cb..e881f12367 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Devtools/Project/QuickSetup.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Devtools/Project/QuickSetup.js @@ -1,122 +1,121 @@ /** * Handles quick setup of all projects within a path. * - * @author Matthias Schmidt - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Acp/Ui/Devtools/Project/QuickSetup + * @author Matthias Schmidt + * @copyright 2001-2019 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Acp/Ui/Devtools/Project/QuickSetup */ -define([ - 'Ajax', - 'Dom/Traverse', - 'Dom/Util', - 'EventKey', - 'Language', - 'Ui/Dialog', - 'Ui/Notification' -], function (Ajax, DomTraverse, DomUtil, EventKey, Language, UiDialog, UiNotification) { +define(["require", "exports", "tslib", "../../../../Ajax", "../../../../Dom/Util", "../../../../Language", "../../../../Ui/Dialog", "../../../../Ui/Notification"], function (require, exports, tslib_1, Ajax, Util_1, Language, Dialog_1, UiNotification) { "use strict"; - var _setupButtons = elByClass('jsDevtoolsProjectQuickSetupButton'); - var _submitButton = elById('projectQuickSetupSubmit'); - var _pathInput = elById('projectQuickSetupPath'); - return { + Object.defineProperty(exports, "__esModule", { value: true }); + exports.init = void 0; + Ajax = tslib_1.__importStar(Ajax); + Util_1 = tslib_1.__importDefault(Util_1); + Language = tslib_1.__importStar(Language); + Dialog_1 = tslib_1.__importDefault(Dialog_1); + UiNotification = tslib_1.__importStar(UiNotification); + class AcpUiDevtoolsProjectQuickSetup { /** * Initializes the project quick setup handler. */ - init: function () { - // add event listeners to open dialog - Array.prototype.forEach.call(_setupButtons, function (button) { - button.addEventListener('click', this._showDialog.bind(this)); - }.bind(this)); - // add event listener to submit dialog - _submitButton.addEventListener('click', this._submit.bind(this)); - // add event listener to input field to submit dialog by pressing enter - _pathInput.addEventListener('keypress', this._keyPress.bind(this)); - }, + constructor() { + document.querySelectorAll(".jsDevtoolsProjectQuickSetupButton").forEach((button) => { + button.addEventListener("click", (ev) => this.showDialog(ev)); + }); + this.submitButton = document.getElementById("projectQuickSetupSubmit"); + this.submitButton.addEventListener("click", (ev) => this.submit(ev)); + this.pathInput = document.getElementById("projectQuickSetupPath"); + this.pathInput.addEventListener("keypress", (ev) => this.keyPress(ev)); + } /** * Returns the data used to setup the AJAX request object. - * - * @return {object} setup data */ - _ajaxSetup: function () { + _ajaxSetup() { return { data: { - actionName: 'quickSetup', - className: 'wcf\\data\\devtools\\project\\DevtoolsProjectAction' - } + actionName: "quickSetup", + className: "wcf\\data\\devtools\\project\\DevtoolsProjectAction", + }, }; - }, + } /** * Handles successful AJAX request. - * - * @param {object} data response data */ - _ajaxSuccess: function (data) { + _ajaxSuccess(data) { if (data.returnValues.errorMessage) { - elInnerError(_pathInput, data.returnValues.errorMessage); - _submitButton.disabled = false; + Util_1.default.innerError(this.pathInput, data.returnValues.errorMessage); + this.submitButton.disabled = false; return; } - UiDialog.close(this); - UiNotification.show(data.returnValues.successMessage, function () { + Dialog_1.default.close(this); + UiNotification.show(data.returnValues.successMessage, () => { window.location.reload(); }); - }, + } /** * Returns the data used to setup the dialog. - * - * @return {object} setup data */ - _dialogSetup: function () { + _dialogSetup() { return { - id: 'projectQuickSetup', + id: "projectQuickSetup", options: { - onShow: this._onDialogShow.bind(this), - title: Language.get('wcf.acp.devtools.project.quickSetup') - } + onShow: () => this.onDialogShow(), + title: Language.get("wcf.acp.devtools.project.quickSetup"), + }, }; - }, + } /** * Handles the `[ENTER]` key to submit the form. - * - * @param {object} event event object */ - _keyPress: function (event) { - if (EventKey.Enter(event)) { - this._submit(); + keyPress(event) { + if (event.key === "Enter") { + this.submit(event); } - }, + } /** * Is called every time the dialog is shown. */ - _onDialogShow: function () { + onDialogShow() { // reset path input - _pathInput.value = ''; - _pathInput.focus(); + this.pathInput.value = ""; + this.pathInput.focus(); // hide error - elInnerError(_pathInput, false); - }, + Util_1.default.innerError(this.pathInput, false); + } /** * Shows the dialog after clicking on the related button. */ - _showDialog: function () { - UiDialog.open(this); - }, + showDialog(event) { + event.preventDefault(); + Dialog_1.default.open(this); + } /** * Is called if the dialog form is submitted. */ - _submit: function () { + submit(event) { + event.preventDefault(); // check if path is empty - if (_pathInput.value === '') { - elInnerError(_pathInput, Language.get('wcf.global.form.error.empty')); + if (this.pathInput.value === "") { + Util_1.default.innerError(this.pathInput, Language.get("wcf.global.form.error.empty")); return; } Ajax.api(this, { parameters: { - path: _pathInput.value - } + path: this.pathInput.value, + }, }); - _submitButton.disabled = true; + this.submitButton.disabled = true; + } + } + let acpUiDevtoolsProjectQuickSetup; + /** + * Initializes the project quick setup handler. + */ + function init() { + if (!acpUiDevtoolsProjectQuickSetup) { + acpUiDevtoolsProjectQuickSetup = new AcpUiDevtoolsProjectQuickSetup(); } - }; + } + exports.init = init; }); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Devtools/Project/QuickSetup.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Devtools/Project/QuickSetup.js deleted file mode 100644 index d879ab1a6c..0000000000 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Devtools/Project/QuickSetup.js +++ /dev/null @@ -1,149 +0,0 @@ -/** - * Handles quick setup of all projects within a path. - * - * @author Matthias Schmidt - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Acp/Ui/Devtools/Project/QuickSetup - */ -define([ - 'Ajax', - 'Dom/Traverse', - 'Dom/Util', - 'EventKey', - 'Language', - 'Ui/Dialog', - 'Ui/Notification' -], function ( - Ajax, - DomTraverse, - DomUtil, - EventKey, - Language, - UiDialog, - UiNotification -) { - "use strict"; - - var _setupButtons = elByClass('jsDevtoolsProjectQuickSetupButton'); - var _submitButton = elById('projectQuickSetupSubmit'); - var _pathInput = elById('projectQuickSetupPath'); - - return { - /** - * Initializes the project quick setup handler. - */ - init: function() { - // add event listeners to open dialog - Array.prototype.forEach.call(_setupButtons, function(button) { - button.addEventListener('click', this._showDialog.bind(this)); - }.bind(this)); - - // add event listener to submit dialog - _submitButton.addEventListener('click', this._submit.bind(this)); - - // add event listener to input field to submit dialog by pressing enter - _pathInput.addEventListener('keypress', this._keyPress.bind(this)); - }, - - /** - * Returns the data used to setup the AJAX request object. - * - * @return {object} setup data - */ - _ajaxSetup: function () { - return { - data: { - actionName: 'quickSetup', - className: 'wcf\\data\\devtools\\project\\DevtoolsProjectAction' - } - }; - }, - - /** - * Handles successful AJAX request. - * - * @param {object} data response data - */ - _ajaxSuccess: function(data) { - if (data.returnValues.errorMessage) { - elInnerError(_pathInput, data.returnValues.errorMessage); - - _submitButton.disabled = false; - - return; - } - - UiDialog.close(this); - - UiNotification.show(data.returnValues.successMessage, function() { - window.location.reload(); - }); - }, - - /** - * Returns the data used to setup the dialog. - * - * @return {object} setup data - */ - _dialogSetup: function() { - return { - id: 'projectQuickSetup', - options: { - onShow: this._onDialogShow.bind(this), - title: Language.get('wcf.acp.devtools.project.quickSetup') - } - }; - }, - - /** - * Handles the `[ENTER]` key to submit the form. - * - * @param {object} event event object - */ - _keyPress: function(event) { - if (EventKey.Enter(event)) { - this._submit(); - } - }, - - /** - * Is called every time the dialog is shown. - */ - _onDialogShow: function() { - // reset path input - _pathInput.value = ''; - _pathInput.focus(); - - // hide error - elInnerError(_pathInput, false); - }, - - /** - * Shows the dialog after clicking on the related button. - */ - _showDialog: function() { - UiDialog.open(this); - }, - - /** - * Is called if the dialog form is submitted. - */ - _submit: function() { - // check if path is empty - if (_pathInput.value === '') { - elInnerError(_pathInput, Language.get('wcf.global.form.error.empty')); - - return; - } - - Ajax.api(this, { - parameters: { - path: _pathInput.value - } - }); - - _submitButton.disabled = true; - } - }; -}); \ No newline at end of file diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Devtools/Project/QuickSetup.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Devtools/Project/QuickSetup.ts new file mode 100644 index 0000000000..99e3ccd09b --- /dev/null +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Devtools/Project/QuickSetup.ts @@ -0,0 +1,150 @@ +/** + * Handles quick setup of all projects within a path. + * + * @author Matthias Schmidt + * @copyright 2001-2019 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Acp/Ui/Devtools/Project/QuickSetup + */ + +import * as Ajax from "../../../../Ajax"; +import DomUtil from "../../../../Dom/Util"; +import * as Language from "../../../../Language"; +import UiDialog from "../../../../Ui/Dialog"; +import * as UiNotification from "../../../../Ui/Notification"; +import { AjaxCallbackObject, AjaxCallbackSetup } from "../../../../Ajax/Data"; +import { DialogCallbackObject, DialogCallbackSetup } from "../../../../Ui/Dialog/Data"; + +interface AjaxResponse { + returnValues: { + errorMessage?: string; + successMessage: string; + }; +} + +class AcpUiDevtoolsProjectQuickSetup implements AjaxCallbackObject, DialogCallbackObject { + private readonly pathInput: HTMLInputElement; + private readonly submitButton: HTMLButtonElement; + + /** + * Initializes the project quick setup handler. + */ + constructor() { + document.querySelectorAll(".jsDevtoolsProjectQuickSetupButton").forEach((button: HTMLAnchorElement) => { + button.addEventListener("click", (ev) => this.showDialog(ev)); + }); + + this.submitButton = document.getElementById("projectQuickSetupSubmit") as HTMLButtonElement; + this.submitButton.addEventListener("click", (ev) => this.submit(ev)); + + this.pathInput = document.getElementById("projectQuickSetupPath") as HTMLInputElement; + this.pathInput.addEventListener("keypress", (ev) => this.keyPress(ev)); + } + + /** + * Returns the data used to setup the AJAX request object. + */ + _ajaxSetup(): ReturnType { + return { + data: { + actionName: "quickSetup", + className: "wcf\\data\\devtools\\project\\DevtoolsProjectAction", + }, + }; + } + + /** + * Handles successful AJAX request. + */ + _ajaxSuccess(data: AjaxResponse): void { + if (data.returnValues.errorMessage) { + DomUtil.innerError(this.pathInput, data.returnValues.errorMessage); + + this.submitButton.disabled = false; + + return; + } + + UiDialog.close(this); + + UiNotification.show(data.returnValues.successMessage, () => { + window.location.reload(); + }); + } + + /** + * Returns the data used to setup the dialog. + */ + _dialogSetup(): ReturnType { + return { + id: "projectQuickSetup", + options: { + onShow: () => this.onDialogShow(), + title: Language.get("wcf.acp.devtools.project.quickSetup"), + }, + }; + } + + /** + * Handles the `[ENTER]` key to submit the form. + */ + private keyPress(event: KeyboardEvent): void { + if (event.key === "Enter") { + this.submit(event); + } + } + + /** + * Is called every time the dialog is shown. + */ + private onDialogShow(): void { + // reset path input + this.pathInput.value = ""; + this.pathInput.focus(); + + // hide error + DomUtil.innerError(this.pathInput, false); + } + + /** + * Shows the dialog after clicking on the related button. + */ + private showDialog(event: MouseEvent): void { + event.preventDefault(); + + UiDialog.open(this); + } + + /** + * Is called if the dialog form is submitted. + */ + private submit(event: Event): void { + event.preventDefault(); + + // check if path is empty + if (this.pathInput.value === "") { + DomUtil.innerError(this.pathInput, Language.get("wcf.global.form.error.empty")); + + return; + } + + Ajax.api(this, { + parameters: { + path: this.pathInput.value, + }, + }); + + this.submitButton.disabled = true; + } +} + +let acpUiDevtoolsProjectQuickSetup: AcpUiDevtoolsProjectQuickSetup; + +/** + * Initializes the project quick setup handler. + */ +export function init(): void { + if (!acpUiDevtoolsProjectQuickSetup) { + acpUiDevtoolsProjectQuickSetup = new AcpUiDevtoolsProjectQuickSetup(); + } +}