From 1e1aeaa5b6311c13b642d883409900471e234338 Mon Sep 17 00:00:00 2001 From: Matthias Schmidt Date: Sun, 21 Mar 2021 10:42:34 +0100 Subject: [PATCH] Use `Ui/Object/Action` for media files --- com.woltlab.wcf/templates/mediaListItems.tpl | 4 ++-- com.woltlab.wcf/templates/mediaManager.tpl | 2 +- ts/WoltLabSuite/Core/Controller/Media/List.ts | 7 ------- ts/WoltLabSuite/Core/Media/Manager/Base.ts | 14 +++++++------- ts/WoltLabSuite/Core/Media/Upload.ts | 14 +++++++------- ts/WoltLabSuite/Core/Ui/Empty.ts | 1 + ts/WoltLabSuite/Core/Ui/Object/Action.ts | 16 +++++++++++++--- .../install/files/acp/templates/mediaList.tpl | 12 ++++++------ .../files/acp/templates/mediaListItems.tpl | 4 ++-- .../install/files/acp/templates/mediaManager.tpl | 2 +- .../WoltLabSuite/Core/Controller/Media/List.js | 5 ----- .../js/WoltLabSuite/Core/Media/Manager/Base.js | 11 ++++------- .../files/js/WoltLabSuite/Core/Media/Upload.js | 5 +++-- .../js/WoltLabSuite/Core/Ui/Object/Action.js | 16 ++++++++++++---- 14 files changed, 59 insertions(+), 54 deletions(-) diff --git a/com.woltlab.wcf/templates/mediaListItems.tpl b/com.woltlab.wcf/templates/mediaListItems.tpl index 95fe0041b0..7a1e6e0fac 100644 --- a/com.woltlab.wcf/templates/mediaListItems.tpl +++ b/com.woltlab.wcf/templates/mediaListItems.tpl @@ -1,5 +1,5 @@ {foreach from=$mediaList item=media} -
  • +
  • {@$media->getElementTag(144)}
    @@ -21,7 +21,7 @@
    • -
  • +
    • {/if} diff --git a/com.woltlab.wcf/templates/mediaManager.tpl b/com.woltlab.wcf/templates/mediaManager.tpl index 2dc7d4828c..9fe55be085 100644 --- a/com.woltlab.wcf/templates/mediaManager.tpl +++ b/com.woltlab.wcf/templates/mediaManager.tpl @@ -37,7 +37,7 @@
    -
    diff --git a/ts/WoltLabSuite/Core/Controller/Media/List.ts b/ts/WoltLabSuite/Core/Controller/Media/List.ts index c296837da5..56b26e4790 100644 --- a/ts/WoltLabSuite/Core/Controller/Media/List.ts +++ b/ts/WoltLabSuite/Core/Controller/Media/List.ts @@ -45,13 +45,6 @@ export function init(options: MediaListOptions): void { clipboardDeleteMedia: (mediaIds: number[]) => clipboardDeleteMedia(mediaIds), } as MediaManager); - EventHandler.add("com.woltlab.wcf.media.upload", "removedErroneousUploadRow", () => deleteCallback()); - - // eslint-disable-next-line - //@ts-ignore - const deleteAction = new WCF.Action.Delete("wcf\\data\\media\\MediaAction", ".jsMediaRow"); - deleteAction.setCallback(deleteCallback); - addButtonEventListeners(); DomChangeListener.add("WoltLabSuite/Core/Controller/Media/List", () => addButtonEventListeners()); diff --git a/ts/WoltLabSuite/Core/Media/Manager/Base.ts b/ts/WoltLabSuite/Core/Media/Manager/Base.ts index ad0212e9c8..e1f4f178e1 100644 --- a/ts/WoltLabSuite/Core/Media/Manager/Base.ts +++ b/ts/WoltLabSuite/Core/Media/Manager/Base.ts @@ -25,6 +25,7 @@ import MediaManagerSearch from "./Search"; import MediaUpload from "../Upload"; import MediaEditor from "../Editor"; import * as MediaClipboard from "../Clipboard"; +import { ObjectActionData } from "../../Ui/Object/Data"; let mediaManagerCounter = 0; @@ -185,10 +186,9 @@ abstract class MediaManager this.removeMedia(element[0].dataset.objectId); + EventHandler.add("WoltLabSuite/Core/Ui/Object/Action", "delete", (data: ObjectActionData) => + this.removeMedia(~~data.objectElement.dataset.objectId!), + ); } if (Permission.get("admin.content.cms.canManageMedia") || this._forceClipboard) { @@ -523,12 +523,12 @@ abstract class MediaManager`; const deleteButton = document.createElement("li"); - deleteButton.className = "jsDeleteButton"; - deleteButton.dataset.objectId = media.mediaID.toString(); + deleteButton.classList.add("jsObjectAction"); + deleteButton.dataset.objectAction = "delete"; // use temporary title to not unescape html in filename const uuid = Core.getUuid(); - deleteButton.dataset.confirmMessageHtml = StringUtil.unescapeHTML( + deleteButton.dataset.confirmMessage = StringUtil.unescapeHTML( Language.get("wcf.media.delete.confirmMessage", { title: uuid, }), diff --git a/ts/WoltLabSuite/Core/Media/Upload.ts b/ts/WoltLabSuite/Core/Media/Upload.ts index b0c13b10b4..bc90b9ef78 100644 --- a/ts/WoltLabSuite/Core/Media/Upload.ts +++ b/ts/WoltLabSuite/Core/Media/Upload.ts @@ -87,12 +87,11 @@ class MediaUpload exte 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( - "wcf.media.delete.confirmMessage", - { - title: file.name, - }, - ); + (cell.querySelector( + ".jsObjectAction[data-object-action='delete']", + ) as HTMLElement).dataset.confirmMessage = Language.get("wcf.media.delete.confirmMessage", { + title: file.name, + }); } else if (cell.classList.contains("columnFilename")) { // replace copied image with spinner let image = cell.querySelector("img"); @@ -210,6 +209,7 @@ class MediaUpload exte if (file.tagName === "TR") { if (media) { // update object id + file.dataset.objectId = media.mediaID.toString(); file.querySelectorAll("[data-object-id]").forEach((el: HTMLElement) => { el.dataset.objectId = media.mediaID.toString(); el.style.removeProperty("display"); @@ -259,7 +259,7 @@ class MediaUpload exte const fileIcon = DomTraverse.childByTag(DomTraverse.childByClass(file, "mediaThumbnail")!, "SPAN")!; this._replaceFileIcon(fileIcon, media, 144); - file.className = "jsClipboardObject mediaFile"; + file.classList.add("jsClipboardObject", "mediaFile", "jsObjectActionObject"); file.dataset.objectId = media.mediaID.toString(); if (this._mediaManager) { diff --git a/ts/WoltLabSuite/Core/Ui/Empty.ts b/ts/WoltLabSuite/Core/Ui/Empty.ts index 8f025ed1ea..6898602dc5 100644 --- a/ts/WoltLabSuite/Core/Ui/Empty.ts +++ b/ts/WoltLabSuite/Core/Ui/Empty.ts @@ -36,6 +36,7 @@ function observeElements(): void { }); }); } + export function setup(): void { observeElements(); DomChangeListener.add("WoltLabSuite/Core/Ui/Empty", () => observeElements()); diff --git a/ts/WoltLabSuite/Core/Ui/Object/Action.ts b/ts/WoltLabSuite/Core/Ui/Object/Action.ts index f5d965e9da..6c1d35fc51 100644 --- a/ts/WoltLabSuite/Core/Ui/Object/Action.ts +++ b/ts/WoltLabSuite/Core/Ui/Object/Action.ts @@ -14,6 +14,7 @@ import { ObjectActionData } from "./Data"; import * as UiConfirmation from "../Confirmation"; import * as Language from "../../Language"; import * as StringUtil from "../../StringUtil"; +import DomChangeListener from "../../Dom/Change/Listener"; const containerSelector = ".jsObjectActionContainer[data-object-action-class-name]"; const objectSelector = ".jsObjectActionObject[data-object-id]"; @@ -89,12 +90,21 @@ function processAction(actionElement: HTMLElement, data: ResponseData | Database } as ObjectActionData); } -export function setup(): void { +const actions = new Set(); + +function registerElements(): void { document .querySelectorAll(`${containerSelector} ${objectSelector} ${actionSelector}`) .forEach((action: HTMLElement) => { - action.addEventListener("click", (ev) => executeAction(ev)); + if (!actions.has(action)) { + action.addEventListener("click", (ev) => executeAction(ev)); + + actions.add(action); + } }); +} - // TODO: handle elements added later on +export function setup(): void { + registerElements(); + DomChangeListener.add("WoltLabSuite/Core/Ui/Empty", () => registerElements()); } diff --git a/wcfsetup/install/files/acp/templates/mediaList.tpl b/wcfsetup/install/files/acp/templates/mediaList.tpl index d185200341..ea0e64ee3b 100644 --- a/wcfsetup/install/files/acp/templates/mediaList.tpl +++ b/wcfsetup/install/files/acp/templates/mediaList.tpl @@ -106,7 +106,7 @@ {/hascontent}