vgapp 0.7.9 → 0.8.0

package/app/utils/js/dom/manipulator.js

@@ -1,100 +1,173 @@
-import {isElement, normalizeData} from "../functions";
+import { isElement, normalizeData } from "../functions";
 
 /**
- * Манипуляции с атрибутами у элемента:
- * get (элемент, имя, флаг - вырезать data-) - метод выбирает значение атрибута по его имени, если в поле имени передать 'data' -> будут выбраны только дата атрибуты, если 'all' -> метод вернет значение всех атрибутов
- * has (элемент, имя) - есть ли атрибут у элемента
- * set (элемент, имя, значение) - установка у элемента атрибута или его изменение
- * remove (элемент, имя) - удаляет атрибут у элемента
- * hide(элемент) - скрыть элемент
- * show(элемент) - показать элемент
+ * Утилиты для работы с атрибутами и классами DOM-элементов.
  */
 const Manipulator = {
-	get(element, nameAttribute = 'data', isRemoveDataName = true) {
-		if (!element) {
-			return {}
+	/**
+	 * Получает значение атрибута, data-атрибутов или всех атрибутов.
+	 * @param {Element} element - DOM-элемент.
+	 * @param {string} nameAttribute - Имя атрибута ('data', 'all' или конкретное имя).
+	 * @param {boolean} isRemoveDataName - Убрать префикс 'data-' у data-атрибутов.
+	 * @returns {any|Object} - Значение атрибута или объект атрибутов.
+	 */
+	get(element, nameAttribute = "data", isRemoveDataName = true) {
+		if (!isElement(element)) return {};
+
+		// Все атрибуты
+		if (nameAttribute === "all") {
+			return Array.from(element.attributes).reduce((acc, attr) => {
+				acc[attr.name] = attr.value;
+				return acc;
+			}, {});
 		}
 
-		if (nameAttribute === 'data') {
-			let elmBase = ['data-vg-toggle', 'data-vg-target', 'data-vg-dismiss'],
-				attributes = {};
-
-			let arr = [].filter.call(element.attributes, function (at) {
-				return /^data-/.test(at.name);
-			});
-
-			if (arr.length) {
-				arr.forEach(function (v) {
-					let name = v.name;
-
-					if (!elmBase.includes(name)) {
-						if (isRemoveDataName) name = name.slice(5);
-						attributes[name] = normalizeData(v.value)
+		// Data-атрибуты
+		if (nameAttribute === "data") {
+			const baseKeys = new Set(['data-vg-toggle', 'data-vg-target', 'data-vg-dismiss', 'data-vg-loaded']);
+			const dataAttrs = {};
+
+			Array.from(element.attributes)
+				.filter(attr => attr.name.startsWith('data-'))
+				.forEach(attr => {
+					if (!baseKeys.has(attr.name)) {
+						const key = isRemoveDataName ? attr.name.slice(5) : attr.name;
+						dataAttrs[key] = normalizeData(attr.value);
 					}
 				});
-			}
 
-			return attributes;
-		} else if (nameAttribute === 'all') {
-			return element.getAttributeNames().reduce((acc, name) => {
-				return {...acc, [name]: element.getAttribute(name)};
-			}, {});
-		} else {
-			return element.getAttribute(nameAttribute);
+			return dataAttrs;
 		}
+
+		// Конкретный атрибут
+		return element.getAttribute(nameAttribute);
 	},
 
+	/**
+	 * Проверяет наличие атрибута у элемента.
+	 * @param {Element} element - DOM-элемент.
+	 * @param {string} nameAttribute - Имя атрибута.
+	 * @returns {boolean}
+	 */
 	has(element, nameAttribute) {
-		return element.hasAttribute(nameAttribute);
+		return isElement(element) && element.hasAttribute(nameAttribute);
 	},
 
+	/**
+	 * Устанавливает атрибут элементу.
+	 * @param {Element} element - DOM-элемент.
+	 * @param {string} name - Имя атрибута.
+	 * @param {string} value - Значение атрибута.
+	 */
 	set(element, name, value) {
 		if (isElement(element) && name) {
 			element.setAttribute(name, value);
 		}
 	},
 
+	/**
+	 * Удаляет атрибут у элемента.
+	 * @param {Element} element - DOM-элемент.
+	 * @param {string} nameAttribute - Имя атрибута.
+	 */
 	remove(element, nameAttribute) {
 		if (isElement(element) && nameAttribute) {
 			element.removeAttribute(nameAttribute);
 		}
 	},
 
-	hide(el) {
-		el.style.display = 'none';
+	/**
+	 * Скрывает элемент.
+	 * @param {Element} element - DOM-элемент.
+	 */
+	hide(element) {
+		if (isElement(element)) {
+			element.style.display = 'none';
+		}
 	},
 
-	show(el, state = 'block') {
-		el.style.display = state;
+	/**
+	 * Отображает элемент.
+	 * @param {Element} element - DOM-элемент.
+	 * @param {string} state - display-значение (по умолчанию 'block').
+	 */
+	show(element, state = 'block') {
+		if (isElement(element)) {
+			element.style.display = state;
+		}
 	},
-}
+};
 
-let Classes = {
+/**
+ * Утилиты для работы с classList элемента.
+ */
+const Classes = {
+	/**
+	 * Удаляет класс(ы) у элемента.
+	 * @param {Element} element - DOM-элемент.
+	 * @param {string|string[]} className - Класс или массив классов.
+	 */
 	remove(element, className) {
-		if (className && element) {
-			if (typeof className === 'string') {
-				className = className.split(' ');
-			}
+		if (!isElement(element) || !className) return;
 
-			element.classList.remove(...className);
-		}
+		const classes = Array.isArray(className) ? className : className.split(' ').filter(Boolean);
+		element.classList.remove(...classes);
 	},
 
+	/**
+	 * Добавляет класс(ы) к элементу.
+	 * @param {Element} element - DOM-элемент.
+	 * @param {string|string[]} className - Класс или массив классов.
+	 * @param {boolean} isString - Если true — возвращает строку вместо применения.
+	 * @returns {string|undefined} - Строка с классами (если isString=true).
+	 */
 	add(element, className, isString = false) {
-		if (className) {
-			if (typeof className === 'string') {
-				className = className.split(' ');
-			}
-
-			if (isString) {
-				return '' + className.join(' ');
-			}
-
-			if (element) {
-				element.classList.add(...className);
-			}
+		if (!className) return;
+
+		const classes = Array.isArray(className) ? className : className.split(' ').filter(Boolean);
+
+		if (isString) {
+			return classes.join(' ');
+		}
+
+		if (isElement(element)) {
+			element.classList.add(...classes);
+		}
+	},
+
+	/**
+	 * Переключает класс у элемента.
+	 * @param {Element} element - DOM-элемент.
+	 * @param {string} className - Имя класса.
+	 * @param {boolean} condition - Условие переключения.
+	 */
+	toggle(element, className, condition = true) {
+		if (isElement(element) && className) {
+			element.classList.toggle(className, !!condition);
 		}
-	}
-}
+	},
+
+	/**
+	 * Заменяет один класс на другой.
+	 * @param {Element} element - DOM-элемент.
+	 * @param {string} oldClass - Старый класс.
+	 * @param {string} newClass - Новый класс.
+	 */
+	replace(element, oldClass, newClass) {
+		if (isElement(element) && oldClass && newClass) {
+			element.classList.replace(oldClass, newClass);
+		}
+	},
+
+	/**
+	 * Проверяет наличие класса у элемента.
+	 * @param {Element} element - DOM-элемент.
+	 * @param {string} className - Имя класса.
+	 * @returns {boolean} - Возвращает true, если элемент содержит указанный класс.
+	 */
+	has(element, className) {
+		return isElement(element) && element.classList.contains(className);
+	},
+};
 
-export {Manipulator, Classes}
+export { Manipulator, Classes };

package/app/utils/js/dom/selectors.js

@@ -1,105 +1,180 @@
 /**
- * Работа с DOM
- * @param selector
- * @returns {*}
+ * Утилиты для работы с DOM-селекторами
+ * Поддержка data-атрибутов, href и CSS-экранирование
  */
-import {isElement} from "../functions";
 
-const parseSelector = selector => {
-	if (selector && window.CSS && window.CSS.escape) {
-		selector = selector.replace(/#([^\s"#']+)/g, (match, id) => `#${CSS.escape(id)}`)
-	}
-
-	return selector
-}
+import { isElement } from '../functions';
 
-const getSelector = element => {
-	let selector = element.getAttribute('data-vg-target');
-
-	if (!selector || selector === '#') {
-		let hrefAttribute = element.getAttribute('href');
-		if (!hrefAttribute || (!hrefAttribute.includes('#') && !hrefAttribute.startsWith('.'))) {
-			return null;
-		}
+/**
+ * Экранирует ID в CSS-селекторах, если поддерживается браузером
+ * @param {string} id
+ * @returns {string}
+ */
+const escapeId = (id) => {
+	if (id && window.CSS?.escape) {
+		return CSS.escape(id);
+	}
+	// Резервное экранирование для старых браузеров
+	return id.replace(/([:.#[]])/g, '\\$1');
+};
 
-		if (hrefAttribute.includes('#') && !hrefAttribute.startsWith('#')) {
-			hrefAttribute = `#${hrefAttribute.split('#')[1]}`;
-		}
+/**
+ * Извлекает селектор из элемента через data-атрибут или href
+ * @param {Element} element
+ * @returns {string|null}
+ */
+const getSelector = (element) => {
+	const dataTarget = element.getAttribute('data-vg-target');
+	if (dataTarget && dataTarget !== '#') {
+		return dataTarget.trim();
+	}
 
-		selector = hrefAttribute && hrefAttribute !== '#' ? hrefAttribute.trim() : null;
+	const href = element.getAttribute('href');
+	if (!href || (!href.includes('#') && !href.startsWith('.'))) {
+		return null;
 	}
 
-	return selector ? selector.split(',').map(sel => parseSelector(sel)).join(',') : null;
-}
+	const selector = href.includes('#') && !href.startsWith('#')
+		? `#${href.split('#')[1]}`
+		: href;
 
+	return selector !== '#' ? selector.trim() : null;
+};
+
+/**
+ * Основной объект для работы с селекторами
+ */
 const Selectors = {
-	find(selector, element = document.documentElement) {
+	/**
+	 * Находит один элемент по селектору или возвращает сам элемент
+	 * @param {string|Element} selector
+	 * @param {Element} [container=document.documentElement]
+	 * @returns {Element|null}
+	 */
+	find(selector, container = document.documentElement) {
 		if (isElement(selector)) {
 			return selector;
-		} else {
-			return Element.prototype.querySelector.call(element, selector);
+		}
+		try {
+			return container.querySelector(selector);
+		} catch (e) {
+			console.warn('Invalid selector:', selector, e);
+			return null;
+		}
+	},
+
+	/**
+	 * Находит элемент по ID с экранированием
+	 * @param {string} id
+	 * @param {Element} [container=document]
+	 * @returns {Element|null}
+	 */
+	findID(id, container = document) {
+		try {
+			const escaped = escapeId(id);
+			return container.getElementById(escaped) || container.querySelector(`#${escaped}`);
+		} catch (e) {
+			console.warn('Invalid ID in findID:', id, e);
+			return null;
 		}
 	},
 
+	/**
+	 * Находит все элементы по селектору
+	 * @param {string} selector
+	 * @param {Element} [container=document.documentElement]
+	 * @returns {Element[]}
+	 */
 	findAll(selector, container = document.documentElement) {
-		return [].concat(...Element.prototype.querySelectorAll.call(container, selector));
+		try {
+			return Array.from(container.querySelectorAll(selector));
+		} catch (e) {
+			console.warn('Invalid selector in findAll:', selector, e);
+			return [];
+		}
 	},
 
+	/**
+	 * Получает валидный селектор из элемента
+	 * @param {Element} element
+	 * @returns {string|null}
+	 */
 	getSelectorFromElement(element) {
 		const selector = getSelector(element);
-		if (selector) return Selectors.find(selector) ? selector : null
-		return null
+		return selector && this.find(selector) ? selector : null;
 	},
 
+	/**
+	 * Получает целевой элемент по селектору из элемента
+	 * @param {Element} element
+	 * @returns {Element|null}
+	 */
 	getElementFromSelector(element) {
 		const selector = getSelector(element);
-		return selector ? Selectors.find(selector) : null
+		return selector ? this.find(selector) : null;
 	},
 
+	/**
+	 * Получает все целевые элементы (для множественного выбора)
+	 * @param {Element} element
+	 * @returns {Element[]}
+	 */
 	getMultipleElementsFromSelector(element) {
 		const selector = getSelector(element);
-		return selector ? Selectors.findAll(selector) : []
+		return selector ? this.findAll(selector) : [];
 	},
 
+	/**
+	 * Находит всех родителей, соответствующих селектору
+	 * @param {Element} element
+	 * @param {string} selector
+	 * @returns {Element[]}
+	 */
 	parents(element, selector) {
-		const parents = []
-		let ancestor = element.parentNode.closest(selector)
+		const parents = [];
+		let parent = element.parentElement?.closest(selector);
 
-		while (ancestor) {
-			parents.push(ancestor)
-			ancestor = ancestor.parentNode.closest(selector)
+		while (parent) {
+			parents.push(parent);
+			parent = parent.parentElement?.closest(selector);
 		}
 
-		return parents
+		return parents;
 	},
 
+	/**
+	 * Находит следующий соседний элемент, соответствующий селектору
+	 * @param {Element} element
+	 * @param {string} selector
+	 * @returns {Element[]}
+	 */
 	next(element, selector) {
-		let next = element.nextElementSibling
-
-		while (next) {
-			if (next.matches(selector)) {
-				return [next]
+		let sibling = element.nextElementSibling;
+		while (sibling) {
+			if (sibling.matches(selector)) {
+				return [sibling];
 			}
-
-			next = next.nextElementSibling;
+			sibling = sibling.nextElementSibling;
 		}
-
-		return []
+		return [];
 	},
 
+	/**
+	 * Находит предыдущий соседний элемент, соответствующий селектору
+	 * @param {Element} element
+	 * @param {string} selector
+	 * @returns {Element[]}
+	 */
 	prev(element, selector) {
-		let previous = element.previousElementSibling
-
-		while (previous) {
-			if (previous.matches(selector)) {
-				return [previous]
+		let sibling = element.previousElementSibling;
+		while (sibling) {
+			if (sibling.matches(selector)) {
+				return [sibling];
 			}
-
-			previous = previous.previousElementSibling
+			sibling = sibling.previousElementSibling;
 		}
-
-		return []
-	}
-}
+		return [];
+	},
+};
 
 export default Selectors;