Display thumbnail size by file processor

diff --git a/com.woltlab.wcf/templates/shared_fileProcessorFormField.tpl b/com.woltlab.wcf/templates/shared_fileProcessorFormField.tpl
index 8757b4b10e60469db405e8dd00dbd6989052df41..d57b84d4845f4dd7aef38bab87a5c5a33424fd7d 100644 (file)
--- a/com.woltlab.wcf/templates/shared_fileProcessorFormField.tpl
+++ b/com.woltlab.wcf/templates/shared_fileProcessorFormField.tpl
@@ -26,6 +26,7 @@
                        {if $field->isBigPreview()}true{else}false{/if},
                        {if $field->isSimpleReplace()}true{else}false{/if},
                        {if $field->isHideDeleteButton()}true{else}false{/if},
+                       {if $field->getThumbnailSize() === null}undefined{else}'{$field->getThumbnailSize()|encodeJS}'{/if},
                        [{implode from=$actionButtons item=actionButton}{
                                title: '{unsafe:$actionButton['title']|encodeJS}',
                                icon: {if $actionButton['icon'] === null}undefined{else}'{unsafe:$actionButton['icon']->toHtml()|encodeJS}'{/if},

diff --git a/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts b/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts
index e281dffa37b0baec3da3862f51e0ec1968379197..a22930b9080f849b6cfd9014b60a34c47e64705b 100644 (file)
--- a/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts
+++ b/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts
@@ -5,7 +5,7 @@
  * @since     6.1
  */
 
-import WoltlabCoreFileElement from "WoltLabSuite/Core/Component/File/woltlab-core-file";
+import WoltlabCoreFileElement, { Thumbnail } from "WoltLabSuite/Core/Component/File/woltlab-core-file";
 import { getPhrase } from "WoltLabSuite/Core/Language";
 import { deleteFile } from "WoltLabSuite/Core/Api/Files/DeleteFile";
 import DomChangeListener from "WoltLabSuite/Core/Dom/Change/Listener";
@@ -37,6 +37,7 @@ export class FileProcessor {
   readonly #singleFileUpload: boolean;
   readonly #simpleReplace: boolean;
   readonly #hideDeleteButton: boolean;
+  readonly #thumbnailSize?: string;
   readonly #extraButtons: ExtraButton[];
   #uploadResolve: undefined | (() => void);
 
@@ -46,6 +47,7 @@ export class FileProcessor {
     useBigPreview: boolean = false,
     simpleReplace: boolean = false,
     hideDeleteButton: boolean = false,
+    thumbnailSize?: string,
     extraButtons: ExtraButton[] = [],
   ) {
     this.#fieldId = fieldId;
@@ -54,6 +56,7 @@ export class FileProcessor {
     this.#simpleReplace = simpleReplace;
     this.#hideDeleteButton = hideDeleteButton;
     this.#extraButtons = extraButtons;
+    this.#thumbnailSize = thumbnailSize;
 
     this.#container = document.getElementById(fieldId + "Container")!;
     if (this.#container === null) {
@@ -306,17 +309,17 @@ export class FileProcessor {
 
   #fileInitializationCompleted(element: WoltlabCoreFileElement, container: HTMLElement): void {
     if (this.#useBigPreview) {
-      element.dataset.previewUrl = element.link!;
-      element.unbounded = true;
+      setThumbnail(
+        element,
+        element.thumbnails.find((thumbnail) => thumbnail.identifier === this.#thumbnailSize),
+        true,
+      );
     } else {
       if (element.isImage()) {
-        const thumbnail = element.thumbnails.find((thumbnail) => thumbnail.identifier === "tiny");
-        if (thumbnail !== undefined) {
-          element.thumbnail = thumbnail;
-        } else {
-          element.dataset.previewUrl = element.link!;
-          element.unbounded = false;
-        }
+        const thumbnailSize = this.#thumbnailSize ?? "tiny";
+
+        const thumbnail = element.thumbnails.find((thumbnail) => thumbnail.identifier === thumbnailSize);
+        setThumbnail(element, thumbnail);
 
         if (element.link !== undefined && element.filename !== undefined) {
           const filenameLink = document.createElement("a");
@@ -371,6 +374,16 @@ export class FileProcessor {
   }
 }
 
+function setThumbnail(element: WoltlabCoreFileElement, thumbnail?: Thumbnail, unbounded: boolean = false) {
+  if (unbounded) {
+    element.dataset.previewUrl = thumbnail !== undefined ? thumbnail.link : element.link;
+  } else if (thumbnail !== undefined) {
+    element.thumbnail = thumbnail;
+  }
+
+  element.unbounded = unbounded;
+}
+
 export function getValues(fieldId: string): undefined | number | Set<number> {
   const field = fileProcessors.get(fieldId);
   if (field === undefined) {

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.js
index d50e255dc37f7ed885f5e8fde007d2bfabf1b023..6aac75c57af41b60df5ed521e0078760ffec337a 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.js
@@ -21,15 +21,17 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui
         #singleFileUpload;
         #simpleReplace;
         #hideDeleteButton;
+        #thumbnailSize;
         #extraButtons;
         #uploadResolve;
-        constructor(fieldId, singleFileUpload = false, useBigPreview = false, simpleReplace = false, hideDeleteButton = false, extraButtons = []) {
+        constructor(fieldId, singleFileUpload = false, useBigPreview = false, simpleReplace = false, hideDeleteButton = false, thumbnailSize, extraButtons = []) {
             this.#fieldId = fieldId;
             this.#useBigPreview = useBigPreview;
             this.#singleFileUpload = singleFileUpload;
             this.#simpleReplace = simpleReplace;
             this.#hideDeleteButton = hideDeleteButton;
             this.#extraButtons = extraButtons;
+            this.#thumbnailSize = thumbnailSize;
             this.#container = document.getElementById(fieldId + "Container");
             if (this.#container === null) {
                 throw new Error("Unknown field with id '" + fieldId + "'");
@@ -243,19 +245,13 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui
         }
         #fileInitializationCompleted(element, container) {
             if (this.#useBigPreview) {
-                element.dataset.previewUrl = element.link;
-                element.unbounded = true;
+                setThumbnail(element, element.thumbnails.find((thumbnail) => thumbnail.identifier === this.#thumbnailSize), true);
             }
             else {
                 if (element.isImage()) {
-                    const thumbnail = element.thumbnails.find((thumbnail) => thumbnail.identifier === "tiny");
-                    if (thumbnail !== undefined) {
-                        element.thumbnail = thumbnail;
-                    }
-                    else {
-                        element.dataset.previewUrl = element.link;
-                        element.unbounded = false;
-                    }
+                    const thumbnailSize = this.#thumbnailSize ?? "tiny";
+                    const thumbnail = element.thumbnails.find((thumbnail) => thumbnail.identifier === thumbnailSize);
+                    setThumbnail(element, thumbnail);
                     if (element.link !== undefined && element.filename !== undefined) {
                         const filenameLink = document.createElement("a");
                         filenameLink.href = element.link;
@@ -297,6 +293,15 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui
         }
     }
     exports.FileProcessor = FileProcessor;
+    function setThumbnail(element, thumbnail, unbounded = false) {
+        if (unbounded) {
+            element.dataset.previewUrl = thumbnail !== undefined ? thumbnail.link : element.link;
+        }
+        else if (thumbnail !== undefined) {
+            element.thumbnail = thumbnail;
+        }
+        element.unbounded = unbounded;
+    }
     function getValues(fieldId) {
         const field = fileProcessors.get(fieldId);
         if (field === undefined) {

diff --git a/wcfsetup/install/files/lib/system/form/builder/field/FileProcessorFormField.class.php b/wcfsetup/install/files/lib/system/form/builder/field/FileProcessorFormField.class.php
index 0f2e2ff5d3d8498e22ad8b5fe740eeeb79037d35..a0e1ce520d386c8da3a87ed42e9b5d00d4e0b13f 100644 (file)
--- a/wcfsetup/install/files/lib/system/form/builder/field/FileProcessorFormField.class.php
+++ b/wcfsetup/install/files/lib/system/form/builder/field/FileProcessorFormField.class.php
@@ -47,6 +47,7 @@ final class FileProcessorFormField extends AbstractFormField
     private bool $bigPreview = false;
     private bool $simpleReplace = false;
     private bool $hideDeleteButton = false;
+    private ?string $thumbnailSize = null;
     private array $actionButtons = [];
 
     #[\Override]
@@ -355,4 +356,26 @@ final class FileProcessorFormField extends AbstractFormField
     {
         return $this->hideDeleteButton;
     }
+
+    /**
+     * Sets the thumbnail size for the preview.
+     *
+     * If no size is set:
+     * - And the big preview is enabled, the full size is used
+     * - Otherwise, the thumbnail size `tiny` is used
+     */
+    public function thumbnailSize(?string $thumbnailSize): self
+    {
+        $this->thumbnailSize = $thumbnailSize;
+
+        return $this;
+    }
+
+    /**
+     * Returns the thumbnail size for the preview.
+     */
+    public function getThumbnailSize(): ?string
+    {
+        return $this->thumbnailSize;
+    }
 }