@cocreate/utils 1.37.3 → 1.38.0

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+# [1.38.0](https://github.com/CoCreate-app/CoCreate-utils/compare/v1.37.3...v1.38.0) (2025-04-11)
+
+
+### Bug Fixes
+
+* query elements ([663eec4](https://github.com/CoCreate-app/CoCreate-utils/commit/663eec46c92716c298e45cd4fa6ec48be616a9a1))
+* Selector === "" retuning null ([e8fd9fb](https://github.com/CoCreate-app/CoCreate-utils/commit/e8fd9fb726f78477e9ea5a15e9bf08097bc9250f))
+* special selector split ([94dd267](https://github.com/CoCreate-app/CoCreate-utils/commit/94dd267d4028945c9813c4bc7be33bcc7d0494d3))
+* variable typo selector ([fe101f5](https://github.com/CoCreate-app/CoCreate-utils/commit/fe101f5a9c728d054466b21524cfc2b0ece07e8a))
+
+
+### Features
+
+* improve queryElements() ([0e05425](https://github.com/CoCreate-app/CoCreate-utils/commit/0e05425fc68394004ef2c78f3bd2004447b2233a))
+* prefix-document to query document ([21644d9](https://github.com/CoCreate-app/CoCreate-utils/commit/21644d940e1f20530f5594b751d596b4aa431fc4))
+
 ## [1.37.3](https://github.com/CoCreate-app/CoCreate-utils/compare/v1.37.2...v1.37.3) (2024-12-22)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/utils",
-  "version": "1.37.3",
+  "version": "1.38.0",
   "description": "A simple utils component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.",
   "keywords": [
     "utils",

package/src/index.js

@@ -540,131 +540,142 @@
 		return path;
 	}
 
-	function queryElements({ element, prefix, type, selector }) {
-		let elements = new Map();
-		if (!element) element = document;
+	const queryTypes = [
+		"selector",
+		"closest",
+		"parent",
+		"next",
+		"previous",
+		"document",
+		"frame",
+		"top"
+	];
+
+	const queryTypesRegex = new RegExp(`\\$(?:${queryTypes.join("|")})\\b`); // Find the *first* match
+
+	function queryElements({ element = document, prefix, type, selector }) {
+		let elements = new Set();
+
 		let hasAttribute = false;
 
-		if (selector) {
-			if (!type) type = ["selector"];
-			else if (!Array.isArray(type)) type = [type];
-		} else type = ["selector", "closest", "parent", "next", "previous"];
+		if (!selector) {
+			if (!prefix && element.nodeType === 1) {
+				for (let attr of element.attributes) {
+					let parts = attr.name.split("-");
+					if (parts.length < 2) continue;
+
+					let possibleType = parts.pop();
+					if (queryTypes.includes(possibleType)) {
+						type = [possibleType];
+						prefix = parts.join("-");
+						break;
+					}
+				}
+				if (!prefix) return false;
+			} else if (!type && element.nodeType === 1) {
+				for (let i = 0; i < queryTypes.length; i++) {
+					if (element.hasAttribute(`${prefix}-${queryTypes[i]}`)) {
+						type = [queryTypes[i]];
+					}
+				}
+			}
+		}
+
+		if (!type) type = selector ? ["selector"] : queryTypes;
+
+		if (!Array.isArray(type)) type = [type];
 
 		for (let i = 0; i < type.length; i++) {
-			let Selector = selector;
-			if (!Selector && element.nodeType !== 9) {
+			if (!selector && element.nodeType !== 9) {
 				let name = prefix + "-" + type[i];
 				if (!element.hasAttribute(name)) continue;
 				hasAttribute = true;
-				Selector = element.getAttribute(name);
+				selector = element.getAttribute(name);
+				type = [type[i]];
+			}
+
+			let mainElement = element;
+			if (
+				[
+					"parent",
+					"next",
+					"previous",
+					"document",
+					"frame",
+					"top"
+				].includes(type[i])
+			) {
+				mainElement = queryType(mainElement, type[i]);
 			}
 
-			if (Selector) {
-				let selectors = Selector.split(/,(?![^()]*\))/g);
+			if (!selector) {
+				elements.add(mainElement);
+			} else {
+				let selectors = selector.split(/,(?![^()]*\))/g);
 
 				for (let j = 0; j < selectors.length; j++) {
+					if (!selectors[j]) continue;
+
+					let queriedElement = mainElement;
+
 					if (selectors[j].includes("@")) {
 						selectors[j] = checkMediaQueries(selectors[j]);
 						if (selectors[j] === false) continue;
 					}
 
-					let queriedElement = element;
-					let specialSelectors = selectors[j].split(";");
-					for (let k = 0; k < specialSelectors.length; k++) {
-						// TODO: Support an array of queried elements and branch off to return matches for each
-						// if (!Array.isArray(queriedElement)) {
-						//     queriedElement = [queriedElement]
-						// }
-
-						if (!specialSelectors[k]) continue;
-						if (k === 0) {
-							if (type[i] === "parent")
-								queriedElement = queriedElement.parentElement;
-							else if (type[i] === "next")
-								queriedElement =
-									queriedElement.nextElementSibling;
-							else if (type[i] === "previous")
-								queriedElement =
-									queriedElement.previousElementSibling;
-						} else if (queriedElement.contentDocument) {
-							queriedElement = queriedElement.contentDocument;
-						}
+					if (type[i] === "closest") {
+						let [closestSelector, remainingSelector = ""] =
+							selectors[j].split(/\s+/, 2);
+						queriedElement =
+							queriedElement.closest(closestSelector);
 
-						switch (
-							(specialSelectors[k] = specialSelectors[k].trim())
-						) {
-							case "top":
-								queriedElement = window.top.document;
-								break;
-							case "frame":
-								if (queriedElement.nodeType === 9)
-									queriedElement =
-										queriedElement.window.frameElement;
-								else if (queriedElement.contentDocument)
-									queriedElement =
-										queriedElement.contentDocument;
-								break;
-							case "document":
-								queriedElement = document;
-								break;
-							case "parent":
-								queriedElement = queriedElement.parentElement;
-								break;
-							case "next":
-								queriedElement =
-									queriedElement.nextElementSibling;
-								break;
-							case "previous":
-								queriedElement =
-									queriedElement.previousElementSibling;
-								break;
-							default:
-								if (k === 0 && type[i] === "closest")
-									if (specialSelectors[k].includes(" ")) {
-										let [firstSelector, ...restSelectors] =
-											specialSelectors[k].split(/ (.+)/);
-										queriedElement =
-											queriedElement.closest(
-												firstSelector
-											);
-										if (restSelectors.length > 0) {
-											if (restSelectors[0].endsWith("[]"))
-												queriedElement =
-													queriedElement.querySelectorAll(
-														restSelectors[0].slice(
-															0,
-															-2
-														)
-													);
-											else
-												queriedElement =
-													queriedElement.querySelector(
-														restSelectors[0]
-													);
-										}
-									} else {
-										// If no space, just use the selector with closest
-										queriedElement = queriedElement.closest(
-											specialSelectors[k]
-										);
-									}
-								else if (
-									specialSelectors[k] === "$clickedElement"
-								) {
-									queriedElement =
-										queriedElement.clickedElement;
-								} else if (specialSelectors[k].endsWith("[]"))
-									queriedElement =
-										queriedElement.querySelectorAll(
-											specialSelectors[k].slice(0, -2)
-										);
-								else
-									queriedElement =
-										queriedElement.querySelector(
-											specialSelectors[k]
-										);
+						if (!queriedElement) continue;
+
+						selectors[j] = remainingSelector;
+					}
+
+					let remainingSelector = selectors[j].trim();
+					let match;
+
+					while (
+						(match = queryTypesRegex.exec(remainingSelector)) !==
+						null
+					) {
+						const matchIndex = match.index;
+						const operator = match[0];
+
+						// Process the part before the operator (if any)
+						const part = remainingSelector
+							.substring(0, matchIndex)
+							.trim()
+							.replace(/,$/, "");
+						if (part) {
+							queriedElement = querySelector(
+								queriedElement,
+								part
+							);
+							if (!queriedElement) break;
 						}
+
+						// Process the operator
+						queriedElement = queryType(
+							queriedElement,
+							operator.substring(1)
+						);
 						if (!queriedElement) break;
+
+						// Remove the processed part and operator from the remaining selector
+						remainingSelector = remainingSelector
+							.substring(matchIndex + operator.length)
+							.trim();
+					}
+
+					// Process the remaining part after the last operator (if any)
+					if (remainingSelector) {
+						queriedElement = querySelector(
+							queriedElement,
+							remainingSelector.trim().replace(/,$/, "")
+						);
 					}
 
 					if (
@@ -672,27 +683,66 @@
 						queriedElement instanceof HTMLCollection ||
 						queriedElement instanceof NodeList
 					) {
-						for (let el of queriedElement) elements.set(el, "");
-					} else if (queriedElement) {
-						elements.set(queriedElement, "");
+						for (let el of queriedElement) {
+							if (el instanceof Element) {
+								elements.add(el);
+							}
+						}
+					} else if (queriedElement instanceof Element) {
+						elements.add(queriedElement);
 					}
 				}
-			} else if (Selector === "") {
-				if (type[i] === "parent")
-					elements.set(element.parentElement, "");
-				else if (type[i] === "next")
-					elements.set(element.nextElementSibling, "");
-				else if (type[i] === "previous")
-					elements.set(element.previousElementSibling, "");
 			}
 		}
 
-		if (!hasAttribute && !selector) elements = false;
-		else elements = Array.from(elements.keys());
+		if (!hasAttribute && !selector) {
+			elements = false;
+		} else {
+			elements = Array.from(elements);
+		}
 
 		return elements;
 	}
 
+	function queryType(element, type) {
+		if (!element) return null;
+
+		switch (type) {
+			case "top":
+				return window.top.document;
+			case "frame":
+				// ✅ If element is a document, return the iframe element containing it
+				if (element.nodeType === 9) return window.frameElement;
+				// ✅ If element is an iframe, return it as is
+				return element;
+			case "document":
+				// ✅ If element is a document, return itself, else return `ownerDocument`
+				return element.nodeType === 9 ? element : element.ownerDocument;
+			case "parent":
+				// ✅ If it's a document, return the parent document (if inside an iframe)
+				if (element.nodeType === 9) {
+					return element.defaultView !== window.top
+						? element.defaultView.parent.document
+						: null;
+				}
+				// ✅ Otherwise, return parent element
+				return element.parentElement;
+			case "next":
+				return element.nextElementSibling;
+			case "previous":
+				return element.previousElementSibling;
+			default:
+				return null;
+		}
+	}
+
+	function querySelector(element, selector) {
+		if (!element) return null;
+		return selector.endsWith("[]")
+			? element.querySelectorAll(selector.slice(0, -2))
+			: element.querySelector(selector);
+	}
+
 	const mediaRanges = {
 		xs: [0, 575],
 		sm: [576, 768],