vgapp 1.1.1 → 1.1.3

package/app/modules/vgfilepreview/js/vgfilepreview.js

@@ -0,0 +1,532 @@
+import BaseModule from "../../base-module";
+import {mergeDeepObject} from "../../../utils/js/functions";
+import FilePreviewHelper from "../../../utils/js/components/file-preview";
+import {getSVG} from "../../module-fn";
+import createFilePreviewRenderers from "./renderers";
+import {createFilePreviewI18n, resolveFilePreviewLang} from "./i18n";
+
+const NAME = 'filepreview';
+const NAME_KEY = 'vg.filepreview';
+
+class VGFilePreview extends BaseModule {
+	constructor(el, params = {}) {
+		super(el, params);
+
+		this._params = this._getParams(el, mergeDeepObject({
+			validate: true,
+			lang: 'ru',
+			ui: {
+				nameOnly: false
+			}
+		}, params));
+
+		this._filePath = '';
+		this._fileUrl = null;
+		this._isValid = false;
+		this._fileMeta = {};
+		this._fields = [];
+		this._editableFields = {};
+		this._helper = new FilePreviewHelper(this._element);
+		this._renderers = createFilePreviewRenderers();
+		this._lang = resolveFilePreviewLang(this._params.lang, this._element);
+		this._i18n = createFilePreviewI18n(this._lang);
+		this._inlineAudio = null;
+		this._inlineAudioSrc = '';
+		this._inlineAudioButton = null;
+		this._inlineAudioIcon = null;
+		this._inlineAudioContainer = null;
+
+		this.init();
+	}
+
+	static get NAME() {
+		return NAME;
+	}
+
+	static get NAME_KEY() {
+		return NAME_KEY;
+	}
+
+	get filePath() {
+		return this._filePath;
+	}
+
+	get fileUrl() {
+		return this._fileUrl;
+	}
+
+	get isValid() {
+		return this._isValid;
+	}
+
+	get fileMeta() {
+		return this._fileMeta;
+	}
+
+	get fields() {
+		return this._fields;
+	}
+
+	get editableFields() {
+		return this._editableFields;
+	}
+
+	init() {
+		const filePath = this._helper.getFilePath();
+		this._filePath = filePath;
+
+		if (this._params.validate) {
+			const validation = this._helper.validateFilePath(filePath);
+			this._isValid = validation.isValid;
+			this._fileUrl = validation.fileUrl;
+		} else {
+			this._isValid = true;
+			this._fileUrl = null;
+		}
+
+		this._helper.syncState(this._isValid);
+
+		if (!this._isValid) {
+			return false;
+		}
+
+		this._fileMeta = this._helper.getFileMeta(this._filePath);
+		return this.preview();
+	}
+
+	preview() {
+		this._setState('loading');
+		this._fields = this._helper.getFields();
+		this._editableFields = this._helper.resolveEditableFields(this._fields);
+		this._helper.syncEditableFields(this._editableFields);
+		this._renderIcon();
+		this._renderTextFields();
+		this._renderDownloadField();
+		this._renderPreview();
+
+		return this._editableFields;
+	}
+
+	_renderIcon() {
+		const iconField = this._editableFields.icon;
+		if (!iconField) {
+			return;
+		}
+
+		const icon = getSVG(this._filePath);
+		if (!icon) {
+			return;
+		}
+
+		iconField.innerHTML = icon;
+	}
+
+	_renderTextFields() {
+		const nameField = this._editableFields.name;
+		if (nameField) {
+			if (this._isAudioFile()) {
+				this._renderAudioNameField(nameField);
+				this._element.setAttribute('data-vg-filepreview-renderer', 'audio');
+			} else if (this._fileMeta.name) {
+				nameField.classList.remove('vg-filepreview-audio-inline');
+				nameField.textContent = this._fileMeta.name;
+			}
+		}
+
+		const extField = this._editableFields.ext;
+		if (extField && this._fileMeta.ext) {
+			extField.textContent = this._fileMeta.ext;
+		}
+
+		const sizeField = this._editableFields.size;
+		if (sizeField && this._fileMeta.sizeText) {
+			sizeField.textContent = this._fileMeta.sizeText;
+		}
+
+		const originalNameField = this._editableFields.original_name;
+		if (!originalNameField) {
+			return;
+		}
+
+		if (this._fileMeta.originalName) {
+			originalNameField.textContent = this._fileMeta.originalName;
+			return;
+		}
+
+		if (this._fileMeta.isMedia) {
+			originalNameField.textContent = '';
+		}
+	}
+
+	_renderAudioNameField(nameField) {
+		const displayName = String(
+			this._element?.getAttribute('data-vg-filepreview-display-name')
+			|| this._fileMeta?.originalName
+			|| this._fileMeta?.name
+			|| ''
+		).trim();
+
+		const fileName = displayName;
+		if (!fileName) {
+			return;
+		}
+
+		nameField.innerHTML = '';
+		nameField.classList.add('vg-filepreview-audio-inline');
+
+		const button = document.createElement('button');
+		button.type = 'button';
+		button.className = 'vg-filepreview-audio-inline__toggle';
+		button.setAttribute('aria-label', 'Play/Pause');
+
+		const icon = document.createElement('span');
+		icon.className = 'vg-filepreview-audio-inline__icon';
+		button.appendChild(icon);
+
+		const text = document.createElement('span');
+		text.className = 'vg-filepreview-audio-inline__name';
+		text.textContent = fileName;
+
+		button.addEventListener('click', (event) => {
+			event.preventDefault();
+			event.stopPropagation();
+			this._toggleInlineAudio();
+		});
+
+		nameField.appendChild(button);
+		nameField.appendChild(text);
+
+		this._inlineAudioButton = button;
+		this._inlineAudioIcon = icon;
+		const rootFile = this._element?.classList?.contains('file')
+			? this._element
+			: this._element?.closest?.('.file');
+		this._inlineAudioContainer = rootFile || this._element || nameField;
+		this._setInlineAudioProgress(0);
+		const isCurrentAudioPlaying = VGFilePreview._activeAudioOwner === this && this._inlineAudio && !this._inlineAudio.paused;
+		this._syncInlineAudioIcon(isCurrentAudioPlaying);
+	}
+
+	_toggleInlineAudio() {
+		const src = this._fileUrl?.href || this._filePath || '';
+		if (!src || !this._inlineAudioButton) {
+			return;
+		}
+
+		if (VGFilePreview._activeAudioOwner && VGFilePreview._activeAudioOwner !== this) {
+			VGFilePreview._activeAudioOwner._stopInlineAudio();
+		}
+
+		if (!this._inlineAudio || this._inlineAudioSrc !== src) {
+			this._stopInlineAudio();
+			this._inlineAudio = new Audio(src);
+			this._inlineAudioSrc = src;
+			this._inlineAudio.addEventListener('ended', () => {
+				this._syncInlineAudioIcon(false);
+				this._setInlineAudioProgress(0);
+			});
+			this._inlineAudio.addEventListener('timeupdate', () => this._syncInlineAudioProgress());
+			this._inlineAudio.addEventListener('loadedmetadata', () => this._syncInlineAudioProgress());
+		}
+
+		if (this._inlineAudio.paused) {
+			this._inlineAudio.play().then(() => {
+				VGFilePreview._activeAudioOwner = this;
+				this._syncInlineAudioIcon(true);
+			}).catch(() => {
+				this._syncInlineAudioIcon(false);
+			});
+			return;
+		}
+
+		this._inlineAudio.pause();
+		this._syncInlineAudioIcon(false);
+		if (VGFilePreview._activeAudioOwner === this) {
+			VGFilePreview._activeAudioOwner = null;
+		}
+	}
+
+	_stopInlineAudio() {
+		if (!this._inlineAudio) {
+			this._syncInlineAudioIcon(false);
+			this._setInlineAudioProgress(0);
+			return;
+		}
+
+		this._inlineAudio.pause();
+		this._inlineAudio.currentTime = 0;
+		this._syncInlineAudioIcon(false);
+		this._setInlineAudioProgress(0);
+		if (VGFilePreview._activeAudioOwner === this) {
+			VGFilePreview._activeAudioOwner = null;
+		}
+	}
+
+	_syncInlineAudioIcon(isPlaying) {
+		if (!this._inlineAudioIcon) {
+			return;
+		}
+
+		this._inlineAudioIcon.innerHTML = isPlaying ? (getSVG('pause') || '') : (getSVG('play') || '');
+	}
+
+	_syncInlineAudioProgress() {
+		if (!this._inlineAudio) {
+			this._setInlineAudioProgress(0);
+			return;
+		}
+
+		const duration = Number(this._inlineAudio.duration || 0);
+		const currentTime = Number(this._inlineAudio.currentTime || 0);
+		if (!duration || !Number.isFinite(duration) || duration <= 0) {
+			this._setInlineAudioProgress(0);
+			return;
+		}
+
+		const progress = Math.max(0, Math.min(100, (currentTime / duration) * 100));
+		this._setInlineAudioProgress(progress);
+	}
+
+	_setInlineAudioProgress(percent) {
+		if (!this._inlineAudioContainer) {
+			return;
+		}
+
+		const normalized = Math.max(0, Math.min(100, Number(percent) || 0));
+		this._inlineAudioContainer.style.setProperty('--vg-filepreview-audio-inline-progress', `${normalized}%`);
+	}
+
+	_renderDownloadField() {
+		const downloadField = this._editableFields.download;
+		if (!downloadField) {
+			return;
+		}
+
+		const downloadLabel = this._i18n?.button('download') || '';
+		const downloadIcon = getSVG('download') || '';
+		const fieldTag = String(downloadField.tagName || '').toUpperCase();
+		let control = null;
+
+		if (fieldTag === 'A' || fieldTag === 'BUTTON') {
+			control = downloadField;
+		} else {
+			control = downloadField.querySelector('[data-vg-filepreview-download-control]');
+			if (!control) {
+				control = document.createElement('button');
+				control.type = 'button';
+				downloadField.innerHTML = '';
+				downloadField.appendChild(control);
+			}
+		}
+
+		control.classList.add('vg-filepreview-download-trigger');
+		control.setAttribute('data-vg-filepreview-download-control', 'true');
+
+		if (fieldTag === 'A' && control === downloadField) {
+			control.setAttribute('href', this._fileUrl?.href || this._filePath || '#');
+			if (this._fileMeta?.name) {
+				control.setAttribute('download', this._fileMeta.name);
+			}
+		} else if (String(control.tagName || '').toUpperCase() === 'BUTTON') {
+			control.setAttribute('type', 'button');
+		}
+
+		if (!control.hasAttribute('data-vg-filepreview-download-content-init')) {
+			control.setAttribute('data-vg-filepreview-download-content-init', 'true');
+			control.innerHTML = '';
+
+			if (downloadIcon) {
+				const icon = document.createElement('span');
+				icon.className = 'vg-filepreview-download-trigger__icon';
+				icon.innerHTML = downloadIcon;
+				control.appendChild(icon);
+			}
+
+			if (downloadLabel) {
+				const text = document.createElement('span');
+				text.className = 'vg-filepreview-download-trigger__text';
+				text.textContent = downloadLabel;
+				control.appendChild(text);
+			}
+		}
+
+		if (!control.hasAttribute('data-vg-filepreview-download-bind')) {
+			control.setAttribute('data-vg-filepreview-download-bind', 'true');
+			control.addEventListener('click', (event) => {
+				event.preventDefault();
+				this._downloadFile();
+			});
+		}
+	}
+
+	_downloadFile() {
+		const src = this._fileUrl?.href || this._filePath || '';
+		if (!src) {
+			return;
+		}
+
+		const fileName = this._fileMeta?.originalName || this._fileMeta?.name || 'file';
+
+		fetch(src, {
+			method: 'GET',
+			credentials: 'same-origin'
+		})
+			.then((response) => {
+				if (!response.ok) {
+					throw new Error(`HTTP ${response.status}`);
+				}
+				return response.blob();
+			})
+			.then((blob) => {
+				const objectUrl = URL.createObjectURL(blob);
+				this._downloadByLink(objectUrl, fileName);
+				setTimeout(() => URL.revokeObjectURL(objectUrl), 1000);
+			})
+			.catch(() => {
+				this._downloadByLink(src, fileName);
+			});
+	}
+
+	_downloadByLink(href, fileName) {
+		const link = document.createElement('a');
+		link.href = href;
+		link.style.display = 'none';
+		link.rel = 'noopener noreferrer';
+		if (fileName) {
+			link.setAttribute('download', fileName);
+		}
+
+		document.body.appendChild(link);
+		link.click();
+		document.body.removeChild(link);
+	}
+
+	_renderPreview() {
+		const isNameOnly = Boolean(this._params?.ui?.nameOnly);
+		const previewContainer = this._resolvePreviewContainer({
+			autoCreate: !isNameOnly
+		});
+		if (!previewContainer && !isNameOnly) {
+			this._setState('error');
+			return;
+		}
+
+		if (previewContainer) {
+			previewContainer.innerHTML = '';
+		}
+
+		const context = {
+			element: this._element,
+			filePath: this._filePath,
+			fileUrl: this._fileUrl,
+			fileMeta: this._fileMeta,
+			previewContainer,
+			lang: this._lang,
+			i18n: this._i18n,
+			ui: this._params?.ui || {}
+		};
+
+		let rendered = false;
+		this._renderers.forEach((renderer) => {
+			if (rendered || typeof renderer?.canRender !== 'function' || typeof renderer?.render !== 'function') {
+				return;
+			}
+
+			if (!renderer.canRender(context)) {
+				return;
+			}
+
+			try {
+				rendered = renderer.render(context) === true;
+			} catch (error) {
+				rendered = false;
+			}
+			if (rendered) {
+				this._element.setAttribute('data-vg-filepreview-renderer', renderer.name || 'custom');
+			}
+		});
+
+		if (!rendered && !isNameOnly) {
+			this._element.removeAttribute('data-vg-filepreview-renderer');
+			this._setState('empty');
+			return;
+		}
+		this._setState('ready');
+	}
+
+	_resolvePreviewContainer(params = {}) {
+		const autoCreate = !Object.prototype.hasOwnProperty.call(params, 'autoCreate') || Boolean(params.autoCreate);
+		const editablePreview = this._editableFields.preview;
+		if (editablePreview) {
+			editablePreview.setAttribute('data-vg-filepreview-slot', 'preview');
+			return editablePreview;
+		}
+
+		const existedPreview = this._element.querySelector('[data-vg-filepreview-slot="preview"]');
+		if (existedPreview) {
+			this._editableFields.preview = existedPreview;
+			return existedPreview;
+		}
+
+		if (!autoCreate) {
+			return null;
+		}
+
+		const container = document.createElement('div');
+		container.className = 'preview';
+		container.setAttribute('data-vg-filepreview-slot', 'preview');
+		this._element.appendChild(container);
+		this._editableFields.preview = container;
+
+		return container;
+	}
+
+	static init(element, params = {}) {
+		return VGFilePreview.getOrCreateInstance(element, params);
+	}
+
+	static stopActiveInlineAudio() {
+		const owner = VGFilePreview._activeAudioOwner;
+		if (owner && typeof owner._stopInlineAudio === 'function') {
+			owner._stopInlineAudio();
+		}
+
+		VGFilePreview._activeAudioOwner = null;
+	}
+
+	static stopActiveInlineAudioIfDetached(nodes = []) {
+		const owner = VGFilePreview._activeAudioOwner;
+		if (!owner || !owner._element || !Array.isArray(nodes) || !nodes.length) {
+			return;
+		}
+
+		const shouldStop = nodes.some((node) => {
+			if (!node || typeof node.contains !== 'function') {
+				return false;
+			}
+
+			return node === owner._element || node.contains(owner._element);
+		});
+
+		if (shouldStop) {
+			owner._stopInlineAudio();
+			VGFilePreview._activeAudioOwner = null;
+		}
+	}
+
+	_setState(state = '') {
+		const value = String(state || '').trim();
+		if (!value) {
+			this._element.removeAttribute('data-vg-filepreview-state');
+			return;
+		}
+		this._element.setAttribute('data-vg-filepreview-state', value);
+	}
+
+	_isAudioFile() {
+		const ext = String(this._fileMeta?.ext || '').toLowerCase();
+		return ['.mp3', '.wav', '.ogg', '.flac', '.aac', '.m4a', '.opus', '.wma'].includes(ext);
+	}
+}
+
+export default VGFilePreview;

package/app/modules/vgfilepreview/readme.md

@@ -0,0 +1,68 @@
+## VGFilePreview
+
+Модуль предпросмотра файлов для элементов с атрибутом `data-vg-filepreview`.
+
+### Новые фичи
+
+- Inline-аудио в поле `.name`: play/pause, прогресс через CSS-переменную `--vg-filepreview-audio-inline-progress`, и контроль единственного активного аудио.
+- Унифицированная кнопка скачивания: модуль сам создает/инициализирует control в поле `download`, скачивает через `fetch + blob` и имеет fallback на прямую ссылку.
+- Режим `ui.nameOnly`: рендер только действий по имени файла (без кнопок/контейнера предпросмотра).
+- Автоопределение языка (`ru`/`en`) с приоритетом: `params.lang` -> `element[lang]` -> ближайший `[lang]` -> `<html lang>` -> `navigator.language`.
+- Видео-плейлист между соседними превью: `prev/next`, циклическая навигация и hotkeys `ArrowLeft/ArrowRight`.
+- ZIP-предпросмотр с кэшем: таблица содержимого архива + предпросмотр поддерживаемых файлов внутри архива (текст/изображения), включая deflate-raw через `DecompressionStream`.
+- Текстовый/Markdown modal с кэшем, безопасной обработкой ссылок и прерыванием прошлых запросов (`AbortController`).
+
+### Что умеет модуль
+
+- Определяет тип файла и подставляет SVG-иконку.
+- Заполняет поля карточки: `name`, `ext`, `size`, `original_name`, `icon`, `download`, `preview`.
+- Запускает предпросмотр по типам файлов:
+  - изображения (`png/jpg/webp/svg/...`);
+  - видео (`mp4/webm/mov/mkv/avi/m4v`);
+  - текст (`txt/md/csv/json/xml/yml/yaml/log/ini/conf/env`);
+  - `pdf`;
+  - office (`doc/docx/xls/xlsx/ppt/pptx/odt/ods/odp`);
+  - архивы (`zip`).
+- Для интерактивных рендеров автоматически вешает обработчики клика на `.name` (`is-preview-action`).
+
+### Состояния и валидация
+
+- Валидация пути через helper (`data-vg-filepreview-valid`, `data-vg-filepreview-error`).
+- Текущее состояние рендера в `data-vg-filepreview-state`:
+  - `loading`
+  - `ready`
+  - `empty`
+  - `error`
+- Выбранный рендерер в `data-vg-filepreview-renderer` (`image`, `video`, `pdf`, `office`, `zip`, `text`, `audio`).
+
+### Атрибуты и слоты
+
+- `data-vg-filepreview` — путь к файлу (обязательный).
+- `data-fields` — список полей для синхронизации (например, `name,size,download`).
+- Поддерживаемые поля: `icon`, `name`, `ext`, `size`, `original_name`, `preview`, `download`.
+- Если поле `preview` не найдено, модуль создает `<div class="preview" data-vg-filepreview-slot="preview">` автоматически (кроме `ui.nameOnly`).
+
+### Параметры
+
+```js
+new VGFilePreview(element, {
+  validate: true,
+  lang: 'ru',
+  ui: {
+    nameOnly: false
+  }
+});
+```
+
+- `validate` (`boolean`, default `true`) — проверка пути до файла.
+- `lang` (`'ru' | 'en'`) — язык кнопок/сообщений.
+- `ui.nameOnly` (`boolean`, default `false`) — не создавать UI-контейнер предпросмотра.
+
+### Расширение
+
+Рендереры подключаются через `js/renderers/index.js`.
+
+1. Создайте рендерер в `js/renderers/`.
+2. Реализуйте `canRender(context)` и `render(context)`.
+3. Добавьте рендерер в `js/renderers/index.js` в нужном порядке приоритета.
+

package/app/modules/vgfilepreview/scss/_variables.scss

@@ -0,0 +1,113 @@
+$filepreview-map: (
+		panel: (
+				bg: #111,
+				color: #fff,
+				border: 1px solid rgba(255, 255, 255, .12),
+		),
+		modal: (
+				content-bg: #111,
+				content-color: #fff,
+				close-top: 10px,
+				close-right: 10px,
+				body-padding: 1rem 0 0,
+				title-size: 13px,
+				title-weight: 600,
+				title-line-height: 1.3,
+				title-margin-bottom: 10px,
+		),
+		audio-inline: (
+				gap: 12px,
+				toggle-size: 24px,
+				icon-size: 18px,
+				toggle-radius: 999px,
+				toggle-bg: rgba(255, 255, 255, .12),
+				toggle-color: #fff,
+				name-line-height: 1.2,
+				progress-track: rgba(255, 255, 255, .06),
+				progress-fill: rgba(255, 255, 255, .16),
+				progress-radius: 6px,
+				progress-padding-x: 4px,
+		),
+		trigger: (
+				radius: 8px,
+				padding: 8px 12px,
+				font-size: 13px,
+				font-weight: 600,
+				color: #fff,
+				image-bg: #0f766e,
+				text-bg: #334155,
+				video-bg: #7c3aed,
+				zip-bg: #b45309,
+		),
+		image: (
+				body-gap: 12px,
+				img-max-width: min(92vw, 1240px),
+				img-max-height: calc(92vh - 80px),
+				img-radius: 8px,
+				thumb-margin-top: 10px,
+				thumb-max-width: 180px,
+				thumb-max-height: 100px,
+				thumb-radius: 8px,
+		),
+		text: (
+				content-padding: 12px,
+				content-max-height: calc(84vh - 90px),
+				content-bg: rgba(255, 255, 255, .06),
+				content-radius: 8px,
+				content-font-size: 13px,
+				content-line-height: 1.45,
+				markdown-heading-line-height: 1.25,
+				markdown-block-margin: 0 0 10px,
+				markdown-list-margin: 0 0 10px 20px,
+				markdown-code-padding: 10px,
+				markdown-code-radius: 6px,
+				markdown-code-bg: rgba(255, 255, 255, .08),
+				markdown-link-color: #93c5fd,
+		),
+		video: (
+				player-width: min(92vw, 1240px),
+				player-max-height: calc(86vh - 90px),
+				player-radius: 8px,
+				player-bg: #000,
+		),
+		pdf: (
+				toolbar-gap: 8px,
+				toolbar-margin-bottom: 10px,
+				btn-radius: 8px,
+				btn-padding: 6px 10px,
+				btn-font-size: 12px,
+				btn-font-weight: 600,
+				btn-bg: rgba(255, 255, 255, .12),
+				meta-font-size: 12px,
+				meta-opacity: .75,
+				frame-width: min(96vw, 1280px),
+				frame-height: min(78vh, 860px),
+				frame-radius: 8px,
+				frame-bg: #fff,
+		),
+		office: (
+				frame-width: min(96vw, 1280px),
+				frame-height: min(74vh, 820px),
+				frame-radius: 8px,
+				frame-bg: #fff,
+				footer-gap: 12px,
+				footer-margin-top: 10px,
+				hint-font-size: 12px,
+				hint-opacity: .75,
+				btn-radius: 8px,
+				btn-padding: 6px 10px,
+				btn-font-size: 12px,
+				btn-font-weight: 600,
+				btn-bg: rgba(255, 255, 255, .12),
+		),
+		zip: (
+				content-max-height: calc(84vh - 90px),
+				content-bg: rgba(255, 255, 255, .06),
+				content-radius: 8px,
+				content-padding: 10px,
+				table-font-size: 12px,
+				table-cell-padding: 6px 8px,
+				table-border: 1px solid rgba(255, 255, 255, .12),
+				status-font-size: 13px,
+		),
+);