Convert `Acp/Ui/Devtools/Project/Pip/Entry/List` to TypeScript
authorAlexander Ebert <ebert@woltlab.com>
Sun, 3 Jan 2021 12:58:27 +0000 (13:58 +0100)
committerAlexander Ebert <ebert@woltlab.com>
Sun, 3 Jan 2021 12:58:27 +0000 (13:58 +0100)
wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Devtools/Project/Pip/Entry/List.js
wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Devtools/Project/Pip/Entry/List.js [deleted file]
wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Devtools/Project/Pip/Entry/List.ts [new file with mode: 0644]
wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Confirmation.ts

index 7c41ff36af820033d3345dcea9081f3d011ffedf..59c81517d01ed72dc6e33d4912bdc66de1e409f5 100644 (file)
 /**
  * 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;
 });
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 (file)
index a0ded71..0000000
+++ /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 <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;
-});
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 (file)
index 0000000..625acd2
--- /dev/null
@@ -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 <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;
index 1801150750af9e18e0bc730dbfa1912140a04b85..846e54b2d7861a6ed50f9fe06f528856b83b04fc 100644 (file)
@@ -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;