From 6c58ea6a93c7b0936972d9c9b45db3016b23579f Mon Sep 17 00:00:00 2001 From: Cyperghost Date: Wed, 3 Jul 2024 09:39:01 +0200 Subject: [PATCH] Add helper function to insert default file information (size, filename and the file) --- .../Core/Component/Attachment/Entry.ts | 16 ++-------------- ts/WoltLabSuite/Core/Component/File/File.ts | 17 +++++++++++++++++ .../Builder/Field/Controller/FileProcessor.ts | 19 ++----------------- .../Core/Component/Attachment/Entry.js | 13 ++----------- .../WoltLabSuite/Core/Component/File/File.js | 17 +++++++++++++++-- .../Builder/Field/Controller/FileProcessor.js | 15 ++------------- 6 files changed, 40 insertions(+), 57 deletions(-) diff --git a/ts/WoltLabSuite/Core/Component/Attachment/Entry.ts b/ts/WoltLabSuite/Core/Component/Attachment/Entry.ts index 6afc50c64d..118d270a8c 100644 --- a/ts/WoltLabSuite/Core/Component/Attachment/Entry.ts +++ b/ts/WoltLabSuite/Core/Component/Attachment/Entry.ts @@ -1,4 +1,3 @@ -import { formatFilesize } from "WoltLabSuite/Core/FileUtil"; import type WoltlabCoreFileElement from "../File/woltlab-core-file"; import { initFragment, toggleDropdown } from "WoltLabSuite/Core/Ui/Dropdown/Simple"; import DomChangeListener from "WoltLabSuite/Core/Dom/Change/Listener"; @@ -7,6 +6,7 @@ import { deleteFile } from "WoltLabSuite/Core/Api/Files/DeleteFile"; import { getPhrase } from "WoltLabSuite/Core/Language"; import { fileInitializationFailed, + insertFileInformation, removeUploadProgress, trackUploadProgress, } from "WoltLabSuite/Core/Component/File/File"; @@ -158,19 +158,7 @@ export function createAttachmentFromFile(file: WoltlabCoreFileElement, editor: H const element = document.createElement("li"); element.classList.add("fileList__item", "attachment__item"); - const fileWrapper = document.createElement("div"); - fileWrapper.classList.add("fileList__item__file"); - fileWrapper.append(file); - - const filename = document.createElement("div"); - filename.classList.add("fileList__item__filename"); - filename.textContent = file.filename || file.dataset.filename!; - - const fileSize = document.createElement("div"); - fileSize.classList.add("fileList__item__fileSize"); - fileSize.textContent = formatFilesize(file.fileSize || parseInt(file.dataset.fileSize!)); - - element.append(fileWrapper, filename, fileSize); + insertFileInformation(element, file); void file.ready .then(() => { diff --git a/ts/WoltLabSuite/Core/Component/File/File.ts b/ts/WoltLabSuite/Core/Component/File/File.ts index 74063f1ae6..1f4f36f91b 100644 --- a/ts/WoltLabSuite/Core/Component/File/File.ts +++ b/ts/WoltLabSuite/Core/Component/File/File.ts @@ -1,5 +1,6 @@ import WoltlabCoreFileElement from "WoltLabSuite/Core/Component/File/woltlab-core-file"; import { getPhrase } from "WoltLabSuite/Core/Language"; +import { formatFilesize } from "WoltLabSuite/Core/FileUtil"; export function trackUploadProgress(element: HTMLElement, file: WoltlabCoreFileElement): void { const progress = document.createElement("progress"); @@ -71,3 +72,19 @@ function markElementAsErroneous(element: HTMLElement, errorMessage: string): voi element.append(errorElement); } + +export function insertFileInformation(container: HTMLElement, file: WoltlabCoreFileElement): void { + const fileWrapper = document.createElement("div"); + fileWrapper.classList.add("fileList__item__file"); + fileWrapper.append(file); + + const filename = document.createElement("div"); + filename.classList.add("fileList__item__filename"); + filename.textContent = file.filename || file.dataset.filename!; + + const fileSize = document.createElement("div"); + fileSize.classList.add("fileList__item__fileSize"); + fileSize.textContent = formatFilesize(file.fileSize || parseInt(file.dataset.fileSize!)); + + container.append(fileWrapper, filename, fileSize); +} diff --git a/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts b/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts index 0784e14da2..0aceec393d 100644 --- a/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts +++ b/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts @@ -8,10 +8,10 @@ import WoltlabCoreFileElement from "WoltLabSuite/Core/Component/File/woltlab-core-file"; 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 { fileInitializationFailed, + insertFileInformation, removeUploadProgress, trackUploadProgress, } from "WoltLabSuite/Core/Component/File/File"; @@ -199,22 +199,7 @@ export class FileProcessor { } if (!this.showBigPreview) { - const fileContainer = document.createElement("div"); - fileContainer.classList.add(this.classPrefix + "item__file"); - fileContainer.append(element); - container.append(fileContainer); - - const filename = document.createElement("div"); - filename.classList.add(this.classPrefix + "item__filename"); - filename.textContent = element.filename || element.dataset.filename!; - - container.append(filename); - - const fileSize = document.createElement("div"); - fileSize.classList.add(this.classPrefix + "item__fileSize"); - fileSize.textContent = formatFilesize(element.fileSize || parseInt(element.dataset.fileSize!)); - - container.append(fileSize); + insertFileInformation(container, element); } trackUploadProgress(container, element); 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 fa387f2fa1..ae2adac05f 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", "WoltLabSuite/Core/Component/File/File"], function (require, exports, tslib_1, FileUtil_1, Simple_1, Listener_1, Event_1, DeleteFile_1, Language_1, File_1) { +define(["require", "exports", "tslib", "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, Simple_1, Listener_1, Event_1, DeleteFile_1, Language_1, File_1) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.createAttachmentFromFile = void 0; @@ -113,16 +113,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/FileUtil", "WoltLabSui function createAttachmentFromFile(file, editor) { const element = document.createElement("li"); element.classList.add("fileList__item", "attachment__item"); - const fileWrapper = document.createElement("div"); - fileWrapper.classList.add("fileList__item__file"); - fileWrapper.append(file); - const filename = document.createElement("div"); - filename.classList.add("fileList__item__filename"); - filename.textContent = file.filename || file.dataset.filename; - const fileSize = document.createElement("div"); - fileSize.classList.add("fileList__item__fileSize"); - fileSize.textContent = (0, FileUtil_1.formatFilesize)(file.fileSize || parseInt(file.dataset.fileSize)); - element.append(fileWrapper, filename, fileSize); + (0, File_1.insertFileInformation)(element, file); void file.ready .then(() => { fileInitializationCompleted(element, file, editor); diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/File/File.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/File/File.js index 9830d2e06a..545b3ec8dd 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/File/File.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/File/File.js @@ -1,7 +1,7 @@ -define(["require", "exports", "WoltLabSuite/Core/Language"], function (require, exports, Language_1) { +define(["require", "exports", "WoltLabSuite/Core/Language", "WoltLabSuite/Core/FileUtil"], function (require, exports, Language_1, FileUtil_1) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); - exports.fileInitializationFailed = exports.removeUploadProgress = exports.trackUploadProgress = void 0; + exports.insertFileInformation = exports.fileInitializationFailed = exports.removeUploadProgress = exports.trackUploadProgress = void 0; function trackUploadProgress(element, file) { const progress = document.createElement("progress"); progress.classList.add("fileList__item__progress__bar"); @@ -61,4 +61,17 @@ define(["require", "exports", "WoltLabSuite/Core/Language"], function (require, errorElement.textContent = errorMessage; element.append(errorElement); } + function insertFileInformation(container, file) { + const fileWrapper = document.createElement("div"); + fileWrapper.classList.add("fileList__item__file"); + fileWrapper.append(file); + const filename = document.createElement("div"); + filename.classList.add("fileList__item__filename"); + filename.textContent = file.filename || file.dataset.filename; + const fileSize = document.createElement("div"); + fileSize.classList.add("fileList__item__fileSize"); + fileSize.textContent = (0, FileUtil_1.formatFilesize)(file.fileSize || parseInt(file.dataset.fileSize)); + container.append(fileWrapper, filename, fileSize); + } + exports.insertFileInformation = insertFileInformation; }); 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 00e1fd1011..82b3bb4194 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", "WoltLabSuite/Core/Component/File/File"], function (require, exports, tslib_1, Language_1, DeleteFile_1, FileUtil_1, Listener_1, File_1) { +define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSuite/Core/Api/Files/DeleteFile", "WoltLabSuite/Core/Dom/Change/Listener", "WoltLabSuite/Core/Component/File/File"], function (require, exports, tslib_1, Language_1, DeleteFile_1, Listener_1, File_1) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.getValues = exports.FileProcessor = void 0; @@ -155,18 +155,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui } } if (!this.showBigPreview) { - const fileContainer = document.createElement("div"); - fileContainer.classList.add(this.classPrefix + "item__file"); - fileContainer.append(element); - container.append(fileContainer); - const filename = document.createElement("div"); - filename.classList.add(this.classPrefix + "item__filename"); - filename.textContent = element.filename || element.dataset.filename; - container.append(filename); - const fileSize = document.createElement("div"); - fileSize.classList.add(this.classPrefix + "item__fileSize"); - fileSize.textContent = (0, FileUtil_1.formatFilesize)(element.fileSize || parseInt(element.dataset.fileSize)); - container.append(fileSize); + (0, File_1.insertFileInformation)(container, element); } (0, File_1.trackUploadProgress)(container, element); element.ready -- 2.20.1