@topvisor/ui 1.0.41-dialog.1 → 1.1.0-date.0

package/src/components/dialog/dialog/style/modern/dialog.css

@@ -0,0 +1,12 @@
+html {
+	--top-dialog-width: auto;
+	--top-dialog-height: auto;
+}
+
+.top-dialog {
+	max-width: 100vw;
+}
+
+.top-dialog .modal-layer-body {
+	height: var(--top-dialog-height);
+}

package/src/components/dialog/dialog/style/modern/dialog.pc.css

@@ -0,0 +1,3 @@
+.top-dialog {
+	width: var(--top-dialog-width) !important;
+}

package/src/components/dialog/dialog/types.ts

@@ -0,0 +1,69 @@
+export interface Props {
+
+	id: string,
+
+	/**
+	 * Имя активной страницы
+	 */
+	pageActive: string,
+
+	/**
+	 * Базовая ширина окна
+	 */
+	width?: string,
+
+	/**
+	 * Базовая высота окна
+	 *
+	 * Установите auto, если окно должно подстраиваться под размеры содержимого
+	 *
+	 * Установите значение, если окно должно подстраиваться под размеры содержимого
+	 *
+	 * @example 'auto'
+	 * @example '200px'
+	 */
+	height?: string,
+
+	/**
+	 * Является ли окно модальным
+	 *
+	 * @see https://api.jqueryui.com/dialog/#option-modal
+	 */
+	modal?: boolean,
+
+	/**
+	 * Позиция окна
+	 *
+	 * @see https://api.jqueryui.com/dialog/#option-position
+	 */
+	position?: string,
+
+	/**
+	 * Для хеш-навигации
+	 */
+	historyType?: 'push' | 'replace',
+
+	/**
+	 * Список css классов для диалогового окна
+	 */
+	classes?: string[],
+}
+
+export type Emits = {
+	/**
+	 * Диалоговое окно было открыто
+	 */
+	open: [pageName: string];
+
+	/**
+	 * Диалоговое окно было закрыто
+	 */
+	close: [pageName: string];
+}
+
+export interface Slots {
+	/**
+	 * Слот с компонентами `TopDialogPage` и / или `TopDialogPageComponent`
+	 */
+	default(props: {}): any;
+}

package/src/components/dialog/dialog.ts

@@ -0,0 +1,7 @@
+export { default as TopDialog } from '@/components/dialog/dialog/dialog.vue';
+export { default as TopDialogPage } from '@/components/dialog/dialog/page/page.vue';
+export type{ PropsCommon as TopDialogPagePropsCommon } from '@/components/dialog/dialog/page/types';
+export { propsPageCommon } from '@/components/dialog/dialog/page/types';
+export { default as TopDialogPageComponent } from '@/components/dialog/dialog/pageComponent/pageComponent.vue';
+
+export { useTopDialogSelf } from '@/components/dialog/dialog/composables/utils';

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

@@ -0,0 +1,58 @@
+export type TopDialogOptions = {
+	/**
+	 * Загрузчик для компонентов диалоговых окон по их id
+	 */
+	load?: TopDialogLoad,
+
+	/**
+	 * Глобальный декоратор на событие инициализации диалогового окна
+	 */
+	decoratorOnCreate?: DecoratorOnCreate,
+
+	/**
+	 * Пауза перед загрузкой утилиты диалоговых окон в ms
+	 *
+	 * Для производительности
+	 *
+	 * Утилиты будут в любом случае загружены при работе с диалоговыми окнами, но их не надо грузить каждый раз после открытия страинцы
+	 */
+	autoInitDelay?: number
+};
+
+export type TopDialogLoad = (dialogId: string) => Promise<void>;
+
+export type DecoratorOnCreate = (elDialog: HTMLElement) => Promise<void>;
+
+export type MoveDirection = 'next' | 'prev' | 'none';
+
+export type ElTopDialogOpener<El extends HTMLElement = HTMLElement> = El & { dataset: { toView: string } };
+
+export type ElTopDialogWrapper = HTMLElement & { querySelector: (selectors: '.ui-dialog-content') => ElTopDialog };
+
+export type ElTopDialog = HTMLElement & {
+	getAttribute: (qualifiedName: 'id') => string,
+	closest: (el: '.ui-dialog') => ElTopDialogWrapper,
+	dataset: { viewPageActive: string },
+};
+
+export type ElTopDialogBody = HTMLElement;
+
+export type ElTopDialogPage = HTMLElement & { dataset: { 'view-page': string, order?: string } };
+
+export type ElTopDialogModalLayer = HTMLElement;
+
+export type ElTopDialogOpener<El extends HTMLElement = HTMLElement> = El & { dataset: { toView: string } };
+
+export type ElTopDialogWrapper = HTMLElement & { querySelector: (selectors: '.ui-dialog-content') => ElTopDialog };
+
+export type ElTopDialog = HTMLElement & {
+	getAttribute: (qualifiedName: 'id') => string,
+	closest: (el: '.ui-dialog') => ElTopDialogWrapper,
+	dataset: { viewPageActive: string },
+};
+
+export type ElTopDialogBody = HTMLElement;
+
+export type ElTopDialogPage = HTMLElement & { dataset: { 'view-page': string, order?: string } };
+
+export type ElTopDialogModalLayer = HTMLElement;

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

@@ -0,0 +1,212 @@
+import { TopDialogUtils } from './utils';
+import { TopDialogWorker } from './worker';
+import { querySelectorAllArray, querySelectorVisible } from '@/core/utils/dom';
+import { historySetState } from '@/core/utils/route';
+import type { ElTopDialog, ElTopDialogWrapper } from '@/components/dialog/lib/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;
+
+		const elDialogs = querySelectorAllArray<ElTopDialog>(document, '.ui-dialog-content').filter((elDialog) => {
+			return elDialog.checkVisibility();
+		});
+
+		$(elDialogs[elDialogs.length - 1]).dialog('close');
+	});
+
+	/**
+	 * Закрытие диалога по кнопке закрыть
+	 */
+	document.addEventListener('click', (e) => {
+		// // навигация без истории
+		// 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 as HTMLElement).closest('[data-action="top-dialog-close"]') as HTMLElement | null;
+		if (!el) return;
+
+		e.preventDefault();
+
+		const elDialog = el.closest<ElTopDialog>('.ui-dialog-content');
+		if (!elDialog) return;
+
+		// если к кнопке привязана ссылка, диалоговое окно не нужно закрывать
+		const toView = el.dataset.toView;
+
+		if (toView == 'toPrevPage()') {
+			TopDialogUtils.toPrevPage(elDialog);
+
+			return;
+		}
+
+		if (toView) {
+			const viewNameAndPageLink = toView.split('-');
+			const viewName = viewNameAndPageLink.shift();
+			const pageLink = viewNameAndPageLink.join('-');
+
+			if (!viewName) return;
+
+			const elDialog = TopDialogUtils.getElDialogById(viewName);
+			if (!elDialog) return;
+
+			const elToPages = querySelectorAllArray(elDialog, `[data-view-page="${pageLink}"]`);
+			if (!elToPages) return;
+
+			if (!elToPages[0].checkVisibility()) {
+				const hash = TopDialogWorker.genViewPageHash(toView, 'prev');
+
+				// // не убирает кнопку "Вперед" в браузере
+				// history.replaceState(null, '', hash);
+				// toViewDirty(toView, 'prev');
+
+				// // добавляет текущую страницу в историю браузера
+				historySetState(false, hash);
+
+				return;
+			}
+		}
+
+		const $dialog = $(elDialog);
+
+		$dialog.dialog('close');
+	});
+
+	/**
+	 * Все submit должны обрабатываться через js
+	 */
+	document.addEventListener('submit', (e) => {
+		const elForm = e.target as HTMLElement;
+
+		if (elForm.matches('.modal-body > form') || elForm.matches('.modal-layer-body > form')) {
+			e.preventDefault();
+		}
+	});
+
+	/**
+	 * Выполнение действия по нажатию Enter
+	 *
+	 * @todo Убрать `.searcher`
+	 */
+	document.addEventListener('keypress', (e) => {
+		const eventTarget = e.target as HTMLElement;
+
+		const elModalBody = eventTarget.closest('.ui-dialog .modal-body');
+		if (!elModalBody) return;
+
+		const isInput = (eventTarget.matches(':input:not(.searcher)') || eventTarget.hasAttribute('contenteditable'));
+		if (!isInput) return;
+
+		// if (e.keyCode !== 10 && e.key !== 'ENTER') return;
+		if (e.key !== 'ENTER') return;
+
+		// не выполнять submit действий при работе с jquery autocomplete
+		if (eventTarget.classList.contains('autocomplete')) {
+			e.preventDefault();
+
+			return;
+		}
+
+		if (eventTarget.tagName === 'TEXTAREA') {
+			if (!e.ctrlKey && !e.metaKey) return;
+
+			const elForm = eventTarget.closest('form');
+
+			if (elForm) {
+				// Find visible submit buttons
+				const elSubmitButton = querySelectorAllArray(elForm, 'button[type="submit"]')
+					.concat(querySelectorAllArray(elForm, 'input[type="submit"]'))
+					.find((elSubmitButton) => {
+						return elSubmitButton.checkVisibility();
+					});
+
+				elSubmitButton?.click();
+			}
+		}
+	});
+
+	/**
+	 * Закрытие диалога по клику вне окна
+	 */
+	document.addEventListener('click', function (event) {
+		const eventTarget = event.target as HTMLElement;
+
+		if (!eventTarget.classList.contains('ui-widget-overlay')) return;
+
+		let elDialogWrapperWithTopZIndex: ElTopDialogWrapper | undefined;
+		let topZIndex = 0;
+
+		const elDialogWrapperVisibles = querySelectorAllArray<ElTopDialogWrapper>(document, '.ui-dialog').filter((elDialogWrapper) => {
+			return elDialogWrapper.checkVisibility();
+		});
+
+		elDialogWrapperVisibles.forEach((elDialogWrapper) => {
+			const zIndex = Number(window.getComputedStyle(elDialogWrapper).zIndex);
+			if (zIndex < topZIndex) return;
+
+			elDialogWrapperWithTopZIndex = elDialogWrapper;
+			topZIndex = zIndex;
+		});
+
+		if (elDialogWrapperWithTopZIndex) {
+			const elDialog = elDialogWrapperWithTopZIndex.querySelector('.ui-dialog-content');
+
+			$(elDialog).dialog('close');
+		}
+	});
+
+	window.addEventListener('resize', TopDialogUtils.recalcPositions);
+	TopDialogUtils.recalcPositions();
+};