vgapp 0.1.1 → 0.1.3

package/app/modules/vgmodal/js/vgmodal.js

@@ -1,12 +1,12 @@
 import BaseModule from "../../base-module";
 import ScrollBarHelper from "../../../utils/js/components/scrollbar";
 import Backdrop from "../../../utils/js/components/backdrop";
-import Overflow from "../../../utils/js/components/overflow";
 import Selectors from "../../../utils/js/dom/selectors";
 import EventHandler from "../../../utils/js/dom/event";
 import {Manipulator} from "../../../utils/js/dom/manipulator";
-import {execute, isDisabled, isRTL, isVisible, mergeDeepObject, reflow} from "../../../utils/js/functions";
+import {execute, isDisabled, isRTL, mergeDeepObject, reflow} from "../../../utils/js/functions";
 import {dismissTrigger} from "../../module-fn";
+import Params from "../../../utils/js/components/params";
 
 /**
  * Constants
@@ -54,10 +54,10 @@ class VGModal extends BaseModule {
 				loader: false
 			},
 			animation: {
-				name: ['animate__backInUp', 'animate__backOutUp'], // до / после не более двух элементов
-				duration: 1000, // ms
-				delay: 1000, // ms
-				repeat: 1
+				enable: false,
+				in: 'animate__rollIn',
+				out: 'animate__rollOut',
+				delay: 800,
 			},
 			classes: {
 				general: 'vg-modal',
@@ -67,9 +67,9 @@ class VGModal extends BaseModule {
 				title: 'vg-modal-title',
 				body: 'vg-modal-body',
 				footer: 'vg-modal-footer',
-				animated: 'animate__animated'
 			}
 		}, params));
+
 		this._button = null;
 		this._dialog = Selectors.find(SELECTOR_DIALOG, this._element);
 		this._isShown = false;
@@ -78,6 +78,9 @@ class VGModal extends BaseModule {
 
 		this._addEventListeners();
 		this._dismissElement();
+
+		this._params.animation.delay = !this._params.animation.enable ? 0 : this._params.animation.delay;
+		this._animation(this._element, VGModal.NAME_KEY, this._params.animation);
 	}
 
 	static get NAME() {
@@ -134,6 +137,7 @@ class VGModal extends BaseModule {
 		const _this = this;
 		if (isDisabled(_this._element)) return;
 
+		this._params = this._getParams(relatedTarget, this._params);
 		this._route();
 
 		const showEvent = EventHandler.trigger(this._element, EVENT_KEY_SHOW, { relatedTarget })
@@ -161,9 +165,10 @@ class VGModal extends BaseModule {
 		this._isShown = false;
 		this._isTransitioning = true;
 
-		this._element.classList.remove(CLASS_NAME_SHOW);
-
-		this._queueCallback(() => this._hideModal(), this._element, this._isAnimated());
+		setTimeout(() => {
+			this._element.classList.remove(CLASS_NAME_SHOW);
+			this._queueCallback(() => this._hideModal(), this._element, this._isAnimatedFade());
+		}, this._params.animation.delay);
 	}
 
 	_hideModal() {
@@ -177,6 +182,7 @@ class VGModal extends BaseModule {
 			document.body.classList.remove(CLASS_NAME_OPEN);
 			this._resetAdjustments();
 			this._scrollBar.reset();
+
 			EventHandler.trigger(this._element, EVENT_KEY_HIDDEN);
 		})
 	}
@@ -202,20 +208,16 @@ class VGModal extends BaseModule {
 		this._element.classList.add(CLASS_NAME_SHOW)
 
 		const transitionComplete = () => {
-			if (this._params.focus) {
-				// TODO сделать фокус
-			}
-
-			this._isTransitioning = false
+			this._isTransitioning = false;
 			EventHandler.trigger(this._element, EVENT_KEY_SHOWN, {
 				relatedTarget
-			})
+			});
 		}
 
-		this._queueCallback(transitionComplete, this._dialog, this._isAnimated())
+		this._queueCallback(transitionComplete, this._dialog, this._isAnimatedFade())
 	}
 
-	_isAnimated() {
+	_isAnimatedFade() {
 		return this._element.classList.contains(CLASS_NAME_FADE)
 	}
 
@@ -250,11 +252,11 @@ class VGModal extends BaseModule {
 			}
 
 			this._triggerBackdropTransition();
-		})
+		});
 
 		EventHandler.on(window, EVENT_KEY_RESIZE, () => {
 			if (this._isShown && !this._isTransitioning) this._adjustDialog();
-		})
+		});
 
 		EventHandler.on(this._element, EVENT_KEY_MOUSEDOWN_DISMISS, event => {
 			EventHandler.one(this._element, EVENT_KEY_CLICK_DISMISS, event2 => {
@@ -269,7 +271,7 @@ class VGModal extends BaseModule {
 					this.hide();
 				}
 			})
-		})
+		});
 	}
 
 	_triggerBackdropTransition() {
@@ -290,8 +292,6 @@ class VGModal extends BaseModule {
 				this._element.style.overflowY = initialOverflowY;
 			}, this._dialog);
 		}, this._dialog);
-
-		//this._element.focus();
 	}
 
 	_addFieldsInModal(relatedTarget) {
@@ -330,10 +330,6 @@ EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, functi
 
 	EventHandler.one(target, EVENT_KEY_SHOW, showEvent => {
 		if (showEvent.defaultPrevented) return;
-/*
-		EventHandler.one(target, EVENT_KEY_HIDDEN, () => {
-			if (isVisible(this)) this.focus();
-		});*/
 	});
 
 	const alreadyOpen = Selectors.find(OPEN_SELECTOR);
@@ -343,4 +339,4 @@ EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, functi
 	data.toggle(this);
 })
 
-export default VGModal;
+export default VGModal;