From 9b5eb68d9bdbb431321e161806e0fb0a4021ee92 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Sat, 31 Oct 2020 00:36:34 +0100 Subject: [PATCH] Convert `Ui/User/CoverPhoto/Upload` to TypeScript --- .../Core/Ui/User/CoverPhoto/Upload.js | 57 ++++++++-------- .../Core/Ui/User/CoverPhoto/Upload.js | 54 --------------- .../Core/Ui/User/CoverPhoto/Upload.ts | 66 +++++++++++++++++++ 3 files changed, 96 insertions(+), 81 deletions(-) delete mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/User/CoverPhoto/Upload.js create mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/User/CoverPhoto/Upload.ts 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 bef06628a0..f45a3102a8 100644 --- 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 - * @module WoltLabSuite/Core/Ui/User/CoverPhoto/Upload + * @author Alexander Ebert + * @copyright 2001-2019 WoltLab GmbH + * @license GNU Lesser General Public License + * @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 index 0902150ba3..0000000000 --- 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 - * @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 index 0000000000..0ded73835b --- /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 + * @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; -- 2.20.1