From 592d1e378a1c560b54defc6b69b30ce185f4bb54 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Sat, 4 May 2024 11:37:15 +0200
Subject: [PATCH] Add support for the image viewer for attachments

---
 ts/WoltLabSuite/Core/Component/Attachment/List.ts | 11 +++++++++++
 wcfsetup/install/files/js/WCF.ImageViewer.js      | 15 ++++++++++++++-
 .../Core/Component/Attachment/List.js             |  9 +++++++++
 3 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/ts/WoltLabSuite/Core/Component/Attachment/List.ts b/ts/WoltLabSuite/Core/Component/Attachment/List.ts
index 3ad3bb3084..2f535e5fcb 100644
--- 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 d68ff498a0..bb6ba1a81d 100644
--- 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 4c34100553..f159627094 100644
--- 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);
         })
-- 
2.20.1