Add helper functions `trackUploadProgress` and `removeUploadProgress` for `WoltlabCor...

diff --git a/ts/WoltLabSuite/Core/Component/Attachment/Entry.ts b/ts/WoltLabSuite/Core/Component/Attachment/Entry.ts
index 0dc0d3a3059ed77a27b1e21708c0bfc6b114cfc9..d0d5eb0248ba205863cece1432087bd07f325665 100644 (file)
--- a/ts/WoltLabSuite/Core/Component/Attachment/Entry.ts
+++ b/ts/WoltLabSuite/Core/Component/Attachment/Entry.ts
@@ -5,6 +5,7 @@ import DomChangeListener from "WoltLabSuite/Core/Dom/Change/Listener";
 import { dispatchToCkeditor } from "../Ckeditor/Event";
 import { deleteFile } from "WoltLabSuite/Core/Api/Files/DeleteFile";
 import { getPhrase } from "WoltLabSuite/Core/Language";
+import { removeUploadProgress, trackUploadProgress } from "WoltLabSuite/Core/Component/File/File";
 
 type FileProcessorData = {
   attachmentID: number;
@@ -188,38 +189,6 @@ function markElementAsErroneous(element: HTMLElement, errorMessage: string): voi
   element.append(errorElement);
 }
 
-function trackUploadProgress(element: HTMLElement, file: WoltlabCoreFileElement): void {
-  const progress = document.createElement("progress");
-  progress.classList.add("fileList__item__progress__bar");
-  progress.max = 100;
-  const readout = document.createElement("span");
-  readout.classList.add("fileList__item__progress__readout");
-
-  file.addEventListener("uploadProgress", (event: CustomEvent<number>) => {
-    progress.value = event.detail;
-    readout.textContent = `${event.detail}%`;
-
-    if (progress.parentNode === null) {
-      element.classList.add("attachment__item--uploading");
-
-      const wrapper = document.createElement("div");
-      wrapper.classList.add("fileList__item__progress");
-      wrapper.append(progress, readout);
-
-      element.append(wrapper);
-    }
-  });
-}
-
-function removeUploadProgress(element: HTMLElement): void {
-  if (!element.classList.contains("attachment__item--uploading")) {
-    return;
-  }
-
-  element.classList.remove("attachment__item--uploading");
-  element.querySelector(".fileList__item__progress")?.remove();
-}
-
 export function createAttachmentFromFile(file: WoltlabCoreFileElement, editor: HTMLElement) {
   const element = document.createElement("li");
   element.classList.add("fileList__item", "attachment__item");

diff --git a/ts/WoltLabSuite/Core/Component/File/File.ts b/ts/WoltLabSuite/Core/Component/File/File.ts
new file mode 100644 (file)
index 0000000..d975623
--- /dev/null
+++ b/ts/WoltLabSuite/Core/Component/File/File.ts
@@ -0,0 +1,33 @@
+import WoltlabCoreFileElement from "WoltLabSuite/Core/Component/File/woltlab-core-file";
+
+export function trackUploadProgress(element: HTMLElement, file: WoltlabCoreFileElement): void {
+  const progress = document.createElement("progress");
+  progress.classList.add("fileList__item__progress__bar");
+  progress.max = 100;
+  const readout = document.createElement("span");
+  readout.classList.add("fileList__item__progress__readout");
+
+  file.addEventListener("uploadProgress", (event: CustomEvent<number>) => {
+    progress.value = event.detail;
+    readout.textContent = `${event.detail}%`;
+
+    if (progress.parentNode === null) {
+      element.classList.add("fileProcessor__item--uploading");
+
+      const wrapper = document.createElement("div");
+      wrapper.classList.add("fileList__item__progress");
+      wrapper.append(progress, readout);
+
+      element.append(wrapper);
+    }
+  });
+}
+
+export function removeUploadProgress(element: HTMLElement): void {
+  if (!element.classList.contains("fileProcessor__item--uploading")) {
+    return;
+  }
+
+  element.classList.remove("fileProcessor__item--uploading");
+  element.querySelector(".fileList__item__progress")?.remove();
+}

diff --git a/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts b/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts
index 963ae979f17f419a6acb47d05a61b47b3d0d57c5..a60cd2f3b3cc0ab5779d221ce6fb79eb05f6e9c4 100644 (file)
--- a/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts
+++ b/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts
@@ -10,6 +10,7 @@ import { getPhrase } from "WoltLabSuite/Core/Language";
 import { deleteFile } from "WoltLabSuite/Core/Api/Files/DeleteFile";
 import { formatFilesize } from "WoltLabSuite/Core/FileUtil";
 import DomChangeListener from "WoltLabSuite/Core/Dom/Change/Listener";
+import { removeUploadProgress, trackUploadProgress } from "WoltLabSuite/Core/Component/File/File";
 
 const _data = new Map<string, FileProcessor>();
 
@@ -203,38 +204,6 @@ export class FileProcessor {
     }
   }
 
-  #trackUploadProgress(element: HTMLElement, file: WoltlabCoreFileElement): void {
-    const progress = document.createElement("progress");
-    progress.classList.add("fileList__item__progress__bar");
-    progress.max = 100;
-    const readout = document.createElement("span");
-    readout.classList.add("fileList__item__progress__readout");
-
-    file.addEventListener("uploadProgress", (event: CustomEvent<number>) => {
-      progress.value = event.detail;
-      readout.textContent = `${event.detail}%`;
-
-      if (progress.parentNode === null) {
-        element.classList.add("fileProcessor__item--uploading");
-
-        const wrapper = document.createElement("div");
-        wrapper.classList.add("fileList__item__progress");
-        wrapper.append(progress, readout);
-
-        element.append(wrapper);
-      }
-    });
-  }
-
-  #removeUploadProgress(element: HTMLElement): void {
-    if (!element.classList.contains("fileProcessor__item--uploading")) {
-      return;
-    }
-
-    element.classList.remove("fileProcessor__item--uploading");
-    element.querySelector(".fileList__item__progress")?.remove();
-  }
-
   #registerFile(element: WoltlabCoreFileElement, container: HTMLElement | null = null): void {
     if (container === null) {
       if (this.showBigPreview) {
@@ -273,7 +242,7 @@ export class FileProcessor {
       container.append(fileSize);
     }
 
-    this.#trackUploadProgress(container, element);
+    trackUploadProgress(container, element);
 
     element.ready
       .then(() => {
@@ -302,7 +271,7 @@ export class FileProcessor {
         this.#markElementUploadHasFailed(container!, element, reason);
       })
       .finally(() => {
-        this.#removeUploadProgress(container!);
+        removeUploadProgress(container!);
       });
   }
 

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Attachment/Entry.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Attachment/Entry.js
index 8de7461f288bf038020a0a9d0d42f819e7d32751..b8ec9fd3a3b959cf957383efcbc79275ab480004 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Attachment/Entry.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Attachment/Entry.js
@@ -1,4 +1,4 @@
-define(["require", "exports", "tslib", "WoltLabSuite/Core/FileUtil", "WoltLabSuite/Core/Ui/Dropdown/Simple", "WoltLabSuite/Core/Dom/Change/Listener", "../Ckeditor/Event", "WoltLabSuite/Core/Api/Files/DeleteFile", "WoltLabSuite/Core/Language"], function (require, exports, tslib_1, FileUtil_1, Simple_1, Listener_1, Event_1, DeleteFile_1, Language_1) {
+define(["require", "exports", "tslib", "WoltLabSuite/Core/FileUtil", "WoltLabSuite/Core/Ui/Dropdown/Simple", "WoltLabSuite/Core/Dom/Change/Listener", "../Ckeditor/Event", "WoltLabSuite/Core/Api/Files/DeleteFile", "WoltLabSuite/Core/Language", "WoltLabSuite/Core/Component/File/File"], function (require, exports, tslib_1, FileUtil_1, Simple_1, Listener_1, Event_1, DeleteFile_1, Language_1, File_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.createAttachmentFromFile = void 0;
@@ -141,31 +141,6 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/FileUtil", "WoltLabSui
         errorElement.textContent = errorMessage;
         element.append(errorElement);
     }
-    function trackUploadProgress(element, file) {
-        const progress = document.createElement("progress");
-        progress.classList.add("fileList__item__progress__bar");
-        progress.max = 100;
-        const readout = document.createElement("span");
-        readout.classList.add("fileList__item__progress__readout");
-        file.addEventListener("uploadProgress", (event) => {
-            progress.value = event.detail;
-            readout.textContent = `${event.detail}%`;
-            if (progress.parentNode === null) {
-                element.classList.add("attachment__item--uploading");
-                const wrapper = document.createElement("div");
-                wrapper.classList.add("fileList__item__progress");
-                wrapper.append(progress, readout);
-                element.append(wrapper);
-            }
-        });
-    }
-    function removeUploadProgress(element) {
-        if (!element.classList.contains("attachment__item--uploading")) {
-            return;
-        }
-        element.classList.remove("attachment__item--uploading");
-        element.querySelector(".fileList__item__progress")?.remove();
-    }
     function createAttachmentFromFile(file, editor) {
         const element = document.createElement("li");
         element.classList.add("fileList__item", "attachment__item");
@@ -187,9 +162,9 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/FileUtil", "WoltLabSui
             fileInitializationFailed(element, file, reason);
         })
             .finally(() => {
-            removeUploadProgress(element);
+            (0, File_1.removeUploadProgress)(element);
         });
-        trackUploadProgress(element, file);
+        (0, File_1.trackUploadProgress)(element, file);
         return element;
     }
     exports.createAttachmentFromFile = createAttachmentFromFile;

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/File/File.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/File/File.js
new file mode 100644 (file)
index 0000000..7c95d78
--- /dev/null
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/File/File.js
@@ -0,0 +1,32 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.removeUploadProgress = exports.trackUploadProgress = void 0;
+    function trackUploadProgress(element, file) {
+        const progress = document.createElement("progress");
+        progress.classList.add("fileList__item__progress__bar");
+        progress.max = 100;
+        const readout = document.createElement("span");
+        readout.classList.add("fileList__item__progress__readout");
+        file.addEventListener("uploadProgress", (event) => {
+            progress.value = event.detail;
+            readout.textContent = `${event.detail}%`;
+            if (progress.parentNode === null) {
+                element.classList.add("fileProcessor__item--uploading");
+                const wrapper = document.createElement("div");
+                wrapper.classList.add("fileList__item__progress");
+                wrapper.append(progress, readout);
+                element.append(wrapper);
+            }
+        });
+    }
+    exports.trackUploadProgress = trackUploadProgress;
+    function removeUploadProgress(element) {
+        if (!element.classList.contains("fileProcessor__item--uploading")) {
+            return;
+        }
+        element.classList.remove("fileProcessor__item--uploading");
+        element.querySelector(".fileList__item__progress")?.remove();
+    }
+    exports.removeUploadProgress = removeUploadProgress;
+});

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/File/UploadField.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/File/UploadField.js
new file mode 100644 (file)
index 0000000..e69de29

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 af8bccc5778171389d88495244f8065061d561a9..b32c55ad3260736049dd8ac5db36c238c24788e1 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
@@ -4,7 +4,7 @@
  * @license   GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
  * @since     6.1
  */
-define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSuite/Core/Api/Files/DeleteFile", "WoltLabSuite/Core/FileUtil", "WoltLabSuite/Core/Dom/Change/Listener"], function (require, exports, tslib_1, Language_1, DeleteFile_1, FileUtil_1, Listener_1) {
+define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSuite/Core/Api/Files/DeleteFile", "WoltLabSuite/Core/FileUtil", "WoltLabSuite/Core/Dom/Change/Listener", "WoltLabSuite/Core/Component/File/File"], function (require, exports, tslib_1, Language_1, DeleteFile_1, FileUtil_1, Listener_1, File_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.getValues = exports.FileProcessor = void 0;
@@ -161,31 +161,6 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui
                 element.parentElement.parentElement.remove();
             }
         }
-        #trackUploadProgress(element, file) {
-            const progress = document.createElement("progress");
-            progress.classList.add("fileList__item__progress__bar");
-            progress.max = 100;
-            const readout = document.createElement("span");
-            readout.classList.add("fileList__item__progress__readout");
-            file.addEventListener("uploadProgress", (event) => {
-                progress.value = event.detail;
-                readout.textContent = `${event.detail}%`;
-                if (progress.parentNode === null) {
-                    element.classList.add("fileProcessor__item--uploading");
-                    const wrapper = document.createElement("div");
-                    wrapper.classList.add("fileList__item__progress");
-                    wrapper.append(progress, readout);
-                    element.append(wrapper);
-                }
-            });
-        }
-        #removeUploadProgress(element) {
-            if (!element.classList.contains("fileProcessor__item--uploading")) {
-                return;
-            }
-            element.classList.remove("fileProcessor__item--uploading");
-            element.querySelector(".fileList__item__progress")?.remove();
-        }
         #registerFile(element, container = null) {
             if (container === null) {
                 if (this.showBigPreview) {
@@ -219,7 +194,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui
                 fileSize.textContent = (0, FileUtil_1.formatFilesize)(element.fileSize || parseInt(element.dataset.fileSize));
                 container.append(fileSize);
             }
-            this.#trackUploadProgress(container, element);
+            (0, File_1.trackUploadProgress)(container, element);
             element.ready
                 .then(() => {
                 if (this.#replaceElement !== undefined) {
@@ -245,7 +220,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui
                 this.#markElementUploadHasFailed(container, element, reason);
             })
                 .finally(() => {
-                this.#removeUploadProgress(container);
+                (0, File_1.removeUploadProgress)(container);
             });
         }
         #fileInitializationCompleted(element, container) {