vgapp 1.1.6 → 1.1.7

package/app/modules/vgnav/js/vgnav.js

@@ -48,18 +48,18 @@ class VGNav extends BaseModule {
 	constructor(element, params = {}) {
 		super(element);
 
-		this._params = this._getParams(element, mergeDeepObject({
-			breakpoint: 'lg',
-			placement: 'horizontal',
-			hover: true,
-			hoversmoothfirstlevel: {
-				enable: false,
-				horizontalOnly: true
-			},
-			animation: {
-				enable: true,
-				timeout: 700
-			},
+		this._params = this._getParams(element, mergeDeepObject({
+			breakpoint: 'lg',
+			placement: 'horizontal',
+			hover: true,
+			hoversmoothfirstlevel: {
+				enable: false,
+				horizontalOnly: true
+			},
+			animation: {
+				enable: true,
+				timeout: 700
+			},
 			toggle: '<span class="default"></span>',
 			hamburger: {
 				enable: true,
@@ -101,11 +101,11 @@ class VGNav extends BaseModule {
 			this._params.animation.timeout = 10;
 		}
 
-		this._openDrops = new Map();
-		this._pointerPosition = null;
-		this._handleScroll = this._handleScroll.bind(this);
-		this._handleResize = this._handleResize.bind(this);
-	}
+		this._openDrops = new Map();
+		this._pointerPosition = null;
+		this._handleScroll = this._handleScroll.bind(this);
+		this._handleResize = this._handleResize.bind(this);
+	}
 
 	static get NAME() {
 		return NAME;
@@ -327,128 +327,128 @@ class VGNav extends BaseModule {
 		}
 	}
 
-	_isElementInViewport(el) {
-		const rect = el.getBoundingClientRect();
-		const viewHeight = window.innerHeight || document.documentElement.clientHeight;
-		const viewWidth = window.innerWidth || document.documentElement.clientWidth;
+	_isElementInViewport(el) {
+		const rect = el.getBoundingClientRect();
+		const viewHeight = window.innerHeight || document.documentElement.clientHeight;
+		const viewWidth = window.innerWidth || document.documentElement.clientWidth;
 
 		const vertInView = (rect.top <= viewHeight) && ((rect.top + rect.height) >= 0);
 		const horInView = (rect.left <= viewWidth) && ((rect.left + rect.width) >= 0);
 
-		return vertInView && horInView;
-	}
-
-	_updatePointerPosition(event) {
-		if (!event || typeof event.clientX !== 'number' || typeof event.clientY !== 'number') return;
-		this._pointerPosition = {
-			x: event.clientX,
-			y: event.clientY
-		};
-	}
-
-	_isHorizontalPointerMove(event) {
-		if (!this._pointerPosition || !event) return false;
-
-		const dx = event.clientX - this._pointerPosition.x;
-		const dy = event.clientY - this._pointerPosition.y;
-
-		return Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 0;
-	}
-
-	_isFirstLevelDropdown(drop) {
-		return !!drop && !drop.closest('.dropdown-content');
-	}
-
-	_hasDirectDropdownContent(drop) {
-		if (!drop || !drop.children) return false;
-		return [...drop.children].some((child) => child.classList && child.classList.contains('dropdown-content'));
-	}
-
-	_isAdjacentDropdown(drop, relatedDrop) {
-		if (!drop || !relatedDrop) return false;
-		if (drop.parentElement !== relatedDrop.parentElement) return false;
-		return drop.previousElementSibling === relatedDrop || drop.nextElementSibling === relatedDrop;
-	}
-
-	_canSmoothSwitchFirstLevel(event, currentDrop, relatedDrop) {
-		const smoothParams = this._params.hoversmoothfirstlevel || {};
-		if (!smoothParams.enable) return false;
-		if (!currentDrop || !relatedDrop || currentDrop === relatedDrop) return false;
-		if (!this._isFirstLevelDropdown(currentDrop) || !this._isFirstLevelDropdown(relatedDrop)) return false;
-		if (!this._hasDirectDropdownContent(currentDrop) || !this._hasDirectDropdownContent(relatedDrop)) return false;
-		if (!this._isAdjacentDropdown(currentDrop, relatedDrop)) return false;
-		if (smoothParams.horizontalOnly && !this._isHorizontalPointerMove(event)) return false;
-
-		return true;
-	}
-
-	static init(element, params = {}) {
-		const instance = VGNav.getOrCreateInstance(element, params);
-		instance.build();
-
-		let drops = Selectors.findAll('.dropdown', instance.navigation);
-
-		if (instance._params.hover && !isMobileDevice()) {
-			EventHandler.on(instance.navigation, `mousemove.${NAME_KEY}.data.api`, function (event) {
-				instance._updatePointerPosition(event);
-			});
-
-			[...drops].forEach(function (el) {
-				let currentElem = null;
-
-				EventHandler.on(el, EVENT_MOUSEOVER_DATA_API, function (event) {
-					if (currentElem) return;
-
-					let target = event.target.closest('.dropdown');
-					if (!target) return;
-
-					if (!instance.navigation.contains(target)) return;
-					currentElem = target;
-
-					const previousDrop = event.relatedTarget?.closest('.dropdown');
-					const useSmoothSwitch = instance._canSmoothSwitchFirstLevel(event, target, previousDrop);
-
-					if (!useSmoothSwitch) {
-						VGNav.hideOpenDrops(event);
-					}
-
-					let relatedTarget = {
-						relatedTarget: target
-					};
-
-					instance.show(relatedTarget);
-
-					if (useSmoothSwitch && previousDrop && previousDrop.classList.contains(CLASS_NAME_ACTIVE)) {
-						instance.hide({ relatedTarget: previousDrop });
-					}
-
-					instance._updatePointerPosition(event);
-				});
-
-				EventHandler.on(el, EVENT_MOUSEOUT_DATA_API, function (event) {
-					if (!currentElem) return;
-
-					let nextDrop = event.relatedTarget?.closest('.dropdown'),
-						relatedTarget = nextDrop,
-						elm = currentElem;
-
-					while (relatedTarget) {
-						if (relatedTarget === currentElem) return;
-						relatedTarget = relatedTarget.parentNode;
-					}
-
-					if (instance._canSmoothSwitchFirstLevel(event, elm, nextDrop)) {
-						currentElem = null;
-						instance._updatePointerPosition(event);
-						return;
-					}
-
-					currentElem = null;
-					instance.hide({ relatedTarget: relatedTarget, elm: elm });
-					instance._updatePointerPosition(event);
-				});
-			});
-		}
+		return vertInView && horInView;
+	}
+
+	_updatePointerPosition(event) {
+		if (!event || typeof event.clientX !== 'number' || typeof event.clientY !== 'number') return;
+		this._pointerPosition = {
+			x: event.clientX,
+			y: event.clientY
+		};
+	}
+
+	_isHorizontalPointerMove(event) {
+		if (!this._pointerPosition || !event) return false;
+
+		const dx = event.clientX - this._pointerPosition.x;
+		const dy = event.clientY - this._pointerPosition.y;
+
+		return Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 0;
+	}
+
+	_isFirstLevelDropdown(drop) {
+		return !!drop && !drop.closest('.dropdown-content');
+	}
+
+	_hasDirectDropdownContent(drop) {
+		if (!drop || !drop.children) return false;
+		return [...drop.children].some((child) => child.classList && child.classList.contains('dropdown-content'));
+	}
+
+	_isAdjacentDropdown(drop, relatedDrop) {
+		if (!drop || !relatedDrop) return false;
+		if (drop.parentElement !== relatedDrop.parentElement) return false;
+		return drop.previousElementSibling === relatedDrop || drop.nextElementSibling === relatedDrop;
+	}
+
+	_canSmoothSwitchFirstLevel(event, currentDrop, relatedDrop) {
+		const smoothParams = this._params.hoversmoothfirstlevel || {};
+		if (!smoothParams.enable) return false;
+		if (!currentDrop || !relatedDrop || currentDrop === relatedDrop) return false;
+		if (!this._isFirstLevelDropdown(currentDrop) || !this._isFirstLevelDropdown(relatedDrop)) return false;
+		if (!this._hasDirectDropdownContent(currentDrop) || !this._hasDirectDropdownContent(relatedDrop)) return false;
+		if (!this._isAdjacentDropdown(currentDrop, relatedDrop)) return false;
+		if (smoothParams.horizontalOnly && !this._isHorizontalPointerMove(event)) return false;
+
+		return true;
+	}
+
+	static init(element, params = {}) {
+		const instance = VGNav.getOrCreateInstance(element, params);
+		instance.build();
+
+		let drops = Selectors.findAll('.dropdown', instance.navigation);
+
+		if (instance._params.hover && !isMobileDevice()) {
+			EventHandler.on(instance.navigation, `mousemove.${NAME_KEY}.data.api`, function (event) {
+				instance._updatePointerPosition(event);
+			});
+
+			[...drops].forEach(function (el) {
+				let currentElem = null;
+
+				EventHandler.on(el, EVENT_MOUSEOVER_DATA_API, function (event) {
+					if (currentElem) return;
+
+					let target = event.target.closest('.dropdown');
+					if (!target) return;
+
+					if (!instance.navigation.contains(target)) return;
+					currentElem = target;
+
+					const previousDrop = event.relatedTarget?.closest('.dropdown');
+					const useSmoothSwitch = instance._canSmoothSwitchFirstLevel(event, target, previousDrop);
+
+					if (!useSmoothSwitch) {
+						VGNav.hideOpenDrops(event);
+					}
+
+					let relatedTarget = {
+						relatedTarget: target
+					};
+
+					instance.show(relatedTarget);
+
+					if (useSmoothSwitch && previousDrop && previousDrop.classList.contains(CLASS_NAME_ACTIVE)) {
+						instance.hide({ relatedTarget: previousDrop });
+					}
+
+					instance._updatePointerPosition(event);
+				});
+
+				EventHandler.on(el, EVENT_MOUSEOUT_DATA_API, function (event) {
+					if (!currentElem) return;
+
+					let nextDrop = event.relatedTarget?.closest('.dropdown'),
+						relatedTarget = nextDrop,
+						elm = currentElem;
+
+					while (relatedTarget) {
+						if (relatedTarget === currentElem) return;
+						relatedTarget = relatedTarget.parentNode;
+					}
+
+					if (instance._canSmoothSwitchFirstLevel(event, elm, nextDrop)) {
+						currentElem = null;
+						instance._updatePointerPosition(event);
+						return;
+					}
+
+					currentElem = null;
+					instance.hide({ relatedTarget: relatedTarget, elm: elm });
+					instance._updatePointerPosition(event);
+				});
+			});
+		}
 
 		const vgNavSidebar = document.querySelector(instance._params.hamburger.target || '#sidebar-nav');
 		let hamburger = instance._element.querySelector('.' + instance._classes.hamburger);

package/app/modules/vgnav/readme.md

@@ -1,67 +1,67 @@
-# VGNav
-
-JS-модуль навигации с поддержкой dropdown-меню, позиционирования и мобильного режима (гамбургер).
-
-## Возможности
-- Автосборка структуры: добавляет контейнерные классы, режим размещения (`horizontal` / др.).
-- Dropdown-меню с анимацией и управлением состоянием (`show`, `fade`, `active`).
-- Hover-режим для десктопа, click-режим для мобильных.
-- Автосоздание кнопки-гамбургера, если она отсутствует в разметке.
-- Автодобавление toggle-индикатора к пунктам `.dropdown > a`.
-- Позиционирование выпадающих меню через компонент `Placement` с автопереворотом.
-- Закрытие открытых dropdown при клике вне или по `Tab` (keyup).
-- Отслеживание скролла/ресайза и пересчет позиции открытых меню.
-- Колбэки `afterInit`, `afterClick` для кастомного поведения.
-- Интеграция с сайдбаром через события `vg.sidebar.show` / `vg.sidebar.hide`.
-
-## Параметры
-Передаются при инициализации `VGNav.init(element, params)`:
-
-```js
-{
-  breakpoint: 'lg',        // точка, на которой включается hamburger/expand
-  placement: 'horizontal', // класс размещения: vg-nav-horizontal и т.п.
-  hover: true,             // открытие dropdown по наведению (desktop)
-  animation: {
-    enable: true,
-    timeout: 700
-  },
-  toggle: '<span class="default"></span>', // HTML-индикатор возле пунктов dropdown
-  hamburger: {
-    enable: true,   // создать кнопку, если ее нет
-    always: false,  // всегда режим hamburger
-    title: '',      // текст перед иконкой
-    body: null,     // HTML-контент иконки
-    target: '#sidebar-nav'
-  },
-  callbacks: {
-    afterInit: noop,
-    afterClick: noop
-  }
-}
-```
-
-## Разметка
-Минимальный каркас:
-
-```html
-<nav class="vg-nav">
-  <div class="vg-nav-wrapper">
-    <ul>
-      <li class="dropdown">
-        <a href="#">Item</a>
-        <div class="dropdown-content">...</div>
-      </li>
-    </ul>
-  </div>
-</nav>
-```
-
-## События
-Триггерит:
-- `vg.nav.show` / `vg.nav.shown`
-- `vg.nav.hide` / `vg.nav.hidden`
-
-## Data API
-Поведение навигации завязано на клики по `.vg-nav a` и на события `mouseover`/`mouseout`
-для `.dropdown` при включенном `hover`.
+# VGNav
+
+JS-модуль навигации с поддержкой dropdown-меню, позиционирования и мобильного режима (гамбургер).
+
+## Возможности
+- Автосборка структуры: добавляет контейнерные классы, режим размещения (`horizontal` / др.).
+- Dropdown-меню с анимацией и управлением состоянием (`show`, `fade`, `active`).
+- Hover-режим для десктопа, click-режим для мобильных.
+- Автосоздание кнопки-гамбургера, если она отсутствует в разметке.
+- Автодобавление toggle-индикатора к пунктам `.dropdown > a`.
+- Позиционирование выпадающих меню через компонент `Placement` с автопереворотом.
+- Закрытие открытых dropdown при клике вне или по `Tab` (keyup).
+- Отслеживание скролла/ресайза и пересчет позиции открытых меню.
+- Колбэки `afterInit`, `afterClick` для кастомного поведения.
+- Интеграция с сайдбаром через события `vg.sidebar.show` / `vg.sidebar.hide`.
+
+## Параметры
+Передаются при инициализации `VGNav.init(element, params)`:
+
+```js
+{
+  breakpoint: 'lg',        // точка, на которой включается hamburger/expand
+  placement: 'horizontal', // класс размещения: vg-nav-horizontal и т.п.
+  hover: true,             // открытие dropdown по наведению (desktop)
+  animation: {
+    enable: true,
+    timeout: 700
+  },
+  toggle: '<span class="default"></span>', // HTML-индикатор возле пунктов dropdown
+  hamburger: {
+    enable: true,   // создать кнопку, если ее нет
+    always: false,  // всегда режим hamburger
+    title: '',      // текст перед иконкой
+    body: null,     // HTML-контент иконки
+    target: '#sidebar-nav'
+  },
+  callbacks: {
+    afterInit: noop,
+    afterClick: noop
+  }
+}
+```
+
+## Разметка
+Минимальный каркас:
+
+```html
+<nav class="vg-nav">
+  <div class="vg-nav-wrapper">
+    <ul>
+      <li class="dropdown">
+        <a href="#">Item</a>
+        <div class="dropdown-content">...</div>
+      </li>
+    </ul>
+  </div>
+</nav>
+```
+
+## События
+Триггерит:
+- `vg.nav.show` / `vg.nav.shown`
+- `vg.nav.hide` / `vg.nav.hidden`
+
+## Data API
+Поведение навигации завязано на клики по `.vg-nav a` и на события `mouseover`/`mouseout`
+для `.dropdown` при включенном `hover`.