vgapp 0.5.9 → 0.6.0

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

@@ -1,10 +1,10 @@
 import BaseModule from "../../base-module";
 import Selectors from "../../../utils/js/dom/selectors";
-import Responsive from "../../../utils/js/components/responsive";
 import {getSVG} from "../../module-fn";
 import {execute, isDisabled, isVisible, mergeDeepObject, noop, normalizeData} from "../../../utils/js/functions";
 import EventHandler from "../../../utils/js/dom/event";
 import {Manipulator} from "../../../utils/js/dom/manipulator";
+import Placement from "../../../utils/js/components/placement";
 
 /**
  * Constants
@@ -15,10 +15,15 @@ const NAME_KEY = 'vg.nav';
 /**
  * Constants Classes
  */
-const CLASS_NAME_SHOW   = 'show';
-const CLASS_NAME_FADE   = 'fade';
-const CLASS_NAME_ACTIVE = 'active';
-const SELECTOR_DATA_TOGGLE = '.vg-nav a';
+const CLASS_NAME           = 'vg-nav';
+const CLASS_NAME_SHOW      = 'show';
+const CLASS_NAME_FADE      = 'fade';
+const CLASS_NAME_ACTIVE    = 'active';
+
+/**
+ * Constants toggle
+ */
+const SELECTOR_DATA_TOGGLE = '.'+ CLASS_NAME +' a';
 
 /**
  * Constants Events
@@ -32,38 +37,19 @@ const EVENT_MOUSEOVER_DATA_API = `mouseover.${NAME_KEY}.data.api`;
 const EVENT_MOUSEOUT_DATA_API  = `mouseout.${NAME_KEY}.data.api`;
 const EVENT_CLICK_DATA_API = `click.${NAME_KEY}.data.api`;
 const EVENT_KEYUP_DATA_API = `keyup.${NAME_KEY}.data.api`;
-const EVENT_RESIZE_DATA_API = `resize.${NAME_KEY}.data.api`;
 
 class VGNav extends BaseModule {
 	constructor(element, params = {}) {
 		super(element);
 
 		this._params = this._getParams(element, mergeDeepObject({
-			breakpoint: false,
+			breakpoint: 'lg',
 			placement: 'horizontal',
-			classes: {
-				hamburgerActive: 'vg-nav-hamburger-active',
-				hamburgerAlways: 'vg-nav-hamburger-always',
-				hamburger: 'vg-nav-hamburger',
-				container: 'vg-nav-container',
-				wrapper: 'vg-nav-wrapper',
-				active: 'vg-nav-active',
-				expand: 'vg-nav-expand',
-				cloned: 'vg-nav-cloned',
-				hover: 'vg-nav-hover',
-				flip: 'vg-nav-flip',
-				XXXL: 'vg-nav-xxxl',
-				XXL: 'vg-nav-xxl',
-				XL: 'vg-nav-xl',
-				LG: 'vg-nav-lg',
-				MD: 'vg-nav-md',
-				SM: 'vg-nav-sm',
-				XS: 'vg-nav-xs'
+			hover: true,
+			animation: {
+				enable: true,
+				timeout: 700
 			},
-			expand: true,
-			hover: false,
-			position: true,
-			collapse: true,
 			toggle: '<span class="default"></span>',
 			hamburger: {
 				enable: true,
@@ -71,27 +57,37 @@ class VGNav extends BaseModule {
 				title: '',
 				body: null
 			},
-			callback: noop,
-			animation: true,
-			timeoutAnimation: 300,
-			ajax: {
-				route: '',
-				target: '',
-				method: 'get',
-				loader: false,
-				once: false,
-				output: true,
+			callbacks: {
+				afterInit: noop,
+				afterClick: noop,
 			}
 		}, params));
 
-		this._navigation = null;
-		this.navigation = '.' + this._params.classes.wrapper;
+		this._classes = {
+			hamburgerActive: 'vg-nav-hamburger-active',
+			hamburgerAlways: 'vg-nav-hamburger-always',
+			hamburger: 'vg-nav-hamburger',
+			container: 'vg-nav-container',
+			wrapper: 'vg-nav-wrapper',
+			active: 'vg-nav-active',
+			expand: 'vg-nav-expand',
+			cloned: 'vg-nav-cloned',
+			hover: 'vg-nav-hover',
+			flip: 'vg-nav-flip',
+			XXXL: 'vg-nav-xxxl',
+			XXL: 'vg-nav-xxl',
+			XL: 'vg-nav-xl',
+			LG: 'vg-nav-lg',
+			MD: 'vg-nav-md',
+			SM: 'vg-nav-sm',
+			XS: 'vg-nav-xs'
+		};
 
-		this.movedLinks = [];
-		this.$links = Selectors.findAll('.' + this._params.classes.wrapper + ' > li', this.navigation)
+		this._navigation = null;
+		this.navigation = '.' + this._classes.wrapper;
 
-		if (this._params.animation === false) {
-			this._params.timeoutAnimation = 10
+		if (this._params.animation.enable === false) {
+			this._params.animation.timeout = 10
 		}
 	}
 
@@ -116,59 +112,52 @@ class VGNav extends BaseModule {
 	build() {
 		if (!this.navigation) return;
 
-		let params = this._params;
+		let params = this._params,
+			classes = this._classes;
 
 		// Вешаем основные классы
-		this._element.classList.add(params.classes.container);
+		this._element.classList.add(classes.container);
 		this._element.classList.add('vg-nav-' + params.placement);
 
-		// Если нужно оставить список меню или установить медиа точку
-		if (!params.breakpoint) {
-			params.expand = false;
-		}
-
 		if (!params.hamburger.always) {
-			if (!params.breakpoint || !params.expand) {
-				this._element.classList.add(params.classes.expand);
+			if (!params.breakpoint) {
+				this._element.classList.add(classes.expand);
 			} else if (params.breakpoint !== false) {
 				this._element.classList.add('vg-nav-' + params.breakpoint);
 			}
 		} else {
-			this._element.classList.add(params.classes.hamburgerAlways);
-		}
-
-		// Меню срабатывает при наведении, если это не мобильное устройство
-		if (params.hover) {
-			this._element.classList.add(params.classes.hover);
-
-			if (Responsive.checkMobileOrTablet()) {
-				this._element.classList.remove(params.classes.hover);
-			}
+			this._element.classList.add(classes.hamburgerAlways);
 		}
 
 		// Устанавливаем гамбургер, если его нет в разметке
-		if (params.expand && !params.hamburger.body && params.hamburger.enable) {
-			let isHamburger = Selectors.find('.' + params.classes.hamburger, this._element);
+		if (params.hamburger.enable) {
+			let isHamburger = !!Selectors.find('.' + classes.hamburger, this._element);
 
-			if (isHamburger === null) {
-				let mTitle = '',
-					hamburger = '<span class="' + params.classes.hamburger + '--lines"><span></span><span></span><span></span></span>';
+			if (!isHamburger) {
+				let mobileNavTitle = '',
+					hamburger = '<span class="' + classes.hamburger + '--lines"><span></span><span></span><span></span></span>';
 
 				if (params.hamburger.title) {
-					mTitle = '<span class="' + params.classes.hamburger + '--title">'+ params.hamburger.title +'</span>';
+					mobileNavTitle = '<span class="' + classes.hamburger + '--title">'+ params.hamburger.title +'</span>';
 				}
 
 				if (params.hamburger.body !== null) {
 					hamburger = params.hamburger.body;
 				}
 
-				this._element.insertAdjacentHTML('afterbegin','<a href="#sidebar-nav" class="' + params.classes.hamburger + '" data-vg-toggle="sidebar">' + mTitle + hamburger +'</a>');
+				let a = document.createElement('a');
+				a.classList.add(classes.hamburger);
+				Manipulator.set(a, 'data-vg-toggle', 'sidebar');
+				Manipulator.set(a, 'href', '#sidebar-nav');
+				a.innerHTML = mobileNavTitle + hamburger;
+
+				this._element.append(a);
 			}
 		}
 
-		// Устанавливаем указатель переключателя
+		// Устанавливаем указатель дропа
 		if (params.toggle) {
-			let $dropdown_a = [...Selectors.findAll('.dropdown-mega > a, .dropdown > a', this._element)],
+			let $dropdown_a = [...Selectors.findAll('.dropdown > a', this._element)],
 				toggle = '<span class="toggle">' + params.toggle + '</span>';
 
 			if ($dropdown_a.length) {
@@ -181,97 +170,15 @@ class VGNav extends BaseModule {
 			}
 		}
 
-		if (params.collapse && Responsive.check(this) && params.placement !== 'vertical') {
-			setCollapse(this);
-		}
-
-		if ('afterInit' in this._params.callback) {
-			execute(this._params.callback.afterInit, [this]);
-		}
-
-		/**
-		 * Функция сворачивания
-		 * TODO Придумать что то с мега меню, которое уходит в подменю
-		 * TODO Так же есть косяки при ресайзе
-		 */
-		function setCollapse(_this) {
-			let width_navigation_responsive = _this.navigation.clientWidth,
-				width_all_links_responsive = 0,
-				$dots = Selectors.find('.dots', _this.navigation),
-				_dots = getSVG('dots');
-
-			if (_this.$links.length) {
-				if ($dots) {
-					width_all_links_responsive = $dots.clientWidth
-				} else {
-					let $a = Selectors.find('a', _this.$links[0]),
-						$linkStyle = getComputedStyle($a),
-						paddingLeft = normalizeData($linkStyle.paddingLeft.slice(0, -2)),
-						paddingRight =  normalizeData($linkStyle.paddingRight.slice(0, -2)),
-						padding = paddingLeft + paddingRight;
-
-					// TODO не совсем верно, но мы точно знаем ширину точек в svg - 16px
-					width_all_links_responsive = padding + 16;
-				}
-
-				for (let $link of _this.$links) {
-					let width = $link.getBoundingClientRect().width;
-					width_all_links_responsive = width_all_links_responsive + width;
-
-					if ((width_navigation_responsive) < width_all_links_responsive) {
-						_this.movedLinks.push($link);
-						$link.remove();
-					} else {
-						if (_this.movedLinks.length) {
-							if ($dots) {
-								_this.navigation.insertBefore(_this.movedLinks[0], $dots)
-							} else {
-								_this.navigation.appendChild(_this.movedLinks[0])
-							}
-							_this.movedLinks.splice(0, 1);
-						}
-					}
-				}
-
-				if (_this.movedLinks.length) {
-					if (!$dots) {
-						_this.navigation.insertAdjacentHTML('beforeend','<li class="dropdown dots">' + '<a href="#" aria-expanded="false">'+ _dots +'</a></li>');
-					}
-				} else {
-					if ($dots) {
-						$dots.remove();
-					}
-				}
-
-				let $d = _this.navigation.querySelector('.dots');
-				if ($d && _this.movedLinks.length) {
-					let $dropdown = $d.querySelector('ul');
-					if ($dropdown) {
-						for (let link of _this.movedLinks) {
-							$dropdown.prepend(link);
-						}
-					} else {
-						let $dropdown = document.createElement('ul');
-						$dropdown.classList.add('dropdown-content');
-						$dropdown.classList.add('right');
-
-						for (let link of _this.movedLinks) {
-							$dropdown.prepend(link);
-						}
-
-						$d.appendChild($dropdown);
-					}
-				}
-			}
+		if ('afterInit' in this._params.callbacks) {
+			execute(this._params.callbacks.afterInit, [this]);
 		}
 	}
 
 	show(relatedTarget) {
 		let target = relatedTarget.relatedTarget;
 
-		if (!target || isDisabled(target)) {
-			return;
-		}
+		if (!target || isDisabled(target)) return;
 
 		if (!target.closest('.dropdown-content')) {
 			target.classList.add('first');
@@ -287,40 +194,17 @@ class VGNav extends BaseModule {
 		drop.classList.add(CLASS_NAME_SHOW);
 		target.classList.add(CLASS_NAME_ACTIVE);
 
-		setDropPosition(drop)
+		const $placement = new Placement({
+			drop: drop
+		})
+
+		$placement._setPlacement();
 
 		const completeCallBack = () => {
 			drop.classList.add(CLASS_NAME_FADE);
 			EventHandler.trigger(target, EVENT_KEY_SHOWN, relatedTarget)
 		}
-		this._queueCallback(completeCallBack, drop, true, 50);
-
-		/**
-		 *
-		 * @param $drop
-		 */
-		function setDropPosition($drop) {
-			let {width, right} = $drop.getBoundingClientRect(),
-				window_width = window.innerWidth;
-
-			let N_right = window_width - right - width;
-
-			$drop.classList.remove('right');
-			$drop.classList.remove('left');
-
-			let $parent = $drop.closest('li'),
-				$ul = $parent.querySelectorAll('ul');
-
-			if (N_right > width) {
-				for (const $el of $ul) {
-					$el.classList.add('left');
-				}
-			} else {
-				for (const $el of $ul) {
-					$el.classList.add('right');
-				}
-			}
-		}
+		this._queueCallback(completeCallBack, drop, true, 10);
 	}
 
 	hide(relatedTarget) {
@@ -370,20 +254,16 @@ class VGNav extends BaseModule {
 		}
 	}
 
-	/**
-	 * TODO если на странице несколько навигаций, то есть косяки
-	 * @param element
-	 * @param params
-	 */
 	static init(element, params = {}) {
 		const instance = VGNav.getOrCreateInstance(element, params);
 		instance.build();
 
-		let drops = Selectors.findAll('.dropdown', instance._navigation)
+		let drops = Selectors.findAll('.dropdown', instance.navigation);
 
-		if (instance._params.hover) {
+		if (instance._params.hover && !instance.isMobileDevice()) {
 			[...drops].forEach(function (el) {
 				let currentElem = null;
+
 				EventHandler.on(el, EVENT_MOUSEOVER_DATA_API, function (event) {
 					if (currentElem) return;
 					VGNav.hideOpenDrops(event);
@@ -400,6 +280,7 @@ class VGNav extends BaseModule {
 
 					instance.show(relatedTarget);
 				});
+
 				EventHandler.on(el, EVENT_MOUSEOUT_DATA_API, function (event) {
 					if (!currentElem) return;
 
@@ -415,57 +296,18 @@ class VGNav extends BaseModule {
 					instance.hide({relatedTarget: relatedTarget, elm: elm});
 				})
 			})
-		} else {
-			EventHandler.on(document, EVENT_KEYUP_DATA_API, VGNav.clearDrops);
-			EventHandler.on(document, EVENT_CLICK_DATA_API, VGNav.clearDrops);
-			EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
-				if (!Manipulator.has(this, 'aria-expanded')) {
-					return;
-				}
-
-				if ('click' in instance._params.callback) {
-					execute(instance._params.callback.click, [this]);
-				}
-
-				event.preventDefault();
-
-				let self = this.closest('.vg-nav'),
-					isFirst = self.querySelector('.first');
-
-				let target = this.closest('.dropdown');
-				if (!target) return;
-
-				if (isDisabled(target) && !isVisible(target)) {
-					return;
-				}
-
-				if (isFirst && this.closest('.first')) {
-					if (target.classList.contains('active')) {
-						instance.hide({relatedTarget: target});
-						return;
-					}
-				} else {
-					[...Selectors.findAll('.active', self)].forEach(function (el) {
-						if (el && el !== target) {
-							instance.hide({relatedTarget: el})
-						}
-					});
-				}
-
-				instance.show({relatedTarget: target});
-			});
 		}
 
 		const vgNavSidebar = document.getElementById('sidebar-nav');
-		let hamburger = instance._element.querySelector('.' + instance._params.classes.hamburger);
+		let hamburger = instance._element.querySelector('.' + instance._classes.hamburger);
 
 		if (vgNavSidebar && hamburger) {
 			vgNavSidebar.addEventListener('vg.sidebar.show', function () {
-				hamburger.classList.add(instance._params.classes.hamburgerActive);
+				hamburger.classList.add(instance._classes.hamburgerActive);
 			});
 
 			vgNavSidebar.addEventListener('vg.sidebar.hide', function () {
-				hamburger.classList.remove(instance._params.classes.hamburgerActive);
+				hamburger.classList.remove(instance._classes.hamburgerActive);
 			});
 		}
 	}
@@ -479,32 +321,72 @@ class VGNav extends BaseModule {
 	}
 
 	static hideOpenDrops(event) {
-		const openToggles = Selectors.findAll('.dropdown:not(.disabled):not(:disabled).active');
+		[... Selectors.findAll('.dropdown:not(.disabled):not(:disabled).active')].forEach((el) => {
+			let target = event.target,
+				drop   = target.closest('.dropdown');
 
-		for (const toggle of openToggles) {
-			const context = VGNav.getInstance(toggle.closest('.vg-nav'));
-			if (!context) continue;
+			if (el !== drop) {
+				const nav = el.closest('.vg-nav');
+				const context = VGNav.getInstance(nav);
+				if (!context) return;
 
-			if (event.target.closest('.first')) {
-				return;
-			}
+				let isFirst = !!nav.querySelector('.first'),
+					dropContent = !!target.closest('.dropdown-content');
+
+				if (isFirst && dropContent) {
+					return;
+				}
 
-			const relatedTarget = { relatedTarget: toggle }
+				const relatedTarget = { relatedTarget: el }
 
-			if (event.type === 'click') {
-				relatedTarget.clickEvent = event
+				context.hide(relatedTarget)
 			}
-
-			context.hide(relatedTarget)
-		}
+		});
 	}
 }
 
-EventHandler.on(window, EVENT_RESIZE_DATA_API, function () {
-	if (Selectors.find('.vg-nav')) {
-		const instance = VGNav.getOrCreateInstance('.vg-nav', {});
-		instance.build();
+EventHandler.on(document, EVENT_KEYUP_DATA_API, VGNav.clearDrops);
+EventHandler.on(document, EVENT_CLICK_DATA_API, VGNav.clearDrops);
+EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
+	if (!Manipulator.has(this, 'aria-expanded')) {
+		return;
+	}
+
+	let nav = this.closest('.vg-nav');
+	const instance = VGNav.getOrCreateInstance(nav);
+
+	if ('afterClick' in instance._params.callbacks) {
+		execute(instance._params.callbacks.afterClick, [instance, event, this]);
+	}
+
+	if (instance._params.hover) {
+		return;
 	}
-})
+
+	event.preventDefault();
+
+	let drop = this.parentNode;
+	if (!drop) return;
+
+	if (isDisabled(drop) && !isVisible(drop)) {
+		return;
+	}
+
+	let isFirst = !!nav.querySelector('.first'),
+		dropContent = !!this.closest('.dropdown-content');
+
+	if (dropContent && isFirst) {
+		if (drop.classList.contains('active')) {
+			instance.hide({relatedTarget: drop});
+			return;
+		}
+	} else {
+		[...Selectors.findAll('.active', nav)].forEach(function (el) {
+			instance.hide({relatedTarget: el})
+		});
+	}
+
+	instance.show({relatedTarget: drop});
+});
 
 export default VGNav;

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

@@ -3,7 +3,7 @@
 		flex-direction: row;
 
 		.dropdown {
-			> ul {
+			> .dropdown-content {
 				&.left, .left {
 					left: 0;
 				}

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

@@ -2,16 +2,6 @@ $nav-map: (
 		transition: all .2s ease-in-out,
 );
 
-$grid-breakpoints: (
-		xs: 576px,
-		sm: 768px,
-		md: 992px,
-		lg: 1200px,
-		xl: 1400px,
-		xxl: 1600px,
-		xxxl: 1800px
-);
-
 $nav-item-map: (
 		margin: 0,
 		padding: 23px 25px,
@@ -27,14 +17,6 @@ $nav-item-map: (
 		position: relative,
 );
 
-$hamburger-map: (
-		height: 27px,
-		line-width: 35px,
-		line-color: #333333,
-		line-height: 3px,
-		line-indent-top: 7px
-);
-
 $nav-drop-map: (
 		z-index: 10,
 		transition: map-get($nav-map, transition),
@@ -67,4 +49,22 @@ $nav-drop-item-map: (
 		color: inherit,
 		color-hover: inherit,
 		transition: map-get($nav-map, transition),
+);
+
+$hamburger-map: (
+		height: 27px,
+		line-width: 35px,
+		line-color: #333333,
+		line-height: 3px,
+		line-indent-top: 7px
+);
+
+$grid-breakpoints: (
+		xs: 576px,
+		sm: 768px,
+		md: 992px,
+		lg: 1200px,
+		xl: 1400px,
+		xxl: 1600px,
+		xxxl: 1800px
 );

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

@@ -43,29 +43,32 @@
 				border: var(--vg-nav-item-border);
 				border-radius: var(--vg-nav-item-border-radius);
 			}
+		}
 
-			/** set toggle **/
-			@import "toggle";
+		li {
+			a {
+				/** set toggle **/
+				@import "toggle";
+			}
 		}
 
 		.dropdown {
 			position: relative;
 
 			.dropdown-content {
-				transition: var(--vg-nav-drop-transition);
-				list-style: none;
-				z-index: var(--vg-nav-drop-z-index);
 				position: absolute;
-				top: 120%;
+				transform: translateY(20%);
 				opacity: 0;
 				visibility: hidden;
+				list-style: none;
+				transition: var(--vg-nav-drop-transition);
+				z-index: var(--vg-nav-drop-z-index);
 				width: var(--vg-nav-drop-width);
 				padding: var(--vg-nav-drop-padding);
 				border: 1px solid var(--vg-nav-drop-border-color);
 				border-radius: var(--vg-nav-drop-border-radius);
 				background-color: var(--vg-nav-drop-bg);
 				max-height: var(--vg-nav-drop-max-height);
-				overflow: auto;
 
 				&:not(.show) {
 					display: none;
@@ -74,12 +77,12 @@
 				&.fade {
 					visibility: visible;
 					opacity: 1;
-					top: 100%;
+					transform: translateY(0);
 				}
 
 				.dropdown-content {
 					&.fade {
-						top: 0;
+						transform: translateY(0);
 					}
 				}
 
@@ -111,9 +114,9 @@
 				position: static;
 
 				.dropdown-content {
-					transition: var(--vg-nav-drop-mega-transition);
 					position: absolute;
 					left: 0;
+					transition: var(--vg-nav-drop-mega-transition);
 					width: var(--vg-nav-drop-mega-width);
 					min-height: var(--vg-nav-drop-mega-min-height);
 					padding: var(--vg-nav-drop-mega-padding);

package/app/modules/vgselect/js/vgselect.js

@@ -309,7 +309,7 @@ class VGSelect extends BaseModule {
 			clearTimeout(observerTimout);
 			observerTimout = setTimeout(() => {
 				VGSelect.build(select, true);
-			}, 100);
+			}, 10);
 		});
 
 		observer.observe(select, {
@@ -379,6 +379,14 @@ class VGSelect extends BaseModule {
 	static changeSelector(select, value, data = {}) {
 		if (!isObject(data) && isEmptyObj(data)) return;
 
+		[... select.options].forEach(el => {
+			Manipulator.remove(el, 'selected');
+
+			if (el.value === value) {
+				Manipulator.set(el, 'selected', true);
+			}
+		})
+
 		select.value = normalizeData(value);
 		EventHandler.trigger(select, EVENT_KEY_CHANGE, {data: data});
 		EventHandler.trigger(select, 'change', {data: data});