@topvisor/ui 0.0.35 → 0.0.36

package/src/components/popup/lib/popup.js

@@ -1,702 +0,0 @@
-// добавляет jQuery события на this.el, если jQuery загружен:
-// aftershow.top-menu-popup
-// afterclose.top-menu-popup
-
-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?raw';
-import cssM from '@/components/popup/popup/style/popup.m.css?raw';
-import cssPC from '@/components/popup/popup/style/popup.pc.css?raw';
-
-Core.appendStyle(css);
-Core.appendStyle(cssM, 'm');
-Core.appendStyle(cssPC, 'pc');
-
-/**
- * @property {Element} el - элемент, вызвавший открытие Popup
- * @property {Element} elPopup - Popup .top-popup-wrapper
- * @property {Element} elPopupInner - контентная часть Popup  .top-popup
- * @property {Element} elPopupHeader
- * @property {Element} elPopupBody
- * @property {Element} elPopupFooter
- */
-class Popup extends Component {
-
-	static componentName = 'Popup';
-
-	el; // элемент, вызвавший открытие Popup
-	elActiveByDefault; // элемент уже имеет класс top-active перед открытием окна
-	elPopup;
-	elPopupInner;
-	elPopupHeader;
-	elPopupBody;
-	elPopupFooter;
-	elFront;
-
-	popupParent;
-
-	$; // только, если есть jQuery
-
-	elStartPosition; // используется для useOriginal
-	shift = {
-		top: 0,
-		left: 0,
-	};
-	isClosed = false; // флаг того, что меню закрыто
-	isFirstClick = true;
-	type; // selector или html
-
-	options = {
-		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, // использовать оригинальный шаблон, без клонирвоания (для сохранения состояния меню)
-
-		isFullScreen: false,
-		i18n: {},
-	};
-
-	events = {};
-
-	// el - элемент, открывающий меню
-	constructor(el, options) {
-		super();
-
-		return this.init(Popup.componentName, el, options);
-	}
-
-	async mount() {
-		const vueConnector = this.vueGetComponent();
-
-		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');
-
-		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(`${this.options.popup}.template`);
-		} 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(`${this.options.popup}.top-popup-wrapper-shown`);
-				}
-
-				if (this.elPopup) {
-					this.el.dataset.topPopupOpened = '';
-
-					if (!this.elActiveByDefault) {
-						this.el.classList.remove('top-active');
-					}
-
-					Worker.close(this.elPopup);
-
-					// повторит попытку открыть меню
-					setTimeout(() => this.mount(), 300);
-
-					return;
-				}
-
-				throw ('Option useOriginal state allowed only elements .template');
-			}
-
-			// возможно вместо шаблона используется другой элемент
-			this.elPopup = document.querySelector(`${this.options.popup}:not(.top-popup-wrapper)`);
-		}
-
-		if (!this.elPopup) {
-			return;
-		}
-
-		if (this.options.useOriginal) {
-			this.elStartPosition = this.elPopup.closest('.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);
-
-			// вывод в меню копии произвольного элемента
-			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 => 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;
-		}
-
-		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('.top-popup_header');
-		this.elPopupBody = this.elPopupInner.querySelector('.top-popup_content');
-		this.elPopupFooter = this.elPopupInner.querySelector('.top-popup_footer');
-
-		const existsWidgetSearch = !!this.elPopup.querySelector('[data-widget="search"]');
-
-		if (this.options.isFullScreen && !existsWidgetSearch) {
-			if (!this.elPopupHeader) {
-				this.elPopupHeader = DOM.genEl('i', { class: 'top-popup_header' });
-				this.elPopupInner.prepend(this.elPopupHeader);
-
-				this.elPopupHeader.prepend(DOM.genEl('i', { class: 'a closer' }, this.options.i18n.Close));
-				this.elPopupHeader.append(DOM.genEl('i', { class: 'top-popup_headerButton' }));
-			}
-		}
-
-		DOM.storage(this.elPopup, 'Popup', this);
-
-		if (this.options.frontSelector) {
-			this.elFront = document.querySelector(this.options.frontSelector);
-		}
-		if (!this.elFront) {
-			this.elFront = this.el.closest('.top-popup-front');
-		}
-		if (!this.elFront) {
-			this.elFront = document.body;
-		}
-
-		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);
-
-			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.$) {
-			this.$.trigger('aftershow.top-menu-popup', [jQuery(this.elPopup)]);
-		}
-
-		this.recalcPosition();
-
-		this.elPopup.setAttribute('tabindex', 0);
-		this.focus();
-
-		Worker.decoratorAfterOpen(this);
-
-		this.mountEvents();
-	}
-
-	async mountJQuery() {
-		if (typeof (jQuery) !== 'function') {
-			return;
-		}
-
-		this.$ = jQuery(this.el);
-	}
-
-	/**
-	 * Выполнить фокусировку на нужный элемент после открытия окна
-	 */
-	focus() {
-		let 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;
-		}
-
-		el.focus();
-	}
-
-	mountEvents() {
-		// закрытие при клике вне контекстного меню
-		this.addEventListenerWithUnmount(document, 'mousedown', (e) => this.onMousedown(e));
-
-		// закрыть другие меню
-		this.addEventListenerWithUnmount(this.elPopup, 'focus', (e) => this.onFocus(e));
-
-		// автоматическое закрытие при отведении мыши
-		if (this.options.openByHover) {
-			this.addEventListenerWithUnmount(this.elPopup, 'mouseleave', (e) => this.onMouseleave(e));
-			this.addEventListenerWithUnmount(this.elPopupInner, 'mouseleave', (e) => this.onMouseleave(e));
-		}
-
-		// не скроллить страницу
-		if (this.options.isFullScreen) {
-			this.addEventListenerWithUnmount(this.elPopupBody, 'touchmove', (e) => this.onTouchmove(e));
-		}
-	}
-
-	/**
-	 * Обработка клика вне окна
-	 * @param {Event} e
-	 */
-	onMousedown(e) {
-		// // не оригинальное событие
-		// if (!e || !e.originalEvent || !e.originalEvent.isTrusted) {
-		// 	return;
-		// }
-
-		// Popup уже закрыт
-		if (!this.elPopup) {
-			return;
-		}
-
-		// клик на внешнем элементе
-		if (!this.isFirstClick) {
-			return;
-		}
-
-		this.isFirstClick = false;
-		setTimeout(() => this.isFirstClick = true);
-
-		// клик не основной кнопкой мыши
-		if (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, сначала должно быть закрыто оно
-		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 при фокусе на элемент формы в текущем
-	 * @param {Event} e
-	 */
-	onFocus(e) {
-		if (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 при отведении мыши
-	 * @param {Event} _e
-	 */
-	onMouseleave(_e) {
-		setTimeout(() => {
-			if (this.elPopupInner.matches(':hover')) {
-				return;
-			}
-
-			Worker.close(this.elPopup);
-		}, 100);
-	}
-
-	/**
-	 * Контроль положения Popup при fixed позиционировании
-	 */
-	onResize() {
-		// на android при вызове метода append сбрасывается фокус с input внутри this.elPopup
-		if (this.elPopup.parentElement !== document.body) {
-			document.body.append(this.elPopup);
-		}
-
-		this.elPopup.style.top = DOM.offset(this.el).top + 'px';
-		this.elPopup.style.left = DOM.offset(this.el).left + 'px';
-	}
-
-	unmount() {
-		super.unmount();
-
-		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() {
-		let p = this.options.p;
-		let leftPos;
-
-		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':
-				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');
-
-		this.elPopupInner.style.maxWidth = 'unset';
-		this.elPopupInner.style.maxHeight = 'unset';
-
-		let outTop = false;
-		let outRight = false;
-		let outBottom = false;
-		let outLeft = false;
-
-		// имеет ли смысл прикреплять окно к другой стороне кнопки
-		let usefulInvertX = boundingClientRect.left > window.innerWidth / 2;
-		let usefulInvertY = boundingClientRect.top > window.innerHeight / 2;
-
-		if (p === 4) {
-			usefulInvertX = !usefulInvertX;
-		}
-
-		if (p === 1) {
-			usefulInvertY = !usefulInvertY;
-		}
-
-		const contentBoundingClientRect = this.elPopupInner.getBoundingClientRect();
-		const contentRight = window.innerWidth - contentBoundingClientRect.right;
-		const contentBottom = window.innerHeight - contentBoundingClientRect.bottom;
-
-		const margin = 8;
-
-		if (contentBoundingClientRect.top < margin) {
-			outTop = true;
-		}
-
-		if (contentRight < margin) {
-			outRight = true;
-		}
-
-		if (contentBottom < margin) {
-			outBottom = true;
-		}
-
-		if (contentBoundingClientRect.left < margin) {
-			outLeft = true;
-		}
-
-		if (outTop && (p === 0 || p === 1) && usefulInvertY) {
-			p = 3;
-		}
-
-		if (outBottom && p === 3 && usefulInvertY) {
-			p = 1;
-		}
-
-		if (outRight && p === 2 && usefulInvertX) {
-			p = 4;
-		}
-
-		if (outLeft && p === 4 && usefulInvertX) {
-			p = 2;
-		}
-
-		if (outRight && (p === 0 || p === 1 || p === 3)) {
-			this.elPopup.classList.add('invert-x');
-		}
-
-		if (outBottom && (p === 2 || p === 4) && usefulInvertY) {
-			// меню справа может перемещаться вверх, толкьо если есть место слева
-			if (p === 2 && !usefulInvertX) {
-				this.elPopup.classList.add('invert-y');
-			}
-
-			// меню слева перемещаясь вверх, должно открываться влево
-			if (p === 4 && !usefulInvertX) {
-				this.elPopup.classList.add('invert-x');
-			}
-
-			if (!this.elPopup.matches('.invert-y')) {
-				p = 1;
-			}
-		}
-
-		this.elPopup.classList.remove('p0', 'p1', 'p2', 'p3', 'p4');
-		this.elPopup.classList.add('p' + p);
-
-		this.elPopupInner.style.maxWidth = '';
-		this.elPopupInner.style.maxHeight = '';
-
-		Worker.scrollToActive(this.elPopup);
-	};
-
-	onTouchmove(e) {
-		// разрешить горизональный скролл
-		let hasScrollX = e.currentTarget.scrollWidth > e.currentTarget.offsetWidth;
-		if (hasScrollX) {
-			return;
-		}
-
-		// разрешить горизональный скролл
-		let hasScrollX2 = e.target.parentElement.scrollWidth > e.target.parentElement.offsetWidth;
-		if (hasScrollX2) {
-			return;
-		}
-
-		if (!e.currentTarget.matches('.has_scroll')) {
-			e.preventDefault();
-		}
-	}
-
-	close() {
-		if (this.isClosed) {
-			return;
-		}
-
-		this.isClosed = true;
-
-		if (this.$) {
-			this.$.trigger('afterclose.top-menu-popup', [jQuery(this.elPopup)]);
-		}
-
-		if (Worker.noClose) {
-			return;
-		}
-
-		this.unmount();
-
-		this.elPopup.classList.add('top-popup-wrapper-closed');
-
-		setTimeout(() => {
-			this.vueClose();
-
-			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');
-			}
-		}, 300);
-	}
-
-	async vueOpen() {
-		await this.vueGetComponent()?.onOpen(this);
-	}
-
-	vueClose() {
-		this.vueGetComponent()?.onClose(this);
-	}
-
-	// получить vueConnectors компонента Popup
-	vueGetComponent() {
-		return Worker.vueConnectors.get(this.el.dataset.topPopupId);
-	}
-}
-
-GlobalEvents.init();
-
-export default Popup;