Convert `Ui/User/Profile/Menu/Item/Abstract` to TypeScript
authorAlexander Ebert <ebert@woltlab.com>
Fri, 30 Oct 2020 23:46:36 +0000 (00:46 +0100)
committerAlexander Ebert <ebert@woltlab.com>
Fri, 30 Oct 2020 23:46:36 +0000 (00:46 +0100)
wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Profile/Menu/Item/Abstract.js
wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/User/Profile/Menu/Item/Abstract.js [deleted file]
wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/User/Profile/Menu/Item/Abstract.ts [new file with mode: 0644]

index e9153bbb91741e73c9d256565b87bb4629f9a7fe..976d53d1fe1cdcd654bae375ffe340a10ced1c33 100644 (file)
 /**
  * Default implementation for user interaction menu items used in the user profile.
  *
- * @author     Alexander Ebert
- * @copyright  2001-2019 WoltLab GmbH
- * @license    GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
- * @module     WoltLabSuite/Core/Ui/User/Profile/Menu/Item/Abstract
+ * @author  Alexander Ebert
+ * @copyright  2001-2019 WoltLab GmbH
+ * @license  GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module  WoltLabSuite/Core/Ui/User/Profile/Menu/Item/Abstract
  */
-define(['Ajax', 'Dom/Util'], function (Ajax, DomUtil) {
+define(["require", "exports", "tslib", "../../../../../Ajax"], function (require, exports, tslib_1, Ajax) {
     "use strict";
-    /**
-     * Creates a new user profile menu item.
-     *
-     * @param       {int}           userId          user id
-     * @param       {boolean}       isActive        true if item is initially active
-     * @constructor
-     */
-    function UiUserProfileMenuItemAbstract(userId, isActive) { }
-    UiUserProfileMenuItemAbstract.prototype = {
+    Ajax = tslib_1.__importStar(Ajax);
+    class UiUserProfileMenuItemAbstract {
         /**
          * Creates a new user profile menu item.
-         *
-         * @param       {int}           userId          user id
-         * @param       {boolean}       isActive        true if item is initially active
          */
-        init: function (userId, isActive) {
+        constructor(userId, isActive) {
+            this._button = document.createElement("a");
+            this._listItem = document.createElement("li");
             this._userId = userId;
-            this._isActive = (isActive !== false);
+            this._isActive = isActive;
             this._initButton();
             this._updateButton();
-        },
+        }
         /**
          * Initializes the menu item.
-         *
-         * @protected
          */
-        _initButton: function () {
-            var button = elCreate('a');
-            button.href = '#';
-            button.addEventListener('click', this._toggle.bind(this));
-            var listItem = elCreate('li');
-            listItem.appendChild(button);
-            var menu = elBySel('.userProfileButtonMenu[data-menu="interaction"]');
-            DomUtil.prepend(listItem, menu);
-            this._button = button;
-            this._listItem = listItem;
-        },
+        _initButton() {
+            this._button.href = "#";
+            this._button.addEventListener("click", (ev) => this._toggle(ev));
+            this._listItem.appendChild(this._button);
+            const menu = document.querySelector(`.userProfileButtonMenu[data-menu="interaction"]`);
+            menu.insertAdjacentElement("afterbegin", this._listItem);
+        }
         /**
          * Handles clicks on the menu item button.
-         *
-         * @param       {Event}         event   event object
-         * @protected
          */
-        _toggle: function (event) {
+        _toggle(event) {
             event.preventDefault();
             Ajax.api(this, {
                 actionName: this._getAjaxActionName(),
                 parameters: {
                     data: {
-                        userID: this._userId
-                    }
-                }
+                        userID: this._userId,
+                    },
+                },
             });
-        },
+        }
         /**
          * Updates the button state and label.
          *
          * @protected
          */
-        _updateButton: function () {
+        _updateButton() {
             this._button.textContent = this._getLabel();
-            this._listItem.classList[(this._isActive ? 'add' : 'remove')]('active');
-        },
+            if (this._isActive) {
+                this._listItem.classList.add("active");
+            }
+            else {
+                this._listItem.classList.remove("active");
+            }
+        }
         /**
          * Returns the button label.
-         *
-         * @return      {string}        button label
-         * @protected
-         * @abstract
          */
-        _getLabel: function () {
+        _getLabel() {
+            // This should be an abstract method, but cannot be marked as such for backwards compatibility.
             throw new Error("Implement me!");
-        },
+        }
         /**
          * Returns the Ajax action name.
-         *
-         * @return      {string}        ajax action name
-         * @protected
-         * @abstract
          */
-        _getAjaxActionName: function () {
+        _getAjaxActionName() {
+            // This should be an abstract method, but cannot be marked as such for backwards compatibility.
             throw new Error("Implement me!");
-        },
+        }
         /**
          * Handles successful Ajax requests.
-         *
-         * @protected
-         * @abstract
          */
-        _ajaxSuccess: function () {
+        _ajaxSuccess() {
+            // This should be an abstract method, but cannot be marked as such for backwards compatibility.
             throw new Error("Implement me!");
-        },
+        }
         /**
          * Returns the default Ajax request data
-         *
-         * @return      {Object}        ajax request data
-         * @protected
-         * @abstract
          */
-        _ajaxSetup: function () {
+        _ajaxSetup() {
+            // This should be an abstract method, but cannot be marked as such for backwards compatibility.
             throw new Error("Implement me!");
         }
-    };
+    }
     return UiUserProfileMenuItemAbstract;
 });
diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/User/Profile/Menu/Item/Abstract.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/User/Profile/Menu/Item/Abstract.js
deleted file mode 100644 (file)
index 2249fa1..0000000
+++ /dev/null
@@ -1,129 +0,0 @@
-/**
- * Default implementation for user interaction menu items used in the user profile.
- * 
- * @author     Alexander Ebert
- * @copyright  2001-2019 WoltLab GmbH
- * @license    GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
- * @module     WoltLabSuite/Core/Ui/User/Profile/Menu/Item/Abstract
- */
-define(['Ajax', 'Dom/Util'], function(Ajax, DomUtil) {
-       "use strict";
-       
-       /**
-        * Creates a new user profile menu item.
-        * 
-        * @param       {int}           userId          user id
-        * @param       {boolean}       isActive        true if item is initially active
-        * @constructor
-        */
-       function UiUserProfileMenuItemAbstract(userId, isActive) {}
-       UiUserProfileMenuItemAbstract.prototype = {
-               /**
-                * Creates a new user profile menu item.
-                * 
-                * @param       {int}           userId          user id
-                * @param       {boolean}       isActive        true if item is initially active
-                */
-               init: function(userId, isActive) {
-                       this._userId = userId;
-                       this._isActive = (isActive !== false);
-                       
-                       this._initButton();
-                       this._updateButton();
-               },
-               
-               /**
-                * Initializes the menu item.
-                * 
-                * @protected
-                */
-               _initButton: function() {
-                       var button = elCreate('a');
-                       button.href = '#';
-                       button.addEventListener('click', this._toggle.bind(this));
-                       
-                       var listItem = elCreate('li');
-                       listItem.appendChild(button);
-                       
-                       var menu = elBySel('.userProfileButtonMenu[data-menu="interaction"]');
-                       DomUtil.prepend(listItem, menu);
-                       
-                       this._button = button;
-                       this._listItem = listItem;
-               },
-               
-               /**
-                * Handles clicks on the menu item button.
-                * 
-                * @param       {Event}         event   event object
-                * @protected
-                */
-               _toggle: function(event) {
-                       event.preventDefault();
-                       
-                       Ajax.api(this, {
-                               actionName: this._getAjaxActionName(),
-                               parameters: {
-                                       data: {
-                                               userID: this._userId
-                                       }
-                               }
-                       });
-               },
-               
-               /**
-                * Updates the button state and label.
-                * 
-                * @protected
-                */
-               _updateButton: function() {
-                       this._button.textContent = this._getLabel();
-                       this._listItem.classList[(this._isActive ? 'add' : 'remove')]('active');
-               },
-               
-               /**
-                * Returns the button label.
-                * 
-                * @return      {string}        button label
-                * @protected
-                * @abstract
-                */
-               _getLabel: function() {
-                       throw new Error("Implement me!");
-               },
-               
-               /**
-                * Returns the Ajax action name.
-                * 
-                * @return      {string}        ajax action name
-                * @protected
-                * @abstract
-                */
-               _getAjaxActionName: function() {
-                       throw new Error("Implement me!");
-               },
-               
-               /**
-                * Handles successful Ajax requests.
-                * 
-                * @protected
-                * @abstract
-                */
-               _ajaxSuccess: function() {
-                       throw new Error("Implement me!");
-               },
-               
-               /**
-                * Returns the default Ajax request data
-                * 
-                * @return      {Object}        ajax request data
-                * @protected
-                * @abstract
-                */
-               _ajaxSetup: function() {
-                       throw new Error("Implement me!");
-               }
-       };
-       
-       return UiUserProfileMenuItemAbstract;
-});
diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/User/Profile/Menu/Item/Abstract.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/User/Profile/Menu/Item/Abstract.ts
new file mode 100644 (file)
index 0000000..311c89e
--- /dev/null
@@ -0,0 +1,109 @@
+/**
+ * Default implementation for user interaction menu items used in the user profile.
+ *
+ * @author  Alexander Ebert
+ * @copyright  2001-2019 WoltLab GmbH
+ * @license  GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module  WoltLabSuite/Core/Ui/User/Profile/Menu/Item/Abstract
+ */
+
+import * as Ajax from "../../../../../Ajax";
+import { AjaxCallbackObject, RequestOptions } from "../../../../../Ajax/Data";
+
+abstract class UiUserProfileMenuItemAbstract implements AjaxCallbackObject {
+  readonly _button = document.createElement("a");
+  readonly _isActive: boolean;
+  readonly _listItem = document.createElement("li");
+  readonly _userId: number;
+
+  /**
+   * Creates a new user profile menu item.
+   */
+  protected constructor(userId: number, isActive: boolean) {
+    this._userId = userId;
+    this._isActive = isActive;
+
+    this._initButton();
+    this._updateButton();
+  }
+
+  /**
+   * Initializes the menu item.
+   */
+  protected _initButton(): void {
+    this._button.href = "#";
+    this._button.addEventListener("click", (ev) => this._toggle(ev));
+    this._listItem.appendChild(this._button);
+
+    const menu = document.querySelector(`.userProfileButtonMenu[data-menu="interaction"]`) as HTMLElement;
+    menu.insertAdjacentElement("afterbegin", this._listItem);
+  }
+
+  /**
+   * Handles clicks on the menu item button.
+   */
+  protected _toggle(event: MouseEvent): void {
+    event.preventDefault();
+
+    Ajax.api(this, {
+      actionName: this._getAjaxActionName(),
+      parameters: {
+        data: {
+          userID: this._userId,
+        },
+      },
+    });
+  }
+
+  /**
+   * Updates the button state and label.
+   *
+   * @protected
+   */
+  protected _updateButton(): void {
+    this._button.textContent = this._getLabel();
+    if (this._isActive) {
+      this._listItem.classList.add("active");
+    } else {
+      this._listItem.classList.remove("active");
+    }
+  }
+
+  /**
+   * Returns the button label.
+   */
+  protected _getLabel(): string {
+    // This should be an abstract method, but cannot be marked as such for backwards compatibility.
+
+    throw new Error("Implement me!");
+  }
+
+  /**
+   * Returns the Ajax action name.
+   */
+  protected _getAjaxActionName(): string {
+    // This should be an abstract method, but cannot be marked as such for backwards compatibility.
+
+    throw new Error("Implement me!");
+  }
+
+  /**
+   * Handles successful Ajax requests.
+   */
+  _ajaxSuccess(): void {
+    // This should be an abstract method, but cannot be marked as such for backwards compatibility.
+
+    throw new Error("Implement me!");
+  }
+
+  /**
+   * Returns the default Ajax request data
+   */
+  _ajaxSetup(): RequestOptions {
+    // This should be an abstract method, but cannot be marked as such for backwards compatibility.
+
+    throw new Error("Implement me!");
+  }
+}
+
+export = UiUserProfileMenuItemAbstract;