@topvisor/ui 1.0.42-dev.2 → 1.0.42-policy.0

package/src/components/popup/lib/popup.globalEvents.ts

@@ -1,271 +0,0 @@
-import Worker from '@/components/popup/lib/worker';
-import DOM from '@/core/utils/dom';
-
-/**
- * Глобальные события, для реализации Popup
- * Автоматически инициируется при первой загрузке, не является выгружаемым модулем
- *
- * Если в меню встречает класс .preloader, то событие нажатия на кнопку через enter будет остановлено
- */
-class GlobalEvents {
-
-	private static isInited = false;
-
-	/**
-	 * Добавить глобальные обработчики
-	 *
-	 * Добавляются на страницу один раз и навсегда
-	 */
-	static init(): void {
-		if (this.isInited) return;
-
-		this.isInited = true;
-
-		document.addEventListener('click', this.onclickCapture, { capture: true });
-		document.addEventListener('click', this.onclick);
-		document.addEventListener('keydown', this.onkeydown);
-	}
-
-	/**
-	 * Глобальный обработчик захватов кликов
-	 *
-	 * Обрабатывает захватов клики внутри Popup
-	 */
-	private static onclickCapture(e: Event): void {
-		if (!(e.target instanceof HTMLElement)) return;
-
-		// меню
-		const elPopup = e.target.closest<HTMLElement>('.top-popup-wrapper');
-
-		// клик вне меню
-		if (!elPopup) {
-			return;
-		}
-
-		// клик по кнопке открытия другого меню
-		if (e.target.matches('[data-top-popup]')) {
-			// список меню, в котором был сделан клик
-			const elUl = e.target.closest<HTMLElement>('ul');
-
-			// элемент меню, по которому был сделан клик
-			const elItem = e.target.closest<HTMLElement>('a, .a');
-
-			// сделать элемент меню, по которому сделан клик активным
-			if (elUl) {
-				elUl.querySelector('a.top-active, .a.top-active')?.classList.remove('top-active');
-			}
-
-			if (elItem) {
-				elItem.classList.add('top-active');
-			}
-
-			e.stopPropagation();
-
-			return;
-		}
-
-		// клик по фону меню
-		if (e.target.matches('.top-popup-wrapper')) {
-			const elPopup = e.target;
-
-			Worker.close(elPopup);
-
-			e.stopPropagation();
-
-			return;
-		}
-	}
-
-	/**
-	 * Глобальный обработчик кликов
-	 *
-	 * Обрабатывает клики внутри Popup
-	 */
-	private static onclick(e: Event): void {
-		if (!(e.target instanceof HTMLElement)) return;
-
-		// элементы меню, клик по которым должен его закрыть
-		const elCloser = e.target.closest<HTMLElement>('.closer, a, .a, .top-button');
-		if (elCloser) {
-			// меню
-			const elPopup = e.target.closest<HTMLElement>('.top-popup-wrapper');
-
-			// клик вне меню
-			if (!elPopup) {
-				return;
-			}
-
-			// элемент имеет модификатор, запрещаюущий закрытие меню по клику на него
-			if (elCloser.matches('.top-popup-noCloser')) {
-				return;
-			}
-
-			// deprecated, ссылки с href="." запрещены, они должны быть заменены на .top-popup_listItem-button
-			if (elCloser.getAttribute('href') === '.') {
-				e.preventDefault();
-			}
-
-			// закрыть меню
-			Worker.close(elPopup);
-		}
-	}
-
-	/**
-	 * Глобальный обработчик нажатия кнопки на клавиатуре
-	 */
-	private static onkeydown(e: KeyboardEvent): void {
-		if (!(e.target instanceof HTMLElement)) return;
-
-		let elPopup = e.target.closest<HTMLElement>('.top-popup-wrapper');
-
-		if (!elPopup) {
-			elPopup = Worker.getPopupFromOpener(e.target)?.elPopup ?? null;
-		}
-
-		// нажатие не в меню
-		if (!elPopup) {
-			return;
-		}
-
-		const elUl = elPopup.querySelector<HTMLElement>('ul.top-popup_content');
-
-		switch (e.key) {
-			case 'Escape':
-				Worker.close(elPopup);
-
-				break;
-
-			case 'Enter':
-				// атоматическое нажатие кнопок при нажатии Enter
-				if (!elUl) {
-					if (DOM.querySelectorVisible(elPopup, '.preloader')) {
-						break;
-					}
-
-					// deprecated, старый код на сайте
-					const elBtn = DOM.querySelectorVisible(elPopup, '.top-popup_footer .go, .top-popup_footer [data-action]');
-					if (elBtn instanceof HTMLElement) {
-						elBtn.click();
-
-						break;
-					}
-
-					// Запуск клика последней кнопки, расположенной в footer'е Popup'а, нажатием клавиши Enter
-					let elFooterLastBtn = DOM.querySelectorVisibleLast(elPopup, '.top-popup_footer .top-button:focus');
-					if (!elFooterLastBtn) elFooterLastBtn = DOM.querySelectorVisibleLast(elPopup, '.top-popup_footer .top-button');
-					if (elFooterLastBtn instanceof HTMLElement) {
-						elFooterLastBtn.click();
-					}
-
-					break;
-				}
-
-				// перейти по ссылке по нажатию на Enter
-				// данный функуционал игнорирует SPA
-				const elLink = DOM.querySelectorVisible(elPopup, 'li > a.top-active');
-				if (elLink && elLink.getAttribute('href')) {
-					// фокус может находиться на другой ссылке
-					e.preventDefault();
-
-					location.href = elLink.getAttribute('href')!;
-				}
-
-				// кликнуть по элементу меню по нажатию на Enter
-				const elItem = elPopup.querySelector<HTMLElement>('li > .top-active');
-				if (elItem instanceof HTMLElement) {
-					elItem.click();
-				}
-
-				break;
-
-			// управление стрелками
-			case 'ArrowUp':
-			case 'ArrowRight':
-			case 'ArrowDown':
-			case 'ArrowLeft':
-				if (!elUl) {
-					break;
-				}
-
-				if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
-					const elMoreVisible = DOM.querySelectorVisible(
-						elPopup,
-						'ul.top-popup_content > li:not(.top-popup_liNoSelectable) > .top-active > .top-popup_listMore',
-					);
-
-					if (elMoreVisible) {
-						e.preventDefault();
-					}else if((e.target as HTMLElement).tagName === 'INPUT'){
-						break;
-					}
-				} else {
-					e.preventDefault();
-				}
-
-				const elItemActive = elPopup.querySelector<HTMLElement>('ul.top-popup_content > li:not(.top-popup_liNoSelectable) > .top-active')?.parentElement;
-
-				// есть подменю
-				if (e.key === 'ArrowRight' && elItemActive) {
-					// const elItemMoreActive = elItemActive.querySelector<HTMLElement>('[data-top-popup].top-active');
-					// if (elItemMoreActive) {
-					// 	return elItemMoreActive.click();
-					// }
-
-					const elMore = elItemActive.querySelector<HTMLElement>('.top-active > .top-popup_listMore');
-					if (elMore instanceof HTMLElement) {
-						return elMore.click();
-					}
-				}
-
-				const elsLiVisible = DOM.querySelectorAllVisible(elPopup, 'ul.top-popup_content > li:not(.top-popup_liNoSelectable)');
-				const countLi = elsLiVisible.length;
-
-				if (!countLi) {
-					return;
-				}
-
-				let index = -1;
-				if (elItemActive) {
-					index = elsLiVisible.indexOf(elItemActive);
-				}
-
-				if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
-					index--;
-				} else {
-					index++;
-				}
-
-				// это первый элемен, "Назад" должен закрывать окно
-				if (e.key === 'ArrowLeft' && index === -1) {
-					if (e.target.matches('input')) {
-						return;
-					}
-
-					return Worker.close(elPopup);
-				}
-
-				// это последний элемен, "Вперед" не должен ни чего делать
-				if (e.key === 'ArrowRight' && index === countLi) {
-					return;
-				}
-
-				if (index < 0) {
-					index = countLi - 1;
-				}
-
-				if (index > countLi - 1) {
-					index = 0;
-				}
-
-				elPopup.querySelectorAll('ul.top-popup_content > li > .top-active').forEach(el => el.classList.remove('top-active'));
-				elsLiVisible[index].querySelector(':scope > a, :scope > .a')?.classList.add('top-active');
-
-				Worker.scrollToActive(elPopup);
-
-				break;
-		}
-	}
-
-}
-
-export default GlobalEvents;