vgapp 0.2.3 → 0.2.5

package/app/modules/vgtoast/js/vgtoast.js

@@ -0,0 +1,378 @@
+import BaseModule from "../../base-module";
+import EventHandler from "../../../utils/js/dom/event";
+import {dismissTrigger} from "../../module-fn";
+import {execute, isDisabled, makeRandomString, mergeDeepObject} from "../../../utils/js/functions";
+import Selectors from "../../../utils/js/dom/selectors";
+
+/**
+ * Constants
+ */
+const NAME = 'toast';
+const NAME_KEY = 'vg.toast';
+const SELECTOR_DATA_TOGGLE= '[data-vg-toggle="toast"]';
+
+const CLASS_NAME_OPEN    = 'vg-toast-open';
+const CLASS_NAME_SHOW    = 'show';
+
+const EVENT_KEY_HIDE     = `${NAME_KEY}.hide`;
+const EVENT_KEY_HIDDEN   = `${NAME_KEY}.hidden`;
+const EVENT_KEY_SHOW     = `${NAME_KEY}.show`;
+const EVENT_KEY_SHOWN    = `${NAME_KEY}.shown`;
+const EVENT_KEY_LOADED   = `${NAME_KEY}.loaded`;
+
+const EVENT_KEY_KEYDOWN_DISMISS = `keydown.dismiss.${NAME_KEY}`;
+const EVENT_KEY_HIDE_PREVENTED  = `hidePrevented.${NAME_KEY}`;
+const EVENT_KEY_CLICK_DATA_API  = `click.${NAME_KEY}.data.api`;
+
+class VGToast extends BaseModule {
+	constructor(element, params = {}) {
+		super(element, params);
+
+		this._params = this._getParams(element, mergeDeepObject({
+			static: true,
+			placement: 'bottom center',
+			autohide: false,
+			delay: 3000,
+			enableClickToast: true,
+			enableButtonClose: true,
+			keyboard: true,
+			theme: 'dark',
+			stack: {
+				enable: true,
+				max: 5
+			},
+			animation: {
+				enable: true,
+				in: 'animate__fadeIn',
+				out: 'animate__fadeOut',
+				delay: 400,
+			},
+			ajax: {
+				route: '',
+				target: '',
+				method: 'get',
+				loader: false,
+			}
+		}, params));
+
+		this._params.animation.delay = !this._params.animation.enable ? 0 : this._params.animation.delay;
+		this._animation(this._element, VGToast.NAME_KEY, this._params.animation);
+		this._dismissElement();
+		this._addEventListeners();
+
+		this._timeout = null;
+	}
+
+	static get NAME() {
+		return NAME;
+	}
+
+	static get NAME_KEY() {
+		return NAME_KEY
+	}
+
+	static run(text, params = {}, callback) {
+		return VGToast.build(text, params, callback);
+	}
+
+	static build(text, params, callback) {
+		params = mergeDeepObject({
+			placement: 'bottom center',
+			static: false,
+			theme: 'dark',
+			stack: {
+				enable: false
+			}
+		}, params);
+
+		let target = document.createElement('div');
+		target.classList.add('vg-toast');
+		target.id = 'vg-toast-' + makeRandomString();
+
+		if ('theme' in params) {
+			target.classList.add('vg-toast-' + params.theme);
+		}
+
+		if ('placement' in params) {
+			params.placement.split(' ').forEach(val => target.classList.add(val));
+		}
+
+		let wrapper = document.createElement('div');
+		wrapper.classList.add('vg-toast-wrapper');
+
+		if ('type' in params) {
+			let icon = document.createElement('div');
+			icon.classList.add('vg-toast-icon');
+
+			wrapper.append(icon);
+		}
+
+		let content = document.createElement('div');
+		content.classList.add('vg-toast-content');
+
+		let body = document.createElement('div');
+		body.classList.add('vg-toast-body');
+
+		if (typeof text === 'string') {
+			body.innerHTML = text;
+			content.append(body);
+		} else if (Array.isArray(text)) {
+			if (text.length > 1) {
+				let header = document.createElement('div');
+				header.classList.add('vg-toast-header');
+				header.innerHTML = text[0];
+				content.append(header);
+
+				body.innerHTML = text[1];
+				content.append(body);
+			} else {
+				body.innerHTML = text[0];
+				content.append(body);
+			}
+		}
+
+		wrapper.append(content);
+
+		if ('enableButtonClose' in params && params.enableButtonClose) {
+			let button = document.createElement('div');
+			button.classList.add('vg-toast-button');
+			button.innerHTML = '<button class="vg-btn-close" data-vg-dismiss="toast"></button>';
+			wrapper.append(button);
+		}
+
+		target.append(wrapper);
+		document.body.append(target);
+
+		let instance =  VGToast.getOrCreateInstance(target, params);
+		execute(callback, [instance]);
+		instance.show();
+	}
+
+	toggle(relatedTarget) {
+		return !this._isShown() ? this.show(relatedTarget) : this.hide();
+	}
+
+	show(relatedTarget) {
+		if (isDisabled(this._element)) return;
+
+		this._clearTimeout();
+
+		this._params = this._getParams(relatedTarget || {}, this._params);
+		this._route(function (status, data) {
+			EventHandler.trigger(this._element, EVENT_KEY_LOADED, {stats: status, data: data});
+		});
+
+		const showEvent = EventHandler.trigger(this._element, EVENT_KEY_SHOW, { relatedTarget })
+		if (showEvent.defaultPrevented) return;
+
+		this._element.classList.add(CLASS_NAME_SHOW);
+		document.body.classList.add(CLASS_NAME_OPEN);
+
+		this._setPlacement();
+
+		const completeCallBack = () => {
+			this._element.classList.add(CLASS_NAME_SHOW);
+			EventHandler.trigger(this._element, EVENT_KEY_SHOWN, { relatedTarget });
+			this._scheduleHide();
+		}
+		this._queueCallback(completeCallBack, this._element, true, 0);
+	}
+
+	hide() {
+		if (isDisabled(this._element)) return;
+
+		const hideEvent = EventHandler.trigger(this._element, EVENT_KEY_HIDE);
+		if (hideEvent.defaultPrevented) return;
+
+		setTimeout(() => {
+			this._element?.classList.remove(CLASS_NAME_SHOW);
+
+			const completeCallback = () => {
+				document.body.classList.remove(CLASS_NAME_OPEN);
+				EventHandler.trigger(this._element, EVENT_KEY_HIDDEN);
+
+				if (this._params.stack.enable) {
+					this._setPlacement();
+				}
+
+				if (!this._params.static) {
+					this.dispose();
+				}
+			}
+			this._queueCallback(completeCallback, this._element, false, this._params.animation.delay);
+		}, this._params.animation.delay);
+	}
+
+	dispose() {
+		this._clearTimeout();
+		if (this._isShown()) {
+			this._element.classList.remove(CLASS_NAME_SHOW);
+		}
+
+		if (!this._params.static) {
+			this._element.remove();
+		}
+
+		super.dispose();
+	}
+
+	_scheduleHide() {
+		if (!this._params.autohide) {
+			return;
+		}
+
+		this._timeout = setTimeout(() => {
+			this.hide();
+		}, this._params.delay);
+	}
+
+	_isShown() {
+		return this._element.classList.contains(CLASS_NAME_SHOW);
+	}
+
+	_setPlacement() {
+		let elms = this._enableStack();
+
+		if (this._params.stack.enable) {
+			if (elms.length > this._params.stack.max) {
+				let elm = elms.shift();
+				VGToast.getInstance(elm.el).hide();
+			}
+		}
+
+		elms.forEach(elm => {
+			let isPlacementClassTop = elm.el.classList.contains('top'),
+				isPlacementClassBottom = elm.el.classList.contains('bottom'),
+				isPlacementClassLeft = elm.el.classList.contains('left'),
+				isPlacementClassRight = elm.el.classList.contains('right'),
+				isPlacementClassCenter = elm.el.classList.contains('center');
+
+			if (!isPlacementClassTop &&
+				!isPlacementClassBottom &&
+				!isPlacementClassCenter &&
+				!isPlacementClassRight &&
+				!isPlacementClassLeft
+			) {
+				isPlacementClassBottom = true;
+				isPlacementClassCenter = true;
+			}
+
+			if (isPlacementClassCenter) {
+				if (isPlacementClassLeft) {
+					elm.el.style.left = 0;
+					elm.el.style.bottom = 'calc(50% - ('+ elm.top +'px))';
+				} else if (isPlacementClassRight) {
+					elm.el.style.right = 0;
+					elm.el.style.bottom = 'calc(50% - ('+ elm.top +'px))';
+				} else if (isPlacementClassBottom) {
+					elm.el.style.left = 'calc(50% - ('+ elm.el.clientWidth +'px) / 2)';
+					elm.el.style.bottom = elm.top + 'px';
+				} else if (isPlacementClassTop) {
+					elm.el.style.left = 'calc(50% - ('+ elm.el.clientWidth +'px) / 2)';
+					elm.el.style.top = elm.top + 'px';
+				} else {
+					elm.el.style.left = 'calc(50% - ('+ elm.el.clientHeight +'px) / 2)';
+					elm.el.style.bottom = 'calc(50% - '+ elm.top +'px)';
+				}
+			} else {
+				if (isPlacementClassLeft) elm.el.style.left = 0;
+				if (isPlacementClassBottom) elm.el.style.bottom = elm.top + 'px';
+				if (isPlacementClassTop) elm.el.style.top = elm.top + 'px';
+				if (isPlacementClassRight) elm.el.style.right = 0;
+			}
+		});
+	}
+
+	_enableStack() {
+		let elmsShown = [... Selectors.findAll('.vg-toast.show')], top = 0;
+
+		if (!this._params.stack.enable) {
+			elmsShown.forEach(el => {
+				if (el !== this._element) {
+					VGToast.getInstance(el).hide()
+				}
+			})
+
+			return [{
+				el: this._element,
+				top: 0,
+			}];
+		}
+
+		elmsShown = elmsShown.map(el => {
+			return {
+				el: el,
+				top: el.clientHeight
+			}
+		});
+
+		return elmsShown.map(function (value, index) {
+			if (index === 0) {
+				return {
+					el: value.el,
+					top: 0
+				}
+			} else {
+				top += value.top
+
+				return {
+					el: value.el,
+					top: top
+				}
+			}
+		});
+	}
+
+	_clearTimeout() {
+		clearTimeout(this._timeout);
+		this._timeout = null;
+	}
+
+	_addEventListeners() {
+		EventHandler.on(document, EVENT_KEY_KEYDOWN_DISMISS, event => {
+			if (event.key !== 'Escape') return;
+
+			if (this._params.keyboard) {
+				this.hide();
+				return;
+			}
+
+			EventHandler.trigger(this._element, EVENT_KEY_HIDE_PREVENTED)
+		});
+
+		if (this._params.enableClickToast) {
+			this._element.classList.add('vg-toast-pointer');
+
+			EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, '#' + this._element.id, () => {
+				this.hide();
+			})
+		}
+	}
+}
+
+dismissTrigger(VGToast);
+
+/**
+ * Data API implementation
+ */
+EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
+	const target = Selectors.getElementFromSelector(this);
+
+	if (['A', 'AREA'].includes(this.tagName)) {
+		event.preventDefault()
+	}
+
+	if (isDisabled(this)) {
+		return
+	}
+
+	this.setAttribute('aria-expanded', true);
+	EventHandler.one(target, EVENT_KEY_HIDDEN, () => {
+		this.setAttribute('aria-expanded', false);
+	});
+
+	const data = VGToast.getOrCreateInstance(target);
+	data.toggle(this);
+});
+
+export default VGToast;

package/app/modules/vgtoast/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/vgtoast/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/vgtoast/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/vgtoast/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/dom/event.js

@@ -47,6 +47,7 @@ const nativeEvents = new Set([
 	'pointerup',
 	'pointerleave',
 	'pointercancel',
+	'popstate',
 	'gesturestart',
 	'gesturechange',
 	'gestureend',