vgapp 0.8.0 → 0.8.2

package/app/modules/vgrollup/readme.md

@@ -0,0 +1,196 @@
+# VGRollup — Модуль сворачивания/разворачивания контента
+
+`VGRollup` — это JavaScript-модуль, позволяющий сворачивать и разворачивать контент на веб-странице. Поддерживает два режима: по высоте (для текста) и по количеству элементов. Автоматически создаёт кнопку управления с возможностью локализации.
+
+---
+
+## 🔧 Возможности
+
+- **Два режима работы**:
+    - `text` — обрезка текста по заданной высоте или количеству строк (с поддержкой `line-clamp`).
+    - `elements` — отображение только первых N элементов (например, списка новостей).
+- **Анимации и эффекты**:
+    - Поддержка плавного затухания (`fade`).
+    - CSS-переходы (`transition`).
+- **Гибкая настройка кнопки**:
+    - Включение/отключение кнопки.
+    - Кастомизация текста: "Показать", "Свернуть", "ещё X".
+    - Автоматическое размещение после контента.
+- **Локализация интерфейса**:
+    - Поддержка нескольких языков через `lang_buttons`.
+    - Тексты кнопок и подсказок подтягиваются в зависимости от языка (`ru`, `en`, и др.).
+- **Data API**:
+    - Автоинициализация через `data-vg-rollup`.
+    - Управление через `data-vg-toggle="rollup"` и `data-vg-target`.
+- **Программное управление**:
+    - Публичные методы: `.show()`, `.hide()`, `.toggle()`, `.isShow()`.
+    - Инициализация через `VGRollup.init()`.
+
+---
+
+## 📦 Установка и инициализация
+
+### Через JavaScript
+```js
+import VGRollup from './app/modules/vgrollup/js/vgrollup';
+VGRollup.init(document.querySelector('.rollup'), { 
+    content: 'text', 
+    height: 100,
+    button: { 
+        enabled: true, 
+        more: 'Показать', 
+        less: 'Свернуть' 
+    }, 
+    lang: 'ru' 
+});
+```
+
+### Через data-атрибуты
+```hmtl
+<ul class="rollup-list"
+    data-vgrollup
+    data-content="elements"
+    data-elements="item"
+    data-cnt="3"
+    data-fade="false"
+    data-number="true"
+    data-more=" more "
+    data-button-more="Show"
+    data-button-less="Hide"
+    id="rollup-list-num">
+        <li class="item">Lorem ipsum dolor sit amet.</li>
+        <li class="item">Lorem ipsum dolor sit amet.</li>
+        <li class="item">Lorem ipsum dolor sit amet.</li>
+        <li class="item">Lorem ipsum dolor sit amet.</li>
+        <li class="item">Lorem ipsum dolor sit amet.</li>
+        <li class="item">Lorem ipsum dolor sit amet.</li>
+        <li class="item">Lorem ipsum dolor sit amet.</li>
+        <li class="item">Lorem ipsum dolor sit amet.</li>
+        <li class="item">Lorem ipsum dolor sit amet.</li>
+        <li class="item">Lorem ipsum dolor sit amet.</li>
+</ul>
+```
+---
+
+## ⚙️ Параметры конфигурации
+
+| Параметр | Тип | По умолчанию | Описание |
+|--------|------|-------------|----------|
+| `content` | `string` | `'text'` | Режим: `'text'` или `'elements'`. |
+| `cnt` | `number` | `0` | Количество видимых элементов (в режиме `elements`). |
+| `fade` | `boolean` | `true` | Добавлять эффект затухания к нижней части. |
+| `transition` | `boolean` | `false` | Включить CSS-анимацию при переключении. |
+| `number` | `boolean` | `false` | Показывать количество скрытых элементов (например, "ещё 5"). |
+| `height` | `number` | `0` | Высота контейнера в px, до которой обрезать текст. |
+| `ellipsis.line` | `number\|null` | `null` | Количество строк перед обрезкой (использует `line-clamp`). |
+| `more` | `string` | `' еще '` | Текст для отображения количества скрытых элементов. |
+| `button.enabled` | `boolean` | `true` | Отображать кнопку управления. |
+| `button.more` | `string` | `'Показать'` | Текст кнопки для раскрытия. |
+| `button.less` | `string` | `'Свернуть'` | Текст кнопки для сворачивания. |
+| `lang` | `string` | `'ru'` | Язык интерфейса. Подтягивает локализацию из `lang_buttons`. |
+
+---
+
+## 🧩 Режимы работы
+
+### 1. Режим `text` (по высоте)
+
+Обрезает текст по заданной высоте или количеству строк.
+
+```js
+{ 
+    content: 'text', 
+    height: 120 
+}
+```
+
+Или с `line-clamp`:
+
+```js
+{ 
+    content: 'text', 
+    ellipsis: { 
+        line: 3
+}
+```
+
+> ⚠️ `line-clamp` требует `display: -webkit-box` и `-webkit-line-clamp` в CSS.
+
+### 2. Режим `elements` (по количеству элементов)
+
+Оставляет первые `cnt` элементов, остальные скрываются.
+```js
+{ 
+    content: 'elements', 
+    elements: 'news-item', 
+    cnt: 5 
+}
+```
+
+---
+
+## 🌍 Локализация
+
+Тексты кнопок и подсказок локализуются через `lang_buttons(lang, 'rollup')`.
+
+Поддерживаемые языки:
+- `ru` — русский
+- `en` — английский
+- (и другие, если добавлены в `lang_buttons`)
+
+## 🖱️ Data API
+
+- `data-vg-toggle="rollup"` — элемент, клик по которому переключает контент.
+- `data-vg-target="#id"` — указывает на контейнер с контентом.
+- `data-vg-rollup='{...}'` — параметры инициализации.
+
+---
+
+## 🧪 Методы
+
+| Метод | Описание |
+|------|---------|
+| `VGRollup.toggle(target, button)` | Переключает состояние. |
+| `instance.isShow()` | Возвращает `true`, если контент развёрнут. |
+| `VGRollup.init(element, params, callback)` | Инициализирует модуль. |
+
+---
+
+## 🎨 CSS-классы
+
+| Класс | Описание |
+|------|---------|
+| `.vg-rollup` | Базовый класс контейнера. |
+| `.vg-rollup-content--hidden` | Скрытое состояние (ограничение высоты). |
+| `.vg-rollup-content--fade` | Эффект затухания. |
+| `.vg-rollup-content--ellipsis` | Режим `line-clamp`. |
+| `.vg-rollup-content--transition` | Анимация переключения. |
+| `.vg-rollup-display--none` | Состояние "развёрнуто" (управляется JS). |
+
+---
+## 📎 Зависимости
+
+- `BaseModule` — базовый класс компонентов.
+- `Classes`, `Manipulator` — утилиты для работы с классами и атрибутами.
+- `Selectors` — безопасный поиск элементов.
+- `EventHandler` — делегирование событий.
+- `lang_buttons(lang, 'rollup')` — функция локализации.
+
+---
+
+## ✅ Требования
+
+- Современный браузер (поддержка ES6, `classList`, `insertAdjacentHTML`).
+- Для `line-clamp` требуется поддержка `-webkit-line-clamp`.
+
+---
+
+## 📄 Лицензия
+
+MIT — свободное использование и модификация.
+
+---
+
+📌 *Разработано в рамках фронтенд-системы VG Modules.*
+> 🚀 Автор: VEGAS STUDIO (vegas-dev.com)
+> 📍 Поддерживается в проектах VEGAS

package/app/modules/vgselect/js/handlers.js

@@ -0,0 +1,220 @@
+import VGSelect from "./vgselect";
+import EventHandler from "../../../utils/js/dom/event";
+import Selectors from "../../../utils/js/dom/selectors";
+import {Manipulator} from "../../../utils/js/dom/manipulator";
+import {transliterate} from "../../../utils/js/functions";
+
+const NAME_KEY = 'vg.select';
+
+const CLASS_NAME_SHOW           = 'show';
+const CLASS_NAME_CONTAINER      = 'vg-select';
+const CLASS_NAME_DROPDOWN       = 'vg-select-dropdown';
+const CLASS_NAME_LIST           = 'vg-select-list';
+const CLASS_NAME_OPTION         = 'vg-select-list--option';
+const CLASS_NAME_OPTGROUP       = 'vg-select-list--optgroup';
+const CLASS_NAME_TAGS           = 'vg-select-tags';
+const CLASS_NAME_TAG            = 'vg-select-tag';
+const CLASS_NAME_TAG_REMOVE     = 'vg-select-tag-remove';
+
+const EVENT_CLICK_DATA_API      = `click.${NAME_KEY}.data.api`;
+const EVENT_KEY_UP_DATA_API     = `keyup.${NAME_KEY}.data.api`;
+const EVENT_RESET_DATA_API      = `reset.${NAME_KEY}.data.api`;
+const EVENT_KEYDOWN_DATA_API    = `keydown.${NAME_KEY}.data.api`;
+
+const EVENT_KEY_CHANGE          = `${NAME_KEY}.change`;
+const EVENT_KEY_SEARCH          = `${NAME_KEY}.search`;
+const EVENT_KEY_SELECT          = `${NAME_KEY}.select`;
+const EVENT_KEY_DESELECT        = `${NAME_KEY}.deselect`;
+
+const SELECTOR_DATA_TOGGLE      = '[data-vg-toggle="select"]';
+const SELECTOR_OPTION_TOGGLE    = '[data-vg-toggle="select-option"]';
+const SELECTOR_SEARCH_TOGGLE    = '[name="vg-select-search"]';
+const SELECTOR_DROPDOWN         = `.${CLASS_NAME_DROPDOWN}`;
+const SELECTOR_MULTIPLE_INPUT   = `.vg-select-multiple-input`;
+
+const _handlersVGSelect = () => {
+	EventHandler.on(document, EVENT_CLICK_DATA_API, e => VGSelect.clearDrops(e));
+
+	EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function(e) {
+		const target = e.target;
+		if (target.closest(`.${CLASS_NAME_TAG}`) || target.closest(`.${CLASS_NAME_TAG_REMOVE}`)) {
+			e.stopPropagation();
+			return;
+		}
+		const container = this.closest(`.${CLASS_NAME_CONTAINER}`);
+		const instance = VGSelect.getOrCreateInstance(container);
+		const open = Selectors.find(`.${CLASS_NAME_CONTAINER}.${CLASS_NAME_SHOW}`);
+		if (open && open !== container) VGSelect.getInstance(open)?.hide();
+		instance.toggle(this);
+	});
+
+	EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_OPTION_TOGGLE, function(e) {
+		const option = e.target;
+		if (option.classList.contains('disabled')) return;
+		const container = option.closest(`.${CLASS_NAME_CONTAINER}`);
+		const select = container.previousElementSibling;
+		const isMultiple = select.multiple;
+		const value = option.dataset.value;
+		const realOpt = select.querySelector(`option[value="${CSS.escape(value)}"]`);
+		if (!realOpt) return;
+
+		const instance = VGSelect.getInstance(container);
+		const wasSelected = realOpt.selected;
+
+		if (isMultiple) {
+			realOpt.selected = !realOpt.selected;
+			option.classList.toggle('selected', realOpt.selected);
+			VGSelect.updateUI(select);
+			select.dispatchEvent(new Event('change', { bubbles: true }));
+			EventHandler.trigger(select, EVENT_KEY_CHANGE, {
+				data: { value, title: option.textContent, ...Manipulator.get(option) }
+			});
+
+			if (realOpt.selected) {
+				instance?._triggerEvent(EVENT_KEY_SELECT, { value, title: option.textContent, ...Manipulator.get(option) });
+				instance?._callCallback('onSelect', { value, title: option.textContent, ...Manipulator.get(option) });
+			} else {
+				instance?._triggerEvent(EVENT_KEY_DESELECT, { value, title: option.textContent, ...Manipulator.get(option) });
+				instance?._callCallback('onDeselect', { value, title: option.textContent, ...Manipulator.get(option) });
+			}
+		} else {
+			if (wasSelected) return;
+
+			container.querySelectorAll(`.${CLASS_NAME_OPTION}`).forEach(o => o.classList.remove('selected'));
+			option.classList.add('selected');
+			VGSelect.changeSelector(select, value, {
+				value,
+				title: option.textContent,
+				...Manipulator.get(option)
+			});
+			instance?.hide();
+		}
+	});
+
+	EventHandler.on(document, EVENT_KEY_UP_DATA_API, SELECTOR_SEARCH_TOGGLE, function(e) {
+		const input = e.target;
+		const dropdown = input.closest(SELECTOR_DROPDOWN);
+		const list = dropdown?.querySelector(`.${CLASS_NAME_LIST}`);
+		if (!list) return;
+
+		const container = input.closest(`.${CLASS_NAME_CONTAINER}`);
+		const instance = VGSelect.getInstance(container);
+
+		const options = list.querySelectorAll(`.${CLASS_NAME_OPTION}`);
+		const groups = list.querySelectorAll(`.${CLASS_NAME_OPTGROUP}`);
+		const value = input.value.trim().toLowerCase();
+		const search = [value, transliterate(value), transliterate(value, true)];
+
+		options.forEach(el => { el.hidden = false; el.style.display = ''; });
+		groups.forEach(el => { el.hidden = false; el.style.display = ''; });
+
+		if (value) {
+			let visibleCount = 0;
+			groups.length ? groups.forEach(group => {
+				const items = group.querySelectorAll(`.${CLASS_NAME_OPTION}`);
+				const visible = Array.from(items).some(item => {
+					const t = item.textContent.toLowerCase();
+					return search.some(s => t.includes(s));
+				});
+				group.hidden = !visible;
+				group.style.display = visible ? '' : 'none';
+				items.forEach(item => {
+					const t = item.textContent.toLowerCase();
+					const match = search.some(s => t.includes(s));
+					item.hidden = !match;
+					item.style.display = match ? '' : 'none';
+					if (match) visibleCount++;
+				});
+			}) : options.forEach(option => {
+				const t = option.textContent.toLowerCase();
+				const match = search.some(s => t.includes(s));
+				option.hidden = !match;
+				option.style.display = match ? '' : 'none';
+				if (match) visibleCount++;
+			});
+
+			instance?._triggerEvent(EVENT_KEY_SEARCH, { query: value, results: visibleCount });
+			instance?._callCallback('onSearch', { query: value, results: visibleCount });
+		} else {
+			instance?._triggerEvent(EVENT_KEY_SEARCH, { query: '', results: options.length });
+			instance?._callCallback('onSearch', { query: '', results: options.length });
+		}
+	});
+
+	EventHandler.on(document, EVENT_RESET_DATA_API, 'form', function() {
+		Selectors.findAll('select[data-inited="true"]', this).forEach(select => VGSelect.build(select, true));
+	});
+
+	EventHandler.on(document, 'keydown', SELECTOR_DATA_TOGGLE, function(e) {
+		const inst = VGSelect.getInstance(this.closest(`.${CLASS_NAME_CONTAINER}`));
+		if (!inst) return;
+		switch (e.key) {
+			case 'Enter':
+			case ' ':
+				e.preventDefault();
+				inst.toggle();
+				break;
+			case 'Escape':
+				if (inst._isShown()) inst.hide();
+				break;
+			case 'ArrowDown':
+				e.preventDefault();
+				if (!inst._isShown()) inst.show();
+				break;
+		}
+	});
+
+	EventHandler.on(document, EVENT_CLICK_DATA_API, `.${CLASS_NAME_TAGS}`, function(e) {
+		const btn = e.target.closest(`.${CLASS_NAME_TAG_REMOVE}`);
+		if (!btn) return;
+		e.preventDefault();
+		e.stopPropagation();
+		const container = this.closest(`.${CLASS_NAME_CONTAINER}`);
+		const select = container.previousElementSibling;
+		const value = btn.dataset.value;
+		const opt = select.querySelector(`option[value="${CSS.escape(value)}"]`);
+		const item = container.querySelector(`.${CLASS_NAME_OPTION}[data-value="${CSS.escape(value)}"]`);
+		const instance = VGSelect.getInstance(container);
+
+		if (opt) {
+			opt.selected = false;
+			if (item) item.classList.remove('selected');
+			VGSelect.updateUI(select);
+			select.dispatchEvent(new Event('change', { bubbles: true }));
+			EventHandler.trigger(select, EVENT_KEY_CHANGE, { data: { value } });
+
+			instance?._triggerEvent(EVENT_KEY_DESELECT, { value });
+			instance?._callCallback('onDeselect', { value });
+		}
+	});
+
+	EventHandler.on(document, EVENT_KEYDOWN_DATA_API, SELECTOR_MULTIPLE_INPUT, function(e) {
+		if (e.key === 'Backspace' && !e.target.value) {
+			const input = e.target;
+			const tagsContainer = input.parentElement;
+			const tags = tagsContainer.querySelectorAll(`.${CLASS_NAME_TAG}`);
+			if (tags.length > 0) {
+				const lastTag = tags[tags.length - 1];
+				const value = lastTag.querySelector('svg')?.dataset.value;
+				const select = input.closest(`.${CLASS_NAME_CONTAINER}`).previousElementSibling;
+				const option = select.querySelector(`option[value="${CSS.escape(value)}"]`);
+				const listItem = select.closest(`.${CLASS_NAME_CONTAINER}`).querySelector(`.${CLASS_NAME_OPTION}[data-value="${CSS.escape(value)}"]`);
+				const instance = VGSelect.getInstance(input.closest(`.${CLASS_NAME_CONTAINER}`));
+
+				if (option) {
+					option.selected = false;
+					if (listItem) listItem.classList.remove('selected');
+					VGSelect.updateUI(select);
+					select.dispatchEvent(new Event('change', { bubbles: true }));
+					EventHandler.trigger(select, EVENT_KEY_CHANGE, { data: { value } });
+
+					instance?._triggerEvent(EVENT_KEY_DESELECT, { value });
+					instance?._callCallback('onDeselect', { value });
+				}
+			}
+		}
+	});
+
+}
+
+export default _handlersVGSelect;