vgapp 1.1.4 → 1.1.6

package/app/modules/vgtoast/js/vgtoast.js

@@ -3,38 +3,40 @@ import EventHandler from "../../../utils/js/dom/event";
 import {dismissTrigger} from "../../module-fn";
 import {execute, isDisabled, makeRandomString, mergeDeepObject} from "../../../utils/js/functions";
 import Selectors from "../../../utils/js/dom/selectors";
+import VGToastDrag from "./vgtoast.drag";
+import VGToastResize from "./vgtoast.resize";
 
 /**
- * @constant {string} NAME - Имя модуля.
+ * @constant {string} NAME - Имя модуля.
  */
 const NAME = 'toast';
 
 /**
- * @constant {string} NAME_KEY - Пространство имён для событий.
+ * @constant {string} NAME_KEY - Пространство имён для событий.
  */
 const NAME_KEY = 'vg.toast';
 
 /**
- * @constant {string} SELECTOR_DATA_TOGGLE - Селектор для активации через data-атрибут.
+ * @constant {string} SELECTOR_DATA_TOGGLE - Селектор для активации через data-атрибут.
  */
 const SELECTOR_DATA_TOGGLE = '[data-vg-toggle="toast"]';
 
 /**
- * @constant {string} CLASS_NAME_OPEN - Класс, добавляемый к body при открытии любого тоста.
+ * @constant {string} CLASS_NAME_OPEN - Класс, добавляемый к body при открытии любого тоста.
  */
 const CLASS_NAME_OPEN = 'vg-toast-open';
 
 /**
- * @constant {string} CLASS_NAME_SHOW - Класс, показывающий, что тост видим.
+ * @constant {string} CLASS_NAME_SHOW - Класс, показывающий, что тост видим.
  */
 const CLASS_NAME_SHOW = 'show';
 
 /**
- * @constant {string} CLASS_NAME_SHOWN - Класс, добавляемый после завершения анимации появления.
+ * @constant {string} CLASS_NAME_SHOWN - Класс, добавляемый после завершения анимации появления.
  */
 const CLASS_NAME_SHOWN = 'shown';
 
-// События
+// События
 const EVENT_KEY_HIDE     = `${NAME_KEY}.hide`;
 const EVENT_KEY_HIDDEN   = `${NAME_KEY}.hidden`;
 const EVENT_KEY_SHOW     = `${NAME_KEY}.show`;
@@ -43,36 +45,39 @@ 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_POINTERDOWN_INTERACTION = `pointerdown.interaction.${NAME_KEY}`;
+const EVENT_KEY_POINTERUP_INTERACTION = `pointerup.interaction.${NAME_KEY}`;
+const EVENT_KEY_POINTERCANCEL_INTERACTION = `pointercancel.interaction.${NAME_KEY}`;
 
 /**
  * @typedef {Object} ToastParams
- * @property {boolean} static - Сохранять ли тост в DOM после скрытия.
- * @property {string} placement - Расположение: 'top left', 'bottom center' и т.д.
- * @property {boolean} autohide - Автоматически скрывать.
- * @property {number} delay - Задержка перед авто-скрытием (мс).
- * @property {boolean} enableClickToast - Закрывать по клику на тост.
- * @property {boolean} enableButtonClose - Добавить кнопку закрытия.
- * @property {boolean} keyboard - Закрывать по Esc.
- * @property {string} theme - Тема: 'dark', 'light' и т.д.
- * @property {Object} stack - Настройки стека уведомлений.
- * @property {boolean} stack.enable - Разрешить стек.
- * @property {number} stack.max - Макс. количество тостов одновременно.
- * @property {Object} animation - Анимация.
- * @property {boolean} animation.enable - Включить анимацию.
- * @property {string} animation.in - Анимация входа (Animate.css).
- * @property {string} animation.out - Анимация выхода.
- * @property {number} animation.delay - Длительность анимации.
- * @property {Object} ajax - Настройки AJAX.
- * @property {string} ajax.route - URL для загрузки.
- * @property {string} ajax.target - Селектор контейнера.
- * @property {string} ajax.method - HTTP-метод.
- * @property {boolean} ajax.loader - Показывать лоадер.
- * @property {boolean} ajax.once - Загружать один раз.
- * @property {boolean} ajax.output - Выводить результат.
+ * @property {boolean} static - Сохранять ли тост в DOM после скрытия.
+ * @property {string} placement - Расположение: 'top left', 'bottom center' и т.д.
+ * @property {boolean} autohide - Автоматически скрывать.
+ * @property {number} delay - Задержка перед авто-скрытием (мс).
+ * @property {boolean} enableClickToast - Закрывать по клику на тост.
+ * @property {boolean} enableButtonClose - Добавить кнопку закрытия.
+ * @property {boolean} keyboard - Закрывать по Esc.
+ * @property {string} theme - Тема: 'dark', 'light' и т.д.
+ * @property {Object} stack - Настройки стека уведомлений.
+ * @property {boolean} stack.enable - Разрешить стек.
+ * @property {number} stack.max - Макс. количество тостов одновременно.
+ * @property {Object} animation - Анимация.
+ * @property {boolean} animation.enable - Включить анимацию.
+ * @property {string} animation.in - Анимация входа (Animate.css).
+ * @property {string} animation.out - Анимация выхода.
+ * @property {number} animation.delay - Длительность анимации.
+ * @property {Object} ajax - Настройки AJAX.
+ * @property {string} ajax.route - URL для загрузки.
+ * @property {string} ajax.target - Селектор контейнера.
+ * @property {string} ajax.method - HTTP-метод.
+ * @property {boolean} ajax.loader - Показывать лоадер.
+ * @property {boolean} ajax.once - Загружать один раз.
+ * @property {boolean} ajax.output - Выводить результат.
  */
 
 /**
- * Параметры по умолчанию
+ * Параметры по умолчанию
  * @type {ToastParams}
  */
 const defaultParams = {
@@ -88,6 +93,20 @@ const defaultParams = {
 		enable: true,
 		max: 5
 	},
+	drag: {
+		enable: false,
+		selector: '.vg-toast-wrapper',
+		threshold: 4,
+		resizeEdgeSize: 8,
+		debug: false,
+	},
+	resize: {
+		enable: false,
+		edgeSize: 8,
+		minWidth: 220,
+		minHeight: 64,
+		debug: false,
+	},
 	animation: {
 		enable: true,
 		in: 'animate__backInUp',
@@ -105,20 +124,41 @@ const defaultParams = {
 };
 
 /**
- * Класс VGToast — модуль уведомлений (тосты)
- * Поддерживает стек, анимации, авто-скрытие, AJAX-контент, горячие клавиши.
+ * Класс VGToast — модуль уведомлений (тосты)
+ * Поддерживает стек, анимации, авто-скрытие, AJAX-контент, горячие клавиши.
  */
 class VGToast extends BaseModule {
 	/**
-	 * Создаёт экземпляр VGToast
-	 * @param {Element} element - HTML-элемент тоста.
-	 * @param {Partial<ToastParams>} params - Пользовательские параметры.
+	 * Создаёт экземпляр VGToast
+	 * @param {Element} element - HTML-элемент тоста.
+	 * @param {Partial<ToastParams>} params - Пользовательские параметры.
 	 */
 	constructor(element, params = {}) {
 		super(element, params);
 
 		/** @private */
+		this._interactionDefaults = {
+			drag: {
+				enable: false,
+				selector: '.vg-toast-wrapper',
+				threshold: 4,
+				resizeEdgeSize: 8,
+				debug: false,
+			},
+			resize: {
+				enable: false,
+				edgeSize: 8,
+				minWidth: 220,
+				minHeight: 64,
+				debug: false,
+			},
+		};
 		this._params = this._getParams(element, mergeDeepObject(defaultParams, params));
+		this._dragHandler = new VGToastDrag(this._element, this._element);
+		this._resizeHandler = new VGToastResize(this._element, this._element);
+		this._interactionConfig = this._resolveInteractionConfig();
+		this._dragHandler.setOptions(this._interactionConfig.drag);
+		this._resizeHandler.setOptions(this._interactionConfig.resize);
 		this._animation(this._element, VGToast.NAME_KEY, this._params.animation);
 		this._dismissElement();
 		this._addEventListeners();
@@ -128,7 +168,7 @@ class VGToast extends BaseModule {
 	}
 
 	/**
-	 * Имя модуля
+	 * Имя модуля
 	 * @returns {string}
 	 */
 	static get NAME() {
@@ -136,7 +176,7 @@ class VGToast extends BaseModule {
 	}
 
 	/**
-	 * Пространство имён событий
+	 * Пространство имён событий
 	 * @returns {string}
 	 */
 	static get NAME_KEY() {
@@ -144,10 +184,10 @@ class VGToast extends BaseModule {
 	}
 
 	/**
-	 * Глобальный метод для быстрого создания тоста
-	 * @param {string|Array<string>} text - Текст или [заголовок, тело].
-	 * @param {Partial<ToastParams>} [params] - Параметры.
-	 * @param {Function} [callback] - Вызывается после создания.
+	 * Глобальный метод для быстрого создания тоста
+	 * @param {string|Array<string>} text - Текст или [заголовок, тело].
+	 * @param {Partial<ToastParams>} [params] - Параметры.
+	 * @param {Function} [callback] - Вызывается после создания.
 	 * @returns {VGToast}
 	 */
 	static run(text, params = {}, callback) {
@@ -155,26 +195,31 @@ class VGToast extends BaseModule {
 	}
 
 	/**
-	 * Создаёт и показывает новый тост
-	 * @param {string|Array<string>} text - Текст уведомления.
-	 * @param {Partial<ToastParams>} [params] - Параметры.
-	 * @param {Function} [callback] - Вызывается после появления.
+	 * Создаёт и показывает новый тост
+	 * @param {string|Array<string>} text - Текст уведомления.
+	 * @param {Partial<ToastParams>} [params] - Параметры.
+	 * @param {Function} [callback] - Вызывается после появления.
 	 * @returns {VGToast}
 	 */
 	static build(text, params, callback) {
-		params = mergeDeepObject(defaultParams, { static: false, autohide: true }, params);
+		const rawParams = params && typeof params === 'object' ? params : {};
+		const hasAutohideParam = Object.prototype.hasOwnProperty.call(rawParams, 'autohide');
+		params = mergeDeepObject(defaultParams, { static: false, autohide: true }, rawParams);
+		if (params.static && !hasAutohideParam) {
+			params.autohide = false;
+		}
 
 		const id = 'vg-toast-' + makeRandomString();
 		const target = document.createElement('div');
 		target.classList.add('vg-toast');
 		target.id = id;
 
-		// Тема
+		// Тема
 		if (params.theme) {
 			target.classList.add(`vg-toast-${params.theme}`);
 		}
 
-		// Позиция
+		// Позиция
 		if (params.placement) {
 			params.placement.split(' ').forEach(cls => target.classList.add(cls));
 		}
@@ -182,7 +227,7 @@ class VGToast extends BaseModule {
 		const wrapper = document.createElement('div');
 		wrapper.classList.add('vg-toast-wrapper');
 
-		// Иконка (если задан тип)
+		// Иконка (если задан тип)
 		if (params.type) {
 			const icon = document.createElement('div');
 			icon.classList.add('vg-toast-icon');
@@ -211,7 +256,7 @@ class VGToast extends BaseModule {
 
 		wrapper.append(content);
 
-		// Кнопка закрытия
+		// Кнопка закрытия
 		if (params.enableButtonClose) {
 			const button = document.createElement('div');
 			button.classList.add('vg-toast-button');
@@ -234,8 +279,8 @@ class VGToast extends BaseModule {
 	}
 
 	/**
-	 * Переключает состояние (показать/скрыть)
-	 * @param {Element} [relatedTarget] - Элемент, вызвавший тост.
+	 * Переключает состояние (показать/скрыть)
+	 * @param {Element} [relatedTarget] - Элемент, вызвавший тост.
 	 * @returns {VGToast}
 	 */
 	toggle(relatedTarget) {
@@ -243,14 +288,15 @@ class VGToast extends BaseModule {
 	}
 
 	/**
-	 * Показывает тост
-	 * @param {Element} [relatedTarget] - Элемент, инициировавший показ.
+	 * Показывает тост
+	 * @param {Element} [relatedTarget] - Элемент, инициировавший показ.
 	 * @returns {void}
 	 */
 	show(relatedTarget) {
 		if (isDisabled(this._element)) return;
 
 		this._clearTimeout();
+		this._disableInteractionHandlers();
 
 		this._params = this._getParams(relatedTarget || {}, this._params);
 		this._route((status, data) => {
@@ -268,6 +314,8 @@ class VGToast extends BaseModule {
 
 		const completeCallBack = () => {
 			this._element.classList.add(CLASS_NAME_SHOWN);
+			this._toggleInteractionHandlers();
+			this._syncInteractiveBounds();
 			this._scheduleHide();
 			EventHandler.trigger(this._element, EVENT_KEY_SHOWN, { relatedTarget });
 		};
@@ -276,7 +324,7 @@ class VGToast extends BaseModule {
 	}
 
 	/**
-	 * Скрывает тост
+	 * Скрывает тост
 	 * @returns {void}
 	 */
 	hide() {
@@ -287,6 +335,7 @@ class VGToast extends BaseModule {
 		if (hideEvent.defaultPrevented) return;
 
 		this._element.classList.remove(CLASS_NAME_SHOWN);
+		this._disableInteractionHandlers();
 
 		setTimeout(() => {
 			this._element.classList.remove(CLASS_NAME_SHOW);
@@ -310,11 +359,12 @@ class VGToast extends BaseModule {
 	}
 
 	/**
-	 * Удаляет тост из DOM и снимает обработчики
+	 * Удаляет тост из DOM и снимает обработчики
 	 * @override
 	 */
 	dispose() {
 		this._clearTimeout();
+		this._disableInteractionHandlers();
 		if (!this._params.static) {
 			this._element.remove();
 		}
@@ -322,17 +372,18 @@ class VGToast extends BaseModule {
 	}
 
 	/**
-	 * Устанавливает таймер на скрытие
+	 * Устанавливает таймер на скрытие
 	 * @private
 	 */
 	_scheduleHide() {
+		this._clearTimeout();
 		if (!this._params.autohide) return;
 
 		this._timeout = setTimeout(() => this.hide(), this._params.delay);
 	}
 
 	/**
-	 * Проверяет, показан ли тост
+	 * Проверяет, показан ли тост
 	 * @private
 	 * @returns {boolean}
 	 */
@@ -341,17 +392,17 @@ class VGToast extends BaseModule {
 	}
 
 	/**
-	 * Возвращает список активных тостов с вертикальными смещениями
-	 * Учитывает стек и максимальное количество
+	 * Возвращает список активных тостов с вертикальными смещениями
+	 * Учитывает стек и максимальное количество
 	 * @private
 	 * @returns {Array<{el: Element, top: number}>}
 	 */
 	_enableStack() {
 		const placement = this._params.placement;
 		const isTop = placement.includes('top');
-		const isBottom = !isTop; // по умолчанию снизу
+		const isBottom = !isTop; // по умолчанию снизу
 
-		// Фильтруем тосты с таким же направлением (top или bottom)
+		// Фильтруем тосты с таким же направлением (top или bottom)
 		const stackClass = isTop ? 'top' : 'bottom';
 		const elmsShown = Selectors.findAll(`.vg-toast.show.${stackClass}`)
 			.filter(el => {
@@ -360,20 +411,20 @@ class VGToast extends BaseModule {
 			});
 
 		if (!this._params.stack.enable) {
-			// Скрываем другие тосты, если стек выключен
+			// Скрываем другие тосты, если стек выключен
 			elmsShown
 				.filter(el => el !== this._element)
 				.forEach(el => VGToast.getInstance(el).hide());
 			return [{ el: this._element, top: 0 }];
 		}
 
-		// Ограничиваем по max
+		// Ограничиваем по max
 		if (elmsShown.length >= this._params.stack.max) {
 			const excess = elmsShown.slice(0, elmsShown.length - this._params.stack.max + 1);
 			excess.forEach(el => VGToast.getInstance(el).hide());
 		}
 
-		// Вычисляем смещение (по высоте)
+		// Вычисляем смещение (по высоте)
 		const prevEls = elmsShown.filter(el => el !== this._element);
 		const offset = prevEls.reduce((sum, el) => sum + el.clientHeight, 0);
 
@@ -386,7 +437,7 @@ class VGToast extends BaseModule {
 	}
 
 	/**
-	 * Устанавливает позицию тостов с учётом стека
+	 * Устанавливает позицию тостов с учётом стека
 	 * @private
 	 */
 	_setPlacement() {
@@ -414,17 +465,17 @@ class VGToast extends BaseModule {
 			style.top = '';
 			style.bottom = '';
 			style.transform = '';
-			style.translate = ''; // <-- важно: сбрасываем translate отдельно
+			style.translate = ''; // <-- важно: сбрасываем translate отдельно
 
 			if (isCenter) {
 				style.left = '50%';
-				style.translate = '-50% 0'; // <-- вместо transform: translateX(-50%)
+				style.translate = '-50% 0'; // <-- вместо transform: translateX(-50%)
 			} else if (isLeft) {
 				style.left = '0';
 			} else if (isRight) {
 				style.right = '0';
 			} else {
-				// по умолчанию: центрирование
+				// по умолчанию: центрирование
 				style.left = '50%';
 				style.translate = '-50% 0';
 			}
@@ -440,9 +491,66 @@ class VGToast extends BaseModule {
 	}
 
 	/**
-	 * Очищает таймер
+	 * Очищает таймер
 	 * @private
 	 */
+	_toggleInteractionHandlers() {
+		this._interactionConfig = this._resolveInteractionConfig();
+		this._dragHandler.setOptions(this._interactionConfig.drag);
+		this._resizeHandler.setOptions(this._interactionConfig.resize);
+
+		if (this._interactionConfig.drag.enable) {
+			this._dragHandler.enable();
+		} else {
+			this._dragHandler.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();
+		}
+	}
+
+	_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};
+	}
+
 	_clearTimeout() {
 		if (this._timeout) {
 			clearTimeout(this._timeout);
@@ -451,11 +559,11 @@ class VGToast extends BaseModule {
 	}
 
 	/**
-	 * Назначает обработчики событий
+	 * Назначает обработчики событий
 	 * @private
 	 */
 	_addEventListeners() {
-		// Закрытие по Esc
+		// Закрытие по Esc
 		if (this._params.keyboard) {
 			EventHandler.on(document, EVENT_KEY_KEYDOWN_DISMISS, event => {
 				if (event.key === 'Escape' && this._isShown()) {
@@ -464,21 +572,34 @@ class VGToast extends BaseModule {
 			});
 		}
 
-		// Закрытие по клику на тост
+		// Закрытие по клику на тост
 		if (this._params.enableClickToast) {
 			this._element.classList.add('vg-toast-pointer');
 			EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, `#${this._element.id}`, () => {
 				this.hide();
 			});
 		}
+
+		EventHandler.on(this._element, EVENT_KEY_POINTERDOWN_INTERACTION, () => {
+			this._clearTimeout();
+		});
+
+		const resumeHide = () => {
+			if (this._isShown()) {
+				this._scheduleHide();
+			}
+		};
+
+		EventHandler.on(this._element, EVENT_KEY_POINTERUP_INTERACTION, resumeHide);
+		EventHandler.on(this._element, EVENT_KEY_POINTERCANCEL_INTERACTION, resumeHide);
 	}
 }
 
-// Автоматическое закрытие по data-vg-dismiss
+// Автоматическое закрытие по data-vg-dismiss
 dismissTrigger(VGToast);
 
 /**
- * Реализация Data API
+ * Реализация Data API
  */
 EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
 	const target = Selectors.getElementFromSelector(this);
@@ -497,3 +618,4 @@ EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, functi
 });
 
 export default VGToast;
+