vgapp 0.7.7 → 0.7.9

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

@@ -0,0 +1,237 @@
+import {mergeDeepObject, noop, normalizeData} from "../functions";
+
+class Ajax {
+	/**
+	 * Конфигурация запроса
+	 * @param {Object} options
+	 * @param {string} options.baseUrl - Базовый URL API (опционально)
+	 * @param {Object} options.headers - Доп. заголовки (например, авторизация)
+	 * @param {boolean} options.withCredentials - Отправлять ли куки (для авторизованных запросов)
+	 * @param {string} options._token - Токен (авто-чтение из meta)
+	 */
+	constructor(options = {}) {
+		this.baseUrl = options.baseUrl || '';
+		this.defaultHeaders = {
+			'X-Requested-With': 'XMLHttpRequest',
+			...options.headers
+		};
+		this.withCredentials = options.withCredentials || false;
+		this.csrfToken = options._token || this._getCsrfToken();
+	}
+
+	/**
+	 * Получение csrf токена из тега meta
+	 * @returns {string}
+	 * @private
+	 */
+	_getCsrfToken() {
+		const meta = document.querySelector('meta[name="csrf-token"]');
+		if (meta) return meta.getAttribute('content');
+		console.warn('CSRF-токен не найден в <meta name="csrf-token">');
+		return '';
+	}
+
+	/**
+	 * Универсальный метод отправки запроса
+	 * @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 {Function} options.onSuccess
+	 * @param {Function} options.onError
+	 * @param {Function} options.onUploadStart
+	 * @param {Function} options.onUploadEnd
+	 */
+	request(url, {
+		method = 'GET',
+		body = null,
+		headers = {},
+		onProgress = null,
+		onSuccess = (data) => noop(),
+		onError = (error) => noop(),
+		onUploadStart = () => {},
+		onUploadEnd = () => {}
+	} = {}) {
+		const fullUrl = this.baseUrl + url;
+		const isFormData = body instanceof FormData;
+		const requestHeaders = { ...this.defaultHeaders, ...headers };
+		const token = {};
+
+		if (!isFormData && this.csrfToken) {
+			token.body = JSON.stringify({
+				_token: this.csrfToken
+			})
+		}
+
+		// Для JSON устанавливаем заголовок, для FormData — НЕЛЬЗЯ
+		if (!isFormData && !('Content-Type' in headers)) {
+			requestHeaders['Content-Type'] = 'application/json';
+		}
+
+		// Если это GET-запрос — тело игнорируется
+		if (method.toUpperCase() === 'GET') {
+			return this._makeFetch(fullUrl, {
+				method,
+				headers: requestHeaders,
+				withCredentials: this.withCredentials
+			}, onSuccess, onError);
+		}
+
+		// Для FormData — используем XMLHttpRequest, чтобы отслеживать прогресс
+		if (isFormData || onProgress) {
+			return this._makeXHR({
+				method,
+				url: fullUrl,
+				body,
+				headers: requestHeaders,
+				onProgress,
+				onSuccess,
+				onError,
+				onUploadStart,
+				onUploadEnd
+			});
+		}
+
+		// Остальные случаи — fetch
+		return this._makeFetch(fullUrl, mergeDeepObject({
+			method,
+			headers: requestHeaders,
+			withCredentials: this.withCredentials
+		}, token), onSuccess, onError);
+	}
+
+	/**
+	 * Использование fetch (для JSON)
+	 */
+	_makeFetch(url, config, onSuccess, onError) {
+		return fetch(url, config)
+			.then(response => {
+				if (!response.ok) {
+					throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+				}
+				const contentType = response.headers.get('content-type');
+				if (contentType && contentType.includes('application/json')) {
+					return {
+						code: response.status,
+						response: response.json()
+					};
+				}
+
+				return {
+					code: response.status,
+					response: response.text()
+				};
+			})
+			.then(data => {
+				if ('response' in data) {
+					if (data.response instanceof Promise) {
+						data.response.then(text => {
+							onSuccess({
+								code: data.code,
+								response: text
+							})
+						})
+					} else {
+						onSuccess(data)
+					}
+				} else {
+					onSuccess(data)
+				}
+			})
+			.catch(error => onError(error));
+	}
+
+	/**
+	 * Использование XHR (для FormData и прогресса)
+	 */
+	_makeXHR({
+		         method,
+		         url,
+		         body,
+		         headers,
+		         onProgress,
+		         onSuccess,
+		         onError,
+		         onUploadStart,
+		         onUploadEnd
+	         }) {
+		return new Promise((resolve, reject) => {
+			const xhr = new XMLHttpRequest();
+
+			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]);
+				}
+			});
+
+			// Отслеживание прогресса загрузки
+			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) {
+					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 = () => {
+				const error = new Error('Network Error');
+				onError(error);
+				reject(error);
+				onUploadEnd();
+			};
+
+			onUploadStart();
+			xhr.send(body);
+		});
+	}
+
+	// === Сокращённые методы ===
+	get(url, options = {}) {
+		return this.request(url, { method: 'GET', ...options });
+	}
+
+	post(url, body, options = {}) {
+		return this.request(url, { method: 'POST', body, ...options });
+	}
+
+	put(url, body, options = {}) {
+		return this.request(url, { method: 'PUT', body, ...options });
+	}
+
+	delete(url, options = {}) {
+		return this.request(url, { method: 'DELETE', ...options });
+	}
+
+	patch(url, body, options = {}) {
+		return this.request(url, { method: 'PATCH', body, ...options });
+	}
+}
+
+export default Ajax;

package/app/utils/js/components/lang.js

@@ -0,0 +1,108 @@
+import {normalizeData} from "../functions";
+
+const langs = {
+	ru: {
+		messages: {
+			errors: {
+				went_wrong: 'Что-то пошло не так, повторите позже',
+				"400": 'Неверный запрос',
+				"401": 'Не авторизован',
+				"403": 'Запрещено',
+				"404": 'Не найдено',
+				"413": 'Слишком большой запрос',
+				"419": 'Проблемы с токеном CSRF',
+				"422": 'Неверный запрос',
+				"500": 'Внутренняя ошибка сервера',
+				"504": 'Превышено время ожидания'
+			},
+			'form-sender': {
+				'bootstrap_not_found': 'VGApp не удалось найти bootstrap, модалки не будут закрыты, попробуйте сделать это через коллбек afterSend.'
+			},
+			alert: {
+				title: 'Заголовок по умолчанию',
+				description: 'Описание текущего действия',
+				reason: 'Алерт уже открыт'
+			}
+		},
+		titles: {
+			errors: {
+				title: 'Ошибка',
+				titles: 'Ошибки'
+			}
+		},
+		buttons: {
+			alert: {
+				agree: 'Да, согласен',
+				cancel: 'Отмена'
+			}
+		}
+	},
+	en: {
+		messages: {
+			errors: {
+				went_wrong: 'Something went wrong, please repeat later',
+				"400": 'Bad Request',
+				"401": 'Unauthorized',
+				"403": 'Forbidden',
+				"404": 'Not Found',
+				"413": 'Payload Too Large',
+				"419": 'Problems with the CSRF token',
+				"422": 'Unprocessable Entity',
+				"500": 'Internal Server Error',
+				"504": 'Gateway Timeout'
+			},
+			'form-sender': {
+				'bootstrap_not_found': 'VGApp could not find bootstrap, the modals will not be closed, try to do this through the afterSend callback.'
+			},
+			alert: {
+				title: 'Default header',
+				description: 'Description of the current action',
+				reason: 'Alert already open'
+			}
+		},
+		titles: {
+			errors: {
+				title: 'Error',
+				titles: 'Errors'
+			}
+		},
+		buttons: {
+			alert: {
+				agree: 'Yeah, I agree',
+				cancel: 'Cancel'
+			}
+		}
+	},
+};
+
+class Lang {
+	constructor(lang = 'en') {
+		this.lang = lang;
+	}
+
+	get() {
+		let data = langs[this.lang];
+
+		if (!data) data = langs['en'];
+
+		return normalizeData(data);
+	}
+}
+
+function lang(lg, mode, module) {
+	return new Lang(lg).get()[mode][module];
+}
+
+function lang_titles(lg, module) {
+	return lang(lg, 'titles', module) || {};
+}
+
+function lang_messages(lg, module) {
+	return lang(lg, 'messages', module) || {};
+}
+
+function lang_buttons(lg, module) {
+	return lang(lg, 'buttons', module) || {};
+}
+
+export {lang, lang_messages, lang_titles, lang_buttons};

package/app/utils/js/components/params.js

@@ -37,6 +37,11 @@ class Params {
 		}
 
 		for (let key in mParams) {
+			if ('params' in mParams) {
+				mParams = mergeDeepObject(mParams, mParams.params);
+				delete mParams.params;
+			}
+
 			if (key.indexOf('-') !== -1) {
 				mParams = stringToNestedObjectWithValue(key, mParams[key], mParams);
 				delete mParams[key];

package/app/utils/js/components/placement.js

@@ -3,138 +3,141 @@ import {Classes} from "../dom/manipulator";
 
 /**
  * Класс Placement, определяет и устанавливает местоположение элемента на странице.
- * TODO класс не дописан, не определяет сверху и снизу
  */
 
-const CLASS_NAME_RIGHT   = 'right';
-const CLASS_NAME_LEFT    = 'left';
-const CLASS_NAME_TOP     = 'top';
-const CLASS_NAME_BOTTOM  = 'bottom';
-
 class Placement {
-	constructor(arg = {}) {
-		this.params = mergeDeepObject({
-			element: null,
-			drop: null
-		}, arg);
-
-		this._drop = null;
-		this.drop = this.params.drop;
-
-		this._element = null;
-		this.element = this.params.element;
-
-		if (!this.drop) return false;
-	}
-
-	get drop() {
-		return this._drop;
-	}
-
-	set drop(el) {
-		if (!el) return;
-		this._drop = el;
+	constructor(config) {
+		this.reference = config.reference;
+		this.drop = config.drop;
+		this.offset = config.offset || [0, 0];
+		this.boundary = config.boundary || 'viewport';
+		this.autoFlip = config.autoFlip !== false;
+		this.overflowProtection = config.overflowProtection !== false;
+		this.placement = config.placement || 'bottom';
+		this.fallbackPlacements = config.fallbackPlacements || [];
+
+		this._builtInPlacements = {
+			top: 'top',
+			'top-start': 'top-start',
+			'top-end': 'top-end',
+			bottom: 'bottom',
+			'bottom-start': 'bottom-start',
+			'bottom-end': 'bottom-end',
+			left: 'left',
+			'left-start': 'left-start',
+			'left-end': 'left-end',
+			right: 'right',
+			'right-start': 'right-start',
+			'right-end': 'right-end'
+		};
 	}
 
-	get element() {
-		return this._element;
+	_getPlacementRect(element) {
+		return element.getBoundingClientRect();
 	}
 
-	set element(el) {
-		if (!el) {
-			if (this.drop) {
-				this._element = this.drop.parentNode;
-			}
-		}
-
-		this._element = el;
+	_getViewportRect() {
+		const doc = document.documentElement;
+		return {
+			width: doc.clientWidth,
+			height: doc.clientHeight,
+			left: 0,
+			top: 0,
+			right: doc.clientWidth,
+			bottom: doc.clientHeight
+		};
 	}
 
-	_setPlacement() {
-		let rect = this._isElementInViewport(this.drop);
-
-		if (!rect.isView) {
-			if (!rect.isViewRight) {
-				Classes.remove(this.drop, CLASS_NAME_LEFT);
-				Classes.add(this.drop, CLASS_NAME_RIGHT);
-			}
+	_getOverflowConstraints() {
+		const refRect = this._getPlacementRect(this.reference);
+		const dropRect = this._getPlacementRect(this.drop);
+		const viewRect = this._getViewportRect();
+		const [xOffset, yOffset] = this.offset;
 
-			if (!rect.isViewLeft) {
-				Classes.remove(this.drop, CLASS_NAME_RIGHT);
-				Classes.add(this.drop, CLASS_NAME_LEFT);
-			}
+		let placement = this.placement;
 
-			if (!rect.isViewTop) {
-				Classes.remove(this.drop, CLASS_NAME_BOTTOM);
-				Classes.add(this.drop, CLASS_NAME_TOP);
-			}
+		if (this.overflowProtection) {
+			const fallbacks = [this.placement, ...this.fallbackPlacements];
+			let best = null;
 
-			if (!rect.isViewBottom) {
-				Classes.remove(this.drop, CLASS_NAME_TOP);
-				Classes.add(this.drop, CLASS_NAME_BOTTOM);
-			}
-		}
-	}
+			for (let p of fallbacks) {
+				let pos = this._calculatePosition(p, refRect, dropRect, xOffset, yOffset);
+				let overflow = this._calculateOverflow(pos, viewRect);
 
-	_getPlacement() {
-		const _this = this;
-		const _parent = (self) => {
-			let parent = self.parentNode,
-				overflow = getComputedStyle(parent).overflow;
-
-			if (parent.tagName !== 'BODY') {
-				if (overflow === 'visible') {
-					_parent(parent)
-				} else {
-					return parent;
+				if (!best || overflow < best.overflow) {
+					best = { placement: p, position: pos, overflow };
+					if (overflow === 0) break;
 				}
-			} else {
-				return null;
 			}
-		}
-
-		let isFixed = false, top, left,
-			bounds = _this.params.drop.getBoundingClientRect(),
-			parent = _this.params.element.getBoundingClientRect();
 
-		if (_parent(_this.params.element)) {
-			isFixed = true;
-			top = bounds.top;
-			left = bounds.left;
+			placement = best.placement;
+			this._setStyles(best.position);
 		} else {
-			let styles = getComputedStyle(_this.params.drop);
-			top = normalizeData(styles.top.slice(0, -2));
-			left = normalizeData(styles.left.slice(0, -2));
+			const pos = this._calculatePosition(placement, refRect, dropRect, xOffset, yOffset);
+			this._setStyles(pos);
 		}
 
-		if ((bounds.left + bounds.width) > window.innerWidth) {
-			left = parent.width - bounds.width;
-		}
+		this.drop.setAttribute('data-vg-placement', placement);
+	}
 
-		return {
-			isFixed: isFixed,
-			top: top,
-			left: left
+	_calculatePosition(placement, refRect, dropRect, xOffset = 0, yOffset = 0) {
+		let top, left;
+
+		switch (placement) {
+			case 'top':
+			case 'top-start':
+				top = refRect.top - dropRect.height - yOffset;
+				left = placement === 'top-start' ? refRect.left + xOffset : refRect.left + (refRect.width - dropRect.width) / 2;
+				break;
+			case 'top-end':
+				top = refRect.top - dropRect.height - yOffset;
+				left = refRect.right - dropRect.width - xOffset;
+				break;
+			case 'bottom':
+			case 'bottom-start':
+				top = refRect.bottom + yOffset;
+				left = placement === 'bottom-start' ? refRect.left + xOffset : refRect.left + (refRect.width - dropRect.width) / 2;
+				break;
+			case 'bottom-end':
+				top = refRect.bottom + yOffset;
+				left = refRect.right - dropRect.width - xOffset;
+				break;
+			case 'left':
+				top = refRect.top + (refRect.height - dropRect.height) / 2;
+				left = refRect.left - dropRect.width - xOffset;
+				break;
+			case 'right':
+				top = refRect.top + (refRect.height - dropRect.height) / 2;
+				left = refRect.right + xOffset;
+				break;
+			default:
+				top = refRect.bottom + yOffset;
+				left = refRect.left + xOffset;
 		}
+
+		return { top, left };
 	}
 
-	_isElementInViewport(element) {
-		const rect = element.getBoundingClientRect();
-		const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
-		const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+	_calculateOverflow(pos, viewRect) {
+		let overflow = 0;
+		if (pos.left < viewRect.left) overflow += viewRect.left - pos.left;
+		if (pos.top < viewRect.top) overflow += viewRect.top - pos.top;
+		if (pos.left + this.drop.offsetWidth > viewRect.right) overflow += (pos.left + this.drop.offsetWidth) - viewRect.right;
+		if (pos.top + this.drop.offsetHeight > viewRect.bottom) overflow += (pos.top + this.drop.offsetHeight) - viewRect.bottom;
+		return overflow;
+	}
 
-		return {
-			isView: (
-				rect.top >= 0 &&
-				rect.left >= 0 &&
-				rect.bottom <= viewportHeight &&
-				rect.right <= viewportWidth
-			),
-			isViewRight: rect.right <= viewportWidth,
-			isViewLeft: rect.left >= 0,
-			isViewTop: rect.top >= 0,
-			isViewBottom: rect.bottom <= viewportHeight,
-		};
+	_setStyles(pos) {
+		mergeDeepObject(this.drop.style, {
+			position: 'absolute',
+			top: `${pos.top}px`,
+			left: `${pos.left}px`,
+			margin: 0
+		})
+	}
+
+	_setPlacement() {
+		this._getOverflowConstraints();
 	}
 }