vgapp 0.4.0 → 0.4.2

package/app/modules/vgalert/index.js

@@ -0,0 +1,5 @@
+// alert
+import "./scss/vgalert.scss";
+import VGAlert from "./js/vgalert";
+
+export default VGAlert;

package/app/modules/vgcollapse/index.js

@@ -0,0 +1,3 @@
+import VGCollapse from "./js/vgcollapse";
+
+export default VGCollapse;

package/app/modules/vgdatatable/index.js

@@ -0,0 +1,4 @@
+import './scss/vgdatatable.scss'
+import VGDatatable from "./js/vgdatatable";
+
+export default VGDatatable;

package/app/modules/vgdropdown/index.js

@@ -0,0 +1,4 @@
+import './scss/vgdropdown.scss';
+import VGDropdown from "./js/vgdropdown";
+
+export default VGDropdown;

package/app/modules/vgformsender/index.js

@@ -0,0 +1,4 @@
+import './scss/vgformsender.scss';
+import VGFormSender from "./js/vgformsender";
+
+export default VGFormSender;

package/app/modules/vglawcookie/index.js

@@ -0,0 +1,4 @@
+import './scss/vglawcookie.scss';
+import VGLawCookie from "./js/vglawcookie";
+
+export default VGLawCookie;

package/app/modules/vgmodal/index.js

@@ -0,0 +1,4 @@
+import './scss/vgmodal.scss';
+import VGModal from "./js/vgmodal";
+
+export default VGModal;

package/app/modules/vgnav/index.js

@@ -0,0 +1,4 @@
+import './scss/vgnav.scss';
+import VGNav from "./js/vgnav";
+
+export default VGNav;

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

@@ -39,6 +39,7 @@ $nav-drop-map: (
 		z-index: 10,
 		transition: map-get($nav-map, transition),
 		width: 200px,
+		max-height: initial,
 		border-color: $border-color,
 		border-radius: 0,
 		padding: 0,
@@ -54,6 +55,7 @@ $nav-drop-mega-map: (
 		padding: 1rem,
 		z-index: 10,
 		transition: map-get($nav-map, transition),
+		max-height: initial,
 );
 
 $nav-drop-item-map: (

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

@@ -64,6 +64,8 @@
 				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;

package/app/modules/vgrollup/index.js

@@ -0,0 +1,4 @@
+import './scss/vgrollup.scss';
+import VGRollup from "./js/vgrollup";
+
+export default VGRollup;

package/app/modules/vgselect/index.js

@@ -0,0 +1,4 @@
+import './scss/vgselect.scss';
+import VGSelect from "./js/vgselect";
+
+export default VGSelect;

package/app/modules/vgsidebar/index.js

@@ -0,0 +1,4 @@
+import './scss/vgsidebar.scss';
+import VGSidebar from "./js/vgsidebar";
+
+export default VGSidebar;

package/app/modules/vgspy/index.js

@@ -0,0 +1,3 @@
+import VGSpy from "./js/vgspy";
+
+export default VGSpy;

package/app/modules/vgspy/js/vgspy.js

@@ -1,7 +1,6 @@
 import BaseModule from "../../base-module";
+import {mergeDeepObject, getElement, isDisabled, isVisible} from "../../../utils/js/functions";
 import EventHandler from "../../../utils/js/dom/event";
-import {dismissTrigger} from "../../module-fn";
-import {execute, isDisabled, makeRandomString, mergeDeepObject, noop} from "../../../utils/js/functions";
 import Selectors from "../../../utils/js/dom/selectors";
 
 /**
@@ -9,32 +8,52 @@ import Selectors from "../../../utils/js/dom/selectors";
  */
 const NAME = 'spy';
 const NAME_KEY = 'vg.spy';
+const EVENT_KEY = `.${NAME_KEY}`
+const DATA_API_KEY = '.data-api'
+
+const EVENT_ACTIVATE = `activate${EVENT_KEY}`
+const EVENT_CLICK = `click${EVENT_KEY}`
+const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`
+
+const CLASS_NAME_DROPDOWN_ITEM = 'vg-dropdown-item'
+const CLASS_NAME_ACTIVE = 'active'
+
+const SELECTOR_DATA_SPY = '[data-vg-toggle="spy"]'
+const SELECTOR_TARGET_LINKS = '[href]'
+const SELECTOR_NAV_LIST_GROUP = '.nav, .list-group'
+const SELECTOR_NAV_LINKS = '.nav-link'
+const SELECTOR_NAV_ITEMS = '.nav-item'
+const SELECTOR_LIST_ITEMS = '.list-group-item'
+const SELECTOR_LINK_ITEMS = `${SELECTOR_NAV_LINKS}, ${SELECTOR_NAV_ITEMS} > ${SELECTOR_NAV_LINKS}, ${SELECTOR_LIST_ITEMS}`
+const SELECTOR_DROPDOWN = '.vg-dropdown'
+const SELECTOR_DROPDOWN_TOGGLE = '[data-vg-toggle="dropdown"]'
 
 
 class VGSpy extends BaseModule {
-	constructor(element, params = {}) {
+	constructor(element, params) {
 		super(element, params);
 
 		this._params = this._getParams(element, mergeDeepObject({
-			speed: 1500,
-			offset: 0,
-			easing: 'easeInOutSine', // easeInOutSine:easeOutSine:easeInOutQuint
-			isState: false,
-			onActive: noop,
-			onClick: noop,
-			activeClass: ['active']
+			offset: null, // TODO: v6 @deprecated, keep it for backwards compatibility reasons
+			rootMargin: '0px 0px -25%',
+			smoothScroll: true,
+			target: this._element,
+			threshold: [0.1, 0.5, 1]
 		}, params));
 
-		this.isClick = false;
-
-		this.links = this._element.querySelectorAll('[data-vg-target]').length ?
-			this._element.querySelectorAll('[data-vg-target]') :
-			this._element.querySelectorAll('a')
-		;
+		this._targetLinks = new Map()
+		this._observableSections = new Map()
+		this._rootElement = getComputedStyle(this._element).overflowY === 'visible' ? null : this._element
+		this._activeTarget = null
+		this._observer = null
+		this._previousScrollData = {
+			visibleEntryTop: 0,
+			parentScrollTop: 0
+		}
+		this._params = this._configAfterMerge(this._params);
+		console.log(this._params)
 
-		this.onLoad();
-		this.onClick();
-		this.onScroll();
+		this.refresh();
 	}
 
 	static get NAME() {
@@ -45,198 +64,166 @@ class VGSpy extends BaseModule {
 		return NAME_KEY
 	}
 
-	onLoad() {
-		let _this = this;
+	refresh() {
+		this._initializeTargetsAndObservables()
+		this._maybeEnableSmoothScroll()
 
-		document.addEventListener('DOMContentLoaded', function () {
-			_this.setCurrentSection(null);
-		});
+		if (this._observer) {
+			this._observer.disconnect()
+		} else {
+			this._observer = this._getNewObserver()
+		}
+
+		for (const section of this._observableSections.values()) {
+			this._observer.observe(section)
+		}
 	}
 
-	onClick() {
-		let _this = this;
+	dispose() {
+		this._observer.disconnect()
+		super.dispose()
+	}
 
-		_this.links.forEach(el => {
-			if (el) {
-				el.onclick = function (e) {
-					execute(_this._params.onClick, [e, this])
-					_this.setCurrentSection(this);
+	_configAfterMerge(param) {
+		param.target = getElement(param.target) || document.body
+		param.rootMargin = param.offset ? `${param.offset}px 0px -30%` : param.rootMargin
 
-					return false;
-				}
-			}
-		});
+		if (typeof param.threshold === 'string') {
+			param.threshold = param.threshold.split(',').map(value => Number.parseFloat(value))
+		}
+
+		return param
 	}
 
-	onScroll() {
-		let _this = this;
+	_maybeEnableSmoothScroll() {
+		if (!this._params.smoothScroll) {
+			return
+		}
 
-		if (!_this.isClick) {
-			window.onscroll = function () {
-				_this.setCurrentSection(null);
+		EventHandler.off(this._params.target, EVENT_CLICK)
+
+		EventHandler.on(this._params.target, EVENT_CLICK, SELECTOR_TARGET_LINKS, event => {
+			const observableSection = this._observableSections.get(event.target.hash)
+			if (observableSection) {
+				event.preventDefault()
+				const root = this._rootElement || window
+				const height = observableSection.offsetTop - this._element.offsetTop
+				if (root.scrollTo) {
+					root.scrollTo({ top: height, behavior: 'smooth' })
+					return
+				}
+				root.scrollTop = height
 			}
-		}
+		})
 	}
 
-	setCurrentSection($link = null) {
-		this.removeCurrentActive();
+	_getNewObserver() {
+		const options = {
+			root: this._rootElement,
+			threshold: this._params.threshold,
+			rootMargin: this._params.rootMargin
+		}
 
-		if (this._params.isState) {
-			// TODO не тестили
-			let target = window.location.hash;
-			if (target) {
-				let $element = document.querySelector('[href="'+ target +'"]') ||
-					document.querySelector('[href="\/' + target +'"]') ||
-					document.querySelector('[data-vg-target="'+ target.replace('#', '') +'"]') || null;
+		return new IntersectionObserver(entries => this._observerCallback(entries), options)
+	}
 
-				if ($element !== null) {
-					$link = $element;
-				}
-			}
+	_observerCallback(entries) {
+		const targetElement = entry => this._targetLinks.get(`#${entry.target.id}`);
+
+		const activate = entry => {
+			this._previousScrollData.visibleEntryTop = entry.target.offsetTop;
+			this._process(targetElement(entry));
 		}
 
-		if ($link) {
-			let target = this.attributes($link, 'target'),
-				offset = this.attributes($link, 'offset'),
-				section = document.getElementById(target);
-
-			if (section) {
-				let scrollTargetY = section.offsetTop + (offset) + (this._params.offset),
-					scrollY = window.scrollY || document.documentElement.scrollTop,
-					speed = this._params.speed,
-					easing = this._params.easing,
-					currentTime = 0;
-
-				this.removeCurrentActive();
-				this.setActive($link, section);
-
-				let time = Math.max(.1, Math.min(Math.abs(scrollY - scrollTargetY) / speed, .8)),
-					easingEquations = {
-						easeOutSine: function (pos) {
-							return Math.sin(pos * (Math.PI / 2));
-						},
-						easeInOutSine: function (pos) {
-							return (-0.5 * (Math.cos(Math.PI * pos) - 1));
-						},
-						easeInOutQuint: function (pos) {
-							if ((pos /= 0.5) < 1) {
-								return 0.5 * Math.pow(pos, 5);
-							}
-							return 0.5 * (Math.pow((pos - 2), 5) + 2);
-						}
-					};
-
-				window.requestAnimFrame = (function(){
-					return  window.requestAnimationFrame       ||
-						window.webkitRequestAnimationFrame ||
-						window.mozRequestAnimationFrame    ||
-						function( callback ){
-							window.setTimeout(callback, 1000 / 60);
-						};
-				})();
-
-				function move() {
-					currentTime += 1 / 60;
-
-					let p = currentTime / time,
-						t = easingEquations[easing](p);
-
-					if (p < 1) {
-						requestAnimFrame(move);
-						window.scrollTo(0, scrollY + ((scrollTargetY - scrollY) * t));
-					} else {
-						window.scrollTo(0, scrollTargetY);
-					}
-				}
+		const parentScrollTop = (this._rootElement || document.documentElement).scrollTop
+		const userScrollsDown = parentScrollTop >= this._previousScrollData.parentScrollTop
+		this._previousScrollData.parentScrollTop = parentScrollTop
 
-				move();
+		for (const entry of entries) {
+			if (!entry.isIntersecting) {
+				this._activeTarget = null
+				this._clearActiveClass(targetElement(entry))
 
-				this.isClick = false;
+				continue
 			}
-		} else {
-			for (let i = 0; i < this.links.length; i++) {
-				let target = this.attributes(this.links[i], 'target'),
-					offset = this.attributes(this.links[i], 'offset'),
-					section = document.getElementById(target);
-
-				if (section) {
-					let start = section.offsetTop + (offset) + (this._params.offset),
-						end = start + section.offsetHeight,
-						currentPosition = (document.documentElement.scrollTop || document.body.scrollTop),
-						isInView = currentPosition >= start && currentPosition < end;
-
-					if (isInView) {
-						this.removeCurrentActive({ignore: this.links[i]});
-						this.setActive(this.links[i], section);
-					}
+
+			const entryIsLowerThanPrevious = entry.target.offsetTop >= this._previousScrollData.visibleEntryTop
+			if (userScrollsDown && entryIsLowerThanPrevious) {
+				activate(entry)
+				if (!parentScrollTop) {
+					return
 				}
+
+				continue
+			}
+
+			if (!userScrollsDown && !entryIsLowerThanPrevious) {
+				activate(entry)
 			}
 		}
 	}
 
-	setActive($link, $section) {
-		const isActive = this._params.activeClass.every(function (value){
-			return $link.classList.contains(value);
-		});
+	_initializeTargetsAndObservables() {
+		this._targetLinks = new Map();
+		this._observableSections = new Map();
 
-		if (this._params.isState) {
-			let text = this.attributes($link, 'text'),
-				target = this.attributes($link, 'target');
+		const targetLinks = Selectors.findAll(SELECTOR_TARGET_LINKS, this._params.target);
 
-			history.pushState("", document.title + text, '#' + target);
-		}
-
-		if (!isActive) {
-			if ($section) {
-				$section.classList.add(...this._params.activeClass);
+		for (const anchor of targetLinks) {
+			if (!anchor.hash || isDisabled(anchor)) {
+				continue
 			}
 
-			if ($link) {
-				$link.classList.add(...this._params.activeClass);
-			}
+			const observableSection = Selectors.find(decodeURI(anchor.hash));
 
-			execute(this._params.onActive, [$link, $section]);
+			if (isVisible(observableSection)) {
+				this._targetLinks.set(decodeURI(anchor.hash), anchor)
+				this._observableSections.set(anchor.hash, observableSection)
+			}
 		}
 	}
 
-	removeCurrentActive(options = { ignore: null }) {
-		for (let i = 0; i < this.links.length; i++) {
-			let target = this.attributes(this.links[i], 'target'),
-				section = document.getElementById(target);
-
-			if ((options.ignore !== this.links[i]) && section) {
-				this.links[i].classList.remove(...this._params.activeClass);
-				section.classList.remove(...this._params.activeClass);
-			}
+	_process(target) {
+		if (this._activeTarget === target) {
+			return
 		}
-	}
 
-	attributes(self, prop = '') {
-		let target = self.getAttribute('href') || self.dataset.vgTarget;
+		this._clearActiveClass(this._params.target)
+		this._activeTarget = target
+		target.classList.add(CLASS_NAME_ACTIVE)
+		this._activateParents(target)
 
-		if (target !== 'undefined' && target.indexOf('#') !== -1) {
-			target = target.replace(/(^.+)#/gm, '');
+		EventHandler.trigger(this._element, EVENT_ACTIVATE, { relatedTarget: target })
+	}
 
-			if (target.indexOf('#') !== -1) {
-				target = target.replace('#', '');
-			}
-		} else if (target !== 'undefined' && target.indexOf('#') === -1) {
-			target = ''
+	_activateParents(target) {
+		if (target.classList.contains(CLASS_NAME_DROPDOWN_ITEM)) {
+			Selectors.find(SELECTOR_DROPDOWN_TOGGLE, target.closest(SELECTOR_DROPDOWN))
+				.classList.add(CLASS_NAME_ACTIVE)
+			return
 		}
 
-		let offset = self.dataset.vgOffset ? parseInt(self.dataset.vgOffset) : 0;
-		let text = self.innerHTML;
+		for (const listGroup of Selectors.parents(target, SELECTOR_NAV_LIST_GROUP)) {
+			for (const item of Selectors.prev(listGroup, SELECTOR_LINK_ITEMS)) {
+				item.classList.add(CLASS_NAME_ACTIVE)
+			}
+		}
+	}
 
-		if (prop === 'target') return target;
-		if (prop === 'offset') return offset;
-		if (prop === 'text') return text;
+	_clearActiveClass(parent) {
+		parent.classList.remove(CLASS_NAME_ACTIVE)
 
-		return {
-			target: target,
-			offset: offset,
-			text: text
-		};
+		const activeNodes = Selectors.findAll(`${SELECTOR_TARGET_LINKS}.${CLASS_NAME_ACTIVE}`, parent);
+		for (const node of activeNodes) {
+			node.classList.remove(CLASS_NAME_ACTIVE)
+		}
 	}
 }
 
-export default VGSpy;
+EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
+	for (const spy of Selectors.findAll(SELECTOR_DATA_SPY)) {
+		VGSpy.getOrCreateInstance(spy)
+	}
+})
+
+export default VGSpy;

package/app/modules/vgtoast/index.js

@@ -0,0 +1,4 @@
+import './scss/vgtoast.scss'
+import VGToast from "./js/vgtoast";
+
+export default VGToast;

package/app/utils/js/dom/selectors.js

@@ -61,8 +61,44 @@ const Selectors = {
 		return selector ? Selectors.findAll(selector) : []
 	},
 
-	prev(element) {
-		return element.previousElementSibling || null
+	parents(element, selector) {
+		const parents = []
+		let ancestor = element.parentNode.closest(selector)
+
+		while (ancestor) {
+			parents.push(ancestor)
+			ancestor = ancestor.parentNode.closest(selector)
+		}
+
+		return parents
+	},
+
+	next(element, selector) {
+		let next = element.nextElementSibling
+
+		while (next) {
+			if (next.matches(selector)) {
+				return [next]
+			}
+
+			next = next.nextElementSibling
+		}
+
+		return []
+	},
+
+	prev(element, selector) {
+		let previous = element.previousElementSibling
+
+		while (previous) {
+			if (previous.matches(selector)) {
+				return [previous]
+			}
+
+			previous = previous.previousElementSibling
+		}
+
+		return []
 	}
 }
 

package/app/utils/js/functions.js

@@ -2,6 +2,20 @@
  * Набор скриптов для широкого применения
  */
 
+/**
+ * Экранирование селекторов для корректной работы идентификаторов
+ * @param {string} selector
+ * @returns {string}
+ */
+const parseSelector = selector => {
+	if (selector && window.CSS && window.CSS.escape) {
+		// document.querySelector needs escaping to handle IDs (html5+) containing for instance /
+		selector = selector.replace(/#([^\s"#']+)/g, (match, id) => `#${CSS.escape(id)}`)
+	}
+
+	return selector
+}
+
 /**
  * Если что-нибудь в объекте
  * @param obj
@@ -17,6 +31,19 @@ function isEmptyObj(obj) {
 	return true
 }
 
+const getElement = object => {
+	// it's a jQuery object or a node element
+	if (isElement(object)) {
+		return object.jquery ? object[0] : object
+	}
+
+	if (typeof object === 'string' && object.length > 0) {
+		return document.querySelector(parseSelector(object))
+	}
+
+	return null
+}
+
 /**
  * isElement
  * @param object
@@ -141,6 +168,8 @@ function removeElementArray(arr, el) {
 function mergeDeepObject(...objects) {
 	const isObject = obj => obj && typeof obj === 'object';
 
+	if (!isObject) return;
+
 	return objects.reduce((prev, obj) => {
 		Object.keys(obj).forEach(key => {
 			const pVal = prev[key];
@@ -293,4 +322,4 @@ function transliterate(text, enToRu) {
  */
 const isRTL = () => document.documentElement.dir === 'rtl'
 
-export {isElement, isVisible, isDisabled, isObject, isEmptyObj, mergeDeepObject, removeElementArray, normalizeData, execute, executeAfterTransition, reflow, noop, makeRandomString, isRTL, transliterate}
+export {isElement, isVisible, isDisabled, isObject, isEmptyObj, mergeDeepObject, removeElementArray, normalizeData, execute, executeAfterTransition, reflow, noop, makeRandomString, isRTL, transliterate, getElement}