Add support for the image viewer for attachments

diff --git a/ts/WoltLabSuite/Core/Component/Attachment/List.ts b/ts/WoltLabSuite/Core/Component/Attachment/List.ts
index 3ad3bb30844d32067a80e72f6b0a9e046e2d7c48..2f535e5fcbbcf485b7efc40c528b9fe8792339cf 100644 (file)
--- a/ts/WoltLabSuite/Core/Component/Attachment/List.ts
+++ b/ts/WoltLabSuite/Core/Component/Attachment/List.ts
@@ -64,6 +64,17 @@ function upload(fileList: HTMLElement, file: WoltlabCoreFileElement, editorId: s
         if (url !== undefined) {
           buttonList.append(getInsertThumbnailButton((data as FileProcessorData).attachmentID, url, editorId));
         }
+
+        if (file.link !== undefined && file.filename !== undefined) {
+          const link = document.createElement("a");
+          link.href = file.link!;
+          link.classList.add("jsImageViewer");
+          link.title = file.filename;
+          link.textContent = file.filename;
+
+          filename.innerHTML = "";
+          filename.append(link);
+        }
       }
 
       element.append(buttonList);

diff --git a/wcfsetup/install/files/js/WCF.ImageViewer.js b/wcfsetup/install/files/js/WCF.ImageViewer.js
index d68ff498a0a06a765d3eec5bca1e2cb97cb0f5a8..bb6ba1a81df9c16176df789981716121088f3021 100644 (file)
--- a/wcfsetup/install/files/js/WCF.ImageViewer.js
+++ b/wcfsetup/install/files/js/WCF.ImageViewer.js
@@ -1315,6 +1315,19 @@ $.widget('ui.wcfImageViewer', {
                        if (!$thumbnail.length) {
                                $thumbnail = $link.parentsUntil('.formAttachmentList').last().find('.attachmentTinyThumbnail');
                        }
+
+                       let thumbnailSrc = '';
+                       if ($thumbnail.length === 0) {
+                               const attachmentItem = $link[0].closest(".attachment__item");
+                               if (attachmentItem !== null) {
+                                       const file = attachmentItem.querySelector("woltlab-core-file");
+                                       const thumbnail = file?.thumbnails.find((x) => x.identifier === "tiny");
+                                       thumbnailSrc = thumbnail.link;
+                               }
+                       } else {
+                               thumbnailSrc = $thumbnail.prop("src");
+                       }
+
                        
                        $images.push({
                                image: {
@@ -1325,7 +1338,7 @@ $.widget('ui.wcfImageViewer', {
                                },
                                series: null,
                                thumbnail: {
-                                       url: $thumbnail.prop('src')
+                                       url: thumbnailSrc
                                },
                                user: null
                        });

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Attachment/List.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Attachment/List.js
index 4c341005533d7cecb19f690743090afc10a17243..f159627094d52e5900f29f7ab0ec1a8792b6244e 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Attachment/List.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Attachment/List.js
@@ -40,6 +40,15 @@ define(["require", "exports", "WoltLabSuite/Core/Api/Files/DeleteFile", "../Cked
                 if (url !== undefined) {
                     buttonList.append(getInsertThumbnailButton(data.attachmentID, url, editorId));
                 }
+                if (file.link !== undefined && file.filename !== undefined) {
+                    const link = document.createElement("a");
+                    link.href = file.link;
+                    link.classList.add("jsImageViewer");
+                    link.title = file.filename;
+                    link.textContent = file.filename;
+                    filename.innerHTML = "";
+                    filename.append(link);
+                }
             }
             element.append(buttonList);
         })