vgapp 1.5.7 → 1.5.9

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

@@ -1,12 +1,13 @@
-/**
- * Описание: адаптивная навигация VGNav с выпадающими пунктами и гамбургером.
- * Возможности: click/hover, вложенные меню, позиционирование, события и интеграция с VGSidebar.
- */
-import BaseModule from "../../base-module";
+/**
+ * Описание: адаптивная навигация VGNav с выпадающими пунктами и гамбургером.
+ * Возможности: click/hover, вложенные меню, позиционирование, события и интеграция с VGSidebar.
+ */
+import BaseModule from "../../base-module";
 import Selectors from "../../../utils/js/dom/selectors";
 import {
-	execute,
-	isDisabled,
+	execute,
+	getTransitionDurationFromElement,
+	isDisabled,
 	isMobileDevice,
 	isVisible,
 	mergeDeepObject,
@@ -33,7 +34,7 @@ const CLASS_NAME_ACTIVE    = 'active';
 /**
  * Constants toggle
  */
-const SELECTOR_DATA_TOGGLE = '.' + CLASS_NAME + ' .dropdown > a';
+const SELECTOR_DATA_TOGGLE = '.' + CLASS_NAME + ' .dropdown > a';
 
 /**
  * Constants Events
@@ -127,8 +128,9 @@ class VGNav extends BaseModule {
 			this._params.animation.timeout = 10;
 		}
 
-		this._openDrops = new Map();
-		this._pointerPosition = null;
+		this._openDrops = new Map();
+		this._pointerPosition = null;
+		this._smoothSwitch = null;
 		this._handleScroll = this._handleScroll.bind(this);
 		this._handleResize = this._handleResize.bind(this);
 	}
@@ -219,43 +221,43 @@ class VGNav extends BaseModule {
 		}
 	}
 
-	show(relatedTarget) {
-		let target = relatedTarget.relatedTarget;
-
-		if (!target || isDisabled(target)) return;
-		const drop = Selectors.find(':scope > .dropdown-content', target);
-		if (!drop) return;
-
-		const showEvent = EventHandler.trigger(target, EVENT_KEY_SHOW, { relatedTarget });
-		if (showEvent.defaultPrevented) return;
-
-		if (!target.closest('.dropdown-content')) {
-			target.classList.add('first');
-		}
-
-		const link = target.firstElementChild;
+	show(relatedTarget) {
+		let target = relatedTarget.relatedTarget;
+
+		if (!target || isDisabled(target)) return;
+		const drop = Selectors.find(':scope > .dropdown-content', target);
+		if (!drop) return;
+
+		const showEvent = EventHandler.trigger(target, EVENT_KEY_SHOW, { relatedTarget });
+		if (showEvent.defaultPrevented) return;
+
+		if (!target.closest('.dropdown-content')) {
+			target.classList.add('first');
+		}
+
+		const link = target.firstElementChild;
 
 		if (link) link.setAttribute('aria-expanded', 'true');
-		drop.classList.add(CLASS_NAME_SHOW);
-		target.classList.add(CLASS_NAME_ACTIVE);
-		// Координаты Placement имеют приоритет над старой CSS-схемой top/bottom/right.
-		drop.style.bottom = 'auto';
-		drop.style.right = 'auto';
-		const openToSide = !!target.closest('.dropdown-content') || this._params.placement === 'vertical';
-
-		const $placement = new Placement({
-			reference: target,
-			drop: drop,
-			placement: openToSide ? 'right-start' : 'bottom-start',
-			fallbackPlacements: openToSide
-				? ['left-start', 'right-end', 'left-end', 'bottom-start', 'top-start']
-				: ['top-start', 'bottom-end', 'top-end'],
-			offset: openToSide ? [6, 0] : [0, 6],
-			boundary: 'clippingParents',
-			autoFlip: true,
-			overflowProtection: true,
-			clamp: true,
-			isMerge: false
+		drop.classList.add(CLASS_NAME_SHOW);
+		target.classList.add(CLASS_NAME_ACTIVE);
+		// Координаты Placement имеют приоритет над старой CSS-схемой top/bottom/right.
+		drop.style.bottom = 'auto';
+		drop.style.right = 'auto';
+		const openToSide = !!target.closest('.dropdown-content') || this._params.placement === 'vertical';
+
+		const $placement = new Placement({
+			reference: target,
+			drop: drop,
+			placement: openToSide ? 'right-start' : 'bottom-start',
+			fallbackPlacements: openToSide
+				? ['left-start', 'right-end', 'left-end', 'bottom-start', 'top-start']
+				: ['top-start', 'bottom-end', 'top-end'],
+			offset: openToSide ? [6, 0] : [0, 6],
+			boundary: 'clippingParents',
+			autoFlip: true,
+			overflowProtection: true,
+			clamp: true,
+			isMerge: false
 		});
 
 		$placement._setPlacement();
@@ -277,8 +279,8 @@ class VGNav extends BaseModule {
 		this._queueCallback(completeCallBack, drop, true, 10);
 	}
 
-	hide(relatedTarget) {
-		const _this = this;
+	hide(relatedTarget) {
+		const _this = this;
 
 		let element = relatedTarget.relatedTarget;
 
@@ -296,7 +298,7 @@ class VGNav extends BaseModule {
 				element.classList.remove('first');
 			}
 
-			[...Selectors.findAll('.dropdown-content.' + CLASS_NAME_SHOW, element)].forEach(function (el) {
+			[...Selectors.findAll('.dropdown-content.' + CLASS_NAME_SHOW, element)].forEach(function (el) {
 				el.classList.remove(CLASS_NAME_FADE);
 
 				let parent = el.closest('.dropdown');
@@ -307,14 +309,14 @@ class VGNav extends BaseModule {
 				let link = el.previousElementSibling;
 				if (link) link.setAttribute('aria-expanded', 'false');
 
-				const completeCallback = () => {
-					if (parent.classList.contains(CLASS_NAME_ACTIVE)) return;
-					el.classList.remove(CLASS_NAME_SHOW);
-					EventHandler.trigger(el, EVENT_KEY_HIDDEN, relatedTarget);
-				};
-
-				_this._queueCallback(completeCallback, el, true, 500);
-				_this._cleanupDrop(el);
+				const completeCallback = () => {
+					if (parent.classList.contains(CLASS_NAME_ACTIVE)) return;
+					el.classList.remove(CLASS_NAME_SHOW);
+					EventHandler.trigger(el, EVENT_KEY_HIDDEN, relatedTarget);
+				};
+
+				_this._queueCallback(completeCallback, el, true, 500);
+				_this._cleanupDrop(el);
 			});
 		}
 	}
@@ -342,16 +344,16 @@ class VGNav extends BaseModule {
 		}
 	}
 
-	_cleanupDrop(drop) {
-		const dropData = this._openDrops.get(drop);
-		if (dropData) {
-			this._openDrops.delete(drop);
-			// Обработчики общие для экземпляра: другие открытые уровни ещё нуждаются в них.
-			if (!this._openDrops.size) {
-				window.removeEventListener('scroll', dropData.scrollHandler, { capture: true });
-				window.removeEventListener('resize', dropData.resizeHandler);
-			}
-		}
+	_cleanupDrop(drop) {
+		const dropData = this._openDrops.get(drop);
+		if (dropData) {
+			this._openDrops.delete(drop);
+			// Обработчики общие для экземпляра: другие открытые уровни ещё нуждаются в них.
+			if (!this._openDrops.size) {
+				window.removeEventListener('scroll', dropData.scrollHandler, { capture: true });
+				window.removeEventListener('resize', dropData.resizeHandler);
+			}
+		}
 	}
 
 	_isElementInViewport(el) {
@@ -397,7 +399,7 @@ class VGNav extends BaseModule {
 		return drop.previousElementSibling === relatedDrop || drop.nextElementSibling === relatedDrop;
 	}
 
-	_canSmoothSwitchFirstLevel(event, currentDrop, relatedDrop) {
+	_canSmoothSwitchFirstLevel(event, currentDrop, relatedDrop) {
 		const smoothParams = this._params.hoversmoothfirstlevel || {};
 		if (!smoothParams.enable) return false;
 		if (!currentDrop || !relatedDrop || currentDrop === relatedDrop) return false;
@@ -406,8 +408,52 @@ class VGNav extends BaseModule {
 		if (!this._isAdjacentDropdown(currentDrop, relatedDrop)) return false;
 		if (smoothParams.horizontalOnly && !this._isHorizontalPointerMove(event)) return false;
 
-		return true;
-	}
+		return true;
+	}
+
+	_scheduleSmoothSwitchCompletion(dropContent, callback) {
+		const duration = getTransitionDurationFromElement(dropContent);
+		if (!duration) {
+			callback();
+			return;
+		}
+
+		window.setTimeout(callback, duration);
+	}
+
+	_startSmoothSwitch(currentDrop, previousDrop, dropContent) {
+		const staleSwitch = this._smoothSwitch;
+		const transfer = { currentDrop, previousDrop };
+		this._smoothSwitch = transfer;
+
+		if (
+			staleSwitch?.previousDrop
+			&& staleSwitch.previousDrop !== currentDrop
+			&& staleSwitch.previousDrop !== previousDrop
+			&& staleSwitch.previousDrop.classList.contains(CLASS_NAME_ACTIVE)
+		) {
+			this.hide({ relatedTarget: staleSwitch.previousDrop });
+		}
+
+		this._scheduleSmoothSwitchCompletion(dropContent, () => {
+			if (this._smoothSwitch !== transfer) return;
+			this._smoothSwitch = null;
+			if (!currentDrop.isConnected || !previousDrop.isConnected) return;
+			if (!currentDrop.classList.contains(CLASS_NAME_ACTIVE)) return;
+			if (previousDrop.classList.contains(CLASS_NAME_ACTIVE)) {
+				this.hide({ relatedTarget: previousDrop });
+			}
+		});
+	}
+
+	_cancelSmoothSwitch(exceptDrop = null) {
+		const transfer = this._smoothSwitch;
+		this._smoothSwitch = null;
+		if (!transfer?.previousDrop || transfer.previousDrop === exceptDrop) return;
+		if (transfer.previousDrop.classList.contains(CLASS_NAME_ACTIVE)) {
+			this.hide({ relatedTarget: transfer.previousDrop });
+		}
+	}
 
 	static init(element, params = {}) {
 		const instance = VGNav.getOrCreateInstance(element, params);
@@ -435,19 +481,24 @@ class VGNav extends BaseModule {
 					const previousDrop = event.relatedTarget?.closest('.dropdown');
 					const useSmoothSwitch = instance._canSmoothSwitchFirstLevel(event, target, previousDrop);
 
-					if (!useSmoothSwitch) {
-						VGNav.hideOpenDrops(event);
+					if (!useSmoothSwitch) {
+						instance._cancelSmoothSwitch(target);
+						VGNav.hideOpenDrops(event);
 					}
 
 					let relatedTarget = {
 						relatedTarget: target
 					};
 
-					instance.show(relatedTarget);
-
-					if (useSmoothSwitch && previousDrop && previousDrop.classList.contains(CLASS_NAME_ACTIVE)) {
-						instance.hide({ relatedTarget: previousDrop });
-					}
+					instance.show(relatedTarget);
+
+					if (useSmoothSwitch && previousDrop && previousDrop.classList.contains(CLASS_NAME_ACTIVE)) {
+						const nextDropContent = Selectors.find(':scope > .dropdown-content', target);
+						if (nextDropContent) {
+							nextDropContent.classList.add(CLASS_NAME_FADE);
+							instance._startSmoothSwitch(target, previousDrop, nextDropContent);
+						}
+					}
 
 					instance._updatePointerPosition(event);
 				});
@@ -464,14 +515,16 @@ class VGNav extends BaseModule {
 						relatedTarget = relatedTarget.parentNode;
 					}
 
-					if (instance._canSmoothSwitchFirstLevel(event, elm, nextDrop)) {
-						currentElem = null;
-						instance._updatePointerPosition(event);
-						return;
-					}
-
-					currentElem = null;
-					instance.hide({ relatedTarget: relatedTarget, elm: elm });
+					if (instance._canSmoothSwitchFirstLevel(event, elm, nextDrop)) {
+						currentElem = null;
+						// Сохраняем предыдущую точку до mouseover соседнего пункта:
+						// она нужна повторной проверке направления и передаче открытого состояния.
+						return;
+					}
+
+					currentElem = null;
+					instance._cancelSmoothSwitch(elm);
+					instance.hide({ relatedTarget: relatedTarget, elm: elm });
 					instance._updatePointerPosition(event);
 				});
 			});

package/app/modules/vgnav/scss/_breakpoints.scss

@@ -1,8 +1,8 @@
-@use "sass:list";
-@use "sass:map";
-@use "variables" as vars;
-
-// Breakpoint viewport sizes and media queries.
+@use "sass:list";
+@use "sass:map";
+@use "variables" as vars;
+
+// Breakpoint viewport sizes and media queries.
 //
 // Breakpoints are defined as a map of (name: minimum width), order from small to large:
 //
@@ -18,27 +18,27 @@
 //    md
 //    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl))
 //    md
-@function breakpoint-next($name, $breakpoints: vars.$grid-breakpoints, $breakpoint-names: map.keys($breakpoints)) {
-	$n: list.index($breakpoint-names, $name);
-	@if not $n {
-		@error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
-	}
-	@if $n < list.length($breakpoint-names) {
-		@return list.nth($breakpoint-names, $n + 1);
-	}
-	@return null;
+@function breakpoint-next($name, $breakpoints: vars.$grid-breakpoints, $breakpoint-names: map.keys($breakpoints)) {
+	$n: list.index($breakpoint-names, $name);
+	@if not $n {
+		@error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
+	}
+	@if $n < list.length($breakpoint-names) {
+		@return list.nth($breakpoint-names, $n + 1);
+	}
+	@return null;
 }
 
 // Minimum breakpoint width. Null for the smallest (first) breakpoint.
 //
 //    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
 //    576px
-@function breakpoint-min($name, $breakpoints: vars.$grid-breakpoints) {
-	$min: map.get($breakpoints, $name);
-	@if $min != 0 {
-		@return $min;
-	}
-	@return null;
+@function breakpoint-min($name, $breakpoints: vars.$grid-breakpoints) {
+	$min: map.get($breakpoints, $name);
+	@if $min != 0 {
+		@return $min;
+	}
+	@return null;
 }
 
 // Maximum breakpoint width.
@@ -50,12 +50,12 @@
 //
 //    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
 //    767.98px
-@function breakpoint-max($name, $breakpoints: vars.$grid-breakpoints) {
-	$max: map.get($breakpoints, $name);
-	@if $max and $max > 0 {
-		@return $max - .02;
-	}
-	@return null;
+@function breakpoint-max($name, $breakpoints: vars.$grid-breakpoints) {
+	$max: map.get($breakpoints, $name);
+	@if $max and $max > 0 {
+		@return $max - .02;
+	}
+	@return null;
 }
 
 // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
@@ -65,16 +65,16 @@
 //    ""  (Returns a blank string)
 //    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
 //    "-sm"
-@function breakpoint-infix($name, $breakpoints: vars.$grid-breakpoints) {
-	@if breakpoint-min($name, $breakpoints) == null {
-		@return "";
-	}
-	@return "-#{$name}";
+@function breakpoint-infix($name, $breakpoints: vars.$grid-breakpoints) {
+	@if breakpoint-min($name, $breakpoints) == null {
+		@return "";
+	}
+	@return "-#{$name}";
 }
 
 // Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
 // Makes the @content apply to the given breakpoint and wider.
-@mixin media-breakpoint-up($name, $breakpoints: vars.$grid-breakpoints) {
+@mixin media-breakpoint-up($name, $breakpoints: vars.$grid-breakpoints) {
 	$min: breakpoint-min($name, $breakpoints);
 	@if $min {
 		@media (min-width: $min) {
@@ -87,7 +87,7 @@
 
 // Media of at most the maximum breakpoint width. No query for the largest breakpoint.
 // Makes the @content apply to the given breakpoint and narrower.
-@mixin media-breakpoint-down($name, $breakpoints: vars.$grid-breakpoints) {
+@mixin media-breakpoint-down($name, $breakpoints: vars.$grid-breakpoints) {
 	$max: breakpoint-max($name, $breakpoints);
 	@if $max {
 		@media (max-width: $max) {
@@ -100,7 +100,7 @@
 
 // Media that spans multiple breakpoint widths.
 // Makes the @content apply between the min and max breakpoints
-@mixin media-breakpoint-between($lower, $upper, $breakpoints: vars.$grid-breakpoints) {
+@mixin media-breakpoint-between($lower, $upper, $breakpoints: vars.$grid-breakpoints) {
 	$min: breakpoint-min($lower, $breakpoints);
 	$max: breakpoint-max($upper, $breakpoints);
 
@@ -122,7 +122,7 @@
 // Media between the breakpoint's minimum and maximum widths.
 // No minimum for the smallest breakpoint, and no maximum for the largest one.
 // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
-@mixin media-breakpoint-only($name, $breakpoints: vars.$grid-breakpoints) {
+@mixin media-breakpoint-only($name, $breakpoints: vars.$grid-breakpoints) {
 	$min: breakpoint-min($name, $breakpoints);
 	$next: breakpoint-next($name, $breakpoints);
 	$max: breakpoint-max($next, $breakpoints);
@@ -140,4 +140,4 @@
 			@content;
 		}
 	}
-}
+}

package/app/modules/vgnav/scss/_hamburger.scss

@@ -1,5 +1,5 @@
-@mixin hamburger() {
-.vg-nav-hamburger {
+@mixin hamburger() {
+.vg-nav-hamburger {
 	display: none;
 	align-items: flex-start;
 
@@ -60,6 +60,6 @@
 			}
 		}
 	}
-}
-
-}
+}
+
+}

package/app/modules/vgnav/scss/_placement.scss

@@ -1,5 +1,5 @@
-@mixin placement() {
-&.vg-nav-horizontal {
+@mixin placement() {
+&.vg-nav-horizontal {
 	.vg-nav-wrapper {
 		flex-direction: row;
 	}
@@ -23,6 +23,6 @@
 			}
 		}
 	}
-}
-
-}
+}
+
+}

package/app/modules/vgnav/scss/_toggle.scss

@@ -1,5 +1,5 @@
-@mixin toggle() {
-.toggle {
+@mixin toggle() {
+.toggle {
 	transition: var(--vg-nav-transition);
 	transform: rotate(0);
 
@@ -18,6 +18,6 @@
 			vertical-align: .255em;
 		}
 	}
-}
-
-}
+}
+
+}

package/app/modules/vgnav/scss/_variables.scss

@@ -1,9 +1,9 @@
-@use "sass:map";
-@use "../../../utils/scss" as vg;
-
-$nav-map: (
-		transition: all .2s ease-in-out,
-) !default;
+@use "sass:map";
+@use "../../../utils/scss" as vg;
+
+$nav-map: (
+		transition: all .2s ease-in-out,
+) !default;
 
 $nav-item-map: (
 		margin: 0,
@@ -11,39 +11,39 @@ $nav-item-map: (
 		font-size: 1rem,
 		font-weight: 400,
 		line-height: 1.4,
-		color: var(--vg-text-color, #212529),
+		color: var(--vg-text-color, #212529),
 		decoration: none,
 		display: inline-block,
 		border: none,
 		border-radius: 0,
 		white-space: nowrap,
-		position: relative,
-) !default;
+		position: relative,
+) !default;
 
 $nav-drop-map: (
 		z-index: 10,
-		transition: map.get($nav-map, transition),
+		transition: map.get($nav-map, transition),
 		width: 200px,
 		max-height: 650px,
-		border-color: var(--vg-border-color, #{vg.$border-color}),
+		border-color: var(--vg-border-color, #{vg.$border-color}),
 		border-radius: 0,
 		padding: 0,
-		bg: var(--vg-surface-bg, #{vg.$surface-bg}),
+		bg: var(--vg-surface-bg, #{vg.$surface-bg}),
 		overflow-y: auto,
-		overflow-x: visible,
-) !default;
+		overflow-x: visible,
+) !default;
 
 $nav-drop-mega-map: (
 		width: 100%,
 		min-height: 300px,
-		bg: var(--vg-surface-bg, #{vg.$surface-bg}),
-		border-color: var(--vg-border-color, #{vg.$border-color}),
+		bg: var(--vg-surface-bg, #{vg.$surface-bg}),
+		border-color: var(--vg-border-color, #{vg.$border-color}),
 		border-radius: 0,
 		padding: 1rem,
 		z-index: 10,
-		transition: map.get($nav-map, transition),
-		max-height: 600px,
-) !default;
+		transition: map.get($nav-map, transition),
+		max-height: 600px,
+) !default;
 
 $nav-drop-item-map: (
 		padding: .75rem 1rem,
@@ -53,16 +53,16 @@ $nav-drop-item-map: (
 		bg-hover: transparent,
 		color: inherit,
 		color-hover: inherit,
-		transition: map.get($nav-map, transition),
-) !default;
+		transition: map.get($nav-map, transition),
+) !default;
 
 $hamburger-map: (
 		height: 27px,
 		line-width: 35px,
-		line-color: var(--vg-text-emphasis-color, #333333),
+		line-color: var(--vg-text-emphasis-color, #333333),
 		line-height: 3px,
-		line-indent-top: 7px
-) !default;
+		line-indent-top: 7px
+) !default;
 
 $grid-breakpoints: (
 		xs: 576px,
@@ -71,5 +71,5 @@ $grid-breakpoints: (
 		lg: 1200px,
 		xl: 1400px,
 		xxl: 1600px,
-		xxxl: 1800px
-) !default;
+		xxxl: 1800px
+) !default;