vgapp 1.5.6 → 1.5.8

package/app/modules/vgfiles/js/base.js

@@ -1,6 +1,6 @@
 /**
- * Описание: базовая логика выбора, валидации и отображения файлов VGFiles.
- * Возможности: управляет набором файлов, ошибками, списками, кастомными действиями, статистикой и скрытыми полями формы.
+ * Описание: базовая логика выбора, валидации и отображения файлов VGFiles.
+ * Возможности: управляет файлами, валидацией, списками, миниатюрами и иконками, действиями, статистикой и скрытыми полями.
  */
 import BaseModule from "../../base-module";
 import {mergeDeepObject} from "../../../utils/js/functions";
@@ -9,6 +9,7 @@ import {lang_messages} from "../../../utils/js/components/lang";
 import {Classes, Manipulator} from "../../../utils/js/dom/manipulator";
 import Selectors from "../../../utils/js/dom/selectors";
 import {getSVG} from "../../module-fn";
+import {resolveFileIconName} from "../../../utils/js/components/file-icon";
 import VGFilePreview from "../../vgfilepreview";
 import {extractAudioMetadata} from "../../../utils/js/components/audio-metadata";
 
@@ -26,10 +27,10 @@ class VGFilesBase extends BaseModule {
 		this._isInitialized = true;
 
 		this._tpl = Html('dom');
-		this._files = [];
-		this._errors = new Set();
-		this._validationErrorsByKey = new Map();
-		this._fileObjectUrls = new Map();
+		this._files = [];
+		this._errors = new Set();
+		this._validationErrorsByKey = new Map();
+		this._fileObjectUrls = new Map();
 		this._audioMetaPromises = new Map();
 
 		this._nodes = {
@@ -198,10 +199,10 @@ class VGFilesBase extends BaseModule {
 			filesToProcess = this._mergeFilesByOrder(incoming, this._files, Boolean(this._params.prepend));
 		}
 
-		this._files = this._filterFiles(filesToProcess);
-		this._syncSingleInputSubmission();
-
-		this._renderErrors();
+		this._files = this._filterFiles(filesToProcess);
+		this._syncSingleInputSubmission();
+
+		this._renderErrors();
 		this._enrichAudioMetadata(this._files);
 
 		return this._files;
@@ -282,119 +283,119 @@ class VGFilesBase extends BaseModule {
 		return attrs;
 	}
 
-	_filterFiles(files) {
-		this._errors.clear();
-		this._validationErrorsByKey.clear();
-		const { count, sizes, total } = this._params.limits;
-		const maxSize = sizes * 1024 * 1024;
-		const maxTotalSize = total * 1024 * 1024;
-
-		let currentTotalSize = 0;
-		let validCount = 0;
-		const visibleFiles = [];
-
-		for (const file of files) {
-			const fileErrors = new Set();
-
-			if (count > 0 && validCount >= count) {
-				this._errors.add('is-count');
-				continue;
-			}
-
-			if (this._params.types.length && !this._params.types.includes(file.type)) {
-				fileErrors.add('is-types');
-			}
-
-			if (file.size > maxSize) {
-				fileErrors.add('is-sizes');
-			}
-
-			if (!fileErrors.size && maxTotalSize > 0 && currentTotalSize + file.size > maxTotalSize) {
-				fileErrors.add('is-total-size');
-			}
-
-			visibleFiles.push(file);
-
-			if (fileErrors.size) {
-				fileErrors.forEach(error => this._errors.add(error));
-				this._validationErrorsByKey.set(this._getFileKey(file), fileErrors);
-				continue;
-			}
-
-			validCount += 1;
-			currentTotalSize += file.size;
-		}
-
-		return visibleFiles;
-	}
-
-	_isFileValid(file) {
-		return !this._validationErrorsByKey.has(this._getFileKey(file));
-	}
-
-	_syncSingleInputSubmission() {
-		if (Number(this._params?.limits?.count) !== 1) return;
-
-		const selectedFile = this._files[0];
-		const canSubmit = !this._params.ajax && (!selectedFile || this._isFileValid(selectedFile));
-		this._preventOriginalInputFromSubmit(canSubmit);
-	}
-
-	_getFileValidationMessages(file) {
-		const errors = this._validationErrorsByKey.get(this._getFileKey(file));
-		if (!errors?.size) return [];
-
-		const messages = lang_messages(this._params.lang, 'files') || this._getFallbackErrors();
-		return Array.from(errors, error => messages[error] || error);
-	}
-
-	_getFileValidationLabel(file) {
-		const messages = this._getFileValidationMessages(file);
-		if (!messages.length) return '';
-
-		const fileName = this._getShortValidationFileName(file?.name);
-		return [fileName, messages.join('. ')].filter(Boolean).join(' — ');
-	}
-
-	_getFullFileValidationLabel(file) {
-		const messages = this._getFileValidationMessages(file);
-		if (!messages.length) return '';
-
-		const fileName = String(file?.name || '').trim();
-		return [fileName, messages.join('. ')].filter(Boolean).join(' — ');
-	}
-
-	_getShortValidationFileName(fileName) {
-		const name = String(fileName || '').trim();
-		if (name.length <= 24) return name;
-
-		const dotIndex = name.lastIndexOf('.');
-		const hasExtension = dotIndex > 0 && name.length - dotIndex <= 10;
-		const baseName = hasExtension ? name.slice(0, dotIndex) : name;
-		const extension = hasExtension ? name.slice(dotIndex) : '';
-
-		return `${baseName.slice(0, 5)}...${extension}`;
-	}
-
-	_decorateValidationItem(item, file) {
-		if (this._isFileValid(file)) return item;
-
-		Classes.add(item, 'failing');
-		Classes.add(item, 'validation-error');
-
-		return item;
-	}
-
-	_forgetFileValidation(file) {
-		if (!file) return;
-
-		this._validationErrorsByKey.delete(this._getFileKey(file));
-		this._errors.clear();
-		this._validationErrorsByKey.forEach(errors => {
-			errors.forEach(error => this._errors.add(error));
-		});
-		this._renderErrors();
-	}
+	_filterFiles(files) {
+		this._errors.clear();
+		this._validationErrorsByKey.clear();
+		const { count, sizes, total } = this._params.limits;
+		const maxSize = sizes * 1024 * 1024;
+		const maxTotalSize = total * 1024 * 1024;
+
+		let currentTotalSize = 0;
+		let validCount = 0;
+		const visibleFiles = [];
+
+		for (const file of files) {
+			const fileErrors = new Set();
+
+			if (count > 0 && validCount >= count) {
+				this._errors.add('is-count');
+				continue;
+			}
+
+			if (this._params.types.length && !this._params.types.includes(file.type)) {
+				fileErrors.add('is-types');
+			}
+
+			if (file.size > maxSize) {
+				fileErrors.add('is-sizes');
+			}
+
+			if (!fileErrors.size && maxTotalSize > 0 && currentTotalSize + file.size > maxTotalSize) {
+				fileErrors.add('is-total-size');
+			}
+
+			visibleFiles.push(file);
+
+			if (fileErrors.size) {
+				fileErrors.forEach(error => this._errors.add(error));
+				this._validationErrorsByKey.set(this._getFileKey(file), fileErrors);
+				continue;
+			}
+
+			validCount += 1;
+			currentTotalSize += file.size;
+		}
+
+		return visibleFiles;
+	}
+
+	_isFileValid(file) {
+		return !this._validationErrorsByKey.has(this._getFileKey(file));
+	}
+
+	_syncSingleInputSubmission() {
+		if (Number(this._params?.limits?.count) !== 1) return;
+
+		const selectedFile = this._files[0];
+		const canSubmit = !this._params.ajax && (!selectedFile || this._isFileValid(selectedFile));
+		this._preventOriginalInputFromSubmit(canSubmit);
+	}
+
+	_getFileValidationMessages(file) {
+		const errors = this._validationErrorsByKey.get(this._getFileKey(file));
+		if (!errors?.size) return [];
+
+		const messages = lang_messages(this._params.lang, 'files') || this._getFallbackErrors();
+		return Array.from(errors, error => messages[error] || error);
+	}
+
+	_getFileValidationLabel(file) {
+		const messages = this._getFileValidationMessages(file);
+		if (!messages.length) return '';
+
+		const fileName = this._getShortValidationFileName(file?.name);
+		return [fileName, messages.join('. ')].filter(Boolean).join(' — ');
+	}
+
+	_getFullFileValidationLabel(file) {
+		const messages = this._getFileValidationMessages(file);
+		if (!messages.length) return '';
+
+		const fileName = String(file?.name || '').trim();
+		return [fileName, messages.join('. ')].filter(Boolean).join(' — ');
+	}
+
+	_getShortValidationFileName(fileName) {
+		const name = String(fileName || '').trim();
+		if (name.length <= 24) return name;
+
+		const dotIndex = name.lastIndexOf('.');
+		const hasExtension = dotIndex > 0 && name.length - dotIndex <= 10;
+		const baseName = hasExtension ? name.slice(0, dotIndex) : name;
+		const extension = hasExtension ? name.slice(dotIndex) : '';
+
+		return `${baseName.slice(0, 5)}...${extension}`;
+	}
+
+	_decorateValidationItem(item, file) {
+		if (this._isFileValid(file)) return item;
+
+		Classes.add(item, 'failing');
+		Classes.add(item, 'validation-error');
+
+		return item;
+	}
+
+	_forgetFileValidation(file) {
+		if (!file) return;
+
+		this._validationErrorsByKey.delete(this._getFileKey(file));
+		this._errors.clear();
+		this._validationErrorsByKey.forEach(errors => {
+			errors.forEach(error => this._errors.add(error));
+		});
+		this._renderErrors();
+	}
 
 	_getSizes(size, isArray = false) {
 		const totalSize = isArray ? this._files.reduce((acc, f) => acc + f.size, 0) : size;
@@ -418,12 +419,12 @@ class VGFilesBase extends BaseModule {
 		}
 	}
 
-	_renderErrors() {
-		if (!this._errors.size) {
-			const $errorCont = Selectors.find(`.${this._getClass('errors')}`, this._element);
-			if ($errorCont) $errorCont.remove();
-			return;
-		}
+	_renderErrors() {
+		if (!this._errors.size) {
+			const $errorCont = Selectors.find(`.${this._getClass('errors')}`, this._element);
+			if ($errorCont) $errorCont.remove();
+			return;
+		}
 
 		const messages = lang_messages(this._params.lang, 'files') || this._getFallbackErrors();
 		let $errorCont = Selectors.find(`.${this._getClass('errors')}`, this._element);
@@ -435,32 +436,32 @@ class VGFilesBase extends BaseModule {
 			$errorCont.innerHTML = '';
 		}
 
-		if (this._validationErrorsByKey.size) {
-			const renderedErrors = new Set();
-			this._files.forEach(file => {
-				const msg = this._getFileValidationLabel(file);
-				if (!msg) return;
-
-				const fileErrors = this._validationErrorsByKey.get(this._getFileKey(file));
-				fileErrors?.forEach(error => renderedErrors.add(error));
-				const fullMsg = this._getFullFileValidationLabel(file);
-				const attrs = { class: 'error-item' };
-				if (fullMsg && fullMsg !== msg) attrs.title = fullMsg;
-				$errorCont.append(this._tpl.span(attrs, msg));
-			});
-
-			this._errors.forEach(errKey => {
-				if (renderedErrors.has(errKey)) return;
-				const msg = messages[errKey] || errKey;
-				$errorCont.append(this._tpl.span({ class: 'error-item' }, msg));
-			});
-			return;
-		}
-
-		this._errors.forEach(errKey => {
-			const msg = messages[errKey] || errKey;
-			$errorCont.append(this._tpl.span({ class: 'error-item' }, msg));
-		});
+		if (this._validationErrorsByKey.size) {
+			const renderedErrors = new Set();
+			this._files.forEach(file => {
+				const msg = this._getFileValidationLabel(file);
+				if (!msg) return;
+
+				const fileErrors = this._validationErrorsByKey.get(this._getFileKey(file));
+				fileErrors?.forEach(error => renderedErrors.add(error));
+				const fullMsg = this._getFullFileValidationLabel(file);
+				const attrs = { class: 'error-item' };
+				if (fullMsg && fullMsg !== msg) attrs.title = fullMsg;
+				$errorCont.append(this._tpl.span(attrs, msg));
+			});
+
+			this._errors.forEach(errKey => {
+				if (renderedErrors.has(errKey)) return;
+				const msg = messages[errKey] || errKey;
+				$errorCont.append(this._tpl.span({ class: 'error-item' }, msg));
+			});
+			return;
+		}
+
+		this._errors.forEach(errKey => {
+			const msg = messages[errKey] || errKey;
+			$errorCont.append(this._tpl.span({ class: 'error-item' }, msg));
+		});
 	}
 
 	_getFallbackErrors() {
@@ -522,7 +523,7 @@ class VGFilesBase extends BaseModule {
 		};
 	}
 
-	_renderUIDropList(files) {
+	_renderUIDropList(files) {
 		if (!this._nodes.drop) return;
 
 		let $list = Selectors.find(`.${this._getClass('drop-list')}`, this._nodes.drop);
@@ -535,10 +536,10 @@ class VGFilesBase extends BaseModule {
 		const fragment = document.createDocumentFragment();
 
 		files.forEach((file) => {
-			let classes = [...$itemsTemplateClasses];
+			let classes = [...$itemsTemplateClasses];
 
-			if (this._params.detach) classes.push('with-remove')
-			if (this._params.customButtons?.hideOnUploadState) classes.push('hide-custom-buttons-on-upload-state')
+			if (this._params.detach) classes.push('with-remove')
+			if (this._params.customButtons?.hideOnUploadState) classes.push('hide-custom-buttons-on-upload-state')
 			if (this._params.sortable.enabled) classes.push('with-sortable')
 			if (this._params.limits.count === 1) {
 				classes.push('single');
@@ -566,7 +567,7 @@ class VGFilesBase extends BaseModule {
 				parts
 			);
 
-			fragment.appendChild(this._decorateValidationItem($li, file));
+			fragment.appendChild(this._decorateValidationItem($li, file));
 		});
 
 		$list.innerHTML = '';
@@ -707,13 +708,13 @@ class VGFilesBase extends BaseModule {
 		return '';
 	}
 
-	_createInfoListItem(file, i, itemsTemplate, itemTemplateClasses, fileKey, signature) {
+	_createInfoListItem(file, i, itemsTemplate, itemTemplateClasses, fileKey, signature) {
 		let classes = [...itemTemplateClasses];
 
 		if (this._params.image) classes.push('with-image');
 		if (this._params.info) classes.push('with-info');
-		if (this._params.detach) classes.push('with-remove')
-		if (this._params.customButtons?.hideOnUploadState) classes.push('hide-custom-buttons-on-upload-state')
+		if (this._params.detach) classes.push('with-remove')
+		if (this._params.customButtons?.hideOnUploadState) classes.push('hide-custom-buttons-on-upload-state')
 		if (this._params.sortable.enabled) classes.push('with-sortable');
 		const previewPath = this._resolveFilePreviewPath(file);
 		const displayName = this._resolveDisplayName(file);
@@ -741,12 +742,12 @@ class VGFilesBase extends BaseModule {
 			liAttrs['data-vg-filepreview-display-name'] = displayName || file.name || '';
 		}
 
-		const item = this._tpl.li(
-			this._buildFileDataAttributes(file, liAttrs),
-			parts
-		);
-
-		return this._decorateValidationItem(item, file);
+		const item = this._tpl.li(
+			this._buildFileDataAttributes(file, liAttrs),
+			parts
+		);
+
+		return this._decorateValidationItem(item, file);
 	}
 
 	_renderTemplatePart(element, file, index = null, options = {}) {
@@ -815,31 +816,25 @@ class VGFilesBase extends BaseModule {
 
 	_renderUIImage(file) {
 		const $container = this._tpl.div({ class: 'file-image' });
-
-		const src = file?.src || file?.image;
-		if (src) {
-			$container.appendChild(this._tpl.img(src, file.name || '', { class: 'file-preview' }));
-			return $container;
-		}
-
+		const renderIcon = () => {
+			const icon = this._getIconByFileType(file);
+			$container.replaceChildren(this._tpl.i({}, icon, { isHTML: true }));
+		};
 		const customData = this._getFileCustomData(file);
-		const audioCover = String(customData.audioCover || '').trim();
-		if (audioCover) {
-			$container.appendChild(this._tpl.img(audioCover, this._resolveDisplayName(file), { class: 'file-preview' }));
-			return $container;
+		let imageSrc = String(file?.image || '').trim() || String(customData.audioCover || '').trim();
+
+		if (!imageSrc && resolveFileIconName({ type: file?.type, name: file?.name || file?.src }) === 'file-image') {
+			imageSrc = String(file?.src || '').trim() || this._getFileObjectUrl(file);
 		}
 
-		if (file?.type && file.type.startsWith('image/')) {
-			const objectUrl = this._getFileObjectUrl(file);
-			if (!objectUrl) {
-				return $container;
-			}
-			$container.appendChild(this._tpl.img(objectUrl, file.name, { class: 'file-preview' }));
-			return $container;
+		if (imageSrc) {
+			const image = this._tpl.img(imageSrc, this._resolveDisplayName(file), { class: 'file-preview' });
+			image.addEventListener('error', renderIcon, { once: true });
+			$container.appendChild(image);
+		} else {
+			renderIcon();
 		}
 
-		const icon = this._getIconByFileType(file);
-		$container.appendChild(this._tpl.i({}, icon, { isHTML: true }));
 		return $container;
 	}
 
@@ -1028,7 +1023,7 @@ class VGFilesBase extends BaseModule {
 
 		if (isSingle) return;
 
-		files.filter(file => this._isFileValid(file)).forEach((file, index) => {
+		files.filter(file => this._isFileValid(file)).forEach((file, index) => {
 			const input = document.createElement('input');
 			input.type = 'file';
 			input.name = `${baseName}[${index}]`;
@@ -1070,10 +1065,10 @@ class VGFilesBase extends BaseModule {
 		if (resetInput) {
 			this._resetFileInput();
 		}
-		this._cleanupFakeInputs();
-		this._cleanupErrors();
-		this._validationErrorsByKey.clear();
-		this._files = [];
+		this._cleanupFakeInputs();
+		this._cleanupErrors();
+		this._validationErrorsByKey.clear();
+		this._files = [];
 
 		if (this._nodes.info) {
 			Classes.remove(this._nodes.info, 'show');

package/app/modules/vgfiles/js/droppable.js

@@ -5,9 +5,9 @@
 import { isElement } from "../../../utils/js/functions";
 import EventHandler from "../../../utils/js/dom/event";
 import Selectors from "../../../utils/js/dom/selectors";
-import { Classes } from "../../../utils/js/dom/manipulator";
-import BaseModule from "../../base-module";
-import {isVGFilesSortableDragActive, VG_FILES_SORTABLE_DATA_TYPE} from "./sortable";
+import { Classes } from "../../../utils/js/dom/manipulator";
+import BaseModule from "../../base-module";
+import {isVGFilesSortableDragActive, VG_FILES_SORTABLE_DATA_TYPE} from "./sortable";
 
 const CLASS_NAME_CONTAINER = 'vg-files';
 const CLASS_NAME_DROP = `${CLASS_NAME_CONTAINER}-drop`;
@@ -254,20 +254,20 @@ class VGFilesDroppable extends BaseModule {
         }
     }
 
-    _isSortableDrag(e) {
-        if (isVGFilesSortableDragActive()) return true;
-        if (document.querySelector('.dragging')) return true;
-
-        try {
-			const dataTransfer = e?.dataTransfer;
-			const types = Array.from(dataTransfer?.types || []);
-			if (types.includes(VG_FILES_SORTABLE_DATA_TYPE)) return true;
-
-			return (dataTransfer?.getData?.(VG_FILES_SORTABLE_DATA_TYPE) || '') === '1' ||
-				(dataTransfer?.getData?.('text/plain') || '') === 'vgsortable';
-        } catch (_) {
-            return false;
-        }
+    _isSortableDrag(e) {
+        if (isVGFilesSortableDragActive()) return true;
+        if (document.querySelector('.dragging')) return true;
+
+        try {
+			const dataTransfer = e?.dataTransfer;
+			const types = Array.from(dataTransfer?.types || []);
+			if (types.includes(VG_FILES_SORTABLE_DATA_TYPE)) return true;
+
+			return (dataTransfer?.getData?.(VG_FILES_SORTABLE_DATA_TYPE) || '') === '1' ||
+				(dataTransfer?.getData?.('text/plain') || '') === 'vgsortable';
+        } catch (_) {
+            return false;
+        }
     }
 
     _getVisibleDropZonesInViewport() {