vgapp 1.4.4 → 1.4.6

package/app/modules/vgfilepreview/js/renderers/zip.js

@@ -1,89 +1,89 @@
-import ZipModal from "./zip-modal";
-
-const ZIP_EXTENSIONS = new Set([
-	'.zip'
-]);
-
-class ZipFilePreviewRenderer {
-	constructor() {
-		this.name = 'zip';
-		this._modal = ZipModal.getInstance();
-	}
-
-	canRender(context = {}) {
-		const ext = String(context?.fileMeta?.ext || '').toLowerCase();
-		return ZIP_EXTENSIONS.has(ext);
-	}
-
-	render(context = {}) {
-		const container = context?.previewContainer;
-		const nameOnly = Boolean(context?.ui?.nameOnly);
-		const i18n = context?.i18n;
-
-		const src = context?.fileUrl?.href || context?.filePath || '';
-		if (!src) {
-			return false;
-		}
-
-		const openArchive = (event) => {
-			if (event) {
-				event.preventDefault();
-			}
-
-			this._modal.open({
-				src,
-				title: context?.fileMeta?.name || i18n?.message('archive_title') || '',
-				defaultTitle: i18n?.message('archive_title') || '',
-				labels: {
-					loadingArchive: i18n?.message('loading_archive') || '',
-					cannotOpenArchive: i18n?.message('cannot_open_archive') || '',
-					unknownError: i18n?.message('unknown_error') || '',
-					invalidZip: i18n?.message('invalid_zip') || '',
-					centralDirectoryNotFound: i18n?.message('central_directory_not_found') || '',
-					archiveEmptyUnsupported: i18n?.message('archive_empty_unsupported') || '',
-					typeDir: i18n?.message('archive_type_dir') || '',
-					typeFile: i18n?.message('archive_type_file') || '',
-					tableName: i18n?.message('archive_table_name') || '',
-					tableType: i18n?.message('archive_table_type') || '',
-					tablePacked: i18n?.message('archive_table_packed') || '',
-					tableSize: i18n?.message('archive_table_size') || '',
-					tablePreview: i18n?.message('archive_table_preview') || '',
-					previewEntry: i18n?.button('preview') || '',
-					loadingEntry: i18n?.message('loading_entry') || '',
-					cannotPreviewEntry: i18n?.message('cannot_preview_entry') || '',
-					deflateNotSupported: i18n?.message('deflate_not_supported') || '',
-					compressionNotSupported: i18n?.message('compression_not_supported') || '',
-					entryCorrupted: i18n?.message('entry_corrupted') || '',
-					archiveBufferMissing: i18n?.message('archive_buffer_missing') || '',
-					emptyFileInArchive: i18n?.message('empty_file') || ''
-				}
-			});
-		};
-
-		const titleLink = context?.element?.querySelector('.name');
-		if (titleLink && !titleLink.hasAttribute('data-vg-filepreview-zip-bind')) {
-			titleLink.setAttribute('data-vg-filepreview-zip-bind', 'true');
-			titleLink.classList.add('is-preview-action');
-			titleLink.addEventListener('click', openArchive);
-		}
-
-		if (nameOnly) {
-			return Boolean(titleLink);
-		}
-
-		if (!container) {
-			return false;
-		}
-
-		const trigger = document.createElement('button');
-		trigger.type = 'button';
-		trigger.className = 'vg-filepreview-zip-trigger';
-		trigger.textContent = i18n?.button('open_archive') || '';
-		trigger.addEventListener('click', openArchive);
-		container.appendChild(trigger);
-
-		return true;
-	}
-}
-
-export default ZipFilePreviewRenderer;
+import ZipModal from "./zip-modal";
+
+const ZIP_EXTENSIONS = new Set([
+	'.zip'
+]);
+
+class ZipFilePreviewRenderer {
+	constructor() {
+		this.name = 'zip';
+		this._modal = ZipModal.getInstance();
+	}
+
+	canRender(context = {}) {
+		const ext = String(context?.fileMeta?.ext || '').toLowerCase();
+		return ZIP_EXTENSIONS.has(ext);
+	}
+
+	render(context = {}) {
+		const container = context?.previewContainer;
+		const nameOnly = Boolean(context?.ui?.nameOnly);
+		const i18n = context?.i18n;
+
+		const src = context?.fileUrl?.href || context?.filePath || '';
+		if (!src) {
+			return false;
+		}
+
+		const openArchive = (event) => {
+			if (event) {
+				event.preventDefault();
+			}
+
+			this._modal.open({
+				src,
+				title: context?.fileMeta?.name || i18n?.message('archive_title') || '',
+				defaultTitle: i18n?.message('archive_title') || '',
+				labels: {
+					loadingArchive: i18n?.message('loading_archive') || '',
+					cannotOpenArchive: i18n?.message('cannot_open_archive') || '',
+					unknownError: i18n?.message('unknown_error') || '',
+					invalidZip: i18n?.message('invalid_zip') || '',
+					centralDirectoryNotFound: i18n?.message('central_directory_not_found') || '',
+					archiveEmptyUnsupported: i18n?.message('archive_empty_unsupported') || '',
+					typeDir: i18n?.message('archive_type_dir') || '',
+					typeFile: i18n?.message('archive_type_file') || '',
+					tableName: i18n?.message('archive_table_name') || '',
+					tableType: i18n?.message('archive_table_type') || '',
+					tablePacked: i18n?.message('archive_table_packed') || '',
+					tableSize: i18n?.message('archive_table_size') || '',
+					tablePreview: i18n?.message('archive_table_preview') || '',
+					previewEntry: i18n?.button('preview') || '',
+					loadingEntry: i18n?.message('loading_entry') || '',
+					cannotPreviewEntry: i18n?.message('cannot_preview_entry') || '',
+					deflateNotSupported: i18n?.message('deflate_not_supported') || '',
+					compressionNotSupported: i18n?.message('compression_not_supported') || '',
+					entryCorrupted: i18n?.message('entry_corrupted') || '',
+					archiveBufferMissing: i18n?.message('archive_buffer_missing') || '',
+					emptyFileInArchive: i18n?.message('empty_file') || ''
+				}
+			});
+		};
+
+		const titleLink = context?.element?.querySelector('.name');
+		if (titleLink && !titleLink.hasAttribute('data-vg-filepreview-zip-bind')) {
+			titleLink.setAttribute('data-vg-filepreview-zip-bind', 'true');
+			titleLink.classList.add('is-preview-action');
+			titleLink.addEventListener('click', openArchive);
+		}
+
+		if (nameOnly) {
+			return Boolean(titleLink);
+		}
+
+		if (!container) {
+			return false;
+		}
+
+		const trigger = document.createElement('button');
+		trigger.type = 'button';
+		trigger.className = 'vg-filepreview-zip-trigger';
+		trigger.textContent = i18n?.button('open_archive') || '';
+		trigger.addEventListener('click', openArchive);
+		container.appendChild(trigger);
+
+		return true;
+	}
+}
+
+export default ZipFilePreviewRenderer;

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

@@ -936,13 +936,13 @@ class VGFilePreview extends BaseModule {
 		return String(this._fileMeta?.originalName || this._fileMeta?.name || '').trim();
 	}
 
-	_getDataDisplayName() {
-		const dataName = String(this._element?.getAttribute('data-name') || '').trim();
-		if (dataName) {
-			return dataName;
-		}
-
-		return String(this._element?.getAttribute('data-vg-filepreview-display-name') || '').trim();
+	_getDataDisplayName() {
+		const dataName = String(this._element?.getAttribute('data-name') || '').trim();
+		if (dataName) {
+			return dataName;
+		}
+
+		return String(this._element?.getAttribute('data-vg-filepreview-display-name') || '').trim();
 	}
 
 	_hasDataDrivenDisplayName() {

package/app/modules/vgfilepreview/readme.md

@@ -1,68 +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` в нужном порядке приоритета.
-
+## 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

@@ -1,115 +1,115 @@
-@use "../../../utils/scss" as vg;
-
-$filepreview-map: (
-		panel: (
-				bg: var(--vg-media-bg, #111111),
-				color: var(--vg-media-text-color, #ffffff),
-				border: vg.$border-width vg.$border-style var(--vg-media-border-color, rgba(255, 255, 255, .12)),
-		),
-		modal: (
-				content-bg: var(--vg-media-bg, #111111),
-				content-color: var(--vg-media-text-color, #ffffff),
-				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: var(--vg-media-border-color, rgba(255, 255, 255, .12)),
-				toggle-color: var(--vg-media-text-color, #ffffff),
-				name-line-height: 1.2,
-				progress-track: var(--vg-media-subtle-bg, rgba(255, 255, 255, .06)),
-				progress-fill: var(--vg-media-active-bg, 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: var(--vg-media-text-color, #ffffff),
-				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: var(--vg-media-subtle-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: var(--vg-media-muted-bg, rgba(255, 255, 255, .08)),
-				markdown-link-color: var(--vg-media-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: var(--vg-media-border-color, 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: var(--vg-media-border-color, rgba(255, 255, 255, .12)),
-		),
-		zip: (
-				content-max-height: calc(84vh - 90px),
-				content-bg: var(--vg-media-subtle-bg, rgba(255, 255, 255, .06)),
-				content-radius: 8px,
-				content-padding: 10px,
-				table-font-size: 12px,
-				table-cell-padding: 6px 8px,
-				table-border: vg.$border-width vg.$border-style var(--vg-media-border-color, rgba(255, 255, 255, .12)),
-				status-font-size: 13px,
-		),
-) !default;
+@use "../../../utils/scss" as vg;
+
+$filepreview-map: (
+		panel: (
+				bg: var(--vg-media-bg, #111111),
+				color: var(--vg-media-text-color, #ffffff),
+				border: vg.$border-width vg.$border-style var(--vg-media-border-color, rgba(255, 255, 255, .12)),
+		),
+		modal: (
+				content-bg: var(--vg-media-bg, #111111),
+				content-color: var(--vg-media-text-color, #ffffff),
+				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: var(--vg-media-border-color, rgba(255, 255, 255, .12)),
+				toggle-color: var(--vg-media-text-color, #ffffff),
+				name-line-height: 1.2,
+				progress-track: var(--vg-media-subtle-bg, rgba(255, 255, 255, .06)),
+				progress-fill: var(--vg-media-active-bg, 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: var(--vg-media-text-color, #ffffff),
+				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: var(--vg-media-subtle-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: var(--vg-media-muted-bg, rgba(255, 255, 255, .08)),
+				markdown-link-color: var(--vg-media-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: var(--vg-media-border-color, 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: var(--vg-media-border-color, rgba(255, 255, 255, .12)),
+		),
+		zip: (
+				content-max-height: calc(84vh - 90px),
+				content-bg: var(--vg-media-subtle-bg, rgba(255, 255, 255, .06)),
+				content-radius: 8px,
+				content-padding: 10px,
+				table-font-size: 12px,
+				table-cell-padding: 6px 8px,
+				table-border: vg.$border-width vg.$border-style var(--vg-media-border-color, rgba(255, 255, 255, .12)),
+				status-font-size: 13px,
+		),
+) !default;