vgapp 1.4.4 → 1.4.6

package/app/modules/vgalert/js/vgalert.js

@@ -1,8 +1,8 @@
-import BaseModule from "../../base-module";
-import VGModal from "../../vgmodal";
-import VGDropdown from "../../vgdropdown";
+import BaseModule from "../../base-module";
+import VGModal from "../../vgmodal";
+import VGDropdown from "../../vgdropdown";
 
-import { execute, isElement, isVisible, makeRandomString, mergeDeepObject, reflow } from "../../../utils/js/functions";
+import { execute, isElement, isVisible, makeRandomString, mergeDeepObject, reflow } from "../../../utils/js/functions";
 import { getSVG } from "../../module-fn";
 import {Classes, Manipulator} from "../../../utils/js/dom/manipulator";
 import Selectors from "../../../utils/js/dom/selectors";
@@ -14,12 +14,12 @@ import Params from "../../../utils/js/components/params";
 /**
  * Константы
  */
-const CLASS_NAME_ALERT = "vg-alert";
-const CLASS_NAME_SHOW = "show";
-const CLASS_NAME_FADE = "fade";
-const CLASS_NAME_CLOSING = "closing";
-const DATA_AGREE = "data-vg-alert-agree";
-const DATA_CANCEL = "data-vg-alert-cancel";
+const CLASS_NAME_ALERT = "vg-alert";
+const CLASS_NAME_SHOW = "show";
+const CLASS_NAME_FADE = "fade";
+const CLASS_NAME_CLOSING = "closing";
+const DATA_AGREE = "data-vg-alert-agree";
+const DATA_CANCEL = "data-vg-alert-cancel";
 
 const NAME = "alert";
 const NAME_KEY = "vg.alert";
@@ -31,22 +31,22 @@ class VGAlert {
 	constructor(params = {}, lang = 'ru') {
 		this.lang = lang;
 		this._defaultParams = {
-			render: {
-				type: "modal", // modal, overlay or dropdown
-				dismiss: false,
-			},
-			dropdown: {
-				placement: "auto",
-				hover: false,
-				animation: {
-					fade: true,
-					enable: false,
-					in: "animate__flipInY",
-					out: "animate__flipOutY",
-					delay: 300,
-				},
-			},
-			ajax: {
+			render: {
+				type: "modal", // modal, overlay or dropdown
+				dismiss: false,
+			},
+			dropdown: {
+				placement: "auto",
+				hover: false,
+				animation: {
+					fade: true,
+					enable: false,
+					in: "animate__flipInY",
+					out: "animate__flipOutY",
+					delay: 300,
+				},
+			},
+			ajax: {
 				route: "",
 				target: "",
 				method: "get",
@@ -145,83 +145,83 @@ class VGAlert {
 					render: overlay.render,
 					type: 'overlay'
 				}
-			} else if (context._params.render.type === "modal") {
-				const modal = context._buildModal();
-				return {
-					element: modal._element,
-					render: modal,
-					type: 'modal'
-				}
-			} else if (context._params.render.type === "dropdown") {
-				const dropdown = context._buildDropdown();
-
-				if (!dropdown.element || !dropdown.render) {
-					const modal = context._buildModal();
-					return {
-						element: modal._element,
-						render: modal,
-						type: 'modal'
-					}
-				}
-
-				return {
-					element: dropdown.element,
-					render: dropdown.render,
-					type: 'dropdown'
-				}
-			}
-		};
-
-		const {element: container, render, type} = getContainer();
-
-		if (type === 'modal' || type === 'dropdown') {
-			render.show();
-		} else if (type === 'overlay') {
-			context._showOverlay(container);
-		}
+			} else if (context._params.render.type === "modal") {
+				const modal = context._buildModal();
+				return {
+					element: modal._element,
+					render: modal,
+					type: 'modal'
+				}
+			} else if (context._params.render.type === "dropdown") {
+				const dropdown = context._buildDropdown();
+
+				if (!dropdown.element || !dropdown.render) {
+					const modal = context._buildModal();
+					return {
+						element: modal._element,
+						render: modal,
+						type: 'modal'
+					}
+				}
+
+				return {
+					element: dropdown.element,
+					render: dropdown.render,
+					type: 'dropdown'
+				}
+			}
+		};
+
+		const {element: container, render, type} = getContainer();
+
+		if (type === 'modal' || type === 'dropdown') {
+			render.show();
+		} else if (type === 'overlay') {
+			context._showOverlay(container);
+		}
 
 		const agreeBtn = Selectors.find(`[${DATA_AGREE}]`, container);
 		const cancelBtn = Selectors.find(`[${DATA_CANCEL}]`, container);
 
-		return new Promise((resolve, reject) => {
-			let isSettled = false;
-
-			const closeAlert = (isHide = true) => {
-				if (type === 'modal') {
-					render.hide();
-					return;
-				}
-
-				if (type === 'dropdown') {
-					render.hide();
-					return;
-				}
-
-				if (type === 'overlay') {
-					context._hideOverlay(container, () => {
-						if (context._params.render.dismiss && isHide) {
-							render.hide();
-						}
-					});
-				}
-			};
-
-			const handleAgree = (e) => {
-				e.preventDefault();
-				isSettled = true;
-				cleanup();
-				resolve({
+		return new Promise((resolve, reject) => {
+			let isSettled = false;
+
+			const closeAlert = (isHide = true) => {
+				if (type === 'modal') {
+					render.hide();
+					return;
+				}
+
+				if (type === 'dropdown') {
+					render.hide();
+					return;
+				}
+
+				if (type === 'overlay') {
+					context._hideOverlay(container, () => {
+						if (context._params.render.dismiss && isHide) {
+							render.hide();
+						}
+					});
+				}
+			};
+
+			const handleAgree = (e) => {
+				e.preventDefault();
+				isSettled = true;
+				cleanup();
+				resolve({
 					accepted: true,
 					timestamp: new Date(),
 				});
 				closeAlert();
 			};
 
-			const handleCancel = (e) => {
-				e.preventDefault();
-				isSettled = true;
-				cleanup();
-				reject({
+			const handleCancel = (e) => {
+				e.preventDefault();
+				isSettled = true;
+				cleanup();
+				reject({
 					accepted: false,
 					timestamp: new Date(),
 				});
@@ -239,25 +239,25 @@ class VGAlert {
 				}
 			};
 
-			const cleanup = () => {
-				isAlertOpen = false;
-				document.removeEventListener("keydown", handleKeydown);
-				document.removeEventListener("click", handleDropdownClickOutside);
-				if (agreeBtn) agreeBtn.removeEventListener("click", handleAgree);
-				if (cancelBtn) cancelBtn.removeEventListener("click", handleCancel);
-			};
-
-			const handleDropdownClickOutside = (e) => {
-				if (type !== 'dropdown') return;
-
-				const toggle = context._params.relatedTarget;
-
-				if (container.contains(e.target) || (isElement(toggle) && toggle.contains(e.target))) {
-					return;
-				}
-
-				handleCancel(e);
-			};
+			const cleanup = () => {
+				isAlertOpen = false;
+				document.removeEventListener("keydown", handleKeydown);
+				document.removeEventListener("click", handleDropdownClickOutside);
+				if (agreeBtn) agreeBtn.removeEventListener("click", handleAgree);
+				if (cancelBtn) cancelBtn.removeEventListener("click", handleCancel);
+			};
+
+			const handleDropdownClickOutside = (e) => {
+				if (type !== 'dropdown') return;
+
+				const toggle = context._params.relatedTarget;
+
+				if (container.contains(e.target) || (isElement(toggle) && toggle.contains(e.target))) {
+					return;
+				}
+
+				handleCancel(e);
+			};
 
 			if (context._params.mode === "confirm") {
 				if (agreeBtn) agreeBtn.addEventListener("click", handleAgree);
@@ -270,42 +270,42 @@ class VGAlert {
 
 			document.addEventListener("keydown", handleKeydown);
 
-			if (type === 'modal') {
-				container.addEventListener("vg.modal.hide", () => {
-					if (isSettled) return;
-					isSettled = true;
-					cleanup();
-					reject({
+			if (type === 'modal') {
+				container.addEventListener("vg.modal.hide", () => {
+					if (isSettled) return;
+					isSettled = true;
+					cleanup();
+					reject({
+						accepted: false,
+						timestamp: new Date(),
+					});
+				}, {once: true});
+			}
+
+			if (type === 'dropdown') {
+				document.addEventListener("click", handleDropdownClickOutside);
+
+				container.addEventListener("vg.dropdown.hidden", () => {
+					if (container._vgAlertDropdownParent && !container._vgAlertDropdownParentWasSet) {
+						container._vgAlertDropdownParent.classList.remove('vg-dropdown');
+					}
+
+					container.remove();
+
+					if (isSettled) return;
+
+					isSettled = true;
+					cleanup();
+					reject({
 						accepted: false,
 						timestamp: new Date(),
 					});
-				}, {once: true});
-			}
-
-			if (type === 'dropdown') {
-				document.addEventListener("click", handleDropdownClickOutside);
-
-				container.addEventListener("vg.dropdown.hidden", () => {
-					if (container._vgAlertDropdownParent && !container._vgAlertDropdownParentWasSet) {
-						container._vgAlertDropdownParent.classList.remove('vg-dropdown');
-					}
-
-					container.remove();
-
-					if (isSettled) return;
-
-					isSettled = true;
-					cleanup();
-					reject({
-						accepted: false,
-						timestamp: new Date(),
-					});
-				}, {once: true});
-			}
-
-			container.focus();
-		});
-	}
+				}, {once: true});
+			}
+
+			container.focus();
+		});
+	}
 
 	static confirm(elem, options = {}) {
 		let lang = 'ru';
@@ -418,9 +418,9 @@ class VGAlert {
 		);
 	}
 
-	_buildOverlay() {
-		const targetContainers = ['.vg-modal', '.vg-sidebar'];
-		const relatedTarget = this._params.relatedTarget;
+	_buildOverlay() {
+		const targetContainers = ['.vg-modal', '.vg-sidebar'];
+		const relatedTarget = this._params.relatedTarget;
 		const containerWrap = isElement(relatedTarget)
 			? relatedTarget.closest(targetContainers.join(', '))
 			: null;
@@ -435,129 +435,129 @@ class VGAlert {
 		const modal = VGModal.getOrCreateInstance(containerWrap);
 		const container = Selectors.find('.vg-modal-content', modal._element) || containerWrap;
 
-		const overlay = document.createElement('div');
-
-		overlay.className = `${CLASS_NAME_ALERT}-overlay`;
-		overlay.append(this._buildContent());
+		const overlay = document.createElement('div');
+
+		overlay.className = `${CLASS_NAME_ALERT}-overlay`;
+		overlay.append(this._buildContent());
 
 		container.append(overlay);
 
 		return {
 			element: overlay,
-			render: modal,
-		};
-	}
-
-	_showOverlay(overlay) {
-		if (!overlay) return;
-
-		reflow(overlay);
-		requestAnimationFrame(() => {
-			overlay.classList.add(CLASS_NAME_SHOW);
-			reflow(overlay);
-			window.setTimeout(() => {
-				if (overlay.isConnected) {
-					overlay.classList.add(CLASS_NAME_FADE);
-				}
-			}, 15);
-		});
-	}
-
-	_hideOverlay(overlay, callback) {
-		if (!overlay) {
-			execute(callback);
-			return;
-		}
-
-		const removeOverlay = () => {
-			overlay.classList.remove(CLASS_NAME_SHOW);
-			overlay.classList.remove(CLASS_NAME_CLOSING);
-			overlay.remove();
-			execute(callback);
-		};
-
-		overlay.classList.add(CLASS_NAME_CLOSING);
-
-		const wrapper = Selectors.find(`.${CLASS_NAME_ALERT}-wrapper`, overlay);
-		const wrapperDuration = this._getElementTransitionDuration(wrapper);
-
-		window.setTimeout(() => {
-			overlay.classList.remove(CLASS_NAME_FADE);
-
-			const backdropDuration = this._getElementTransitionDuration(overlay, '::before');
-			if (!backdropDuration) {
-				removeOverlay();
-				return;
-			}
-
-			window.setTimeout(removeOverlay, backdropDuration);
-		}, wrapperDuration);
-	}
-
-	_getElementTransitionDuration(element, pseudoElement = null) {
-		if (!element || typeof window === 'undefined') return 0;
-
-		const styles = window.getComputedStyle(element, pseudoElement);
-		const durations = styles.transitionDuration.split(',');
-		const delays = styles.transitionDelay.split(',');
-
-		return Math.max(...durations.map((duration, index) => {
-			return this._parseCssTime(duration) + this._parseCssTime(delays[index] || delays[0] || '0s');
-		}));
-	}
-
-	_parseCssTime(value) {
-		const time = Number.parseFloat(value);
-		if (!Number.isFinite(time)) return 0;
-
-		return value.trim().endsWith('ms') ? time : time * 1000;
-	}
-
-	_buildDropdown() {
-		const relatedTarget = this._params.relatedTarget;
-
-		if (!isElement(relatedTarget) || !relatedTarget.parentNode) {
-			return {
-				element: null,
-				render: null,
-			};
-		}
-
-		const id = `${CLASS_NAME_ALERT}-dropdown-${makeRandomString()}`;
-		const parent = relatedTarget.parentNode;
-		const container = document.createElement('div');
-		const dropdownContainer = document.createElement('div');
-		const isDropdownParent = parent.classList.contains('vg-dropdown');
-
-		parent.classList.add('vg-dropdown');
-
-		container.id = id;
-		container.className = `vg-dropdown-content ${CLASS_NAME_ALERT}-dropdown`;
-		container.setAttribute('tabindex', '-1');
-		container.setAttribute('role', 'dialog');
-		container._vgAlertDropdownParent = parent;
-		container._vgAlertDropdownParentWasSet = isDropdownParent;
-
-		dropdownContainer.className = 'vg-dropdown-container';
-		dropdownContainer.append(this._buildContent());
-		container.append(dropdownContainer);
-
-		parent.append(container);
-
-		const dropdown = VGDropdown.getOrCreateInstance(relatedTarget, mergeDeepObject({
-			placement: 'bottom-start',
-		}, this._params.dropdown));
-
-		dropdown._drop = container;
-		dropdown._parent = parent;
-
-		return {
-			element: container,
-			render: dropdown,
-		};
-	}
-
-	_createButton(container, key) {
+			render: modal,
+		};
+	}
+
+	_showOverlay(overlay) {
+		if (!overlay) return;
+
+		reflow(overlay);
+		requestAnimationFrame(() => {
+			overlay.classList.add(CLASS_NAME_SHOW);
+			reflow(overlay);
+			window.setTimeout(() => {
+				if (overlay.isConnected) {
+					overlay.classList.add(CLASS_NAME_FADE);
+				}
+			}, 15);
+		});
+	}
+
+	_hideOverlay(overlay, callback) {
+		if (!overlay) {
+			execute(callback);
+			return;
+		}
+
+		const removeOverlay = () => {
+			overlay.classList.remove(CLASS_NAME_SHOW);
+			overlay.classList.remove(CLASS_NAME_CLOSING);
+			overlay.remove();
+			execute(callback);
+		};
+
+		overlay.classList.add(CLASS_NAME_CLOSING);
+
+		const wrapper = Selectors.find(`.${CLASS_NAME_ALERT}-wrapper`, overlay);
+		const wrapperDuration = this._getElementTransitionDuration(wrapper);
+
+		window.setTimeout(() => {
+			overlay.classList.remove(CLASS_NAME_FADE);
+
+			const backdropDuration = this._getElementTransitionDuration(overlay, '::before');
+			if (!backdropDuration) {
+				removeOverlay();
+				return;
+			}
+
+			window.setTimeout(removeOverlay, backdropDuration);
+		}, wrapperDuration);
+	}
+
+	_getElementTransitionDuration(element, pseudoElement = null) {
+		if (!element || typeof window === 'undefined') return 0;
+
+		const styles = window.getComputedStyle(element, pseudoElement);
+		const durations = styles.transitionDuration.split(',');
+		const delays = styles.transitionDelay.split(',');
+
+		return Math.max(...durations.map((duration, index) => {
+			return this._parseCssTime(duration) + this._parseCssTime(delays[index] || delays[0] || '0s');
+		}));
+	}
+
+	_parseCssTime(value) {
+		const time = Number.parseFloat(value);
+		if (!Number.isFinite(time)) return 0;
+
+		return value.trim().endsWith('ms') ? time : time * 1000;
+	}
+
+	_buildDropdown() {
+		const relatedTarget = this._params.relatedTarget;
+
+		if (!isElement(relatedTarget) || !relatedTarget.parentNode) {
+			return {
+				element: null,
+				render: null,
+			};
+		}
+
+		const id = `${CLASS_NAME_ALERT}-dropdown-${makeRandomString()}`;
+		const parent = relatedTarget.parentNode;
+		const container = document.createElement('div');
+		const dropdownContainer = document.createElement('div');
+		const isDropdownParent = parent.classList.contains('vg-dropdown');
+
+		parent.classList.add('vg-dropdown');
+
+		container.id = id;
+		container.className = `vg-dropdown-content ${CLASS_NAME_ALERT}-dropdown`;
+		container.setAttribute('tabindex', '-1');
+		container.setAttribute('role', 'dialog');
+		container._vgAlertDropdownParent = parent;
+		container._vgAlertDropdownParentWasSet = isDropdownParent;
+
+		dropdownContainer.className = 'vg-dropdown-container';
+		dropdownContainer.append(this._buildContent());
+		container.append(dropdownContainer);
+
+		parent.append(container);
+
+		const dropdown = VGDropdown.getOrCreateInstance(relatedTarget, mergeDeepObject({
+			placement: 'bottom-start',
+		}, this._params.dropdown));
+
+		dropdown._drop = container;
+		dropdown._parent = parent;
+
+		return {
+			element: container,
+			render: dropdown,
+		};
+	}
+
+	_createButton(container, key) {
 		const button = this._params.buttons[key];
 		if (!button || button.element) {
 			container.insertAdjacentHTML("beforeend", button?.element || "");

package/app/modules/vgalert/scss/_variables.scss

@@ -1,16 +1,16 @@
-@use "../../../utils/scss" as vg;
-
-$alert-map: (
-	overlay-z-index: 1,
-	overlay-backdrop-bg: rgba(0, 0, 0, 0),
-	overlay-backdrop-show-bg: var(--vg-backdrop-subtle-color, rgba(0, 0, 0, .25)),
-	overlay-backdrop-transition: background-color .05s linear,
-	overlay-wrapper-bg: var(--vg-surface-bg, #{vg.$surface-bg}),
-	overlay-wrapper-width: 90%,
-	overlay-wrapper-top: 1rem,
-	overlay-wrapper-start: 50%,
-	overlay-wrapper-transform: translate(-50%, -1rem),
-	overlay-wrapper-show-transform: translate(-50%, 0),
-	overlay-wrapper-transition: transform .12s ease-out,
-	buttons-bg: var(--vg-surface-muted-bg, #{vg.$surface-muted-bg}),
-) !default;
+@use "../../../utils/scss" as vg;
+
+$alert-map: (
+	overlay-z-index: 1,
+	overlay-backdrop-bg: rgba(0, 0, 0, 0),
+	overlay-backdrop-show-bg: var(--vg-backdrop-subtle-color, rgba(0, 0, 0, .25)),
+	overlay-backdrop-transition: background-color .05s linear,
+	overlay-wrapper-bg: var(--vg-surface-bg, #{vg.$surface-bg}),
+	overlay-wrapper-width: 90%,
+	overlay-wrapper-top: 1rem,
+	overlay-wrapper-start: 50%,
+	overlay-wrapper-transform: translate(-50%, -1rem),
+	overlay-wrapper-show-transform: translate(-50%, 0),
+	overlay-wrapper-transition: transform .12s ease-out,
+	buttons-bg: var(--vg-surface-muted-bg, #{vg.$surface-muted-bg}),
+) !default;