@topvisor/ui 1.0.42-dev.2 → 1.0.42-policy.0

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

@@ -1,858 +0,0 @@
-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();