vgapp 0.1.0 → 0.1.2

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

@@ -1,11 +1,10 @@
 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";
 
 /**
@@ -54,10 +53,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 +66,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 +77,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() {
@@ -161,9 +163,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 +180,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 +206,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 +250,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 +269,7 @@ class VGModal extends BaseModule {
 					this.hide();
 				}
 			})
-		})
+		});
 	}
 
 	_triggerBackdropTransition() {
@@ -290,8 +290,6 @@ class VGModal extends BaseModule {
 				this._element.style.overflowY = initialOverflowY;
 			}, this._dialog);
 		}, this._dialog);
-
-		//this._element.focus();
 	}
 
 	_addFieldsInModal(relatedTarget) {
@@ -330,10 +328,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 +337,4 @@ EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, functi
 	data.toggle(this);
 })
 
-export default VGModal;
+export default VGModal;