vgapp 0.2.2 → 0.2.4

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

@@ -6,7 +6,6 @@ import EventHandler from "../../../utils/js/dom/event";
 import {Manipulator} from "../../../utils/js/dom/manipulator";
 import {execute, isDisabled, isRTL, mergeDeepObject, reflow} from "../../../utils/js/functions";
 import {dismissTrigger} from "../../module-fn";
-import Params from "../../../utils/js/components/params";
 
 /**
  * Constants
@@ -36,8 +35,10 @@ 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`;
-const EVENT_KEY_MOUSEDOWN_DISMISS   = `mousedown.dismiss${NAME_KEY}`
-const EVENT_KEY_CLICK_DISMISS           = `click.dismiss${NAME_KEY}`
+const EVENT_KEY_MOUSEDOWN_DISMISS   = `mousedown.dismiss${NAME_KEY}`;
+const EVENT_KEY_CLICK_DISMISS       = `click.dismiss${NAME_KEY}`;
+const EVENT_KEY_DOM_LOADED_DATA_API = `DOMContentLoaded.${NAME_KEY}.data.api`;
+const EVENT_KEY_POPSTATE_DATA_API   = `popstate.${NAME_KEY}.data.api`;
 
 class VGModal extends BaseModule {
 	constructor(element, params = {}) {
@@ -48,6 +49,7 @@ class VGModal extends BaseModule {
 			focus: true,
 			keyboard: true,
 			fields: [],
+			hash: true,
 			ajax: {
 				route: '',
 				target: '',
@@ -149,6 +151,14 @@ class VGModal extends BaseModule {
 		this._isShown = true;
 		this._isTransitioning = true;
 
+		if (this._params.hash) {
+			window.history.pushState(null, "vg-sidebar-open", "#" + this._element.id);
+
+			EventHandler.on(window, EVENT_KEY_POPSTATE_DATA_API, () => {
+				this.hide();
+			});
+		}
+
 		this._scrollBar.hide();
 
 		document.body.classList.add(CLASS_NAME_OPEN);
@@ -183,6 +193,10 @@ class VGModal extends BaseModule {
 
 		if (openedModals.length) return;
 
+		if (this._params.hash) {
+			history.pushState("", document.title, window.location.pathname + window.location.search);
+		}
+
 		Backdrop.hide(() => {
 			document.body.classList.remove(CLASS_NAME_OPEN);
 			this._resetAdjustments();
@@ -327,7 +341,6 @@ dismissTrigger(VGModal);
 /**
  * Data API implementation
  */
-
 EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
 	const target = Selectors.getElementFromSelector(this);
 
@@ -342,6 +355,21 @@ EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, functi
 
 	const data = VGModal.getOrCreateInstance(target);
 	data.toggle(this);
+});
+
+EventHandler.on(document, EVENT_KEY_DOM_LOADED_DATA_API, function () {
+	let targetHash = window.location.hash.slice(1);
+	if (targetHash) {
+		let target = Selectors.find('#' + targetHash);
+		if (target && target.classList.contains('vg-modal')) {
+			if (isDisabled(target)) {
+				return;
+			}
+
+			const data = VGModal.getOrCreateInstance(target)
+			data.toggle();
+		}
+	}
 })
 
 export default VGModal;