From 2d0b60a4bac9556007b09d272c0c29b30ff16977 Mon Sep 17 00:00:00 2001 From: Matthias Schmidt Date: Tue, 5 Jan 2021 18:40:49 +0100 Subject: [PATCH] Convert `Media/Replace` to TypeScript --- .../js/WoltLabSuite/Core/Media/Replace.js | 129 ++++++---------- .../ts/WoltLabSuite/Core/Media/Replace.js | 138 ------------------ .../ts/WoltLabSuite/Core/Media/Replace.ts | 99 +++++++++++++ 3 files changed, 146 insertions(+), 220 deletions(-) delete mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Replace.js create mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Replace.ts diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Replace.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Replace.js index 28e5d05101..b10598c288 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Replace.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Replace.js @@ -1,110 +1,75 @@ /** * Uploads replacemnts for media files. * - * @author Matthias Schmidt - * @copyright 2001-2020 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Media/Upload - * @since 5.3 + * @author Matthias Schmidt + * @copyright 2001-2021 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Media/Replace + * @since 5.3 */ -define([ - 'Core', - 'Dom/ChangeListener', - 'Dom/Util', - 'Language', - 'Ui/Notification', - './Upload' -], function (Core, DomChangeListener, DomUtil, Language, UiNotification, MediaUpload) { +define(["require", "exports", "tslib", "../Core", "./Upload", "../Language", "../Dom/Util", "../Ui/Notification", "../Dom/Change/Listener"], function (require, exports, tslib_1, Core, Upload_1, Language, Util_1, UiNotification, DomChangeListener) { "use strict"; - if (!COMPILER_TARGET_DEFAULT) { - var Fake = function () { }; - Fake.prototype = { - _createButton: function () { }, - _success: function () { }, - _upload: function () { }, - _createFileElement: function () { }, - _getParameters: function () { }, - _uploadFiles: function () { }, - _createFileElements: function () { }, - _failure: function () { }, - _insertButton: function () { }, - _progress: function () { }, - _removeButton: function () { } - }; - return Fake; - } - /** - * @constructor - */ - function MediaReplace(mediaID, buttonContainerId, targetId, options) { - this._mediaID = mediaID; - MediaUpload.call(this, buttonContainerId, targetId, Core.extend(options, { - action: 'replaceFile' - })); - } - Core.inherit(MediaReplace, MediaUpload, { - /** - * @see WoltLabSuite/Core/Upload#_createButton - */ - _createButton: function () { - MediaUpload.prototype._createButton.call(this); - this._button.classList.add('small'); - var span = elBySel('span', this._button); - span.textContent = Language.get('wcf.media.button.replaceFile'); - }, - /** - * @see WoltLabSuite/Core/Upload#_createFileElement - */ - _createFileElement: function () { + Core = tslib_1.__importStar(Core); + Upload_1 = tslib_1.__importDefault(Upload_1); + Language = tslib_1.__importStar(Language); + Util_1 = tslib_1.__importDefault(Util_1); + UiNotification = tslib_1.__importStar(UiNotification); + DomChangeListener = tslib_1.__importStar(DomChangeListener); + class MediaReplace extends Upload_1.default { + constructor(mediaID, buttonContainerId, targetId, options) { + super(buttonContainerId, targetId, Core.extend(options, { + action: "replaceFile", + })); + this._mediaID = mediaID; + } + _createButton() { + super._createButton(); + this._button.classList.add("small"); + this._button.querySelector("span").textContent = Language.get("wcf.media.button.replaceFile"); + } + _createFileElement() { return this._target; - }, - /** - * @see WoltLabSuite/Core/Upload#_getFormData - */ - _getFormData: function () { + } + _getFormData() { return { - objectIDs: [this._mediaID] + objectIDs: [this._mediaID], }; - }, - /** - * @see WoltLabSuite/Core/Upload#_success - */ - _success: function (uploadId, data) { - var files = this._fileElements[uploadId]; - for (var i = 0, length = files.length; i < length; i++) { - var file = files[i]; - var internalFileId = elData(file, 'internal-file-id'); - var media = data.returnValues.media[internalFileId]; + } + _success(uploadId, data) { + this._fileElements[uploadId].forEach((file) => { + const internalFileId = file.dataset.internalFileId; + const media = data.returnValues.media[internalFileId]; if (media) { if (media.isImage) { this._target.innerHTML = media.smallThumbnailTag; } - elById('mediaFilename').textContent = media.filename; - elById('mediaFilesize').textContent = media.formattedFilesize; + document.getElementById("mediaFilename").textContent = media.filename; + document.getElementById("mediaFilesize").textContent = media.formattedFilesize; if (media.isImage) { - elById('mediaImageDimensions').textContent = media.imageDimensions; + document.getElementById("mediaImageDimensions").textContent = media.imageDimensions; } - elById('mediaUploader').innerHTML = media.userLinkElement; + document.getElementById("mediaUploader").innerHTML = media.userLinkElement; this._options.mediaEditor.updateData(media); // Remove existing error messages. - elInnerError(this._buttonContainer, ''); + Util_1.default.innerError(this._buttonContainer, ""); UiNotification.show(); } else { - var error = data.returnValues.errors[internalFileId]; + let error = data.returnValues.errors[internalFileId]; if (!error) { error = { - errorType: 'uploadFailed', - filename: elData(file, 'filename') + errorType: "uploadFailed", + filename: file.dataset.filename, }; } - elInnerError(this._buttonContainer, Language.get('wcf.media.upload.error.' + error.errorType, { - filename: error.filename + Util_1.default.innerError(this._buttonContainer, Language.get("wcf.media.upload.error." + error.errorType, { + filename: error.filename, })); } DomChangeListener.trigger(); - } - }, - }); + }); + } + } + Core.enableLegacyInheritance(MediaReplace); return MediaReplace; }); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Replace.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Replace.js deleted file mode 100644 index c77c8c152d..0000000000 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Replace.js +++ /dev/null @@ -1,138 +0,0 @@ -/** - * Uploads replacemnts for media files. - * - * @author Matthias Schmidt - * @copyright 2001-2020 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Media/Upload - * @since 5.3 - */ -define( - [ - 'Core', - 'Dom/ChangeListener', - 'Dom/Util', - 'Language', - 'Ui/Notification', - './Upload' - ], - function( - Core, - DomChangeListener, - DomUtil, - Language, - UiNotification, - MediaUpload - ) - { - "use strict"; - - if (!COMPILER_TARGET_DEFAULT) { - var Fake = function() {}; - Fake.prototype = { - _createButton: function() {}, - _success: function() {}, - _upload: function() {}, - _createFileElement: function() {}, - _getParameters: function() {}, - _uploadFiles: function() {}, - _createFileElements: function() {}, - _failure: function() {}, - _insertButton: function() {}, - _progress: function() {}, - _removeButton: function() {} - }; - return Fake; - } - - /** - * @constructor - */ - function MediaReplace(mediaID, buttonContainerId, targetId, options) { - this._mediaID = mediaID; - - MediaUpload.call(this, buttonContainerId, targetId, Core.extend(options, { - action: 'replaceFile' - })); - } - Core.inherit(MediaReplace, MediaUpload, { - /** - * @see WoltLabSuite/Core/Upload#_createButton - */ - _createButton: function() { - MediaUpload.prototype._createButton.call(this); - - this._button.classList.add('small'); - - var span = elBySel('span', this._button); - span.textContent = Language.get('wcf.media.button.replaceFile'); - }, - - /** - * @see WoltLabSuite/Core/Upload#_createFileElement - */ - _createFileElement: function() { - return this._target; - }, - - /** - * @see WoltLabSuite/Core/Upload#_getFormData - */ - _getFormData: function() { - return { - objectIDs: [this._mediaID] - }; - }, - - /** - * @see WoltLabSuite/Core/Upload#_success - */ - _success: function(uploadId, data) { - var files = this._fileElements[uploadId]; - - for (var i = 0, length = files.length; i < length; i++) { - var file = files[i]; - var internalFileId = elData(file, 'internal-file-id'); - var media = data.returnValues.media[internalFileId]; - - if (media) { - if (media.isImage) { - this._target.innerHTML = media.smallThumbnailTag; - } - - elById('mediaFilename').textContent = media.filename; - elById('mediaFilesize').textContent = media.formattedFilesize; - if (media.isImage) { - elById('mediaImageDimensions').textContent = media.imageDimensions; - } - elById('mediaUploader').innerHTML = media.userLinkElement; - - this._options.mediaEditor.updateData(media); - - // Remove existing error messages. - elInnerError(this._buttonContainer, ''); - - UiNotification.show(); - } - else { - var error = data.returnValues.errors[internalFileId]; - if (!error) { - error = { - errorType: 'uploadFailed', - filename: elData(file, 'filename') - }; - } - - elInnerError(this._buttonContainer, Language.get('wcf.media.upload.error.' + error.errorType, { - filename: error.filename - })); - } - - DomChangeListener.trigger(); - } - }, - }); - - return MediaReplace; - } -); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Replace.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Replace.ts new file mode 100644 index 0000000000..17ad8fcf4c --- /dev/null +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Replace.ts @@ -0,0 +1,99 @@ +/** + * Uploads replacemnts for media files. + * + * @author Matthias Schmidt + * @copyright 2001-2021 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Media/Replace + * @since 5.3 + */ + +import * as Core from "../Core"; +import { MediaUploadAjaxResponseData, MediaUploadError, MediaUploadOptions } from "./Data"; +import MediaUpload from "./Upload"; +import * as Language from "../Language"; +import DomUtil from "../Dom/Util"; +import * as UiNotification from "../Ui/Notification"; +import * as DomChangeListener from "../Dom/Change/Listener"; + +class MediaReplace extends MediaUpload { + protected readonly _mediaID: number; + + constructor(mediaID: number, buttonContainerId: string, targetId: string, options: Partial) { + super( + buttonContainerId, + targetId, + Core.extend(options, { + action: "replaceFile", + }), + ); + + this._mediaID = mediaID; + } + + protected _createButton(): void { + super._createButton(); + + this._button.classList.add("small"); + + this._button.querySelector("span")!.textContent = Language.get("wcf.media.button.replaceFile"); + } + + protected _createFileElement(): HTMLElement { + return this._target; + } + + protected _getFormData(): ArbitraryObject { + return { + objectIDs: [this._mediaID], + }; + } + + protected _success(uploadId: number, data: MediaUploadAjaxResponseData): void { + this._fileElements[uploadId].forEach((file) => { + const internalFileId = file.dataset.internalFileId!; + const media = data.returnValues.media[internalFileId]; + + if (media) { + if (media.isImage) { + this._target.innerHTML = media.smallThumbnailTag; + } + + document.getElementById("mediaFilename")!.textContent = media.filename; + document.getElementById("mediaFilesize")!.textContent = media.formattedFilesize; + if (media.isImage) { + document.getElementById("mediaImageDimensions")!.textContent = media.imageDimensions; + } + document.getElementById("mediaUploader")!.innerHTML = media.userLinkElement; + + this._options.mediaEditor!.updateData(media); + + // Remove existing error messages. + DomUtil.innerError(this._buttonContainer, ""); + + UiNotification.show(); + } else { + let error: MediaUploadError = data.returnValues.errors[internalFileId]; + if (!error) { + error = { + errorType: "uploadFailed", + filename: file.dataset.filename!, + }; + } + + DomUtil.innerError( + this._buttonContainer, + Language.get("wcf.media.upload.error." + error.errorType, { + filename: error.filename, + }), + ); + } + + DomChangeListener.trigger(); + }); + } +} + +Core.enableLegacyInheritance(MediaReplace); + +export = MediaReplace; -- 2.20.1