From: Cyperghost Date: Mon, 15 Jul 2024 08:53:28 +0000 (+0200) Subject: Add the new variable `FileProcessorFormField::$bigPreview` with getter and setter. X-Git-Tag: 6.1.0_Alpha_1~37 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=014e4ae48dd2a307004cb6b4babd9b2affaaf068;p=GitHub%2FWoltLab%2FWCF.git Add the new variable `FileProcessorFormField::$bigPreview` with getter and setter. This can be used to set whether the Big Preview is used for images. The big preview can only be used for images. --- diff --git a/com.woltlab.wcf/templates/shared_fileProcessorFormField.tpl b/com.woltlab.wcf/templates/shared_fileProcessorFormField.tpl index 442f8b62f8..b4dba63d9d 100644 --- a/com.woltlab.wcf/templates/shared_fileProcessorFormField.tpl +++ b/com.woltlab.wcf/templates/shared_fileProcessorFormField.tpl @@ -1,7 +1,7 @@ {unsafe:$fileProcessorHtmlElement} {assign var="files" value=$field->getFiles()} -{if $field->isSingleFileUpload() && $imageOnly} +{if $field->isBigPreview()}
{if $field->getValue()} {assign var="file" value=$files|reset} @@ -23,7 +23,7 @@ new FileProcessor( '{unsafe:$field->getPrefixedId()|encodeJS}', {if $field->isSingleFileUpload()}true{else}false{/if}, - {if $imageOnly}true{else}false{/if}, + {if $field->isBigPreview()}true{else}false{/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 bcd7f630cd..42ec8fd86d 100644 --- a/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts +++ b/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts @@ -32,7 +32,7 @@ export class FileProcessor { readonly #fieldId: string; #replaceElement: WoltlabCoreFileElement | undefined = undefined; readonly #fileInput: HTMLInputElement; - readonly #imageOnly: boolean; + readonly #useBigPreview: boolean; readonly #singleFileUpload: boolean; readonly #extraButtons: ExtraButton[]; #uploadResolve: undefined | (() => void); @@ -40,11 +40,11 @@ export class FileProcessor { constructor( fieldId: string, singleFileUpload: boolean = false, - imageOnly: boolean = false, + useBigPreview: boolean = false, extraButtons: ExtraButton[] = [], ) { this.#fieldId = fieldId; - this.#imageOnly = imageOnly; + this.#useBigPreview = useBigPreview; this.#singleFileUpload = singleFileUpload; this.#extraButtons = extraButtons; @@ -71,11 +71,7 @@ export class FileProcessor { } get classPrefix(): string { - return this.showBigPreview ? "fileUpload__preview__" : "fileList__"; - } - - get showBigPreview(): boolean { - return this.#singleFileUpload && this.#imageOnly; + return this.#useBigPreview ? "fileUpload__preview__" : "fileList__"; } protected addButtons(container: HTMLElement, element: WoltlabCoreFileElement): void { @@ -189,7 +185,7 @@ export class FileProcessor { } #unregisterFile(element: WoltlabCoreFileElement): void { - if (this.showBigPreview) { + if (this.#useBigPreview) { element.parentElement!.innerHTML = ""; } else { element.parentElement!.parentElement!.remove(); @@ -198,7 +194,7 @@ export class FileProcessor { #registerFile(element: WoltlabCoreFileElement, container: HTMLElement | null = null): void { if (container === null) { - if (this.showBigPreview) { + if (this.#useBigPreview) { container = this.#container.querySelector(".fileUpload__preview"); if (container === null) { container = document.createElement("div"); @@ -213,7 +209,7 @@ export class FileProcessor { } } - if (!this.showBigPreview) { + if (!this.#useBigPreview) { insertFileInformation(container, element); } @@ -232,7 +228,7 @@ export class FileProcessor { this.#registerFile(this.#replaceElement); this.#replaceElement = undefined; - if (this.showBigPreview) { + if (this.#useBigPreview) { // `this.#replaceElement` need a new container, otherwise the element will be marked as erroneous, too. const tmpContainer = document.createElement("div"); tmpContainer.append(element); @@ -249,7 +245,7 @@ export class FileProcessor { } #fileInitializationCompleted(element: WoltlabCoreFileElement, container: HTMLElement): void { - if (this.showBigPreview) { + if (this.#useBigPreview) { element.dataset.previewUrl = element.link!; element.unbounded = true; } else { 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 a93e4a58fd..a66a36cb53 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 @@ -16,13 +16,13 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui #fieldId; #replaceElement = undefined; #fileInput; - #imageOnly; + #useBigPreview; #singleFileUpload; #extraButtons; #uploadResolve; - constructor(fieldId, singleFileUpload = false, imageOnly = false, extraButtons = []) { + constructor(fieldId, singleFileUpload = false, useBigPreview = false, extraButtons = []) { this.#fieldId = fieldId; - this.#imageOnly = imageOnly; + this.#useBigPreview = useBigPreview; this.#singleFileUpload = singleFileUpload; this.#extraButtons = extraButtons; this.#container = document.getElementById(fieldId + "Container"); @@ -43,10 +43,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui fileProcessors.set(fieldId, this); } get classPrefix() { - return this.showBigPreview ? "fileUpload__preview__" : "fileList__"; - } - get showBigPreview() { - return this.#singleFileUpload && this.#imageOnly; + return this.#useBigPreview ? "fileUpload__preview__" : "fileList__"; } addButtons(container, element) { const buttons = document.createElement("ul"); @@ -140,7 +137,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui return replaceButton; } #unregisterFile(element) { - if (this.showBigPreview) { + if (this.#useBigPreview) { element.parentElement.innerHTML = ""; } else { @@ -149,7 +146,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui } #registerFile(element, container = null) { if (container === null) { - if (this.showBigPreview) { + if (this.#useBigPreview) { container = this.#container.querySelector(".fileUpload__preview"); if (container === null) { container = document.createElement("div"); @@ -164,7 +161,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui this.#container.querySelector(".fileList").append(container); } } - if (!this.showBigPreview) { + if (!this.#useBigPreview) { (0, Helper_1.insertFileInformation)(container, element); } (0, Helper_1.trackUploadProgress)(container, element); @@ -180,7 +177,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui if (this.#replaceElement !== undefined) { this.#registerFile(this.#replaceElement); this.#replaceElement = undefined; - if (this.showBigPreview) { + if (this.#useBigPreview) { // `this.#replaceElement` need a new container, otherwise the element will be marked as erroneous, too. const tmpContainer = document.createElement("div"); tmpContainer.append(element); @@ -195,7 +192,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui }); } #fileInitializationCompleted(element, container) { - if (this.showBigPreview) { + if (this.#useBigPreview) { element.dataset.previewUrl = element.link; element.unbounded = true; } 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 4da671a60e..a41b418e81 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 @@ -41,6 +41,7 @@ final class FileProcessorFormField extends AbstractFormField */ private array $files = []; private bool $singleFileUpload = false; + private bool $bigPreview = false; private array $actionButtons = []; #[\Override] @@ -74,10 +75,6 @@ final class FileProcessorFormField extends AbstractFormField $this->context ), 'maxUploads' => $this->getFileProcessor()->getMaximumCount($this->context), - 'imageOnly' => \array_diff( - $this->getFileProcessor()->getAllowedFileExtensions($this->context), - ImageUtil::IMAGE_EXTENSIONS - ) === [], 'actionButtons' => $this->actionButtons, ]; } @@ -217,4 +214,33 @@ final class FileProcessorFormField extends AbstractFormField return $this; } + + /** + * Returns whether the big preview is shown for images. + */ + public function isBigPreview(): bool + { + return $this->bigPreview; + } + + /** + * Sets whether the big preview is shown for images. + */ + public function bigPreview(bool $bigPreview = true): self + { + if ( + $this->bigPreview + && \array_diff( + $this->getFileProcessor()->getAllowedFileExtensions($this->context), + ImageUtil::IMAGE_EXTENSIONS + ) !== [] + ) { + throw new \InvalidArgumentException( + "The big preview is only supported for images for the field '{$this->getId()}'." + ); + } + $this->bigPreview = $bigPreview; + + return $this; + } }