vgapp 0.7.9 → 0.8.1

package/app/modules/vgloadmore/js/vgloadmore.js

@@ -1,37 +1,42 @@
 import BaseModule from "../../base-module";
 import EventHandler from "../../../utils/js/dom/event";
-import {execute, isObject, mergeDeepObject, normalizeData} from "../../../utils/js/functions";
+import { execute, isObject, mergeDeepObject, normalizeData } from "../../../utils/js/functions";
 import Selectors from "../../../utils/js/dom/selectors";
-import {Manipulator} from "../../../utils/js/dom/manipulator";
-
-const NAME             = 'loadmore';
-const NAME_KEY         = 'vg.loadmore';
+import { Manipulator } from "../../../utils/js/dom/manipulator";
+import {lang_buttons} from "../../../utils/js/components/lang";
 
+const NAME = 'loadmore';
+const NAME_KEY = 'vg.loadmore';
 const SELECTOR_DATA_TOGGLE = '[data-vg-toggle="loadmore"]';
+const SELECTOR_DATA_MODULE = '[data-vgloadmore]';
 
-const EVENT_KEY_HIDE   = `${NAME_KEY}.hide`;
-const EVENT_KEY_HIDDEN = `${NAME_KEY}.hidden`;
-const EVENT_KEY_SHOW   = `${NAME_KEY}.show`;
-const EVENT_KEY_SHOWN  = `${NAME_KEY}.shown`;
 const EVENT_KEY_LOADED = `${NAME_KEY}.loaded`;
-
+const EVENT_KEY_BEFORE_LOAD = `${NAME_KEY}.before.load`;
 const CLASS_NAME_HIDE = 'vg-collapse';
 const CLASS_NAME_SHOW = 'show';
+const EVENT_KEY_CLICK_DATA_API = `click.${NAME_KEY}.data.api`;
 
-const EVENT_KEY_CLICK_DATA_API      = `click.${NAME_KEY}.data.api`;
-
-class VGLoadMore extends BaseModule{
+class VGLoadMore extends BaseModule {
 	constructor(element, params) {
 		super(element, params);
 
 		this._params = this._getParams(element, mergeDeepObject({
+			lang: document.documentElement.lang || 'ru',
 			limit: 0,
 			offset: 0,
 			output: true,
 			autohide: true,
+			animate: false,
+			append: 'after',
+			mode: 'button',
+			threshold: 100,
+			debug: false,
+			detach: false,
 			button: {
 				text: '',
-				send: 'Загружаем...',
+				send: 'Загружаю...',
+				show: 'Показываю...',
+				loader: false,
 				classes: []
 			},
 			ajax: {
@@ -41,168 +46,263 @@ class VGLoadMore extends BaseModule{
 				loader: false,
 				once: false,
 				output: false,
-			},
+				data: {}
+			}
 		}, params));
 
-		this.fOffset = this._params.offset;
+		this._observer = null;
+		this._isScrollMode = this._params.mode === 'scroll';
+		this._isToggleElement = element.hasAttribute('data-vg-toggle');
+
+		this._params.button.send = lang_buttons(this._params.lang, NAME)['send'];
+		this._params.button.show = lang_buttons(this._params.lang, NAME)['show'];
 
 		if (!this._params.button.text) {
-			this._params.button.text = this._element.innerHTML;
+			this._params.button.text = this._isToggleElement
+				? this._element.innerHTML.trim() || lang_buttons(this._params.lang, NAME)['text-ajax']
+				: this._params.ajax.route ? lang_buttons(this._params.lang, NAME)['text-ajax'] : lang_buttons(this._params.lang, NAME)['text-more'];
 		}
-	}
 
-	static get NAME() {
-		return NAME;
+		if (this._isToggleElement) {
+			this._initializeAsButton();
+		} else {
+			this._initializeContainer();
+		}
 	}
 
-	static get NAME_KEY() {
-		return NAME_KEY;
-	}
+	static get NAME() { return NAME; }
+	static get NAME_KEY() { return NAME_KEY; }
 
-	static init(el, callback) {
-		let id           = el.id,
-			items        = normalizeData(el.dataset.elements),
-			limit        = normalizeData(el.dataset.limit),
-			offset       = normalizeData(el.dataset.offset),
-			output       = el.dataset.output || 'true',
-			autohide     = el.dataset.autohide || 'true',
-			params       = el.dataset.params,
-			buttonParams = normalizeData(el.dataset.button);
-
-		if (!isObject(buttonParams)) {
-			console.error('Дата атрибут data-button должен быть в формате json и передавать объект');
-			return;
+	_initializeAsButton() {
+		if (this._isScrollMode) {
+			this._initScrollMode();
 		}
+	}
+
+	_initializeContainer() {
+		const { elements: itemClass, limit } = this._params;
+		const container = this._element;
+		const items = Selectors.findAll(`.${itemClass}`, container);
 
-		if (limit < offset) {
-			console.error('Параметр offset должен быть меньше или равен параметру limit');
+		if (!this._params.ajax.route && (items.length <= limit || this._params.offset >= items.length)) {
 			return;
 		}
 
-		if (!id && !items && !limit && !offset) return;
+		items.forEach((item, i) => {
+			item.classList.toggle(CLASS_NAME_SHOW, i < limit);
+			item.classList.toggle(CLASS_NAME_HIDE, i >= limit);
+		});
+
+		if (this._params.mode === 'button') {
+			this._createAndInsertButton(container);
+		} else if (this._isScrollMode) {
+			this._initScrollMode();
+		}
 
-		let itemsElements = [... Selectors.findAll('.' + items, el)];
+		if (this._params.offset === 0) {
+			this._params.offset = limit;
+		}
+	}
 
-		if (itemsElements.length <= limit) return;
+	_createAndInsertButton(container) {
+		const button = document.createElement('button');
+		const buttonText = normalizeData(container.dataset.buttonText) || this._params.button.text;
 
-		itemsElements.forEach((item, i) => {
-			item.classList.add(CLASS_NAME_HIDE)
-			if ((i + 1) <= limit) item.classList.add(CLASS_NAME_SHOW)
+		const buttonData = {
+			limit: this._params.limit,
+			offset: this._params.offset,
+			output: this._params.output,
+			autohide: this._params.autohide,
+			animate: this._params.animate,
+			append: this._params.append,
+			mode: this._params.mode,
+			threshold: this._params.threshold,
+			debug: this._params.debug,
+			detach: this._params.detach,
+			elements: this._params.elements,
+			'vg-toggle': 'loadmore',
+			target: `#${container.id}`
+		};
+
+		Object.assign(buttonData, normalizeData(container.dataset.params));
+
+		Object.keys(buttonData).forEach(key => {
+			Manipulator.set(button, `data-${key}`, buttonData[key]);
 		});
 
-		let button = document.createElement('button');
+		button.textContent = buttonText;
+		button.classList.add(...this._params.button.classes);
 
-		buttonParams.text = normalizeData(el.dataset.buttonText) || 'Показать еще';
+		container.parentNode.insertBefore(button, container.nextSibling);
+	}
 
-		Manipulator.set(button, 'data-limit', limit);
-		Manipulator.set(button, 'data-offset', offset);
-		Manipulator.set(button, 'data-output', output);
-		Manipulator.set(button, 'data-autohide', autohide);
-		Manipulator.set(button, 'data-elements', items);
-		Manipulator.set(button, 'data-vg-toggle', 'loadmore');
-		Manipulator.set(button, 'data-target', '#' + id);
+	_initScrollMode() {
+		this._setupIntersectionObserver();
+		this._observeLastVisibleItem();
+	}
 
-		if (params) Manipulator.set(button, 'data-autohide', params);
+	_setupIntersectionObserver() {
+		if (this._observer) return;
+
+		this._observer = new IntersectionObserver((entries) => {
+			entries.forEach(entry => {
+				if (entry.isIntersecting) {
+					this._params.debug && console.log('[VGLoadMore] Пересечение — вызов toggle');
+					this.toggle();
+				}
+			});
+		}, {
+			root: null,
+			rootMargin: `0px 0px ${this._params.threshold}px 0px`,
+			threshold: 0.1
+		});
+	}
 
-		button.innerHTML = buttonParams.text
+	_observeLastVisibleItem() {
+		if (!this._observer) return;
 
-		if ('classes' in buttonParams && buttonParams.classes.length) {
-			buttonParams.classes.forEach(cl => button.classList.add(cl));
-		}
+		this._observer.disconnect();
 
-		el.parentNode.insertBefore(button, el.nextSibling);
+		const container = Selectors.find(this._params.target) || this._element.parentNode;
+		const items = Selectors.findAll(`.${this._params.elements}`, container);
+		const visibleItems = items.filter(item => item.classList.contains(CLASS_NAME_SHOW));
+		const lastVisible = visibleItems[visibleItems.length - 1];
 
-		execute(callback, [el, button]);
+		if (lastVisible instanceof Element) {
+			this._observer.observe(lastVisible);
+		}
 	}
 
 	toggle(callback) {
-		if (this._params.ajax.route) {
-			this.ajax(callback);
-		} else {
-			this.static(callback);
+		this._params.debug && console.log('[VGLoadMore] toggle()');
+
+		if (EventHandler.trigger(this._element, EVENT_KEY_BEFORE_LOAD).defaultPrevented) return;
+
+		const isButton = this._isToggleElement || (['BUTTON', 'A'].includes(this._element.tagName) && !this._isScrollMode);
+		if (isButton) {
+			this._element.disabled = true;
+			this._element.innerHTML = this._params.ajax.route ? this._params.button.send : this._params.button.show;
 		}
+
+		this._params.ajax.route ? this.ajax(callback) : this.staticLoad(callback);
 	}
 
 	ajax(callback) {
-		this._params.ajax.data = {
-			limit: this._params.limit,
-			offset: this._params.offset
+		const targetSelector = this._params.ajax.target?.trim();
+		let targetEl = null;
+
+		if (targetSelector) {
+			targetEl = Selectors.find(targetSelector);
+		} else {
+			targetEl = this._element
 		}
 
-		if (this._params.button.send) {
-			this._element.innerHTML = this._params.button.send;
+		const originalText = this._params.button.text;
+
+		if (!targetEl) {
+			console.error('[VGLoadMore] target элемент не найден:', this._params.ajax.target);
+			return;
 		}
 
-		this._route((status, data, target) => {
-			if ('loader' in this._params.ajax && this._params.ajax.loader) {
-				let loader = Selectors.find('.vg-loader', target);
-				if (loader) loader.remove();
-			}
+		this._params.ajax.data = { limit: this._params.limit, offset: this._params.offset };
 
-			if ('output' in this._params && this._params.output) {
-				target.insertAdjacentHTML('beforeend', data.response);
+		this._route((status, data, responseTarget) => {
+			if (status === 'error' || typeof data?.response !== 'string') return;
+
+			if (this._params.output) {
+				targetEl.insertAdjacentHTML(
+					this._params.append === 'after' ? 'beforeend' : 'afterbegin',
+					data.response
+				);
 			}
 
-			this._params.offset = this.counter();
-			this._element.innerHTML = this._params.button.text;
+			this._params.offset += this._params.limit;
+			this._restoreElementState(originalText);
+			this._observeLastVisibleItem();
 
-			if ('autohide' in this._params && this._params.autohide) {
-				if (!data.response) this._element.remove();
+			const noMoreData = !data.response.trim();
+			if (this._params.autohide && this._params.detach && noMoreData) {
+				this._autohideTrigger();
 			}
 
-			EventHandler.trigger(this._element, EVENT_KEY_LOADED, {stats: status, data: data});
-			execute(callback, [this, data, target, status]);
+			EventHandler.trigger(this._element, EVENT_KEY_LOADED, { stats: status, data });
+			execute(callback, [this, data, responseTarget, status]);
+		}, (error) => {
+			this._restoreElementState(originalText);
+			console.error('[VGLoadMore] AJAX ошибка', error);
 		});
 	}
 
-	static(callback) {
-		if (!'elements' in this._params && !'target' in this._params) return;
+	staticLoad(callback) {
+		const container = Selectors.find(this._params.target) || this._element.parentNode;
+		const items = Selectors.findAll(`.${this._params.elements}`, container);
+		const start = this._params.offset;
+		const end = start + this._params.limit;
+		const newItems = items.slice(start, end);
 
-		let container = Selectors.find(this._params.target),
-			items = Selectors.findAll('.' + this._params.elements, container);
+		if (newItems.length === 0) return;
 
-		if (items) {
-			items.slice(this._params.offset, this._params.offset + this._params.limit).forEach(item => item.classList.add(CLASS_NAME_SHOW));
-			this._params.offset = this.counter();
+		if (this._isToggleElement || (['BUTTON', 'A'].includes(this._element.tagName) && !this._isScrollMode)) {
+			this._element.disabled = true;
+			this._element.innerHTML = this._params.button.show;
 		}
 
-		let itemsHidden = Selectors.findAll('.' + this._params.elements + ':not(.show)', container);
-
-		if (this.remainder(itemsHidden.length)) {
-			if ('autohide' in this._params && this._params.autohide) {
-				this._element.remove();
+		newItems.forEach(item => {
+			item.classList.replace(CLASS_NAME_HIDE, CLASS_NAME_SHOW);
+			if (this._params.animate) {
+				item.style.opacity = 0;
+				requestAnimationFrame(() => {
+					item.style.transition = 'opacity 0.3s ease';
+					item.style.opacity = 1;
+				});
 			}
+		});
+
+		this._params.offset = end;
+		this._observeLastVisibleItem();
+
+		const remaining = items.slice(end);
+		if (this._params.autohide && this._params.detach && remaining.length === 0) {
+			this._autohideTrigger();
 		}
 
+		this._restoreElementState(this._params.button.text);
 		execute(callback, [this, this._element]);
 	}
 
-	counter() {
-		return this.fOffset + this._params.offset;
+	_restoreElementState(text) {
+		const isButton = this._isToggleElement || this._element.tagName === 'BUTTON';
+		if (isButton && !this._isScrollMode) {
+			this._element.disabled = false;
+			this._element.innerHTML = text;
+		}
+	}
+
+	_autohideTrigger() {
+		if (this._isScrollMode) {
+			this._observer?.disconnect();
+			this._observer = null;
+		} else if (this._params.detach && this._element.parentNode) {
+			this._element.remove();
+		}
 	}
 
-	remainder(count) {
-		return count === 0
+	dispose() {
+		this._observer?.disconnect();
+		super.dispose();
 	}
 }
 
-EventHandler.on(document, 'DOMContentLoaded', function () {
-	[... document.querySelectorAll('[data-vgloadmore]')].forEach(el => {
-		VGLoadMore.init(el);
-	})
+EventHandler.on(document, 'DOMContentLoaded', () => {
+	Selectors.findAll(SELECTOR_DATA_MODULE).forEach(el => {
+		!el.dataset.initialized && VGLoadMore.getOrCreateInstance(el);
+		el.dataset.initialized = 'true';
+	});
 });
 
-/**
- * Data API implementation
- */
 EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
-	const target = this;
-
-	if (['A', 'AREA'].includes(this.tagName)) event.preventDefault();
-
-	const instance = VGLoadMore.getOrCreateInstance(target);
-	instance.toggle();
+	['A', 'AREA'].includes(this.tagName) && event.preventDefault();
+	VGLoadMore.getOrCreateInstance(this).toggle();
 });
 
-
 export default VGLoadMore;

package/app/modules/vgloadmore/readme.md

@@ -0,0 +1,145 @@
+# VGLoadMore — Модуль подгрузки контента
+
+Модуль **VGLoadMore** позволяет реализовать подгрузку контента по кнопке или при прокрутке (infinite scroll). Поддерживает как статическую подгрузку элементов из DOM, так и AJAX-запросы на сервер. Удобно использовать для лент, списков, галерей и других контейнеров с большим количеством элементов.
+
+---
+
+## ✅ Возможности
+
+- 🔘 Подгрузка по **кнопке** или **при прокрутке**
+- 📥 **AJAX-загрузка** с сервера
+- 🧩 **Статическая подгрузка** скрытых элементов из DOM
+- 🎯 Автоматическое скрытие кнопки при достижении конца
+- 🖱 Поддержка `data-vg-toggle` и самостоятельная инициализация
+- 🧪 Гибкая настройка через `data-*` атрибуты или JS
+- 🔄 Анимации показа элементов
+- 🛠 Полная отладка через `data-debug="true"`
+- 🌐 Многоязычная поддержка** (настраиваемые кнопки)
+
+---
+
+## 🌐 Многоязычная поддержка
+
+Модуль `VGFiles` полностью поддерживает локализацию интерфейса. Все тексты кнопок.
+
+### ✅ Автоматическое определение языка
+
+Язык определяется автоматически:
+- Из атрибута `lang` тега `<html>`: `<html lang="en">`
+- Или через параметр `lang` при инициализации модуля.
+
+Если язык не указан — используется **`ru`** (русский).
+
+---
+
+## 🔧 Установка
+
+Модуль автоматически инициализируется при наличии атрибутов `data-vgloadmore` или `data-vg-toggle="loadmore"`.
+
+## 🧩 Режимы работы
+
+### 1. Подгрузка по кнопке
+### 2. Подгрузка при прокрутке
+
+→ Подгрузка начнётся, когда последний видимый элемент приблизится к нижней границе окна.
+
+---
+
+## ⚙️ Настройки (data-атрибуты)
+
+| Атрибут | Описание | По умолчанию |
+|-------|--------|-------------|
+| `data-limit` | Сколько элементов подгружать за раз | `0` |
+| `data-offset` | Начальный сдвиг | `0` |
+| `data-elements` | Класс подгружаемых элементов | — |
+| `data-mode` | `button` или `scroll` | `button` |
+| `data-threshold` | Отступ в px для scroll-режима | `100` |
+| `data-autohide` | Скрывать кнопку при окончании | `true` |
+| `data-detach` | Удалять кнопку из DOM | `false` |
+| `data-animate` | Плавное появление элементов | `false` |
+| `data-append` | `after` или `before` | `after` |
+| `data-debug` | Включить логи в консоль | `false` |
+| `data-button-text` | Текст кнопки | Авто |
+
+---
+
+### AJAX-настройки
+
+| Атрибут | Описание | По умолчанию |
+|-------|--------|-------------|
+| `data-ajax-route` | URL для запроса | — |
+| `data-ajax-target` | Куда вставлять ответ | `parent` |
+| `data-ajax-method` | HTTP-метод | `get` |
+| `data-ajax-output` | Вставлять ли ответ | `false` |
+
+---
+
+### Текст кнопки
+
+| Состояние | Текст |
+|---------|------|
+| По умолчанию (AJAX) | `Загрузить еще` |
+| По умолчанию (статика) | `Показать еще` |
+| При загрузке (AJAX) | `Загружаю...` |
+| При загрузке (статика) | `Показываю...` |
+
+→ Настраивается через `data-button='{"send": "...", "show": "..."}'`
+
+---
+
+## 🔌 JavaScript API
+
+### Инициализация
+```js
+import VGLoadMore from 'app/modules/vgloadmore/js/vgloadmore';
+const instance = VGLoadMore.getOrCreateInstance(element, { limit: 5, ajax: { route: '/api/items' } });
+```
+
+### Методы
+```js
+instance.toggle(); // Ручной вызов подгрузки 
+instance.dispose(); // Уничтожить инстанс
+```
+---
+
+## 📣 События
+
+| Событие | Описание |
+|-------|--------|
+| `vg.loadmore.before.load` | Перед подгрузкой |
+| `vg.loadmore.loaded` | После подгрузки |
+
+```js
+element.addEventListener('vg.loadmore.loaded', (e) => { console.log('Загружено:', e.detail.data); });
+```
+
+---
+
+## 💡 Советы
+
+- Используйте класс `vg-collapse`, чтобы изначально скрыть элементы.
+- В `scroll`-режиме кнопка не создаётся.
+- Если `data-ajax-route` указан, модуль всегда использует AJAX.
+- При `data-detach="true"` кнопка удаляется из DOM после окончания.
+
+---
+
+## 🐞 Отладка
+
+Включите режим отладки:
+```html
+data-debug="true"
+```
+→ В консоли появятся логи инициализации, IntersectionObserver и AJAX.
+
+---
+
+## 📝 Лицензия
+
+MIT. Свободно использовать и модифицировать.
+
+---
+
+📌 *Разработано в рамках фронтенд-системы VG Modules.*
+> 🚀 Автор: VEGAS STUDIO (vegas-dev.com)
+> 📍 Поддерживается в проектах VEGAS

package/app/modules/vgsidebar/js/vgsidebar.js

@@ -4,7 +4,8 @@ import EventHandler from "../../../utils/js/dom/event";
 import {dismissTrigger} from "../../module-fn";
 import Selectors from "../../../utils/js/dom/selectors";
 import Backdrop from "../../../utils/js/components/backdrop";
-import Overflow from "../../../utils/js/components/overflow";
+import ScrollBarHelper from "../../../utils/js/components/scrollbar";
+
 
 /**
  * Constants
@@ -56,6 +57,7 @@ class VGSidebar extends BaseModule {
 		this._addEventListeners();
 		this._dismissElement();
 
+		this._scrollBar = new ScrollBarHelper();
 		this._params.animation.delay = !this._params.animation.enable ? 0 : this._params.animation.delay;
 		this._animation(this._element, VGSidebar.NAME_KEY, this._params.animation);
 	}
@@ -90,7 +92,7 @@ class VGSidebar extends BaseModule {
 		}
 
 		if (_this._params.overflow) {
-			Overflow.append();
+			this._scrollBar.hide();
 		}
 
 		if (this._params.hash) {
@@ -131,13 +133,13 @@ class VGSidebar extends BaseModule {
 					if (this._params.backdrop) {
 						Backdrop.hide(() => {
 							if (this._params.overflow) {
-								Overflow.destroy();
+								this._scrollBar.reset();
 							}
 						});
 					}
 
 					if (this._params.overflow) {
-						Overflow.destroy();
+						this._scrollBar.reset();
 					}
 
 					if (this._params.hash) {