vgapp 1.5.6 → 1.5.7

package/app/modules/vgalert/js/vgalert.js

@@ -3,7 +3,8 @@
  * Возможности: modal, overlay и dropdown-рендер, компактный размер, Data API, AJAX и Promise-сценарии.
  */
 import BaseModule from "../../base-module";
-import VGModal from "../../vgmodal";
+import VGModal from "../../vgmodal";
+import VGSidebar from "../../vgsidebar";
 import VGDropdown from "../../vgdropdown";
 
 import { execute, isElement, isVisible, makeRandomString, mergeDeepObject, reflow } from "../../../utils/js/functions";
@@ -450,8 +451,10 @@ class VGAlert {
 			};
 		}
 
-		const modal = VGModal.getOrCreateInstance(containerWrap);
-		const container = Selectors.find('.vg-modal-content', modal._element) || containerWrap;
+		const parent = containerWrap.classList.contains('vg-sidebar')
+			? VGSidebar.getOrCreateInstance(containerWrap)
+			: VGModal.getOrCreateInstance(containerWrap);
+		const container = Selectors.find('.vg-modal-content', containerWrap) || containerWrap;
 
 		const overlay = document.createElement('div');
 
@@ -463,7 +466,7 @@ class VGAlert {
 
 		return {
 			element: overlay,
-			render: modal,
+			render: parent,
 		};
 	}
 

package/app/modules/vgfiles/js/base.js

@@ -1,6 +1,6 @@
 /**
  * Описание: базовая логика выбора, валидации и отображения файлов VGFiles.
- * Возможности: управляет набором файлов, ошибками, списками, кастомными действиями, статистикой и скрытыми полями формы.
+ * Возможности: управляет файлами, валидацией, списками, миниатюрами и иконками, действиями, статистикой и скрытыми полями.
  */
 import BaseModule from "../../base-module";
 import {mergeDeepObject} from "../../../utils/js/functions";
@@ -8,7 +8,8 @@ import Html from "../../../utils/js/components/templater";
 import {lang_messages} from "../../../utils/js/components/lang";
 import {Classes, Manipulator} from "../../../utils/js/dom/manipulator";
 import Selectors from "../../../utils/js/dom/selectors";
-import {getSVG} from "../../module-fn";
+import {getSVG} from "../../module-fn";
+import {resolveFileIconName} from "../../../utils/js/components/file-icon";
 import VGFilePreview from "../../vgfilepreview";
 import {extractAudioMetadata} from "../../../utils/js/components/audio-metadata";
 
@@ -813,34 +814,28 @@ class VGFilesBase extends BaseModule {
 		}
 	}
 
-	_renderUIImage(file) {
-		const $container = this._tpl.div({ class: 'file-image' });
-
-		const src = file?.src || file?.image;
-		if (src) {
-			$container.appendChild(this._tpl.img(src, file.name || '', { class: 'file-preview' }));
-			return $container;
-		}
-
-		const customData = this._getFileCustomData(file);
-		const audioCover = String(customData.audioCover || '').trim();
-		if (audioCover) {
-			$container.appendChild(this._tpl.img(audioCover, this._resolveDisplayName(file), { class: 'file-preview' }));
-			return $container;
-		}
-
-		if (file?.type && file.type.startsWith('image/')) {
-			const objectUrl = this._getFileObjectUrl(file);
-			if (!objectUrl) {
-				return $container;
-			}
-			$container.appendChild(this._tpl.img(objectUrl, file.name, { class: 'file-preview' }));
-			return $container;
-		}
-
-		const icon = this._getIconByFileType(file);
-		$container.appendChild(this._tpl.i({}, icon, { isHTML: true }));
-		return $container;
+	_renderUIImage(file) {
+		const $container = this._tpl.div({ class: 'file-image' });
+		const renderIcon = () => {
+			const icon = this._getIconByFileType(file);
+			$container.replaceChildren(this._tpl.i({}, icon, { isHTML: true }));
+		};
+		const customData = this._getFileCustomData(file);
+		let imageSrc = String(file?.image || '').trim() || String(customData.audioCover || '').trim();
+
+		if (!imageSrc && resolveFileIconName({ type: file?.type, name: file?.name || file?.src }) === 'file-image') {
+			imageSrc = String(file?.src || '').trim() || this._getFileObjectUrl(file);
+		}
+
+		if (imageSrc) {
+			const image = this._tpl.img(imageSrc, this._resolveDisplayName(file), { class: 'file-preview' });
+			image.addEventListener('error', renderIcon, { once: true });
+			$container.appendChild(image);
+		} else {
+			renderIcon();
+		}
+
+		return $container;
 	}
 
 	_resolveDisplayName(file) {

package/app/modules/vgmodal/js/vgmodal.js

@@ -1,4 +1,8 @@
-import BaseModule from "../../base-module";
+/**
+ * Описание: модальные окна VGModal с декларативным и программным управлением.
+ * Возможности: AJAX, backdrop, геометрия окна, сворачивание и синхронизация доступности.
+ */
+import BaseModule from "../../base-module";
 import ScrollBarHelper from "../../../utils/js/components/scrollbar";
 import Backdrop from "../../../utils/js/components/backdrop";
 import Selectors from "../../../utils/js/dom/selectors";
@@ -346,7 +350,8 @@ class VGModal extends BaseModule {
 			this._saveInteractionState();
 			this._disableInteractionHandlers();
 			this._minimized.reset();
-			this._element.style.display = 'none';
+			this._element.style.display = 'none';
+			this._element.setAttribute('aria-hidden', 'true');
 			this._element.removeAttribute('aria-modal');
 			this._element.removeAttribute('role');
 			this._isTransitioning = false;
@@ -395,7 +400,8 @@ class VGModal extends BaseModule {
 			document.body.append(this._element);
 		}
 
-		this._element.style.display = 'block';
+		this._element.style.display = 'block';
+		this._element.removeAttribute('aria-hidden');
 		this._element.setAttribute('aria-modal', true);
 		this._element.setAttribute('role', 'dialog');
 		this._element.scrollTop = 0;

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

@@ -1,8 +1,11 @@
-import VGSelect from "./vgselect";
+/**
+ * Описание: делегированные обработчики интерфейса VGSelect.
+ * Возможности: открытие списка, выбор опций, теги, клавиатура и сброс формы.
+ */
+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';
 
@@ -100,56 +103,6 @@ const _handlersVGSelect = () => {
 		}
 	});
 
-	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));
 	});
@@ -236,4 +189,4 @@ const _handlersVGSelect = () => {
 	});
 }
 
-export default _handlersVGSelect;
+export default _handlersVGSelect;

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

@@ -1,9 +1,14 @@
-import BaseModule from "../../base-module";
+/**
+ * Описание: кастомный select с синхронизацией исходного поля и выпадающего списка.
+ * Возможности: поиск, группы, дерево, теги, AJAX-пагинация, события и освобождение ресурсов.
+ */
+import BaseModule from "../../base-module";
 import {
 	isDisabled,
 	isEmptyObj,
 	mergeDeepObject,
-	normalizeData,
+	normalizeData,
+	transliterate,
 } from "../../../utils/js/functions";
 import {Classes, Manipulator} from "../../../utils/js/dom/manipulator";
 import EventHandler from "../../../utils/js/dom/event";
@@ -73,10 +78,10 @@ class VGSelect extends BaseModule {
 			autosearch: true,
 			// Dropdown placement behavior:
 			// - none: default CSS positioning (no JS)
-			// - auto: choose top/bottom based on available space in overflow ancestor/viewport
+			// - auto (default): choose top/bottom based on available space in overflow ancestor/viewport
 			// - top: force open upwards
 			// - bottom: force open downwards
-			position: 'none',
+			position: 'auto',
 			search: {
 				enabled: false,
 				route: '',
@@ -104,7 +109,9 @@ class VGSelect extends BaseModule {
 		}, params));
 
 		this._observer = null;
-		this._observerTimeout = null;
+		this._observerTimeout = null;
+		this._searchTimeout = null;
+		this._disposed = false;
 		this._visibilityTransitionId = 0;
 		this._drop = Selectors.find(SELECTOR_DROPDOWN, this._element);
 		this._searchTerm = '';
@@ -152,8 +159,9 @@ class VGSelect extends BaseModule {
 	 * @param {HTMLElement} drop - Контейнер выпадающего списка
 	 * @returns {HTMLElement} - Обновлённый список
 	 */
-	static buildListOptions(selector, drop, params = {}) {
-		let list = drop.querySelector(`.${CLASS_NAME_LIST}`);
+	static buildListOptions(selector, drop, params = {}) {
+		let list = drop.querySelector(`.${CLASS_NAME_LIST}`);
+		const controls = list ? [...list.querySelectorAll(`.${CLASS_NAME_LOAD_MORE}, .${CLASS_NAME_LOADING}`)] : [];
 		if (!list) {
 			list = document.createElement('ul');
 			Classes.add(list, CLASS_NAME_LIST);
@@ -190,7 +198,8 @@ class VGSelect extends BaseModule {
 			});
 		}
 
-		return list;
+		controls.forEach(control => list.appendChild(control));
+		return list;
 	}
 
 	/**
@@ -459,17 +468,16 @@ class VGSelect extends BaseModule {
 		search.appendChild(searchInput);
 		this._drop.insertBefore(search, this._drop.firstChild);
 
-		let searchTimeout;
-		searchInput.addEventListener('input', (e) => {
+		searchInput.addEventListener('input', (e) => {
 			const term = e.target.value.trim();
 			const params = this._params;
 
 			this._callCallback('onSearch', { term });
 			if (params.search.remote && params.search.route) {
-				if (term.length < (params.search.minterm || 1)) return;
-
-				clearTimeout(searchTimeout);
-				searchTimeout = setTimeout(() => {
+				clearTimeout(this._searchTimeout);
+				this._remoteSearchAbortController?.abort();
+				if (term.length < (params.search.minterm || 1)) return;
+				this._searchTimeout = setTimeout(() => {
 					this._fetchRemoteData(term);
 				}, params.search.delay || 300);
 			} else {
@@ -520,7 +528,7 @@ class VGSelect extends BaseModule {
 		if (searchInput) searchInput.focus();
 
 		return this._queueCallback(() => {
-			if (transitionId !== this._visibilityTransitionId || !this._isShown()) return;
+			if (this._disposed || transitionId !== this._visibilityTransitionId || !this._isShown()) return;
 			this._updateDropdownPlacement();
 			EventHandler.trigger(this._element, EVENT_KEY_SHOWN, { relatedTarget });
 			this._triggerEvent(EVENT_KEY_OPEN);
@@ -552,7 +560,7 @@ class VGSelect extends BaseModule {
 		this._element.querySelector(SELECTOR_DATA_TOGGLE).setAttribute('aria-expanded', 'false');
 
 		this._queueCallback(() => {
-			if (transitionId !== this._visibilityTransitionId) return;
+			if (this._disposed || transitionId !== this._visibilityTransitionId) return;
 			this._element.classList.remove(CLASS_NAME_SHOW);
 			EventHandler.trigger(this._element, EVENT_KEY_HIDDEN, relatedTarget);
 			this._triggerEvent(EVENT_KEY_CLOSE);
@@ -646,16 +654,21 @@ class VGSelect extends BaseModule {
 	/**
 	 * Освобождает ресурсы (отключает observer, очищает таймеры)
 	 */
-	dispose() {
+	dispose() {
+		if (this._disposed) return;
 		this._visibilityTransitionId++;
 		if (this._observer) {
 			this._observer.disconnect();
 			this._observer = null;
 		}
 		clearTimeout(this._observerTimeout);
-		this._observerTimeout = null;
-		this._teardownDropdownPlacement();
-		super.dispose();
+		this._observerTimeout = null;
+		clearTimeout(this._searchTimeout);
+		this._remoteSearchAbortController?.abort();
+		if (this._isShown() && 'ontouchstart' in document.documentElement) document.body.style.pointerEvents = '';
+		this._teardownDropdownPlacement();
+		super.dispose();
+		this._disposed = true;
 	}
 
 	_setupDropdownPlacement() {
@@ -691,9 +704,9 @@ class VGSelect extends BaseModule {
 
 	_getPositionMode() {
 		const raw = this._params?.position;
-		const mode = raw == null ? 'none' : String(raw).trim().toLowerCase();
+		const mode = raw == null ? 'auto' : String(raw).trim().toLowerCase();
 		if (mode === 'auto' || mode === 'top' || mode === 'bottom' || mode === 'none') return mode;
-		return 'none';
+		return 'auto';
 	}
 
 	_getOverflowAncestor(startEl) {
@@ -764,23 +777,28 @@ class VGSelect extends BaseModule {
 	 */
 	static destroy(select) {
 		const container = select.nextElementSibling;
-		if (container && container.classList.contains(CLASS_NAME_CONTAINER)) {
-			container.remove();
-		}
+		if (container && container.classList.contains(CLASS_NAME_CONTAINER)) {
+			VGSelect.getInstance(container)?.dispose();
+			container.remove();
+		}
+		delete select.dataset.inited;
 	}
 
 	/**
 	 * Обновляет отображаемое значение (текст, теги)
 	 * @param {HTMLSelectElement} select - Исходный <select>
 	 */
-	static updateUI(select) {
+	static updateUI(select) {
 		const container = select.nextElementSibling;
 		if (!container || !container.classList.contains(CLASS_NAME_CONTAINER)) return;
 
 		const current = container.querySelector(SELECTOR_CURRENT);
 		const placeholder = select.dataset.placeholder || '';
 		const isMultiple = select.multiple;
-		const instance = VGSelect.getInstance(container);
+		const instance = VGSelect.getInstance(container);
+		container.querySelectorAll(`.${CLASS_NAME_OPTION}`).forEach(item => {
+			item.classList.toggle('selected', !!select.options[Number(item.dataset.index)]?.selected);
+		});
 
 		if (isMultiple) {
 			const tags = current.querySelector(`.${CLASS_NAME_TAGS}`);
@@ -797,8 +815,12 @@ class VGSelect extends BaseModule {
 				instance?._callCallback('onClear');
 			}
 
-			if (selected.length === 0) {
-				input.placeholder = placeholder;
+			if (selected.length === 0) {
+				input.placeholder = placeholder;
+				const label = document.createElement('span');
+				label.className = CLASS_NAME_PLACEHOLDER;
+				label.textContent = placeholder;
+				tags.insertBefore(label, input);
 			} else {
 				input.placeholder = '';
 				selected.forEach(opt => {
@@ -983,15 +1005,16 @@ class VGSelect extends BaseModule {
 	_initLoadMoreButton() {
 		if (!this._params.search?.pagination || !this._params.search.remote) return;
 
-		const list = this._element.querySelector(SELECTOR_LIST);
-		if (!list) return;
+		const list = this._element.querySelector(SELECTOR_LIST);
+		if (!list) return;
+		if (list.querySelector(SELECTOR_LOAD_MORE_BTN)) return;
 
 		const btn = document.createElement('li');
 		btn.className = CLASS_NAME_LOAD_MORE;
 		btn.style.textAlign = 'center';
 		btn.style.padding = '8px';
 		btn.style.cursor = 'pointer';
-		btn.style.color = '#007bff';
+		btn.style.color = 'var(--vg-primary-color, #007bff)';
 		btn.style.fontSize = '14px';
 		btn.style.fontWeight = '500';
 		btn.textContent = this._params.search.loadMoreText;
@@ -1042,9 +1065,10 @@ class VGSelect extends BaseModule {
 	 * Загружает следующую страницу данных по клику
 	 * @private
 	 */
-	async _loadNextPage() {
+	async _loadNextPage() {
 		const { route, pageParam = 'page', termParam = 'q', perpage = 20 } = this._params.search;
-		const nextPage = this._currentPage + 1;
+		const nextPage = this._currentPage + 1;
+		const requestId = this._remoteSearchRequestId;
 
 		const url = new URL(route, window.location.origin);
 		url.searchParams.set(termParam, this._searchTerm);
@@ -1055,9 +1079,11 @@ class VGSelect extends BaseModule {
 		this._showLoading(true);
 		this._hideLoadMoreButton(true);
 
-		try {
-			const res = await fetch(url, { headers: { 'Content-Type': 'application/json' } });
-			const data = await res.json();
+		try {
+			const res = await fetch(url, { headers: { 'Content-Type': 'application/json' } });
+			if (!res.ok) throw new Error(`HTTP ${res.status}`);
+			const data = await res.json();
+			if (this._disposed || requestId !== this._remoteSearchRequestId) return;
 
 			if (Array.isArray(data.results)) {
 				VGSelect.addOptions(this._element.previousElementSibling, data, { preserve: true });
@@ -1072,13 +1098,16 @@ class VGSelect extends BaseModule {
 				this._callCallback('onLoadNext', { page: this._currentPage, data });
 				this._triggerEvent(EVENT_KEY_LOAD_NEXT, { page: this._currentPage, term: this._searchTerm });
 			}
-		} catch (err) {
+		} catch (err) {
+			if (this._disposed || requestId !== this._remoteSearchRequestId) return;
 			console.error('VGSelect: Failed to load next page', err);
 			this._triggerEvent(EVENT_KEY_ERROR, { error: 'Pagination fetch failed', term: this._searchTerm });
 			this._hideLoadMoreButton(false); // оставить кнопку при ошибке
-		} finally {
-			this._showLoading(false);
-			this._loading = false;
+		} finally {
+			if (!this._disposed && requestId === this._remoteSearchRequestId) {
+				this._showLoading(false);
+				this._loading = false;
+			}
 		}
 	}
 
@@ -1100,7 +1129,8 @@ class VGSelect extends BaseModule {
 		// Обновляем текущее "желательное" состояние
 		this._searchTerm = term;
 		this._currentPage = 1;
-		this._totalPages = null;
+		this._totalPages = null;
+		this._loading = false;
 
 		// Отменяем предыдущий запрос (если ещё летит)
 		if (this._remoteSearchAbortController) {
@@ -1120,10 +1150,14 @@ class VGSelect extends BaseModule {
 			headers: { 'Content-Type': 'application/json' },
 			signal
 		})
-			.then(res => res.json())
+			.then(res => {
+				if (!res.ok) throw new Error(`HTTP ${res.status}`);
+				return res.json();
+			})
 			.then(data => {
 				// Если прилетел не самый свежий ответ — игнорируем
-				if (requestId !== this._remoteSearchRequestId) return;
+				if (this._disposed || requestId !== this._remoteSearchRequestId) return;
+				if (!Array.isArray(data.results)) throw new Error('Invalid results');
 
 				// Если пользователь уже ввёл другой текст — тоже игнорируем
 				const liveTerm = searchInput ? searchInput.value.trim() : '';
@@ -1172,7 +1206,8 @@ class VGSelect extends BaseModule {
 					this._element.classList.add(CLASS_NAME_SHOW, CLASS_NAME_ACTIVE);
 				}
 			})
-			.catch(err => {
+			.catch(err => {
+				if (this._disposed || requestId !== this._remoteSearchRequestId) return;
 				// Abort — нормальная ситуация при быстром вводе
 				if (err && (err.name === 'AbortError')) return;
 
@@ -1182,7 +1217,7 @@ class VGSelect extends BaseModule {
 			})
 			.finally(() => {
 				// Лоадер убираем только для последнего актуального запроса
-				if (requestId === this._remoteSearchRequestId) {
+				if (!this._disposed && requestId === this._remoteSearchRequestId) {
 					this._showLoading(false);
 				}
 			});
@@ -1281,8 +1316,9 @@ class VGSelect extends BaseModule {
 
 		if (isRebuild) {
 			const drop = container.querySelector(`.${CLASS_NAME_DROPDOWN}`);
-			VGSelect.buildListOptions(select, drop, instance?._params || {});
-			instance?._syncSearch();
+			VGSelect.buildListOptions(select, drop, instance?._params || {});
+			instance?._syncSearch();
+			this.updateUI(select);
 			instance?._triggerEvent(EVENT_KEY_REBUILD);
 		} else {
 			this.updateUI(select);
@@ -1294,21 +1330,29 @@ class VGSelect extends BaseModule {
 	 * @param {string} term - Поисковый запрос
 	 * @private
 	 */
-	_filterLocalOptions(term) {
-		const list = this._drop.querySelector(`.${CLASS_NAME_LIST}`);
-		const options = list.querySelectorAll(`.${CLASS_NAME_OPTION}`);
-
-		if (!term) {
-			options.forEach(el => el.hidden = false);
-			return;
-		}
-
-		term = term.toLowerCase();
-		options.forEach(el => {
-			const text = el.textContent.toLowerCase();
-			el.hidden = !text.includes(term);
-		});
-	}
+	_filterLocalOptions(term) {
+		const list = this._drop.querySelector(`.${CLASS_NAME_LIST}`);
+		const options = list.querySelectorAll(`.${CLASS_NAME_OPTION}`);
+		term = term.toLowerCase();
+		const search = [term, transliterate(term), transliterate(term, true)];
+		let results = 0;
+		options.forEach(el => {
+			const text = el.textContent.toLowerCase();
+			const option = this._element.previousElementSibling.options[Number(el.dataset.index)];
+			const empty = option?.value === '' && text.trim() === '';
+			const visible = !empty && (!term || search.some(value => text.includes(value)));
+			el.hidden = !visible;
+			el.style.display = visible ? '' : 'none';
+			if (visible) results++;
+		});
+		list.querySelectorAll(`.${CLASS_NAME_OPTGROUP}`).forEach(group => {
+			const visible = [...group.querySelectorAll(`.${CLASS_NAME_OPTION}`)].some(option => !option.hidden);
+			group.hidden = !visible;
+			group.style.display = visible ? '' : 'none';
+		});
+		this._triggerEvent(`${NAME_KEY}.search`, {query: term, results});
+		this._callCallback('onSearch', {query: term, results});
+	}
 }
 
 _handlersVGSelect();

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

@@ -11,7 +11,7 @@
 @use "variables" as vars;
 
 select {
-	&.vg-select {
+	&.vg-select[data-inited="true"] {
 		position: absolute;
 		left: 0;
 		top: 0;

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

@@ -1,4 +1,8 @@
-import BaseModule from "../../base-module";
+/**
+ * Описание: боковые панели VGSidebar с декларативным и программным управлением.
+ * Возможности: четыре стороны экрана, backdrop, прокрутка, URL-хэш, AJAX, события и доступность.
+ */
+import BaseModule from "../../base-module";
 import { isDisabled, isVisible, mergeDeepObject } from "../../../utils/js/functions";
 import EventHandler from "../../../utils/js/dom/event";
 import { dismissTrigger } from "../../module-fn";
@@ -211,7 +215,8 @@ class VGSidebar extends BaseModule {
 			EventHandler.on(window, EVENT_KEYS.POPSTATE_DATA_API, this._showPopstateHandler);
 		}
 
-		this._element.classList.add(CLASS_NAME_SHOW);
+		this._element.classList.add(CLASS_NAME_SHOW);
+		this._element.removeAttribute('aria-hidden');
 		document.body.classList.add(CLASS_NAME_OPEN);
 
 		const completeCallback = () => {
@@ -237,7 +242,8 @@ class VGSidebar extends BaseModule {
 		const hideEvent = EventHandler.trigger(this._element, EVENT_KEYS.HIDE);
 		if (hideEvent.defaultPrevented) return;
 
-		this._element.classList.remove(CLASS_NAME_SHOW);
+		this._element.classList.remove(CLASS_NAME_SHOW);
+		this._element.setAttribute('aria-hidden', 'true');
 		const remainingOpenSidebars = VGSidebar.getOpenSidebars(this._element);
 		if (!remainingOpenSidebars.length) {
 			document.body.classList.remove(CLASS_NAME_OPEN);
@@ -288,13 +294,17 @@ class VGSidebar extends BaseModule {
 	 * Очищает ресурсы модуля.
 	 * @override
 	 */
-	dispose() {
-		super.dispose();
-		EventHandler.off(this._element, EVENT_KEYS.HIDE);
+	dispose() {
+		if (!this._element) return;
+		EventHandler.off(document, EVENT_KEYS.KEYDOWN_DISMISS, this._keydownHandler);
+		EventHandler.off(this._element, EVENT_KEYS.HIDE);
 		if (this._showPopstateHandler) {
 			EventHandler.off(window, EVENT_KEYS.POPSTATE_DATA_API, this._showPopstateHandler);
 		}
-		this._scrollBar.reset();
+		if (!VGSidebar.getOpenSidebars(this._element).length && !Backdrop.isActive()) {
+			this._scrollBar.reset();
+		}
+		super.dispose();
 	}
 
 	/**
@@ -311,15 +321,16 @@ class VGSidebar extends BaseModule {
 	 * @private
 	 */
 	_addEventListeners() {
-		EventHandler.on(document, EVENT_KEYS.KEYDOWN_DISMISS, (event) => {
-			if (event.key !== 'Escape') return;
+		this._keydownHandler = (event) => {
+			if (event.key !== 'Escape' || !this._isShown()) return;
 
 			if (this._params.keyboard) {
 				this.hide();
 			} else {
 				EventHandler.trigger(this._element, EVENT_KEYS.HIDE_PREVENTED);
 			}
-		});
+		};
+		EventHandler.on(document, EVENT_KEYS.KEYDOWN_DISMISS, this._keydownHandler);
 	}
 }