vgapp 0.1.1 → 0.1.2

package/app/modules/base-module.js

@@ -4,6 +4,7 @@ import Data from "../utils/js/dom/data";
 import Params from "../utils/js/components/params";
 import EventHandler from "../utils/js/dom/event";
 import {Ajax, getSVG} from "./module-fn";
+import Animation from "../utils/js/components/animation";
 
 class BaseModule {
 	constructor(element) {
@@ -15,7 +16,7 @@ class BaseModule {
 		}
 
 		this._params = {};
-		Data.set(this._element, this.constructor.NAME_KEY, this)
+		Data.set(this._element, this.constructor.NAME_KEY, this);
 	}
 
 	_getParams(element, params) {
@@ -79,6 +80,10 @@ class BaseModule {
 		executeAfterTransition(callback, element, isAnimated, timeOutMs);
 	}
 
+	_animation(element, key, params = {}) {
+		new Animation(element, key, params);
+	}
+
 	static getInstance(element) {
 		return Data.get(Selectors.find(element), this.NAME_KEY)
 	}

package/app/modules/module-fn.js

@@ -34,17 +34,15 @@ const dismissTrigger = (module, method = 'hide') => {
 
 	EventHandler.on(document, clickEvent, `[data-vg-dismiss="${name}"]`, function (event) {
 		if (['A', 'AREA'].includes(this.tagName)) {
-			event.preventDefault()
+			event.preventDefault();
 		}
 
-		if (isDisabled(this)) {
-			return
-		}
+		if (isDisabled(this)) return;
 
-		const target = Selectors.getSelectorFromElement(this) || this.closest(`.vg-${name}`)
-		const instance = module.getOrCreateInstance(target)
+		const target = Selectors.getSelectorFromElement(this) || this.closest(`.vg-${name}`);
+		const instance = module.getOrCreateInstance(target);
 
-		instance[method]()
+		instance[method]();
 	})
 }
 

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

@@ -34,14 +34,19 @@ class VGDropdown extends BaseModule {
 			overflow: true,
 			keyboard: true,
 			placement: 'bottom',
-			animation: true,
 			timeoutAnimation: 350,
 			hover: false,
 			ajax: {
 				route: '',
 				target: '',
 				method: 'get'
-			}
+			},
+			animation: {
+				enable: false,
+				in: 'animate__flipInY',
+				out: 'animate__flipOutY',
+				delay: 800,
+			},
 		}
 
 		if ('offset' in params && Array.isArray(params.offset)) {
@@ -54,9 +59,8 @@ class VGDropdown extends BaseModule {
 		this._drop = Selectors.find('.' + TARGET_CONTAINER, this._parent);
 		this._isPlacement = false;
 
-		if (this._params.animation === false) {
-			this._params.timeoutAnimation = 10
-		}
+		this._params.animation.delay = !this._params.animation.enable ? 0 : this._params.animation.delay;
+		this._animation(this._drop, VGDropdown.NAME_KEY, this._params.animation);
 	}
 
 	static get NAME() {
@@ -137,11 +141,13 @@ class VGDropdown extends BaseModule {
 		this._element.classList.remove(CLASS_NAME_SHOW);
 		this._element.setAttribute('aria-expanded', 'false');
 
-		const completeCallback = () => {
-			this._drop.classList.remove(CLASS_NAME_SHOW);
-			EventHandler.trigger(this._element, EVENT_KEY_HIDDEN, relatedTarget);
-		}
-		this._queueCallback(completeCallback, this._parent, true, this._params.timeoutAnimation);
+		setTimeout(() => {
+			const completeCallback = () => {
+				this._drop.classList.remove(CLASS_NAME_SHOW);
+				EventHandler.trigger(this._element, EVENT_KEY_HIDDEN, relatedTarget);
+			}
+			this._queueCallback(completeCallback, this._parent, true, 10);
+		}, this._params.animation.delay);
 	}
 
 	// TODO class Placement isn't done

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

@@ -0,0 +1,47 @@
+@charset "UTF-8";
+/**
+*--------------------------------------------------------------------------
+* Модуль: VGDropdown
+* Автор: Vegas DEV
+* Лицензия: смотри LICENSE
+*--------------------------------------------------------------------------
+**/
+.vg-dropdown {
+  position: relative;
+  --vg-dropdown-bg-color: #fff ;
+  --vg-dropdown-color: #000000 ;
+  --vg-dropdown-box-shadow: 0 8px 14px 5px rgba(0, 0, 0, 0.2) ;
+  --vg-dropdown-border-width: 1px ;
+  --vg-dropdown-border-style: solid ;
+  --vg-dropdown-border-color: rgba(0, 0, 0, 0.2) ;
+  --vg-dropdown-border-radius: 0.375rem ;
+  --vg-dropdown-z-index: 1010 ;
+  --vg-dropdown-transition: all 0.5s ease-in-out ;
+  --vg-dropdown-min-width: 225px ;
+}
+.vg-dropdown-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);
+}
+.vg-dropdown-content:not(.show) {
+  display: none;
+}
+.vg-dropdown-content.fade {
+  opacity: 1;
+  transform: translateY(0);
+}
+.vg-dropdown-container {
+  background-color: var(--vg-dropdown-bg-color);
+  color: var(--vg-dropdown-color);
+  border-width: var(--vg-dropdown-border-width);
+  border-style: var(--vg-dropdown-border-style);
+  border-color: var(--vg-dropdown-border-color);
+  border-radius: var(--vg-dropdown-border-radius);
+  box-shadow: var(--vg-dropdown-box-shadow);
+}
+
+/*# sourceMappingURL=vgdropdown.css.map */

package/app/modules/vgdropdown/scss/vgdropdown.css.map

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

package/app/modules/vgformsender/js/vgformsender.js

@@ -282,7 +282,7 @@ class VGFormSender extends BaseModule {
 
 				self.toggle();
 			});
-		}, 300)
+		}, 800);
 	}
 
 	_alertCollapse(data, status) {

package/app/modules/vgformsender/scss/vgformsender.css

@@ -0,0 +1,13 @@
+@charset "UTF-8";
+/**
+*--------------------------------------------------------------------------
+* Модуль: VGFormSender
+* Автор: Vegas DEV
+* Лицензия: смотри LICENSE
+*--------------------------------------------------------------------------
+**/
+.vg-form-sender-modal .vg-modal-content {
+  padding: 0;
+}
+
+/*# sourceMappingURL=vgformsender.css.map */

package/app/modules/vgformsender/scss/vgformsender.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["vgformsender.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcE;EACC","file":"vgformsender.css"}

package/app/modules/vglawcookie/js/vglawcookie.js

@@ -0,0 +1,182 @@
+import BaseModule from "../../base-module";
+import {isDisabled, mergeDeepObject} from "../../../utils/js/functions";
+import EventHandler from "../../../utils/js/dom/event";
+import Selectors from "../../../utils/js/dom/selectors";
+import Cookies from "../../../utils/js/dom/cookie";
+import {dismissTrigger} from "../../module-fn";
+
+/**
+ * Constants
+ */
+const NAME     = 'lawcookie';
+const NAME_KEY = 'vg.lawcookie';
+
+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 SELECTOR_DATA_TOGGLE       = '[data-vg-toggle="lawcookie"]';
+const SELECTOR_DATA_TOGGLE_CLEAR = '[data-vg-toggle="lawcookie-clear"]';
+const EVENT_KEY_CLICK_DATA_API   = `click.${NAME_KEY}.data.api`;
+
+class VGLawCookie extends BaseModule {
+	static sParams = {};
+
+	constructor(element, params = {}) {
+		super(element, params);
+
+		this._params = this._getParams(element, mergeDeepObject({
+			storage: 'local', // cookie or local
+			delay: 500,
+			cookie: {
+				name: 'lawCookie',
+				value: 'yes',
+				attributes: {}
+			},
+			animation: {
+				enable: true,
+				in: 'animate__fadeInUp',
+				out: 'animate__fadeOutDown',
+				delay: 800,
+			},
+			ajax: {
+				route: '',
+				target: '',
+				method: 'get'
+			}
+		}, params));
+
+		VGLawCookie.sParams = this._params;
+
+		this._params.animation.delay = !this._params.animation.enable ? 0 : this._params.animation.delay;
+		this._animation(this._element, VGLawCookie.NAME_KEY, this._params.animation);
+	}
+
+	static get NAME() {
+		return NAME;
+	}
+
+	static get NAME_KEY() {
+		return NAME_KEY;
+	}
+
+	toggle() {
+		return !this._isShown() ? this.show() : this.hide();
+	}
+
+	_isShown() {
+		return this.storage().get();
+	}
+
+	show() {
+		if (isDisabled(this._element)) return;
+
+		const showEvent = EventHandler.trigger(this._element, EVENT_KEY_SHOW, {})
+		if (showEvent.defaultPrevented) return;
+
+		this._element.classList.add(CLASS_NAME_SHOW);
+
+		const completeCallBack = () => {
+			EventHandler.trigger(this._element, EVENT_KEY_SHOWN, {});
+		}
+		this._queueCallback(completeCallBack, this._element, true, this._params.delay)
+	}
+
+	hide() {
+		const hideEvent = EventHandler.trigger(this._element, EVENT_KEY_HIDE);
+		if (hideEvent.defaultPrevented) return;
+
+		setTimeout(() => {
+			this._element.classList.remove(CLASS_NAME_SHOW);
+
+			const completeCallback = () => EventHandler.trigger(this._element, EVENT_KEY_HIDDEN);
+			this._queueCallback(completeCallback, this._element, true);
+		}, this._params.animation.delay);
+	}
+
+	storage() {
+		this._storage = {
+			isCookie: this._params.storage === 'cookie',
+			storage: this._params.storage === 'cookie' ? Cookies : localStorage,
+			name: this._params.cookie.name,
+			value: this._params.cookie.value,
+			attributes: this._params.cookie.attributes,
+		}
+
+		return this;
+	}
+
+	get() {
+		if (this._storage.isCookie) {
+			return this._storage.storage.get(this._storage.name);
+		} else {
+			return this._storage.storage.getItem(this._storage.name);
+		}
+	}
+
+	set() {
+		if (this._storage.isCookie) {
+			this._storage.storage.set(this._storage.name, this._storage.value, this._storage.attributes);
+		} else {
+			this._storage.storage.setItem(this._storage.name, this._storage.value);
+		}
+	}
+
+	dispose() {
+		super.dispose();
+	}
+
+	static reset() {
+		Cookies.remove(VGLawCookie.sParams.cookie.name);
+		localStorage.clear();
+		location.reload();
+	}
+
+	/**
+	 * Инициализация
+	 * @param element
+	 * @param params
+	 */
+	static init(element, params = {}) {
+		const instance = VGLawCookie.getOrCreateInstance(element, params);
+		instance.toggle();
+	}
+}
+
+dismissTrigger(VGLawCookie);
+
+EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
+	if (['A', 'AREA'].includes(this.tagName)) {
+		event.preventDefault()
+	}
+
+	if (isDisabled(this)) return;
+
+	const element = Selectors.find('#vg-lawcookie');
+	if (!element) return;
+
+	const instance = VGLawCookie.getOrCreateInstance(element);
+	instance.storage().set();
+	instance.hide();
+});
+
+EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, SELECTOR_DATA_TOGGLE_CLEAR, function (event) {
+	if (['A', 'AREA'].includes(this.tagName)) {
+		event.preventDefault()
+	}
+
+	if (isDisabled(this)) return;
+
+	const element = Selectors.find('#vg-lawcookie');
+	if (!element) return;
+
+	const instance = VGLawCookie.getOrCreateInstance(element);
+	instance.dispose();
+
+	location.reload();
+});
+
+export default VGLawCookie;

package/app/modules/vglawcookie/scss/_variables.scss

@@ -0,0 +1,14 @@
+$lawcookie-map: (
+		background-color:          $bg-color,
+		color:                     $color,
+		box-shadow:                $box-shadow,
+		padding:                   1rem,
+		border:                    1px solid #{$border-color},
+		border-radius:             $border-radius,
+		z-index:                   $lawcookie-index,
+		transition:                $transition-base,
+		max-width:                 50%,
+		padding-outer:             1rem,
+		font-size:                 14px,
+		title-font-size:           16px
+);

package/app/modules/vglawcookie/scss/vglawcookie.css

@@ -0,0 +1,87 @@
+@charset "UTF-8";
+/**
+*--------------------------------------------------------------------------
+* Модуль: VGLawCookie
+* Автор: Vegas DEV
+* Лицензия: смотри LICENSE
+*--------------------------------------------------------------------------
+**/
+.vg-lawcookie {
+  --vg-lawcookie-background-color: #fff ;
+  --vg-lawcookie-color: #000000 ;
+  --vg-lawcookie-box-shadow: 0 8px 14px 5px rgba(0, 0, 0, 0.2) ;
+  --vg-lawcookie-padding: 1rem ;
+  --vg-lawcookie-border: 1px solid rgba(0, 0, 0, 0.2) ;
+  --vg-lawcookie-border-radius: 0.375rem ;
+  --vg-lawcookie-z-index: 2000 ;
+  --vg-lawcookie-transition: all 0.5s ease-in-out ;
+  --vg-lawcookie-max-width: 50% ;
+  --vg-lawcookie-padding-outer: 1rem ;
+  --vg-lawcookie-font-size: 14px ;
+  --vg-lawcookie-title-font-size: 16px ;
+  position: fixed;
+  display: none;
+  padding: var(--vg-lawcookie-padding-outer);
+  z-index: var(--vg-lawcookie-z-index);
+  max-width: var(--vg-lawcookie-max-width);
+}
+@media screen and (max-width: 600px) {
+  .vg-lawcookie {
+    width: 100%;
+    --vg-lawcookie-max-width: 100%;
+  }
+}
+.vg-lawcookie.show {
+  display: block;
+}
+.vg-lawcookie.left {
+  left: 0;
+}
+.vg-lawcookie.right {
+  right: 0;
+}
+.vg-lawcookie.top {
+  top: 0;
+}
+.vg-lawcookie.bottom {
+  bottom: 0;
+}
+.vg-lawcookie.center {
+  top: 50%;
+  left: 50%;
+}
+.vg-lawcookie.center.left {
+  left: 0;
+}
+.vg-lawcookie.center.top {
+  top: 0;
+  left: 50%;
+}
+.vg-lawcookie.center.bottom {
+  top: auto;
+  bottom: 0;
+}
+.vg-lawcookie.center.right {
+  right: 0;
+  left: auto;
+}
+.vg-lawcookie.fullwidth {
+  max-width: 100%;
+  width: 100%;
+  --vg-lawcookie-padding-outer: 0;
+  --vg-lawcookie-border-radius: 0;
+  --vg-lawcookie-box-shadow: none;
+}
+.vg-lawcookie--content {
+  background-color: var(--vg-lawcookie-background-color);
+  border-radius: var(--vg-lawcookie-border-radius);
+  padding: var(--vg-lawcookie-padding);
+  color: var(--vg-lawcookie-color);
+  box-shadow: var(--vg-lawcookie-box-shadow);
+  font-size: var(--vg-lawcookie-font-size);
+}
+.vg-lawcookie--content .title {
+  font-size: var(--vg-lawcookie-title-font-size);
+}
+
+/*# sourceMappingURL=vglawcookie.css.map */

package/app/modules/vglawcookie/scss/vglawcookie.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["vglawcookie.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;EDQF;EACA;EACA;EACA;EACA;;AAEA;EARD;IASE;IACA;;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;EACA;;AAEA;EACC;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC","file":"vglawcookie.css"}

package/app/modules/vglawcookie/scss/vglawcookie.scss

@@ -0,0 +1,91 @@
+/**
+*--------------------------------------------------------------------------
+* Модуль: VGLawCookie
+* Автор: Vegas DEV
+* Лицензия: смотри LICENSE
+*--------------------------------------------------------------------------
+**/
+
+@import "../../../utils/scss/functions";
+@import "../../../utils/scss/mixin";
+@import "../../../utils/scss/variables";
+@import "variables";
+
+.vg-lawcookie {
+	@include mix-vars('lawcookie', $lawcookie-map);
+	position: fixed;
+	display: none;
+	padding: var(--vg-lawcookie-padding-outer);
+	z-index: var(--vg-lawcookie-z-index);
+	max-width: var(--vg-lawcookie-max-width);
+
+	@media screen and (max-width: 600px){
+		width: 100%;
+		--vg-lawcookie-max-width: 100%;
+	}
+
+	&.show {
+		display: block;
+	}
+
+	&.left {
+		left: 0;
+	}
+
+	&.right {
+		right: 0;
+	}
+
+	&.top {
+		top: 0;
+	}
+
+	&.bottom {
+		bottom: 0;
+	}
+
+	&.center {
+		top: 50%;
+		left: 50%;
+
+		&.left {
+			left: 0;
+		}
+
+		&.top {
+			top: 0;
+			left: 50%;
+		}
+
+		&.bottom {
+			top: auto;
+			bottom: 0;
+		}
+
+		&.right {
+			right: 0;
+			left: auto;
+		}
+	}
+
+	&.fullwidth {
+		max-width: 100%;
+		width: 100%;
+		--vg-lawcookie-padding-outer: 0;
+		--vg-lawcookie-border-radius: 0;
+		--vg-lawcookie-box-shadow: none;
+	}
+
+	&--content {
+		background-color: var(--vg-lawcookie-background-color);
+		border-radius: var(--vg-lawcookie-border-radius);
+		padding: var(--vg-lawcookie-padding);
+		color: var(--vg-lawcookie-color);
+		box-shadow: var(--vg-lawcookie-box-shadow);
+		font-size: var(--vg-lawcookie-font-size);
+
+		.title {
+			font-size: var(--vg-lawcookie-title-font-size);
+		}
+	}
+}