vgapp 1.1.2 → 1.1.3

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 (53) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/README.md +19 -16
  3. package/app/langs/en/buttons.json +17 -2
  4. package/app/langs/en/messages.json +36 -1
  5. package/app/langs/ru/buttons.json +17 -2
  6. package/app/langs/ru/messages.json +69 -34
  7. package/app/modules/module-fn.js +15 -9
  8. package/app/modules/vgfilepreview/index.js +3 -0
  9. package/app/modules/vgfilepreview/js/i18n.js +56 -0
  10. package/app/modules/vgfilepreview/js/renderers/image-modal.js +145 -0
  11. package/app/modules/vgfilepreview/js/renderers/image.js +92 -0
  12. package/app/modules/vgfilepreview/js/renderers/index.js +19 -0
  13. package/app/modules/vgfilepreview/js/renderers/office-modal.js +168 -0
  14. package/app/modules/vgfilepreview/js/renderers/office.js +79 -0
  15. package/app/modules/vgfilepreview/js/renderers/pdf-modal.js +260 -0
  16. package/app/modules/vgfilepreview/js/renderers/pdf.js +76 -0
  17. package/app/modules/vgfilepreview/js/renderers/playlist.js +71 -0
  18. package/app/modules/vgfilepreview/js/renderers/text-modal.js +343 -0
  19. package/app/modules/vgfilepreview/js/renderers/text.js +83 -0
  20. package/app/modules/vgfilepreview/js/renderers/video-modal.js +272 -0
  21. package/app/modules/vgfilepreview/js/renderers/video.js +80 -0
  22. package/app/modules/vgfilepreview/js/renderers/zip-modal.js +522 -0
  23. package/app/modules/vgfilepreview/js/renderers/zip.js +89 -0
  24. package/app/modules/vgfilepreview/js/vgfilepreview.js +532 -0
  25. package/app/modules/vgfilepreview/readme.md +68 -0
  26. package/app/modules/vgfilepreview/scss/_variables.scss +113 -0
  27. package/app/modules/vgfilepreview/scss/vgfilepreview.scss +460 -0
  28. package/app/modules/vgfiles/js/base.js +463 -175
  29. package/app/modules/vgfiles/js/droppable.js +260 -260
  30. package/app/modules/vgfiles/js/render.js +153 -153
  31. package/app/modules/vgfiles/js/vgfiles.js +41 -29
  32. package/app/modules/vgfiles/readme.md +116 -217
  33. package/app/modules/vgfiles/scss/_variables.scss +18 -10
  34. package/app/modules/vgfiles/scss/vgfiles.scss +153 -59
  35. package/app/modules/vgformsender/js/vgformsender.js +13 -13
  36. package/app/modules/vgmodal/js/vgmodal.js +12 -0
  37. package/app/modules/vgnav/js/vgnav.js +135 -135
  38. package/app/modules/vgnav/readme.md +67 -67
  39. package/app/modules/vgnestable/README.md +307 -307
  40. package/app/modules/vgnestable/scss/_variables.scss +60 -60
  41. package/app/modules/vgnestable/scss/vgnestable.scss +163 -163
  42. package/app/modules/vgselect/js/vgselect.js +39 -39
  43. package/app/modules/vgselect/scss/vgselect.scss +22 -22
  44. package/app/modules/vgspy/readme.md +28 -28
  45. package/app/utils/js/components/audio-metadata.js +240 -0
  46. package/app/utils/js/components/file-icon.js +109 -0
  47. package/app/utils/js/components/file-preview.js +304 -0
  48. package/app/utils/js/components/sanitize.js +150 -150
  49. package/build/vgapp.css +1 -1
  50. package/build/vgapp.css.map +1 -1
  51. package/index.js +1 -0
  52. package/index.scss +9 -6
  53. package/package.json +1 -1
@@ -274,18 +274,18 @@ class VGFormSender extends BaseModule {
274
274
  * @param {FormData|null} data - Дополнительные данные для отправки
275
275
  */
276
276
  request(event, data = null) {
277
- const _this = this;
278
- const mergeFormData = (target, source) => {
279
- const replacedKeys = new Set();
280
- source.forEach((value, key) => {
281
- if (!replacedKeys.has(key)) {
282
- target.delete(key);
283
- replacedKeys.add(key);
284
- }
285
- target.append(key, value);
286
- });
287
- return target;
288
- }
277
+ const _this = this;
278
+ const mergeFormData = (target, source) => {
279
+ const replacedKeys = new Set();
280
+ source.forEach((value, key) => {
281
+ if (!replacedKeys.has(key)) {
282
+ target.delete(key);
283
+ replacedKeys.add(key);
284
+ }
285
+ target.append(key, value);
286
+ });
287
+ return target;
288
+ }
289
289
 
290
290
  _this._alertBefore();
291
291
 
@@ -782,4 +782,4 @@ EventHandler.on(document, EVENT_SUBMIT_DATA_API, function (event) {
782
782
  }
783
783
  })
784
784
 
785
- export default VGFormSender;
785
+ export default VGFormSender;
@@ -52,6 +52,10 @@ class VGModal extends BaseModule {
52
52
  hash: false,
53
53
  centered: false,
54
54
  dismiss: true,
55
+ sizes: {
56
+ width: '',
57
+ height: '',
58
+ },
55
59
  ajax: {
56
60
  route: '',
57
61
  target: '',
@@ -146,6 +150,14 @@ class VGModal extends BaseModule {
146
150
  modal._animation(_element, VGModal.NAME_KEY, params.animation);
147
151
  }
148
152
 
153
+ if ('sizes' in modal._params && modal._params.sizes.width) {
154
+ _element.style.setProperty('--vg-modal-width', modal._params.sizes.width);
155
+ }
156
+
157
+ if ('sizes' in modal._params && modal._params.sizes.height) {
158
+ dialog.style.height = modal._params.sizes.height;
159
+ }
160
+
149
161
  execute(callback, [modal]);
150
162
 
151
163
  return modal;
@@ -48,18 +48,18 @@ class VGNav extends BaseModule {
48
48
  constructor(element, params = {}) {
49
49
  super(element);
50
50
 
51
- this._params = this._getParams(element, mergeDeepObject({
52
- breakpoint: 'lg',
53
- placement: 'horizontal',
54
- hover: true,
55
- hoversmoothfirstlevel: {
56
- enable: false,
57
- horizontalOnly: true
58
- },
59
- animation: {
60
- enable: true,
61
- timeout: 700
62
- },
51
+ this._params = this._getParams(element, mergeDeepObject({
52
+ breakpoint: 'lg',
53
+ placement: 'horizontal',
54
+ hover: true,
55
+ hoversmoothfirstlevel: {
56
+ enable: false,
57
+ horizontalOnly: true
58
+ },
59
+ animation: {
60
+ enable: true,
61
+ timeout: 700
62
+ },
63
63
  toggle: '<span class="default"></span>',
64
64
  hamburger: {
65
65
  enable: true,
@@ -101,11 +101,11 @@ class VGNav extends BaseModule {
101
101
  this._params.animation.timeout = 10;
102
102
  }
103
103
 
104
- this._openDrops = new Map();
105
- this._pointerPosition = null;
106
- this._handleScroll = this._handleScroll.bind(this);
107
- this._handleResize = this._handleResize.bind(this);
108
- }
104
+ this._openDrops = new Map();
105
+ this._pointerPosition = null;
106
+ this._handleScroll = this._handleScroll.bind(this);
107
+ this._handleResize = this._handleResize.bind(this);
108
+ }
109
109
 
110
110
  static get NAME() {
111
111
  return NAME;
@@ -327,128 +327,128 @@ class VGNav extends BaseModule {
327
327
  }
328
328
  }
329
329
 
330
- _isElementInViewport(el) {
331
- const rect = el.getBoundingClientRect();
332
- const viewHeight = window.innerHeight || document.documentElement.clientHeight;
333
- const viewWidth = window.innerWidth || document.documentElement.clientWidth;
330
+ _isElementInViewport(el) {
331
+ const rect = el.getBoundingClientRect();
332
+ const viewHeight = window.innerHeight || document.documentElement.clientHeight;
333
+ const viewWidth = window.innerWidth || document.documentElement.clientWidth;
334
334
 
335
335
  const vertInView = (rect.top <= viewHeight) && ((rect.top + rect.height) >= 0);
336
336
  const horInView = (rect.left <= viewWidth) && ((rect.left + rect.width) >= 0);
337
337
 
338
- return vertInView && horInView;
339
- }
340
-
341
- _updatePointerPosition(event) {
342
- if (!event || typeof event.clientX !== 'number' || typeof event.clientY !== 'number') return;
343
- this._pointerPosition = {
344
- x: event.clientX,
345
- y: event.clientY
346
- };
347
- }
348
-
349
- _isHorizontalPointerMove(event) {
350
- if (!this._pointerPosition || !event) return false;
351
-
352
- const dx = event.clientX - this._pointerPosition.x;
353
- const dy = event.clientY - this._pointerPosition.y;
354
-
355
- return Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 0;
356
- }
357
-
358
- _isFirstLevelDropdown(drop) {
359
- return !!drop && !drop.closest('.dropdown-content');
360
- }
361
-
362
- _hasDirectDropdownContent(drop) {
363
- if (!drop || !drop.children) return false;
364
- return [...drop.children].some((child) => child.classList && child.classList.contains('dropdown-content'));
365
- }
366
-
367
- _isAdjacentDropdown(drop, relatedDrop) {
368
- if (!drop || !relatedDrop) return false;
369
- if (drop.parentElement !== relatedDrop.parentElement) return false;
370
- return drop.previousElementSibling === relatedDrop || drop.nextElementSibling === relatedDrop;
371
- }
372
-
373
- _canSmoothSwitchFirstLevel(event, currentDrop, relatedDrop) {
374
- const smoothParams = this._params.hoversmoothfirstlevel || {};
375
- if (!smoothParams.enable) return false;
376
- if (!currentDrop || !relatedDrop || currentDrop === relatedDrop) return false;
377
- if (!this._isFirstLevelDropdown(currentDrop) || !this._isFirstLevelDropdown(relatedDrop)) return false;
378
- if (!this._hasDirectDropdownContent(currentDrop) || !this._hasDirectDropdownContent(relatedDrop)) return false;
379
- if (!this._isAdjacentDropdown(currentDrop, relatedDrop)) return false;
380
- if (smoothParams.horizontalOnly && !this._isHorizontalPointerMove(event)) return false;
381
-
382
- return true;
383
- }
384
-
385
- static init(element, params = {}) {
386
- const instance = VGNav.getOrCreateInstance(element, params);
387
- instance.build();
388
-
389
- let drops = Selectors.findAll('.dropdown', instance.navigation);
390
-
391
- if (instance._params.hover && !isMobileDevice()) {
392
- EventHandler.on(instance.navigation, `mousemove.${NAME_KEY}.data.api`, function (event) {
393
- instance._updatePointerPosition(event);
394
- });
395
-
396
- [...drops].forEach(function (el) {
397
- let currentElem = null;
398
-
399
- EventHandler.on(el, EVENT_MOUSEOVER_DATA_API, function (event) {
400
- if (currentElem) return;
401
-
402
- let target = event.target.closest('.dropdown');
403
- if (!target) return;
404
-
405
- if (!instance.navigation.contains(target)) return;
406
- currentElem = target;
407
-
408
- const previousDrop = event.relatedTarget?.closest('.dropdown');
409
- const useSmoothSwitch = instance._canSmoothSwitchFirstLevel(event, target, previousDrop);
410
-
411
- if (!useSmoothSwitch) {
412
- VGNav.hideOpenDrops(event);
413
- }
414
-
415
- let relatedTarget = {
416
- relatedTarget: target
417
- };
418
-
419
- instance.show(relatedTarget);
420
-
421
- if (useSmoothSwitch && previousDrop && previousDrop.classList.contains(CLASS_NAME_ACTIVE)) {
422
- instance.hide({ relatedTarget: previousDrop });
423
- }
424
-
425
- instance._updatePointerPosition(event);
426
- });
427
-
428
- EventHandler.on(el, EVENT_MOUSEOUT_DATA_API, function (event) {
429
- if (!currentElem) return;
430
-
431
- let nextDrop = event.relatedTarget?.closest('.dropdown'),
432
- relatedTarget = nextDrop,
433
- elm = currentElem;
434
-
435
- while (relatedTarget) {
436
- if (relatedTarget === currentElem) return;
437
- relatedTarget = relatedTarget.parentNode;
438
- }
439
-
440
- if (instance._canSmoothSwitchFirstLevel(event, elm, nextDrop)) {
441
- currentElem = null;
442
- instance._updatePointerPosition(event);
443
- return;
444
- }
445
-
446
- currentElem = null;
447
- instance.hide({ relatedTarget: relatedTarget, elm: elm });
448
- instance._updatePointerPosition(event);
449
- });
450
- });
451
- }
338
+ return vertInView && horInView;
339
+ }
340
+
341
+ _updatePointerPosition(event) {
342
+ if (!event || typeof event.clientX !== 'number' || typeof event.clientY !== 'number') return;
343
+ this._pointerPosition = {
344
+ x: event.clientX,
345
+ y: event.clientY
346
+ };
347
+ }
348
+
349
+ _isHorizontalPointerMove(event) {
350
+ if (!this._pointerPosition || !event) return false;
351
+
352
+ const dx = event.clientX - this._pointerPosition.x;
353
+ const dy = event.clientY - this._pointerPosition.y;
354
+
355
+ return Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 0;
356
+ }
357
+
358
+ _isFirstLevelDropdown(drop) {
359
+ return !!drop && !drop.closest('.dropdown-content');
360
+ }
361
+
362
+ _hasDirectDropdownContent(drop) {
363
+ if (!drop || !drop.children) return false;
364
+ return [...drop.children].some((child) => child.classList && child.classList.contains('dropdown-content'));
365
+ }
366
+
367
+ _isAdjacentDropdown(drop, relatedDrop) {
368
+ if (!drop || !relatedDrop) return false;
369
+ if (drop.parentElement !== relatedDrop.parentElement) return false;
370
+ return drop.previousElementSibling === relatedDrop || drop.nextElementSibling === relatedDrop;
371
+ }
372
+
373
+ _canSmoothSwitchFirstLevel(event, currentDrop, relatedDrop) {
374
+ const smoothParams = this._params.hoversmoothfirstlevel || {};
375
+ if (!smoothParams.enable) return false;
376
+ if (!currentDrop || !relatedDrop || currentDrop === relatedDrop) return false;
377
+ if (!this._isFirstLevelDropdown(currentDrop) || !this._isFirstLevelDropdown(relatedDrop)) return false;
378
+ if (!this._hasDirectDropdownContent(currentDrop) || !this._hasDirectDropdownContent(relatedDrop)) return false;
379
+ if (!this._isAdjacentDropdown(currentDrop, relatedDrop)) return false;
380
+ if (smoothParams.horizontalOnly && !this._isHorizontalPointerMove(event)) return false;
381
+
382
+ return true;
383
+ }
384
+
385
+ static init(element, params = {}) {
386
+ const instance = VGNav.getOrCreateInstance(element, params);
387
+ instance.build();
388
+
389
+ let drops = Selectors.findAll('.dropdown', instance.navigation);
390
+
391
+ if (instance._params.hover && !isMobileDevice()) {
392
+ EventHandler.on(instance.navigation, `mousemove.${NAME_KEY}.data.api`, function (event) {
393
+ instance._updatePointerPosition(event);
394
+ });
395
+
396
+ [...drops].forEach(function (el) {
397
+ let currentElem = null;
398
+
399
+ EventHandler.on(el, EVENT_MOUSEOVER_DATA_API, function (event) {
400
+ if (currentElem) return;
401
+
402
+ let target = event.target.closest('.dropdown');
403
+ if (!target) return;
404
+
405
+ if (!instance.navigation.contains(target)) return;
406
+ currentElem = target;
407
+
408
+ const previousDrop = event.relatedTarget?.closest('.dropdown');
409
+ const useSmoothSwitch = instance._canSmoothSwitchFirstLevel(event, target, previousDrop);
410
+
411
+ if (!useSmoothSwitch) {
412
+ VGNav.hideOpenDrops(event);
413
+ }
414
+
415
+ let relatedTarget = {
416
+ relatedTarget: target
417
+ };
418
+
419
+ instance.show(relatedTarget);
420
+
421
+ if (useSmoothSwitch && previousDrop && previousDrop.classList.contains(CLASS_NAME_ACTIVE)) {
422
+ instance.hide({ relatedTarget: previousDrop });
423
+ }
424
+
425
+ instance._updatePointerPosition(event);
426
+ });
427
+
428
+ EventHandler.on(el, EVENT_MOUSEOUT_DATA_API, function (event) {
429
+ if (!currentElem) return;
430
+
431
+ let nextDrop = event.relatedTarget?.closest('.dropdown'),
432
+ relatedTarget = nextDrop,
433
+ elm = currentElem;
434
+
435
+ while (relatedTarget) {
436
+ if (relatedTarget === currentElem) return;
437
+ relatedTarget = relatedTarget.parentNode;
438
+ }
439
+
440
+ if (instance._canSmoothSwitchFirstLevel(event, elm, nextDrop)) {
441
+ currentElem = null;
442
+ instance._updatePointerPosition(event);
443
+ return;
444
+ }
445
+
446
+ currentElem = null;
447
+ instance.hide({ relatedTarget: relatedTarget, elm: elm });
448
+ instance._updatePointerPosition(event);
449
+ });
450
+ });
451
+ }
452
452
 
453
453
  const vgNavSidebar = document.querySelector(instance._params.hamburger.target || '#sidebar-nav');
454
454
  let hamburger = instance._element.querySelector('.' + instance._classes.hamburger);
@@ -1,67 +1,67 @@
1
- # VGNav
2
-
3
- JS-модуль навигации с поддержкой dropdown-меню, позиционирования и мобильного режима (гамбургер).
4
-
5
- ## Возможности
6
- - Автосборка структуры: добавляет контейнерные классы, режим размещения (`horizontal` / др.).
7
- - Dropdown-меню с анимацией и управлением состоянием (`show`, `fade`, `active`).
8
- - Hover-режим для десктопа, click-режим для мобильных.
9
- - Автосоздание кнопки-гамбургера, если она отсутствует в разметке.
10
- - Автодобавление toggle-индикатора к пунктам `.dropdown > a`.
11
- - Позиционирование выпадающих меню через компонент `Placement` с автопереворотом.
12
- - Закрытие открытых dropdown при клике вне или по `Tab` (keyup).
13
- - Отслеживание скролла/ресайза и пересчет позиции открытых меню.
14
- - Колбэки `afterInit`, `afterClick` для кастомного поведения.
15
- - Интеграция с сайдбаром через события `vg.sidebar.show` / `vg.sidebar.hide`.
16
-
17
- ## Параметры
18
- Передаются при инициализации `VGNav.init(element, params)`:
19
-
20
- ```js
21
- {
22
- breakpoint: 'lg', // точка, на которой включается hamburger/expand
23
- placement: 'horizontal', // класс размещения: vg-nav-horizontal и т.п.
24
- hover: true, // открытие dropdown по наведению (desktop)
25
- animation: {
26
- enable: true,
27
- timeout: 700
28
- },
29
- toggle: '<span class="default"></span>', // HTML-индикатор возле пунктов dropdown
30
- hamburger: {
31
- enable: true, // создать кнопку, если ее нет
32
- always: false, // всегда режим hamburger
33
- title: '', // текст перед иконкой
34
- body: null, // HTML-контент иконки
35
- target: '#sidebar-nav'
36
- },
37
- callbacks: {
38
- afterInit: noop,
39
- afterClick: noop
40
- }
41
- }
42
- ```
43
-
44
- ## Разметка
45
- Минимальный каркас:
46
-
47
- ```html
48
- <nav class="vg-nav">
49
- <div class="vg-nav-wrapper">
50
- <ul>
51
- <li class="dropdown">
52
- <a href="#">Item</a>
53
- <div class="dropdown-content">...</div>
54
- </li>
55
- </ul>
56
- </div>
57
- </nav>
58
- ```
59
-
60
- ## События
61
- Триггерит:
62
- - `vg.nav.show` / `vg.nav.shown`
63
- - `vg.nav.hide` / `vg.nav.hidden`
64
-
65
- ## Data API
66
- Поведение навигации завязано на клики по `.vg-nav a` и на события `mouseover`/`mouseout`
67
- для `.dropdown` при включенном `hover`.
1
+ # VGNav
2
+
3
+ JS-модуль навигации с поддержкой dropdown-меню, позиционирования и мобильного режима (гамбургер).
4
+
5
+ ## Возможности
6
+ - Автосборка структуры: добавляет контейнерные классы, режим размещения (`horizontal` / др.).
7
+ - Dropdown-меню с анимацией и управлением состоянием (`show`, `fade`, `active`).
8
+ - Hover-режим для десктопа, click-режим для мобильных.
9
+ - Автосоздание кнопки-гамбургера, если она отсутствует в разметке.
10
+ - Автодобавление toggle-индикатора к пунктам `.dropdown > a`.
11
+ - Позиционирование выпадающих меню через компонент `Placement` с автопереворотом.
12
+ - Закрытие открытых dropdown при клике вне или по `Tab` (keyup).
13
+ - Отслеживание скролла/ресайза и пересчет позиции открытых меню.
14
+ - Колбэки `afterInit`, `afterClick` для кастомного поведения.
15
+ - Интеграция с сайдбаром через события `vg.sidebar.show` / `vg.sidebar.hide`.
16
+
17
+ ## Параметры
18
+ Передаются при инициализации `VGNav.init(element, params)`:
19
+
20
+ ```js
21
+ {
22
+ breakpoint: 'lg', // точка, на которой включается hamburger/expand
23
+ placement: 'horizontal', // класс размещения: vg-nav-horizontal и т.п.
24
+ hover: true, // открытие dropdown по наведению (desktop)
25
+ animation: {
26
+ enable: true,
27
+ timeout: 700
28
+ },
29
+ toggle: '<span class="default"></span>', // HTML-индикатор возле пунктов dropdown
30
+ hamburger: {
31
+ enable: true, // создать кнопку, если ее нет
32
+ always: false, // всегда режим hamburger
33
+ title: '', // текст перед иконкой
34
+ body: null, // HTML-контент иконки
35
+ target: '#sidebar-nav'
36
+ },
37
+ callbacks: {
38
+ afterInit: noop,
39
+ afterClick: noop
40
+ }
41
+ }
42
+ ```
43
+
44
+ ## Разметка
45
+ Минимальный каркас:
46
+
47
+ ```html
48
+ <nav class="vg-nav">
49
+ <div class="vg-nav-wrapper">
50
+ <ul>
51
+ <li class="dropdown">
52
+ <a href="#">Item</a>
53
+ <div class="dropdown-content">...</div>
54
+ </li>
55
+ </ul>
56
+ </div>
57
+ </nav>
58
+ ```
59
+
60
+ ## События
61
+ Триггерит:
62
+ - `vg.nav.show` / `vg.nav.shown`
63
+ - `vg.nav.hide` / `vg.nav.hidden`
64
+
65
+ ## Data API
66
+ Поведение навигации завязано на клики по `.vg-nav a` и на события `mouseover`/`mouseout`
67
+ для `.dropdown` при включенном `hover`.