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

package/src/core/utils/keyboard.ts

@@ -0,0 +1,29 @@
+/**
+ * Утилиты для работы с устройствами ввода
+ * @packageDocumentation
+ */
+
+/**
+ * Перевод строки в другую раскладку
+ */
+export const invertKeyboardLayout = (string: string): string => {
+	const a1 = 'qwertyuiop[]asdfghjkl;\'zxcvbnm,./QWERTYUIOP{}ASDFGHJKL;"ZXCVBNM<>?';
+	const a2 = 'йцукенгшщзхъфывапролджэячсмитьбю.ЙЦУКЕНГШЩЗХЪФЫВАПРОЛДжЭЯЧСМИТЬБЮ,';
+	let indexFinded: number;
+
+	const chars: Array<string> = string.split('');
+	chars.forEach((char: string, index: number) => {
+		indexFinded = a1.indexOf(char);
+		if (indexFinded !== -1) {
+			chars[index] = a2[indexFinded];
+		} else {
+			indexFinded = a2.indexOf(char);
+			if (indexFinded !== -1) {
+				chars[index] = a1[indexFinded];
+			}
+		}
+	});
+	string = chars.join('');
+
+	return string;
+};

package/src/core/utils/lodash.ts

@@ -0,0 +1,18 @@
+/**
+ * Сборка lodash только с необходимыми функциями
+ * @packageDocumentation
+ */
+
+import debounce from 'lodash-es/debounce.js';
+import cloneDeep from 'lodash-es/cloneDeep.js';
+import memoize from 'lodash-es/memoize.js';
+import throttle from 'lodash-es/throttle.js';
+import merge from 'lodash-es/merge.js';
+
+export {
+	debounce,
+	cloneDeep,
+	memoize,
+	throttle,
+	merge,
+};

package/src/core/utils/number.ts

@@ -0,0 +1,37 @@
+/**
+ * Работа с числами
+ * @packageDocumentation
+ */
+
+/**
+ * Посчитать процент от числа (сколько процентов составляет part от full)
+ * @param part - первое число
+ * @param full - второе число
+ * @param precision - точность (колличество знаков после запятой)
+ */
+export const percentOfNumber = (part: '--' | number, full: number = 100, precision: number = 0): '--' | number => {
+	if (part === '--') return part;
+
+	let percent = (full * 1) ? part / full : 0;
+	percent *= 100;
+
+	// если десятичные знаки не выводятся и число при округлении может дать ноль, то округляем в большую сторону
+	if (!precision && percent < 1) {
+		percent = Math.round(percent * (Math.pow(10, 2))) / (Math.pow(10, 2));
+	} else {
+		percent = Math.round(percent * (Math.pow(10, precision))) / (Math.pow(10, precision));
+	}
+
+	return percent;
+};
+
+/**
+ * Генерация псевдорандомного числа
+ *
+ * Детерменированная функция по параметру seed
+ */
+export const randomBySeed = (seed: number) => {
+	let x = Math.sin(seed) * 10000;
+
+	return x - Math.floor(x);
+};

package/src/core/utils/price.ts

@@ -0,0 +1,24 @@
+/**
+ * Работа с ценами
+ * @packageDocumentation
+ */
+
+import type { Lang } from '@/core/plugins/i18n';
+import { useI18nLang } from '@/core/plugins/i18n';
+import Core from '@/core/core/core';
+
+/**
+ * Сгенерировать строку с суммой и валютой
+ * @param sum - сумма
+ * @param lang - язык, берётся из профиля, если не задано
+ * @param currency - валюта, берётся из профиля, если не задано
+ * @returns строка с языкозависимым представлением числа sum и знаком валюты
+ */
+export const genPrice = (sum: number, lang?: Lang, currency: typeof Core.state.currency = Core.state.currency): string => {
+	lang = lang ?? useI18nLang().value;
+
+	let sumStr = sum.toLocaleString(lang, { style: 'currency', currency, maximumFractionDigits: 2 });
+	sumStr = sumStr.replace(',', '.');
+
+	return sumStr;
+};

package/src/core/utils/route.ts

@@ -0,0 +1,130 @@
+/**
+ * Управление навигацией страницы, работа с hash параметрами страницы
+ * @packageDocumentation
+ */
+
+/**
+ * Получить значение хэш параметра страницы
+ */
+export const getHash = function (name: string, locationHash: string = location.hash): string {
+	const re = new RegExp('[#?&]' + name + '=([^&]*)');
+	const value = locationHash.match(re);
+	if (!value || value.length != 2) return '';
+
+	value[1] = decodeURIComponent(value[1]);
+	value[1] = value[1].replace(/\+/g, ' ');
+
+	return value[1];
+};
+
+/**
+ * Установить значение в хэш параметр страницы
+ */
+export const setHash = function (name: string, value: string | number | null, replaceState: boolean = true): void {
+	let hash = genHash(name, value);
+
+	if (replaceState) {
+		historySetState(true, hash);
+	} else {
+		historySetState(false, hash);
+	}
+};
+
+/**
+ * Удалить значение из хэш параметра страницы
+ */
+export const delHash = function (name: string, value: string, replaceState: boolean = true): void {
+	setHash(name, null, replaceState);
+};
+
+/**
+ * Сгенерировать новое значение для хэш параметра страницы с указанным параметром
+ */
+export const genHash = function (name: string, value: string | number | null, locationHash: string = location.hash): string {
+	const re = new RegExp('&?' + name + '=[^&]*', 'g');
+
+	locationHash = locationHash.replace(re, '');
+
+	if (value !== null) {
+		value = (value + '').replace(' ', '%20');
+		locationHash = locationHash.replace(re, '&' + name + '=' + value);
+
+		if (locationHash.indexOf('&' + name + '=') == -1) locationHash += '&' + name + '=' + value;
+	}
+
+	locationHash = locationHash.replace(/&+/g, '&');
+	locationHash = locationHash.replace(/^(#)?&|&$/g, '$1');
+
+	locationHash = '#' + locationHash;
+	locationHash = locationHash.replace(/^#+/, '#');
+
+	if (locationHash === '#') locationHash = '';
+
+	return locationHash;
+};
+
+/**
+ * Установить значения в хэш параметр страницы
+ */
+export const setHashs = function (data: Map<string, string> | object | any, replaceState: boolean): void {
+	if (data instanceof Map) data = Object.fromEntries(data);
+
+	if (replaceState === undefined) replaceState = true;
+	let hash = location.hash;
+
+	for (const name in data) {
+		const re = new RegExp('&?' + name + '=[^&]*', 'g');
+		hash = hash.replace(re, '');
+
+		if (data[name] !== null) {
+			data[name] = (data[name] + '').replace(' ', '%20');
+			hash += '&' + name + '=' + data[name];
+		}
+	}
+
+	hash = hash.replace(/&+/g, '&');
+	hash = hash.replace(/^(#)?&|&$/g, '$1');
+
+	hash = '#' + hash;
+	hash = hash.replace(/^#+/, '#');
+
+	if (hash === '#') hash = '';
+
+	if (replaceState) {
+		historySetState(true, hash);
+	} else {
+		historySetState(false, hash);
+	}
+};
+
+/**
+ * Установть позицию в истории вкладки браузера
+ *
+ * @see history.replaceState
+ * @see history.pushState
+ *
+ * @todo Объединить с historyPushState() из @/component/vue/app/spa
+ */
+export const historySetState = (replace: boolean = false, hash: string): void => {
+	// дедупликация хеш навигации
+	// необходима так как js слушает нативную навигацию и если состояние уже устанолено, оно не должно повторно устанавливаться из js
+	if (hash === location.hash) return;
+
+	const oldURL = location.href;
+
+	const url = location.href.replace(/#.*/, '') + hash;
+
+	if (replace) {
+		history.replaceState(history.state, '', url);
+	} else {
+		history.pushState(history.state, '', url);
+	}
+
+	// имитация hashchange, так как при работе с history, он не будет вызван автоматически
+	const event = new HashChangeEvent('hashchange', {
+		oldURL: oldURL,
+		newURL: url,
+	});
+
+	window.dispatchEvent(event);
+};

package/src/core/utils/scroll.ts

@@ -0,0 +1,120 @@
+/**
+ * Информация о скролле, фичи для скролла
+ * @packageDocumentation
+ */
+
+import { offset } from '@/core/utils/dom';
+
+/**
+ * Добавить классы модификаторов тени в зависимости от скролла элемента
+ *
+ * @todo Сделать приватной
+ */
+export const genHasScroll = (el: HTMLElement): void => {
+	if (!el) return;
+	if (!el.parentElement) return;
+	if (!el.offsetHeight) return;
+
+	// Диалоги не вынесены в UI
+	if (window['dialogs']) {
+		const elDialog = el.closest('.ui-dialog');
+		if (elDialog?.getBoundingClientRect() && elDialog?.getBoundingClientRect().bottom > document.documentElement.clientHeight) {
+			setTimeout(window['dialogs'].onWindowResize);
+		}
+	}
+
+	const hasScroll = (el.scrollHeight > el.offsetHeight);
+	if (hasScroll) {
+		el.parentElement.classList.add('has_scroll_container');
+		el.classList.add('has_scroll');
+	} else {
+		el.parentElement.classList.remove('has_scroll_container');
+		el.classList.remove('has_scroll');
+	}
+
+	if (hasScroll) {
+		const top: number = offset(el).top - offset(el.parentElement).top;
+		el.style.setProperty('--scroll-offset-top', top + 'px');
+
+		const height = el.offsetHeight;
+		el.style.setProperty('--scroll-height', height + 'px');
+
+		if (el.scrollTop > 0) {
+			el.classList.add('has_scroll-started');
+		} else {
+			el.classList.remove('has_scroll-started');
+		}
+
+		if (el.scrollTop >= el.scrollHeight - el.offsetHeight) {
+			el.classList.add('has_scroll-finished');
+		} else {
+			el.classList.remove('has_scroll-finished');
+		}
+	}
+};
+
+let scrollShadowResizeObserver: ResizeObserver;
+if (window.ResizeObserver) {
+	scrollShadowResizeObserver = new ResizeObserver((entries) => {
+		entries.forEach((entry) => genHasScroll(entry.target as HTMLElement));
+	});
+}
+
+/**
+ * Добавить отображение тени при появлении скролла у элемента
+ *
+ * Будут добавлены события для усатновки модификаторов тени в зависимости от скролла элемента
+ *
+ * Модификаторы:
+ * - top-scrollShadow
+ * - top-scrollShadow-started
+ * - top-scrollShadow-finished
+ */
+export const connectScrollShadow = (els: HTMLElement | HTMLElement[]) => {
+	if (!els) return;
+
+	if (Array.isArray(els)) {
+		els.forEach((el) => connectScrollShadow(el));
+
+		return;
+	}
+
+	const el = els;
+
+	if (el.dataset.scrollShadowInited) return;
+	el.dataset.scrollShadowInited = 'true';
+
+	el.onscroll = () => genHasScroll(el);
+
+	scrollShadowResizeObserver?.observe(el);
+};
+
+export const unconnectScrollShadow = (el: HTMLElement) => {
+	scrollShadowResizeObserver?.unobserve(el);
+};
+
+/**
+ * Посчитать глубину скролла (процент на сколько проскроллена страница)
+ *
+ * @deprecated
+ */
+export const amountScrolled = (): number => {
+	return getScrollPercent();
+};
+
+/**
+ * Получить прогресс скролла в процентах
+ */
+export const getScrollPercent = (el: HTMLElement = document.documentElement): number => {
+	const clientHeight = el.clientHeight;
+	const scrollHeight = el.scrollHeight;
+	const scrollTop = el.scrollTop;
+
+	if (scrollHeight && scrollTop && clientHeight) {
+		const trackLength = scrollHeight - clientHeight;
+
+		return Math.floor(scrollTop / trackLength * 100);
+	}
+
+	return 100;
+};

package/src/core/utils/searchers.ts

@@ -0,0 +1,191 @@
+import { useI18nLang } from '@/core/app';
+
+/**
+ * Вспомогательный класс для работы с разными Поисковиками
+ */
+export const searchersNames = {
+	0: 'Yandex',
+	20: 'Yandex.com',
+	21: 'Yandex.com.tr',
+	1: 'Google',
+	4: 'YouTube',
+	5: 'Bing',
+	7: 'Seznam',
+	8: 'AppStore',
+	9: 'GooglePlay',
+	101: 'VK',
+	102: 'Facebook',
+	103: 'Twitter',
+};
+
+/**
+ * Получить иконку ПС
+ * @param searcherKey - цифра или строка с цифрой обозначающая ПС. Если null вернется иконка с глобусом
+ */
+export const getSearcherGIcon = (searcherKey: number | string | undefined): string => {
+	let icon = '';
+
+	if (typeof searcherKey === 'string') searcherKey = Number(searcherKey);
+
+	switch (searcherKey) {
+		case 0:
+			icon = '';
+
+			break;
+		case 20:
+		case 21:
+			icon = '';
+
+			break;
+		case 1:
+			icon = '';
+
+			break;
+		case 2:
+			icon = '';
+
+			break;
+		case 3:
+			icon = '';
+
+			break;
+		case 4:
+			icon = '';
+
+			break;
+		case 5:
+			icon = '';
+
+			break;
+		case 6:
+			icon = '';
+
+			break;
+		case 7:
+			icon = '';
+
+			break;
+		case 8:
+			icon = '';
+
+			break;
+		case 9:
+			icon = '';
+
+			break;
+		case null:
+			icon = '';
+
+			break;
+	}
+
+	return icon;
+};
+
+/**
+ * Получить иконку устройства (ПК, планшет, смартфон)
+ */
+export const getDeviceGIcon = (device: number | string): string => {
+	let icon = '';
+
+	if (typeof device === 'string') device = Number(device);
+
+	switch (device % 10) {
+		case 0:
+			icon = '';
+
+			break;
+		case 1:
+			icon = '';
+
+			break;
+		case 2:
+			icon = '';
+
+			break;
+	}
+
+	return icon;
+};
+
+/**
+ * Получить иконку языка
+ */
+export const getLangLabel = (searcherKey: number | string, lang: string) => {
+	if (typeof searcherKey === 'string') searcherKey = Number(searcherKey);
+
+	switch (searcherKey * 1) {
+		case 1:
+		case 4:
+		case 5:
+		case 6:
+		case 8:
+		case 9:
+			return lang;
+	}
+
+	return '';
+};
+
+/**
+ * Сгенерировать заголовок типа частоты
+ */
+export const genVolumeLabel = (label: string, searcherKey: 0 | 1, volumeType: 1 | 2 | 3 | 5 | 6): string => {
+	switch (searcherKey * 1) {
+		// Яндекс
+		case 0:
+			switch (volumeType * 1) {
+				case 2:
+					label = `"${label}"`;
+
+					break;
+				case 3:
+					label = `"!${label}"`;
+
+					break;
+				case 5:
+					label = `"[${label}]"`;
+
+					break;
+				case 6:
+					label = `"[!${label}]"`;
+
+					break;
+			}
+			break;
+		// Google
+		case 1:
+			label = `[${label}]`;
+
+			break;
+	}
+
+	return label;
+};
+
+/**
+ * Проверить значение частоты, вернуть правильное значение частоты
+ */
+export const prepareVolumeType = (searcherKey: number, volumeType: number): number => {
+	// по умолчанию выбрана сама точная частота
+	if (volumeType === null) volumeType = 6;
+
+	switch (searcherKey) {
+		case 1:
+			volumeType = 3;
+
+			break;
+		case 2:
+			volumeType = 2;
+
+			break;
+		case 5:
+			if (volumeType > 1) volumeType = 1;
+
+			break;
+		default:
+			if (![1, 2, 3, 5, 6].includes(volumeType)) volumeType = 3;
+	}
+
+	return volumeType;
+};

package/src/core/utils/store/localStorage.ts

@@ -0,0 +1,56 @@
+import { watch } from 'vue';
+import type { Store } from './store';
+
+/**
+ * Сгенерировать имя для сохранения данных в localStorage
+ * @param stateName - имя свойства состояния
+ * @param stateKey - ключ состояния, разные компоненты могут использовать одинаковый ключ
+ */
+const genStorageKey = <T extends Store>(stateName: keyof T, stateKey: string): string => {
+	const stateNameString = String(stateName);
+
+	return `top:${stateNameString}:${stateKey}`;
+};
+
+/**
+ * Загрузить состояние
+ * @param stateName - имя свойства состояния
+ * @param store
+ */
+const loadLocalStorge = <T extends Store>(stateName: keyof T, store: T) => {
+	// если Store.key не знадан, значит сохранение состояния в компоненте отключено
+	if (!store.$id) return;
+
+	const localStorageKey = genStorageKey(stateName, store.$id);
+
+	try {
+		const localStorageValue: typeof store[keyof typeof store] = JSON.parse(localStorage.getItem(localStorageKey) as string);
+
+		if (typeof localStorageValue === typeof store[stateName]) {
+			store[stateName] = localStorageValue;
+		}
+	} catch (e) {
+		console.warn(new Error(`В localStorage[${localStorageKey}] не корректный json`));
+	}
+};
+
+/**
+ * Добавить автосохранение состояние при его изменении
+ * @param stateName - имя свойства состояния
+ * @param store
+ */
+const addSaverLocalStorge = <T extends Store>(stateName: keyof T, store: T) => {
+	// если store.$id не знадан, значит сохранение состояния в компоненте отключено
+	if (!store.$id) return;
+
+	const localStorageKey = genStorageKey(stateName, store.$id);
+
+	watch(() => store[stateName], () => {
+		localStorage.setItem(localStorageKey, JSON.stringify(store[stateName]));
+	}, { immediate: true });
+};
+
+export default {
+	loadLocalStorge,
+	addSaverLocalStorge,
+};

package/src/core/utils/store/plugin.ts

@@ -0,0 +1,50 @@
+import { inject, type ObjectPlugin } from 'vue';
+import type { Store } from './store';
+
+const PluginsByApp = new WeakMap();
+
+type Options = {
+	onInit: (context: Context) => void;
+}
+
+type Context = {
+	store: Store,
+	options: object,
+}
+
+/**
+ * Плагин tpa (Third-party access) для pinia
+ *
+ * Сейчас не используется
+ *
+ * TODO: Должен реализовывать возмоэности piniaTPAPlugin
+ */
+export default {
+	install: (app, options) => {
+		if (!PluginsByApp.has(app)) {
+			PluginsByApp.set(app, []);
+		}
+
+		const onInits = PluginsByApp.get(app);
+
+		onInits.push(options.onInit);
+
+		app.provide('TopStoreOnInits', onInits);
+	},
+} satisfies ObjectPlugin<Options>;
+
+/**
+ * Применить плагины к store
+ */
+export const usePlugins = (store: Store, options: object = {}) => {
+	const context: Context = {
+		store,
+		options,
+	};
+
+	const onInits: Array<Function> = inject('TopStoreOnInits', []);
+
+	onInits.forEach((onInit) => {
+		onInit.call(context);
+	});
+};