vgapp 1.1.3 → 1.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (54) hide show
  1. package/CHANGELOG.md +30 -1
  2. package/README.md +48 -48
  3. package/agents.md +7 -0
  4. package/app/langs/en/buttons.json +17 -17
  5. package/app/langs/en/messages.json +36 -36
  6. package/app/langs/ru/buttons.json +17 -17
  7. package/app/langs/ru/messages.json +36 -36
  8. package/app/modules/vgfilepreview/js/i18n.js +56 -56
  9. package/app/modules/vgfilepreview/js/renderers/image-modal.js +145 -145
  10. package/app/modules/vgfilepreview/js/renderers/image.js +92 -92
  11. package/app/modules/vgfilepreview/js/renderers/index.js +19 -19
  12. package/app/modules/vgfilepreview/js/renderers/office-modal.js +168 -168
  13. package/app/modules/vgfilepreview/js/renderers/office.js +79 -79
  14. package/app/modules/vgfilepreview/js/renderers/pdf-modal.js +260 -260
  15. package/app/modules/vgfilepreview/js/renderers/pdf.js +76 -76
  16. package/app/modules/vgfilepreview/js/renderers/playlist.js +71 -71
  17. package/app/modules/vgfilepreview/js/renderers/text-modal.js +343 -343
  18. package/app/modules/vgfilepreview/js/renderers/text.js +83 -83
  19. package/app/modules/vgfilepreview/js/renderers/video-modal.js +272 -272
  20. package/app/modules/vgfilepreview/js/renderers/video.js +80 -80
  21. package/app/modules/vgfilepreview/js/renderers/zip-modal.js +522 -522
  22. package/app/modules/vgfilepreview/js/renderers/zip.js +89 -89
  23. package/app/modules/vgfilepreview/js/vgfilepreview.js +965 -530
  24. package/app/modules/vgfilepreview/readme.md +68 -68
  25. package/app/modules/vgfilepreview/scss/_variables.scss +113 -113
  26. package/app/modules/vgfilepreview/scss/vgfilepreview.scss +464 -460
  27. package/app/modules/vgfiles/js/base.js +463 -463
  28. package/app/modules/vgfiles/js/droppable.js +260 -260
  29. package/app/modules/vgfiles/js/render.js +153 -153
  30. package/app/modules/vgfiles/js/vgfiles.js +41 -41
  31. package/app/modules/vgfiles/readme.md +123 -123
  32. package/app/modules/vgfiles/scss/_variables.scss +18 -18
  33. package/app/modules/vgfiles/scss/vgfiles.scss +148 -148
  34. package/app/modules/vgformsender/js/vgformsender.js +13 -13
  35. package/app/modules/vgmodal/js/vgmodal.drag.js +332 -0
  36. package/app/modules/vgmodal/js/vgmodal.js +116 -14
  37. package/app/modules/vgmodal/js/vgmodal.resize.js +435 -0
  38. package/app/modules/vgnav/js/vgnav.js +135 -135
  39. package/app/modules/vgnav/readme.md +67 -67
  40. package/app/modules/vgnestable/README.md +307 -307
  41. package/app/modules/vgnestable/scss/_variables.scss +60 -60
  42. package/app/modules/vgnestable/scss/vgnestable.scss +163 -163
  43. package/app/modules/vgselect/js/vgselect.js +39 -39
  44. package/app/modules/vgselect/scss/vgselect.scss +22 -22
  45. package/app/modules/vgspy/readme.md +28 -28
  46. package/app/utils/js/components/audio-metadata.js +240 -240
  47. package/app/utils/js/components/file-icon.js +109 -109
  48. package/app/utils/js/components/file-preview.js +304 -304
  49. package/app/utils/js/components/sanitize.js +150 -150
  50. package/app/utils/js/components/video-metadata.js +140 -0
  51. package/build/vgapp.css +1 -1
  52. package/build/vgapp.css.map +1 -1
  53. package/index.scss +9 -9
  54. package/package.json +1 -1
@@ -1,68 +1,68 @@
1
- ## VGFilePreview
2
-
3
- Модуль предпросмотра файлов для элементов с атрибутом `data-vg-filepreview`.
4
-
5
- ### Новые фичи
6
-
7
- - Inline-аудио в поле `.name`: play/pause, прогресс через CSS-переменную `--vg-filepreview-audio-inline-progress`, и контроль единственного активного аудио.
8
- - Унифицированная кнопка скачивания: модуль сам создает/инициализирует control в поле `download`, скачивает через `fetch + blob` и имеет fallback на прямую ссылку.
9
- - Режим `ui.nameOnly`: рендер только действий по имени файла (без кнопок/контейнера предпросмотра).
10
- - Автоопределение языка (`ru`/`en`) с приоритетом: `params.lang` -> `element[lang]` -> ближайший `[lang]` -> `<html lang>` -> `navigator.language`.
11
- - Видео-плейлист между соседними превью: `prev/next`, циклическая навигация и hotkeys `ArrowLeft/ArrowRight`.
12
- - ZIP-предпросмотр с кэшем: таблица содержимого архива + предпросмотр поддерживаемых файлов внутри архива (текст/изображения), включая deflate-raw через `DecompressionStream`.
13
- - Текстовый/Markdown modal с кэшем, безопасной обработкой ссылок и прерыванием прошлых запросов (`AbortController`).
14
-
15
- ### Что умеет модуль
16
-
17
- - Определяет тип файла и подставляет SVG-иконку.
18
- - Заполняет поля карточки: `name`, `ext`, `size`, `original_name`, `icon`, `download`, `preview`.
19
- - Запускает предпросмотр по типам файлов:
20
- - изображения (`png/jpg/webp/svg/...`);
21
- - видео (`mp4/webm/mov/mkv/avi/m4v`);
22
- - текст (`txt/md/csv/json/xml/yml/yaml/log/ini/conf/env`);
23
- - `pdf`;
24
- - office (`doc/docx/xls/xlsx/ppt/pptx/odt/ods/odp`);
25
- - архивы (`zip`).
26
- - Для интерактивных рендеров автоматически вешает обработчики клика на `.name` (`is-preview-action`).
27
-
28
- ### Состояния и валидация
29
-
30
- - Валидация пути через helper (`data-vg-filepreview-valid`, `data-vg-filepreview-error`).
31
- - Текущее состояние рендера в `data-vg-filepreview-state`:
32
- - `loading`
33
- - `ready`
34
- - `empty`
35
- - `error`
36
- - Выбранный рендерер в `data-vg-filepreview-renderer` (`image`, `video`, `pdf`, `office`, `zip`, `text`, `audio`).
37
-
38
- ### Атрибуты и слоты
39
-
40
- - `data-vg-filepreview` — путь к файлу (обязательный).
41
- - `data-fields` — список полей для синхронизации (например, `name,size,download`).
42
- - Поддерживаемые поля: `icon`, `name`, `ext`, `size`, `original_name`, `preview`, `download`.
43
- - Если поле `preview` не найдено, модуль создает `<div class="preview" data-vg-filepreview-slot="preview">` автоматически (кроме `ui.nameOnly`).
44
-
45
- ### Параметры
46
-
47
- ```js
48
- new VGFilePreview(element, {
49
- validate: true,
50
- lang: 'ru',
51
- ui: {
52
- nameOnly: false
53
- }
54
- });
55
- ```
56
-
57
- - `validate` (`boolean`, default `true`) — проверка пути до файла.
58
- - `lang` (`'ru' | 'en'`) — язык кнопок/сообщений.
59
- - `ui.nameOnly` (`boolean`, default `false`) — не создавать UI-контейнер предпросмотра.
60
-
61
- ### Расширение
62
-
63
- Рендереры подключаются через `js/renderers/index.js`.
64
-
65
- 1. Создайте рендерер в `js/renderers/`.
66
- 2. Реализуйте `canRender(context)` и `render(context)`.
67
- 3. Добавьте рендерер в `js/renderers/index.js` в нужном порядке приоритета.
68
-
1
+ ## VGFilePreview
2
+
3
+ Модуль предпросмотра файлов для элементов с атрибутом `data-vg-filepreview`.
4
+
5
+ ### Новые фичи
6
+
7
+ - Inline-аудио в поле `.name`: play/pause, прогресс через CSS-переменную `--vg-filepreview-audio-inline-progress`, и контроль единственного активного аудио.
8
+ - Унифицированная кнопка скачивания: модуль сам создает/инициализирует control в поле `download`, скачивает через `fetch + blob` и имеет fallback на прямую ссылку.
9
+ - Режим `ui.nameOnly`: рендер только действий по имени файла (без кнопок/контейнера предпросмотра).
10
+ - Автоопределение языка (`ru`/`en`) с приоритетом: `params.lang` -> `element[lang]` -> ближайший `[lang]` -> `<html lang>` -> `navigator.language`.
11
+ - Видео-плейлист между соседними превью: `prev/next`, циклическая навигация и hotkeys `ArrowLeft/ArrowRight`.
12
+ - ZIP-предпросмотр с кэшем: таблица содержимого архива + предпросмотр поддерживаемых файлов внутри архива (текст/изображения), включая deflate-raw через `DecompressionStream`.
13
+ - Текстовый/Markdown modal с кэшем, безопасной обработкой ссылок и прерыванием прошлых запросов (`AbortController`).
14
+
15
+ ### Что умеет модуль
16
+
17
+ - Определяет тип файла и подставляет SVG-иконку.
18
+ - Заполняет поля карточки: `name`, `ext`, `size`, `original_name`, `icon`, `download`, `preview`.
19
+ - Запускает предпросмотр по типам файлов:
20
+ - изображения (`png/jpg/webp/svg/...`);
21
+ - видео (`mp4/webm/mov/mkv/avi/m4v`);
22
+ - текст (`txt/md/csv/json/xml/yml/yaml/log/ini/conf/env`);
23
+ - `pdf`;
24
+ - office (`doc/docx/xls/xlsx/ppt/pptx/odt/ods/odp`);
25
+ - архивы (`zip`).
26
+ - Для интерактивных рендеров автоматически вешает обработчики клика на `.name` (`is-preview-action`).
27
+
28
+ ### Состояния и валидация
29
+
30
+ - Валидация пути через helper (`data-vg-filepreview-valid`, `data-vg-filepreview-error`).
31
+ - Текущее состояние рендера в `data-vg-filepreview-state`:
32
+ - `loading`
33
+ - `ready`
34
+ - `empty`
35
+ - `error`
36
+ - Выбранный рендерер в `data-vg-filepreview-renderer` (`image`, `video`, `pdf`, `office`, `zip`, `text`, `audio`).
37
+
38
+ ### Атрибуты и слоты
39
+
40
+ - `data-vg-filepreview` — путь к файлу (обязательный).
41
+ - `data-fields` — список полей для синхронизации (например, `name,size,download`).
42
+ - Поддерживаемые поля: `icon`, `name`, `ext`, `size`, `original_name`, `preview`, `download`.
43
+ - Если поле `preview` не найдено, модуль создает `<div class="preview" data-vg-filepreview-slot="preview">` автоматически (кроме `ui.nameOnly`).
44
+
45
+ ### Параметры
46
+
47
+ ```js
48
+ new VGFilePreview(element, {
49
+ validate: true,
50
+ lang: 'ru',
51
+ ui: {
52
+ nameOnly: false
53
+ }
54
+ });
55
+ ```
56
+
57
+ - `validate` (`boolean`, default `true`) — проверка пути до файла.
58
+ - `lang` (`'ru' | 'en'`) — язык кнопок/сообщений.
59
+ - `ui.nameOnly` (`boolean`, default `false`) — не создавать UI-контейнер предпросмотра.
60
+
61
+ ### Расширение
62
+
63
+ Рендереры подключаются через `js/renderers/index.js`.
64
+
65
+ 1. Создайте рендерер в `js/renderers/`.
66
+ 2. Реализуйте `canRender(context)` и `render(context)`.
67
+ 3. Добавьте рендерер в `js/renderers/index.js` в нужном порядке приоритета.
68
+
@@ -1,113 +1,113 @@
1
- $filepreview-map: (
2
- panel: (
3
- bg: #111,
4
- color: #fff,
5
- border: 1px solid rgba(255, 255, 255, .12),
6
- ),
7
- modal: (
8
- content-bg: #111,
9
- content-color: #fff,
10
- close-top: 10px,
11
- close-right: 10px,
12
- body-padding: 1rem 0 0,
13
- title-size: 13px,
14
- title-weight: 600,
15
- title-line-height: 1.3,
16
- title-margin-bottom: 10px,
17
- ),
18
- audio-inline: (
19
- gap: 12px,
20
- toggle-size: 24px,
21
- icon-size: 18px,
22
- toggle-radius: 999px,
23
- toggle-bg: rgba(255, 255, 255, .12),
24
- toggle-color: #fff,
25
- name-line-height: 1.2,
26
- progress-track: rgba(255, 255, 255, .06),
27
- progress-fill: rgba(255, 255, 255, .16),
28
- progress-radius: 6px,
29
- progress-padding-x: 4px,
30
- ),
31
- trigger: (
32
- radius: 8px,
33
- padding: 8px 12px,
34
- font-size: 13px,
35
- font-weight: 600,
36
- color: #fff,
37
- image-bg: #0f766e,
38
- text-bg: #334155,
39
- video-bg: #7c3aed,
40
- zip-bg: #b45309,
41
- ),
42
- image: (
43
- body-gap: 12px,
44
- img-max-width: min(92vw, 1240px),
45
- img-max-height: calc(92vh - 80px),
46
- img-radius: 8px,
47
- thumb-margin-top: 10px,
48
- thumb-max-width: 180px,
49
- thumb-max-height: 100px,
50
- thumb-radius: 8px,
51
- ),
52
- text: (
53
- content-padding: 12px,
54
- content-max-height: calc(84vh - 90px),
55
- content-bg: rgba(255, 255, 255, .06),
56
- content-radius: 8px,
57
- content-font-size: 13px,
58
- content-line-height: 1.45,
59
- markdown-heading-line-height: 1.25,
60
- markdown-block-margin: 0 0 10px,
61
- markdown-list-margin: 0 0 10px 20px,
62
- markdown-code-padding: 10px,
63
- markdown-code-radius: 6px,
64
- markdown-code-bg: rgba(255, 255, 255, .08),
65
- markdown-link-color: #93c5fd,
66
- ),
67
- video: (
68
- player-width: min(92vw, 1240px),
69
- player-max-height: calc(86vh - 90px),
70
- player-radius: 8px,
71
- player-bg: #000,
72
- ),
73
- pdf: (
74
- toolbar-gap: 8px,
75
- toolbar-margin-bottom: 10px,
76
- btn-radius: 8px,
77
- btn-padding: 6px 10px,
78
- btn-font-size: 12px,
79
- btn-font-weight: 600,
80
- btn-bg: rgba(255, 255, 255, .12),
81
- meta-font-size: 12px,
82
- meta-opacity: .75,
83
- frame-width: min(96vw, 1280px),
84
- frame-height: min(78vh, 860px),
85
- frame-radius: 8px,
86
- frame-bg: #fff,
87
- ),
88
- office: (
89
- frame-width: min(96vw, 1280px),
90
- frame-height: min(74vh, 820px),
91
- frame-radius: 8px,
92
- frame-bg: #fff,
93
- footer-gap: 12px,
94
- footer-margin-top: 10px,
95
- hint-font-size: 12px,
96
- hint-opacity: .75,
97
- btn-radius: 8px,
98
- btn-padding: 6px 10px,
99
- btn-font-size: 12px,
100
- btn-font-weight: 600,
101
- btn-bg: rgba(255, 255, 255, .12),
102
- ),
103
- zip: (
104
- content-max-height: calc(84vh - 90px),
105
- content-bg: rgba(255, 255, 255, .06),
106
- content-radius: 8px,
107
- content-padding: 10px,
108
- table-font-size: 12px,
109
- table-cell-padding: 6px 8px,
110
- table-border: 1px solid rgba(255, 255, 255, .12),
111
- status-font-size: 13px,
112
- ),
113
- );
1
+ $filepreview-map: (
2
+ panel: (
3
+ bg: #111,
4
+ color: #fff,
5
+ border: 1px solid rgba(255, 255, 255, .12),
6
+ ),
7
+ modal: (
8
+ content-bg: #111,
9
+ content-color: #fff,
10
+ close-top: 10px,
11
+ close-right: 10px,
12
+ body-padding: 1rem 0 0,
13
+ title-size: 13px,
14
+ title-weight: 600,
15
+ title-line-height: 1.3,
16
+ title-margin-bottom: 10px,
17
+ ),
18
+ audio-inline: (
19
+ gap: 12px,
20
+ toggle-size: 24px,
21
+ icon-size: 18px,
22
+ toggle-radius: 999px,
23
+ toggle-bg: rgba(255, 255, 255, .12),
24
+ toggle-color: #fff,
25
+ name-line-height: 1.2,
26
+ progress-track: rgba(255, 255, 255, .06),
27
+ progress-fill: rgba(255, 255, 255, .16),
28
+ progress-radius: 6px,
29
+ progress-padding-x: 4px,
30
+ ),
31
+ trigger: (
32
+ radius: 8px,
33
+ padding: 8px 12px,
34
+ font-size: 13px,
35
+ font-weight: 600,
36
+ color: #fff,
37
+ image-bg: #0f766e,
38
+ text-bg: #334155,
39
+ video-bg: #7c3aed,
40
+ zip-bg: #b45309,
41
+ ),
42
+ image: (
43
+ body-gap: 12px,
44
+ img-max-width: min(92vw, 1240px),
45
+ img-max-height: calc(92vh - 80px),
46
+ img-radius: 8px,
47
+ thumb-margin-top: 10px,
48
+ thumb-max-width: 180px,
49
+ thumb-max-height: 100px,
50
+ thumb-radius: 8px,
51
+ ),
52
+ text: (
53
+ content-padding: 12px,
54
+ content-max-height: calc(84vh - 90px),
55
+ content-bg: rgba(255, 255, 255, .06),
56
+ content-radius: 8px,
57
+ content-font-size: 13px,
58
+ content-line-height: 1.45,
59
+ markdown-heading-line-height: 1.25,
60
+ markdown-block-margin: 0 0 10px,
61
+ markdown-list-margin: 0 0 10px 20px,
62
+ markdown-code-padding: 10px,
63
+ markdown-code-radius: 6px,
64
+ markdown-code-bg: rgba(255, 255, 255, .08),
65
+ markdown-link-color: #93c5fd,
66
+ ),
67
+ video: (
68
+ player-width: min(92vw, 1240px),
69
+ player-max-height: calc(86vh - 90px),
70
+ player-radius: 8px,
71
+ player-bg: #000,
72
+ ),
73
+ pdf: (
74
+ toolbar-gap: 8px,
75
+ toolbar-margin-bottom: 10px,
76
+ btn-radius: 8px,
77
+ btn-padding: 6px 10px,
78
+ btn-font-size: 12px,
79
+ btn-font-weight: 600,
80
+ btn-bg: rgba(255, 255, 255, .12),
81
+ meta-font-size: 12px,
82
+ meta-opacity: .75,
83
+ frame-width: min(96vw, 1280px),
84
+ frame-height: min(78vh, 860px),
85
+ frame-radius: 8px,
86
+ frame-bg: #fff,
87
+ ),
88
+ office: (
89
+ frame-width: min(96vw, 1280px),
90
+ frame-height: min(74vh, 820px),
91
+ frame-radius: 8px,
92
+ frame-bg: #fff,
93
+ footer-gap: 12px,
94
+ footer-margin-top: 10px,
95
+ hint-font-size: 12px,
96
+ hint-opacity: .75,
97
+ btn-radius: 8px,
98
+ btn-padding: 6px 10px,
99
+ btn-font-size: 12px,
100
+ btn-font-weight: 600,
101
+ btn-bg: rgba(255, 255, 255, .12),
102
+ ),
103
+ zip: (
104
+ content-max-height: calc(84vh - 90px),
105
+ content-bg: rgba(255, 255, 255, .06),
106
+ content-radius: 8px,
107
+ content-padding: 10px,
108
+ table-font-size: 12px,
109
+ table-cell-padding: 6px 8px,
110
+ table-border: 1px solid rgba(255, 255, 255, .12),
111
+ status-font-size: 13px,
112
+ ),
113
+ );