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

package/src/components/dialog/lib/utils.ts

@@ -0,0 +1,656 @@
+import 'jquery';
+import { nextTick } from 'vue';
+
+import Core from '@/core/core/core';
+import { TopPopupWorker } from '@/components/popup/worker';
+import { sleep, waitWhile } from '@/core/utils/system';
+import { setHashs } from '@/core/utils/route';
+import { connectScrollShadow } from '@/core/utils/scroll';
+
+import type { ElTopDialogBody, ElTopDialog, ElTopDialogModalLayer, ElTopDialogPage, MoveDirection, ElTopDialogWrapper } from './types';
+import { TopDialogWorker } from './worker';
+import { initDialogGlobalEvents } from './utils.globalEvents';
+import { getDialogWorker } from '../dialog/dialogs/dialogs.vue';
+
+import css from '../dialog/style/dialog.css?inline';
+import cssM from '../dialog/style/dialog.m.css?inline';
+import cssPC from '../dialog/style/dialog.pc.css?inline';
+import cssModern from '../dialog/style/modern/dialog.css?inline';
+import cssModernPC from '../dialog/style/modern/dialog.pc.css?inline';
+import { isVisible, querySelectorAllArray } from '@/core/utils/dom';
+
+Core.insertStyleToPage(css);
+Core.insertStyleToPage(cssM, 'm');
+Core.insertStyleToPage(cssPC, 'pc');
+Core.insertStyleToPage(cssModern);
+Core.insertStyleToPage(cssModernPC, 'pc');
+
+let timerClearAnimation: NodeJS.Timeout;
+let isInited = false;
+
+/**
+ * Является ли элемент JQuery<HTMLElement>
+ */
+const isElJQuery = (el: JQuery<HTMLElement> | HTMLElement | HTMLElement[]) => {
+	return !!el && typeof el === 'object' && 'jquery' in el;
+};
+
+const init = () => {
+	$.extend($.ui.dialog.prototype.options, {
+		focus: (e: any) => {
+			e.target.focus();
+
+			$('[autofocus]', e.target)[0]?.focus();
+
+			// setTimeout(function () {
+			// 	if ($('[autofocus]', e.target).length) return;
+			// 	$('.modal-footer button:first, .modal-body :input:first', e.target).eq(0).focus();
+			//
+			// 	// fix пропадающего autocomplete при нажатии на scroll в autocomplete
+			// 	$(e.target).add($(e.target).closest('.ui-dialog')).removeAttr('tabindex');
+			// });
+		},
+		create: (e: any) => onCreate(e.target),
+		open: (e: any) => onOpen(e.target),
+		close: (e: any) => onClose(e.target),
+		modal: true,
+		resizable: false,
+		closeOnEscape: false,
+		width: 'auto',
+		minHeight: 0,
+	});
+
+	$.ui.dialog.prototype._focusTabbable = $.noop;
+
+	$.ui.dialog.prototype._moveToTopOriginal = $.ui.dialog.prototype._moveToTop;
+	$.ui.dialog.prototype._moveToTop = function () {
+		this._moveToTopOriginal();
+
+		const $dialog = $(this.element);
+		$dialog.trigger('dialogsMoveToTop', [$dialog]);
+	};
+
+	initDialogGlobalEvents();
+
+	isInited = true;
+};
+
+/**
+ * Получить настройки диалогового окна из Vue компонента
+ */
+const genVueOptions = (elDialog: ElTopDialog) => {
+	const options: {
+		modal?: boolean,
+		position?: any,
+	} = {};
+
+	if (elDialog.dataset?.modal === 'false') options.modal = false;
+	if (elDialog.dataset?.position) options.position = JSON.parse(elDialog.dataset.position);
+
+	return options;
+};
+
+const getElDialogById = (id: string) => {
+	return <ElTopDialog | null>document.getElementById(id);
+};
+
+/**
+ * Сменить состояние диалогового окна Vue
+ */
+const updatePageVue = async (dialogId: string, pageName?: string, pageNameNext?: string) => {
+	if (!dialogId.startsWith('dialog_')) return;
+
+	const dialog = getDialogWorker(dialogId);
+	if (!dialog) return;
+
+	dialog.isOpened.value = true;
+	if (pageName !== undefined) dialog.pageActive.value = pageName;
+	if (pageNameNext !== undefined) dialog.pageActiveNext.value = pageNameNext;
+
+	await nextTick();
+
+	if (pageNameNext) {
+		const elDialog = getElDialogById(dialogId);
+		if (!elDialog) return;
+
+		const elNextpages = elDialog.querySelectorAll(`[data-view-page="${pageNameNext}"]`);
+
+		if (!elNextpages.length) {
+			await waitWhile(() => !elDialog.querySelectorAll(`[data-view-page="${pageNameNext}"]`).length);
+		}
+	}
+};
+
+/**
+ * Callback for jQuery dialog onCreate
+ */
+const onCreate = (elDialog: ElTopDialog) => {
+	const elDialogBody = elDialog.querySelector<ElTopDialogBody>('.modal-body');
+	if (!elDialogBody) return;
+
+	connectScrollShadow(elDialogBody);
+
+	TopDialogWorker.state.decoratorOnCreate?.(elDialog);
+
+	initPopup(elDialog);
+};
+
+/**
+ * Инициирование событий TopPopup в диалоговом окне
+ */
+const initPopup = (elDialog: HTMLElement) => {
+	$(elDialog).on('aftershow.top-menu-popup', '[data-top-popup]', (_e, $popup) => {
+		// перенести popup в корневой элемент страницы диалогового окна
+		const elPopup = $popup[0];
+
+		// перенести popup в корневой элемент страницы диалогового окна
+		const elPageContents = TopDialogWorker.getPairPage(elPopup);
+		elPageContents?.[1]?.prepend(elPopup);
+	});
+};
+
+/**
+ * Callback for jQuery dialog onOpen
+ */
+const onOpen = async (elDialog: ElTopDialog) => {
+	const pageName = elDialog.dataset.viewPageActive;
+
+	const w1 = window.innerWidth;
+
+	Core.state.documentClassModificators.set('top-dialog', 'with_dialog');
+
+	const w2 = window.innerWidth;
+
+	const scrollBarWidth = w2 - w1;
+	if (document.documentElement.scrollHeight > window.innerHeight) document.querySelector('html')!.style.marginRight = scrollBarWidth + 'px';
+
+	recalcPositions();
+
+	const dialog = getDialogWorker(elDialog.getAttribute('id')!);
+	dialog?.emit?.('open', pageName);
+};
+
+/**
+ * Callback for jQuery dialog onClose
+ */
+const onClose = async (elDialog: ElTopDialog) => {
+	const viewName = elDialog.getAttribute('id');
+	const pageName = elDialog.dataset.viewPageActive;
+
+	if (pageName) {
+		const hashData = {
+			vpn: TopDialogWorker.state.viewPageN as number | null,
+			['view-' + viewName]: null,
+		};
+		hashData['view-' + viewName] = null;
+
+		if (TopDialogWorker.state.viewPageN === 0 || TopDialogWorker.state.viewPageN === 1) {
+			hashData.vpn = null;
+		}
+
+		setHashs(hashData, false);
+	}
+
+	const elUiWidgetOverlayVisibles = querySelectorAllArray(document, '.ui-widget-overlay').filter((el) => {
+		return isVisible(el);
+	});
+
+	if (!elUiWidgetOverlayVisibles.length) {
+		Core.state.documentClassModificators.delete('top-dialog');
+
+		document.querySelector('html')!.style.marginRight = '';
+	}
+
+	$(elDialog).trigger('viewAfterClose', [$(elDialog)]);
+
+	const dialog = getDialogWorker(viewName);
+
+	if (dialog) {
+		dialog.isOpened.value = false;
+		dialog.emit?.('close', pageName);
+
+		if (dialog.onCloseOnce) {
+			dialog.onCloseOnce(dialog.props, pageName);
+			dialog.onCloseOnce = undefined;
+		}
+	}
+
+	// после закрытия диалога может потребоваться пересчет позиций элементов
+	window.dispatchEvent(new Event('resize'));
+};
+
+/**
+ * Пересчитать положения и размеры открытых диалоговых окон
+ */
+const recalcPositions = () => {
+	const elDialogVisibilityes = querySelectorAllArray(document, '.ui-dialog').filter((el) => {
+		return isVisible(el) && el.querySelector<ElTopDialog>(':scope > .ui-dialog-content');
+	}).map((el) => {
+		return el.querySelector<ElTopDialog>(':scope > .ui-dialog-content')!;
+	});
+
+	elDialogVisibilityes.forEach((elDialog) => {
+		const elDialogBody = elDialog.querySelector<ElTopDialogBody>('.modal-body');
+		if (!elDialogBody) return;
+
+		const elDialogWrapper = elDialog.closest('.ui-dialog');
+
+		const options = genVueOptions(elDialog);
+
+		options.position ??= { of: window };
+
+		const $dialog = $(elDialog);
+		$dialog.dialog('option', options);
+
+		elDialogWrapper.classList.remove('me-tightly');
+		if ((elDialogWrapper.clientHeight ?? 0) > window.innerHeight) elDialogWrapper.classList.add('me-tightly');
+	});
+};
+
+/**
+ * Переход к view page по неразобранной ссылке в формате: {viewName}-{pageName}[:args]
+ */
+const toViewDirty = async (toViewPageName: string, moveDirection?: MoveDirection) => {
+	const regexp = /(\w+)[=-]([\w-]+)(?::([\w.:-]+))?/g;
+	const toViewParts = regexp.exec(toViewPageName);
+	if (toViewParts) {
+		const viewName = toViewParts[1];
+		const pageName = toViewParts[2];
+		const argsString = toViewParts[3];
+
+		let args: string[] = [];
+		if (argsString) args = argsString.split(':');
+
+		await toView(viewName, pageName, args, moveDirection);
+	}
+};
+
+/**
+ * Открыть диалоговое окно, возможно указать нужную страницу
+ * @param viewNameOrElDialog - id страницы окна или элемент окна
+ * @param pageName - имя страницы
+ * @param args - аргументы, набор проивзольных параметров, которые могут обрабатываться каждым окном по своему
+ * @param moveDirection
+ * @param callback - функция, которая будет запущена после октытия страницы
+ */
+const toView = async (
+	viewNameOrElDialog: ElTopDialog | JQuery<ElTopDialog> | string,
+	pageName?: string,
+	args?: string[],
+	moveDirection?: MoveDirection,
+	callback?: Function,
+) => {
+	if (!isInited) {
+		await new Promise<void>((resolve, _reject) => {
+			const timer = setInterval(() => {
+				if (!isInited) return;
+
+				clearInterval(timer);
+
+				resolve();
+			}, 10000);
+		});
+	}
+
+	await nextTick();
+
+	let elDialog: ElTopDialog | null;
+	if (typeof (viewNameOrElDialog) === 'object') {
+		if (isElJQuery(viewNameOrElDialog)) viewNameOrElDialog = viewNameOrElDialog?.[0]; // todo: убрать после переписки jquery на сайте
+
+		elDialog = viewNameOrElDialog;
+	} else {
+		elDialog = getElDialogById(viewNameOrElDialog);
+	}
+
+	// Диалоговое окно еще не загружено
+	if (!elDialog && typeof (viewNameOrElDialog) == 'string' && TopDialogWorker.state.load) {
+		await TopDialogWorker.state.load(viewNameOrElDialog);
+
+		await toView(viewNameOrElDialog, pageName, args, moveDirection, callback);
+
+		return;
+	}
+
+	if (!elDialog) return;
+
+	await toViewPage(elDialog, pageName, args, moveDirection);
+
+	const $dialog = $(elDialog);
+
+	if (elDialog?.classList.contains('ui-dialog-content')) {
+		// var zIndexMax = 0;
+		// $.map($('.ui-dialog'), function (el) {
+		// 	var zIndex = $(el).css('z-index') * 1;
+		// 	if (zIndex > zIndexMax) zIndexMax = zIndex;
+		// });
+		//
+		// if ($dialog.is(':hidden')) $dialog.dialog('open');
+		//
+		// var $dialogWrapper = $dialog.parent();
+		// var $dialogOverlay = $dialogWrapper.next();
+		//
+		// if ($dialogWrapper.css('z-index') * 1 < zIndexMax) {
+		// 	$dialogWrapper.css('z-index', zIndexMax + 2);
+		// 	$dialogOverlay.css('z-index', zIndexMax + 1);
+		// }
+
+		$dialog.dialog('open');
+	} else {
+		const options = genVueOptions(elDialog);
+
+		$dialog.dialog(options);
+	}
+
+	if (callback) callback($dialog);
+};
+
+const toViewPage = async (elDialog: ElTopDialog | JQuery<ElTopDialog>, pageName?: string, args?: string[], moveDirection?: MoveDirection) => {
+	if (isElJQuery(elDialog)) elDialog = elDialog?.[0]; // todo: убрать после переписки jquery на сайте
+
+	if (pageName === undefined) pageName = elDialog.dataset.viewPageActive;
+
+	if (pageName !== elDialog.dataset.viewPageActive) {
+		const stopped = stopAnimations(elDialog);
+		if (stopped) await sleep(100);
+	}
+
+	if (args === undefined) args = [];
+
+	await updatePageVue(elDialog.getAttribute('id') as string, undefined, pageName);
+
+	const elModalLayers = querySelectorAllArray<ElTopDialogModalLayer>(elDialog, '.modal-layer');
+	const elCurrentPages = elModalLayers.reduce<ElTopDialogPage[]>((acc, elModalLayer) => {
+		const elCurrentPage = elModalLayer.querySelector<ElTopDialogPage>(':scope > .active');
+		if (elCurrentPage) {
+			acc.push(elCurrentPage);
+		}
+
+		return acc;
+	}, []);
+
+	const elNextPages = elModalLayers.reduce<ElTopDialogPage[]>((acc, elModalLayer) => {
+		const elNextPage = elModalLayer.querySelector<ElTopDialogPage>(`:scope > [data-view-page="${pageName}"]`);
+		if (elNextPage) {
+			acc.push(elNextPage);
+		}
+
+		return acc;
+	}, []);
+
+	const argsString = args.join(':');
+
+	if (moveDirection === undefined) {
+		moveDirection = 'next';
+		if ((elNextPages[0]?.dataset.order ?? 0) < (elCurrentPages[0]?.dataset.order ?? 0)) moveDirection = 'prev';
+	}
+
+	if (!elNextPages.length) return;
+
+	elDialog.dataset.viewPageActive = pageName;
+
+	// запрашиваемая страница уже открыта
+	if (elNextPages[0].classList.contains('active')) {
+		if (elNextPages[0].dataset.viewPageArgs !== argsString) {
+			elNextPages.forEach((elNextPage) => {
+				elNextPage.dataset.viewPageArgs = argsString;
+			});
+
+			// dialogs.beforeOpenViewPage($dialog, $nextPage, pageName, args);
+			// dialogs.afterOpenViewPage($dialog, $nextPage, pageName, args);
+		}
+
+		beforeOpenViewPage(elDialog, elNextPages, pageName, args);
+		afterOpenViewPage(elDialog, elNextPages, pageName, args);
+
+		return;
+	}
+
+	elNextPages.forEach((elNextPage) => {
+		elNextPage.dataset.viewPageArgs = argsString;
+	});
+
+	elCurrentPages.forEach((elCurrentPage) => {
+		if (elCurrentPage.querySelector('.top-popup-wrapper')) {
+			TopPopupWorker.close(elCurrentPage.querySelector('.top-popup-wrapper')!);
+		}
+	});
+
+	const elDialogWrapper = elNextPages[0].closest<ElTopDialogWrapper>('.ui-dialog');
+
+	if (elDialogWrapper && !isVisible(elDialogWrapper)) moveDirection = 'none';
+	if (!elCurrentPages.length) moveDirection = 'none';
+	if (isVisible(elNextPages[0])) moveDirection = 'none';
+
+	switch (moveDirection) {
+		case 'prev': {
+			elNextPages.forEach((elNextPage) => {
+				const elActive = elNextPage.parentNode?.querySelector(':scope > .active');
+				if (elActive) elNextPage.parentNode?.insertBefore(elNextPage, elActive);
+			});
+
+			elCurrentPages.forEach((elCurrentPage) => {
+				elCurrentPage.classList.add('right-to-center', 'reverse');
+			});
+
+			elNextPages.forEach((elNextPage) => {
+				elNextPage.classList.add('center-to-left', 'reverse');
+			});
+
+			break;
+		}
+		case 'next': {
+			elNextPages.forEach((elNextPage) => {
+				const elActive = elNextPage.parentNode?.querySelector(':scope > .active');
+				if (elActive) elNextPage.parentNode?.insertBefore(elNextPage, elActive.nextSibling);
+			});
+
+			elCurrentPages.forEach((elCurrentPage) => {
+				elCurrentPage?.classList.add('center-to-left');
+			});
+
+			elNextPages.forEach((elNextPage) => {
+				elNextPage.classList.add('right-to-center');
+			});
+
+			break;
+		}
+	}
+
+	elDialog.setAttribute('view-page-active', pageName);
+
+	elCurrentPages.forEach((elCurrentPage) => {
+		elCurrentPage.classList.remove('active');
+	});
+
+	elNextPages.forEach((elNextPage) => {
+		elNextPage.classList.add('active');
+	});
+
+	beforeOpenViewPage(elDialog, elNextPages, pageName, args);
+
+	if (moveDirection) {
+		elDialog.classList.add('i-change-page');
+
+		const delay = Number(window.getComputedStyle(elNextPages[0]).animationDuration.replace('s', '')) * 1000;
+
+		timerClearAnimation = setTimeout(function () {
+			updatePageVue(elDialog.getAttribute('id'), pageName, '');
+			stopAnimations(elDialog);
+			afterOpenViewPage(elDialog, elNextPages, pageName, args);
+		}, delay);
+	} else {
+		await updatePageVue(elDialog.getAttribute('id'), pageName, '');
+		afterOpenViewPage(elDialog, elNextPages, pageName, args);
+	}
+};
+
+/**
+ * К предыдущему представлению
+ */
+const toPrevPage = (elDialog: ElTopDialog) => {
+	const elModalLayers = querySelectorAllArray<ElTopDialogModalLayer>(elDialog, '.modal-layer');
+	const elCurrentPages = elModalLayers.reduce<ElTopDialogPage[]>((acc, elModalLayer) => {
+		const elCurrentPage = elModalLayer.querySelector<ElTopDialogPage>(':scope > .active');
+
+		if (elCurrentPage) {
+			acc.push(elCurrentPage);
+		}
+
+		return acc;
+	}, []);
+
+	const elPrevPages = elCurrentPages.reduce<ElTopDialogPage[]>((acc, elCurrentPage) => {
+		let elPrevPage = elCurrentPage.previousElementSibling as ElTopDialogPage | null;
+		while (elPrevPage && !elPrevPage.hasAttribute('[data-view-page]')) {
+			elPrevPage = elPrevPage.previousElementSibling as ElTopDialogPage | null;
+		}
+
+		if (elPrevPage) acc.push(elPrevPage);
+
+		return acc;
+	}, []);
+
+	const prevPageName = (elPrevPages[0])?.dataset.viewPage;
+
+	if (prevPageName) {
+		void toViewPage(elDialog, prevPageName, undefined, 'prev');
+	} else {
+		const $dialog = $(elDialog);
+		$dialog.dialog('close');
+	}
+};
+
+/**
+ * Для обработки событий вне vue
+ */
+const beforeOpenViewPageTimers = new Set();
+const beforeOpenViewPage = (elDialog: ElTopDialog, elPages: ElTopDialogPage[], pageName: string, args: string[]) => {
+	// группировка цепочки событий
+	// запрос на открытие страницы может выполняться несколько раз, чаще такое может быть при открытии, загрузке и переходе сразу к нужной странице
+	const eventKey = elDialog.getAttribute('id') + elPages[0].dataset.viewPage + pageName + args.join();
+
+	if (beforeOpenViewPageTimers.has(eventKey)) return;
+	beforeOpenViewPageTimers.add(eventKey);
+
+	setTimeout(function () {
+		beforeOpenViewPageTimers.delete(eventKey);
+
+		$(elDialog).trigger('viewBeforeOpen', [$(elDialog), $(elPages), pageName, args]);
+	});
+};
+
+/**
+ * Для обработки событий вне vue
+ */
+const afterOpenViewPage = (elDialog: ElTopDialog, elPages: ElTopDialogPage[], pageName: string, args: string[]) => {
+	setTimeout(function () {
+		$(elDialog).trigger('viewAfterOpen', [$(elDialog), $(elPages), pageName, args]);
+	});
+};
+
+/**
+ * Получить состояние: Диалоговое окно находится в состоянии смены страницы
+ */
+const inAnimation = (elDialog: ElTopDialog | JQuery<ElTopDialog>) => {
+	if (isElJQuery(elDialog)) elDialog = elDialog?.[0]; // todo: убрать после переписки jquery на сайте
+
+	return elDialog.classList.contains('i-change-page');
+};
+
+/**
+ * Остановить анимацию смены страницы
+ *
+ * @returns Вернет true, если анимация производилась и была остановлена
+ */
+const stopAnimations = (elDialog: ElTopDialog) => {
+	if (!inAnimation(elDialog)) return false;
+
+	clearTimeout(timerClearAnimation);
+
+	const elModalLayers = querySelectorAllArray(elDialog, '.modal-layer');
+
+	const pageName = elDialog.dataset.viewPageActive;
+	elDialog.classList.remove('i-change-page');
+
+	elModalLayers.forEach((elModalLayer) => {
+		elModalLayer.querySelectorAll(':scope > [data-view-page]').forEach((el) => {
+			el.classList.remove('center-to-left', 'right-to-center', 'reverse', 'active');
+		});
+	});
+
+	elModalLayers.forEach((elModalLayer) => {
+		elModalLayer.querySelector(`:scope > [data-view-page="${pageName}"]`)?.classList.add('active');
+	});
+
+	return true;
+};
+
+/**
+ * Закрыть диалоговое окно
+ */
+const close = function (dialogId: string) {
+	const elDialog = getElDialogById(dialogId);
+	if (!elDialog) return;
+
+	const $dialog = $(elDialog);
+
+	if (!$dialog.dialog('instance')) return;
+
+	$dialog.dialog('close');
+};
+
+/**
+ * Управление props.isLoading
+ */
+const setLoading = (elPages: ElTopDialogPage[] | JQuery<ElTopDialogPage>, isLoading: boolean, duration?: number) => {
+	if (isElJQuery(elPages)) elPages = elPages.toArray(); // todo: убрать после переписки jquery на сайте
+
+	const elPagesVisibleds = elPages.reduce<ElTopDialogPage[]>((acc, elPage) => {
+		if (elPage.hasAttribute('[data-view-page]') && isVisible(elPage)) acc.push(elPage);
+
+		return acc;
+	}, []);
+
+	if (isLoading) {
+		if (duration !== undefined) {
+			elPagesVisibleds.forEach((elPagesVisibled) => {
+				elPagesVisibled.style.setProperty('--dialog-loading-duration', duration + 's');
+			});
+		}
+
+		elPagesVisibleds.forEach((elPagesVisibled) => {
+			elPagesVisibled.classList.add('i-load-data');
+		});
+	} else {
+		elPagesVisibleds.forEach((elPagesVisibled) => {
+			elPagesVisibled.classList.remove('i-load-data');
+		});
+
+		elPagesVisibleds.forEach((elPagesVisibled) => {
+			elPagesVisibled.style.setProperty('--dialog-loading-duration', '10s');
+		});
+	}
+};
+
+const isLoading = (elPage: ElTopDialogPage | JQuery<ElTopDialogPage>) => {
+	if (isElJQuery(elPage)) elPage = elPage?.[0]; // todo: убрать после переписки jquery на сайте
+
+	return elPage.classList.contains('i-load-data');
+};
+
+export const TopDialogUtils = {
+	getElDialogById,
+	updatePageVue,
+	recalcPositions,
+	toViewDirty,
+	toView,
+	toViewPage,
+	toPrevPage,
+	setLoading,
+	isLoading,
+	inAnimation,
+	close,
+};
+
+init();