vgapp 0.7.9 → 0.8.0

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

@@ -0,0 +1,499 @@
+import BaseModule from "../../base-module";
+import {mergeDeepObject} from "../../../utils/js/functions";
+import Html from "../../../utils/js/components/templater";
+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";
+
+class VGFilesBase extends BaseModule {
+	constructor(element, params = {}, defaults = {}) {
+		super(element, params);
+
+		this._params = this._getParams(element, mergeDeepObject(defaults, params));
+		this._params.init = ('init' in params) && params.init || this._params.init;
+
+		if (!this._params.init) {
+			this._isInitialized = false;
+			return;
+		}
+		this._isInitialized = true;
+
+		this._tpl = Html('dom');
+		this._files = [];
+		this._errors = new Set();
+		this._objectUrls = [];
+
+		this._nodes = {
+			stat: Selectors.find(`.${this._getClass('stat')}`, this._element),
+			info: Selectors.find(`.${this._getClass('info')}`, this._element),
+			drop: Selectors.find(`.${this._getClass('drop')}`, this._element),
+		};
+
+		this.template = '<li data-file="" class="file"><div class="file-image"></div><div class="file-info"></div><div class="file-remove"></div></li>';
+		this._init();
+	}
+
+	_getClass(name) {
+		const map = {
+			'stat': 'vg-files-stat',
+			'stat-progress': 'vg-files-stat-progress',
+			'info': 'vg-files-info',
+			'info-list': 'vg-files-info--list',
+			'drop': 'vg-files-drop',
+			'drop-list': 'vg-files-drop--list',
+			'drop-message': 'vg-files-drop-message',
+			'errors': 'vg-files-errors'
+		};
+		return map[name] || '';
+	}
+
+	_init() {
+		if (!this._isInitialized) return;
+
+		this._preventOriginalInputFromSubmit();
+		this._addEventListener();
+	}
+
+	change(input = null) {
+		const incomingFiles = input?.files;
+		if (!incomingFiles?.length) return;
+
+		const filesArray = Array.from(incomingFiles);
+
+		if (!this._params.allowed) {
+			this.append(filesArray, false);
+			this.build();
+		} else {
+			this.clear();
+			this.append(filesArray, true);
+			this.build();
+		}
+	}
+
+	build() {
+		this._updateStat();
+
+		if (this._params.ajax) {
+			if (this._render.init()) {
+				this._render.init()
+			} else {
+				this._renderUI(this._files);
+			}
+			this._renderUI(this._files);
+		} else {
+			this._renderUI(this._files);
+			this._generateHiddenInputs(this._files);
+		}
+	}
+
+	append(values, replace = true) {
+		const incoming = Array.from(values);
+		let filesToProcess;
+
+		if (replace) {
+			filesToProcess = incoming;
+		} else {
+			const fileMap = new Map(this._files.map(f => [this._getFileKey(f), f]));
+			incoming.forEach(file => {
+				fileMap.set(this._getFileKey(file), file);
+			});
+			filesToProcess = Array.from(fileMap.values());
+		}
+
+		this._files = this._filterFiles(filesToProcess);
+		if (this._params.prepend) this._files.reverse();
+
+		this._renderErrors();
+
+		return this._files;
+	}
+
+	_getFileKey(file) {
+		return `${file.name}-${file.size}-${file.type}`;
+	}
+
+	_filterFiles(files) {
+		this._errors.clear();
+		const { count, sizes, total } = this._params.limits;
+		const maxSize = sizes * 1024 * 1024;
+		const maxTotalSize = total * 1024 * 1024;
+
+		let currentTotalSize = 0;
+		const filtered = [];
+
+		for (const file of files) {
+			if (count > 0 && filtered.length >= count) {
+				this._errors.add('is-count');
+				break;
+			}
+
+			let isValid = true;
+
+			if (this._params.types.length && !this._params.types.includes(file.type)) {
+				this._errors.add('is-types');
+				isValid = false;
+			}
+
+			if (file.size > maxSize) {
+				this._errors.add('is-sizes');
+				isValid = false;
+			}
+
+			if (isValid && maxTotalSize > 0) {
+				if (currentTotalSize + file.size > maxTotalSize) {
+					this._errors.add('is-total-size');
+					isValid = false;
+				} else {
+					currentTotalSize += file.size;
+				}
+			}
+
+			if (isValid) filtered.push(file);
+		}
+
+		return filtered;
+	}
+
+	_getSizes(size, isArray = false) {
+		const totalSize = isArray ? this._files.reduce((acc, f) => acc + f.size, 0) : size;
+		const units = ['byte', 'kilobyte', 'megabyte', 'gigabyte'];
+		const index = totalSize > 0 ? Math.min(Math.floor(Math.log(totalSize) / Math.log(1024)), units.length - 1) : 0;
+		const value = totalSize / Math.pow(1024, index);
+
+		return new Intl.NumberFormat(this._params.lang, {
+			style: 'unit',
+			unit: units[index],
+			unitDisplay: 'short',
+			maximumFractionDigits: 2
+		}).format(value);
+	}
+
+	_cleanupErrors() {
+		this._errors.clear();
+		const $errorCont = Selectors.find(`.${this._getClass('errors')}`, this._element);
+		if ($errorCont) {
+			$errorCont.remove()
+		}
+	}
+
+	_renderErrors() {
+		if (!this._errors.size) return;
+
+		const messages = lang_messages(this._params.lang, 'files') || this._getFallbackErrors();
+		let $errorCont = Selectors.find(`.${this._getClass('errors')}`, this._element);
+
+		if (!$errorCont) {
+			$errorCont = this._tpl.div({ class: this._getClass('errors') });
+			this._element.prepend($errorCont);
+		} else {
+			$errorCont.innerHTML = '';
+		}
+
+		this._errors.forEach(errKey => {
+			const msg = messages[errKey] || errKey;
+			$errorCont.append(this._tpl.span({ class: 'error-item' }, msg));
+		});
+	}
+
+	_getFallbackErrors() {
+		const { count, sizes, total } = this._params.limits;
+		return {
+			'is-count': `Limit: ${count}`,
+			'is-sizes': `Max size: ${sizes}MB`,
+			'is-total-size': `Total max size: ${total}MB`,
+			'is-types': `Allowed: ${this._params.types.join(', ')}`
+		};
+	}
+
+	_renderUI(files) {
+		if (this._nodes.drop) {
+			this._renderUIDropList(files);
+		} else if (this._nodes.info) {
+			this._renderInfoList(files);
+		}
+
+		this._renderUIStatusDropInfoAjax(this._files)
+	}
+
+	_parseTemplate() {
+		const render = this._render;
+		let tmpl = this.template;
+
+		if (render) {
+			if (render.bufferTemplate) tmpl = render.bufferTemplate;
+		}
+
+		const temp = document.createElement('div');
+		temp.innerHTML = tmpl;
+		const liElement = temp.firstElementChild;
+		const liClasses = liElement.className || '';
+		const liClassList = liClasses ? liClasses.split(' ').filter(cls => cls.trim() !== '') : [];
+
+		const childCount = liElement.childElementCount;
+
+		const children = [];
+		for (let i = 0; i < childCount; i++) {
+			children.push({
+				index: i,
+				element: liElement.children[i],
+				className: liElement.children[i].className
+			});
+		}
+
+		return {
+			children: children,
+			template: tmpl,
+			liClasses: liClassList,
+			liClassName: liClasses
+		};
+	}
+
+	_renderUIDropList(files) {
+		if (!this._nodes.drop) return;
+
+		let $list = Selectors.find(`.${this._getClass('drop-list')}`, this._nodes.drop);
+		if (!$list) {
+			$list = this._tpl.ul([], { class: this._getClass('drop-list') });
+		}
+
+		const $itemsTemplate = this._parseTemplate().children;
+		const $itemsTemplateClasses = this._parseTemplate().liClasses.filter(cls => cls !== 'file');
+		const fragment = document.createDocumentFragment();
+
+		files.forEach((file) => {
+			let classes = $itemsTemplateClasses;;
+
+			if (this._params.detach) classes.push('with-remove')
+			if (this._params.sortable.enabled) classes.push('with-sortable')
+			if (this._params.limits.count === 1) {
+				classes.push('single');
+
+				if (file.type.startsWith('image/')) {
+					classes.push('single-image')
+				} else {
+					classes.push('single-file')
+				}
+			}
+
+			let parts = [];
+			$itemsTemplate.forEach(tmpl => {
+				if (tmpl.className === 'file-image') {
+					parts.push(this._renderUIImage(file))
+				} else if (tmpl.className === 'file-remove') {
+					parts.push(this._renderUIDetach(file))
+				} else {
+					parts.push(tmpl.element.cloneNode(true));
+				}
+			});
+
+			const $li = this._tpl.li(
+				{ 'data-name': file.name, 'data-size': file.size, 'data-id': file.id || '', class: 'file ' + classes.join(' ') }, parts
+			);
+
+			fragment.appendChild($li);
+		});
+
+		$list.innerHTML = '';
+		$list.appendChild(fragment);
+
+		const $message = Selectors.find(`.${this._getClass('drop-message')}`, this._nodes.drop);
+		if ($message) Classes.remove($message, 'show');
+
+		this._nodes.drop.appendChild($list);
+		Classes.add(this._nodes.drop, 'active');
+	}
+
+	_renderInfoList(files) {
+		if (!this._nodes.info) return;
+
+		let $list = Selectors.find(`.${this._getClass('info-list')}`, this._element);
+		if (!$list) {
+			$list = this._tpl.ul([], { class: this._getClass('info-list') });
+			this._nodes.info.appendChild($list);
+		}
+
+		if (!this._params.info) Classes.add($list, 'list-row');
+
+		$list.innerHTML = '';
+
+		const $itemsTemplate = this._parseTemplate().children;
+		const $itemsTemplateClasses = this._parseTemplate().liClasses.filter(cls => cls !== 'file');
+		const fragment = document.createDocumentFragment();
+
+		files.forEach((file, i) => {
+			let classes = $itemsTemplateClasses;
+
+			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.sortable.enabled) classes.push('with-sortable');
+
+			let parts = [];
+			$itemsTemplate.forEach(tmpl => {
+				if (tmpl.className === 'file-image') {
+					parts.push(this._renderUIImage(file))
+				} else if (tmpl.className === 'file-info') {
+					parts.push(this._renderUIInfo(file, i))
+				} else if (tmpl.className === 'file-remove') {
+					parts.push(this._renderUIDetach(file))
+				} else {
+					parts.push(tmpl.element.cloneNode(true));
+				}
+			});
+
+			const $li = this._tpl.li(
+				{ 'data-name': file.name, 'data-size': file.size, 'data-type': file.type, 'data-id': file.id || '', class: 'file ' + classes.join(' ') + ' ' }, parts
+			);
+			fragment.appendChild($li);
+		});
+		$list.appendChild(fragment);
+
+		Classes.add(this._nodes.info, 'show')
+	}
+
+	_renderUIDetach(file) {
+		if (this._params.detach) {
+			return this._tpl.div({ class: 'file-remove' }, [
+				this._setButtonElement(file)
+			])
+		}
+	}
+
+	_renderUIInfo(file, i) {
+		if (this._params.info) {
+			return  this._tpl.div({ class: 'file-info' }, [
+				this._tpl.span({ class: 'iteration' }, `${i + 1}.`),
+				this._tpl.span({ class: 'name' }, file.name),
+				this._tpl.span({ class: 'size' }, `[${this._getSizes(file.size)}]`)
+			]);
+		}
+	}
+
+	_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;
+		}
+
+		if (file?.type && file.type.startsWith('image/')) {
+			const objectUrl = URL.createObjectURL(file);
+			this._objectUrls.push(objectUrl);
+			$container.appendChild(this._tpl.img(objectUrl, file.name, { class: 'file-preview' }));
+			return $container;
+		}
+
+		const icon = this._getIconByFileType(file);
+		$container.appendChild(this._tpl.i({}, icon, { isHTML: true }));
+		return $container;
+	}
+
+	_getIconByFileType(file) {
+		if (file.type === 'application/pdf') return getSVG('file-pdf');
+		if (file.type.includes('word') || file.name.endsWith('.doc') || file.name.endsWith('.docx')) return getSVG('file-word');
+		if (file.type.includes('excel') || file.name.endsWith('.xls') || file.name.endsWith('.xlsx')) return getSVG('file-exel');
+		if (file.type === 'application/zip' || file.name.endsWith('.zip')) return getSVG('file-zip');
+		if (file.name.endsWith('.txt')) return getSVG('file-text');
+		return getSVG('file-generic');
+	}
+
+	_updateStat() {
+		if (!this._nodes.stat) return;
+
+		const totalSize = this._getSizes(this._files, true);
+		const $count = Selectors.find(`.${this._getClass('stat')}-count`, this._nodes.stat);
+		if ($count) {
+			$count.innerHTML = this._files.length ? `${this._files.length}<span>[${totalSize}]</span>` : '';
+		}
+
+		Classes.add(this._nodes.stat, 'show');
+	}
+
+	_generateHiddenInputs(files) {
+		this._cleanupFakeInputs();
+		const fragment = document.createDocumentFragment();
+		const name = this._element.querySelector('[data-vg-toggle]')?.name || 'files[]';
+
+		files.forEach((file, index) => {
+			const input = document.createElement('input');
+			input.type = 'file';
+			input.name = `${name.replace('[]', '')}[${index}]`;
+			input.dataset.vgFiles = 'generated';
+			Manipulator.hide(input);
+
+			const dataTransfer = new DataTransfer();
+			dataTransfer.items.add(file);
+			input.files = dataTransfer.files;
+			fragment.appendChild(input);
+		});
+
+		this._element.appendChild(fragment);
+	}
+
+	_cleanupFakeInputs() {
+		Selectors.findAll('[data-vg-files="generated"]', this._element).forEach(el => el.remove());
+	}
+
+	clear() {
+		this._revokeUrls();
+		this._resetFileInput();
+		this._cleanupFakeInputs();
+		this._cleanupErrors();
+		this._files = [];
+
+		if (this._nodes.info) {
+			Classes.remove(this._nodes.info, 'show');
+			const $list = Selectors.find(`.${this._getClass('info-list')}`, this._element);
+			if ($list) $list.innerHTML = '';
+		}
+		if (this._nodes.drop) {
+			const $list = Selectors.find(`.${this._getClass('drop-list')}`, this._element);
+			if ($list) $list.innerHTML = '';
+
+			const $message = Selectors.find(`.${this._getClass('drop-message')}`, this._element);
+			if ($message) Classes.add($message, 'show');
+
+			Classes.remove(this._nodes.drop, 'active');
+		}
+		if (this._nodes.stat) {
+			Classes.remove(this._nodes.stat, 'show');
+		}
+	}
+
+	_revokeUrls() {
+		this._objectUrls.forEach(url => URL.revokeObjectURL(url));
+		this._objectUrls = [];
+	}
+
+	_resetFileInput() {
+		Selectors.findAll('[data-vg-toggle="files"]', this._element).forEach(input => input.value = '');
+	}
+
+	_preventOriginalInputFromSubmit(isRestore = false) {
+		const el = Selectors.find('[data-vg-toggle="files"]', this._element);
+		if (!el) return;
+		if (!isRestore && !el.dataset.originalName) {
+			el.dataset.originalName = el.name;
+			el.removeAttribute('name');
+		} else if (isRestore && el.dataset.originalName) {
+			el.name = el.dataset.originalName;
+			delete el.dataset.originalName;
+		}
+	}
+
+	_addEventListener() {
+		Selectors.findAll('[data-vg-toggle="files"]', this._element).forEach(el => {
+			el.addEventListener('change', () => this.change(el));
+		});
+	}
+
+	dispose() {
+		this.clear();
+		super.dispose();
+	}
+}
+
+export default VGFilesBase;

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

@@ -0,0 +1,159 @@
+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";
+
+const CLASS_NAME_CONTAINER = 'vg-files';
+const CLASS_NAME_DROP = `${CLASS_NAME_CONTAINER}-drop`;
+
+const CLASS_NAME_DROP_ACTIVE = 'drop-active';
+const CLASS_NAME_DROP_HOVER = 'drop-hover';
+
+const NAME = 'drop-and-drop';
+const NAME_KEY = 'vg.drop-and-drop';
+
+class VGFilesDroppable extends BaseModule {
+    /**
+     * @param {HTMLElement} element
+     * @param {Object} params
+     */
+    constructor(element, params = {}) {
+        super(element, params);
+        this._element = element;
+        this._params = params;
+
+        this._files = null;
+        this._input = null;
+        this._init();
+    }
+
+    static get NAME() { return NAME; }
+    static get NAME_KEY() { return NAME_KEY; }
+
+    _init() {
+        this._findInput();
+        this._setupEvents();
+    }
+
+    /**
+     * Поиск связанного input[type="file"] внутри или рядом с drop-зоной
+     */
+    _findInput() {
+        const { id, name } = this._element.dataset;
+        if (id) this._input = document.getElementById(id);
+        if (!this._input && name) {
+            this._input = Selectors.find(`[name="${name}"]`);
+        }
+        if (!this._input) {
+            this._input = Selectors.find('input[type="file"]', this._element) || Selectors.find('input[type="file"]', this._element.parentNode);
+        }
+    }
+
+    /**
+     * Настройка событий перетаскивания
+     */
+    _setupEvents() {
+        if (!isElement(this._element)) return;
+
+        const isSortableDrag = (e) => {
+            // 1) если sortable реально активен — на элементе есть класс dragging
+            if (document.querySelector('.dragging')) return true;
+
+            // 2) маркер, который ставит sortable
+            let plain = '';
+            try { plain = e.dataTransfer?.getData?.('text/plain') || ''; } catch (_) {}
+            return plain === 'vgsortable';
+        };
+
+        EventHandler.on(this._element, 'dragover', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            // ✅ Сортировка: НЕ подсвечиваем dropzone
+            if (isSortableDrag(e)) {
+                Classes.remove(this._element, [CLASS_NAME_DROP_ACTIVE, CLASS_NAME_DROP_HOVER]);
+                e.dataTransfer.dropEffect = 'none';
+                return;
+            }
+
+            if (!Classes.has(this._element, CLASS_NAME_DROP_ACTIVE)) {
+                Classes.add(this._element, CLASS_NAME_DROP_HOVER);
+            }
+        });
+
+        EventHandler.on(this._element, 'dragenter', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            // ✅ Сортировка: НЕ подсвечиваем dropzone
+            if (isSortableDrag(e)) {
+                Classes.remove(this._element, [CLASS_NAME_DROP_ACTIVE, CLASS_NAME_DROP_HOVER]);
+                return;
+            }
+
+            Classes.add(this._element, [CLASS_NAME_DROP_ACTIVE, CLASS_NAME_DROP_HOVER]);
+        });
+
+        EventHandler.on(this._element, 'dragleave', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            // ✅ Сортировка: гарантированно без подсветки
+            if (isSortableDrag(e)) {
+                Classes.remove(this._element, [CLASS_NAME_DROP_ACTIVE, CLASS_NAME_DROP_HOVER]);
+                return;
+            }
+
+            if (e.target === this._element || e.target.closest('.' + CLASS_NAME_DROP) === this._element) {
+                Classes.remove(this._element, CLASS_NAME_DROP_HOVER);
+                setTimeout(() => {
+                    if (!this._element.matches(':hover')) {
+                        Classes.remove(this._element, CLASS_NAME_DROP_ACTIVE);
+                    }
+                }, 50);
+            }
+        });
+
+        EventHandler.on(this._element, 'drop', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            Classes.remove(this._element, [CLASS_NAME_DROP_ACTIVE, CLASS_NAME_DROP_HOVER]);
+
+            // ✅ сортировка: не трогаем input
+            if (isSortableDrag(e)) {
+                return;
+            }
+
+            const files = e.dataTransfer?.files;
+            if (!files || !files.length) return;
+
+            this._files = files;
+
+            if (isElement(this._input)) {
+                this._input.files = files;
+                EventHandler.trigger(this._input, 'change');
+            }
+        });
+    }
+
+    getFiles() {
+        return this._files;
+    }
+
+    dispose() {
+        EventHandler.off(this._element, 'dragover');
+        EventHandler.off(this._element, 'dragenter');
+        EventHandler.off(this._element, 'dragleave');
+        EventHandler.off(this._element, 'drop');
+        this._input = null;
+        this._files = null;
+    }
+
+    init() {
+        return this;
+    }
+}
+
+export default VGFilesDroppable;