@topvisor/ui 1.0.42-checkvisibility.3 → 1.0.42-dev.1

package/src/components/popup/lib/popup.ts

@@ -0,0 +1,858 @@
+import Core from '@/core/core/core';
+import Component from '@/components/component';
+import DOM from '@/core/utils/dom';
+import Worker from '@/components/popup/lib/worker';
+import GlobalEvents from '@/components/popup/lib/popup.globalEvents';
+
+import css from '@/components/popup/popup/style/popup.css?inline';
+import cssM from '@/components/popup/popup/style/popup.m.css?inline';
+import cssPC from '@/components/popup/popup/style/popup.pc.css?inline';
+import { useI18n } from '@/core/plugins/i18n';
+import type { OpenerProps } from '../popup/types';
+
+Core.insertStyleToPage(css);
+Core.insertStyleToPage(cssM, 'm');
+Core.insertStyleToPage(cssPC, 'pc');
+
+export interface PopupOptions {
+	popup?: string,
+	id?: string,
+	p?: number,
+	notch?: boolean,
+	class?: string,
+	posBy?: 'left' | 'right' | 'fixed' | Element,
+	frontSelector?: string,
+	invertX?: boolean,
+	openByHover?: boolean,
+	useOriginal?: boolean,
+	transitionDuration?: number,
+	isFullScreen?: boolean,
+}
+
+/**
+ * Основной объект js компонента TopPopup
+ *
+ * Добавляет jQuery события на this.el, если jQuery загружен:
+ *
+ * - aftershow.top-menu-popup
+ * - afterclose.top-menu-popup
+ */
+export class TopLibPopup<T extends Record<string, any> | undefined = undefined> extends Component {
+
+	static componentName = 'TopPopup';
+
+	declare el: HTMLElement & { __TopPopupOpenerProps: OpenerProps<T> }; // элемент, вызвавший открытие Popup
+	elActiveByDefault: boolean | undefined; // элемент уже имеет класс top-active перед открытием окна
+	elPopup: HTMLElement | undefined; // Popup .top-popup-wrapper
+	elPopupInner: HTMLElement | undefined; // контентная часть Popup  .top-popup
+	elPopupHeader: HTMLElement | undefined | null;
+	elPopupWidget: HTMLElement | undefined | null;
+	elPopupBody: HTMLElement | undefined | null;
+	elPopupFooter: HTMLElement | undefined | null;
+	elFront: HTMLElement | undefined | null;
+	openerIsInput = false;
+
+	popupParent: TopLibPopup | undefined;
+
+	$: JQuery<HTMLElement> | undefined; // только если есть jQuery
+
+	elStartPosition: HTMLElement | undefined | null; // используется для useOriginal
+	shift = {
+		top: 0,
+		left: 0,
+	};
+	isClosed = false; // флаг того, что меню закрыто
+	isFirstClick = true;
+	type: string | undefined; // selector или html
+
+	options: PopupOptions = {
+		popup: '', // selector, text
+		p: 0, // положение меню (0 - над элементом, 1 - сверху, 2 - справа, 3 - снизу, 4 слева)
+		notch: false, // отображать ли клювик
+
+		class: '', // класс, добавляемый меню
+
+		posBy: 'left', // способ привязки позиционирования меню (left/right - левый/правый край родителя, fixed - по документу)
+		frontSelector: '',
+		invertX: false, // базовая ордината - правая граница элемента, а не левая
+		openByHover: false, // открывать при наведении
+
+		useOriginal: false, // использовать оригинальный шаблон, без клонирвоания (для сохранения состояния меню)
+
+		transitionDuration: 100, // значение прописано в css
+
+		isFullScreen: false,
+	};
+
+	events = {};
+
+	/**
+	 * Создать Popup
+	 * @param el - элемент, открывающий меню
+	 * @param options
+	 */
+	constructor(el: HTMLElement, options: PopupOptions) {
+		super();
+
+		this.init(TopLibPopup.componentName, el, options);
+	}
+
+	async mount(): Promise<void> {
+		if (!(this.el instanceof HTMLElement)) return;
+		const vueConnector = this.vueGetComponent();
+
+		if (this.el.closest('.top-popup-wrapper')) this.popupParent = Worker.getPopup(this.el.closest('.top-popup-wrapper')!);
+
+		await this.mountJQuery();
+
+		if (DOM.css(this.el, 'position') !== 'absolute') {
+			this.el.style.position = 'relative';
+		}
+
+		this.el.dataset.topPopupOpened = 'opened';
+		this.elActiveByDefault = this.el.classList.contains('top-active');
+		this.el.classList.add('top-active');
+
+		this.openerIsInput = this.el.classList.contains('top-input');
+
+		if (vueConnector) {
+			// компонент vue Popup
+			this.type = 'vue';
+
+			this.options.popup = '';
+			this.elPopup = DOM.genEl('div', {}, this.options.popup);
+		} else if (this.options.popup?.match(/^[#.]/)) {
+			// selector
+			this.type = 'selector';
+
+			this.elPopup = document.querySelector<HTMLElement>(`${this.options.popup}.template`) || undefined;
+		} else {
+			// html
+			this.type = 'html';
+
+			if (this.options.useOriginal) {
+				throw ('Option useOriginal not allowed for text templates');
+			}
+
+			this.elPopup = DOM.genEl('div', {}, this.options.popup ?? '');
+		}
+
+		if (!this.elPopup || vueConnector?.opened) {
+			// возможно шаблон не найден, так как он используется в уже открытом меню
+			if (this.options.useOriginal || vueConnector?.opened) {
+				// закрыть открытое меню
+				if (vueConnector?.opened) {
+					this.elPopup = vueConnector.popup.elPopup;
+				} else {
+					this.elPopup = document.querySelector<HTMLElement>(`${this.options.popup}.top-popup-wrapper-shown`) || undefined;
+				}
+
+				if (this.elPopup) {
+					this.el.dataset.topPopupOpened = '';
+
+					if (!this.elActiveByDefault) {
+						this.el.classList.remove('top-active');
+					}
+
+					Worker.close(this.elPopup);
+
+					// повторит попытку открыть меню
+					setTimeout(() => this.mount(), this.options.transitionDuration);
+
+					return;
+				}
+
+				throw ('Option useOriginal state allowed only elements .template');
+			}
+
+			// возможно вместо шаблона используется другой элемент
+			this.elPopup = document.querySelector<HTMLElement>(`${this.options.popup}:not(.top-popup-wrapper)`) || undefined;
+		}
+
+		if (!this.elPopup) {
+			return;
+		}
+
+		if (this.options.useOriginal) {
+			this.elStartPosition = this.elPopup.closest<HTMLElement>('.top-popup-el-start-position');
+			if (!this.elStartPosition) {
+				this.elStartPosition = DOM.wrap(this.elPopup, 'i');
+				this.elStartPosition.classList.add('top-popup-el-start-position', 'hidden');
+			}
+		} else {
+			this.elPopup = this.elPopup.cloneNode(true) as HTMLElement;
+
+			// вывод в меню копии произвольного элемента
+			if (this.type === 'selector' && !this.elPopup.matches('.template')) {
+				this.elPopup.classList.remove('hidden');
+
+				if (!this.elPopup.querySelector(':scope > .top-popup_content')) {
+					this.elPopup.classList.add('top-popup_content');
+				}
+
+				this.elPopup = DOM.wrap(this.elPopup, 'div');
+			}
+
+			if (this.type === 'html') {
+				if (!this.elPopup.querySelector(':scope > .top-popup_content')) {
+					this.elPopup.classList.add('top-popup_content');
+
+					this.elPopup = DOM.wrap(this.elPopup, 'div');
+				}
+			}
+
+			// вложенный Popup
+			if (this.type === 'selector' && !this.elPopup.matches('.template') || this.type === 'html' || this.type === 'vue') {
+				DOM.querySelectorAllArray(this.elPopup, '[data-top-popup]').forEach(el => {
+					if (el instanceof HTMLElement) el.dataset.topPopupPosBy = 'fixed';
+				});
+				DOM.querySelectorAllArray(this.elPopup, '.top-popup-wrapper').forEach(el => el.remove());
+			}
+		}
+
+		Worker.decoratorBeforeOpen(this);
+
+		if (vueConnector) {
+			this.options.class = vueConnector.classRef.value;
+			if (vueConnector.transitionDurationRef.value !== undefined) {
+				this.options.transitionDuration = vueConnector.transitionDurationRef.value;
+
+				if (this.elPopup instanceof HTMLElement) {
+					this.elPopup.style.setProperty(
+						'--top-popup-transition-delay',
+						this.options.transitionDuration + 'ms',
+					);
+				}
+			}
+		}
+
+		this.elPopupInner = document.createElement('div');
+		this.elPopupInner.classList.add('top-popupPanel', 'top-popup');
+
+		while (this.elPopup.firstChild) {
+			this.elPopupInner.appendChild(this.elPopup.firstChild);
+		}
+
+		this.elPopup.append(this.elPopupInner);
+
+		this.elPopup.classList.add('top-popup-wrapper');
+
+		if (this.options.class) {
+			const classes = this.options.class.split(' ');
+			this.elPopup.classList.add(...classes);
+		}
+
+		if (this.options.notch) {
+			this.elPopup.classList.add('with_notch');
+			this.elPopup.insertAdjacentHTML('beforeend', '<i class="notch notch-border"></i><i class="notch"></i>');
+		}
+
+		await this.vueOpen();
+
+		this.elPopupHeader = this.elPopupInner.querySelector<HTMLElement>('.top-popup_header');
+		this.elPopupWidget = this.elPopupInner.querySelector<HTMLElement>('.top-popup_widget');
+		this.elPopupBody = this.elPopupInner.querySelector<HTMLElement>('.top-popup_content');
+		this.elPopupFooter = this.elPopupInner.querySelector<HTMLElement>('.top-popup_footer');
+
+		const existsWidgetSearch = !!this.elPopup.querySelector('[data-widget="search"]');
+
+		if (this.options.isFullScreen && !existsWidgetSearch) {
+			const i18n = useI18n();
+
+			if (!this.elPopupHeader && i18n.Common.Close) {
+				this.elPopupHeader = DOM.genEl('i', { class: 'top-popup_header' });
+				this.elPopupInner.prepend(this.elPopupHeader);
+
+				this.elPopupHeader.prepend(DOM.genEl('i', { class: 'a closer' }, i18n.Common.Close));
+				this.elPopupHeader.append(DOM.genEl('i', { class: 'top-popup_headerButton' }));
+			}
+		}
+
+		DOM.storage(this.elPopup, TopLibPopup.componentName, this);
+
+		if (this.options.frontSelector) {
+			this.elFront = document.querySelector<HTMLElement>(this.options.frontSelector);
+		}
+		if (!this.elFront) {
+			this.elFront = this.el.closest<HTMLElement>('.top-popup-front');
+		}
+		if (!this.elFront) {
+			this.elFront = document.body;
+		}
+
+		if (this.elPopup instanceof HTMLElement) {
+			this.elPopup.style.width = this.el.offsetWidth + 'px';
+			this.elPopup.style.height = this.el.offsetHeight + 'px';
+			this.elPopup.style.top = this.el.offsetTop + 'px';
+			this.elPopup.style.right = parseInt(this.el.style.right || '0') + 'px';
+			this.elPopup.style.bottom = parseInt(this.el.style.bottom || '0') + 'px';
+		}
+
+		this.el.parentElement?.insertBefore(this.elPopup, this.el);
+		this.elPopup.classList.remove('template');
+
+		if (this.options.invertX) {
+			this.elPopup.classList.add('invert-x');
+		}
+
+		let fromTop = !!this.el.closest('.modal-header');
+		if (!fromTop) {
+			fromTop = !!this.el.closest('#top_panel');
+		}
+		if (!fromTop) {
+			fromTop = !!this.el.closest('#secondmenu');
+		}
+		if (fromTop) {
+			this.elPopup.classList.add('p-from-top');
+		}
+
+		// появление с анимацией
+		setTimeout(() => this.elPopup?.classList.add('top-popup-wrapper-shown'));
+
+		if (this.elFront && !this.elFront.matches('body')) {
+			this.elFront.append(this.elPopup);
+
+			this.shift.top = DOM.offset(this.el).top - this.el.offsetTop - DOM.offset(this.elFront).top;
+			this.shift.left = DOM.offset(this.el).left - this.el.offsetLeft - DOM.offset(this.elFront).left;
+
+			// position() не учитывает margin, замечено для flex
+			this.shift.top -= parseInt(this.el.style['margin-top'] || 0);
+			this.shift.left -= parseInt(this.el.style['margin-left'] || 0);
+
+			if (this.elPopup instanceof HTMLElement) {
+				this.elPopup.style.top = parseInt(this.elPopup.style.top || '0') + this.shift.top + 'px';
+				this.elPopup.style.left = parseInt(this.elPopup.style.left || '0') + this.shift.left + 'px';
+			}
+		}
+
+		if (this.$ && Core.$) {
+			this.$.trigger('aftershow.top-menu-popup', [Core.$(this.elPopup)]);
+		}
+
+		this.recalcPosition();
+
+		this.elPopup.setAttribute('tabindex', '0');
+		this.focus();
+
+		Worker.decoratorAfterOpen(this);
+
+		this.mountEvents();
+	}
+
+	async mountJQuery() {
+		if (!Core.$) return;
+
+		this.$ = Core.$(this.el);
+	}
+
+	/**
+	 * Выполнить фокусировку на нужный элемент после открытия окна
+	 */
+	focus(): void {
+		let el: Element | null;
+
+		if (this.elPopup) {
+			el = DOM.querySelectorVisible(this.elPopup, '.top-popup-autofocus');
+
+			// поле ввода
+			if (!el) {
+				el = DOM.querySelectorVisible(this.elPopup, ':read-write, select:not(:disabled)');
+			}
+
+			// кнопка
+			if (!el) {
+				el = DOM.querySelectorVisible(this.elPopup, '.top-popup_footer .top-button');
+			}
+
+			if (!el) {
+				el = this.elPopup;
+			}
+
+			if (!this.openerIsInput) {
+				// выполнить фокусировку сразу, для применения необходимых стилей
+				if (el instanceof HTMLElement) el.focus();
+
+				// выполнить фокусировку после завершения анимации открытия popup
+				setTimeout(() => {
+					if (el instanceof HTMLElement) el.focus();
+				}, this.options.transitionDuration);
+			}
+		}
+	}
+
+	mountEvents(): void {
+		// закрытие при клике вне контекстного меню
+		this.addEventListenerWithUnmount(document, 'mousedown', (e) => this.onMousedown(e as MouseEvent));
+
+		if (this.elPopup && this.elPopupInner) {
+			// закрыть другие меню
+			this.addEventListenerWithUnmount(this.elPopup, 'focus', (e) => this.onFocus(e as FocusEvent));
+
+			// автоматическое закрытие при отведении мыши
+			if (this.options.openByHover) {
+				this.addEventListenerWithUnmount(this.elPopup, 'mouseleave', (e) => this.onMouseleave(e as MouseEvent));
+				this.addEventListenerWithUnmount(this.elPopupInner, 'mouseleave', (e) => this.onMouseleave(e as MouseEvent));
+			}
+		}
+
+		// не скроллить страницу
+		if (this.options.isFullScreen && this.elPopupBody) {
+			this.addEventListenerWithUnmount(this.elPopupBody, 'touchmove', (e) => this.onTouchmove(e as TouchEvent));
+		}
+	}
+
+	/**
+	 * Обработка клика вне окна
+	 */
+	private onMousedown(e: MouseEvent): void {
+		// // не оригинальное событие
+		// if (!e || !e.originalEvent || !e.originalEvent.isTrusted) {
+		// 	return;
+		// }
+
+		// Popup уже закрыт
+		if (!this.elPopup || !(e.target instanceof Element)) {
+			return;
+		}
+
+		// клик на внешнем элементе
+		if (!this.isFirstClick) {
+			return;
+		}
+
+		this.isFirstClick = false;
+		setTimeout(() => this.isFirstClick = true);
+
+		// клик не основной кнопкой мыши
+		if (e instanceof MouseEvent && e.button !== 0) {
+			return;
+		}
+
+		// открыто другое меню с posBy = fixed, сначала должно быть закрыто оно
+		let elPopupOpened = DOM.querySelectorVisibleLast(document.body, ':scope > .top-popup-wrapper');
+		if (elPopupOpened && elPopupOpened !== this.elPopup) {
+			return;
+		}
+
+		// открыто другое меню в top-popup-front, сначала должно быть закрыто оно
+		if (e.target.closest('.top-popup-front')) {
+			elPopupOpened = DOM.querySelectorVisibleLast(e.target.closest('.top-popup-front')!, ':scope > .top-popup-wrapper');
+
+			if (elPopupOpened && elPopupOpened !== this.elPopup) {
+				return;
+			}
+		}
+
+		// клик внутри этого меню
+		if (this.elPopup.contains(e.target)) {
+			return;
+		}
+
+		// клик вне родительского диалогового окна
+		if (this.elPopup.closest('.ui-dialog') && !e.target.closest('.ui-dialog')) {
+			return;
+		}
+
+		if (Worker.decoratorIsIgnoreOuterClick(e)) {
+			return;
+		}
+
+		Worker.close(this.elPopup);
+	}
+
+	/**
+	 * Закрыть другие Popup при фокусе на элемент формы в текущем
+	 */
+	private onFocus(e: FocusEvent): void {
+		if (e.target instanceof Element && e.target.matches('input')) {
+			return;
+		}
+
+		// // не оригинальное событие
+		// if (!e || !e.originalEvent || !e.originalEvent.isTrusted) {
+		// 	return;
+		// }
+
+		// это окно уже закрывается
+		if (this.isClosed) {
+			return;
+		}
+
+		const elsPopups = Worker.getAllVisible();
+		elsPopups.forEach(elPopup => {
+			// фокус внутри этого окна
+			if (this.elPopup?.contains(elPopup)) {
+				return;
+			}
+
+			// это Popup из которого был открыт Popup с фокусом
+			// глубина вложенности: до 3 подменю
+			if (
+				this.popupParent?.elPopup === elPopup ||
+				this.popupParent?.popupParent?.elPopup === elPopup
+			) {
+				return;
+			}
+
+			Worker.close(elPopup);
+		});
+	}
+
+	/**
+	 * Закрыть Popup при отведении мыши
+	 */
+	private onMouseleave(_e: MouseEvent): void {
+		setTimeout(() => {
+			if (this.elPopupInner && this.elPopupInner.matches(':hover') || !this.elPopup) {
+				return;
+			}
+
+			Worker.close(this.elPopup);
+		}, 100);
+	}
+
+	/**
+	 * Контроль положения Popup при fixed позиционировании
+	 */
+	private onResize(): void {
+		// на android при вызове метода append сбрасывается фокус с input внутри this.elPopup
+		if (this.elPopup && this.elPopup.parentElement !== document.body) {
+			document.body.append(this.elPopup);
+		}
+
+		if (this.elPopup instanceof HTMLElement) {
+			this.elPopup.style.top = DOM.offset(this.el).top + 'px';
+			this.elPopup.style.left = DOM.offset(this.el).left + 'px';
+		}
+	}
+
+	unmount(): void {
+		super.unmount();
+
+		if (this.el instanceof HTMLElement) this.el.dataset.topPopupOpened = '';
+		if (!this.elActiveByDefault) {
+			this.el.classList.remove('top-active');
+		}
+
+		let style = this.el.getAttribute('style');
+		if (style) {
+			style = style.replace(/position:[^;]*;?/g, '');
+			this.el.setAttribute('style', style);
+		}
+	}
+
+	// контроль за положением Popup, чтобы оно не вылезало за пределы документа
+	recalcPosition(pForce?: typeof this.options.p): void {
+		if (!(this.elPopup instanceof HTMLElement)) return;
+
+		let p = pForce ?? this.options.p;
+		let leftPos: number;
+
+		if (this.el instanceof HTMLElement) {
+			this.elPopup.style.height = this.el.offsetHeight + 'px';
+
+			this.elPopup.classList.remove('p0', 'p1', 'p2', 'p3', 'p4');
+			this.elPopup.classList.add('p' + p);
+
+			switch (this.options.posBy) {
+				case 'left':
+					leftPos = this.el.offsetLeft + parseInt(this.el.style['margin-left'] || '0');
+					leftPos += this.shift.left;
+					this.elPopup.style.left = leftPos + 'px';
+
+					break;
+				case 'right':
+					if (!(this.el.offsetParent instanceof HTMLElement)) break;
+
+					leftPos = this.el.offsetLeft + parseInt(this.el.style['margin-left'] || '0');
+					this.elPopup.style.right = this.el.offsetParent.offsetWidth - this.el.offsetWidth - leftPos + 'px';
+
+					break;
+				case 'fixed':
+					this.addEventListenerWithUnmount(window, 'resize', () => this.onResize());
+
+					this.onResize();
+
+					break;
+				default:
+					this.options.posBy?.append(this.elPopup);
+			}
+		}
+
+		// контроль за пложением Popup, чтобы оно не вылезало за пределы документа
+		const boundingClientRect = this.elPopup.getBoundingClientRect();
+		this.elPopup.style.setProperty('--top-popup-height', this.elPopup.offsetHeight + 'px');
+		this.elPopup.style.setProperty('--top-popup-right-bounding', boundingClientRect.right + 'px');
+		this.elPopup.style.setProperty('--top-popup-bottom-bounding', boundingClientRect.bottom + 'px');
+		this.elPopup.style.setProperty('--top-popup-top', boundingClientRect.top + 'px');
+		this.elPopup.style.setProperty('--top-popup-left', boundingClientRect.left + 'px');
+
+		if (this.elPopupInner instanceof HTMLElement) {
+			this.elPopupInner.style.maxWidth = 'unset';
+			this.elPopupInner.style.maxHeight = 'unset';
+		}
+
+		// выходит ли popup за экран с конкретного края
+		const out = {
+			top: false,
+			right: false,
+			bottom: false,
+			left: false,
+		};
+
+		// выходит ли popup за экран с конкретного края, если применено инвертирование
+		const outWithInvert = {
+			top: false,
+			right: false,
+			bottom: false,
+			left: false,
+		};
+
+		// имеет ли смысл прикреплять окно к другой стороне кнопки
+		let canUseInvertX = boundingClientRect.left > window.innerWidth / 2;
+		let canUseInvertY = boundingClientRect.top > window.innerHeight / 2;
+
+		if (p === 4) {
+			canUseInvertX = !canUseInvertX;
+		}
+
+		if (p === 1) {
+			canUseInvertY = !canUseInvertY;
+		}
+
+		const contentBoundingClientRect = this.elPopupInner?.getBoundingClientRect();
+
+		let contentRight: number;
+		let contentBottom: number;
+
+		const margin = DOM.cssNumber(this.elPopup, '--top-popup-offset');
+		const elHeight = this.el.offsetHeight;
+		const elWidth = this.el.offsetWidth;
+
+		if (contentBoundingClientRect) {
+			contentRight = window.innerWidth - contentBoundingClientRect.right;
+			contentBottom = window.innerHeight - contentBoundingClientRect.bottom;
+
+			if (contentBoundingClientRect.top < margin) {
+				out.top = true;
+
+				if (contentBoundingClientRect.top < margin * 2 - contentBoundingClientRect.height + elHeight) {
+					outWithInvert.top = true;
+				}
+			}
+
+			if (contentRight < margin) {
+				out.right = true;
+
+				if (contentRight < margin * 2 - contentBoundingClientRect.width + elWidth) {
+					outWithInvert.right = true;
+				}
+			}
+
+			if (contentBottom < margin) {
+				out.bottom = true;
+
+				if (contentBottom < margin * 2 - contentBoundingClientRect.height + elHeight) {
+					outWithInvert.bottom = true;
+				}
+			}
+
+			if (contentBoundingClientRect.left < margin) {
+				out.left = true;
+
+				if (contentBoundingClientRect.left < margin * 2 - contentBoundingClientRect.width + elHeight) {
+					outWithInvert.left = true;
+				}
+			}
+		}
+
+		/**
+		 * Определить новое положение p, если popup не помещается
+		 *
+		 * Следует выполнять в два этапа:
+		 * - по горизонтали
+		 * - по вертикали
+		 */
+		const genP = (axis: 'x' | 'y', p: number) => {
+			// проверяем горизонталь
+			if (axis === 'x') {
+				if (!out.right && !out.left) return p;
+
+				if (p === 1 || p === 3) {
+					if (!outWithInvert.right && !outWithInvert.left && canUseInvertX) return p;
+				}
+
+				if (out.right && (p === 0 || p === 2) && canUseInvertX) {
+					p = 4;
+				}
+
+				if (out.left && (p === 0 || p === 4) && canUseInvertX) {
+					p = 2;
+				}
+			}
+
+			// проверяем вертикаль
+			if (axis === 'y') {
+				// не помещается и можно использовать инвертирование
+				if (!out.top && !out.bottom) return p;
+
+				if (p === 2 || p === 4) {
+					if (!outWithInvert.top && !outWithInvert.bottom && canUseInvertY) return p;
+				}
+
+				if (out.top && (p === 0 || p === 1) && canUseInvertY) {
+					p = 3;
+				}
+
+				if (out.bottom && canUseInvertY) {
+					p = 1;
+				}
+			}
+
+			return p;
+		};
+
+		/**
+		 * Приоритет определения `p` по осям зависит от начального значения `p`
+		 *
+		 * Пытаемся сохранить выбранную ось: X или Y
+		 */
+		let axis: Array<'x' | 'y'> = ['x', 'y'];
+		if (p === 0 || p === 1 || p === 3) axis = ['y', 'x'];
+
+		let newP = p ?? 0;
+		axis.forEach((axisI) => {
+			newP = genP(axisI, newP);
+		});
+		p = newP;
+
+		if (out.bottom && (p === 2 || p === 4) && canUseInvertY) {
+			// меню справа может перемещаться вверх, только если есть место слева
+			this.elPopup.classList.add('invert-y');
+		}
+
+		if (out.right && (p === 0 || p === 1 || p === 3)) {
+			this.elPopup.classList.add('invert-x');
+		}
+
+		this.elPopup.classList.remove('p0', 'p1', 'p2', 'p3', 'p4');
+		this.elPopup.classList.add('p' + p);
+
+		if (this.elPopupInner instanceof HTMLElement) {
+			this.elPopupInner.style.maxWidth = '';
+			this.elPopupInner.style.maxHeight = '';
+		}
+
+		// if (this.elPopupBody instanceof HTMLElement) {
+		// 	// отобразить popup по вертикали с другой стороны, если с другой стороны больше места
+		// 	const hasScroll = this.elPopupBody.offsetHeight < this.elPopupBody.scrollHeight;
+		// 	vd(this.elPopupBody.scrollHeight);
+		// 	vd(this.elPopupBody.offsetHeight);
+		// 	if (hasScroll && pForce === undefined) {
+		// 		const contentBoundingClientRect = this.elPopupBody?.getBoundingClientRect();
+		// 		if (
+		// 			p === 1 && contentBoundingClientRect.top * 2 < contentBoundingClientRect.bottom ||
+		// 			p === 3 && contentBoundingClientRect.bottom * 2 < contentBoundingClientRect.top
+		// 		) {
+		// 			this.recalcPosition(p === 1 ? 3 : 1);
+		//
+		// 			return;
+		// 		}
+		// 	}
+		// }
+
+		Worker.scrollToActive(this.elPopup);
+	};
+
+	onTouchmove(e: TouchEvent): void {
+		if (e.currentTarget instanceof HTMLElement && e.target instanceof HTMLElement) {
+			// разрешить горизональный скролл
+			let hasScrollX = e.currentTarget.scrollWidth > e.currentTarget.offsetWidth;
+			if (hasScrollX) {
+				return;
+			}
+
+			if (e.target.parentElement?.scrollWidth && e.target.parentElement?.offsetWidth) {
+				// разрешить горизональный скролл
+				let hasScrollX2 = e.target.parentElement.scrollWidth > e.target.parentElement?.offsetWidth;
+				if (hasScrollX2) {
+					return;
+				}
+			}
+
+			if (!e.currentTarget.matches('.has_scroll')) {
+				e.preventDefault();
+			}
+		}
+	}
+
+	close(): void {
+		if (this.isClosed) {
+			return;
+		}
+
+		this.isClosed = true;
+
+		if (this.$ && Core.$ && this.elPopup) {
+			this.$.trigger('afterclose.top-menu-popup', [Core.$(this.elPopup)]);
+		}
+
+		if (Worker.noClose) {
+			return;
+		}
+
+		this.unmount();
+
+		this.elPopup?.classList.add('top-popup-wrapper-closed');
+
+		setTimeout(() => {
+			this.vueClose();
+
+			if (!this.elPopup) return;
+
+			if (this.options.useOriginal) {
+				this.elPopup.removeAttribute('style');
+				this.elPopup.classList.remove('top-popup-wrapper-shown', 'top-popup-wrapper-closed');
+				this.elPopup.classList.add('template');
+				this.elStartPosition?.append(this.elPopup);
+
+				this.elPopup.querySelector('div.top-popup_content.top-column')?.classList.remove('top-column');
+				this.elPopup.querySelector('.notch-border')?.remove();
+				this.elPopup.querySelector('.notch')?.remove();
+
+				this.elPopupInner?.replaceWith(...this.elPopupInner.childNodes);
+
+				DOM.storageClear(this.elPopup);
+			} else {
+				DOM.storageClear(this.elPopup);
+
+				this.elPopup.remove();
+				delete this.elPopup;
+			}
+
+			const elsPopups = Worker.getAllVisible();
+			const elPopupLast = elsPopups.length && elsPopups[elsPopups.length - 1];
+
+			if (elPopupLast) {
+				Worker.getPopup(elPopupLast).focus();
+			} else {
+				document.documentElement.classList.remove('with_popup');
+			}
+		}, this.options.transitionDuration);
+	}
+
+	async vueOpen(): Promise<void> {
+		await this.vueGetComponent()?.onOpen(this);
+	}
+
+	vueClose(): void {
+		this.vueGetComponent()?.onClose(this);
+	}
+
+	// получить vueConnectors компонента Popup
+	vueGetComponent() {
+		if (this.el instanceof HTMLElement && this.options.id) return Worker.vueConnectors.get(this.options.id);
+	}
+}
+
+GlobalEvents.init();