vgapp 0.7.8 → 0.8.0

package/app/utils/js/components/ajax.js

@@ -1,4 +1,4 @@
-import {mergeDeepObject, noop, normalizeData} from "../functions";
+import { mergeDeepObject, noop, normalizeData } from "../functions";
 
 class Ajax {
 	/**
@@ -10,25 +10,24 @@ class Ajax {
 	 * @param {string} options._token - Токен (авто-чтение из meta)
 	 */
 	constructor(options = {}) {
-		this.baseUrl = options.baseUrl || '';
+		this.baseUrl = options.baseUrl || "";
 		this.defaultHeaders = {
-			'X-Requested-With': 'XMLHttpRequest',
-			...options.headers
+			"X-Requested-With": "XMLHttpRequest",
+			...options.headers,
 		};
 		this.withCredentials = options.withCredentials || false;
 		this.csrfToken = options._token || this._getCsrfToken();
 	}
 
 	/**
-	 * Получение csrf токена из тега meta
+	 * Получение CSRF-токена из тега meta
 	 * @returns {string}
-	 * @private
 	 */
 	_getCsrfToken() {
 		const meta = document.querySelector('meta[name="csrf-token"]');
-		if (meta) return meta.getAttribute('content');
+		if (meta) return meta.getAttribute("content");
 		console.warn('CSRF-токен не найден в <meta name="csrf-token">');
-		return '';
+		return "";
 	}
 
 	/**
@@ -36,179 +35,252 @@ class Ajax {
 	 * @param {string} url
 	 * @param {Object} options
 	 * @param {'GET'|'POST'|'PUT'|'DELETE'|'PATCH'} options.method
-	 * @param {Object|FormData} options.body - Данные (обычный объект или FormData)
-	 * @param {Object} options.headers - Дополнительные заголовки
-	 * @param {Function} options.onProgress - Колбэк прогресса (только для POST/PUT)
+	 * @param {Object|FormData} options.body
+	 * @param {Object} options.headers
+	 * @param {AbortSignal} [options.signal] - Для отмены запроса
+	 * @param {Function} [options.onProgress] - Только для POST/PUT с FormData
 	 * @param {Function} options.onSuccess
 	 * @param {Function} options.onError
-	 * @param {Function} options.onUploadStart
-	 * @param {Function} options.onUploadEnd
+	 * @param {Function} [options.onUploadStart]
+	 * @param {Function} [options.onUploadEnd]
 	 */
 	request(url, {
-		method = 'GET',
+		method = "GET",
 		body = null,
 		headers = {},
+		signal = null,
 		onProgress = null,
-		onSuccess = (data) => noop(),
-		onError = (error) => noop(),
-		onUploadStart = () => {},
-		onUploadEnd = () => {}
+		onSuccess = noop,
+		onError = noop,
+		onUploadStart = noop,
+		onUploadEnd = noop,
 	} = {}) {
 		const fullUrl = this.baseUrl + url;
 		const isFormData = body instanceof FormData;
 		const requestHeaders = { ...this.defaultHeaders, ...headers };
-		const token = {};
+		const isGet = method.toUpperCase() === "GET";
 
-		if (!isFormData && this.csrfToken) {
-			token.body = JSON.stringify({
-				_token: this.csrfToken
-			})
-		}
+		// Удаление тела для GET
+		if (isGet) body = null;
 
-		// Для JSON устанавливаем заголовок, для FormData — НЕЛЬЗЯ
-		if (!isFormData && !('Content-Type' in headers)) {
-			requestHeaders['Content-Type'] = 'application/json';
+		// Установка CSRF токена: в body, если не FormData
+		if (!isGet && !isFormData && this.csrfToken) {
+			if (!body) body = {};
+			if (typeof body === "object" && !Array.isArray(body)) {
+				body._token = this.csrfToken;
+			}
 		}
 
-		// Если это GET-запрос — тело игнорируется
-		if (method.toUpperCase() === 'GET') {
-			return this._makeFetch(fullUrl, {
-				method,
-				headers: requestHeaders,
-				withCredentials: this.withCredentials
-			}, onSuccess, onError);
+		// Content-Type только для JSON
+		if (!isFormData && !("Content-Type" in headers)) {
+			requestHeaders["Content-Type"] = "application/json";
 		}
 
-		// Для FormData — используем XMLHttpRequest, чтобы отслеживать прогресс
+		// Если нужно отслеживать прогресс или FormData — используем XHR
 		if (isFormData || onProgress) {
 			return this._makeXHR({
 				method,
 				url: fullUrl,
 				body,
 				headers: requestHeaders,
+				signal,
 				onProgress,
 				onSuccess,
 				onError,
 				onUploadStart,
-				onUploadEnd
+				onUploadEnd,
+			});
+		} else {
+			return this._makeFetch({
+				url: fullUrl,
+				method,
+				body: isGet ? undefined : this._serializeBody(body),
+				headers: requestHeaders,
+				signal,
+				withCredentials: this.withCredentials,
+				onSuccess,
+				onError,
 			});
 		}
-
-		// Остальные случаи — fetch
-		return this._makeFetch(fullUrl, mergeDeepObject({
-			method,
-			headers: requestHeaders,
-			withCredentials: this.withCredentials
-		}, token), onSuccess, onError);
 	}
 
 	/**
-	 * Использование fetch (для JSON)
+	 * fetch-реализация (для JSON)
 	 */
-	_makeFetch(url, config, onSuccess, onError) {
-		return fetch(url, config)
-			.then(response => {
+	_makeFetch({
+		           url,
+		           method,
+		           body,
+		           headers,
+		           signal,
+		           withCredentials,
+		           onSuccess,
+		           onError,
+	           }) {
+		const config = {
+			method,
+			headers,
+			signal,
+			withCredentials,
+			...(body !== undefined && { body }),
+		};
+
+		fetch(url, config)
+			.then((response) => {
+				const contentType = response.headers.get("content-type");
+				const isJson = contentType && contentType.includes("application/json");
+
 				if (!response.ok) {
-					throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+					return Promise.reject(
+						normalizeData({
+							code: response.status,
+							response: isJson
+								? response.json().catch(() => response.text())
+								: response.text(),
+						})
+					);
+				}
+
+				let data = { code: response.status };
+				if (isJson) {
+					data.response = response.json();
+				} else {
+					data.response = response.text();
 				}
-				const contentType = response.headers.get('content-type');
-				if (contentType && contentType.includes('application/json')) {
-					return response.json();
+
+				return data;
+			})
+			.then((data) => {
+				if (data && data.response instanceof Promise) {
+					data.response.then(
+						(resolved) => onSuccess({ ...data, response: resolved }),
+						() => {}
+					);
+				} else {
+					console.log(data)
+					onSuccess(data);
 				}
-				return response.text();
 			})
-			.then(data => onSuccess(data))
-			.catch(error => onError(error));
+			.catch((error) => {
+				if (error.name === "AbortError") return; // отмена — не ошибка
+
+				if (error && error.response instanceof Promise) {
+					error.response.then((errData) => {
+						onError({ ...error, response: errData });
+					}, () => {
+						onError({ ...error, response: "Request failed" });
+					});
+				} else {
+					onError(error);
+				}
+			});
 	}
 
 	/**
-	 * Использование XHR (для FormData и прогресса)
+	 * XHR-реализация (с прогрессом и AbortController)
 	 */
 	_makeXHR({
 		         method,
 		         url,
 		         body,
 		         headers,
+		         signal,
 		         onProgress,
 		         onSuccess,
 		         onError,
 		         onUploadStart,
-		         onUploadEnd
+		         onUploadEnd,
 	         }) {
-		return new Promise((resolve, reject) => {
-			const xhr = new XMLHttpRequest();
+		const xhr = new XMLHttpRequest();
 
-			xhr.open(method, url, true);
-			xhr.withCredentials = this.withCredentials;
+		xhr.open(method, url, true);
+		xhr.withCredentials = this.withCredentials;
 
-			// Устанавливаем только пользовательские заголовки (кроме Content-Type для FormData)
-			Object.keys(headers).forEach(key => {
-				if (key.toLowerCase() !== 'content-type' || !(body instanceof FormData)) {
-					xhr.setRequestHeader(key, headers[key]);
+		// Установка заголовков
+		Object.keys(headers).forEach((key) => {
+			if (key.toLowerCase() !== "content-type" || !(body instanceof FormData)) {
+				xhr.setRequestHeader(key, headers[key]);
+			}
+		});
+
+		// Прогресс
+		if (onProgress) {
+			xhr.upload.addEventListener("progress", (e) => {
+				if (e.lengthComputable) {
+					onProgress(Math.round((e.loaded / e.total) * 100), e);
 				}
 			});
+		}
 
-			// Отслеживание прогресса загрузки
-			if (onProgress) {
-				xhr.upload.addEventListener('progress', (e) => {
-					if (e.lengthComputable) {
-						const percent = (e.loaded / e.total) * 100;
-						onProgress(percent, e);
-					}
+		// События
+		xhr.onload = () => {
+			if (xhr.status >= 200 && xhr.status < 300) {
+				const data = {
+					code: xhr.status,
+					response: normalizeData(xhr.responseText),
+				};
+				onSuccess(data);
+			} else {
+				const error = normalizeData({
+					code: xhr.status,
+					response: xhr.responseText || `HTTP ${xhr.status}`,
 				});
+				onError(error);
 			}
+			onUploadEnd();
+		};
 
-			xhr.onload = () => {
-				if (xhr.status >= 200 && xhr.status < 300) {
-					let data = {
-						code: xhr.status,
-						response: normalizeData(xhr.responseText)
-					};
-					onSuccess(data);
-					resolve(data);
-				} else {
-					const error = new Error(`Ошибка ${xhr.status}: ${xhr.statusText}`);
-					let data = {
-						code: xhr.status,
-						response: error
-					}
-					onError(data);
-					reject(data);
-				}
-				onUploadEnd();
-			};
+		xhr.onerror = () => {
+			onError(normalizeData({ code: 0, response: "Network Error" }));
+			onUploadEnd();
+		};
 
-			xhr.onerror = () => {
-				const error = new Error('Network Error');
-				onError(error);
-				reject(error);
-				onUploadEnd();
-			};
+		xhr.ontimeout = () => {
+			onError(normalizeData({ code: 0, response: "Request Timeout" }));
+			onUploadEnd();
+		};
 
-			onUploadStart();
-			xhr.send(body);
-		});
+		// Привязка AbortController
+		if (signal) {
+			signal.addEventListener("abort", () => {
+				xhr.abort();
+			});
+		}
+
+		onUploadStart();
+		xhr.send(body);
+
+		return xhr; // для отмены снаружи
 	}
 
 	// === Сокращённые методы ===
+
 	get(url, options = {}) {
-		return this.request(url, { method: 'GET', ...options });
+		return this.request(url, { method: "GET", ...options });
 	}
 
 	post(url, body, options = {}) {
-		return this.request(url, { method: 'POST', body, ...options });
+		return this.request(url, { method: "POST", body, ...options });
 	}
 
 	put(url, body, options = {}) {
-		return this.request(url, { method: 'PUT', body, ...options });
+		return this.request(url, { method: "PUT", body, ...options });
 	}
 
 	delete(url, options = {}) {
-		return this.request(url, { method: 'DELETE', ...options });
+		return this.request(url, { method: "DELETE", ...options });
 	}
 
 	patch(url, body, options = {}) {
-		return this.request(url, { method: 'PATCH', body, ...options });
+		return this.request(url, { method: "PATCH", body, ...options });
+	}
+
+	/**
+	 * Сериализация тела (если не FormData)
+	 */
+	_serializeBody(body) {
+		if (!body || body instanceof FormData) return undefined;
+		return JSON.stringify(body);
 	}
 }
 

package/app/utils/js/components/animation.js

@@ -1,61 +1,146 @@
-import {isElement, mergeDeepObject} from "../functions";
+import { isElement, mergeDeepObject } from "../functions";
 import EventHandler from "../dom/event";
 
 /**
- * Классы для анимаций смотрим здесь
- * https://animate.style/
+ * Анимация на основе Animate.css
+ * Поддерживает модули с событиях: show, shown, hide, hidden
  *
- * Работает с модулями у которых есть события show, hide, hidden
+ * @see https://animate.style/
  */
 class Animation {
-	constructor(element, key, params = {}) {
-		this._params = mergeDeepObject({
+	static get DEFAULTS() {
+		return {
 			enable: false,
-			in: 'animate__backInUp',
-			out: 'animate__backOutUp',
-			delay: 0,
-			duration: 800,
-		}, params);
+			in: 'animate__fadeIn',     // Анимация при появлении
+			out: 'animate__fadeOut',   // Анимация при скрытии
+			duration: 500,             // Длительность анимации (мс)
+		};
+	}
+
+	constructor(element, key, userParams = {}) {
+		this._element = element;
+		this._nameKey = key;
+
+		// Объединение параметров
+		this._params = mergeDeepObject(Animation.DEFAULTS, userParams);
 
-		this.classes = {
+		// Ранний выход, если анимация отключена или элемент не валиден
+		if (!this._params.enable || !isElement(element)) {
+			return;
+		}
+
+		this._classes = {
 			animated: 'animate__animated',
-			duration: 'animate__duration-' + this._params.duration
+			duration: 'animate__fast' // Используем классы animate.css
+		};
+
+		this._init();
+	}
+
+	/**
+	 * Инициализация анимации
+	 * @private
+	 */
+	_init() {
+		const { classList } = this._element;
+
+		// Добавляем общие классы
+		classList.add(this._classes.animated, this._classes.duration);
+
+		// Удаляем стандартный класс 'fade', если используется animate.css
+		if (classList.contains('fade')) {
+			classList.remove('fade');
 		}
 
-		if (!this._params.enable) return;
-		if (!isElement(element)) return;
+		// Назначаем обработчики событий
+		this._setupEventListeners();
+	}
 
-		this._element = element;
-		this._name_key = key;
+	/**
+	 * Назначение обработчиков событий
+	 * @private
+	 */
+	_setupEventListeners() {
+		EventHandler.on(this._element, `${this._nameKey}.show`, this._handleShow.bind(this), null);
+		EventHandler.on(this._element, `${this._nameKey}.shown`, this._handleShown.bind(this), null);
+		EventHandler.on(this._element, `${this._nameKey}.hide`, this._handleHide.bind(this), null);
+		EventHandler.on(this._element, `${this._nameKey}.hidden`, this._handleHidden.bind(this), null);
+	}
+
+	/**
+	 * Обработка события "show" — запуск анимации входа
+	 * @private
+	 */
+	_handleShow() {
+		const { classList } = this._element;
+		const { in: inClass, out: outClass } = this._params;
+
+		// Убираем выходную анимацию, если была
+		if (classList.contains(outClass)) {
+			classList.remove(outClass);
+		}
+
+		// Добавляем входную анимацию
+		classList.add(inClass);
+	}
+
+	/**
+	 * Обработка события "shown" — завершение анимации входа
+	 * @private
+	 */
+	_handleShown() {
+		this._element.classList.add(this._classes.animated);
+	}
+
+	/**
+	 * Обработка события "hide" — запуск анимации выхода
+	 * @private
+	 */
+	_handleHide() {
+		const { classList } = this._element;
+		const { in: inClass, out: outClass } = this._params;
+
+		// Убираем входную анимацию
+		if (classList.contains(inClass)) {
+			classList.remove(inClass);
+		}
+
+		// Добавляем выходную анимацию
+		classList.add(outClass);
+	}
 
-		this._element.classList.add(this.classes.duration);
+	/**
+	 * Обработка события "hidden" — очистка анимационных классов
+	 * @private
+	 */
+	_handleHidden() {
+		const { classList } = this._element;
+		const { in: inClass, out: outClass } = this._params;
 
-		if (this._element.classList.contains('fade')) this._element.classList.remove('fade');
+		// Удаляем все анимационные классы animate.css
+		[...classList]
+			.filter(cls => cls.startsWith('animate__'))
+			.forEach(cls => classList.remove(cls));
 
-		this._triggers();
+		// Восстанавливаем базовые классы для будущих анимаций
+		classList.add(this._classes.animated, this._classes.duration);
 	}
 
-	_triggers() {
-		EventHandler.on(this._element, this._name_key + '.show', () => {
-			this._element.classList.remove(this._params.out);
-			this._element.classList.add(this._params.in);
-		});
-		EventHandler.on(this._element, this._name_key + '.shown', () => {
-			this._element.classList.add(this.classes.animated);
-		});
+	/**
+	 * Уничтожение экземпляра (очистка событий)
+	 */
+	dispose() {
+		EventHandler.off(this._element, `${this._nameKey}.show`, null, null);
+		EventHandler.off(this._element, `${this._nameKey}.shown`, null, null);
+		EventHandler.off(this._element, `${this._nameKey}.hide`, null, null);
+		EventHandler.off(this._element, `${this._nameKey}.hidden`, null, null);
 
-		EventHandler.on(this._element, this._name_key + '.hide', () => {
-			this._element.classList.remove(this._params.in);
-			this._element.classList.add(this._params.out);
-		});
+		// Очищаем анимационные классы
+		[...this._element.classList]
+			.filter(cls => cls.startsWith('animate__'))
+			.forEach(cls => this._element.classList.remove(cls));
 
-		EventHandler.on(this._element, this._name_key + '.hidden', () => {
-			[... this._element.classList].forEach((cl) => {
-				if (cl.indexOf('animate__') !== -1) {
-					this._element.classList.remove(cl);
-				}
-			})
-		});
+		this._element = null;
 	}
 }
 

package/app/utils/js/components/backdrop.js

@@ -1,7 +1,8 @@
-import {execute} from "../functions";
-import Selectors from "../dom/selectors";
+import { execute } from "../functions";
 import EventHandler from "../dom/event";
-import Overflow from "./overflow";
+import Html from "../components/templater";
+import { Classes } from "../dom/manipulator";
+import ScrollBarHelper from "./scrollbar";
 
 const NAME = 'backdrop';
 const CLASS_NAME = 'vg-backdrop';
@@ -9,50 +10,72 @@ const CLASS_NAME_FADE = 'fade';
 const CLASS_NAME_SHOW = 'show';
 const EVENT_MOUSEDOWN = `mousedown.vg.${NAME}`;
 
-let backdrop_delay = 500;
+const backdropDelay = 150; // Уменьшено для более плавного UX
 
 class Backdrop {
+	static _rootEl = document.body;
+	static _scrollbar = new ScrollBarHelper();
+	static _backdrop = null;
+
+	/**
+	 * Показывает бэкдроп
+	 * @param {Function} callback - вызывается после отображения
+	 */
 	static show(callback) {
-		Backdrop._append()
+		if (!this._backdrop) {
+			this._append();
+		}
+
 		execute(callback);
 	}
 
+	/**
+	 * Скрывает бэкдроп
+	 * @param {Function} callback - вызывается после скрытия
+	 */
 	static hide(callback) {
-		Backdrop._destroy();
-		execute(callback);
+		if (!this._backdrop) return;
+
+		this._destroy().then(execute.bind(null, callback));
 	}
 
+	/**
+	 * Создаёт и добавляет элемент бэкдропа
+	 * @private
+	 */
 	static _append() {
-		if (Selectors.find('.' + CLASS_NAME)) {
-			return false;
-		}
+		const html = Html('dom');
+		this._backdrop = html.div({ class: CLASS_NAME });
 
-		let backdrop = document.createElement('div');
-		backdrop.classList.add(CLASS_NAME);
-
-		document.body.append(backdrop);
-		backdrop.classList.add(CLASS_NAME_SHOW)
-
-		setTimeout(() => {
-			backdrop.classList.add(CLASS_NAME_FADE)
-		}, 50);
+		this._rootEl.appendChild(this._backdrop);
+		requestAnimationFrame(() => {
+			Classes.add(this._backdrop, CLASS_NAME_SHOW);
+			setTimeout(() => {
+				Classes.add(this._backdrop, CLASS_NAME_FADE);
+			}, backdropDelay);
+		});
 
-		EventHandler.on(backdrop, EVENT_MOUSEDOWN, () => {
-			Backdrop.hide()
-			Overflow.destroy();
+		EventHandler.on(this._backdrop, EVENT_MOUSEDOWN, () => {
+			this.hide();
 		});
 	}
 
+	/**
+	 * Удаляет бэкдроп с анимацией
+	 * @returns {Promise}
+	 * @private
+	 */
 	static _destroy() {
-		let element = Selectors.find('.' + CLASS_NAME);
-		if (!element) return;
-
-		element.classList.remove(CLASS_NAME_FADE);
-
-		setTimeout(() => {
-			element.classList.remove(CLASS_NAME_SHOW);
-			element.remove();
-		}, backdrop_delay);
+		return new Promise((resolve) => {
+			Classes.remove(this._backdrop, CLASS_NAME_FADE);
+			setTimeout(() => {
+				Classes.remove(this._backdrop, CLASS_NAME_SHOW);
+				this._backdrop.remove();
+				this._backdrop = null;
+				this._scrollbar.reset();
+				resolve();
+			}, backdropDelay);
+		});
 	}
 }