vgapp 1.4.4 → 1.4.6

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

@@ -48,61 +48,61 @@ class VGNav extends BaseModule {
 	constructor(element, params = {}) {
 		super(element);
 
-		this._params = this._getParams(element, mergeDeepObject({
-			// Брейкпоинт, с которого навигация отображается в расширенном виде.
-			breakpoint: 'lg',
-			// Направление меню: влияет на классы и поведение позиционирования.
-			placement: 'horizontal',
-			// Включает открытие выпадающих пунктов при наведении на десктопе.
-			hover: true,
-			// Включает ограничение высоты и overflow для списка внутри выпадающего меню.
-			dropListScroll: true,
-			// Настройки плавного переключения между соседними пунктами первого уровня.
-			hoversmoothfirstlevel: {
-				// Включает режим плавного перехода без мгновенного закрытия соседнего дропа.
-				enable: false,
-				// Ограничивает плавное переключение только горизонтальным движением курсора.
-				horizontalOnly: true
-			},
-			// Настройки анимации открытия и закрытия выпадающих пунктов.
-			animation: {
-				// Включает анимацию переходов.
-				enable: true,
-				// Длительность ожидания завершения анимации перед финальным состоянием.
-				timeout: 700
-			},
-			// HTML-разметка иконки-указателя для пунктов с выпадающим меню.
-			toggle: '<span class="default"></span>',
-			// Настройки кнопки-гамбургера для мобильной/адаптивной навигации.
-			hamburger: {
-				// Разрешает создавать и использовать кнопку-гамбургер.
-				enable: true,
-				// Принудительно показывает гамбургер всегда, независимо от брейкпоинта.
-				always: false,
-				// Текстовый заголовок рядом с иконкой гамбургера.
-				title: '',
-				// Пользовательская HTML-разметка тела гамбургера вместо стандартных линий.
-				body: null,
-				// CSS-селектор сайдбара, который открывает кнопка-гамбургер.
-				target: '#sidebar-nav'
-			},
-			// Пользовательские обработчики жизненного цикла навигации.
-			callbacks: {
-				// Вызывается после построения навигации.
-				afterInit: noop,
-				// Вызывается после клика по пункту навигации.
-				afterClick: noop,
-			}
-		}, params));
+		this._params = this._getParams(element, mergeDeepObject({
+			// Брейкпоинт, с которого навигация отображается в расширенном виде.
+			breakpoint: 'lg',
+			// Направление меню: влияет на классы и поведение позиционирования.
+			placement: 'horizontal',
+			// Включает открытие выпадающих пунктов при наведении на десктопе.
+			hover: true,
+			// Включает ограничение высоты и overflow для списка внутри выпадающего меню.
+			dropListScroll: true,
+			// Настройки плавного переключения между соседними пунктами первого уровня.
+			hoversmoothfirstlevel: {
+				// Включает режим плавного перехода без мгновенного закрытия соседнего дропа.
+				enable: false,
+				// Ограничивает плавное переключение только горизонтальным движением курсора.
+				horizontalOnly: true
+			},
+			// Настройки анимации открытия и закрытия выпадающих пунктов.
+			animation: {
+				// Включает анимацию переходов.
+				enable: true,
+				// Длительность ожидания завершения анимации перед финальным состоянием.
+				timeout: 700
+			},
+			// HTML-разметка иконки-указателя для пунктов с выпадающим меню.
+			toggle: '<span class="default"></span>',
+			// Настройки кнопки-гамбургера для мобильной/адаптивной навигации.
+			hamburger: {
+				// Разрешает создавать и использовать кнопку-гамбургер.
+				enable: true,
+				// Принудительно показывает гамбургер всегда, независимо от брейкпоинта.
+				always: false,
+				// Текстовый заголовок рядом с иконкой гамбургера.
+				title: '',
+				// Пользовательская HTML-разметка тела гамбургера вместо стандартных линий.
+				body: null,
+				// CSS-селектор сайдбара, который открывает кнопка-гамбургер.
+				target: '#sidebar-nav'
+			},
+			// Пользовательские обработчики жизненного цикла навигации.
+			callbacks: {
+				// Вызывается после построения навигации.
+				afterInit: noop,
+				// Вызывается после клика по пункту навигации.
+				afterClick: noop,
+			}
+		}, params));
 
 		this._classes = {
 			hamburgerActive: 'vg-nav-hamburger-active',
 			hamburgerAlways: 'vg-nav-hamburger-always',
-			hamburger: 'vg-nav-hamburger',
-			container: 'vg-nav-container',
-			wrapper: 'vg-nav-wrapper',
-			dropListScroll: 'vg-nav-drop-list-scroll',
-			active: 'vg-nav-active',
+			hamburger: 'vg-nav-hamburger',
+			container: 'vg-nav-container',
+			wrapper: 'vg-nav-wrapper',
+			dropListScroll: 'vg-nav-drop-list-scroll',
+			active: 'vg-nav-active',
 			expand: 'vg-nav-expand',
 			cloned: 'vg-nav-cloned',
 			hover: 'vg-nav-hover',
@@ -123,11 +123,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;
@@ -153,12 +153,12 @@ class VGNav extends BaseModule {
 		let params = this._params,
 			classes = this._classes;
 
-		// Вешаем основные классы
-		this._element.classList.add(classes.container);
-		this._element.classList.add('vg-nav-' + params.placement);
-		this._element.classList.toggle(classes.dropListScroll, !!params.dropListScroll);
-
-		if (!params.hamburger.always) {
+		// Вешаем основные классы
+		this._element.classList.add(classes.container);
+		this._element.classList.add('vg-nav-' + params.placement);
+		this._element.classList.toggle(classes.dropListScroll, !!params.dropListScroll);
+
+		if (!params.hamburger.always) {
 			if (!params.breakpoint) {
 				this._element.classList.add(classes.expand);
 			} else if (params.breakpoint !== false) {
@@ -350,128 +350,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/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;
 		}
 	}
-}
-
-}
+}
+
+}