vgapp 0.6.0 → 0.6.2

package/CHANGELOG.md

@@ -1,7 +1,4 @@
-# VEGAS-APP 0.6.0 (Август, 20, 2025)
-* Исправлены ошибки в разных модулях
-
-# VEGAS-APP 0.5.6 - 0.5.9 (Август, 08, 2025)
+# VEGAS-APP 0.5.6 - 0.6.1 (Август, 21, 2025)
 * Разделение JS и CSS
 * Исправлены ошибки в разных модулях
 

package/app/modules/base-module.js

@@ -103,7 +103,38 @@ class BaseModule {
 		const isSmallScreen = window.innerWidth < 768;
 		const isHighDPI = window.devicePixelRatio >= 2;
 
-		return isMobileUA || (isTouchDevice && isSmallScreen && isHighDPI);
+		function detectIPadPro() {
+			const userAgent = navigator.userAgent;
+			const platform = navigator.platform;
+
+			const isIPad = /iPad/.test(userAgent) || (platform === 'MacIntel' && navigator.maxTouchPoints > 1);
+
+			if (!isIPad) return { isiPadPro: false };
+
+			const screenWidth = window.screen.width * window.devicePixelRatio;
+			const screenHeight = window.screen.height * window.devicePixelRatio;
+
+			const proResolutions = [
+				{ width: 2048, height: 2732 }, // 12.9"
+				{ width: 1668, height: 2388 }, // 11"
+				{ width: 1668, height: 2224 }  // 10.5"
+			];
+
+			const isProResolution = proResolutions.some(res =>
+				(screenWidth === res.width && screenHeight === res.height) ||
+				(screenWidth === res.height && screenHeight === res.width)
+			);
+
+			return {
+				isiPadPro: isProResolution,
+				screenWidth: screenWidth,
+				screenHeight: screenHeight,
+				userAgent: userAgent,
+				platform: platform
+			};
+		}
+
+		return isMobileUA || (isTouchDevice && isSmallScreen && isHighDPI) || detectIPadPro().isiPadPro;
 	}
 
 	static getInstance(element) {

package/app/modules/vgdropdown/js/vgdropdown.js

@@ -10,6 +10,7 @@ const NAME             = 'dropdown';
 const NAME_KEY         = 'vg.dropdown';
 const CLASS_NAME_SHOW  = 'show';
 const CLASS_NAME_FADE  = 'fade';
+const CLASS_NAME_OPEN  = 'open';
 const TARGET_CONTAINER = 'vg-dropdown-content';
 const PARENT_CONTAINER = 'vg-dropdown';
 const SELECTOR_DATA_TOGGLE = '[data-vg-toggle="dropdown"]';
@@ -35,7 +36,7 @@ class VGDropdown extends BaseModule {
 			overflow: false,
 			keyboard: false,
 			placement: 'bottom',
-			timeoutAnimation: 350,
+			timeoutAnimation: 10,
 			hover: false,
 			ajax: {
 				route: '',
@@ -46,6 +47,7 @@ class VGDropdown extends BaseModule {
 				output: true,
 			},
 			animation: {
+				fade: false,
 				enable: false,
 				in: 'animate__flipInY',
 				out: 'animate__flipOutY',
@@ -65,7 +67,10 @@ class VGDropdown extends BaseModule {
 		this._drop = target || Selectors.find('.' + TARGET_CONTAINER, this._parent);
 		this._isPlacement = false;
 
-		this._params.animation.delay = !this._params.animation.enable ? 0 : this._params.animation.delay;
+		this.isFade      = this._params.animation.fade;
+		this.isAnimation = this._params.animation.enable;
+
+		this._params.animation.delay = !this.isAnimation ? 0 : this._params.animation.delay;
 		this._animation(this._drop, VGDropdown.NAME_KEY, this._params.animation);
 	}
 
@@ -114,10 +119,16 @@ class VGDropdown extends BaseModule {
 		}
 
 		const completeCallBack = () => {
-			if (!this._params.animation.enable) this._drop.classList.add(CLASS_NAME_FADE);
+			if (this.isFade) {
+				this._drop.classList.add(CLASS_NAME_FADE);
+			} else if(!this.isAnimation) {
+				this._drop.classList.add(CLASS_NAME_OPEN);
+			}
+
 			EventHandler.trigger(this._drop, EVENT_KEY_SHOWN, relatedTarget)
 		}
-		this._queueCallback(completeCallBack, this._drop, true, 50);
+
+		this._queueCallback(completeCallBack, this._drop, this.isAnimation || this.isFade, 50);
 	}
 
 	hide() {
@@ -152,7 +163,12 @@ class VGDropdown extends BaseModule {
 			}
 		}
 
-		if (!this._params.animation.enable) this._drop.classList.remove(CLASS_NAME_FADE);
+		if (this.isFade) {
+			this._drop.classList.remove(CLASS_NAME_FADE);
+		} else if(!this.isAnimation) {
+			this._drop.classList.remove(CLASS_NAME_OPEN);
+		}
+
 		this._element.classList.remove(CLASS_NAME_SHOW);
 		this._element.setAttribute('aria-expanded', 'false');
 
@@ -175,7 +191,7 @@ class VGDropdown extends BaseModule {
 				this._drop.classList.remove(CLASS_NAME_SHOW);
 				EventHandler.trigger(this._drop, EVENT_KEY_HIDDEN, relatedTarget);
 			}
-			this._queueCallback(completeCallback, this._drop, true);
+			this._queueCallback(completeCallback, this._drop, this.isAnimation || this.isFade);
 		}, this._params.animation.delay);
 	}
 
@@ -184,18 +200,11 @@ class VGDropdown extends BaseModule {
 		const _this = this;
 
 		if (!_this._isPlacement) {
-			let placement = new Placement({
-				element: this._parent,
-				drop: this._drop
-			})._getPlacement();
-
-			if (placement.isFixed) {
-				_this._drop.style.position = 'fixed';
-				_this._drop.style.transform = 'translateY(-20%)'; // todo this is костыль поfixить
-			}
+			const $placement = new Placement({
+				drop: _this._drop
+			})
 
-			_this._drop.style.left = placement.left + 'px';
-			_this._drop.style.top =  placement.top + 'px';
+			$placement._setPlacement();
 		}
 
 		if (_this._params.offset) {

package/app/modules/vgdropdown/scss/vgdropdown.scss

@@ -17,11 +17,17 @@
 
 	&-content {
 		z-index: var(--vg-dropdown-z-index);
-		position: absolute;
-		opacity: 0;
 		transform: translateY(20%);
 		transition: var(--vg-dropdown-transition);
 		min-width: var(--vg-dropdown-min-width);
+		position: absolute;
+		opacity: 0;
+		left: 0;
+		top: 100%;
+
+		&.open {
+			transition: none;
+		}
 
 		&:not(.show) {
 			display: none;
@@ -31,10 +37,37 @@
 			opacity: 1;
 		}
 
-		&.fade {
+		&.fade, &.open {
 			opacity: 1;
 			transform: translateY(0);
 		}
+
+		&.top {
+			bottom: 0;
+		}
+
+		&.bottom {
+			top: 0;
+		}
+
+		&.left {
+			left: 0;
+		}
+
+		&.right {
+			left: auto;
+			right: 0;
+		}
+
+		&.show {
+			&.top {
+				bottom: 100%;
+			}
+
+			&.bottom {
+				top: 100%;
+			}
+		}
 	}
 
 	&-container {

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

@@ -359,9 +359,7 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
 		execute(instance._params.callbacks.afterClick, [instance, event, this]);
 	}
 
-	if (instance._params.hover) {
-		return;
-	}
+	if (instance._params.hover && !instance.isMobileDevice()) return;
 
 	event.preventDefault();
 

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

@@ -12,6 +12,14 @@
 					right: 0;
 				}
 
+				&.top, .top {
+					top: 0;
+				}
+
+				&.bottom, .bottom {
+					bottom: 0;
+				}
+
 				.dropdown {
 					ul.left {
 						left: 100%;
@@ -20,6 +28,14 @@
 					ul.right {
 						right: 100%;
 					}
+
+					ul.top {
+						top: 100%;
+					}
+
+					ul.bottom {
+						bottom: 100%;
+					}
 				}
 			}
 		}
@@ -32,8 +48,6 @@
 
 		.dropdown {
 			> ul {
-				top: 100%;
-
 				&.left, .left {
 					left: 100%;
 				}
@@ -42,14 +56,34 @@
 					right: 100%;
 				}
 
+				&.top, .top {
+					top: 100%;
+				}
+
+				&.bottom, .bottom {
+					bottom: 100%;
+				}
+
 				&.fade {
-					top: 0;
+					&.top {
+						top: 0;
+					}
+					&.bottom {
+						bottom: 0;
+					}
 				}
 			}
 
 			&.show {
-				> ul {
-					top: 0;
+				&.top {
+					> ul {
+						top: 0;
+					}
+				}
+				&.bottom {
+					> ul {
+						bottom: 0;
+					}
 				}
 			}
 		}
@@ -62,7 +96,13 @@
 				top: 100%;
 
 				&.fade {
-					top: 0;
+					&.top {
+						top: 0;
+					}
+
+					&.bottom {
+						bottom: 0;
+					}
 				}
 			}
 		}

package/app/utils/js/components/placement.js

@@ -1,13 +1,15 @@
 import {mergeDeepObject, normalizeData} from "../functions";
-import Selectors from "../dom/selectors";
+import {Classes} from "../dom/manipulator";
 
 /**
  * Класс Placement, определяет и устанавливает местоположение элемента на странице.
  * TODO класс не дописан, не определяет сверху и снизу
  */
 
-const CLASS_NAME_RIGHT = 'right';
-const CLASS_NAME_LEFT  = 'left';
+const CLASS_NAME_RIGHT   = 'right';
+const CLASS_NAME_LEFT    = 'left';
+const CLASS_NAME_TOP     = 'top';
+const CLASS_NAME_BOTTOM  = 'bottom';
 
 class Placement {
 	constructor(arg = {}) {
@@ -21,6 +23,8 @@ class Placement {
 
 		this._element = null;
 		this.element = this.params.element;
+
+		if (!this.drop) return false;
 	}
 
 	get drop() {
@@ -47,13 +51,28 @@ class Placement {
 	}
 
 	_setPlacement() {
-		this.drop.classList.remove(CLASS_NAME_RIGHT);
-		this.drop.classList.remove(CLASS_NAME_LEFT);
+		let rect = this._isElementInViewport(this.drop);
 
-		if (this._isElementInViewport(this.drop)) {
-			this.drop.classList.add(CLASS_NAME_LEFT);
-		} else {
-			this.drop.classList.add(CLASS_NAME_RIGHT);
+		if (!rect.isView) {
+			if (!rect.isViewRight) {
+				Classes.remove(this.drop, CLASS_NAME_LEFT);
+				Classes.add(this.drop, CLASS_NAME_RIGHT);
+			}
+
+			if (!rect.isViewLeft) {
+				Classes.remove(this.drop, CLASS_NAME_RIGHT);
+				Classes.add(this.drop, CLASS_NAME_LEFT);
+			}
+
+			if (!rect.isViewTop) {
+				Classes.remove(this.drop, CLASS_NAME_BOTTOM);
+				Classes.add(this.drop, CLASS_NAME_TOP);
+			}
+
+			if (!rect.isViewBottom) {
+				Classes.remove(this.drop, CLASS_NAME_TOP);
+				Classes.add(this.drop, CLASS_NAME_BOTTOM);
+			}
 		}
 	}
 
@@ -104,12 +123,18 @@ class Placement {
 		const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
 		const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
 
-		return (
-			rect.top >= 0 &&
-			rect.left >= 0 &&
-			rect.bottom <= viewportHeight &&
-			rect.right <= viewportWidth
-		);
+		return {
+			isView: (
+				rect.top >= 0 &&
+				rect.left >= 0 &&
+				rect.bottom <= viewportHeight &&
+				rect.right <= viewportWidth
+			),
+			isViewRight: rect.right <= viewportWidth,
+			isViewLeft: rect.left >= 0,
+			isViewTop: rect.top >= 0,
+			isViewBottom: rect.bottom <= viewportHeight,
+		};
 	}
 }
 

package/app/utils/js/dom/manipulator.js

@@ -69,4 +69,32 @@ const Manipulator = {
 	},
 }
 
-export {Manipulator}
+let Classes = {
+	remove(element, className) {
+		if (className && element) {
+			if (typeof className === 'string') {
+				className = className.split(' ');
+			}
+
+			element.classList.remove(...className);
+		}
+	},
+
+	add(element, className, isString = false) {
+		if (className) {
+			if (typeof className === 'string') {
+				className = className.split(' ');
+			}
+
+			if (isString) {
+				return '' + className.join(' ');
+			}
+
+			if (element) {
+				element.classList.add(...className);
+			}
+		}
+	}
+}
+
+export {Manipulator, Classes}