vgapp 1.3.6 → 1.3.7

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

@@ -112,12 +112,22 @@ class VGAlert {
 		if (isAlertOpen) return Promise.reject({ accepted: false, reason: lang_messages(context.lang, NAME_KEY).reason });
 		isAlertOpen = true;
 
-		const getContainer = () => {
-			if (context._params.render.type === "overlay") {
-				const overlay = context._buildOverlay();
-				return {
-					element: overlay.element,
-					render: overlay.render,
+		const getContainer = () => {
+			if (context._params.render.type === "overlay") {
+				const overlay = context._buildOverlay();
+
+				if (!overlay.element || !overlay.render) {
+					const modal = context._buildModal();
+					return {
+						element: modal._element,
+						render: modal,
+						type: 'modal'
+					}
+				}
+
+				return {
+					element: overlay.element,
+					render: overlay.render,
 					type: 'overlay'
 				}
 			} else if (context._params.render.type === "modal") {
@@ -239,11 +249,11 @@ class VGAlert {
 
 		this._isDataApiBound = true;
 
-		EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
-			event.preventDefault();
-			const target = event.target;
-
-			if (!isVisible(target) || !isElement(target)) return;
+		EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
+			event.preventDefault();
+			const target = event.delegateTarget || this || event.target?.closest(SELECTOR_DATA_TOGGLE) || event.target;
+
+			if (!isVisible(target) || !isElement(target)) return;
 
 			VGAlert.confirm(target, {
 				buttons: {
@@ -329,12 +339,22 @@ class VGAlert {
 		);
 	}
 
-	_buildOverlay() {
-		let targetContainers = ['.vg-modal', '.vg-sidebar'];
-		const containerWrap = this._params.relatedTarget.closest(targetContainers.join(', '));
-
-		const modal = VGModal.getOrCreateInstance(containerWrap);
-		const container = Selectors.find('.vg-modal-content', modal._element) || containerWrap;
+	_buildOverlay() {
+		const targetContainers = ['.vg-modal', '.vg-sidebar'];
+		const relatedTarget = this._params.relatedTarget;
+		const containerWrap = isElement(relatedTarget)
+			? relatedTarget.closest(targetContainers.join(', '))
+			: null;
+
+		if (!containerWrap) {
+			return {
+				element: null,
+				render: null,
+			};
+		}
+
+		const modal = VGModal.getOrCreateInstance(containerWrap);
+		const container = Selectors.find('.vg-modal-content', modal._element) || containerWrap;
 
 		const overlay = document.createElement('div');
 

package/app/modules/vgformsender/js/vgformsender.js

@@ -21,13 +21,16 @@
  *     type: 'modal',
  *     enabled: true
  *   },
- *   callback: {
- *     afterSuccess: (form, instance, event, data) => {
- *       console.log('Форма успешно отправлена');
- *     }
- *   }
- * });
- */
+ *   callback: {
+ *     afterSuccess: (form, instance, event, data) => {
+ *       console.log('Форма успешно отправлена');
+ *     },
+ *     afterValidateError: (form, instance, event, errors) => {
+ *       console.log(errors);
+ *     }
+ *   }
+ * });
+ */
 
 import BaseModule from "../../base-module";
 import VGModal from "../../vgmodal/js/vgmodal";
@@ -160,12 +163,13 @@ class VGFormSender extends BaseModule {
 				wasValidate: 'was-validated',
 				content: 'vg-form-sender--content'
 			},
-			callback: {
-				afterInit: noop,
-				afterSuccess: noop,
-				afterError: noop,
-				afterSend: noop,
-			},
+			callback: {
+				afterInit: noop,
+				afterValidateError: noop,
+				afterSuccess: noop,
+				afterError: noop,
+				afterSend: noop,
+			},
 			interceptors: {
 				beforeSend: () => new Promise((resolve, reject) => resolve()),
 				success: false,
@@ -469,18 +473,59 @@ class VGFormSender extends BaseModule {
 	 * @param {'success'|'error'} status - Статус ответа
 	 * @private
 	 */
-	_jsonParse(data, status) {
-		const _this = this;
+	_jsonParse(data, status) {
+		const _this = this;
 
 		if (_this._params.isJsonParse) {
 			_this.alert(normalizeData(data), status);
 		} else {
 			_this.alert(data, status);
-		}
-	}
-
-	/**
-	 * Отображение алерта в зависимости от типа (modal/collapse)
+		}
+	}
+
+	/**
+	 * Возвращает список ошибок нативной валидации формы
+	 * @returns {Array<Object>}
+	 * @private
+	 */
+	_getValidationErrors() {
+		return [...this._element.elements]
+			.filter((field) => typeof field?.checkValidity === 'function' && !field.checkValidity())
+			.map((field) => ({
+				element: field,
+				name: field.name || '',
+				id: field.id || '',
+				type: field.type || '',
+				value: field.value,
+				message: field.validationMessage || '',
+				validity: {...field.validity}
+			}));
+	}
+
+	/**
+	 * Обрабатывает неуспешную нативную валидацию перед отправкой
+	 * @param {Event} event
+	 * @returns {boolean}
+	 * @private
+	 */
+	_handleValidateError(event) {
+		event.preventDefault();
+		event.stopPropagation();
+
+		this._element.classList.add(this._params.classes.wasValidate);
+
+		execute(this._params.callback.afterValidateError, [
+			this._element,
+			this,
+			event,
+			this._getValidationErrors()
+		]);
+
+		return false;
+	}
+
+	/**
+	 * Отображение алерта в зависимости от типа (modal/collapse)
 	 * @param {Object|string} data - Данные для отображения
 	 * @param {string} status - Статус: success, error, danger и т.д.
 	 */
@@ -602,7 +647,7 @@ class VGFormSender extends BaseModule {
 	 * @private
 	 */
 	_getNextModalZIndex() {
-		const indexes = Selectors.findAll('.modal.show, .vg-modal.show')
+		const indexes = Selectors.findAll('.modal.show, .vg-modal.show, .ox-modal.is-open')
 			.map((element) => Number.parseInt(window.getComputedStyle(element).zIndex, 10))
 			.filter((index) => Number.isFinite(index));
 
@@ -614,6 +659,7 @@ class VGFormSender extends BaseModule {
 	 * @private
 	 */
 	_closeOpenedModals() {
+		// Модалка Bootstrap
 		[...document.getElementsByClassName('modal')].forEach((element) => {
 			if (element && element.classList.contains('show')) {
 				if (typeof bootstrap !== 'undefined' && bootstrap.Modal?.getOrCreateInstance) {
@@ -625,12 +671,21 @@ class VGFormSender extends BaseModule {
 			}
 		});
 
+		// Модалка VGApp
 		[...document.getElementsByClassName('vg-modal')].forEach((element) => {
 			if (element && element.classList.contains('show')) {
 				const mVG = VGModal.getOrCreateInstance(element);
 				mVG.hide([mVG]);
 			}
 		});
+
+		// Модалка OKAUX
+		[...document.getElementsByClassName('ox-modal')].forEach((element) => {
+			if (element && element.classList.contains('is-open')) {
+				const mOX = okaux.Modal.getOrCreateInstance(element);
+				mOX.hide();
+			}
+		});
 	}
 
 	/**
@@ -889,16 +944,11 @@ EventHandler.on(document, EVENT_SUBMIT_DATA_API, function (event) {
 		return;
 	}
 
-	if (instance._params.validate) {
-		if (!instance._element.checkValidity()) {
-			event.preventDefault();
-			event.stopPropagation();
-
-			instance._element.classList.add(instance._params.classes.wasValidate);
-
-			return false;
-		}
-	}
+	if (instance._params.validate) {
+		if (!instance._element.checkValidity()) {
+			return instance._handleValidateError(event);
+		}
+	}
 
 	if (!instance._params.submit) {
 		event.preventDefault();

package/app/modules/vgformsender/readme.md

@@ -43,10 +43,13 @@ VGFormSender.init(document.getElementById('contactForm'), {
         enabled: true, 
         delay: 5000 // ожидание открытия, через 5 секунд 
     }, 
-    callback: { 
-        afterSuccess: (form, instance, event, data) => { 
-            console.log('Форма отправлена!', data); 
-        }, 
+    callback: { 
+        afterValidateError: (form, instance, event, errors) => {
+            console.log('Ошибки валидации:', errors);
+        },
+        afterSuccess: (form, instance, event, data) => { 
+            console.log('Форма отправлена!', data); 
+        }, 
         afterError: (form, instance, event, data) => { 
             console.error('Ошибка:', data); 
         } 
@@ -94,12 +97,40 @@ VGFormSender.init(document.getElementById('contactForm'), {
 | `interceptors.beforeSend` | `Function`              | `Promise.resolve()`                | Выполняется перед отправкой                                          |
 | `interceptors.success`    | `Function\|false`       | `false`                            | Кастомная обработка успеха                                           |
 | `interceptors.error`      | `Function\|false`       | `false`                            | Кастомная обработка ошибки                                           |
-| `callback.afterInit`      | `Function`              | `noop`                             | После инициализации                                                  |
-| `callback.afterSuccess`   | `Function`              | `noop`                             | После успеха                                                         |
-| `callback.afterError`     | `Function`              | `noop`                             | После ошибки                                                         |
-| `callback.afterSend`      | `Function`              | `noop`                             | После любого ответа                                                  |
-
----
+| `callback.afterInit`      | `Function`              | `noop`                             | После инициализации                                                  |
+| `callback.afterValidateError` | `Function`          | `noop`                             | После провала нативной HTML5-валидации, до отправки формы            |
+| `callback.afterSuccess`   | `Function`              | `noop`                             | После успеха                                                         |
+| `callback.afterError`     | `Function`              | `noop`                             | После ошибки                                                         |
+| `callback.afterSend`      | `Function`              | `noop`                             | После любого ответа                                                  |
+
+---
+
+## Проверка валидации до отправки
+
+Если включён `validate: true`, модуль сначала вызывает нативный `checkValidity()` у формы. Если форма невалидна, отправка отменяется, форме добавляется класс `was-validated`, а затем вызывается `callback.afterValidateError`.
+
+```js
+VGFormSender.init(document.getElementById('contactForm'), {
+    validate: true,
+    callback: {
+        afterValidateError: (form, instance, event, errors) => {
+            errors.forEach((error) => {
+                console.log(error.name, error.message);
+            });
+        }
+    }
+});
+```
+
+Каждый элемент массива `errors` содержит:
+
+- `element` — ссылку на невалидное поле
+- `name` / `id` / `type`
+- `value` — текущее значение поля
+- `message` — текст из `validationMessage`
+- `validity` — слепок объекта `ValidityState`
+
+---
 
 ## 🔔 События