From fbb238d96af6b0a8e27b8b66c8d1fad64d9475aa Mon Sep 17 00:00:00 2001 From: Matthias Schmidt Date: Fri, 8 Jan 2021 10:26:58 +0100 Subject: [PATCH] Apply suggestions from code review --- .../Core/Controller/Media/List.js | 8 +-- .../files/js/WoltLabSuite/Core/FileUtil.js | 5 +- .../js/WoltLabSuite/Core/Media/Editor.js | 58 +++++----------- .../WoltLabSuite/Core/Media/Manager/Base.js | 27 ++++---- .../WoltLabSuite/Core/Media/Manager/Editor.js | 30 ++++---- .../WoltLabSuite/Core/Media/Manager/Search.js | 11 +-- .../WoltLabSuite/Core/Media/Manager/Select.js | 11 +-- .../js/WoltLabSuite/Core/Media/Upload.js | 27 +++----- .../Core/Controller/Media/List.ts | 14 ++-- .../files/ts/WoltLabSuite/Core/FileUtil.ts | 6 +- .../ts/WoltLabSuite/Core/Media/Clipboard.ts | 6 +- .../ts/WoltLabSuite/Core/Media/Editor.ts | 69 +++++++------------ .../WoltLabSuite/Core/Media/Manager/Base.ts | 43 ++++++------ .../WoltLabSuite/Core/Media/Manager/Editor.ts | 36 ++++------ .../WoltLabSuite/Core/Media/Manager/Search.ts | 13 ++-- .../WoltLabSuite/Core/Media/Manager/Select.ts | 17 ++--- .../ts/WoltLabSuite/Core/Media/Upload.ts | 26 +++---- 17 files changed, 168 insertions(+), 239 deletions(-) diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/Media/List.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/Media/List.js index ce8f99d493..bf235265bd 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/Media/List.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/Media/List.js @@ -40,7 +40,7 @@ define(["require", "exports", "tslib", "../../Media/List/Upload", "../../Media/C EventHandler.add("com.woltlab.wcf.media.upload", "removedErroneousUploadRow", () => deleteCallback()); // eslint-disable-next-line //@ts-ignore - var deleteAction = new WCF.Action.Delete("wcf\\data\\media\\MediaAction", ".jsMediaRow"); + const deleteAction = new WCF.Action.Delete("wcf\\data\\media\\MediaAction", ".jsMediaRow"); deleteAction.setCallback(deleteCallback); addButtonEventListeners(); DomChangeListener.add("WoltLabSuite/Core/Controller/Media/List", () => addButtonEventListeners()); @@ -60,7 +60,7 @@ define(["require", "exports", "tslib", "../../Media/List/Upload", "../../Media/C * Is triggered after media files have been deleted using the delete icon. */ function deleteCallback(objectIds) { - var tableRowCount = _tableBody.getElementsByTagName("tr").length; + const tableRowCount = _tableBody.getElementsByTagName("tr").length; if (objectIds === undefined) { if (!tableRowCount) { window.location.reload(); @@ -71,7 +71,7 @@ define(["require", "exports", "tslib", "../../Media/List/Upload", "../../Media/C window.location.reload(); } else { - Clipboard.reload.bind(Clipboard); + Clipboard.reload(); } } /** @@ -85,7 +85,7 @@ define(["require", "exports", "tslib", "../../Media/List/Upload", "../../Media/C */ function openEditorAfterUpload(data) { if (data.upload === _upload && !data.isMultiFileUpload && !_upload.hasPendingUploads()) { - var keys = Object.keys(data.media); + const keys = Object.keys(data.media); if (keys.length) { _mediaEditor.edit(data.media[keys[0]]); } diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/FileUtil.js b/wcfsetup/install/files/js/WoltLabSuite/Core/FileUtil.js index 1a10aea5d0..ea0845f22a 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/FileUtil.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/FileUtil.js @@ -110,10 +110,7 @@ define(["require", "exports", "tslib", "./StringUtil"], function (require, expor /** * Formats the given filesize. */ - function formatFilesize(byte, precision) { - if (precision === undefined) { - precision = 2; - } + function formatFilesize(byte, precision = 2) { let symbol = "Byte"; if (byte >= 1000) { byte /= 1000; diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Editor.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Editor.js index 7e79945d19..2503fcbd75 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Editor.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Editor.js @@ -67,9 +67,7 @@ define(["require", "exports", "tslib", "../Core", "../Ui/Notification", "../Ui/D */ _initEditor(content, data) { this._availableLanguageCount = ~~data.returnValues.availableLanguageCount; - this._categoryIds = data.returnValues.categoryIDs.map(function (number) { - return ~~number; - }); + this._categoryIds = data.returnValues.categoryIDs.map((number) => number); if (data.returnValues.mediaData) { this._media = data.returnValues.mediaData; } @@ -80,7 +78,12 @@ define(["require", "exports", "tslib", "../Core", "../Ui/Notification", "../Ui/D } if (this._categoryIds.length) { const categoryID = content.querySelector("select[name=categoryID]"); - categoryID.value = this._media.categoryID; + if (this._media.categoryID) { + categoryID.value = this._media.categoryID.toString(); + } + else { + categoryID.value = "0"; + } } const title = content.querySelector("input[name=title]"); const altText = content.querySelector("input[name=altText]"); @@ -157,13 +160,9 @@ define(["require", "exports", "tslib", "../Core", "../Ui/Notification", "../Ui/D const captionEnableHtml = content.querySelector("input[name=captionEnableHtml]"); const title = content.querySelector("input[name=title]"); let hasError = false; - const altTextError = altText - ? DomTraverse.childByClass(altText.parentNode.parentNode, "innerError") - : false; - const captionError = caption - ? DomTraverse.childByClass(caption.parentNode.parentNode, "innerError") - : false; - const titleError = DomTraverse.childByClass(title.parentNode.parentNode, "innerError"); + const altTextError = altText ? DomTraverse.childByClass(altText.parentNode, "innerError") : false; + const captionError = caption ? DomTraverse.childByClass(caption.parentNode, "innerError") : false; + const titleError = DomTraverse.childByClass(title.parentNode, "innerError"); // category this._oldCategoryId = this._media.categoryID; if (this._categoryIds.length) { @@ -192,28 +191,19 @@ define(["require", "exports", "tslib", "../Core", "../Ui/Notification", "../Ui/D if (altText && !LanguageInput.validate(altText.id, true)) { hasError = true; if (!altTextError) { - const error = document.createElement("small"); - error.className = "innerError"; - error.textContent = Language.get("wcf.global.form.error.multilingual"); - altText.parentNode.parentNode.appendChild(error); + DomUtil.innerError(altText, Language.get("wcf.global.form.error.multilingual")); } } if (caption && !LanguageInput.validate(caption.id, true)) { hasError = true; if (!captionError) { - const error = document.createElement("small"); - error.className = "innerError"; - error.textContent = Language.get("wcf.global.form.error.multilingual"); - caption.parentNode.parentNode.appendChild(error); + DomUtil.innerError(caption, Language.get("wcf.global.form.error.multilingual")); } } if (!LanguageInput.validate(title.id, true)) { hasError = true; if (!titleError) { - const error = document.createElement("small"); - error.className = "innerError"; - error.textContent = Language.get("wcf.global.form.error.multilingual"); - title.parentNode.parentNode.appendChild(error); + DomUtil.innerError(title, Language.get("wcf.global.form.error.multilingual")); } } this._media.altText = altText ? this.mapToI18nValues(LanguageInput.getValues(altText.id)) : ""; @@ -235,19 +225,9 @@ define(["require", "exports", "tslib", "../Core", "../Ui/Notification", "../Ui/D const aclValues = { allowAll: ~~document.getElementById(`mediaEditor_${this._media.mediaID}_aclAllowAll`) .checked, - group: [], - user: [], + group: Array.from(content.querySelectorAll(`input[name="mediaEditor_${this._media.mediaID}_aclValues[group][]"]`)).map((aclGroup) => ~~aclGroup.value), + user: Array.from(content.querySelectorAll(`input[name="mediaEditor_${this._media.mediaID}_aclValues[user][]"]`)).map((aclUser) => ~~aclUser.value), }; - content - .querySelectorAll(`input[name="mediaEditor_${this._media.mediaID}_aclValues[group][]"]`) - .forEach((aclGroup) => { - aclValues.group.push(~~aclGroup.value); - }); - content - .querySelectorAll(`input[name="mediaEditor_${this._media.mediaID}_aclValues[user][]"]`) - .forEach((aclUser) => { - aclValues.user.push(~~aclUser.value); - }); if (!hasError) { if (altTextError) { altTextError.remove(); @@ -299,7 +279,7 @@ define(["require", "exports", "tslib", "../Core", "../Ui/Notification", "../Ui/D if (document.getElementById(`altText_${mediaId}`)) { LanguageInput.enable(`altText_${mediaId}`); } - languageChooserContainer.style.display = "none"; + DomUtil.hide(languageChooserContainer); } else { LanguageInput.disable(`title_${mediaId}`); @@ -309,7 +289,7 @@ define(["require", "exports", "tslib", "../Core", "../Ui/Notification", "../Ui/D if (document.getElementById(`altText_${mediaId}`)) { LanguageInput.disable(`altText_${mediaId}`); } - languageChooserContainer.style.display = "block"; + DomUtil.show(languageChooserContainer); } } /** @@ -339,11 +319,11 @@ define(["require", "exports", "tslib", "../Core", "../Ui/Notification", "../Ui/D id: `mediaEditor_${mediaId}`, options: { backdropCloseOnClick: false, - onClose: this._close.bind(this), + onClose: () => this._close(), title: Language.get("wcf.media.edit"), }, source: { - after: this._initEditor.bind(this), + after: (content, responseData) => this._initEditor(content, responseData), data: { actionName: "getEditorDialog", className: "wcf\\data\\media\\MediaAction", diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Base.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Base.js index 5e7e6dc359..b672d5adbe 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Base.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Base.js @@ -29,7 +29,6 @@ define(["require", "exports", "tslib", "../../Core", "../../Language", "../../Pe constructor(options) { this._forceClipboard = false; this._hadInitiallyMarkedItems = false; - this._id = `mediaManager${mediaManagerCounter++}`; this._listItems = new Map(); this._media = new Map(); this._mediaEditor = null; @@ -42,6 +41,7 @@ define(["require", "exports", "tslib", "../../Core", "../../Language", "../../Pe imagesOnly: false, minSearchLength: 3, }, options); + this._id = `mediaManager${mediaManagerCounter++}`; if (Permission.get("admin.content.cms.canManageMedia")) { this._mediaEditor = new Editor_1.default(this); } @@ -128,7 +128,7 @@ define(["require", "exports", "tslib", "../../Core", "../../Language", "../../Pe this._mediaManagerMediaList = dialog.querySelector(".mediaManagerMediaList"); this._mediaCategorySelect = dialog.querySelector(".mediaManagerCategoryList > select"); if (this._mediaCategorySelect) { - this._mediaCategorySelect.addEventListener("change", this._categoryChange.bind(this)); + this._mediaCategorySelect.addEventListener("change", () => this._categoryChange()); } // store list items locally const listItems = DomTraverse.childrenByTag(this._mediaManagerMediaList, "LI"); @@ -234,12 +234,12 @@ define(["require", "exports", "tslib", "../../Core", "../../Language", "../../Pe DomUtil.replaceElement(UiDialog.getDialog(this).content.querySelector(".jsPagination"), newPagination); this._pagination = new Pagination_1.default(newPagination, { activePage: pageNo, - callbackSwitch: this._search.search.bind(this._search), + callbackSwitch: (pageNo) => this._search.search(pageNo), maxPage: pageCount, }); } else if (this._pagination) { - this._pagination.getElement().style.display = "none"; + DomUtil.hide(this._pagination.getElement()); } } /** @@ -266,14 +266,11 @@ define(["require", "exports", "tslib", "../../Core", "../../Language", "../../Pe * Sets the displayed media (after a search). */ _setMedia(media) { - this._media = new Map(); - Object.entries(media).forEach(([mediaId, media]) => { - this._media.set(~~mediaId, media); - }); + this._media = new Map(Object.entries(media).map(([mediaId, media]) => [~~mediaId, media])); let info = DomTraverse.nextByClass(this._mediaManagerMediaList, "info"); if (this._media.size) { if (info) { - info.style.display = "none"; + DomUtil.hide(info); } } else { @@ -282,15 +279,15 @@ define(["require", "exports", "tslib", "../../Core", "../../Language", "../../Pe info.className = "info"; info.textContent = Language.get("wcf.media.search.noResults"); } - info.style.display = "block"; + DomUtil.show(info); DomUtil.insertAfter(info, this._mediaManagerMediaList); } DomTraverse.childrenByTag(this._mediaManagerMediaList, "LI").forEach((listItem) => { if (!this._media.has(~~listItem.dataset.objectId)) { - listItem.style.display = "none"; + DomUtil.hide(listItem); } else { - listItem.style.display = "block"; + DomUtil.show(listItem); } }); DomChangeListener.trigger(); @@ -414,12 +411,12 @@ define(["require", "exports", "tslib", "../../Core", "../../Language", "../../Pe const checkbox = document.createElement("input"); checkbox.className = "jsClipboardItem"; checkbox.type = "checkbox"; - checkbox.dataset.objectId = media.mediaID; + checkbox.dataset.objectId = media.mediaID.toString(); label.appendChild(checkbox); if (Permission.get("admin.content.cms.canManageMedia")) { const editButton = document.createElement("li"); editButton.className = "jsMediaEditButton"; - editButton.dataset.objectId = media.mediaID; + editButton.dataset.objectId = media.mediaID.toString(); buttons.appendChild(editButton); editButton.innerHTML = ` @@ -428,7 +425,7 @@ define(["require", "exports", "tslib", "../../Core", "../../Language", "../../Pe `; const deleteButton = document.createElement("li"); deleteButton.className = "jsDeleteButton"; - deleteButton.dataset.objectId = media.mediaID; + deleteButton.dataset.objectId = media.mediaID.toString(); // use temporary title to not unescape html in filename const uuid = Core.getUuid(); deleteButton.dataset.confirmMessageHtml = StringUtil.unescapeHTML(Language.get("wcf.media.delete.confirmMessage", { diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Editor.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Editor.js index 1f3bb5f1c7..d27c6b82d3 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Editor.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Editor.js @@ -6,7 +6,7 @@ * @license GNU Lesser General Public License * @module WoltLabSuite/Core/Media/Manager/Editor */ -define(["require", "exports", "tslib", "./Base", "../../Core", "../../Event/Handler", "../../Dom/Traverse", "../../Language", "../../Ui/Dialog", "../../Controller/Clipboard"], function (require, exports, tslib_1, Base_1, Core, EventHandler, DomTraverse, Language, UiDialog, Clipboard) { +define(["require", "exports", "tslib", "./Base", "../../Core", "../../Event/Handler", "../../Dom/Traverse", "../../Language", "../../Ui/Dialog", "../../Controller/Clipboard", "../../Dom/Util"], function (require, exports, tslib_1, Base_1, Core, EventHandler, DomTraverse, Language, UiDialog, Clipboard, Util_1) { "use strict"; Base_1 = tslib_1.__importDefault(Base_1); Core = tslib_1.__importStar(Core); @@ -15,6 +15,7 @@ define(["require", "exports", "tslib", "./Base", "../../Core", "../../Event/Hand Language = tslib_1.__importStar(Language); UiDialog = tslib_1.__importStar(UiDialog); Clipboard = tslib_1.__importStar(Clipboard); + Util_1 = tslib_1.__importDefault(Util_1); class MediaManagerEditor extends Base_1.default { constructor(options) { options = Core.extend({ @@ -89,10 +90,10 @@ define(["require", "exports", "tslib", "./Base", "../../Core", "../../Event/Hand return { id: this._getInsertDialogId(), options: { - onClose: this._editorClose.bind(this), + onClose: () => this._editorClose(), onSetup: (content) => { content.querySelector(".buttonPrimary").addEventListener("click", (ev) => this._insertMedia(ev)); - content.querySelector(".thumbnailSizeSelection").style.display = "block"; + Util_1.default.show(content.querySelector(".thumbnailSizeSelection")); }, title: Language.get("wcf.media.insert"), }, @@ -143,11 +144,8 @@ define(["require", "exports", "tslib", "./Base", "../../Core", "../../Event/Hand _getThumbnailSizes() { return ["small", "medium", "large"] .map((size) => { - let supportSize = true; - this._mediaToInsert.forEach(function (media) { - if (!media[size + "ThumbnailType"]) { - supportSize = false; - } + const supportSize = Array.from(this._mediaToInsert).every(([_mediaId, media]) => { + return media[size + "ThumbnailType"] !== null; }); if (supportSize) { return size; @@ -184,11 +182,7 @@ define(["require", "exports", "tslib", "./Base", "../../Core", "../../Event/Hand } } if (this._mediaToInsertByClipboard) { - const mediaIds = []; - this._mediaToInsert.forEach(function (media) { - mediaIds.push(~~media.mediaID); - }); - Clipboard.unmark("com.woltlab.wcf.media", mediaIds); + Clipboard.unmark("com.woltlab.wcf.media", Array.from(this._mediaToInsert.keys())); } this._mediaToInsert = new Map(); this._mediaToInsertByClipboard = false; @@ -270,14 +264,14 @@ define(["require", "exports", "tslib", "./Base", "../../Core", "../../Event/Hand this._mediaToInsert = new Map(); this._mediaToInsertByClipboard = insertedByClipboard || false; // open the insert dialog if all media files are images - let imagesOnly = true, media; - for (let i = 0, length = mediaIds.length; i < length; i++) { - media = this._media.get(mediaIds[i]); + let imagesOnly = true; + mediaIds.forEach((mediaId) => { + const media = this._media.get(mediaId); this._mediaToInsert.set(media.mediaID, media); if (!media.isImage) { imagesOnly = false; } - } + }); if (imagesOnly) { const thumbnailSizes = this._getThumbnailSizes(); if (thumbnailSizes.length) { @@ -307,7 +301,7 @@ define(["require", "exports", "tslib", "./Base", "../../Core", "../../Event/Hand const buttons = mediaElement.querySelector("nav.buttonGroupNavigation > ul"); const listItem = document.createElement("li"); listItem.className = "jsMediaInsertButton"; - listItem.dataset.objectId = media.mediaID; + listItem.dataset.objectId = media.mediaID.toString(); buttons.appendChild(listItem); listItem.innerHTML = ` diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Search.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Search.js index 66c323b3b2..0218cf887e 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Search.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Search.js @@ -6,12 +6,13 @@ * @license GNU Lesser General Public License * @module WoltLabSuite/Core/Media/Manager/Search */ -define(["require", "exports", "tslib", "../../Dom/Traverse", "../../Language", "../../Ajax", "../../Core"], function (require, exports, tslib_1, DomTraverse, Language, Ajax, Core) { +define(["require", "exports", "tslib", "../../Dom/Traverse", "../../Language", "../../Ajax", "../../Core", "../../Dom/Util"], function (require, exports, tslib_1, DomTraverse, Language, Ajax, Core, Util_1) { "use strict"; DomTraverse = tslib_1.__importStar(DomTraverse); Language = tslib_1.__importStar(Language); Ajax = tslib_1.__importStar(Ajax); Core = tslib_1.__importStar(Core); + Util_1 = tslib_1.__importDefault(Util_1); class MediaManagerSearch { constructor(mediaManager) { this._searchMode = false; @@ -55,7 +56,7 @@ define(["require", "exports", "tslib", "../../Dom/Traverse", "../../Language", " _hideStringThresholdError() { const innerInfo = DomTraverse.childByClass(this._input.parentNode.parentNode, "innerInfo"); if (innerInfo) { - innerInfo.style.display = "none"; + Util_1.default.hide(innerInfo); } } /** @@ -79,7 +80,7 @@ define(["require", "exports", "tslib", "../../Dom/Traverse", "../../Language", " _showStringThresholdError() { let innerInfo = DomTraverse.childByClass(this._input.parentNode.parentNode, "innerInfo"); if (innerInfo) { - innerInfo.style.display = "block"; + Util_1.default.show(innerInfo); } else { innerInfo = document.createElement("p"); @@ -94,7 +95,7 @@ define(["require", "exports", "tslib", "../../Dom/Traverse", "../../Language", " * Hides the media search. */ hideSearch() { - this._searchContainer.style.display = "none"; + Util_1.default.hide(this._searchContainer); } /** * Resets the media search. @@ -106,7 +107,7 @@ define(["require", "exports", "tslib", "../../Dom/Traverse", "../../Language", " * Shows the media search. */ showSearch() { - this._searchContainer.style.display = "block"; + Util_1.default.show(this._searchContainer); } /** * Sends an AJAX request to fetch search results. diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Select.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Select.js index ddb676de9e..3ed3ee95bc 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Select.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Select.js @@ -6,7 +6,7 @@ * @license GNU Lesser General Public License * @module WoltLabSuite/Core/Media/Manager/Select */ -define(["require", "exports", "tslib", "./Base", "../../Core", "../../Dom/Traverse", "../../FileUtil", "../../Language", "../../Ui/Dialog"], function (require, exports, tslib_1, Base_1, Core, DomTraverse, FileUtil, Language, UiDialog) { +define(["require", "exports", "tslib", "./Base", "../../Core", "../../Dom/Traverse", "../../FileUtil", "../../Language", "../../Ui/Dialog", "../../Dom/Util"], function (require, exports, tslib_1, Base_1, Core, DomTraverse, FileUtil, Language, UiDialog, Util_1) { "use strict"; Base_1 = tslib_1.__importDefault(Base_1); Core = tslib_1.__importStar(Core); @@ -14,6 +14,7 @@ define(["require", "exports", "tslib", "./Base", "../../Core", "../../Dom/Traver FileUtil = tslib_1.__importStar(FileUtil); Language = tslib_1.__importStar(Language); UiDialog = tslib_1.__importStar(UiDialog); + Util_1 = tslib_1.__importDefault(Util_1); class MediaManagerSelect extends Base_1.default { constructor(options) { super(options); @@ -26,7 +27,7 @@ define(["require", "exports", "tslib", "./Base", "../../Core", "../../Dom/Traver if (store) { const storeElement = document.getElementById(store); if (storeElement && storeElement.tagName === "INPUT") { - button.addEventListener("click", this._click.bind(this)); + button.addEventListener("click", (ev) => this._click(ev)); this._storeElements.set(button, storeElement); // add remove button const removeButton = document.createElement("p"); @@ -36,7 +37,7 @@ define(["require", "exports", "tslib", "./Base", "../../Core", "../../Dom/Traver icon.className = "icon icon16 fa-times"; removeButton.appendChild(icon); if (!storeElement.value) { - removeButton.style.display = "none"; + Util_1.default.hide(removeButton); } removeButton.addEventListener("click", (ev) => this._removeMedia(ev)); } @@ -66,7 +67,7 @@ define(["require", "exports", "tslib", "./Base", "../../Core", "../../Dom/Traver const media = this._media.get(~~target.dataset.objectId); // save selected media in store element const input = document.getElementById(this._activeButton.dataset.store); - input.value = media.mediaID; + input.value = media.mediaID.toString(); Core.triggerEvent(input, "change"); // display selected media const display = this._activeButton.dataset.display; @@ -124,7 +125,7 @@ define(["require", "exports", "tslib", "./Base", "../../Core", "../../Dom/Traver const buttons = mediaElement.querySelector("nav.buttonGroupNavigation > ul"); const listItem = document.createElement("li"); listItem.className = "jsMediaSelectButton"; - listItem.dataset.objectId = media.mediaID; + listItem.dataset.objectId = media.mediaID.toString(); buttons.appendChild(listItem); listItem.innerHTML = ' { if (cell.classList.contains("columnMark")) { - cell.querySelectorAll("[data-object-id]").forEach((el) => (el.style.display = "none")); + cell.querySelectorAll("[data-object-id]").forEach((el) => DomUtil.hide(el)); } else if (cell.classList.contains("columnIcon")) { - cell.querySelectorAll("[data-object-id]").forEach((el) => (el.style.display = "none")); + cell.querySelectorAll("[data-object-id]").forEach((el) => DomUtil.hide(el)); cell.querySelector(".mediaEditButton").classList.add("jsMediaEditButton"); cell.querySelector(".jsDeleteButton").dataset.confirmMessageHtml = Language.get("wcf.media.delete.confirmMessage", { title: file.name, @@ -170,10 +168,10 @@ define(["require", "exports", "tslib", "../Upload", "../Core", "../Dom/Util", ". if (media) { // update object id file.querySelectorAll("[data-object-id]").forEach((el) => { - el.dataset.objectId = media.mediaID; + el.dataset.objectId = media.mediaID.toString(); el.style.removeProperty("display"); }); - file.querySelector(".columnMediaID").textContent = media.mediaID; + file.querySelector(".columnMediaID").textContent = media.mediaID.toString(); // update icon this._replaceFileIcon(file.querySelector(".fa-spinner"), media, 48); } @@ -187,13 +185,11 @@ define(["require", "exports", "tslib", "../Upload", "../Core", "../Dom/Util", ". } const fileIcon = file.querySelector(".fa-spinner"); fileIcon.classList.remove("fa-spinner"); - fileIcon.classList.add("fa-remove"); - fileIcon.classList.add("pointer"); - fileIcon.classList.add("jsTooltip"); + fileIcon.classList.add("fa-remove", "pointer", "jsTooltip"); fileIcon.title = Language.get("wcf.global.button.delete"); fileIcon.addEventListener("click", (event) => { const target = event.currentTarget; - target.parentNode.parentNode.parentNode.remove(); + target.closest(".mediaFile").remove(); EventHandler.fire("com.woltlab.wcf.media.upload", "removedErroneousUploadRow"); }); file.classList.add("uploadFailed"); @@ -210,7 +206,7 @@ define(["require", "exports", "tslib", "../Upload", "../Core", "../Dom/Util", ". const fileIcon = DomTraverse.childByTag(DomTraverse.childByClass(file, "mediaThumbnail"), "SPAN"); this._replaceFileIcon(fileIcon, media, 144); file.className = "jsClipboardObject mediaFile"; - file.dataset.objectId = media.mediaID; + file.dataset.objectId = media.mediaID.toString(); if (this._mediaManager) { this._mediaManager.setupMediaElement(media, file); this._mediaManager.addMedia(media, file); @@ -226,10 +222,8 @@ define(["require", "exports", "tslib", "../Upload", "../Core", "../Dom/Util", ". } const fileIcon = DomTraverse.childByTag(DomTraverse.childByClass(file, "mediaThumbnail"), "SPAN"); fileIcon.classList.remove("fa-spinner"); - fileIcon.classList.add("fa-remove"); - fileIcon.classList.add("pointer"); - file.classList.add("uploadFailed"); - file.classList.add("jsTooltip"); + fileIcon.classList.add("fa-remove", "pointer"); + file.classList.add("uploadFailed", "jsTooltip"); file.title = Language.get("wcf.global.button.delete"); file.addEventListener("click", () => file.remove()); const title = DomTraverse.childByClass(DomTraverse.childByClass(file, "mediaInformation"), "mediaTitle"); @@ -249,7 +243,6 @@ define(["require", "exports", "tslib", "../Upload", "../Core", "../Dom/Util", ". }); } } - exports.MediaUpload = MediaUpload; Core.enableLegacyInheritance(MediaUpload); - exports.default = MediaUpload; + return MediaUpload; }); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Controller/Media/List.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Controller/Media/List.ts index 9254e16853..54c84b80ae 100644 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Controller/Media/List.ts +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Controller/Media/List.ts @@ -28,10 +28,10 @@ const _mediaEditor = new MediaEditor({ const _tableBody = document.getElementById("mediaListTableBody")!; let _upload: MediaListUpload; -type MediaListOptions = { +interface MediaListOptions { categoryId?: number; hasMarkedItems?: boolean; -}; +} export function init(options: MediaListOptions): void { options = options || {}; @@ -49,7 +49,7 @@ export function init(options: MediaListOptions): void { // eslint-disable-next-line //@ts-ignore - var deleteAction = new WCF.Action.Delete("wcf\\data\\media\\MediaAction", ".jsMediaRow"); + const deleteAction = new WCF.Action.Delete("wcf\\data\\media\\MediaAction", ".jsMediaRow"); deleteAction.setCallback(deleteCallback); addButtonEventListeners(); @@ -75,7 +75,7 @@ function addButtonEventListeners(): void { * Is triggered after media files have been deleted using the delete icon. */ function deleteCallback(objectIds?: number[]): void { - var tableRowCount = _tableBody.getElementsByTagName("tr").length; + const tableRowCount = _tableBody.getElementsByTagName("tr").length; if (objectIds === undefined) { if (!tableRowCount) { window.location.reload(); @@ -84,7 +84,7 @@ function deleteCallback(objectIds?: number[]): void { // table is empty, reload page window.location.reload(); } else { - Clipboard.reload.bind(Clipboard); + Clipboard.reload(); } } @@ -100,7 +100,7 @@ function edit(event: Event): void { */ function openEditorAfterUpload(data: MediaUploadSuccessEventData) { if (data.upload === _upload && !data.isMultiFileUpload && !_upload.hasPendingUploads()) { - var keys = Object.keys(data.media); + const keys = Object.keys(data.media); if (keys.length) { _mediaEditor.edit(data.media[keys[0]]); @@ -113,7 +113,7 @@ function openEditorAfterUpload(data: MediaUploadSuccessEventData) { */ function clipboardDeleteMedia(mediaIds: number[]) { Array.from(document.getElementsByClassName("jsMediaRow")).forEach((media) => { - const mediaID = ~~media.querySelector(".jsClipboardItem")!.dataset.objectId!; + const mediaID = ~~(media.querySelector(".jsClipboardItem") as HTMLElement).dataset.objectId!; if (mediaIds.indexOf(mediaID) !== -1) { media.remove(); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/FileUtil.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/FileUtil.ts index d6825cfbae..46edb19a75 100644 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/FileUtil.ts +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/FileUtil.ts @@ -132,11 +132,7 @@ const _mimeTypeExtensionMapping = new Map( /** * Formats the given filesize. */ -export function formatFilesize(byte: number, precision?: number): string { - if (precision === undefined) { - precision = 2; - } - +export function formatFilesize(byte: number, precision = 2): string { let symbol = "Byte"; if (byte >= 1000) { byte /= 1000; diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Clipboard.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Clipboard.ts index a6c281d761..7286e28066 100644 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Clipboard.ts +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Clipboard.ts @@ -73,15 +73,15 @@ const ajax = new MediaClipboard(); let clipboardObjectIds: number[] = []; -type ClipboardActionData = { +interface ClipboardActionData { data: { - actionName: string; + actionName: "com.woltlab.wcf.media.delete" | "com.woltlab.wcf.media.insert" | "com.woltlab.wcf.media.setCategory"; parameters: { objectIDs: number[]; }; }; responseData: null; -}; +} /** * Handles successful clipboard actions. diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Editor.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Editor.ts index 25f4f0e3f6..8e47517ead 100644 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Editor.ts +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Editor.ts @@ -23,13 +23,13 @@ import * as Ajax from "../Ajax"; import MediaReplace from "./Replace"; import { I18nValues } from "../Language/Input"; -type InitEditorData = { +interface InitEditorData { returnValues: { availableLanguageCount: number; categoryIDs: number[]; mediaData?: Media; }; -}; +} class MediaEditor implements AjaxCallbackObject { protected _availableLanguageCount = 1; @@ -90,9 +90,7 @@ class MediaEditor implements AjaxCallbackObject { */ protected _initEditor(content: HTMLElement, data: InitEditorData): void { this._availableLanguageCount = ~~data.returnValues.availableLanguageCount; - this._categoryIds = data.returnValues.categoryIDs.map(function (number) { - return ~~number; - }); + this._categoryIds = data.returnValues.categoryIDs.map((number) => number); if (data.returnValues.mediaData) { this._media = data.returnValues.mediaData; @@ -109,7 +107,11 @@ class MediaEditor implements AjaxCallbackObject { if (this._categoryIds.length) { const categoryID = content.querySelector("select[name=categoryID]") as HTMLSelectElement; - categoryID.value = (this._media!.categoryID as unknown) as string; + if (this._media!.categoryID) { + categoryID.value = this._media!.categoryID.toString(); + } else { + categoryID.value = "0"; + } } const title = content.querySelector("input[name=title]") as HTMLInputElement; @@ -205,18 +207,14 @@ class MediaEditor implements AjaxCallbackObject { const title = content.querySelector("input[name=title]") as HTMLInputElement; let hasError = false; - const altTextError = altText - ? DomTraverse.childByClass(altText.parentNode!.parentNode as HTMLElement, "innerError") - : false; - const captionError = caption - ? DomTraverse.childByClass(caption.parentNode!.parentNode as HTMLElement, "innerError") - : false; - const titleError = DomTraverse.childByClass(title.parentNode!.parentNode as HTMLElement, "innerError"); + const altTextError = altText ? DomTraverse.childByClass(altText.parentNode! as HTMLElement, "innerError") : false; + const captionError = caption ? DomTraverse.childByClass(caption.parentNode! as HTMLElement, "innerError") : false; + const titleError = DomTraverse.childByClass(title.parentNode! as HTMLElement, "innerError"); // category this._oldCategoryId = this._media!.categoryID; if (this._categoryIds.length) { - this._media!.categoryID = ~~categoryId!.value; + this._media!.categoryID = ~~categoryId.value; // if the selected category id not valid (manipulated DOM), ignore if (this._categoryIds.indexOf(this._media!.categoryID) === -1) { @@ -243,28 +241,19 @@ class MediaEditor implements AjaxCallbackObject { if (altText && !LanguageInput.validate(altText.id, true)) { hasError = true; if (!altTextError) { - const error = document.createElement("small"); - error.className = "innerError"; - error.textContent = Language.get("wcf.global.form.error.multilingual"); - altText.parentNode!.parentNode!.appendChild(error); + DomUtil.innerError(altText, Language.get("wcf.global.form.error.multilingual")); } } if (caption && !LanguageInput.validate(caption.id, true)) { hasError = true; if (!captionError) { - const error = document.createElement("small"); - error.className = "innerError"; - error.textContent = Language.get("wcf.global.form.error.multilingual"); - caption.parentNode!.parentNode!.appendChild(error); + DomUtil.innerError(caption, Language.get("wcf.global.form.error.multilingual")); } } if (!LanguageInput.validate(title.id, true)) { hasError = true; if (!titleError) { - const error = document.createElement("small"); - error.className = "innerError"; - error.textContent = Language.get("wcf.global.form.error.multilingual"); - title.parentNode!.parentNode!.appendChild(error); + DomUtil.innerError(title, Language.get("wcf.global.form.error.multilingual")); } } @@ -287,22 +276,14 @@ class MediaEditor implements AjaxCallbackObject { const aclValues = { allowAll: ~~(document.getElementById(`mediaEditor_${this._media!.mediaID}_aclAllowAll`)! as HTMLInputElement) .checked, - group: [] as number[], - user: [] as number[], + group: Array.from( + content.querySelectorAll(`input[name="mediaEditor_${this._media!.mediaID}_aclValues[group][]"]`), + ).map((aclGroup: HTMLInputElement) => ~~aclGroup.value), + user: Array.from( + content.querySelectorAll(`input[name="mediaEditor_${this._media!.mediaID}_aclValues[user][]"]`), + ).map((aclUser: HTMLInputElement) => ~~aclUser.value), }; - content - .querySelectorAll(`input[name="mediaEditor_${this._media!.mediaID}_aclValues[group][]"]`) - .forEach((aclGroup: HTMLInputElement) => { - aclValues.group.push(~~aclGroup.value); - }); - - content - .querySelectorAll(`input[name="mediaEditor_${this._media!.mediaID}_aclValues[user][]"]`) - .forEach((aclUser: HTMLInputElement) => { - aclValues.user.push(~~aclUser.value); - }); - if (!hasError) { if (altTextError) { altTextError.remove(); @@ -361,7 +342,7 @@ class MediaEditor implements AjaxCallbackObject { LanguageInput.enable(`altText_${mediaId}`); } - languageChooserContainer.style.display = "none"; + DomUtil.hide(languageChooserContainer); } else { LanguageInput.disable(`title_${mediaId}`); if (document.getElementById(`caption_${mediaId}`)) { @@ -371,7 +352,7 @@ class MediaEditor implements AjaxCallbackObject { LanguageInput.disable(`altText_${mediaId}`); } - languageChooserContainer.style.display = "block"; + DomUtil.show(languageChooserContainer); } } @@ -404,11 +385,11 @@ class MediaEditor implements AjaxCallbackObject { id: `mediaEditor_${mediaId}`, options: { backdropCloseOnClick: false, - onClose: this._close.bind(this), + onClose: () => this._close(), title: Language.get("wcf.media.edit"), }, source: { - after: this._initEditor.bind(this), + after: (content: HTMLElement, responseData: InitEditorData) => this._initEditor(content, responseData), data: { actionName: "getEditorDialog", className: "wcf\\data\\media\\MediaAction", diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Manager/Base.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Manager/Base.ts index 9ea0747974..ad0212e9c8 100644 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Manager/Base.ts +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Manager/Base.ts @@ -28,24 +28,24 @@ import * as MediaClipboard from "../Clipboard"; let mediaManagerCounter = 0; -type DialogInitAjaxResponseData = { +interface DialogInitAjaxResponseData { returnValues: { hasMarkedItems: number; media: object; pageCount: number; }; -}; +} -type SetMediaAdditionalData = { +interface SetMediaAdditionalData { pageCount: number; pageNo: number; -}; +} abstract class MediaManager implements DialogCallbackObject, MediaEditorCallbackObject { protected _forceClipboard = false; protected _hadInitiallyMarkedItems = false; - protected readonly _id = `mediaManager${mediaManagerCounter++}`; + protected readonly _id; protected readonly _listItems = new Map(); protected _media = new Map(); protected _mediaCategorySelect: HTMLSelectElement | null; @@ -66,6 +66,8 @@ abstract class MediaManager this._editMedia(ev)); + editIcon.addEventListener("click", (ev) => this._editMedia(ev)); } }); } @@ -102,7 +104,7 @@ abstract class MediaManager select"); if (this._mediaCategorySelect) { - this._mediaCategorySelect.addEventListener("change", this._categoryChange.bind(this)); + this._mediaCategorySelect.addEventListener("change", () => this._categoryChange()); } // store list items locally @@ -211,7 +213,7 @@ abstract class MediaManager this._search!.search(pageNo), maxPage: pageCount, }); } else if (this._pagination) { - this._pagination.getElement().style.display = "none"; + DomUtil.hide(this._pagination.getElement()); } } @@ -332,16 +334,13 @@ abstract class MediaManager(); - Object.entries(media).forEach(([mediaId, media]) => { - this._media.set(~~mediaId, media); - }); + this._media = new Map(Object.entries(media).map(([mediaId, media]) => [~~mediaId, media])); let info = DomTraverse.nextByClass(this._mediaManagerMediaList!, "info") as HTMLElement; if (this._media.size) { if (info) { - info.style.display = "none"; + DomUtil.hide(info); } } else { if (info === null) { @@ -350,15 +349,15 @@ abstract class MediaManager { if (!this._media.has(~~listItem.dataset.objectId!)) { - listItem.style.display = "none"; + DomUtil.hide(listItem); } else { - listItem.style.display = "block"; + DomUtil.show(listItem); } }); @@ -508,13 +507,13 @@ abstract class MediaManager { const insertIcon = listItem.querySelector(".jsMediaInsertButton"); if (insertIcon) { insertIcon.classList.remove("jsMediaInsertButton"); - insertIcon.addEventListener("click", (ev: MouseEvent) => this._openInsertDialog(ev)); + insertIcon.addEventListener("click", (ev) => this._openInsertDialog(ev)); } }); } @@ -126,11 +127,11 @@ class MediaManagerEditor extends MediaManager { return { id: this._getInsertDialogId(), options: { - onClose: this._editorClose.bind(this), + onClose: () => this._editorClose(), onSetup: (content) => { content.querySelector(".buttonPrimary")!.addEventListener("click", (ev) => this._insertMedia(ev)); - (content.querySelector(".thumbnailSizeSelection") as HTMLElement).style.display = "block"; + DomUtil.show(content.querySelector(".thumbnailSizeSelection") as HTMLElement); }, title: Language.get("wcf.media.insert"), }, @@ -140,7 +141,7 @@ class MediaManagerEditor extends MediaManager { }); } - protected _click(event: MouseEvent): void { + protected _click(event: Event): void { this._activeButton = event.currentTarget; super._click(event); @@ -191,11 +192,8 @@ class MediaManagerEditor extends MediaManager { protected _getThumbnailSizes(): string[] { return ["small", "medium", "large"] .map((size) => { - let supportSize = true; - this._mediaToInsert.forEach(function (media) { - if (!media[size + "ThumbnailType"]) { - supportSize = false; - } + const supportSize = Array.from(this._mediaToInsert).every(([_mediaId, media]) => { + return media[size + "ThumbnailType"] !== null; }); if (supportSize) { @@ -238,12 +236,7 @@ class MediaManagerEditor extends MediaManager { } if (this._mediaToInsertByClipboard) { - const mediaIds: number[] = []; - this._mediaToInsert.forEach(function (media) { - mediaIds.push(~~media.mediaID); - }); - - Clipboard.unmark("com.woltlab.wcf.media", mediaIds); + Clipboard.unmark("com.woltlab.wcf.media", Array.from(this._mediaToInsert.keys())); } this._mediaToInsert = new Map(); @@ -325,7 +318,7 @@ class MediaManagerEditor extends MediaManager { /** * Handles clicking on the insert button. */ - protected _openInsertDialog(event: MouseEvent): void { + protected _openInsertDialog(event: Event): void { const target = event.currentTarget as HTMLElement; this.insertMedia([~~target.dataset.objectId!]); @@ -346,16 +339,15 @@ class MediaManagerEditor extends MediaManager { this._mediaToInsertByClipboard = insertedByClipboard || false; // open the insert dialog if all media files are images - let imagesOnly = true, - media; - for (let i = 0, length = mediaIds.length; i < length; i++) { - media = this._media.get(mediaIds[i]); + let imagesOnly = true; + mediaIds.forEach((mediaId) => { + const media = this._media.get(mediaId)!; this._mediaToInsert.set(media.mediaID, media); if (!media.isImage) { imagesOnly = false; } - } + }); if (imagesOnly) { const thumbnailSizes = this._getThumbnailSizes(); @@ -387,7 +379,7 @@ class MediaManagerEditor extends MediaManager { const listItem = document.createElement("li"); listItem.className = "jsMediaInsertButton"; - listItem.dataset.objectId = (media.mediaID as unknown) as string; + listItem.dataset.objectId = media.mediaID.toString(); buttons.appendChild(listItem); listItem.innerHTML = ` diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Manager/Search.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Manager/Search.ts index 2c97269f5b..00fce33f46 100644 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Manager/Search.ts +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Manager/Search.ts @@ -14,15 +14,16 @@ import * as DomTraverse from "../../Dom/Traverse"; import * as Language from "../../Language"; import * as Ajax from "../../Ajax"; import * as Core from "../../Core"; +import DomUtil from "../../Dom/Util"; -type AjaxResponseData = { +interface AjaxResponseData { returnValues: { media?: Media; pageCount?: number; pageNo?: number; template?: string; }; -}; +} class MediaManagerSearch implements AjaxCallbackObject { protected readonly _cancelButton: HTMLSpanElement; @@ -84,7 +85,7 @@ class MediaManagerSearch implements AjaxCallbackObject { "innerInfo", ) as HTMLElement; if (innerInfo) { - innerInfo.style.display = "none"; + DomUtil.hide(innerInfo); } } @@ -114,7 +115,7 @@ class MediaManagerSearch implements AjaxCallbackObject { "innerInfo", ) as HTMLParagraphElement; if (innerInfo) { - innerInfo.style.display = "block"; + DomUtil.show(innerInfo); } else { innerInfo = document.createElement("p"); innerInfo.className = "innerInfo"; @@ -130,7 +131,7 @@ class MediaManagerSearch implements AjaxCallbackObject { * Hides the media search. */ public hideSearch(): void { - this._searchContainer.style.display = "none"; + DomUtil.hide(this._searchContainer); } /** @@ -144,7 +145,7 @@ class MediaManagerSearch implements AjaxCallbackObject { * Shows the media search. */ public showSearch(): void { - this._searchContainer.style.display = "block"; + DomUtil.show(this._searchContainer); } /** diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Manager/Select.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Manager/Select.ts index 9b73f15022..31a833284e 100644 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Manager/Select.ts +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Manager/Select.ts @@ -14,6 +14,7 @@ import * as DomTraverse from "../../Dom/Traverse"; import * as FileUtil from "../../FileUtil"; import * as Language from "../../Language"; import * as UiDialog from "../../Ui/Dialog"; +import DomUtil from "../../Dom/Util"; class MediaManagerSelect extends MediaManager { protected _activeButton: HTMLElement | null = null; @@ -32,7 +33,7 @@ class MediaManagerSelect extends MediaManager { if (store) { const storeElement = document.getElementById(store) as HTMLInputElement; if (storeElement && storeElement.tagName === "INPUT") { - button.addEventListener("click", this._click.bind(this)); + button.addEventListener("click", (ev) => this._click(ev)); this._storeElements.set(button, storeElement); @@ -46,7 +47,7 @@ class MediaManagerSelect extends MediaManager { removeButton.appendChild(icon); if (!storeElement.value) { - removeButton.style.display = "none"; + DomUtil.hide(removeButton); } removeButton.addEventListener("click", (ev) => this._removeMedia(ev)); } @@ -63,7 +64,7 @@ class MediaManagerSelect extends MediaManager { const chooseIcon = listItem.querySelector(".jsMediaSelectButton"); if (chooseIcon) { chooseIcon.classList.remove("jsMediaSelectButton"); - chooseIcon.addEventListener("click", (ev: MouseEvent) => this._chooseMedia(ev)); + chooseIcon.addEventListener("click", (ev) => this._chooseMedia(ev)); } }); } @@ -71,7 +72,7 @@ class MediaManagerSelect extends MediaManager { /** * Handles clicking on a media choose icon. */ - protected _chooseMedia(event: MouseEvent): void { + protected _chooseMedia(event: Event): void { if (this._activeButton === null) { throw new Error("Media cannot be chosen if no button is active."); } @@ -82,7 +83,7 @@ class MediaManagerSelect extends MediaManager { // save selected media in store element const input = document.getElementById(this._activeButton.dataset.store!) as HTMLInputElement; - input.value = (media.mediaID as unknown) as string; + input.value = media.mediaID.toString(); Core.triggerEvent(input, "change"); // display selected media @@ -119,7 +120,7 @@ class MediaManagerSelect extends MediaManager { UiDialog.close(this); } - protected _click(event: MouseEvent): void { + protected _click(event: Event): void { event.preventDefault(); this._activeButton = event.currentTarget as HTMLInputElement; @@ -151,7 +152,7 @@ class MediaManagerSelect extends MediaManager { const listItem = document.createElement("li"); listItem.className = "jsMediaSelectButton"; - listItem.dataset.objectId = (media.mediaID as unknown) as string; + listItem.dataset.objectId = media.mediaID.toString(); buttons.appendChild(listItem); listItem.innerHTML = @@ -165,7 +166,7 @@ class MediaManagerSelect extends MediaManager { /** * Handles clicking on the remove button. */ - protected _removeMedia(event: MouseEvent): void { + protected _removeMedia(event: Event): void { event.preventDefault(); const removeButton = event.currentTarget as HTMLSpanElement; diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Upload.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Upload.ts index 0eac346529..b0c13b10b4 100644 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Upload.ts +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Media/Upload.ts @@ -26,7 +26,7 @@ import { import * as EventHandler from "../Event/Handler"; import MediaManager from "./Manager/Base"; -export class MediaUpload extends Upload { +class MediaUpload extends Upload { protected _categoryId: number | null = null; protected readonly _elementTagSize: number; protected readonly _mediaManager: MediaManager | null; @@ -82,9 +82,9 @@ export class MediaUpload { if (cell.classList.contains("columnMark")) { - cell.querySelectorAll("[data-object-id]").forEach((el: HTMLElement) => (el.style.display = "none")); + cell.querySelectorAll("[data-object-id]").forEach((el: HTMLElement) => DomUtil.hide(el)); } else if (cell.classList.contains("columnIcon")) { - cell.querySelectorAll("[data-object-id]").forEach((el: HTMLElement) => (el.style.display = "none")); + cell.querySelectorAll("[data-object-id]").forEach((el: HTMLElement) => DomUtil.hide(el)); cell.querySelector(".mediaEditButton")!.classList.add("jsMediaEditButton"); (cell.querySelector(".jsDeleteButton") as HTMLElement).dataset.confirmMessageHtml = Language.get( @@ -211,11 +211,11 @@ export class MediaUpload { - el.dataset.objectId = (media.mediaID as unknown) as string; + el.dataset.objectId = media.mediaID.toString(); el.style.removeProperty("display"); }); - file.querySelector(".columnMediaID")!.textContent = (media.mediaID as unknown) as string; + file.querySelector(".columnMediaID")!.textContent = media.mediaID.toString(); // update icon this._replaceFileIcon(file.querySelector(".fa-spinner") as HTMLSpanElement, media, 48); @@ -230,13 +230,11 @@ export class MediaUpload { const target = event.currentTarget as HTMLSpanElement; - (target.parentNode!.parentNode!.parentNode! as HTMLElement).remove(); + target.closest(".mediaFile")!.remove(); EventHandler.fire("com.woltlab.wcf.media.upload", "removedErroneousUploadRow"); }); @@ -262,7 +260,7 @@ export class MediaUpload file.remove()); @@ -312,4 +308,4 @@ export class MediaUpload