vgapp 0.7.6 → 0.7.8

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

@@ -1,9 +1,46 @@
+/**
+ * VGFormSender Module
+ *
+ * Этот модуль отвечает за отправку форм с поддержкой AJAX, валидации, отображения уведомлений
+ * (модальные окна или collapse), обработки ошибок, спиннеров для кнопок и многое другое.
+ * Поддерживает кастомизацию через параметры и data-атрибуты.
+ *
+ * @class VGFormSender
+ * @extends BaseModule
+ *
+ * @param {HTMLElement} element - DOM-элемент формы
+ * @param {Object} params - Параметры инициализации
+ *
+ * @example
+ * VGFormSender.init(document.getElementById('myForm'), {
+ *   ajax: {
+ *     route: '/submit',
+ *     method: 'post'
+ *   },
+ *   alert: {
+ *     type: 'modal',
+ *     enabled: true
+ *   },
+ *   callback: {
+ *     afterSuccess: (form, instance, event, data) => {
+ *       console.log('Форма успешно отправлена');
+ *     }
+ *   }
+ * });
+ */
+
 import BaseModule from "../../base-module";
+import VGModal from "../../vgmodal/js/vgmodal";
+import VGCollapse from "../../vgcollapse/js/vgcollapse";
+import VGHideShowPass from "./hideshowpass";
+import {lang_titles, lang_messages} from "../../../utils/js/components/lang";
+import Html from "../../../utils/js/components/templater";
 import {Manipulator} from "../../../utils/js/dom/manipulator";
 import EventHandler from "../../../utils/js/dom/event";
-import VGModal from "../../vgmodal/js/vgmodal";
+import Selectors from "../../../utils/js/dom/selectors";
+import {getSVG} from "../../module-fn";
 import {
-	execute, getDeepestLastChild,
+	execute,
 	isObject,
 	isVisible,
 	makeRandomString,
@@ -11,32 +48,66 @@ import {
 	noop,
 	normalizeData
 } from "../../../utils/js/functions";
-import Selectors from "../../../utils/js/dom/selectors";
-import VGCollapse from "../../vgcollapse/js/vgcollapse";
-import {getSVG} from "../../module-fn";
-import VGHideShowPass from "./hideshowpass";
 
 /**
- * Constants
+ * Константа: имя модуля
+ * @type {string}
  */
 const NAME = 'form-sender';
+
+/**
+ * Константа: ключ модуля для использования в data-атрибутах и событиях
+ * @type {string}
+ */
 const NAME_KEY = 'vg.fs';
 
 /**
- * Constants Events
+ * CSS-класс для алертов
+ * @type {string}
  */
 const CLASS_NAME_ALERT  = 'vg-form-sender-alert';
 
+/**
+ * Событие: успешная отправка формы
+ * @type {string}
+ */
 const EVENT_KEY_SUCCESS = 'vg.fs.success';
+
+/**
+ * Событие: ошибка при отправке формы
+ * @type {string}
+ */
 const EVENT_KEY_ERROR   = 'vg.fs.error';
+
+/**
+ * Событие: перед отправкой формы
+ * @type {string}
+ */
 const EVENT_KEY_BEFORE  = 'vg.fs.before';
 
+/**
+ * Событие: обработка нативной отправки формы
+ * @type {string}
+ */
 const EVENT_SUBMIT_DATA_API = `submit.${NAME_KEY}.data.api`;
 
+/**
+ * Основной класс модуля формы
+ */
 class VGFormSender extends BaseModule {
+	/**
+	 * Создаёт экземпляр VGFormSender
+	 * @param {HTMLElement} element - Элемент формы
+	 * @param {Object} params - Параметры конфигурации
+	 */
 	constructor(element, params = {}) {
 		super(element, params);
 
+		/**
+		 * Объединённые параметры с дефолтными значениями
+		 * @type {Object}
+		 * @private
+		 */
 		this._params = this._getParams(element, mergeDeepObject({
 			response: {
 				enabled: false,
@@ -69,6 +140,8 @@ class VGFormSender extends BaseModule {
 				target: '',
 				method: 'get',
 				timeout: 1000,
+				loader: false,
+				output: true
 			},
 			classes: {
 				general: 'vg-form-sender',
@@ -82,6 +155,7 @@ class VGFormSender extends BaseModule {
 				afterInit: noop,
 				afterSuccess: noop,
 				afterError: noop,
+				afterSend: noop,
 			},
 			interceptors: {
 				beforeSend: () => new Promise((resolve, reject) => resolve()),
@@ -99,37 +173,84 @@ class VGFormSender extends BaseModule {
 				},
 				click: noop,
 			},
+			lang: 'ru'
 		}, params));
 
-		this._button = Selectors.find('[type="submit"]', this._element) || Selectors.find('[form="' + this._element.id + '"]') || null;
-
-		this._params.ajax.route = Manipulator.get(this._element, 'action').toLowerCase();
-		this._params.ajax.method = Manipulator.get(this._element, 'method').toLowerCase();
-
-		this._params.isBtnText   = Manipulator.get(this._element, 'data-btn-text') !== 'false';
-		this._params.isJsonParse = Manipulator.get(this._element, 'data-json-parse') !== 'false';
-		this._params.isShowPass  = Manipulator.get(this._element, 'data-show-pass') === 'true';
-
-		this._params = this._getParams(this._button, this._params);
-		this._params.button.initial = this._button.innerHTML || this._params.button.initial;
+		/**
+		 * Кнопка отправки формы
+		 * @type {HTMLElement|null}
+		 * @private
+		 */
+		this._button = null;
+
+		/**
+		 * Кэш для часто используемых элементов
+		 * @type {Map<string, any>}
+		 * @private
+		 */
+		this._cachedElements = new Map();
+
+		this._initElements();
 	}
 
+	/**
+	 * Возвращает имя модуля
+	 * @returns {string}
+	 * @static
+	 */
 	static get NAME() {
 		return NAME;
 	}
 
+	/**
+	 * Возвращает ключ модуля
+	 * @returns {string}
+	 * @static
+	 */
 	static get NAME_KEY() {
 		return NAME_KEY;
 	}
 
+	/**
+	 * Инициализация внутренних элементов: кнопка, поля, параметры
+	 * @private
+	 */
+	_initElements() {
+		this._button = Selectors.find('[type="submit"]', this._element) ||
+			Selectors.find('[form="' + this._element.id + '"]') ||
+			null;
+
+		const fields = Selectors.findAll('input, textarea, select', this._element);
+		this._cachedElements.set('fields', fields);
+
+		this._params.ajax.route = Manipulator.get(this._element, 'action') || this._params.ajax.route;
+		this._params.ajax.method = Manipulator.get(this._element, 'method') || this._params.ajax.method;
+
+		this._params.isBtnText = Manipulator.get(this._element, 'data-btn-text') !== 'false';
+		this._params.isJsonParse = Manipulator.get(this._element, 'data-json-parse') !== 'false';
+		this._params.isShowPass = Manipulator.get(this._element, 'data-show-pass') === 'true';
+
+		if (this._button) {
+			this._params = this._getParams(this._button, this._params);
+			this._params.button.initial = this._button.innerHTML.trim() || this._params.button.initial;
+		}
+	}
+
+	/**
+	 * Построение формы: добавление классов, инициализация паролей, валидации
+	 * @returns {VGFormSender}
+	 */
 	build() {
 		this._element.classList.add(this._params.classes.general);
 
-		[... Selectors.findAll('input, textarea, select', this._element)].forEach((el) => {
-			if (isVisible(el)) {
-				el.parentElement.classList.add(this._params.classes.content)
-			}
-		});
+		const fields = this._cachedElements.get('fields');
+		if (fields) {
+			fields.forEach((el) => {
+				if (isVisible(el) && el.parentElement) {
+					el.parentElement.classList.add(this._params.classes.content);
+				}
+			});
+		}
 
 		if (this._params.validate) {
 			Manipulator.set(this._element, 'novalidate', '');
@@ -147,6 +268,11 @@ class VGFormSender extends BaseModule {
 		return this
 	}
 
+	/**
+	 * Отправка формы (AJAX или нативная)
+	 * @param {Event} event - DOM-событие отправки
+	 * @param {FormData|null} data - Дополнительные данные для отправки
+	 */
 	request(event, data = null) {
 		const _this = this;
 		const mergeFormData = (target, source) => {
@@ -165,6 +291,8 @@ class VGFormSender extends BaseModule {
 			else _this._params.ajax.data = formData;
 
 			_this._route(function (status, data) {
+				execute(_this._params.callback.afterSend, [_this._element, _this, status, data]);
+
 				_this._element.classList.remove('was-validated');
 
 				if (_this._params.response.enabled) {
@@ -201,50 +329,81 @@ class VGFormSender extends BaseModule {
 
 		_this._params.interceptors.beforeSend().then(() => {
 			submit();
+		}).catch(err => {
+			console.error(err);
 		});
 	}
 
+	/**
+	 * Действия перед отправкой формы: блокировка кнопки, триггер события
+	 * @private
+	 */
 	_alertBefore() {
 		const _this = this;
 
 		if (_this._params.alert.type === 'collapse') {
-			[...document.getElementsByClassName(_this._params.classes.alertCollapse)].forEach(function (element) {
-				if (element && element.classList.contains('show')) {
-					VGCollapse.getOrCreateInstance(element, {toggle: false}).hide();
-				}
-			});
+			const collapseClass = _this._params.classes.alertCollapse;
+			if (!_this._cachedElements.has('collapses') || document.querySelector('.' + collapseClass + '.show')) {
+				const collapses = document.getElementsByClassName(collapseClass);
+				_this._cachedElements.set('collapses', collapses);
+
+				[...collapses].forEach(function (element) {
+					if (element.classList.contains('show')) {
+						VGCollapse.getOrCreateInstance(element, { toggle: false }).hide();
+					}
+				});
+			}
 		}
 
 		_this._statusButton('before');
 		EventHandler.trigger(_this._element, EVENT_KEY_BEFORE, _this);
 	}
 
+	/**
+	 * Обработка ошибки: отображение алерта, вызов колбэка
+	 * @param {Event} event - DOM-событие
+	 * @param {Object} data - Данные ответа
+	 * @private
+	 */
 	_alertError(event, data) {
 		const _this = this;
 
 		_this._statusButton('after');
 		_this._jsonParse(data, 'error');
-		EventHandler.trigger(_this._element, EVENT_KEY_ERROR, [event, _this, data]);
+		EventHandler.trigger(_this._element, EVENT_KEY_ERROR, {
+			vgformsender: {
+				event: event,
+				self: _this,
+				data: data
+			}
+		});
 	}
 
+	/**
+	 * Обработка успеха: отображение алерта, вызов колбэка
+	 * @param {Event} event - DOM-событие
+	 * @param {Object} data - Данные ответа
+	 * @private
+	 */
 	_alertSuccess(event, data) {
 		const _this = this;
 
 		_this._statusButton('after');
 		_this._jsonParse(data, 'success');
-		EventHandler.trigger(_this._element, EVENT_KEY_SUCCESS, [event, _this, data]);
-	}
-
-	static buttonClick(formID, callback, status = 'before') {
-		const form = Selectors.find(formID);
-		if (form) {
-			const instance = VGFormSender.getOrCreateInstance(formID);
-			form.addEventListener('vg.fs.' + status, e => {
-				execute(callback, [form, instance])
-			})
-		}
+		EventHandler.trigger(_this._element, EVENT_KEY_SUCCESS, {
+			vgformsender: {
+				event: event,
+				self: _this,
+				data: data
+			}
+		});
 	}
 
+	/**
+	 * Управление состоянием кнопки отправки
+	 * @param {'before'|'after'} status - Статус: до/после отправки
+	 * @private
+	 */
 	_statusButton(status) {
 		if (!this._button) return;
 
@@ -286,39 +445,40 @@ class VGFormSender extends BaseModule {
 		}
 	}
 
+	/**
+	 * Парсинг JSON-ответа и вызов алерта
+	 * @param {Object} data - Данные ответа
+	 * @param {'success'|'error'} status - Статус ответа
+	 * @private
+	 */
 	_jsonParse(data, status) {
 		const _this = this;
 
-		if (_this._params.isJsonParse && typeof data === 'string') {
-			let parserData = {};
-
-			try {
-				parserData = JSON.parse(data);
-				_this.alert(parserData, status);
-			} catch (e) {
-				_this.alert(data, status);
-			}
+		if (_this._params.isJsonParse) {
+			_this.alert(normalizeData(data), status);
 		} else {
 			_this.alert(data, status);
 		}
 	}
 
+	/**
+	 * Отображение алерта в зависимости от типа (modal/collapse)
+	 * @param {Object|string} data - Данные для отображения
+	 * @param {string} status - Статус: success, error, danger и т.д.
+	 */
 	alert(data, status) {
-		const _this = this;
-
 		if (isObject(data)) {
 			if (('code' in data) && data.code && data.code === 200) {
 				if ('response' in data && data.response) {
 					let response = normalizeData(data.response);
 					if (typeof response === 'string') {
 						if (response.indexOf("Parse error") !== -1 || response.indexOf("syntax error") !== -1) {
-							status = 'error';
+							status = 'danger';
 							data = {
 								response: {
-									title: 'Error',
-									message: 'Something went wrong, please repeat later'
-								},
-								text: 'Something went wrong, please repeat later'
+									title: lang_titles(this._params.lang, 'errors').title,
+									message: lang_messages(this._params.lang, 'errors').went_wrong
+								}
 							}
 						}
 					} else {
@@ -327,30 +487,40 @@ class VGFormSender extends BaseModule {
 						}
 					}
 				}
+			} else {
+				status = 'danger'
 			}
 		}
 
-		if (!_this._params.alert.enabled) {
-			return;
-		}
+		if (!this._params.alert.enabled) return;
 
-		if (_this._params.alert.type === 'modal') {
-			_this._alertModal(data, status)
+		if (this._params.alert.type === 'modal') {
+			this._alertModal(data, status)
 		}
 
-		if (_this._params.alert.type === 'collapse') {
-			_this._alertCollapse(data, status)
+		if (this._params.alert.type === 'collapse') {
+			this._alertCollapse(data, status)
 		}
 	}
 
+	/**
+	 * Показ алерта в виде модального окна
+	 * @param {Object} data - Данные для отображения
+	 * @param {string} status - Статус (success/error)
+	 * @private
+	 */
 	_alertModal(data, status) {
 		const _this = this;
 
-		// Есть ли открытые модалки, закрываем
+		// Закрытие всех открытых модальных окон
 		[...document.getElementsByClassName('modal')].forEach(function (element) {
 			if (element && element.classList.contains('show')) {
-				let mBS = bootstrap.Modal.getOrCreateInstance(element);
-				mBS.hide();
+				if (typeof bootstrap !== 'undefined') {
+					let mBS = bootstrap.Modal?.getOrCreateInstance(element);
+					mBS.hide();
+				} else {
+					console.warn(lang_messages(_this._params.lang, NAME).bootstrap_not_found)
+				}
 			}
 		});
 
@@ -368,6 +538,7 @@ class VGFormSender extends BaseModule {
 
 		setTimeout(() => {
 			VGModal.init(id, {
+				dismiss: true,
 				classes: {
 					alert: _this._params.classes.alertModal
 				}
@@ -375,6 +546,9 @@ class VGFormSender extends BaseModule {
 				let element = self._element;
 				element.classList.add(_this._params.classes.alertModal);
 
+				let $content = Selectors.find('.vg-modal-content', element);
+				if ($content) $content.classList.add(CLASS_NAME_ALERT, CLASS_NAME_ALERT + '-' + status);
+
 				let $body = Selectors.find('.vg-modal-body', element);
 				if ($body) $body.append(_this.setDataRelationStatus(element, status, data, 'modal'));
 
@@ -389,6 +563,12 @@ class VGFormSender extends BaseModule {
 		}, _this._params.timeout);
 	}
 
+	/**
+	 * Показ алерта в виде collapse
+	 * @param {Object} data - Данные для отображения
+	 * @param {string} status - Статус (success/error)
+	 * @private
+	 */
 	_alertCollapse(data, status) {
 		const _this = this;
 
@@ -413,129 +593,132 @@ class VGFormSender extends BaseModule {
 		}
 	}
 
+	/**
+	 * Формирование содержимого алерта (заголовок, текст, иконка)
+	 * @param {HTMLElement} $element - Родительский элемент
+	 * @param {string} status - Статус (success/danger и т.д.)
+	 * @param {Object} data - Данные ответа
+	 * @param {'modal'|'collapse'} type - Тип алерта
+	 * @returns {HTMLElement} - DOM-элемент с контентом
+	 */
 	setDataRelationStatus($element, status, data, type) {
-		if (status === 'error') status = 'danger';
-
-		let $alert = Selectors.find('.'+ CLASS_NAME_ALERT +'-' + status, $element);
+		let response = normalizeData(data.response) || data,
+			$alert = Selectors.find('.'+ CLASS_NAME_ALERT +'-content', $element);
 
 		if (isObject(data)) {
-			if (status === 'error') {
-				if ('code' in data && data.code !== 200) {
-					if ('text' in data && !data.text) {
-						data.text = 'Something went wrong, please repeat later';
-
-						switch (data.code) {
-							case 400:
-								data.text = 'Bad Request'
-								break;
-							case 401:
-								data.text = 'Unauthorized'
-								break;
-							case 403:
-								data.text = 'Unauthorized'
-								break;
-							case 413:
-								data.text = 'Forbidden'
-								break;
-							case 404:
-								data.text = 'Not Found'
-								break;
-							case 422:
-								data.text = 'Unprocessable Entity'
-								break;
-							case 500:
-								data.text = 'Internal Server Error'
-								break;
-							case 504:
-								data.text = 'Gateway Timeout'
-								break;
-						}
+			let view = '';
+
+			if ('view' in data.response) {
+				response = data.response.view
+			} else if (typeof response !== 'string') {
+				if (status === 'danger') {
+					response.title = lang_titles(this._params.lang, 'errors').title;
+
+					if ('code' in data && data.code !== 200) {
+						const messages = {
+							400: lang_messages(this._params.lang, 'errors')[400],
+							401: lang_messages(this._params.lang, 'errors')[401],
+							403: lang_messages(this._params.lang, 'errors')[403],
+							404: lang_messages(this._params.lang, 'errors')[404],
+							413: lang_messages(this._params.lang, 'errors')[413],
+							419: lang_messages(this._params.lang, 'errors')[419],
+							422: lang_messages(this._params.lang, 'errors')[422],
+							500: lang_messages(this._params.lang, 'errors')[500],
+							504: lang_messages(this._params.lang, 'errors')[504],
+						};
+						response.message = messages[data.code] || lang_messages(this._params.lang, 'errors').went_wrong;
+						response.title += ' (' + data.code + ')';
 					}
-				}
-			}
 
-			if ('response' in data) {
-				let response = normalizeData(data.response), title = '', txt = '', code = '';
-				if (typeof response !== 'string') {
-					if (!('view' in response)) {
-						if ('title' in response) title = response.title;
-						if (status === 'error' && data.code !== 200 && this._params.alert.errors) {
-							code = ' ' + data.text + ' (' + data.code + ')';
-						}
+					if ('errors' in response && this._params.alert.errors) {
+						let errors = normalizeData(response.errors) || null;
+						response.message = [];
 
-						if (!title) txt += '<h4 class="'+ CLASS_NAME_ALERT +'-content--title">' + code + '</h4>';
-						else txt += '<h4 class="'+ CLASS_NAME_ALERT +'-content--title">' + title + '</h4>';
-
-						if ('message' in response) {
-							txt += '<div class="'+ CLASS_NAME_ALERT +'-content--message">' + response.message + '</div>'
-						}
-
-						if ('errors' in response && this._params.alert.errors) {
-							let errors = normalizeData(response.errors) || null;
-							if (isObject(errors)) {
-								for (const error in errors) {
-									if (Array.isArray(errors[error])) {
-										errors[error].forEach(function (t) {
-											txt += '<div>'+ t +'</div>';
-										})
-									} else {
-										txt = '<div>'+ errors[error] +'</div>';
-									}
+						if (isObject(errors)) {
+							for (const error in errors) {
+								if (Array.isArray(errors[error])) {
+									errors[error].forEach((t) => response.message.push(t))
+								} else {
+									response.message.push(errors[error]);
 								}
 							}
 						}
-
-						data = {
-							view: txt
-						}
 					}
-				} else {
-					data.view = response;
 				}
-			}
-		}
 
-		if (!$alert) {
-			$alert = document.createElement('div');
-			$alert.classList.add(CLASS_NAME_ALERT, CLASS_NAME_ALERT + '-' + status, CLASS_NAME_ALERT + '-' + type);
-
-			let content = document.createElement('div');
-			content.classList.add(CLASS_NAME_ALERT + '-content');
+				const elm = Html('string');
 
-			let icon = document.createElement('div');
-			icon.classList.add(CLASS_NAME_ALERT + '-content--icon');
+				view = elm.h4({class: CLASS_NAME_ALERT +'-content--title'}, response.title);
 
-			let i = document.createElement('i');
-			i.innerHTML = getSVG(status);
-
-			icon.append(i);
-			content.append(icon);
+				if (Array.isArray(response.message)) {
+					response.message.forEach(message => {
+						view += elm.div({
+							class: CLASS_NAME_ALERT +'-content--message'
+						}, message);
+					})
+				} else {
+					view += elm.div({
+						class: CLASS_NAME_ALERT +'-content--message'
+					}, response.message);
+				}
 
-			let text = document.createElement('div');
-			text.classList.add(CLASS_NAME_ALERT + '-content--text');
-			text.innerHTML = data.view;
+				response = view;
+			}
+		}
 
-			content.append(text);
-			$alert.append(content);
+		if (!$alert) {
+			const elm = Html('dom');
+
+			$alert = elm.div({
+				class: CLASS_NAME_ALERT + '-' + type
+			}, [
+				elm.div({class: CLASS_NAME_ALERT + '-content'}, [
+					elm.i({class: CLASS_NAME_ALERT + '-content--icon'}, getSVG(status), {isHTML: true}),
+					elm.div({class: CLASS_NAME_ALERT + '-content--text'}, response, {isHTML: true})
+				]),
+			]);
 		} else {
-			let text = Selectors.find('.'+ CLASS_NAME_ALERT +'-content--text', $alert);
-			text.innerHTML = data.view;
+			let text = Selectors.find('.vg-modal-body', $element);
+			text.innerHTML = response;
 		}
 
 		return $alert;
 	}
 
 	/**
-	 * Инициализация
-	 * @param element
-	 * @param params
+	 * Статический метод инициализации формы
+	 * @param {HTMLElement} element - Форма
+	 * @param {Object} params - Параметры
+	 * @example
+	 * VGFormSender.init(formElement, { validate: true });
 	 */
 	static init(element, params = {}) {
 		const instance = VGFormSender.getOrCreateInstance(element, params);
 		instance.build();
 	}
+
+	/**
+	 * Подписка на события кнопки формы
+	 * @param {string} formID - CSS-селектор формы
+	 * @param {Function} callback - Колбэк-функция
+	 * @param {'before'|'after'} status - Статус события
+	 * @example
+	 * VGFormSender.buttonClick('#myForm', (form, instance) => { ... }, 'before');
+	 */
+	static buttonClick(formID, callback, status = 'before') {
+		const form = Selectors.find(formID);
+		if (form) {
+			const instance = VGFormSender.getOrCreateInstance(form);
+			form.addEventListener('vg.fs.' + status, e => {
+				execute(callback, [form, instance])
+			})
+		}
+	}
 }
 
+/**
+ * Обработчик события отправки формы
+ */
 EventHandler.on(document, EVENT_SUBMIT_DATA_API, function (event) {
 	if (!Manipulator.has(event.target, 'data-vgformsender')) {
 		return;