From a7ed9ad65a021e6012e3e1657436c92bbe0a4603 Mon Sep 17 00:00:00 2001 From: Cyperghost Date: Thu, 12 Dec 2024 15:24:35 +0100 Subject: [PATCH] Display thumbnail size by file processor --- .../shared_fileProcessorFormField.tpl | 1 + .../Builder/Field/Controller/FileProcessor.ts | 33 +++++++++++++------ .../Builder/Field/Controller/FileProcessor.js | 27 ++++++++------- .../field/FileProcessorFormField.class.php | 23 +++++++++++++ 4 files changed, 63 insertions(+), 21 deletions(-) diff --git a/com.woltlab.wcf/templates/shared_fileProcessorFormField.tpl b/com.woltlab.wcf/templates/shared_fileProcessorFormField.tpl index 8757b4b10e..d57b84d484 100644 --- 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 e281dffa37..a22930b908 100644 --- 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 { 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 d50e255dc3..6aac75c57a 100644 --- 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 0f2e2ff5d3..a0e1ce520d 100644 --- 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; + } } -- 2.20.1