vgapp 0.8.1 → 0.8.2

package/app/modules/vgselect/readme.md

@@ -0,0 +1,180 @@
+# VGSelect — Кастомный `<select>` с расширенными возможностями
+
+`VGSelect` — это продвинутый JavaScript-модуль для замены стандартного HTML-элемента `<select>` на полностью кастомизируемый компонент с поддержкой поиска, мультивыбора, динамической загрузки данных, i18n, пагинации и автоматического обновления через `MutationObserver`.
+
+---
+
+## ✅ Основные возможности
+
+| Функция | Поддержка |
+|--------|---------|
+| 🔹 Кастомный дизайн | ✅ |
+| 🔹 Поиск (локальный и удалённый) | ✅ |
+| 🔹 Поддержка мультивыбора (`multiple`) | ✅ |
+| 🔹 Динамическая загрузка данных (AJAX) | ✅ |
+| 🔹 Пагинация и "Загрузить ещё" | ✅ |
+| 🔹 i18n (многоязычность) | ✅ |
+| 🔹 Автообновление при изменении `<select>` | ✅ (`MutationObserver`) |
+| 🔹 Обработка `optgroup` | ✅ |
+| 🔹 Поддержка `disabled`, `required`, `placeholder` | ✅ |
+| 🔹 Полная доступность (ARIA) | ✅ |
+| 🔹 Коллбэки и события | ✅ |
+
+---
+
+## 📦 Установка и инициализация
+
+### HTML
+```html
+ <select id="country" class="vg-select w-100" name="country" data-max="10" required>
+    <option value="2" data-price="1">Россия</option>
+    <option value="3" data-price="2">Узбекистан</option>
+    <option value="4" data-price="3">Казахстан</option>
+    <option value="5" data-price="4" selected>Белоруссия</option>
+    <option value="6" data-price="5" disabled>Китай</option>
+</select>
+```
+### JavaScript
+```js
+js import VGSelect from './app/modules/vgselect/js/vgselect';
+// Инициализация 
+VGSelect.init(document.getElementById('mySelect'), { 
+    lang: 'ru', 
+    placeholder: 'Выберите значение', 
+    search: {
+        enabled: true, 
+        remote: true, 
+        route: '/api/search', 
+        delay: 300, 
+        minTerm: 1, 
+        pagination: true, 
+        loadMoreText: 'Загрузить ещё'
+    }, 
+    onInit: (element) => console.log('VGSelect инициализирован'), 
+    onChange: (element, data) => console.log('Значение изменено:', data) 
+});
+```
+
+---
+
+## 🔧 Параметры инициализации
+
+| Параметр | Тип | Описание |
+|--------|-----|---------|
+| `lang` | `string` | Язык интерфейса (поддерживается i18n). По умолчанию: `ru` |
+| `placeholder` | `string` | Текст плейсхолдера |
+| `search.enabled` | `boolean` | Включить поле поиска |
+| `search.remote` | `boolean` | Поиск через AJAX |
+| `search.route` | `string` | URL для удалённого поиска |
+| `search.delay` | `number` | Задержка перед запросом (мс) |
+| `search.minTerm` | `number` | Минимальная длина запроса |
+| `search.pagination` | `boolean` | Включить пагинацию |
+| `search.pageParam` | `string` | Название параметра страницы в URL (`page`) |
+| `search.termParam` | `string` | Название параметра поиска (`q`) |
+| `search.perPage` | `number` | Количество элементов на страницу |
+| `search.loadMoreText` | `string` | Текст кнопки "Загрузить ещё" |
+| `onInit` | `function` | Коллбэк при инициализации |
+| `onShow` | `function` | Коллбэк при открытии |
+| `onHide` | `function` | Коллбэк при закрытии |
+| `onChange` | `function` | Коллбэк при изменении значения |
+| `onSelect` | `function` | Коллбэк при выборе элемента |
+| `onClear` | `function` | Коллбэк при очистке выбора |
+| `onLoadNext` | `function` | Коллбэк при загрузке следующей страницы |
+| `onSearch` | `function` | Коллбэк при вводе в поиске |
+
+---
+
+## 🌐 i18n (международные сообщения)
+
+Модуль поддерживает локализацию через:
+- `lang_titles(lang, component)` — заголовки
+- `lang_messages(lang, component)` — сообщения (например, "Загрузка...")
+- `lang_buttons(lang, component)` — кнопки (например, "Загрузить ещё")
+
+Поддерживаемые языки: `ru`, `en` и др. (настраивается в ядре).
+
+---
+
+## 🔁 Динамическая загрузка данных
+
+Если включён `search.remote`, компонент отправляет запрос на указанный `route` с параметрами:
+
+```html
+?q=searchTerm&page=1&per_page=20
+```
+
+Ожидается JSON-ответ:
+```json
+{
+  "results": 
+    [ 
+      { "id": "1", "text": "Опция 1" },
+      { "id": "2", "text": "Опция 2" } 
+    ], 
+  "pagination": { 
+    "current_page": 1, 
+    "total_pages": 5
+  }
+}
+```
+---
+
+## 🔍 Поиск
+
+- **Локальный**: фильтрация уже существующих опций.
+- **Удалённый**: AJAX-запрос с пагинацией.
+- Поддержка кнопки **"Загрузить ещё"** при включённой пагинации.
+
+---
+
+## 🔄 Автообновление (MutationObserver)
+
+Компонент автоматически обновляется при:
+- Изменении `option` или `optgroup` в исходном `<select>`
+- Изменении атрибутов: `disabled`, `required`, `hidden`, `style`
+- Добавлении/удалении опций через DOM
+
+---
+
+## 🎯 API методы
+
+| Метод | Описание |
+|------|---------|
+| `VGSelect.init(select, params, rebuild)` | Инициализация |
+| `VGSelect.destroy(select)` | Удаление компонента |
+| `VGSelect.updateUI(select)` | Обновление отображаемого значения |
+| `VGSelect.changeSelector(select, value, data)` | Программная установка значения |
+| `VGSelect.addOptions(select, data, { preserve })` | Добавление опций (удобно при AJAX) |
+| `instance.show()` | Открыть выпадающий список |
+| `instance.hide()` | Закрыть выпадающий список |
+| `instance.toggle()` | Переключить состояние |
+
+---
+
+## 📣 События
+
+| Событие | Описание |
+|--------|---------|
+| `vg.select.init` | Инициализация завершена |
+| `vg.select.show` | Начало открытия |
+| `vg.select.shown` | Открытие завершено |
+| `vg.select.hide` | Начало закрытия |
+| `vg.select.hidden` | Закрытие завершено |
+| `vg.select.change` | Значение изменено |
+| `vg.select.select` | Элемент выбран |
+| `vg.select.clear` | Выбор очищен |
+| `vg.select.rebuild` | Список перестроен (после поиска) |
+| `vg.select.loadNext` | Загружена следующая страница |
+| `vg.select.error` | Ошибка (AJAX, данные и т.д.) |
+
+---
+
+## 📝 Лицензия
+
+MIT. Свободно использовать и модифицировать.
+
+---
+
+📌 *Разработано в рамках фронтенд-системы VG Modules.*
+> 🚀 Автор: VEGAS STUDIO (vegas-dev.com)
+> 📍 Поддерживается в проектах VEGAS

package/app/modules/vgselect/scss/_variables.scss

@@ -78,3 +78,23 @@ $select-search-map: (
 		background-color: #f2f2f2,
 		color: #000000
 ) !default;
+
+$select-tags-map: (
+		gap: 4px,
+		width: 100%,
+		min-height: 32px,
+		padding: 2px 0
+) !default;
+
+$select-tag-map: (
+		gap: 4px,
+		background: #0d6efd,
+		color: white,
+		padding: 2px 6px,
+		border-radius: 4px,
+		font-size: 14px,
+		remove-width: 12px,
+		remove-height: 12px,
+		remove-stroke: white,
+		remove-stroke-width: 2
+) !default;

package/app/modules/vgselect/scss/vgselect.scss

@@ -18,8 +18,8 @@ select {
 		top: 0;
 		opacity: 0;
 		z-index: -1000;
-		width: 100%;
-		height: 100%;
+		width: 0;
+		height: 0;
 		display: inline-block;
 		visibility: hidden;
 	}
@@ -34,6 +34,8 @@ select {
 	@include mix-vars('select-optgroup-hover', $select-optgroup-hover-map);
 	@include mix-vars('select-list-hover', $select-list-hover-map);
 	@include mix-vars('select-search', $select-search-map);
+	@include mix-vars('select-tags', $select-tags-map);
+	@include mix-vars('select-tag', $select-tag-map);
 	--vg-select-list-max-height: #{$select-list-max-height};
 	--vg-select-list-scrollbar-width: #{$select-list-scrollbar-width};
 	--vg-select-list-scrollbar-bg: #{$select-list-scrollbar-bg};
@@ -46,6 +48,44 @@ select {
 		}
 	}
 
+	&-tags {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--vg-select-tags-gap);
+		align-items: center;
+		width: var(--vg-select-tags-width);
+		min-height: var(--vg-select-tags-min-height);
+		padding: var(--vg-select-tags-padding);
+	}
+
+	&-tag {
+		display: flex;
+		align-items: center;
+		gap: var(--vg-select-tag-gap);
+		background: var(--vg-select-tag-background);
+		color: var(--vg-select-tag-color);
+		padding: var(--vg-select-tag-padding);
+		border-radius: var(--vg-select-tag-border-radius);
+		font-size: var(--vg-select-tag-font-size);
+
+		&-remove {
+			cursor: pointer;
+			opacity: 0.7;
+			width: var(--vg-select-tag-remove-width);
+			height: var(--vg-select-tag-remove-height);
+			stroke: var(--vg-select-tag-remove-stroke);
+			stroke-width: var(--vg-select-tag-remove-stroke-width);
+
+			&:hover {
+				opacity: 1;
+			}
+		}
+	}
+
+	&-multiple-input {
+		font: inherit;
+	}
+
 	&-current {
 		@each $key, $value in $select-current-map {
 			#{$key}: var(--vg-select-current-#{$key})

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

@@ -1,35 +1,85 @@
 import BaseModule from "../../base-module";
-import {isDisabled, isVisible, mergeDeepObject} from "../../../utils/js/functions";
+import { isDisabled, isVisible, mergeDeepObject } from "../../../utils/js/functions";
 import EventHandler from "../../../utils/js/dom/event";
-import {dismissTrigger} from "../../module-fn";
+import { dismissTrigger } from "../../module-fn";
 import Selectors from "../../../utils/js/dom/selectors";
 import Backdrop from "../../../utils/js/components/backdrop";
 import ScrollBarHelper from "../../../utils/js/components/scrollbar";
 
-
 /**
- * Constants
+ * @constant {string} NAME - Имя модуля.
  */
 const NAME = 'sidebar';
+
+/**
+ * @constant {string} NAME_KEY - Пространство имён для событий.
+ */
 const NAME_KEY = 'vg.sidebar';
-const SELECTOR_DATA_TOGGLE= '[data-vg-toggle="sidebar"]';
 
+/**
+ * @constant {string} SELECTOR_DATA_TOGGLE - Селектор для элементов активации сайдбара.
+ */
+const SELECTOR_DATA_TOGGLE = '[data-vg-toggle="sidebar"]';
+
+/**
+ * @constant {string} CLASS_NAME_SHOW - Класс, отвечающий за отображение сайдбара.
+ */
 const CLASS_NAME_SHOW = 'show';
-const CLASS_NAME_OPEN = 'vg-sidebar-open';
 
-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`;
+/**
+ * @constant {string} CLASS_NAME_OPEN - Класс, добавляемый к body при открытом сайдбаре.
+ */
+const CLASS_NAME_OPEN = 'vg-sidebar-open';
 
-const EVENT_KEY_KEYDOWN_DISMISS = `keydown.dismiss.${NAME_KEY}`;
-const EVENT_KEY_HIDE_PREVENTED = `hidePrevented.${NAME_KEY}`;
-const EVENT_KEY_CLICK_DATA_API = `click.${NAME_KEY}.data.api`;
-const EVENT_KEY_POPSTATE_DATA_API = `popstate.${NAME_KEY}.data.api`;
-const EVENT_KEY_DOM_LOADED_DATA_API = `DOMContentLoaded.${NAME_KEY}.data.api`;
+/**
+ * @constant {Object} EVENT_KEYS - Объект с ключами событий для модуля.
+ */
+const EVENT_KEYS = {
+	HIDE: `${NAME_KEY}.hide`,
+	HIDDEN: `${NAME_KEY}.hidden`,
+	SHOW: `${NAME_KEY}.show`,
+	SHOWN: `${NAME_KEY}.shown`,
+	LOADED: `${NAME_KEY}.loaded`,
+	KEYDOWN_DISMISS: `keydown.dismiss.${NAME_KEY}`,
+	HIDE_PREVENTED: `hidePrevented.${NAME_KEY}`,
+	CLICK_DATA_API: `click.${NAME_KEY}.data.api`,
+	POPSTATE_DATA_API: `popstate.${NAME_KEY}.data.api`,
+	DOM_LOADED_DATA_API: `DOMContentLoaded.${NAME_KEY}.data.api`,
+};
 
+/**
+ * Класс VGSidebar реализует функциональность боковой панели (сайдбара) с поддержкой:
+ * - открытия/закрытия по клику или хэшу
+ * - поддержки backdrop
+ * - блокировки скролла при открытии
+ * - анимаций
+ * - AJAX-загрузки контента
+ *
+ * @extends BaseModule
+ */
 class VGSidebar extends BaseModule {
+	/**
+	 * Создаёт экземпляр VGSidebar.
+	 *
+	 * @param {HTMLElement} element - Основной элемент сайдбара.
+	 * @param {Object} params - Параметры конфигурации.
+	 * @param {boolean} [params.backdrop=true] - Показывать подложку.
+	 * @param {boolean} [params.overflow=true] - Блокировать скролл при открытии.
+	 * @param {boolean} [params.keyboard=true] - Закрывать по клавише Escape.
+	 * @param {boolean} [params.hash=false] - Поддержка открытия по хэшу URL.
+	 * @param {Object} [params.animation] - Настройки анимации.
+	 * @param {boolean} [params.animation.enable=false] - Включить анимацию.
+	 * @param {string} [params.animation.in='animate__rollIn'] - Класс входной анимации.
+	 * @param {string} [params.animation.out='animate__rollOut'] - Класс выходной анимации.
+	 * @param {number} [params.animation.delay=800] - Задержка перед закрытием (мс).
+	 * @param {Object} [params.ajax] - Параметры AJAX-загрузки.
+	 * @param {string} [params.ajax.route=''] - URL для загрузки.
+	 * @param {string} [params.ajax.target=''] - Селектор цели для вставки.
+	 * @param {string} [params.ajax.method='get'] - HTTP-метод.
+	 * @param {boolean} [params.ajax.loader=false] - Показывать лоадер.
+	 * @param {boolean} [params.ajax.once=false] - Загружать только один раз.
+	 * @param {boolean} [params.ajax.output=true] - Вставлять ответ в DOM.
+	 */
 	constructor(element, params = {}) {
 		super(element, params);
 
@@ -54,79 +104,105 @@ class VGSidebar extends BaseModule {
 			}
 		}, params));
 
+		this._scrollBar = new ScrollBarHelper();
+		this._params.animation.delay = this._params.animation.enable ? this._params.animation.delay : 0;
+
 		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);
+		this._animation(this._element, NAME_KEY, this._params.animation);
 	}
 
+	/**
+	 * Статическое свойство: имя модуля.
+	 * @returns {string}
+	 */
 	static get NAME() {
 		return NAME;
 	}
 
+	/**
+	 * Статическое свойство: ключ для событий и данных.
+	 * @returns {string}
+	 */
 	static get NAME_KEY() {
-		return NAME_KEY
+		return NAME_KEY;
 	}
 
+	/**
+	 * Переключает состояние сайдбара (открыть/закрыть).
+	 *
+	 * @param {HTMLElement} [relatedTarget] - Элемент, инициировавший открытие.
+	 * @returns {void}
+	 */
 	toggle(relatedTarget) {
-		return !this._isShown() ? this.show(relatedTarget) : this.hide();
+		return this._isShown() ? this.hide() : this.show(relatedTarget);
 	}
 
+	/**
+	 * Открывает сайдбар.
+	 *
+	 * @param {HTMLElement} [relatedTarget] - Элемент, инициировавший открытие.
+	 * @returns {void}
+	 */
 	show(relatedTarget) {
-		const _this = this;
-		if (isDisabled(_this._element)) return;
+		if (isDisabled(this._element)) return;
 
-		if (relatedTarget) _this._params = _this._getParams(relatedTarget, _this._params);
+		if (relatedTarget) {
+			this._params = this._getParams(relatedTarget, this._params);
+		}
 
-		_this._route(function (status, data) {
-			EventHandler.trigger(_this._element, EVENT_KEY_LOADED, {stats: status, data: data});
+		// Событие загрузки (может использоваться для AJAX)
+		this._route((status, data) => {
+			EventHandler.trigger(this._element, EVENT_KEYS.LOADED, { stats: status, data });
 		});
 
-		const showEvent = EventHandler.trigger(_this._element, EVENT_KEY_SHOW, { relatedTarget })
+		const showEvent = EventHandler.trigger(this._element, EVENT_KEYS.SHOW, { relatedTarget });
 		if (showEvent.defaultPrevented) return;
 
-		if (_this._params.backdrop) {
+		if (this._params.backdrop) {
 			Backdrop.show();
 		}
 
-		if (_this._params.overflow) {
+		if (this._params.overflow) {
 			this._scrollBar.hide();
 		}
 
 		if (this._params.hash) {
-			window.history.pushState(null, "vg-sidebar-open", "#" + this._element.id);
-
-			EventHandler.on(window, EVENT_KEY_POPSTATE_DATA_API, () => {
-				this.hide();
-			});
+			window.history.pushState(null, '', `#${this._element.id}`);
+			EventHandler.on(window, EVENT_KEYS.POPSTATE_DATA_API, () => this.hide());
 		}
 
-		_this._element.classList.add(CLASS_NAME_SHOW);
+		this._element.classList.add(CLASS_NAME_SHOW);
 		document.body.classList.add(CLASS_NAME_OPEN);
 
-		const completeCallBack = () => {
-			EventHandler.on(Selectors.find('.vg-backdrop'), 'mousedown.vg.backdrop', function () {
-				_this.hide();
-			});
+		const completeCallback = () => {
+			const backdrop = Selectors.find('.vg-backdrop');
+			if (backdrop) {
+				EventHandler.on(backdrop, 'mousedown.vg.backdrop', () => this.hide());
+			}
+			EventHandler.trigger(this._element, EVENT_KEYS.SHOWN, { relatedTarget });
+		};
 
-			EventHandler.trigger(_this._element, EVENT_KEY_SHOWN, { relatedTarget });
-		}
-		_this._queueCallback(completeCallBack, _this._element, true, 50)
+		this._queueCallback(completeCallback, this._element, true, 50);
 	}
 
+	/**
+	 * Закрывает сайдбар.
+	 *
+	 * @param {boolean} [isLeaveBackDrop=false] - Не убирать подложку.
+	 * @returns {void}
+	 */
 	hide(isLeaveBackDrop = false) {
 		if (isDisabled(this._element)) return;
 
-		const hideEvent = EventHandler.trigger(this._element, EVENT_KEY_HIDE);
+		const hideEvent = EventHandler.trigger(this._element, EVENT_KEYS.HIDE);
 		if (hideEvent.defaultPrevented) return;
 
 		document.body.classList.remove(CLASS_NAME_OPEN);
+		this._element.classList.remove(CLASS_NAME_SHOW);
 
 		setTimeout(() => {
-			this._element.setAttribute('aria-expanded', false);
-			this._element.classList.remove(CLASS_NAME_SHOW);
+			this._element.setAttribute('aria-expanded', 'false');
 
 			const completeCallback = () => {
 				if (!isLeaveBackDrop) {
@@ -136,88 +212,122 @@ class VGSidebar extends BaseModule {
 								this._scrollBar.reset();
 							}
 						});
-					}
-
-					if (this._params.overflow) {
+					} else if (this._params.overflow) {
 						this._scrollBar.reset();
 					}
 
 					if (this._params.hash) {
-						history.pushState("", document.title, window.location.pathname + window.location.search);
+						history.replaceState('', document.title, window.location.pathname + window.location.search);
 					}
 
-					EventHandler.trigger(this._element, EVENT_KEY_HIDDEN);
+					EventHandler.trigger(this._element, EVENT_KEYS.HIDDEN);
 				}
-			}
+			};
+
 			this._queueCallback(completeCallback, this._element, true);
 		}, this._params.animation.delay);
 	}
 
+	/**
+	 * Очищает ресурсы модуля.
+	 * @override
+	 */
 	dispose() {
 		super.dispose();
+		EventHandler.off(this._element, EVENT_KEYS.HIDE);
+		EventHandler.off(window, EVENT_KEYS.POPSTATE_DATA_API);
+		this._scrollBar.reset();
 	}
 
+	/**
+	 * Проверяет, открыт ли сайдбар.
+	 * @returns {boolean}
+	 * @private
+	 */
 	_isShown() {
 		return this._element.classList.contains(CLASS_NAME_SHOW);
 	}
 
+	/**
+	 * Добавляет глобальные слушатели событий (например, Escape).
+	 * @private
+	 */
 	_addEventListeners() {
-		EventHandler.on(document, EVENT_KEY_KEYDOWN_DISMISS, event => {
+		EventHandler.on(document, EVENT_KEYS.KEYDOWN_DISMISS, (event) => {
 			if (event.key !== 'Escape') return;
 
 			if (this._params.keyboard) {
 				this.hide();
-				return;
+			} else {
+				EventHandler.trigger(this._element, EVENT_KEYS.HIDE_PREVENTED);
 			}
-
-			EventHandler.trigger(this._element, EVENT_KEY_HIDE_PREVENTED)
 		});
 	}
+
+	/**
+	 * Инициализирует поведение закрытия по клику вне (через `dismissTrigger`).
+	 * @private
+	 */
+	_dismissElement() {
+		dismissTrigger(this);
+	}
+
+	/**
+	 * Заглушка для возможной AJAX-логики. Может быть переопределена.
+	 * @param {Function} callback - Колбэк после загрузки.
+	 * @private
+	 */
+	_route(callback) {
+		// Здесь может быть реализация AJAX-загрузки
+		callback(true, null);
+	}
 }
 
+// Автоматическая инициализация по data-атрибутам
 dismissTrigger(VGSidebar);
 
 /**
- * Data API implementation
+ * Реализация Data API: открытие сайдбара по data-атрибуту.
  */
-EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
+EventHandler.on(document, EVENT_KEYS.CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
 	const target = Selectors.getElementFromSelector(this);
+	if (!target) return;
 
 	if (['A', 'AREA'].includes(this.tagName)) {
-		event.preventDefault()
+		event.preventDefault();
 	}
 
-	if (isDisabled(this)) {
-		return
-	}
+	if (isDisabled(this)) return;
+
+	this.setAttribute('aria-expanded', 'true');
 
-	this.setAttribute('aria-expanded', true);
-	EventHandler.one(target, EVENT_KEY_HIDDEN, () => {
-		this.setAttribute('aria-expanded', false);
-	})
+	// Сбрасываем атрибут после закрытия
+	EventHandler.one(target, EVENT_KEYS.HIDDEN, () => {
+		this.setAttribute('aria-expanded', 'false');
+	});
 
-	const alreadyOpen = Selectors.find('.vg-sidebar.show')
+	// Закрываем уже открытый сайдбар
+	const alreadyOpen = Selectors.find('.vg-sidebar.show');
 	if (alreadyOpen && alreadyOpen !== target) {
-		VGSidebar.getInstance(alreadyOpen).hide()
+		VGSidebar.getInstance(alreadyOpen).hide();
 	}
 
-	const data = VGSidebar.getOrCreateInstance(target)
-	data.toggle(this);
+	const instance = VGSidebar.getOrCreateInstance(target);
+	instance.toggle(this);
 });
 
-EventHandler.on(document, EVENT_KEY_DOM_LOADED_DATA_API, function () {
-	let targetHash = window.location.hash.slice(1);
-	if (targetHash) {
-		let target = Selectors.find('#' + targetHash);
-		if (target && target.classList.contains('vg-sidebar')) {
-			if (isDisabled(target)) {
-				return;
-			}
-
-			const data = VGSidebar.getOrCreateInstance(target)
-			data.toggle();
-		}
+/**
+ * Открытие сайдбара по хэшу при загрузке страницы.
+ */
+EventHandler.on(document, EVENT_KEYS.DOM_LOADED_DATA_API, function () {
+	const hash = window.location.hash.slice(1);
+	if (!hash) return;
+
+	const target = Selectors.find(`#${hash}`);
+	if (target && target.classList.contains('vg-sidebar') && !isDisabled(target)) {
+		const instance = VGSidebar.getOrCreateInstance(target);
+		instance.toggle();
 	}
-})
+});
 
-export default VGSidebar;
+export default VGSidebar;