@topvisor/ui 0.0.34 → 0.0.35

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

@@ -0,0 +1,702 @@
+// добавляет 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;