From: Cyperghost Date: Tue, 2 Jul 2024 08:43:23 +0000 (+0200) Subject: Add helper functions `trackUploadProgress` and `removeUploadProgress` for `WoltlabCor... X-Git-Tag: 6.1.0_Alpha_1~41^2~13 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=e1ce9ff03228ea945153462d3ffbe0d00905e185;p=GitHub%2FWoltLab%2FWCF.git Add helper functions `trackUploadProgress` and `removeUploadProgress` for `WoltlabCoreFileElement`. --- diff --git a/ts/WoltLabSuite/Core/Component/Attachment/Entry.ts b/ts/WoltLabSuite/Core/Component/Attachment/Entry.ts index 0dc0d3a305..d0d5eb0248 100644 --- 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) => { - 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 index 0000000000..d975623357 --- /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) => { + 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 963ae979f1..a60cd2f3b3 100644 --- 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(); @@ -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) => { - 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 8de7461f28..b8ec9fd3a3 100644 --- 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 index 0000000000..7c95d78b4d --- /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 index 0000000000..e69de29bb2 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 af8bccc577..b32c55ad32 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 @@ -4,7 +4,7 @@ * @license GNU Lesser General Public License * @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) {