/**
* 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 <http://opensource.org/licenses/lgpl-license.php>
- * @module WoltLabSuite/Core/Acp/Ui/Devtools/Project/Pip/Entry/List
+ * @author Matthias Schmidt
+ * @copyright 2001-2019 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @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 `<delete>`
*/
- 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 ? '' +
- '<dl>' +
- ' <dt></dt>' +
- ' <dd>' +
- ' <label><input type="checkbox" name="addDeleteInstruction" checked> ' + Language.get('wcf.acp.devtools.project.pip.entry.delete.addDeleteInstruction') + '</label>' +
- ' <small>' + Language.get('wcf.acp.devtools.project.pip.entry.delete.addDeleteInstruction.description') + '</small>' +
- ' </dd>' +
- '</dl>' : '',
+ _confirmDeletePipEntry(event) {
+ event.preventDefault();
+ const button = event.currentTarget;
+ const pipEntry = button.closest("tr");
+ let template = "";
+ if (this.supportsDeleteInstruction) {
+ template = `
+<dl>
+ <dt></dt>
+ <dd>
+ <label>
+ <input type="checkbox" name="addDeleteInstruction" checked> ${Language.get("wcf.acp.devtools.project.pip.entry.delete.addDeleteInstruction")}
+ </label>
+ <small>${Language.get("wcf.acp.devtools.project.pip.entry.delete.addDeleteInstruction.description")}</small>
+ </dd>
+</dl>`;
+ }
+ 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;
});
+++ /dev/null
-/**
- * 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 <http://opensource.org/licenses/lgpl-license.php>
- * @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 `<delete>`
- */
- 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 ? '' +
- '<dl>' +
- ' <dt></dt>' +
- ' <dd>' +
- ' <label><input type="checkbox" name="addDeleteInstruction" checked> ' + Language.get('wcf.acp.devtools.project.pip.entry.delete.addDeleteInstruction') + '</label>' +
- ' <small>' + Language.get('wcf.acp.devtools.project.pip.entry.delete.addDeleteInstruction.description') + '</small>' +
- ' </dd>' +
- '</dl>' : '',
- 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;
-});
--- /dev/null
+/**
+ * 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 <http://opensource.org/licenses/lgpl-license.php>
+ * @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<AjaxCallbackSetup> {
+ 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 = `
+<dl>
+ <dt></dt>
+ <dd>
+ <label>
+ <input type="checkbox" name="addDeleteInstruction" checked> ${Language.get(
+ "wcf.acp.devtools.project.pip.entry.delete.addDeleteInstruction",
+ )}
+ </label>
+ <small>${Language.get("wcf.acp.devtools.project.pip.entry.delete.addDeleteInstruction.description")}</small>
+ </dd>
+</dl>`;
+ }
+
+ 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;
class UiConfirmation implements DialogCallbackObject {
private _active = false;
- private parameters: CallbackParameters;
+ private parameters: ConfirmationCallbackParameters;
private readonly confirmButton: HTMLElement;
private readonly _content: HTMLElement;
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;