Convert `Ui/User/CoverPhoto/Upload` to TypeScript

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/CoverPhoto/Upload.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/CoverPhoto/Upload.js
index bef06628a0464c6614401a4b238a243a3670d2fa..f45a3102a84348f7f9575750540f00598ee4ea46 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/CoverPhoto/Upload.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/CoverPhoto/Upload.js
@@ -1,46 +1,49 @@
 /**
  * Uploads the user cover photo via AJAX.
  *
- * @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/CoverPhoto/Upload
+ * @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/CoverPhoto/Upload
  */
-define(['Core', 'EventHandler', 'Upload', 'Ui/Notification', 'Ui/Dialog'], function (Core, EventHandler, Upload, UiNotification, UiDialog) {
+define(["require", "exports", "tslib", "../../../Dom/Util", "../../../Event/Handler", "../../Dialog", "../../Notification", "../../../Upload"], function (require, exports, tslib_1, Util_1, EventHandler, UiDialog, UiNotification, Upload_1) {
     "use strict";
+    Util_1 = tslib_1.__importDefault(Util_1);
+    EventHandler = tslib_1.__importStar(EventHandler);
+    UiDialog = tslib_1.__importStar(UiDialog);
+    UiNotification = tslib_1.__importStar(UiNotification);
+    Upload_1 = tslib_1.__importDefault(Upload_1);
     /**
      * @constructor
      */
-    function UiUserCoverPhotoUpload(userId) {
-        Upload.call(this, 'coverPhotoUploadButtonContainer', 'coverPhotoUploadPreview', {
-            action: 'uploadCoverPhoto',
-            className: 'wcf\\data\\user\\UserProfileAction'
-        });
-        this._userId = userId;
-    }
-    Core.inherit(UiUserCoverPhotoUpload, Upload, {
-        _getParameters: function () {
+    class UiUserCoverPhotoUpload extends Upload_1.default {
+        constructor(userId) {
+            super("coverPhotoUploadButtonContainer", "coverPhotoUploadPreview", {
+                action: "uploadCoverPhoto",
+                className: "wcf\\data\\user\\UserProfileAction",
+            });
+            this.userId = userId;
+        }
+        _getParameters() {
             return {
-                userID: this._userId
+                userID: this.userId,
             };
-        },
-        /**
-         * @see        WoltLabSuite/Core/Upload#_success
-         */
-        _success: function (uploadId, data) {
+        }
+        _success(uploadId, data) {
             // remove or display the error message
-            elInnerError(this._button, data.returnValues.errorMessage);
+            Util_1.default.innerError(this._button, data.returnValues.errorMessage);
             // remove the upload progress
-            this._target.innerHTML = '';
+            this._target.innerHTML = "";
             if (data.returnValues.url) {
-                elBySel('.userProfileCoverPhoto').style.setProperty('background-image', 'url(' + data.returnValues.url + ')', '');
-                UiDialog.close('userProfileCoverPhotoUpload');
+                const photo = document.querySelector(".userProfileCoverPhoto");
+                photo.style.setProperty("background-image", `url(${data.returnValues.url})`, "");
+                UiDialog.close("userProfileCoverPhotoUpload");
                 UiNotification.show();
-                EventHandler.fire('com.woltlab.wcf.user', 'coverPhoto', {
-                    url: data.returnValues.url
+                EventHandler.fire("com.woltlab.wcf.user", "coverPhoto", {
+                    url: data.returnValues.url,
                 });
             }
         }
-    });
+    }
     return UiUserCoverPhotoUpload;
 });

diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/User/CoverPhoto/Upload.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/User/CoverPhoto/Upload.js
deleted file mode 100644 (file)
index 0902150..0000000
--- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/User/CoverPhoto/Upload.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * Uploads the user cover photo via AJAX.
- * 
- * @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/CoverPhoto/Upload
- */
-define(['Core', 'EventHandler', 'Upload', 'Ui/Notification', 'Ui/Dialog'], function(Core, EventHandler, Upload, UiNotification, UiDialog) {
-       "use strict";
-       
-       /**
-        * @constructor
-        */
-       function UiUserCoverPhotoUpload(userId) {
-               Upload.call(this, 'coverPhotoUploadButtonContainer', 'coverPhotoUploadPreview', {
-                       action: 'uploadCoverPhoto',
-                       className: 'wcf\\data\\user\\UserProfileAction'
-               });
-               
-               this._userId = userId;
-       }
-       Core.inherit(UiUserCoverPhotoUpload, Upload, {
-               _getParameters: function() {
-                       return {
-                               userID: this._userId
-                       };
-               },
-               
-               /**
-                * @see WoltLabSuite/Core/Upload#_success
-                */
-               _success: function(uploadId, data) {
-                       // remove or display the error message
-                       elInnerError(this._button, data.returnValues.errorMessage);
-                       
-                       // remove the upload progress
-                       this._target.innerHTML = '';
-                       
-                       if (data.returnValues.url) {
-                               elBySel('.userProfileCoverPhoto').style.setProperty('background-image', 'url(' + data.returnValues.url + ')', '');
-                               
-                               UiDialog.close('userProfileCoverPhotoUpload');
-                               UiNotification.show();
-                               
-                               EventHandler.fire('com.woltlab.wcf.user', 'coverPhoto', {
-                                       url: data.returnValues.url
-                               });
-                       }
-               }
-       });
-       
-       return UiUserCoverPhotoUpload;
-});

diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/User/CoverPhoto/Upload.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/User/CoverPhoto/Upload.ts
new file mode 100644 (file)
index 0000000..0ded738
--- /dev/null
+++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/User/CoverPhoto/Upload.ts
@@ -0,0 +1,66 @@
+/**
+ * Uploads the user cover photo via AJAX.
+ *
+ * @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/CoverPhoto/Upload
+ */
+
+import DomUtil from "../../../Dom/Util";
+import * as EventHandler from "../../../Event/Handler";
+import { ResponseData } from "../../../Ajax/Data";
+import * as UiDialog from "../../Dialog";
+import * as UiNotification from "../../Notification";
+import Upload from "../../../Upload";
+
+interface AjaxResponse extends ResponseData {
+  returnValues: {
+    errorMessage?: string;
+    url?: string;
+  };
+}
+
+/**
+ * @constructor
+ */
+class UiUserCoverPhotoUpload extends Upload {
+  private readonly userId: number;
+
+  constructor(userId: number) {
+    super("coverPhotoUploadButtonContainer", "coverPhotoUploadPreview", {
+      action: "uploadCoverPhoto",
+      className: "wcf\\data\\user\\UserProfileAction",
+    });
+
+    this.userId = userId;
+  }
+
+  protected _getParameters(): object {
+    return {
+      userID: this.userId,
+    };
+  }
+
+  protected _success(uploadId: number, data: AjaxResponse): void {
+    // remove or display the error message
+    DomUtil.innerError(this._button, data.returnValues.errorMessage);
+
+    // remove the upload progress
+    this._target.innerHTML = "";
+
+    if (data.returnValues.url) {
+      const photo = document.querySelector(".userProfileCoverPhoto") as HTMLElement;
+      photo.style.setProperty("background-image", `url(${data.returnValues.url})`, "");
+
+      UiDialog.close("userProfileCoverPhotoUpload");
+      UiNotification.show();
+
+      EventHandler.fire("com.woltlab.wcf.user", "coverPhoto", {
+        url: data.returnValues.url,
+      });
+    }
+  }
+}
+
+export = UiUserCoverPhotoUpload;