vgapp 0.3.9 → 0.4.1

package/CHANGELOG.md

@@ -1,59 +1,78 @@
+# VEGAS-APP 0.4.0 (Май, 287, 2025)
+* Исправлены ошибки в разных модулях
+## Модуль VGFORMSENDER
+* Добавлен параметр interceptors (перехватчики) для состояний error и/или success, после чего вызывается соответствующий колбек afterError и/или afterSuccess
+* Добавлен параметр delay в группу alert автоматическое закрытие, отсчет в миллисекундах
+---
+
 # VEGAS-APP 0.3.4 (Май, 20, 2025)
 ## Новый модуль VGSpy
+---
 
 # VEGAS-APP 0.3.0 (Май, 09, 2025)
 * Исправлены ошибки 
 ## Модуль VGFORMSENDER
 * Добавлен параметр pass, будет добавлен глаз к полю с паролем
+---
 
 # VEGAS-APP 0.2.5 (Апрель, 12, 2025)
 * Исправлены ошибки в разных модулях
 ## Новый модуль VGRollup
+---
 
 # VEGAS-APP 0.2.4 (Апрель, 8, 2025)
 ## Модуль VGSidebar & VGModal
 * Добавлен параметр hash
-
 ## Новый модуль VGToast
+---
 
 # VEGAS-APP 0.2.3 (Апрель, 4, 2025)
 ## Модуль VGDROPDOWN
 * Добавлен параметр overflow и backdrop
+---
 
 # VEGAS-APP 0.2.1 (Март, 31, 2025)
 ## Модуль VGDROPDOWN
 * Теперь можно открыть выпадающих список через параметр data-vg-target
+---
 
 # VEGAS-APP 0.1.9 (Март, 13, 2025)
 ## Модуль VGFORMSENDER
 * Новый параметр timeout. Задержка показа модального окна после закрытия других открытых окон.
+---
 
 
 # VEGAS-APP 0.1.8 (Март, 13, 2025)
 ## Модуль VGSelect
 * Релиз
+---
 
 
 # VEGAS-APP 0.1.7 (Март, 12, 2025)
 ## Модуль VGSelect
 * Исправлены ошибки
+---
 
 
 # VEGAS-APP 0.1.5 (Март, 11, 2025)
 ## Модуль VGSelect
 ### Добавлено:
 * data-placeholder
+---
 
 ### Исправлено:
 * Открытие и закрытие списка
+---
 
 ## Для модулей VGSidebar и VGModal
 ### Добавлено:
 * Событие после аякс запроса NAME_KEY.loaded
+---
 
 
 # VEGAS-APP 0.1.4 (Март, 10, 2025)
 * Перенесен плагин (<a href="https://github.com/vegas-dev/vegas-select">VGSelect</a>) в модуль VGSelect
 * для модулей VGSidebar и VGModal добавлена возможность собирать параметры с кнопки вызова элемента
 * в модуль VGSidebar добавлен класс vg-sidebar-open в тело документа
-* исправлены некоторые ошибки
+* исправлены некоторые ошибки
+---

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/vgformsender/js/vgformsender.js

@@ -60,6 +60,7 @@ class VGFormSender extends BaseModule {
 				enabled: true,
 				type: 'modal',
 				errors: true,
+				delay: 0
 			},
 			ajax: {
 				route: '',
@@ -148,6 +149,7 @@ class VGFormSender extends BaseModule {
 					} else {
 						if (!_this._params.interceptors.error) {
 							_this._alertError(event, data);
+							execute(_this._params.callback.afterError, [_this._element, _this, event, data]);
 						} else {
 							execute(_this._params.callback.afterError, [_this._element, _this, event, data]);
 						}
@@ -158,6 +160,7 @@ class VGFormSender extends BaseModule {
 					} else {
 						if (!_this._params.interceptors.success) {
 							_this._alertSuccess(event, data);
+							execute(_this._params.callback.afterSuccess, [_this._element, _this, event, data]);
 						} else {
 							execute(_this._params.callback.afterSuccess, [_this._element, _this, event, data]);
 						}
@@ -344,6 +347,12 @@ class VGFormSender extends BaseModule {
 				if ($body) $body.append(_this.setDataRelationStatus(element, status, data, 'modal'));
 
 				self.toggle();
+
+				if (_this._params.alert.delay > 0) {
+					setTimeout(() => {
+						self.hide();
+					}, _this._params.alert.delay)
+				}
 			});
 		}, _this._params.timeout);
 	}
@@ -362,7 +371,14 @@ class VGFormSender extends BaseModule {
 			_this._element.prepend($collapse);
 		}
 
-		VGCollapse.getOrCreateInstance($collapse, {toggle: false}).toggle();
+		let collapse = VGCollapse.getOrCreateInstance($collapse, {toggle: false});
+		collapse.toggle();
+
+		if (_this._params.alert.delay > 0) {
+			setTimeout(() => {
+				collapse.hide();
+			}, _this._params.alert.delay)
+		}
 	}
 
 	setDataRelationStatus($element, status, data, type) {

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;