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.
- package/CHANGELOG.md +8 -0
- package/README.md +19 -16
- package/app/langs/en/buttons.json +17 -2
- package/app/langs/en/messages.json +36 -1
- package/app/langs/ru/buttons.json +17 -2
- package/app/langs/ru/messages.json +69 -34
- package/app/modules/module-fn.js +15 -9
- package/app/modules/vgfilepreview/index.js +3 -0
- package/app/modules/vgfilepreview/js/i18n.js +56 -0
- package/app/modules/vgfilepreview/js/renderers/image-modal.js +145 -0
- package/app/modules/vgfilepreview/js/renderers/image.js +92 -0
- package/app/modules/vgfilepreview/js/renderers/index.js +19 -0
- package/app/modules/vgfilepreview/js/renderers/office-modal.js +168 -0
- package/app/modules/vgfilepreview/js/renderers/office.js +79 -0
- package/app/modules/vgfilepreview/js/renderers/pdf-modal.js +260 -0
- package/app/modules/vgfilepreview/js/renderers/pdf.js +76 -0
- package/app/modules/vgfilepreview/js/renderers/playlist.js +71 -0
- package/app/modules/vgfilepreview/js/renderers/text-modal.js +343 -0
- package/app/modules/vgfilepreview/js/renderers/text.js +83 -0
- package/app/modules/vgfilepreview/js/renderers/video-modal.js +272 -0
- package/app/modules/vgfilepreview/js/renderers/video.js +80 -0
- package/app/modules/vgfilepreview/js/renderers/zip-modal.js +522 -0
- package/app/modules/vgfilepreview/js/renderers/zip.js +89 -0
- package/app/modules/vgfilepreview/js/vgfilepreview.js +532 -0
- package/app/modules/vgfilepreview/readme.md +68 -0
- package/app/modules/vgfilepreview/scss/_variables.scss +113 -0
- package/app/modules/vgfilepreview/scss/vgfilepreview.scss +460 -0
- package/app/modules/vgfiles/js/base.js +463 -175
- package/app/modules/vgfiles/js/droppable.js +260 -260
- package/app/modules/vgfiles/js/render.js +153 -153
- package/app/modules/vgfiles/js/vgfiles.js +41 -29
- package/app/modules/vgfiles/readme.md +116 -217
- package/app/modules/vgfiles/scss/_variables.scss +18 -10
- package/app/modules/vgfiles/scss/vgfiles.scss +153 -59
- package/app/modules/vgformsender/js/vgformsender.js +13 -13
- package/app/modules/vgmodal/js/vgmodal.js +12 -0
- package/app/modules/vgnav/js/vgnav.js +135 -135
- package/app/modules/vgnav/readme.md +67 -67
- package/app/modules/vgnestable/README.md +307 -307
- package/app/modules/vgnestable/scss/_variables.scss +60 -60
- package/app/modules/vgnestable/scss/vgnestable.scss +163 -163
- package/app/modules/vgselect/js/vgselect.js +39 -39
- package/app/modules/vgselect/scss/vgselect.scss +22 -22
- package/app/modules/vgspy/readme.md +28 -28
- package/app/utils/js/components/audio-metadata.js +240 -0
- package/app/utils/js/components/file-icon.js +109 -0
- package/app/utils/js/components/file-preview.js +304 -0
- package/app/utils/js/components/sanitize.js +150 -150
- package/build/vgapp.css +1 -1
- package/build/vgapp.css.map +1 -1
- package/index.js +1 -0
- package/index.scss +9 -6
- 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`.
|