@topvisor/ui 1.0.42-dev.2 → 1.0.42-dev.4

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

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