@topvisor/ui 1.2.0 → 1.3.1-dev.2

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

@@ -1,175 +0,0 @@
-import { TopDialogUtils } from './utils';
-import { TopDialogWorker } from './worker';
-import { querySelectorVisible } from '@/core/utils/dom';
-import type { $el } from '@/components/types';
-
-let inited = false;
-
-/**
- * Инициализация глобальных событий для диалоговых окон
- *
- * Проивзодится один раз при подклчюении диалогового окна
- *
- * События не размонитруются
- */
-export const initDialogGlobalEvents = () => {
-	if (inited) return;
-	inited = true;
-
-	/**
-	 * Закрытие диалога по Esc
-	 */
-	document.addEventListener('keydown', (e) => {
-		if (e.key !== 'Escape') return;
-		if (!e.target) return;
-
-		const el = e.target as HTMLElement;
-
-		// событие произошло вне диалогового окна
-		if (!el.closest('.ui-dialog')) return;
-
-		if (el.contentEditable === 'true' || el.contentEditable === 'plaintext-only') return;
-
-		// не закрывать окно при открытом TopPopup
-		if (querySelectorVisible(document.documentElement, '.top-popup-wrapper')) return;
-
-		// не закрывать окно при работе с jquery autocomplete
-		if (el.classList.contains('autocomplete')) return;
-
-		// не закрывать окно при открытом fancybox
-		if (querySelectorVisible(document.documentElement, '.fancybox-container')) return;
-
-		$('.ui-dialog-content:visible:last').dialog('close');
-	});
-
-	/**
-	 * Закрытие диалога по кнопке закрыть
-	 */
-	$(document).on('click', '[data-action="top-dialog-close"]', (e) => {
-		e.preventDefault();
-
-		// // навигация без истории
-		// var $dialog = $(this).closest('.ui-dialog-content');
-		// var viewName = $dialog.attr('id');
-		// var pageName = getHash('view-' + viewName);
-		// if (!pageName) {
-		// 	toPrevPage($dialog);
-		//
-		// 	return;
-		// }
-		//
-		// // навигация по истории
-		// if (Core.state.isMobile && history.length > 1 && $(this).closest('.modal-layer').length) {
-		// 	var href = location.href;
-		//
-		// 	history.go(-1);
-		//
-		// 	setTimeout(() => {
-		// 		// это первая страница в истории вкладки браузера
-		// 		if (href === location.href) $(e.target).closest('.ui-dialog-content').dialog('close');
-		// 	});
-		// } else {
-		// 	$(this).closest('.ui-dialog-content').dialog('close');
-		// }
-
-		const el = e.target.closest('[data-action="top-dialog-close"]');
-
-		const elDialog = el.closest('.ui-dialog-content');
-		if (!elDialog) return;
-
-		const $dialog = $(elDialog);
-
-		// если к кнопке привязана ссылка, диалоговое окно не нужно закрывать
-		const toView = el.dataset.toView;
-
-		if (toView == 'toPrevPage()') {
-			TopDialogUtils.toPrevPage($dialog);
-
-			return;
-		}
-
-		if (toView) {
-			var viewNameAndPageLink = toView.split('-');
-			var viewName = viewNameAndPageLink.shift();
-			var pageLink = viewNameAndPageLink.join('-');
-
-			var $toDialog = $('#' + viewName);
-			var $toPage = $('[data-view-page="' + pageLink + '"]', $toDialog);
-			if (!$toPage.is(':visible')) {
-				const hash = TopDialogWorker.genViewPageHash(toView, 'prev');
-
-				// добавляет текущую страницу в историю браузера
-				location.hash = hash;
-
-				// // не убирает кнопку "Вперед" в браузере
-				// history.replaceState(null, '', hash);
-				// toViewDirty(toView, 'prev');
-
-				return;
-			}
-		}
-
-		$dialog.dialog('close');
-	});
-
-	/**
-	 * Все submit должны обрабатываться через js
-	 */
-	$(document).on('submit', '.modal-body > form, .modal-layer-body > form', function (e) {
-		e.preventDefault();
-	});
-
-	/**
-	 * Выполнение действия по нажатию Enter
-	 *
-	 * @todo Убрать `.searcher`
-	 */
-	$(document).on('keypress', '.ui-dialog .modal-body :input:not(.searcher), .ui-dialog .modal-body [contenteditable]', function (e) {
-		// if (e.keyCode !== 10 && e.key !== 'ENTER') return;
-		if (e.key !== 'ENTER') return;
-
-		// не выполнять submit действий при работе с jquery autocomplete
-		if (e.target.classList.contains('autocomplete')) {
-			e.preventDefault();
-
-			return;
-		}
-
-		// реализация submit по ctrl + Enter
-		if (e.target.tagName === 'TEXTAREA') {
-			if (!e.ctrlKey && !e.metaKey) return;
-
-			const elForm = e.target.closest('form');
-
-			if (elForm) {
-				let elSubmit = $(':submit:visible', elForm)[0];
-				if (!elSubmit) elSubmit = $(':submit:visible', elForm)[0];
-
-				elSubmit?.click();
-			}
-		}
-	});
-
-	/**
-	 * Закрытие диалога по клику вне окна
-	 */
-	$(document).on('click', '.ui-widget-overlay', function () {
-		let $dialogWrapper: $el | undefined = undefined;
-		let topZIndex = 0;
-
-		$('.ui-dialog:visible').each((_index, el) => {
-			const zIndex = Number($(el).css('z-index'));
-			if (zIndex < topZIndex) return;
-
-			$dialogWrapper = $(el);
-			topZIndex = zIndex;
-		});
-
-		if ($dialogWrapper) {
-			$('.ui-dialog-content', $dialogWrapper).dialog('close');
-		}
-	});
-
-	$(window).on('resize', TopDialogUtils.recalcPositions);
-	TopDialogUtils.recalcPositions();
-};

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

@@ -1,525 +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 { setHash } from '@/core/utils/route';
-import { connectScrollShadow } from '@/core/utils/scroll';
-
-import type { MoveDirection } 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 type { $el } from '@/components/types';
-
-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;
-
-const init = () => {
-	// if(window.history && history.length == 1) setHash('vpn', null);
-
-	$.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 = ($dialog: $el) => {
-	const options: {
-		modal?: boolean,
-		position?: any,
-	} = {};
-
-	if ($dialog[0]?.dataset?.modal === 'false') options.modal = false;
-	if ($dialog[0]?.dataset?.position) options.position = JSON.parse($dialog[0].dataset.position);
-
-	return options;
-};
-
-/**
- * Сменить состояние диалогового окна 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 $dialog = $('#' + dialogId);
-		const $nextPage = $('[data-view-page="' + pageNameNext + '"]', $dialog);
-
-		if (!$nextPage.length) {
-			await waitWhile(() => !$('[data-view-page="' + pageNameNext + '"]', $dialog).length);
-		}
-	}
-};
-
-/**
- * Callback for jQuery dialog onCreate
- */
-const onCreate = (elDialog: HTMLElement) => {
-	var $dialog = $(elDialog);
-	var $dialogBody = $('.modal-body', $dialog);
-
-	connectScrollShadow($dialogBody[0]);
-
-	TopDialogWorker.state.decoratorOnCreate?.(elDialog);
-
-	initPopup(elDialog);
-};
-
-/**
- * Инициирование событий TopPopup в диалоговом окне
- */
-const initPopup = (elDialog: HTMLElement) => {
-	$(elDialog).on('aftershow.top-menu-popup', '[data-top-popup]', (_e, $popup) => {
-		// перенести popup в корневой элемент страницы диалогового окна
-		const $pageContent = TopDialogWorker.get$pairPage($popup).eq(1);
-		$pageContent.prepend($popup);
-	});
-};
-
-/**
- * Callback for jQuery dialog onOpen
- */
-const onOpen = async (elDialog: HTMLElement) => {
-	var $dialog = $(elDialog);
-	var pageName = $dialog.data('view-page-active');
-
-	const w1 = Number($(window).width());
-
-	Core.state.documentClassModificators.set('top-dialog', 'with_dialog');
-
-	const w2 = Number($(window).width());
-
-	const scrollBarWidth = w2 - w1;
-	if (Number($(document).height()) > Number($(window).height())) $('html').css({ 'margin-right': scrollBarWidth + 'px' });
-
-	recalcPositions();
-
-	const dialog = getDialogWorker($dialog.attr('id') as string);
-	dialog?.emit?.('open', pageName);
-};
-
-/**
- * Callback for jQuery dialog onClose
- */
-const onClose = async (elDialog: HTMLElement) => {
-	var $dialog = $(elDialog);
-
-	var viewName = $dialog.attr('id');
-	var pageName = $dialog.data('view-page-active');
-	if (pageName) {
-		setHash('vpn', TopDialogWorker.state.viewPageN);
-		setHash('view-' + viewName, null, false);
-
-		if (TopDialogWorker.state.viewPageN === 0 || TopDialogWorker.state.viewPageN === 1) setHash('vpn', null);
-	}
-
-	if (!$('.ui-widget-overlay:visible').length){
-		Core.state.documentClassModificators.delete('top-dialog');
-
-		$('html').css({ 'margin-right': '' });
-	}
-
-	$dialog.trigger('viewAfterClose', [$dialog]);
-
-	const dialog = getDialogWorker($dialog.attr('id') as string);
-	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 = () => {
-	$('.ui-dialog:visible > .ui-dialog-content').each((_index, eldDialog: HTMLElement) => {
-		const $dialog = $(eldDialog);
-		const $dialogBody = $('.modal-body:visible', $dialog);
-		const $ui = $dialog.closest('.ui-dialog');
-
-		if (!$dialogBody.length) return;
-
-		const options = genVueOptions($dialog);
-
-		options.position ??= { of: window };
-
-		$dialog.dialog('option', options);
-
-		$ui.removeClass('me-tightly');
-		if (Number($ui.height()) > Number($(window).height())) $ui.addClass('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 {string|$} viewNameOr$Dialog - id страницы окна или jQuery элемент окна
- * @param {?string} pageName - имя страницы
- * @param {?Array<any>} args - аргументы, набор проивзольных параметров, которые могут обрабатываться каждым окном по своему
- * @param {?Function} callback - функция, которая будет запущена после октытия страницы
- */
-const toView = async (
-	viewNameOr$Dialog: $el | 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();
-			}, 10);
-		});
-	}
-
-	await nextTick();
-
-	let $dialog: $el;
-	if (typeof (viewNameOr$Dialog) === 'object') {
-		$dialog = viewNameOr$Dialog;
-	} else {
-		$dialog = $('#' + viewNameOr$Dialog);
-	}
-
-	// Диалоговое окно еще не загружено
-	if (!$dialog.length && typeof (viewNameOr$Dialog) == 'string' && TopDialogWorker.state.load) {
-		await TopDialogWorker.state.load(viewNameOr$Dialog);
-
-		toView(viewNameOr$Dialog, pageName, args, moveDirection, callback);
-
-		return;
-	}
-
-	await toViewPage($dialog, pageName, args, moveDirection);
-
-	if ($dialog.is('.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($dialog);
-
-		$dialog.dialog(options);
-	}
-
-	if (callback) callback($dialog);
-};
-
-const toViewPage = async ($dialog: $el, pageName?: string, args?: string[], moveDirection?: MoveDirection) => {
-	if (pageName === undefined) pageName = $dialog.data('view-page-active') as string;
-
-	if (pageName != $dialog.data('view-page-active')) {
-		var stopped = stopAnimations($dialog);
-		if (stopped) await sleep(100);
-	}
-
-	if (args === undefined) args = [];
-
-	await updatePageVue($dialog.attr('id') as string, undefined, pageName);
-
-	var $modalLayers = $('> .modal-layer', $dialog);
-	var $currentPage = $('> .active', $modalLayers);
-	var $nextPage = $('> [data-view-page="' + pageName + '"]', $modalLayers);
-	var argsString = args.join(':');
-
-	if (moveDirection === undefined) {
-		moveDirection = 'next';
-		if ($nextPage.data('order') < $currentPage.data('order')) moveDirection = 'prev';
-	}
-
-	if (!$nextPage.length) return;
-
-	$dialog.data('view-page-active', pageName);
-
-	// запрашиваемая страница уже открыта
-	if ($nextPage.is('.active')) {
-		if ($nextPage.data('view-page-args') != argsString) {
-			$nextPage.data('view-page-args', argsString);
-
-			// dialogs.beforeOpenViewPage($dialog, $nextPage, pageName, args);
-			// dialogs.afterOpenViewPage($dialog, $nextPage, pageName, args);
-		}
-
-		beforeOpenViewPage($dialog, $nextPage, pageName, args);
-		afterOpenViewPage($dialog, $nextPage, pageName, args);
-
-		return;
-	}
-
-	$nextPage.data('view-page-args', argsString);
-
-	if ($('.top-popup-wrapper', $currentPage).length) {
-		TopPopupWorker.close($('.top-popup-wrapper', $currentPage)[0]);
-	}
-
-	if ($nextPage.closest('.ui-dialog').is(':hidden')) moveDirection = 'none';
-	if (!$currentPage.length) moveDirection = 'none';
-	if ($nextPage.is(':visible')) moveDirection = 'none';
-	switch (moveDirection) {
-		case 'prev':
-			$nextPage.each((_index, el) => {
-				$(el).insertBefore($(el).siblings('.active'));
-			});
-
-			$currentPage.addClass('right-to-center reverse');
-			$nextPage.addClass('center-to-left reverse');
-
-			break;
-		case 'next':
-			$nextPage.each((_index, el) => {
-				$(el).insertAfter($(el).siblings('.active'));
-			});
-
-			$currentPage.addClass('center-to-left');
-			$nextPage.addClass('right-to-center');
-
-			break;
-	}
-
-	$dialog.attr('view-page-active', pageName);
-
-	$currentPage.removeClass('active');
-	$nextPage.addClass('active');
-
-	beforeOpenViewPage($dialog, $nextPage, pageName, args);
-
-	if (moveDirection) {
-		$dialog.addClass('i-change-page');
-		const delay = Number($nextPage.css('animation-duration').replace('s', '')) * 1000;
-
-		timerClearAnimation = setTimeout(function () {
-			updatePageVue($dialog.attr('id') as string, pageName, '');
-			stopAnimations($dialog);
-			afterOpenViewPage($dialog, $nextPage, pageName, args);
-		}, delay);
-	} else {
-		await updatePageVue($dialog.attr('id') as string, pageName, '');
-		afterOpenViewPage($dialog, $nextPage, pageName, args);
-	}
-};
-
-/**
- * К предыдущему представлению
- */
-const toPrevPage = ($dialog: $el) => {
-	var prevPageName = '';
-
-	var $modalLayers = $('> .modal-layer', $dialog);
-	var $currentPage = $('> .active', $modalLayers).eq(0);
-	var $prevPage = $currentPage.prev('[data-view-page]');
-	prevPageName = $prevPage.data('view-page');
-
-	if (prevPageName) {
-		toViewPage($dialog, prevPageName, undefined, 'prev');
-	} else {
-		$dialog.dialog('close');
-	}
-};
-
-/**
- * Для обработки событий вне vue
- */
-const beforeOpenViewPageTimers = new Set();
-const beforeOpenViewPage = ($dialog: $el, $page: $el, pageName: string, args: string[]) => {
-	// группировка цепочки событий
-	// запрос на открытие страницы может выполняться несколько раз, чаще такое может быть при открытии, загрузке и переходе сразу к нужной странице
-	const eventKey = $dialog.attr('id') + $page.eq(0).data('view-page') + pageName + args.join();
-
-	if (beforeOpenViewPageTimers.has(eventKey)) return;
-	beforeOpenViewPageTimers.add(eventKey);
-
-	setTimeout(function () {
-		beforeOpenViewPageTimers.delete(eventKey);
-		$dialog.trigger('viewBeforeOpen', [$dialog, $page, pageName, args]);
-	});
-};
-
-/**
- * Для обработки событий вне vue
- */
-const afterOpenViewPage = ($dialog: $el, $page: $el, pageName: string, args: string[]) => {
-	setTimeout(function () {
-		$dialog.trigger('viewAfterOpen', [$dialog, $page, pageName, args]);
-	});
-};
-
-/**
- * Получить состояние: Диалоговое окно находится в состоянии смены страницы
- */
-const inAnimation = ($dialog: $el) => {
-	return $dialog.is('.i-change-page');
-};
-
-/**
- * Остановить анимацию смены страницы
- *
- * @returns Вернет true, если анимация производилась и была остановлена
- */
-const stopAnimations = ($dialog: $el) => {
-	if (!inAnimation($dialog)) return false;
-
-	clearTimeout(timerClearAnimation);
-
-	var $modalLayers = $('> .modal-layer', $dialog);
-
-	var pageName = $dialog.data('view-page-active');
-	$dialog.removeClass('i-change-page');
-	$('> [data-view-page]', $modalLayers).removeClass('center-to-left right-to-center reverse active');
-	$('> [data-view-page="' + pageName + '"]', $modalLayers).addClass('active');
-
-	return true;
-};
-
-/**
- * Закрыть диалоговое окно
- */
-const close = function (dialogId: string) {
-	const $dialog = $('#' + dialogId);
-
-	if (!$dialog.dialog('instance')) return;
-
-	$dialog.dialog('close');
-};
-
-/**
- * Управление props.isLoading
- */
-const setLoading = ($page: $el, isLoading: boolean, duration?: number) => {
-	if (!$page.is('[data-view-page]')) $page = $('[data-view-page]:visible', $page);
-
-	if (isLoading) {
-		if (duration !== undefined) {
-			$page.each((_index, el) => {
-				el.style.setProperty('--dialog-loading-duration', duration + 's');
-			});
-		}
-
-		$page.addClass('i-load-data');
-	} else {
-		$page.removeClass('i-load-data');
-
-		$page.each((_index, el) => {
-			el.style.setProperty('--dialog-loading-duration', '10s');
-		});
-	}
-};
-
-const isLoading = ($page: $el) => {
-	return $page.is('.i-load-data');
-};
-
-export const TopDialogUtils = {
-	updatePageVue,
-	recalcPositions,
-	toViewDirty,
-	toView,
-	toViewPage,
-	toPrevPage,
-	setLoading,
-	isLoading,
-	inAnimation,
-	close,
-};
-
-init();