Set `addDeleteButton`, `addReplaceButton` and `addButtons` to protected

diff --git a/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts b/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts
index b83e456a26d44f100c7d4f482a68f36979dc5732..3a8fc92967ec713d07c532234cffd6488d6bcd72 100644 (file)
--- a/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts
+++ b/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts
@@ -47,60 +47,15 @@ export class FileProcessor {
     return this.#singleFileUpload && this.#imageOnly;
   }
 
-  async #registerFile(element: WoltlabCoreFileElement, elementContainer: HTMLElement | null = null): Promise<void> {
-    if (elementContainer === null) {
-      if (this.showBigPreview) {
-        elementContainer = this.#container.querySelector(".fileUpload__preview");
-        if (elementContainer === null) {
-          elementContainer = document.createElement("div");
-          elementContainer.classList.add("fileUpload__preview");
-          this.#uploadButton.insertAdjacentElement("beforebegin", elementContainer);
-        }
-      } else {
-        elementContainer = document.createElement("li");
-        elementContainer.classList.add("fileUpload__fileList__item");
-        this.#container.querySelector(".fileUpload__fileList")!.append(elementContainer);
-      }
-      elementContainer.append(element);
-    }
-
-    try {
-      await element.ready;
-
-      if (this.#replaceElement !== undefined) {
-        await deleteFile(this.#replaceElement.fileId!);
-        this.#replaceElement = undefined;
-      }
-    } catch (reason) {
-      // reinsert the element and show an error message
-      if (this.#replaceElement !== undefined) {
-        await this.#registerFile(this.#replaceElement);
-        this.#replaceElement = undefined;
-      }
-      this.#markElementUploadHasFailed(elementContainer, element, reason);
-      return;
-    }
-
-    if (this.showBigPreview) {
-      element.dataset.previewUrl = element.link!;
-      element.unbounded = 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;
-      }
-    }
+  protected addButtons(element: WoltlabCoreFileElement): void {
+    const buttons = document.createElement("ul");
+    buttons.classList.add("buttonList");
+    buttons.classList.add(this.classPrefix + "buttons");
 
-    const input = document.createElement("input");
-    input.type = "hidden";
-    input.name = this.#singleFileUpload ? this.#fieldId : this.#fieldId + "[]";
-    input.value = element.fileId!.toString();
-    elementContainer.append(input);
+    this.addDeleteButton(element, buttons);
+    this.addReplaceButton(element, buttons);
 
-    this.#addButtons(element);
+    element.parentElement!.append(buttons);
   }
 
   #markElementUploadHasFailed(container: HTMLElement, element: WoltlabCoreFileElement, reason: unknown): void {
@@ -136,18 +91,7 @@ export class FileProcessor {
     element.append(errorElement);
   }
 
-  #addButtons(element: WoltlabCoreFileElement): void {
-    const buttons = document.createElement("ul");
-    buttons.classList.add("buttonList");
-    buttons.classList.add(this.classPrefix + "buttons");
-
-    this.#addDeleteButton(element, buttons);
-    this.#addReplaceButton(element, buttons);
-
-    element.parentElement!.append(buttons);
-  }
-
-  #addDeleteButton(element: WoltlabCoreFileElement, buttons: HTMLUListElement): void {
+  protected addDeleteButton(element: WoltlabCoreFileElement, buttons: HTMLUListElement): void {
     const deleteButton = document.createElement("button");
     deleteButton.type = "button";
     deleteButton.classList.add("button", "small");
@@ -163,15 +107,7 @@ export class FileProcessor {
     buttons.append(listItem);
   }
 
-  #unregisterFile(element: WoltlabCoreFileElement): void {
-    if (this.showBigPreview) {
-      element.parentElement!.innerHTML = "";
-    } else {
-      element.parentElement!.remove();
-    }
-  }
-
-  #addReplaceButton(element: WoltlabCoreFileElement, buttons: HTMLUListElement): void {
+  protected addReplaceButton(element: WoltlabCoreFileElement, buttons: HTMLUListElement): void {
     const replaceButton = document.createElement("button");
     replaceButton.type = "button";
     replaceButton.classList.add("button", "small");
@@ -217,4 +153,68 @@ export class FileProcessor {
     listItem.append(replaceButton);
     buttons.append(listItem);
   }
+
+  #unregisterFile(element: WoltlabCoreFileElement): void {
+    if (this.showBigPreview) {
+      element.parentElement!.innerHTML = "";
+    } else {
+      element.parentElement!.remove();
+    }
+  }
+
+  async #registerFile(element: WoltlabCoreFileElement, elementContainer: HTMLElement | null = null): Promise<void> {
+    if (elementContainer === null) {
+      if (this.showBigPreview) {
+        elementContainer = this.#container.querySelector(".fileUpload__preview");
+        if (elementContainer === null) {
+          elementContainer = document.createElement("div");
+          elementContainer.classList.add("fileUpload__preview");
+          this.#uploadButton.insertAdjacentElement("beforebegin", elementContainer);
+        }
+      } else {
+        elementContainer = document.createElement("li");
+        elementContainer.classList.add("fileUpload__fileList__item");
+        this.#container.querySelector(".fileUpload__fileList")!.append(elementContainer);
+      }
+      elementContainer.append(element);
+    }
+
+    try {
+      await element.ready;
+
+      if (this.#replaceElement !== undefined) {
+        await deleteFile(this.#replaceElement.fileId!);
+        this.#replaceElement = undefined;
+      }
+    } catch (reason) {
+      // reinsert the element and show an error message
+      if (this.#replaceElement !== undefined) {
+        await this.#registerFile(this.#replaceElement);
+        this.#replaceElement = undefined;
+      }
+      this.#markElementUploadHasFailed(elementContainer, element, reason);
+      return;
+    }
+
+    if (this.showBigPreview) {
+      element.dataset.previewUrl = element.link!;
+      element.unbounded = 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 input = document.createElement("input");
+    input.type = "hidden";
+    input.name = this.#singleFileUpload ? this.#fieldId : this.#fieldId + "[]";
+    input.value = element.fileId!.toString();
+    elementContainer.append(input);
+
+    this.addButtons(element);
+  }
 }

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 a3fcd5b15332c4923105114f098935eb8c3b8167..a4735e06f6ed1deaf95207f56876e02c06313708 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
@@ -39,59 +39,13 @@ define(["require", "exports", "WoltLabSuite/Core/Language", "WoltLabSuite/Core/A
         get showBigPreview() {
             return this.#singleFileUpload && this.#imageOnly;
         }
-        async #registerFile(element, elementContainer = null) {
-            if (elementContainer === null) {
-                if (this.showBigPreview) {
-                    elementContainer = this.#container.querySelector(".fileUpload__preview");
-                    if (elementContainer === null) {
-                        elementContainer = document.createElement("div");
-                        elementContainer.classList.add("fileUpload__preview");
-                        this.#uploadButton.insertAdjacentElement("beforebegin", elementContainer);
-                    }
-                }
-                else {
-                    elementContainer = document.createElement("li");
-                    elementContainer.classList.add("fileUpload__fileList__item");
-                    this.#container.querySelector(".fileUpload__fileList").append(elementContainer);
-                }
-                elementContainer.append(element);
-            }
-            try {
-                await element.ready;
-                if (this.#replaceElement !== undefined) {
-                    await (0, DeleteFile_1.deleteFile)(this.#replaceElement.fileId);
-                    this.#replaceElement = undefined;
-                }
-            }
-            catch (reason) {
-                // reinsert the element and show an error message
-                if (this.#replaceElement !== undefined) {
-                    await this.#registerFile(this.#replaceElement);
-                    this.#replaceElement = undefined;
-                }
-                this.#markElementUploadHasFailed(elementContainer, element, reason);
-                return;
-            }
-            if (this.showBigPreview) {
-                element.dataset.previewUrl = element.link;
-                element.unbounded = 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 input = document.createElement("input");
-            input.type = "hidden";
-            input.name = this.#singleFileUpload ? this.#fieldId : this.#fieldId + "[]";
-            input.value = element.fileId.toString();
-            elementContainer.append(input);
-            this.#addButtons(element);
+        addButtons(element) {
+            const buttons = document.createElement("ul");
+            buttons.classList.add("buttonList");
+            buttons.classList.add(this.classPrefix + "buttons");
+            this.addDeleteButton(element, buttons);
+            this.addReplaceButton(element, buttons);
+            element.parentElement.append(buttons);
         }
         #markElementUploadHasFailed(container, element, reason) {
             if (reason instanceof Error) {
@@ -121,15 +75,7 @@ define(["require", "exports", "WoltLabSuite/Core/Language", "WoltLabSuite/Core/A
             errorElement.textContent = errorMessage;
             element.append(errorElement);
         }
-        #addButtons(element) {
-            const buttons = document.createElement("ul");
-            buttons.classList.add("buttonList");
-            buttons.classList.add(this.classPrefix + "buttons");
-            this.#addDeleteButton(element, buttons);
-            this.#addReplaceButton(element, buttons);
-            element.parentElement.append(buttons);
-        }
-        #addDeleteButton(element, buttons) {
+        addDeleteButton(element, buttons) {
             const deleteButton = document.createElement("button");
             deleteButton.type = "button";
             deleteButton.classList.add("button", "small");
@@ -142,15 +88,7 @@ define(["require", "exports", "WoltLabSuite/Core/Language", "WoltLabSuite/Core/A
             listItem.append(deleteButton);
             buttons.append(listItem);
         }
-        #unregisterFile(element) {
-            if (this.showBigPreview) {
-                element.parentElement.innerHTML = "";
-            }
-            else {
-                element.parentElement.remove();
-            }
-        }
-        #addReplaceButton(element, buttons) {
+        addReplaceButton(element, buttons) {
             const replaceButton = document.createElement("button");
             replaceButton.type = "button";
             replaceButton.classList.add("button", "small");
@@ -184,6 +122,68 @@ define(["require", "exports", "WoltLabSuite/Core/Language", "WoltLabSuite/Core/A
             listItem.append(replaceButton);
             buttons.append(listItem);
         }
+        #unregisterFile(element) {
+            if (this.showBigPreview) {
+                element.parentElement.innerHTML = "";
+            }
+            else {
+                element.parentElement.remove();
+            }
+        }
+        async #registerFile(element, elementContainer = null) {
+            if (elementContainer === null) {
+                if (this.showBigPreview) {
+                    elementContainer = this.#container.querySelector(".fileUpload__preview");
+                    if (elementContainer === null) {
+                        elementContainer = document.createElement("div");
+                        elementContainer.classList.add("fileUpload__preview");
+                        this.#uploadButton.insertAdjacentElement("beforebegin", elementContainer);
+                    }
+                }
+                else {
+                    elementContainer = document.createElement("li");
+                    elementContainer.classList.add("fileUpload__fileList__item");
+                    this.#container.querySelector(".fileUpload__fileList").append(elementContainer);
+                }
+                elementContainer.append(element);
+            }
+            try {
+                await element.ready;
+                if (this.#replaceElement !== undefined) {
+                    await (0, DeleteFile_1.deleteFile)(this.#replaceElement.fileId);
+                    this.#replaceElement = undefined;
+                }
+            }
+            catch (reason) {
+                // reinsert the element and show an error message
+                if (this.#replaceElement !== undefined) {
+                    await this.#registerFile(this.#replaceElement);
+                    this.#replaceElement = undefined;
+                }
+                this.#markElementUploadHasFailed(elementContainer, element, reason);
+                return;
+            }
+            if (this.showBigPreview) {
+                element.dataset.previewUrl = element.link;
+                element.unbounded = 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 input = document.createElement("input");
+            input.type = "hidden";
+            input.name = this.#singleFileUpload ? this.#fieldId : this.#fieldId + "[]";
+            input.value = element.fileId.toString();
+            elementContainer.append(input);
+            this.addButtons(element);
+        }
     }
     exports.FileProcessor = FileProcessor;
 });