vgapp 1.2.2 → 1.2.4

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

@@ -4,10 +4,10 @@ import Backdrop from "../../../utils/js/components/backdrop";
 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, mergeDeepObject, reflow} from "../../../utils/js/functions";
-import {dismissTrigger} from "../../module-fn";
-import VGModalDrag from "./vgmodal.drag";
-import VGModalResize from "./vgmodal.resize";
+import {execute, isDisabled, isRTL, mergeDeepObject, reflow} from "../../../utils/js/functions";
+import {dismissTrigger} from "../../module-fn";
+import VGModalDrag from "./vgmodal.drag";
+import VGModalResize from "./vgmodal.resize";
 
 /**
  * Constants
@@ -17,15 +17,15 @@ const NAME_KEY = 'vg.modal';
 
 const ESCAPE_KEY = 'Escape';
 
-const OPEN_SELECTOR = '.vg-modal.show';
+const OPEN_SELECTOR = '.vg-modal.show:not([data-vg-persistent="true"])';
 const SELECTOR_DIALOG = '.vg-modal-dialog';
 const SELECTOR_MODAL_BODY = '.vg-modal-body';
 const SELECTOR_DATA_TOGGLE = '[data-vg-toggle="modal"]';
 
-const CLASS_NAME_OPEN = 'vg-modal-open';
-const CLASS_NAME_SHOW = 'show';
-const CLASS_NAME_FADE = 'fade';
-const CLASS_NAME_STATIC = 'vg-modal-static';
+const CLASS_NAME_OPEN = 'vg-modal-open';
+const CLASS_NAME_SHOW = 'show';
+const CLASS_NAME_FADE = 'fade';
+const CLASS_NAME_STATIC = 'vg-modal-static';
 
 const EVENT_KEY_HIDE   = `${NAME_KEY}.hide`;
 const EVENT_KEY_HIDDEN = `${NAME_KEY}.hidden`;
@@ -54,29 +54,34 @@ class VGModal extends BaseModule {
 				resizeEdgeSize: 8,
 				debug: false,
 			},
-			resize: {
-				enable: false,
-				edgeSize: 8,
-				minWidth: 300,
-				minHeight: 160,
-				debug: false,
-			},
-		};
-
-		this._params = this._getParams(element, mergeDeepObject({
-			backdrop: true,
-			focus: true,
-			keyboard: true,
+			resize: {
+				enable: false,
+				edgeSize: 8,
+				minWidth: 300,
+				minHeight: 160,
+				debug: false,
+			},
+		};
+
+		this._params = this._getParams(element, mergeDeepObject({
+			backdrop: true,
+			persistent: false,
+			focus: true,
+			keyboard: true,
 			fields: [],
 			hash: false,
 			centered: false,
 			dismiss: true,
-			resize: {
-				enable: false,
-				edgeSize: 8,
-				minWidth: 300,
-				minHeight: 160,
-				debug: false,
+			resize: {
+				enable: false,
+				edgeSize: 8,
+				minWidth: 300,
+				minHeight: 160,
+				debug: false,
+			},
+			state: {
+				enable: true,
+				key: '',
 			},
 			drag: {
 				enable: false,
@@ -117,21 +122,27 @@ class VGModal extends BaseModule {
 
 		this._button = null;
 		this._dialog = Selectors.find(SELECTOR_DIALOG, this._element);
+		this._content = Selectors.find('.vg-modal-content', this._dialog);
 		this._isShown = false;
-		this._isTransitioning = false;
-		this._scrollBar = new ScrollBarHelper();
-		this._dragHandler = new VGModalDrag(this._element, this._dialog);
-		this._resizeHandler = new VGModalResize(this._element, this._dialog);
-		this._interactionConfig = this._resolveInteractionConfig();
-		this._dragHandler.setOptions(this._interactionConfig.drag);
-		this._resizeHandler.setOptions(this._interactionConfig.resize);
+		this._isTransitioning = false;
+		this._scrollBar = new ScrollBarHelper();
+		this._dragHandler = new VGModalDrag(this._element, this._dialog);
+		this._resizeHandler = new VGModalResize(this._element, this._dialog);
+		this._interactionConfig = this._resolveInteractionConfig();
+		this._dragHandler.setOptions(this._interactionConfig.drag);
+		this._resizeHandler.setOptions(this._interactionConfig.resize);
 
 		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);
-	}
+		this._params.animation.delay = !this._params.animation.enable ? 0 : this._params.animation.delay;
+		this._animation(this._element, VGModal.NAME_KEY, this._params.animation);
+		if (this._params.persistent) {
+			this._element.setAttribute('data-vg-persistent', 'true');
+		} else {
+			this._element.removeAttribute('data-vg-persistent');
+		}
+	}
 
 	static get NAME() {
 		return NAME;
@@ -227,14 +238,28 @@ class VGModal extends BaseModule {
 			});
 		}
 
-		this._scrollBar.hide();
-
-		document.body.classList.add(CLASS_NAME_OPEN);
+		this._scrollBar.hide();
+
+		document.body.classList.add(CLASS_NAME_OPEN);
 
 		this._addFieldsInModal(relatedTarget);
 		this._adjustDialog();
 
-		Backdrop.show(() => this._showElement(relatedTarget));
+		if (this._params.backdrop) {
+			Backdrop.show(() => {
+				const backdrop = Selectors.find('.vg-backdrop');
+				if (backdrop) {
+					EventHandler.one(backdrop, 'mousedown.vg.backdrop', () => {
+						this.hide();
+					});
+				}
+
+				this._showElement(relatedTarget);
+			});
+			return;
+		}
+
+		this._showElement(relatedTarget);
 	}
 
 	hide(openedModals = [], isLeaveBackDrop = false) {
@@ -243,37 +268,50 @@ class VGModal extends BaseModule {
 		const hideEvent = EventHandler.trigger(this._element, EVENT_KEY_HIDE);
 		if (hideEvent.defaultPrevented) return;
 
-		this._isShown = false;
-		this._isTransitioning = true;
-
-		document.body.classList.remove(CLASS_NAME_OPEN);
-
-		setTimeout(() => {
-			this._element.classList.remove(CLASS_NAME_SHOW);
-			this._queueCallback(() => this._hideModal(openedModals, isLeaveBackDrop), this._element, this._isAnimatedFade());
+		this._isShown = false;
+		this._isTransitioning = true;
+
+		setTimeout(() => {
+			this._element.classList.remove(CLASS_NAME_SHOW);
+			this._queueCallback(() => this._hideModal(openedModals, isLeaveBackDrop), this._element, this._isAnimatedFade());
 		}, this._params.animation.delay);
 	}
 
-	_hideModal(openedModals, isLeaveBackDrop) {
-		if (!isLeaveBackDrop) {
-			this._disableInteractionHandlers();
-			this._element.style.display = 'none';
-			this._element.removeAttribute('aria-modal');
-			this._element.removeAttribute('role');
-			this._isTransitioning = false;
-
-			if (openedModals.length) return;
-
-			if (this._params.hash) {
-				history.pushState("", document.title, window.location.pathname + window.location.search);
-			}
-
-			Backdrop.hide(() => {
-				this._resetAdjustments();
-				this._scrollBar.reset();
-
-				EventHandler.trigger(this._element, EVENT_KEY_HIDDEN);
-			})
+	_hideModal(openedModals, isLeaveBackDrop) {
+		if (!isLeaveBackDrop) {
+			this._saveInteractionState();
+			this._disableInteractionHandlers();
+			this._element.style.display = 'none';
+			this._element.removeAttribute('aria-modal');
+			this._element.removeAttribute('role');
+			this._isTransitioning = false;
+
+			const remainingOpenModals = Selectors.findAll(OPEN_SELECTOR).filter(modal => modal !== this._element);
+			if (remainingOpenModals.length || openedModals.length) {
+				EventHandler.trigger(this._element, EVENT_KEY_HIDDEN);
+				return;
+			}
+
+			document.body.classList.remove(CLASS_NAME_OPEN);
+
+			if (this._params.hash) {
+				history.pushState("", document.title, window.location.pathname + window.location.search);
+			}
+
+			if (!this._params.backdrop) {
+				this._resetAdjustments();
+				this._scrollBar.reset();
+
+				EventHandler.trigger(this._element, EVENT_KEY_HIDDEN);
+				return;
+			}
+
+			Backdrop.hide(() => {
+				this._resetAdjustments();
+				this._scrollBar.reset();
+
+				EventHandler.trigger(this._element, EVENT_KEY_HIDDEN);
+			})
 		}
 	}
 
@@ -297,27 +335,32 @@ class VGModal extends BaseModule {
 		this._element.classList.add(CLASS_NAME_SHOW);
 		this._toggleInteractionHandlers();
 
-		const transitionComplete = () => {
-			this._isTransitioning = false;
-			EventHandler.trigger(this._element, EVENT_KEY_SHOWN, {
-				relatedTarget
-			});
-			this._syncInteractiveBounds();
-
-			this._params = this._getParams(relatedTarget, this._params);
-			this._route((status, data) => {
-				EventHandler.trigger(this._element, EVENT_KEY_LOADED, {stats: status, data: data});
-				this._syncInteractiveBounds();
-			});
-		}
+		const transitionComplete = () => {
+			this._isTransitioning = false;
+			EventHandler.trigger(this._element, EVENT_KEY_SHOWN, {
+				relatedTarget
+			});
+			this._syncInteractiveBounds();
+
+			this._params = this._getParams(relatedTarget, this._params);
+			this._restoreInteractionState();
+			this._syncInteractiveBounds();
+			this._route((status, data) => {
+				EventHandler.trigger(this._element, EVENT_KEY_LOADED, {stats: status, data: data, relatedTarget: relatedTarget});
+				this._syncInteractiveBounds();
+			});
+		}
 
 		this._queueCallback(transitionComplete, this._dialog, this._isAnimatedFade())
 	}
 
-	_toggleInteractionHandlers() {
-		this._interactionConfig = this._resolveInteractionConfig();
-		this._dragHandler.setOptions(this._interactionConfig.drag);
-		this._resizeHandler.setOptions(this._interactionConfig.resize);
+	_bindInteractionHandlers() {
+		this._dragHandler.setOptions(this._interactionConfig.drag);
+		this._resizeHandler.setOptions(this._interactionConfig.resize);
+	}
+	_toggleInteractionHandlers() {
+		this._interactionConfig = this._resolveInteractionConfig();
+		this._bindInteractionHandlers();
 
 		if (this._interactionConfig.drag.enable) {
 			this._dragHandler.enable();
@@ -325,45 +368,68 @@ class VGModal extends BaseModule {
 			this._dragHandler.disable();
 		}
 
-		if (this._interactionConfig.resize.enable) {
-			this._resizeHandler.enable();
-		} else {
-			this._resizeHandler.disable();
-		}
-	}
-
-	_disableInteractionHandlers() {
-		this._dragHandler.disable();
-		this._resizeHandler.disable();
-	}
+		if (this._interactionConfig.resize.enable) {
+			this._resizeHandler.enable();
+		} else {
+			this._resizeHandler.disable();
+		}
+	}
+
+	_disableInteractionHandlers() {
+		this._dragHandler.disable();
+		this._resizeHandler.disable();
+	}
 
 	_syncInteractiveBounds() {
 		if (this._interactionConfig.resize.enable) {
 			this._resizeHandler.syncToViewport();
 		}
 
-		if (this._interactionConfig.drag.enable) {
-			this._dragHandler.syncPosition();
+		if (this._interactionConfig.drag.enable) {
+			this._dragHandler.syncPosition();
+		}
+	}
+
+	_resolveInteractionConfig() {
+		return {
+			drag: this._normalizeInteractionParams(this._params.drag, this._interactionDefaults.drag),
+			resize: this._normalizeInteractionParams(this._params.resize, this._interactionDefaults.resize),
+		};
+	}
+
+	_normalizeInteractionParams(paramsValue, defaults) {
+		if (typeof paramsValue === 'boolean') {
+			return {...defaults, enable: paramsValue};
 		}
+
+		if (paramsValue && typeof paramsValue === 'object') {
+			const hasEnable = Object.prototype.hasOwnProperty.call(paramsValue, 'enable');
+			return {
+				...defaults,
+				...paramsValue,
+				enable: hasEnable ? Boolean(paramsValue.enable) : true,
+			};
+		}
+
+		return {...defaults};
 	}
 
-	_resolveInteractionConfig() {
-		return {
-			drag: this._normalizeInteractionParams(this._params.drag, this._interactionDefaults.drag),
-			resize: this._normalizeInteractionParams(this._params.resize, this._interactionDefaults.resize),
-		};
+	_getStateConfig() {
+		return this._normalizeStateParams(this._params.state);
 	}
 
-	_normalizeInteractionParams(paramsValue, defaults) {
+	_normalizeStateParams(paramsValue, defaults = { enable: true, key: '' }) {
 		if (typeof paramsValue === 'boolean') {
 			return {...defaults, enable: paramsValue};
 		}
 
 		if (paramsValue && typeof paramsValue === 'object') {
 			const hasEnable = Object.prototype.hasOwnProperty.call(paramsValue, 'enable');
+			const key = typeof paramsValue.key === 'string' ? paramsValue.key.trim() : '';
 			return {
 				...defaults,
 				...paramsValue,
+				key,
 				enable: hasEnable ? Boolean(paramsValue.enable) : true,
 			};
 		}
@@ -371,6 +437,95 @@ class VGModal extends BaseModule {
 		return {...defaults};
 	}
 
+	_getStateStorageKey(stateConfig = this._getStateConfig()) {
+		if (!stateConfig.enable) return '';
+
+		if (typeof stateConfig.key === 'string' && stateConfig.key.trim()) {
+			return stateConfig.key.trim();
+		}
+
+		if (!this._element || !this._element.id) return '';
+
+		return `vg.modal.state:${window.location.pathname}:${this._element.id}`;
+	}
+
+	_captureInteractionState() {
+		const dialogStyle = this._dialog ? this._dialog.style : null;
+		const contentElement = this._content || Selectors.find('.vg-modal-content', this._dialog);
+		const contentStyle = contentElement ? contentElement.style : null;
+
+		return {
+			dialog: dialogStyle ? {
+				position: dialogStyle.position,
+				margin: dialogStyle.margin,
+				left: dialogStyle.left,
+				top: dialogStyle.top,
+				width: dialogStyle.width,
+				height: dialogStyle.height,
+				transform: dialogStyle.transform,
+				maxWidth: dialogStyle.maxWidth,
+				maxHeight: dialogStyle.maxHeight,
+				minHeight: dialogStyle.minHeight,
+			overflow: dialogStyle.overflow,
+			pointerEvents: dialogStyle.pointerEvents,
+			transition: dialogStyle.transition,
+			willChange: dialogStyle.willChange,
+		} : {},
+			content: contentStyle ? {
+				height: contentStyle.height,
+				maxHeight: contentStyle.maxHeight,
+				overflow: contentStyle.overflow,
+			} : {},
+		};
+	}
+
+	_applyInteractionState(state) {
+		if (!state || typeof state !== 'object') return;
+
+		const dialogState = state.dialog && typeof state.dialog === 'object' ? state.dialog : {};
+		const contentState = state.content && typeof state.content === 'object' ? state.content : {};
+		if (this._dialog) {
+			Object.keys(dialogState).forEach(propertyName => {
+				this._dialog.style[propertyName] = dialogState[propertyName] || '';
+			});
+		}
+
+		const contentElement = this._content || Selectors.find('.vg-modal-content', this._dialog);
+		if (contentElement) {
+			Object.keys(contentState).forEach(propertyName => {
+				contentElement.style[propertyName] = contentState[propertyName] || '';
+			});
+		}
+	}
+
+	_saveInteractionState() {
+		const stateConfig = this._getStateConfig();
+		const storageKey = this._getStateStorageKey(stateConfig);
+		if (!stateConfig.enable || !storageKey || typeof window === 'undefined' || !window.localStorage) return;
+
+		try {
+			window.localStorage.setItem(storageKey, JSON.stringify(this._captureInteractionState()));
+		} catch (error) {
+		}
+	}
+
+	_restoreInteractionState() {
+		const stateConfig = this._getStateConfig();
+		const storageKey = this._getStateStorageKey(stateConfig);
+		if (!stateConfig.enable || !storageKey || typeof window === 'undefined' || !window.localStorage) return false;
+
+		try {
+			const rawState = window.localStorage.getItem(storageKey);
+			if (!rawState) return false;
+
+			const parsedState = JSON.parse(rawState);
+			this._applyInteractionState(parsedState);
+			return true;
+		} catch (error) {
+			return false;
+		}
+	}
+
 	_isAnimatedFade() {
 		return this._element.classList.contains(CLASS_NAME_FADE)
 	}
@@ -480,21 +635,26 @@ dismissTrigger(VGModal);
 /**
  * Data API implementation
  */
-EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
-	const target = Selectors.getElementFromSelector(this);
+	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();
 
-	EventHandler.one(target, EVENT_KEY_SHOW, showEvent => {
-		if (showEvent.defaultPrevented) return;
-	});
-
-	const alreadyOpen = Selectors.find(OPEN_SELECTOR);
-	if (alreadyOpen) VGModal.getInstance(alreadyOpen).hide([alreadyOpen]);
-
-	const data = VGModal.getOrCreateInstance(target);
-	data.toggle(this);
-});
+		EventHandler.one(target, EVENT_KEY_SHOW, showEvent => {
+			if (showEvent.defaultPrevented) return;
+		});
+
+		const alreadyOpen = Selectors.find(OPEN_SELECTOR);
+		if (alreadyOpen) {
+			const alreadyOpenInstance = VGModal.getInstance(alreadyOpen);
+			if (alreadyOpenInstance && !alreadyOpenInstance._params.persistent) {
+				alreadyOpenInstance.hide([alreadyOpen]);
+			}
+		}
+
+		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);

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

@@ -1,10 +1,10 @@
 const DEFAULT_OPTIONS = {
 	enable: false,
-	minWidth: 300,
-	minHeight: 160,
-	edgeSize: 8,
-	debug: false,
-};
+	minWidth: 300,
+	minHeight: 160,
+	edgeSize: 8,
+	debug: false,
+};
 
 const DIRECTION_TO_CURSOR = {
 	n: 'ns-resize',
@@ -127,6 +127,7 @@ class VGModalResize {
 		this._dialogElement.style.left = `${left}px`;
 		this._dialogElement.style.top = `${top}px`;
 		this._updateDebugValues();
+
 	}
 
 	_onPointerDown(event) {
@@ -216,6 +217,7 @@ class VGModalResize {
 		this._dialogElement.style.width = `${width}px`;
 		this._dialogElement.style.height = `${height}px`;
 		this._updateDebugValues();
+
 	}
 
 	_onPointerUp(event) {
@@ -226,13 +228,13 @@ class VGModalResize {
 		document.removeEventListener('pointercancel', this._onPointerUp);
 		this._cancelResizeFrame();
 		this._applyResizePosition();
-		this._pointerId = null;
-		this._direction = '';
-		delete this._modalElement.dataset.vgModalResizing;
-		this._unlockEmbeddedFrames();
-		this._setDebugVisibility(this._options.debug);
-		this._updateDebugValues();
-	}
+		this._pointerId = null;
+		this._direction = '';
+		delete this._modalElement.dataset.vgModalResizing;
+		this._unlockEmbeddedFrames();
+		this._setDebugVisibility(this._options.debug);
+		this._updateDebugValues();
+	}
 
 	_onPointerLeave() {
 		if (this._pointerId !== null) return;
@@ -334,23 +336,23 @@ class VGModalResize {
 		}
 	}
 
-	_restoreResizeStyles() {
-		this._dialogElement.style.maxWidth = this._previousMaxWidth;
-		this._dialogElement.style.maxHeight = this._previousMaxHeight;
-		this._dialogElement.style.pointerEvents = this._previousPointerEvents;
+	_restoreResizeStyles() {
+		this._dialogElement.style.maxWidth = this._previousMaxWidth;
+		this._dialogElement.style.maxHeight = this._previousMaxHeight;
+		this._dialogElement.style.pointerEvents = this._previousPointerEvents;
 		this._dialogElement.style.minHeight = this._previousMinHeight;
 		this._dialogElement.style.overflow = this._previousOverflow;
 		this._dialogElement.style.transition = this._previousTransition;
 		this._dialogElement.style.willChange = this._previousWillChange;
 
-		if (this._contentElement) {
-			this._contentElement.style.height = this._previousContentHeight;
-			this._contentElement.style.maxHeight = this._previousContentMaxHeight;
-			this._contentElement.style.overflow = this._previousContentOverflow;
-		}
-	}
-
-	_normalizeOptions(options, base = DEFAULT_OPTIONS) {
+		if (this._contentElement) {
+			this._contentElement.style.height = this._previousContentHeight;
+			this._contentElement.style.maxHeight = this._previousContentMaxHeight;
+			this._contentElement.style.overflow = this._previousContentOverflow;
+		}
+	}
+
+	_normalizeOptions(options, base = DEFAULT_OPTIONS) {
 		const merged = {...base, ...options};
 		const minWidth = Number(merged.minWidth);
 		const minHeight = Number(merged.minHeight);
@@ -415,9 +417,9 @@ class VGModalResize {
 			this._dialogElement.append(this._debugElement);
 		}
 
-		this._setDebugVisibility(true);
-		this._updateDebugValues();
-	}
+		this._setDebugVisibility(true);
+		this._updateDebugValues();
+	}
 
 	_setDebugVisibility(visible) {
 		if (!this._debugElement) return;

package/app/modules/vgmodal/scss/vgmodal.scss

@@ -11,18 +11,19 @@
 @import "../../../utils/scss/variables";
 @import "variables";
 
-.vg-modal {
-	@include mix-vars('modal', $modal-map);
-	position: fixed;
-	left: 0;
-	top: 0;
-	width: 100%;
-	height: 100%;
-	z-index: var(--vg-modal-z-index);
-	display: none;
-	overflow-x: hidden;
-	overflow-y: auto;
-	outline: 0;
+.vg-modal {
+	@include mix-vars('modal', $modal-map);
+	position: fixed;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	z-index: var(--vg-modal-z-index);
+	display: none;
+	pointer-events: none;
+	overflow-x: hidden;
+	overflow-y: auto;
+	outline: 0;
 
 	&-dialog {
 		position: relative;
@@ -120,4 +121,4 @@
 	.vg-modal-xl {
 		--vg-modal-width: #{$modal-xl};
 	}
-}
+}