Add a callback that is triggered when the value of a FileProcessorFormField is changed.

diff --git a/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts b/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts
index 18e541f2b65ccaa1db38a743bbc35876e4402217..b618c51c0c654ab7de37570c9830ccb8156ac534 100644 (file)
--- a/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts
+++ b/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts
@@ -20,6 +20,7 @@ import { innerError } from "WoltLabSuite/Core/Dom/Util";
 
 type FileId = string;
 const fileProcessors = new Map<FileId, FileProcessor>();
+const callbacks = new Map<FileId, ((values: undefined | number | Set<number>) => void)[]>();
 
 export interface ExtraButton {
   title: string;
@@ -197,6 +198,8 @@ export class FileProcessor {
       const result = await deleteFile(element.fileId!);
       if (result.ok) {
         this.#unregisterFile(element);
+
+        notifyValueChange(this.#fieldId, this.values);
       } else {
         let container: HTMLElement = element;
         if (!this.#useBigPreview) {
@@ -357,6 +360,8 @@ export class FileProcessor {
     container.append(input);
 
     this.addButtons(container, element);
+
+    notifyValueChange(this.#fieldId, this.values);
   }
 
   get values(): undefined | number | Set<number> {
@@ -395,3 +400,30 @@ export function getValues(fieldId: string): undefined | number | Set<number> {
 
   return field.values;
 }
+
+/**
+ * Registers a callback that will be called when the value of the field changes.
+ *
+ * @since 6.2
+ */
+export function registerCallback(fieldId: string, callback: (values: undefined | number | Set<number>) => void): void {
+  if (!callbacks.has(fieldId)) {
+    callbacks.set(fieldId, []);
+  }
+
+  callbacks.get(fieldId)!.push(callback);
+}
+
+/**
+ * @since 6.2
+ */
+export function unregisterCallback(
+  fieldId: string,
+  callback: (values: undefined | number | Set<number>) => void,
+): void {
+  callbacks.set(fieldId, callbacks.get(fieldId)?.filter((registeredCallback) => registeredCallback !== callback) ?? []);
+}
+
+function notifyValueChange(fieldId: string, values: undefined | number | Set<number>): void {
+  callbacks.get(fieldId)?.forEach((callback) => callback(values));
+}

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 a9badcb066dd065abd276f9b78e073548f10a3af..e9ce9108d5c507ae10aeaaec8b7702016b693bbc 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
@@ -9,8 +9,11 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.FileProcessor = void 0;
     exports.getValues = getValues;
+    exports.registerCallback = registerCallback;
+    exports.unregisterCallback = unregisterCallback;
     Listener_1 = tslib_1.__importDefault(Listener_1);
     const fileProcessors = new Map();
+    const callbacks = new Map();
     class FileProcessor {
         #container;
         #uploadButton;
@@ -145,6 +148,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui
                 const result = await (0, DeleteFile_1.deleteFile)(element.fileId);
                 if (result.ok) {
                     this.#unregisterFile(element);
+                    notifyValueChange(this.#fieldId, this.values);
                 }
                 else {
                     let container = element;
@@ -282,6 +286,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui
             input.value = element.fileId.toString();
             container.append(input);
             this.addButtons(container, element);
+            notifyValueChange(this.#fieldId, this.values);
         }
         get values() {
             if (this.#singleFileUpload) {
@@ -311,4 +316,24 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui
         }
         return field.values;
     }
+    /**
+     * Registers a callback that will be called when the value of the field changes.
+     *
+     * @since 6.2
+     */
+    function registerCallback(fieldId, callback) {
+        if (!callbacks.has(fieldId)) {
+            callbacks.set(fieldId, []);
+        }
+        callbacks.get(fieldId).push(callback);
+    }
+    /**
+     * @since 6.2
+     */
+    function unregisterCallback(fieldId, callback) {
+        callbacks.set(fieldId, callbacks.get(fieldId)?.filter((registeredCallback) => registeredCallback !== callback) ?? []);
+    }
+    function notifyValueChange(fieldId, values) {
+        callbacks.get(fieldId)?.forEach((callback) => callback(values));
+    }
 });