vgapp 0.3.2 → 0.3.3

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

@@ -0,0 +1,193 @@
+import BaseModule from "../../base-module";
+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";
+
+/**
+ * Constants
+ */
+const NAME = 'spy';
+const NAME_KEY = 'vg.spy';
+
+
+class VGSpy extends BaseModule {
+	constructor(element, params = {}) {
+		super(element, params);
+
+		this._params = this._getParams(element, mergeDeepObject({
+			offset: 0,
+			isState: false,
+			onActive: noop,
+			onClick: noop,
+			activeClass: ['active']
+		}, params));
+
+		this.isClick = false;
+
+		this.links = this._element.querySelectorAll('[data-vg-target]').length ?
+			this._element.querySelectorAll('[data-vg-target]') :
+			this._element.querySelectorAll('a')
+		;
+
+		this.onLoad();
+		this.onClick();
+		this.onScroll();
+	}
+
+	static get NAME() {
+		return NAME;
+	}
+
+	static get NAME_KEY() {
+		return NAME_KEY
+	}
+
+	onLoad() {
+		let _this = this;
+
+		document.addEventListener('DOMContentLoaded', function () {
+			_this.setCurrentSection(null);
+		});
+	}
+
+	onClick() {
+		let _this = this;
+
+		_this.links.forEach(el => {
+			if (el) {
+				el.onclick = function (e) {
+					execute(_this._params.onClick, [e, this])
+					_this.setCurrentSection(this);
+
+					return false;
+				}
+			}
+		});
+	}
+
+	onScroll() {
+		let _this = this;
+
+		if (!_this.isClick) {
+			window.onscroll = function () {
+				_this.setCurrentSection(null);
+			}
+		}
+	}
+
+	setCurrentSection($link = null) {
+		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;
+
+				if ($element !== null) {
+					$link = $element;
+				}
+			}
+		}
+
+		if ($link) {
+			let target = this.attributes($link, 'target'),
+				offset = this.attributes($link, 'offset'),
+				section = document.getElementById(target);
+
+			if (section) {
+				let to = section.offsetTop + (offset) + (this._params.offset)
+				this.removeCurrentActive();
+				this.setActive($link, section);
+				window.scrollTo(0, to);
+
+				this.isClick = false;
+			}
+		} 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);
+					}
+				}
+			}
+		}
+	}
+
+	setActive($link, $section) {
+		const isActive = this._params.activeClass.every(function (value){
+			return $link.classList.contains(value);
+		});
+
+		if (this._params.isState) {
+			let text = this.attributes($link, 'text'),
+				target = this.attributes($link, 'target');
+
+			history.pushState("", document.title + text, '#' + target);
+		}
+
+		if (!isActive) {
+			if ($section) {
+				$section.classList.add(...this._params.activeClass);
+			}
+
+			if ($link) {
+				$link.classList.add(...this._params.activeClass);
+			}
+
+			execute(this._params.onActive, [$link, $section]);
+		}
+	}
+
+	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);
+			}
+		}
+	}
+
+	attributes(self, prop = '') {
+		let target = self.getAttribute('href') || self.dataset.vgTarget;
+
+		if (target !== 'undefined' && target.indexOf('#') !== -1) {
+			target = target.replace(/(^.+)#/gm, '');
+
+			if (target.indexOf('#') !== -1) {
+				target = target.replace('#', '');
+			}
+		} else if (target !== 'undefined' && target.indexOf('#') === -1) {
+			target = ''
+		}
+
+		let offset = self.dataset.vgOffset ? parseInt(self.dataset.vgOffset) : 0;
+		let text = self.innerHTML;
+
+		if (prop === 'target') return target;
+		if (prop === 'offset') return offset;
+		if (prop === 'text') return text;
+
+		return {
+			target: target,
+			offset: offset,
+			text: text
+		};
+	}
+}
+
+export default VGSpy;

package/app/modules/vgspy/scss/_variables.scss

@@ -0,0 +1,26 @@
+$toast-map: (
+		indent: 1rem,
+		height: auto,
+		width: auto,
+		z-index: $toast-index,
+		transition: all .3s ease-in-out,
+		padding: 8px 22px,
+		font-size: 1.125rem,
+		background-color: $bg-color,
+		color: $color,
+		border-width: $border-width,
+		border-color: transparent,
+		border-style: $border-style,
+		border-radius: 20px,
+		box-shadow: $box-shadow,
+		header-font-weight: 500,
+		header-font-size: .975rem,
+		body-font-size: 1rem,
+		body-font-weight: 400,
+);
+
+$toast-danger-map: $danger-map;
+$toast-success-map: $success-map;
+$toast-warning-map: $warning-map;
+$toast-info-map: $info-map;
+$toast-dark-map: $dark-map;

package/app/modules/vgspy/scss/vgtoast.css

@@ -0,0 +1,133 @@
+@charset "UTF-8";
+/**
+*--------------------------------------------------------------------------
+* Модуль: VGToast
+* Автор: Vegas DEV
+* Лицензия: смотри LICENSE
+*--------------------------------------------------------------------------
+**/
+.vg-toast {
+  --vg-toast-indent: 1rem ;
+  --vg-toast-height: auto ;
+  --vg-toast-width: auto ;
+  --vg-toast-z-index: 1050 ;
+  --vg-toast-transition: all 0.3s ease-in-out ;
+  --vg-toast-padding: 8px 22px ;
+  --vg-toast-font-size: 1.125rem ;
+  --vg-toast-background-color: #fff ;
+  --vg-toast-color: #000000 ;
+  --vg-toast-border-width: 1px ;
+  --vg-toast-border-color: transparent ;
+  --vg-toast-border-style: solid ;
+  --vg-toast-border-radius: 20px ;
+  --vg-toast-box-shadow: 0 8px 14px 5px rgba(0, 0, 0, 0.2) ;
+  --vg-toast-header-font-weight: 500 ;
+  --vg-toast-header-font-size: 0.975rem ;
+  --vg-toast-body-font-size: 1rem ;
+  --vg-toast-body-font-weight: 400 ;
+  --vg-toast-danger-color: #58151c ;
+  --vg-toast-danger-border-color: #f1aeb5 ;
+  --vg-toast-danger-background-color: #f8d7da ;
+  --vg-toast-success-color: #0a3622 ;
+  --vg-toast-success-border-color: #a3cfbb ;
+  --vg-toast-success-background-color: #d1e7dd ;
+  --vg-toast-warning-color: #664d03 ;
+  --vg-toast-warning-border-color: #ffe69c ;
+  --vg-toast-warning-background-color: #fff3cd ;
+  --vg-toast-info-color: #055160 ;
+  --vg-toast-info-border-color: #9eeaf9 ;
+  --vg-toast-info-background-color: #cff4fc ;
+  --vg-toast-dark-color: #a7a7a7 ;
+  --vg-toast-dark-border-color: #0e0e0e ;
+  --vg-toast-dark-background-color: #070707 ;
+  position: fixed;
+  width: var(--vg-toast-width);
+  height: var(--vg-toast-height);
+  z-index: var(--vg-toast-z-index);
+  padding: var(--vg-toast-indent);
+  transition: var(--vg-toast-transition);
+}
+.vg-toast.bottom {
+  padding-top: 0;
+}
+.vg-toast.top {
+  padding-bottom: 0;
+}
+.vg-toast-danger {
+  --vg-toast-color: var(--vg-toast-danger-color);
+  --vg-toast-background-color: var(--vg-toast-danger-background-color);
+  --vg-toast-border-color: var(--vg-toast-danger-border-color);
+}
+.vg-toast-success {
+  --vg-toast-color: var(--vg-toast-success-color);
+  --vg-toast-background-color: var(--vg-toast-success-background-color);
+  --vg-toast-border-color: var(--vg-toast-success-border-color);
+}
+.vg-toast-warning {
+  --vg-toast-color: var(--vg-toast-warning-color);
+  --vg-toast-background-color: var(--vg-toast-warning-background-color);
+  --vg-toast-border-color: var(--vg-toast-warning-border-color);
+}
+.vg-toast-info {
+  --vg-toast-color: var(--vg-toast-info-color);
+  --vg-toast-background-color: var(--vg-toast-info-background-color);
+  --vg-toast-border-color: var(--vg-toast-info-border-color);
+}
+.vg-toast-dark {
+  --vg-toast-color: var(--vg-toast-dark-color);
+  --vg-toast-background-color: var(--vg-toast-dark-background-color);
+  --vg-toast-border-color: var(--vg-toast-dark-border-color);
+}
+.vg-toast:not(.show) {
+  display: none;
+}
+.vg-toast-wrapper {
+  background-color: var(--vg-toast-background-color);
+  padding: var(--vg-toast-padding);
+  color: var(--vg-toast-color);
+  border-width: var(--vg-toast-border-width);
+  border-style: var(--vg-toast-border-style);
+  border-color: var(--vg-toast-border-color);
+  border-radius: var(--vg-toast-border-radius);
+  box-shadow: var(--vg-toast-box-shadow);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.vg-toast-header {
+  font-size: var(--vg-toast-header-font-size);
+  font-weight: var(--vg-toast-header-font-weight);
+}
+.vg-toast-body {
+  font-size: var(--vg-toast-body-font-size);
+  font-weight: var(--vg-toast-body-font-weight);
+}
+.vg-toast-pointer {
+  cursor: pointer;
+}
+.vg-toast-button {
+  width: auto;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+.vg-toast-button .vg-btn-close {
+  position: relative;
+  left: unset;
+  top: unset;
+  right: unset;
+  bottom: unset;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  padding: 0;
+}
+.vg-toast-button .vg-btn-close svg {
+  width: 14px;
+  height: 14px;
+}
+.vg-toast-button .vg-btn-close svg polygon {
+  fill: var(--vg-toast-color);
+}
+
+/*# sourceMappingURL=vgtoast.css.map */

package/app/modules/vgspy/scss/vgtoast.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["vgtoast.scss","../../../utils/scss/mixin.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaA;ECNG;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EDaF;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC","file":"vgtoast.css"}

package/app/modules/vgspy/scss/vgtoast.scss

@@ -0,0 +1,125 @@
+/**
+*--------------------------------------------------------------------------
+* Модуль: VGToast
+* Автор: Vegas DEV
+* Лицензия: смотри LICENSE
+*--------------------------------------------------------------------------
+**/
+
+@import "../../../utils/scss/functions";
+@import "../../../utils/scss/mixin";
+@import "../../../utils/scss/variables";
+@import "variables";
+
+.vg-toast {
+	@include mix-vars('toast', $toast-map);
+	@include mix-vars('toast-danger', $toast-danger-map);
+	@include mix-vars('toast-success', $toast-success-map);
+	@include mix-vars('toast-warning', $toast-warning-map);
+	@include mix-vars('toast-info', $toast-info-map);
+	@include mix-vars('toast-dark', $toast-dark-map);
+	position: fixed;
+	width: var(--vg-toast-width);
+	height: var(--vg-toast-height);
+	z-index: var(--vg-toast-z-index);
+	padding: var(--vg-toast-indent);
+	transition: var(--vg-toast-transition);
+
+	&.bottom {
+		padding-top: 0;
+	}
+
+	&.top {
+		padding-bottom: 0;
+	}
+
+	&-danger {
+		--vg-toast-color: var(--vg-toast-danger-color);
+		--vg-toast-background-color: var(--vg-toast-danger-background-color);
+		--vg-toast-border-color: var(--vg-toast-danger-border-color);
+	}
+
+	&-success {
+		--vg-toast-color: var(--vg-toast-success-color);
+		--vg-toast-background-color: var(--vg-toast-success-background-color);
+		--vg-toast-border-color: var(--vg-toast-success-border-color);
+	}
+
+	&-warning {
+		--vg-toast-color: var(--vg-toast-warning-color);
+		--vg-toast-background-color: var(--vg-toast-warning-background-color);
+		--vg-toast-border-color: var(--vg-toast-warning-border-color);
+	}
+
+	&-info {
+		--vg-toast-color: var(--vg-toast-info-color);
+		--vg-toast-background-color: var(--vg-toast-info-background-color);
+		--vg-toast-border-color: var(--vg-toast-info-border-color);
+	}
+
+	&-dark {
+		--vg-toast-color: var(--vg-toast-dark-color);
+		--vg-toast-background-color: var(--vg-toast-dark-background-color);
+		--vg-toast-border-color: var(--vg-toast-dark-border-color);
+	}
+
+	&:not(.show) {
+		display: none;
+	}
+
+	&-wrapper {
+		background-color: var(--vg-toast-background-color);
+		padding: var(--vg-toast-padding);
+		color: var(--vg-toast-color);
+		border-width: var(--vg-toast-border-width);
+		border-style: var(--vg-toast-border-style);
+		border-color: var(--vg-toast-border-color);
+		border-radius: var(--vg-toast-border-radius);
+		box-shadow: var(--vg-toast-box-shadow);
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+
+	&-header {
+		font-size: var(--vg-toast-header-font-size);
+		font-weight: var(--vg-toast-header-font-weight);
+	}
+
+	&-body {
+		font-size: var(--vg-toast-body-font-size);
+		font-weight: var(--vg-toast-body-font-weight);
+	}
+
+	&-pointer {
+		cursor: pointer;
+	}
+
+	&-button {
+		width: auto;
+		height: 100%;
+		display: flex;
+		align-items: center;
+
+		.vg-btn-close {
+			position: relative;
+			left: unset;
+			top: unset;
+			right: unset;
+			bottom: unset;
+			height: 100%;
+			display: flex;
+			align-items: center;
+			padding: 0;
+
+			svg {
+				width: 14px;
+				height: 14px;
+
+				polygon {
+					fill: var(--vg-toast-color);
+				}
+			}
+		}
+	}
+}

package/app/utils/js/components/animation.js

@@ -14,10 +14,12 @@ class Animation {
 			in: 'animate__backInUp',
 			out: 'animate__backOutUp',
 			delay: 0,
+			duration: 800,
 		}, params);
 
 		this.classes = {
-			animated: 'animate__animated'
+			animated: 'animate__animated',
+			duration: 'animate__duration-' + this._params.duration
 		}
 
 		if (!this._params.enable) return;
@@ -28,6 +30,7 @@ class Animation {
 
 		if (!this._element.classList.contains(this.classes.animated)) {
 			this._element.classList.add(this.classes.animated);
+			this._element.classList.add(this.classes.duration);
 		}
 
 		this._triggers();

package/app/utils/js/components/templater.js

@@ -1,8 +1,6 @@
 import {execute, mergeDeepObject} from "../functions";
 
 const TEMPLATES = [
-	{type: 'collapse', template: ''},
-	{type: 'modal', template: '<div class="vg-modal"></div>'},
 	{type: 'pass-open', template: '<span data-vg-toggle="vgpass" class="[[classes]]" title="Показать / Скрыть" data-bs-toggle="tooltip"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"/></svg></span>'},
 	{type: 'pass-close', template: '<span data-vg-toggle="vgpass" class="[[classes]]" title="Показать / Скрыть" data-bs-toggle="tooltip"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm9.4 130.3C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5l-41.9-33zM192 256c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5z"/></svg></span>'},
 ]
@@ -19,8 +17,6 @@ class Templater {
 			insert: 'afterend',
 			classes: []
 		}, params);
-
-		this.templateBuild = null;
 	}
 
 	render(content, callback) {

package/app/utils/scss/animate.scss

@@ -4072,3 +4072,10 @@
   -webkit-animation-name: slideOutUp;
   animation-name: slideOutUp;
 }
+
+
+@for $i from 1 through 10 {
+  .animate__duration-#{$i * 100} {
+    --animate-duration: #{$i * 100}ms;
+  }
+}