From: Alexander Ebert Date: Sun, 3 Jan 2021 12:58:27 +0000 (+0100) Subject: Convert `Acp/Ui/Devtools/Project/Pip/Entry/List` to TypeScript X-Git-Tag: 5.4.0_Alpha_1~484^2~5 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=3a8b4da58b837a0c7121a539dd95dc1c305045ff;p=GitHub%2FWoltLab%2FWCF.git Convert `Acp/Ui/Devtools/Project/Pip/Entry/List` to TypeScript --- diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Devtools/Project/Pip/Entry/List.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Devtools/Project/Pip/Entry/List.js index 7c41ff36af..59c81517d0 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Devtools/Project/Pip/Entry/List.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Devtools/Project/Pip/Entry/List.js @@ -1,125 +1,114 @@ /** * Handles the JavaScript part of the devtools project pip entry list. * - * @author Matthias Schmidt - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Acp/Ui/Devtools/Project/Pip/Entry/List + * @author Matthias Schmidt + * @copyright 2001-2019 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Acp/Ui/Devtools/Project/Pip/Entry/List */ -define([ - 'Ajax', - 'Language', - 'Ui/Confirmation', - 'Ui/Notification' -], function (Ajax, Language, UiConfirmation, UiNotification) { +define(["require", "exports", "tslib", "../../../../../../Ajax", "../../../../../../Core", "../../../../../../Language", "../../../../../../Ui/Confirmation", "../../../../../../Ui/Notification"], function (require, exports, tslib_1, Ajax, Core, Language, Confirmation_1, UiNotification) { "use strict"; - /** - * @constructor - */ - function DevtoolsProjectPipEntryList(tableId, projectId, pip, entryType, supportsDeleteInstruction) { - this.init(tableId, projectId, pip, entryType, supportsDeleteInstruction); - } - ; - DevtoolsProjectPipEntryList.prototype = { + Ajax = tslib_1.__importStar(Ajax); + Core = tslib_1.__importStar(Core); + Language = tslib_1.__importStar(Language); + UiNotification = tslib_1.__importStar(UiNotification); + class DevtoolsProjectPipEntryList { /** * Initializes the devtools project pip entry list handler. - * - * @param {string} tableId id of the table containing the pip entries - * @param {integer} projectId id of the project the listed pip entries belong to - * @param {string} pip name of the pip the listed entries belong to - * @param {string} entryType type of the listed entries - * @param {boolean} supportsDeleteInstruction is `true` if the pip supports `` */ - init: function (tableId, projectId, pip, entryType, supportsDeleteInstruction) { - this._table = elById(tableId); - if (this._table === null) { - throw new Error("Unknown element with id '" + tableId + "'."); + constructor(tableId, projectId, pip, entryType, supportsDeleteInstruction) { + const table = document.getElementById(tableId); + if (table === null) { + throw new Error(`Unknown element with id '${tableId}'.`); } - if (this._table.tagName !== 'TABLE') { - throw new Error("Element with id '" + tableId + "' is no table."); + else if (!(table instanceof HTMLTableElement)) { + throw new Error(`Element with id '${tableId}' is no table.`); } - this._projectId = projectId; - this._pip = pip; - this._entryType = entryType; - this._supportsDeleteInstruction = supportsDeleteInstruction; - elBySelAll('.jsDeleteButton', this._table, function (deleteButton) { - deleteButton.addEventListener('click', this._confirmDeletePipEntry.bind(this)); - }.bind(this)); - }, + this.table = table; + this.projectId = projectId; + this.pip = pip; + this.entryType = entryType; + this.supportsDeleteInstruction = supportsDeleteInstruction; + this.table.querySelectorAll(".jsDeleteButton").forEach((button) => { + button.addEventListener("click", (ev) => this._confirmDeletePipEntry(ev)); + }); + } /** * Returns the data used to setup the AJAX request object. - * - * @return {object} setup data */ - _ajaxSetup: function () { + _ajaxSetup() { return { data: { - actionName: 'deletePipEntry', - className: 'wcf\\data\\devtools\\project\\DevtoolsProjectAction' - } + actionName: "deletePipEntry", + className: "wcf\\data\\devtools\\project\\DevtoolsProjectAction", + }, }; - }, + } /** * Handles successful AJAX request. - * - * @param {object} data response data */ - _ajaxSuccess: function (data) { + _ajaxSuccess(data) { UiNotification.show(); - elBySelAll('tbody > tr', this._table, function (pipEntry) { - if (elData(pipEntry, 'identifier') === data.returnValues.identifier) { - elRemove(pipEntry); + this.table.querySelectorAll("tbody > tr").forEach((pipEntry) => { + if (pipEntry.dataset.identifier === data.returnValues.identifier) { + pipEntry.remove(); } - }.bind(this)); - // reload page if table is empty - if (elBySelAll('tbody > tr', this._table).length === 0) { + }); + // Reload page if the table is now empty. + if (this.table.querySelector("tbody > tr") === null) { window.location.reload(); } - }, + } /** * Shows the confirmation dialog when deleting a pip entry. - * - * @param {Event} event */ - _confirmDeletePipEntry: function (event) { - var pipEntry = event.currentTarget.closest('tr'); - UiConfirmation.show({ - confirm: this._deletePipEntry.bind(this), - message: Language.get('wcf.acp.devtools.project.pip.entry.delete.confirmMessage'), - template: this._supportsDeleteInstruction ? '' + - '
' + - '
' + - '
' + - ' ' + - ' ' + Language.get('wcf.acp.devtools.project.pip.entry.delete.addDeleteInstruction.description') + '' + - '
' + - '
' : '', + _confirmDeletePipEntry(event) { + event.preventDefault(); + const button = event.currentTarget; + const pipEntry = button.closest("tr"); + let template = ""; + if (this.supportsDeleteInstruction) { + template = ` +
+
+
+ + ${Language.get("wcf.acp.devtools.project.pip.entry.delete.addDeleteInstruction.description")} +
+
`; + } + Confirmation_1.show({ + confirm: (parameters, content) => this.deletePipEntry(parameters, content), + message: Language.get("wcf.acp.devtools.project.pip.entry.delete.confirmMessage"), + template, parameters: { - pipEntry: pipEntry - } + pipEntry: pipEntry, + }, }); - }, + } /** * Sends the AJAX request to delete a pip entry. - * - * @param {object} parameters contains the deleted pip entry element - * @param {HTMLElement} content confirmation dialog containing the `addDeleteInstruction` instruction */ - _deletePipEntry: function (parameters, content) { - var addDeleteInstruction = false; - if (this._supportsDeleteInstruction) { - addDeleteInstruction = ~~elBySel('input[name=addDeleteInstruction]', content).checked; + deletePipEntry(parameters, content) { + let addDeleteInstruction = false; + if (this.supportsDeleteInstruction) { + const input = content.querySelector("input[name=addDeleteInstruction]"); + addDeleteInstruction = input.checked; } + const pipEntry = parameters.pipEntry; Ajax.api(this, { - objectIDs: [this._projectId], + objectIDs: [this.projectId], parameters: { - addDeleteInstruction: addDeleteInstruction, - entryType: this._entryType, - identifier: elData(parameters.pipEntry, 'identifier'), - pip: this._pip - } + addDeleteInstruction, + entryType: this.entryType, + identifier: pipEntry.dataset.identifier, + pip: this.pip, + }, }); } - }; + } + Core.enableLegacyInheritance(DevtoolsProjectPipEntryList); return DevtoolsProjectPipEntryList; }); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Devtools/Project/Pip/Entry/List.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Devtools/Project/Pip/Entry/List.js deleted file mode 100644 index a0ded71f35..0000000000 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Devtools/Project/Pip/Entry/List.js +++ /dev/null @@ -1,141 +0,0 @@ -/** - * Handles the JavaScript part of the devtools project pip entry list. - * - * @author Matthias Schmidt - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Acp/Ui/Devtools/Project/Pip/Entry/List - */ -define([ - 'Ajax', - 'Language', - 'Ui/Confirmation', - 'Ui/Notification' -], function ( - Ajax, - Language, - UiConfirmation, - UiNotification -) { - "use strict"; - - /** - * @constructor - */ - function DevtoolsProjectPipEntryList(tableId, projectId, pip, entryType, supportsDeleteInstruction) { - this.init(tableId, projectId, pip, entryType, supportsDeleteInstruction); - }; - DevtoolsProjectPipEntryList.prototype = { - /** - * Initializes the devtools project pip entry list handler. - * - * @param {string} tableId id of the table containing the pip entries - * @param {integer} projectId id of the project the listed pip entries belong to - * @param {string} pip name of the pip the listed entries belong to - * @param {string} entryType type of the listed entries - * @param {boolean} supportsDeleteInstruction is `true` if the pip supports `` - */ - init: function(tableId, projectId, pip, entryType, supportsDeleteInstruction) { - this._table = elById(tableId); - if (this._table === null) { - throw new Error("Unknown element with id '" + tableId + "'."); - } - if (this._table.tagName !== 'TABLE') { - throw new Error("Element with id '" + tableId + "' is no table."); - } - - this._projectId = projectId; - this._pip = pip; - this._entryType = entryType; - this._supportsDeleteInstruction = supportsDeleteInstruction; - - elBySelAll('.jsDeleteButton', this._table, function(deleteButton) { - deleteButton.addEventListener('click', this._confirmDeletePipEntry.bind(this)); - }.bind(this)); - }, - - /** - * Returns the data used to setup the AJAX request object. - * - * @return {object} setup data - */ - _ajaxSetup: function () { - return { - data: { - actionName: 'deletePipEntry', - className: 'wcf\\data\\devtools\\project\\DevtoolsProjectAction' - } - }; - }, - - /** - * Handles successful AJAX request. - * - * @param {object} data response data - */ - _ajaxSuccess: function(data) { - UiNotification.show(); - - elBySelAll('tbody > tr', this._table, function(pipEntry) { - if (elData(pipEntry, 'identifier') === data.returnValues.identifier) { - elRemove(pipEntry); - } - }.bind(this)); - - // reload page if table is empty - if (elBySelAll('tbody > tr', this._table).length === 0) { - window.location.reload(); - } - }, - - /** - * Shows the confirmation dialog when deleting a pip entry. - * - * @param {Event} event - */ - _confirmDeletePipEntry: function(event) { - var pipEntry = event.currentTarget.closest('tr'); - - UiConfirmation.show({ - confirm: this._deletePipEntry.bind(this), - message: Language.get('wcf.acp.devtools.project.pip.entry.delete.confirmMessage'), - template: this._supportsDeleteInstruction ? '' + - '
' + - '
' + - '
' + - ' ' + - ' ' + Language.get('wcf.acp.devtools.project.pip.entry.delete.addDeleteInstruction.description') + '' + - '
' + - '
' : '', - parameters: { - pipEntry: pipEntry - } - }); - }, - - /** - * Sends the AJAX request to delete a pip entry. - * - * @param {object} parameters contains the deleted pip entry element - * @param {HTMLElement} content confirmation dialog containing the `addDeleteInstruction` instruction - */ - _deletePipEntry: function(parameters, content) { - var addDeleteInstruction = false; - if (this._supportsDeleteInstruction) { - addDeleteInstruction = ~~elBySel('input[name=addDeleteInstruction]', content).checked; - } - - Ajax.api(this, { - objectIDs: [this._projectId], - parameters: { - addDeleteInstruction: addDeleteInstruction, - entryType: this._entryType, - identifier: elData(parameters.pipEntry, 'identifier'), - pip: this._pip - } - }); - } - }; - - return DevtoolsProjectPipEntryList; -}); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Devtools/Project/Pip/Entry/List.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Devtools/Project/Pip/Entry/List.ts new file mode 100644 index 0000000000..625acd24eb --- /dev/null +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Devtools/Project/Pip/Entry/List.ts @@ -0,0 +1,142 @@ +/** + * Handles the JavaScript part of the devtools project pip entry list. + * + * @author Matthias Schmidt + * @copyright 2001-2019 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Acp/Ui/Devtools/Project/Pip/Entry/List + */ + +import * as Ajax from "../../../../../../Ajax"; +import * as Core from "../../../../../../Core"; +import * as Language from "../../../../../../Language"; +import { ConfirmationCallbackParameters, show as showConfirmation } from "../../../../../../Ui/Confirmation"; +import * as UiNotification from "../../../../../../Ui/Notification"; +import { AjaxCallbackSetup } from "../../../../../../Ajax/Data"; + +interface AjaxResponse { + returnValues: { + identifier: string; + }; +} + +class DevtoolsProjectPipEntryList { + private readonly entryType: string; + private readonly pip: string; + private readonly projectId: number; + private readonly supportsDeleteInstruction: boolean; + private readonly table: HTMLTableElement; + + /** + * Initializes the devtools project pip entry list handler. + */ + constructor(tableId: string, projectId: number, pip: string, entryType: string, supportsDeleteInstruction: boolean) { + const table = document.getElementById(tableId); + if (table === null) { + throw new Error(`Unknown element with id '${tableId}'.`); + } else if (!(table instanceof HTMLTableElement)) { + throw new Error(`Element with id '${tableId}' is no table.`); + } + this.table = table; + + this.projectId = projectId; + this.pip = pip; + this.entryType = entryType; + this.supportsDeleteInstruction = supportsDeleteInstruction; + + this.table.querySelectorAll(".jsDeleteButton").forEach((button: HTMLElement) => { + button.addEventListener("click", (ev) => this._confirmDeletePipEntry(ev)); + }); + } + + /** + * Returns the data used to setup the AJAX request object. + */ + _ajaxSetup(): ReturnType { + return { + data: { + actionName: "deletePipEntry", + className: "wcf\\data\\devtools\\project\\DevtoolsProjectAction", + }, + }; + } + + /** + * Handles successful AJAX request. + */ + _ajaxSuccess(data: AjaxResponse): void { + UiNotification.show(); + + this.table.querySelectorAll("tbody > tr").forEach((pipEntry: HTMLTableRowElement) => { + if (pipEntry.dataset.identifier === data.returnValues.identifier) { + pipEntry.remove(); + } + }); + + // Reload page if the table is now empty. + if (this.table.querySelector("tbody > tr") === null) { + window.location.reload(); + } + } + + /** + * Shows the confirmation dialog when deleting a pip entry. + */ + private _confirmDeletePipEntry(event: MouseEvent): void { + event.preventDefault(); + + const button = event.currentTarget as HTMLElement; + const pipEntry = button.closest("tr")!; + + let template = ""; + if (this.supportsDeleteInstruction) { + template = ` +
+
+
+ + ${Language.get("wcf.acp.devtools.project.pip.entry.delete.addDeleteInstruction.description")} +
+
`; + } + + showConfirmation({ + confirm: (parameters, content) => this.deletePipEntry(parameters, content), + message: Language.get("wcf.acp.devtools.project.pip.entry.delete.confirmMessage"), + template, + parameters: { + pipEntry: pipEntry, + }, + }); + } + + /** + * Sends the AJAX request to delete a pip entry. + */ + private deletePipEntry(parameters: ConfirmationCallbackParameters, content: HTMLElement): void { + let addDeleteInstruction = false; + if (this.supportsDeleteInstruction) { + const input = content.querySelector("input[name=addDeleteInstruction]") as HTMLInputElement; + addDeleteInstruction = input.checked; + } + + const pipEntry = parameters.pipEntry as HTMLTableRowElement; + Ajax.api(this, { + objectIDs: [this.projectId], + parameters: { + addDeleteInstruction, + entryType: this.entryType, + identifier: pipEntry.dataset.identifier, + pip: this.pip, + }, + }); + } +} + +Core.enableLegacyInheritance(DevtoolsProjectPipEntryList); + +export = DevtoolsProjectPipEntryList; diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Confirmation.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Confirmation.ts index 1801150750..846e54b2d7 100644 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Confirmation.ts +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Confirmation.ts @@ -15,7 +15,7 @@ import { DialogCallbackObject, DialogCallbackSetup } from "./Dialog/Data"; class UiConfirmation implements DialogCallbackObject { private _active = false; - private parameters: CallbackParameters; + private parameters: ConfirmationCallbackParameters; private readonly confirmButton: HTMLElement; private readonly _content: HTMLElement; @@ -149,25 +149,25 @@ function getConfirmation(): UiConfirmation { type LegacyResult = "cancel" | "confirm"; -type CallbackParameters = { +export type ConfirmationCallbackParameters = { [key: string]: any; }; interface BasicConfirmationOptions { message: string; messageIsHtml?: boolean; - parameters?: CallbackParameters; + parameters?: ConfirmationCallbackParameters; template?: string; } interface LegacyConfirmationOptions extends BasicConfirmationOptions { cancel?: never; confirm?: never; - legacyCallback: (result: LegacyResult, parameters: CallbackParameters, element: HTMLElement) => void; + legacyCallback: (result: LegacyResult, parameters: ConfirmationCallbackParameters, element: HTMLElement) => void; } -type CallbackCancel = (parameters: CallbackParameters) => void; -type CallbackConfirm = (parameters: CallbackParameters, content: HTMLElement) => void; +type CallbackCancel = (parameters: ConfirmationCallbackParameters) => void; +type CallbackConfirm = (parameters: ConfirmationCallbackParameters, content: HTMLElement) => void; interface NewConfirmationOptions extends BasicConfirmationOptions { cancel?: CallbackCancel;