vgapp 0.8.0 → 0.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,145 @@
1
+ # VGLoadMore — Модуль подгрузки контента
2
+
3
+ Модуль **VGLoadMore** позволяет реализовать подгрузку контента по кнопке или при прокрутке (infinite scroll). Поддерживает как статическую подгрузку элементов из DOM, так и AJAX-запросы на сервер. Удобно использовать для лент, списков, галерей и других контейнеров с большим количеством элементов.
4
+
5
+ ---
6
+
7
+ ## ✅ Возможности
8
+
9
+ - 🔘 Подгрузка по **кнопке** или **при прокрутке**
10
+ - 📥 **AJAX-загрузка** с сервера
11
+ - 🧩 **Статическая подгрузка** скрытых элементов из DOM
12
+ - 🎯 Автоматическое скрытие кнопки при достижении конца
13
+ - 🖱 Поддержка `data-vg-toggle` и самостоятельная инициализация
14
+ - 🧪 Гибкая настройка через `data-*` атрибуты или JS
15
+ - 🔄 Анимации показа элементов
16
+ - 🛠 Полная отладка через `data-debug="true"`
17
+ - 🌐 Многоязычная поддержка** (настраиваемые кнопки)
18
+
19
+ ---
20
+
21
+ ## 🌐 Многоязычная поддержка
22
+
23
+ Модуль `VGFiles` полностью поддерживает локализацию интерфейса. Все тексты кнопок.
24
+
25
+ ### ✅ Автоматическое определение языка
26
+
27
+ Язык определяется автоматически:
28
+ - Из атрибута `lang` тега `<html>`: `<html lang="en">`
29
+ - Или через параметр `lang` при инициализации модуля.
30
+
31
+ Если язык не указан — используется **`ru`** (русский).
32
+
33
+ ---
34
+
35
+ ## 🔧 Установка
36
+
37
+ Модуль автоматически инициализируется при наличии атрибутов `data-vgloadmore` или `data-vg-toggle="loadmore"`.
38
+
39
+ ## 🧩 Режимы работы
40
+
41
+ ### 1. Подгрузка по кнопке
42
+ ### 2. Подгрузка при прокрутке
43
+
44
+ → Подгрузка начнётся, когда последний видимый элемент приблизится к нижней границе окна.
45
+
46
+ ---
47
+
48
+ ## ⚙️ Настройки (data-атрибуты)
49
+
50
+ | Атрибут | Описание | По умолчанию |
51
+ |-------|--------|-------------|
52
+ | `data-limit` | Сколько элементов подгружать за раз | `0` |
53
+ | `data-offset` | Начальный сдвиг | `0` |
54
+ | `data-elements` | Класс подгружаемых элементов | — |
55
+ | `data-mode` | `button` или `scroll` | `button` |
56
+ | `data-threshold` | Отступ в px для scroll-режима | `100` |
57
+ | `data-autohide` | Скрывать кнопку при окончании | `true` |
58
+ | `data-detach` | Удалять кнопку из DOM | `false` |
59
+ | `data-animate` | Плавное появление элементов | `false` |
60
+ | `data-append` | `after` или `before` | `after` |
61
+ | `data-debug` | Включить логи в консоль | `false` |
62
+ | `data-button-text` | Текст кнопки | Авто |
63
+
64
+ ---
65
+
66
+ ### AJAX-настройки
67
+
68
+ | Атрибут | Описание | По умолчанию |
69
+ |-------|--------|-------------|
70
+ | `data-ajax-route` | URL для запроса | — |
71
+ | `data-ajax-target` | Куда вставлять ответ | `parent` |
72
+ | `data-ajax-method` | HTTP-метод | `get` |
73
+ | `data-ajax-output` | Вставлять ли ответ | `false` |
74
+
75
+ ---
76
+
77
+ ### Текст кнопки
78
+
79
+ | Состояние | Текст |
80
+ |---------|------|
81
+ | По умолчанию (AJAX) | `Загрузить еще` |
82
+ | По умолчанию (статика) | `Показать еще` |
83
+ | При загрузке (AJAX) | `Загружаю...` |
84
+ | При загрузке (статика) | `Показываю...` |
85
+
86
+ → Настраивается через `data-button='{"send": "...", "show": "..."}'`
87
+
88
+ ---
89
+
90
+ ## 🔌 JavaScript API
91
+
92
+ ### Инициализация
93
+ ```js
94
+ import VGLoadMore from 'app/modules/vgloadmore/js/vgloadmore';
95
+ const instance = VGLoadMore.getOrCreateInstance(element, { limit: 5, ajax: { route: '/api/items' } });
96
+ ```
97
+
98
+ ### Методы
99
+ ```js
100
+ instance.toggle(); // Ручной вызов подгрузки
101
+ instance.dispose(); // Уничтожить инстанс
102
+ ```
103
+ ---
104
+
105
+ ## 📣 События
106
+
107
+ | Событие | Описание |
108
+ |-------|--------|
109
+ | `vg.loadmore.before.load` | Перед подгрузкой |
110
+ | `vg.loadmore.loaded` | После подгрузки |
111
+
112
+ ```js
113
+ element.addEventListener('vg.loadmore.loaded', (e) => { console.log('Загружено:', e.detail.data); });
114
+ ```
115
+
116
+ ---
117
+
118
+ ## 💡 Советы
119
+
120
+ - Используйте класс `vg-collapse`, чтобы изначально скрыть элементы.
121
+ - В `scroll`-режиме кнопка не создаётся.
122
+ - Если `data-ajax-route` указан, модуль всегда использует AJAX.
123
+ - При `data-detach="true"` кнопка удаляется из DOM после окончания.
124
+
125
+ ---
126
+
127
+ ## 🐞 Отладка
128
+
129
+ Включите режим отладки:
130
+ ```html
131
+ data-debug="true"
132
+ ```
133
+ → В консоли появятся логи инициализации, IntersectionObserver и AJAX.
134
+
135
+ ---
136
+
137
+ ## 📝 Лицензия
138
+
139
+ MIT. Свободно использовать и модифицировать.
140
+
141
+ ---
142
+
143
+ 📌 *Разработано в рамках фронтенд-системы VG Modules.*
144
+ > 🚀 Автор: VEGAS STUDIO (vegas-dev.com)
145
+ > 📍 Поддерживается в проектах VEGAS