Add button phrases and simplify the button creation

diff --git a/com.woltlab.wcf/templates/shared_messageFormAttachments.tpl b/com.woltlab.wcf/templates/shared_messageFormAttachments.tpl
index ac9e314d3aa3466acca64900ba1fe3df15e35412..74eeb668d4c7b4b1218cd6de7be1a7c8baf33ded 100644 (file)
--- a/com.woltlab.wcf/templates/shared_messageFormAttachments.tpl
+++ b/com.woltlab.wcf/templates/shared_messageFormAttachments.tpl
@@ -16,6 +16,10 @@
        </dl>
 
        <script data-relocate="true">
+               {jsphrase name='wcf.attachment.insert'}
+               {jsphrase name='wcf.attachment.insertFull'}
+               {jsphrase name='wcf.attachment.moreOptions'}
+
                require(["WoltLabSuite/Core/Component/Attachment/List"], ({ setup }) => {
                        setup("{if $wysiwygSelector|isset}{$wysiwygSelector}{else}text{/if}");
                });

diff --git a/ts/WoltLabSuite/Core/Component/Attachment/Entry.ts b/ts/WoltLabSuite/Core/Component/Attachment/Entry.ts
index c6204b8dd73afd3fc4e82ac950e3dc71b0181ec6..66ecd8a884ff8f5b47a7694fff53b251c75c754d 100644 (file)
--- a/ts/WoltLabSuite/Core/Component/Attachment/Entry.ts
+++ b/ts/WoltLabSuite/Core/Component/Attachment/Entry.ts
@@ -4,6 +4,7 @@ import { initFragment, toggleDropdown } from "WoltLabSuite/Core/Ui/Dropdown/Simp
 import DomChangeListener from "WoltLabSuite/Core/Dom/Change/Listener";
 import { dispatchToCkeditor } from "../Ckeditor/Event";
 import { deleteFile } from "WoltLabSuite/Core/Api/Files/DeleteFile";
+import { getPhrase } from "WoltLabSuite/Core/Language";
 
 type FileProcessorData = {
   attachmentID: number;
@@ -39,17 +40,13 @@ function fileInitializationCompleted(element: HTMLElement, file: WoltlabCoreFile
 
     const url = file.thumbnails.find((thumbnail) => thumbnail.identifier === "")?.link;
     if (url !== undefined) {
-      insertButton = getInsertThumbnailButton((data as FileProcessorData).attachmentID, url, editor);
+      insertButton = getInsertButton((data as FileProcessorData).attachmentID, url, editor);
 
-      extraButtons.push(
-        getInsertAttachBbcodeButton((data as FileProcessorData).attachmentID, file.link ? file.link : "", editor),
-      );
+      const insertOriginalImage = getInsertButton((data as FileProcessorData).attachmentID, file.link!, editor);
+      insertOriginalImage.textContent = getPhrase("wcf.attachment.insertFull");
+      extraButtons.push(insertOriginalImage);
     } else {
-      insertButton = getInsertAttachBbcodeButton(
-        (data as FileProcessorData).attachmentID,
-        file.link ? file.link : "",
-        editor,
-      );
+      insertButton = getInsertButton((data as FileProcessorData).attachmentID, file.link ? file.link : "", editor);
     }
 
     if (file.link !== undefined && file.filename !== undefined) {
@@ -66,7 +63,7 @@ function fileInitializationCompleted(element: HTMLElement, file: WoltlabCoreFile
       DomChangeListener.trigger();
     }
   } else {
-    insertButton = getInsertAttachBbcodeButton(
+    insertButton = getInsertButton(
       (data as FileProcessorData).attachmentID,
       file.isImage() && file.link ? file.link : "",
       editor,
@@ -92,9 +89,9 @@ function fileInitializationCompleted(element: HTMLElement, file: WoltlabCoreFile
   dropdownMenu.append(listItem);
 
   const moreOptions = document.createElement("button");
-  moreOptions.classList.add("button", "small", "jsTooltip");
+  moreOptions.classList.add("button", "small");
   moreOptions.type = "button";
-  moreOptions.title = "TODO: more options";
+  moreOptions.setAttribute("aria-label", getPhrase("wcf.global.button.more"));
   moreOptions.innerHTML = '<fa-icon name="ellipsis-vertical"></fa-icon>';
 
   const buttonList = document.createElement("div");
@@ -120,7 +117,7 @@ function getDeleteAttachButton(
 ): HTMLButtonElement {
   const button = document.createElement("button");
   button.type = "button";
-  button.textContent = "TODO: delete";
+  button.textContent = getPhrase("wcf.global.button.delete");
 
   button.addEventListener("click", () => {
     void deleteFile(fileId).then((result) => {
@@ -137,25 +134,10 @@ function getDeleteAttachButton(
   return button;
 }
 
-function getInsertAttachBbcodeButton(attachmentId: number, url: string, editor: HTMLElement): HTMLButtonElement {
+function getInsertButton(attachmentId: number, url: string, editor: HTMLElement): HTMLButtonElement {
   const button = document.createElement("button");
   button.type = "button";
-  button.textContent = "TODO: insert";
-
-  button.addEventListener("click", () => {
-    dispatchToCkeditor(editor).insertAttachment({
-      attachmentId,
-      url,
-    });
-  });
-
-  return button;
-}
-
-function getInsertThumbnailButton(attachmentId: number, url: string, editor: HTMLElement): HTMLButtonElement {
-  const button = document.createElement("button");
-  button.type = "button";
-  button.textContent = "TODO: insert thumbnail";
+  button.textContent = getPhrase("wcf.attachment.insert");
 
   button.addEventListener("click", () => {
     dispatchToCkeditor(editor).insertAttachment({

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Attachment/Entry.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Attachment/Entry.js
index 5e21ba650fc8a9b3db8375267d83eaa9f04e6dcb..281b43e15e08a00f64b2bd19a5913f45198411a4 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Attachment/Entry.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Attachment/Entry.js
@@ -1,4 +1,4 @@
-define(["require", "exports", "tslib", "WoltLabSuite/Core/FileUtil", "WoltLabSuite/Core/Ui/Dropdown/Simple", "WoltLabSuite/Core/Dom/Change/Listener", "../Ckeditor/Event", "WoltLabSuite/Core/Api/Files/DeleteFile"], function (require, exports, tslib_1, FileUtil_1, Simple_1, Listener_1, Event_1, DeleteFile_1) {
+define(["require", "exports", "tslib", "WoltLabSuite/Core/FileUtil", "WoltLabSuite/Core/Ui/Dropdown/Simple", "WoltLabSuite/Core/Dom/Change/Listener", "../Ckeditor/Event", "WoltLabSuite/Core/Api/Files/DeleteFile", "WoltLabSuite/Core/Language"], function (require, exports, tslib_1, FileUtil_1, Simple_1, Listener_1, Event_1, DeleteFile_1, Language_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.createAttachmentFromFile = void 0;
@@ -29,11 +29,13 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/FileUtil", "WoltLabSui
             }
             const url = file.thumbnails.find((thumbnail) => thumbnail.identifier === "")?.link;
             if (url !== undefined) {
-                insertButton = getInsertThumbnailButton(data.attachmentID, url, editor);
-                extraButtons.push(getInsertAttachBbcodeButton(data.attachmentID, file.link ? file.link : "", editor));
+                insertButton = getInsertButton(data.attachmentID, url, editor);
+                const insertOriginalImage = getInsertButton(data.attachmentID, file.link, editor);
+                insertOriginalImage.textContent = (0, Language_1.getPhrase)("wcf.attachment.insertFull");
+                extraButtons.push(insertOriginalImage);
             }
             else {
-                insertButton = getInsertAttachBbcodeButton(data.attachmentID, file.link ? file.link : "", editor);
+                insertButton = getInsertButton(data.attachmentID, file.link ? file.link : "", editor);
             }
             if (file.link !== undefined && file.filename !== undefined) {
                 const link = document.createElement("a");
@@ -48,7 +50,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/FileUtil", "WoltLabSui
             }
         }
         else {
-            insertButton = getInsertAttachBbcodeButton(data.attachmentID, file.isImage() && file.link ? file.link : "", editor);
+            insertButton = getInsertButton(data.attachmentID, file.isImage() && file.link ? file.link : "", editor);
         }
         const dropdownMenu = document.createElement("ul");
         dropdownMenu.classList.add("dropdownMenu");
@@ -66,9 +68,9 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/FileUtil", "WoltLabSui
         listItem.append(getDeleteAttachButton(fileId, data.attachmentID, editor, element));
         dropdownMenu.append(listItem);
         const moreOptions = document.createElement("button");
-        moreOptions.classList.add("button", "small", "jsTooltip");
+        moreOptions.classList.add("button", "small");
         moreOptions.type = "button";
-        moreOptions.title = "TODO: more options";
+        moreOptions.setAttribute("aria-label", (0, Language_1.getPhrase)("wcf.global.button.more"));
         moreOptions.innerHTML = '<fa-icon name="ellipsis-vertical"></fa-icon>';
         const buttonList = document.createElement("div");
         buttonList.classList.add("attachment__item__buttons");
@@ -84,7 +86,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/FileUtil", "WoltLabSui
     function getDeleteAttachButton(fileId, attachmentId, editor, element) {
         const button = document.createElement("button");
         button.type = "button";
-        button.textContent = "TODO: delete";
+        button.textContent = (0, Language_1.getPhrase)("wcf.global.button.delete");
         button.addEventListener("click", () => {
             void (0, DeleteFile_1.deleteFile)(fileId).then((result) => {
                 result.unwrap();
@@ -96,22 +98,10 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/FileUtil", "WoltLabSui
         });
         return button;
     }
-    function getInsertAttachBbcodeButton(attachmentId, url, editor) {
+    function getInsertButton(attachmentId, url, editor) {
         const button = document.createElement("button");
         button.type = "button";
-        button.textContent = "TODO: insert";
-        button.addEventListener("click", () => {
-            (0, Event_1.dispatchToCkeditor)(editor).insertAttachment({
-                attachmentId,
-                url,
-            });
-        });
-        return button;
-    }
-    function getInsertThumbnailButton(attachmentId, url, editor) {
-        const button = document.createElement("button");
-        button.type = "button";
-        button.textContent = "TODO: insert thumbnail";
+        button.textContent = (0, Language_1.getPhrase)("wcf.attachment.insert");
         button.addEventListener("click", () => {
             (0, Event_1.dispatchToCkeditor)(editor).insertAttachment({
                 attachmentId,