@cocreate/events 1.25.0 → 1.27.0

package/CHANGELOG.md

@@ -1,3 +1,34 @@
+# [1.27.0](https://github.com/CoCreate-app/CoCreate-events/compare/v1.26.0...v1.27.0) (2025-04-11)
+
+
+### Bug Fixes
+
+* console.log() ([2174c1e](https://github.com/CoCreate-app/CoCreate-events/commit/2174c1e0a9fa0b777e073de30aed4f29ec59f8f6))
+* formating ([58b8550](https://github.com/CoCreate-app/CoCreate-events/commit/58b8550c96c30153a94e24ce93b39914eed2fba3))
+* removed console.log() ([f44cb8f](https://github.com/CoCreate-app/CoCreate-events/commit/f44cb8fdfec3b3b1787e830cd1b3bab3a1ef3fa5))
+* renamed prefix-delay to prefix-setTimout ([84e511a](https://github.com/CoCreate-app/CoCreate-events/commit/84e511af8bcb521e5e8e7bc481a6f202fca04930))
+* Selctor === "" returning null ([c49bc35](https://github.com/CoCreate-app/CoCreate-events/commit/c49bc35cd8a8ff9232229ee64d71bc4e32d3d6fc))
+* selectors ([ccb2dee](https://github.com/CoCreate-app/CoCreate-events/commit/ccb2dee2a682bcdf601047f0783c5c44ebcfe5ed))
+* update observer obseve param to type and and attributeName to attributeFilter ([44372d4](https://github.com/CoCreate-app/CoCreate-events/commit/44372d4ceba70360507cd0c94df43f4ee877be99))
+
+
+### Features
+
+* support "*-preventDefault", "*-stopPropagation", "*-stopImmediatePropagation" ([5b10663](https://github.com/CoCreate-app/CoCreate-events/commit/5b106633f425001ca6ec7d65dc0bd00ad6368b64))
+
+# [1.26.0](https://github.com/CoCreate-app/CoCreate-events/compare/v1.25.0...v1.26.0) (2025-01-18)
+
+
+### Bug Fixes
+
+* removed ovserver from local storage ([b07e5f7](https://github.com/CoCreate-app/CoCreate-events/commit/b07e5f7ef2d6f8a39dc77a56a63f078d0576f85a))
+
+
+### Features
+
+* added focus ([0b81f3e](https://github.com/CoCreate-app/CoCreate-events/commit/0b81f3edff2c254281cb5a1028d2396b3b86e9e8))
+* intersection handling ([dea8872](https://github.com/CoCreate-app/CoCreate-events/commit/dea887246eb0489022450fd135418dc42767fd59))
+
 # [1.25.0](https://github.com/CoCreate-app/CoCreate-events/compare/v1.24.0...v1.25.0) (2024-12-14)
 
 

package/demo/set-value.html

@@ -1,31 +1,27 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <title>Value | CoCreateJS</title>
+	<head>
+		<title>Value | CoCreateJS</title>
 
-        <!-- CoCreate Favicon -->
-        <link
-            rel="icon"
-            type="image/png"
-            sizes="32x32"
-            href="../assets/favicon.ico" />
-        <link rel="manifest" href="/manifest.webmanifest" />
-    </head>
-    <body>
-        <div click-selector="#testing" click-value="hello, bye" click-key="ty">
-            <span id="testing" class="{{ty}}">other content</span>
-        </div>
+		<!-- CoCreate Favicon -->
+		<link
+			rel="icon"
+			type="image/png"
+			sizes="32x32"
+			href="../assets/favicon.ico" />
+		<link rel="manifest" href="/manifest.webmanifest" />
+	</head>
+	<body>
+		<div click-selector="#testing" click-value="hello, bye" click-key="ty">
+			<span id="testing" class="{{ty}}">other content</span>
+		</div>
 
-        <form realtime="false">
-            <input
-                input-selector="#testing2"
-                input-attribute="value"
-                value-type="array" />
+		<form>
+			<input input-selector="#testing2" input-attribute="value" />
+			<input id="testing2" />
+		</form>
 
-            <input id="testing2" class="{{ty}}" />
-        </form>
-
-        <!-- <script src="../../../CoCreateJS/dist/CoCreate.js"></script> -->
-        <script src="https://CoCreate.app/dist/CoCreate.js"></script>
-    </body>
+		<!-- <script src="../../../CoCreateJS/dist/CoCreate.js"></script> -->
+		<script src="https://CoCreate.app/dist/CoCreate.js"></script>
+	</body>
 </html>

package/package.json

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

package/src/index.js

@@ -40,8 +40,10 @@ const CoCreateEvents = {
 			this.initPrefix("selected", ["click"]);
 			this.initPrefix("onload", ["onload"]);
 			this.initPrefix("observe", ["observer"]);
+			this.initPrefix("intersection", ["intersection"]);
 			this.initPrefix("resize", ["onload", "resize"]);
-			this.initPrefix("localstorage", ["onload", "observer"]);
+			this.initPrefix("localstorage", ["onload"]);
+			this.initPrefix("focus", ["focus"]);
 		}
 
 		let customEventEls = document.querySelectorAll("[event-name]");
@@ -61,7 +63,7 @@ const CoCreateEvents = {
 		const self = this;
 		observer.init({
 			name: "CoCreateEventName",
-			observe: ["addedNodes"],
+			types: ["addedNodes"],
 			selector: `[event-name]`,
 			callback: function (mutation) {
 				let name = mutation.target.getAttribute("event-name");
@@ -87,38 +89,33 @@ const CoCreateEvents = {
 			}
 		});
 
-		let selector = `[${prefix}], [${prefix}-key], [${prefix}-attribute], [${prefix}-value], [${prefix}-action], [${prefix}-selector], [${prefix}-closest], [${prefix}-parent], [${prefix}-next], [${prefix}-previous]`;
+		let selector = `[${prefix}], [${prefix}-key], [${prefix}-attribute], [${prefix}-value], [${prefix}-action], [${prefix}-selector], [${prefix}-closest], [${prefix}-parent], [${prefix}-next], [${prefix}-previous], [${prefix}-preventDefault], [${prefix}-stopPropagation], [${prefix}-stopImmediatePropagation]`;
 
 		observer.init({
 			name: "CoCreateEventattributes",
-			observe: ["attributes", "addedNodes"],
-			attributeName: [`${prefix}-events`],
-			selector: selector,
+			types: ["attributes", "addedNodes"],
+			attributeFilter: [
+				`${prefix}-key`,
+				`${prefix}-value`,
+				`${prefix}-selector`,
+				`${prefix}-closest`,
+				`${prefix}-parent`,
+				`${prefix}-next`,
+				`${prefix}-previous`,
+				`${prefix}-events`,
+				`${prefix}-bubbles`,
+				`${prefix}-cancelable`,
+				`${prefix}-composed`,
+				`${prefix}-preventDefault`,
+				`${prefix}-stopPropagation`,
+				`${prefix}-stopImmediatePropagation`
+			],
+			selector,
 			callback: function (mutation) {
 				self.initElements([mutation.target], prefix, events);
 			}
 		});
 
-		if (events && events.includes("observer")) {
-			observer.init({
-				name: "observerAttributes",
-				observe: ["attributes"],
-				attributeName: [
-					`${prefix}-key`,
-					`${prefix}-value`,
-					`${prefix}-selector`,
-					`${prefix}-closest`,
-					`${prefix}-parent`,
-					`${prefix}-next`,
-					`${prefix}-previous`
-				],
-				callback: function (mutation) {
-					// remove previous observer
-					self.initElements([mutation.target], prefix, events);
-				}
-			});
-		}
-
 		let elements = document.querySelectorAll(selector);
 		this.initElements(elements, prefix, events);
 	},
@@ -134,7 +131,9 @@ const CoCreateEvents = {
 				this.elements.set(el, prefixes);
 			} else if (!prefixes[prefix]) {
 				prefixes[prefix] = { events };
-			} else isEventable = false;
+			} else {
+				isEventable = false;
+			}
 
 			let customEvents = el.getAttribute(`${prefix}-events`);
 			if (customEvents) {
@@ -149,8 +148,25 @@ const CoCreateEvents = {
 				prefixes[prefix].events = events;
 				isEventable = true;
 			}
+
 			if (!events || !isEventable) continue;
-			if (events.includes("onload")) this.__updateElements(el, prefix);
+
+			// let originalSelector = ""; // i think we need to extract the selector and remove the operators
+			// if (originalSelector) {
+			// 	observer.init({
+			// 		types: ["addedNodes"],
+			// 		callback: function (mutation) {
+			// 			const els = el.queryElements();
+			// 			if (els && els.includes(mutation.target)) {
+			// 				self.__updateElements();
+			// 			}
+			// 		}
+			// 	});
+			// }
+
+			if (events.includes("onload")) {
+				this.__updateElements(el, prefix);
+			}
 
 			if (events.includes("observer")) {
 				let target;
@@ -172,7 +188,7 @@ const CoCreateEvents = {
 					}
 				}
 
-				let attributeName = (
+				let attributeFilter = (
 					el.getAttribute(`${prefix}-attributes`) || ""
 				)
 					.split(/\s*,\s*/)
@@ -185,7 +201,7 @@ const CoCreateEvents = {
 					.filter((item) => item);
 
 				let observerConfig = {
-					observe: observeAttribute,
+					types: observeAttribute,
 					callback: function (mutation) {
 						self.__updateElements(el, prefix, mutation.target);
 					}
@@ -195,20 +211,19 @@ const CoCreateEvents = {
 					if (
 						target &&
 						!observeAttribute.length &&
-						!attributeName.length
+						!attributeFilter.length
 					) {
-						observerConfig.observe.push("addedNodes");
+						observerConfig.types.push("addedNodes");
 					}
 					observerConfig.target = target;
 				}
 
-				if (attributeName.length) {
-					observerConfig.observe.push("attributes");
-					observerConfig.attributeName = attributeName;
+				if (attributeFilter.length) {
+					observerConfig.types.push("attributes");
+					observerConfig.attributeFilter = attributeFilter;
 				}
 
-				if (observerConfig.observe.length)
-					observer.init(observerConfig);
+				if (observerConfig.types.length) observer.init(observerConfig);
 			}
 
 			if (events.includes("resize")) {
@@ -221,19 +236,98 @@ const CoCreateEvents = {
 				resizeObserver.observe(el);
 			}
 
+			if (events.includes("intersection")) {
+				const rootSelector = el.getAttribute(`${prefix}-root`);
+				const rootMargin =
+					el.getAttribute(`${prefix}-root-margin`) || "0px";
+				const threshold = el.getAttribute(`${prefix}-threshold`)
+					? JSON.parse(el.getAttribute(`${prefix}-threshold`))
+					: [0];
+				const trigger = el.getAttribute(`${prefix}-trigger`) || "both"; // Default to "both"
+
+				// Resolve root from the selector or use null for viewport
+				const root = rootSelector
+					? document.querySelector(rootSelector)
+					: null;
+
+				// Validate and filter threshold values
+				const validThreshold = Array.isArray(threshold)
+					? threshold.filter((value) => value >= 0 && value <= 1)
+					: [0];
+
+				// Create IntersectionObserver
+				const intersectionObserver = new IntersectionObserver(
+					(entries) => {
+						entries.forEach((entry) => {
+							const isVisible = entry.isIntersecting;
+
+							// Determine if __updateElements should be called based on trigger
+							// if (
+							// 	(trigger === "visible" && isVisible) ||
+							// 	(trigger === "not-visible" && !isVisible) ||
+							// 	trigger === "both"
+							// ) {
+							if (isVisible) {
+								// Set an attribute to reflect visibility state
+								el.setAttribute(
+									`${prefix}-is-visible`,
+									isVisible ? "true" : "false"
+								);
+
+								// Call __updateElements
+								self.__updateElements(
+									el,
+									prefix
+									// {
+									// 	isVisible,
+									// 	intersectionRatio:
+									// 		entry.intersectionRatio
+									// }
+								);
+							}
+						});
+					},
+					{ root, rootMargin, threshold: validThreshold }
+				);
+
+				intersectionObserver.observe(el);
+			}
+
 			for (let i = 0; i < events.length; i++) {
+				// Skip specific lifecycle events
 				if (
-					events[i] !== "onload" &&
-					events[i] !== "observer" &&
-					events[i] !== "resize"
+					events[i] === "onload" ||
+					events[i] === "observer" ||
+					events[i] === "intersection" ||
+					events[i] === "resize"
 				) {
-					el.removeEventListener(events[i], eventFunction);
-					el.addEventListener(events[i], eventFunction);
+					continue;
+				}
+
+				// Remove any existing event listener
+				el.removeEventListener(events[i], eventFunction);
+
+				// Initialize an empty options object
+				const options = {};
+
+				// Attributes to check dynamically
+				const attributes = ["bubbles", "cancelable", "composed"];
+
+				for (let j = 0; j < attributes.length; j++) {
+					const attrValue = el.getAttribute(
+						`${events[i]}-${attributes[j]}`
+					);
+					if (attrValue !== null) {
+						options[attributes[j]] = attrValue !== "false";
+					}
 				}
+
+				// Add the new event listener with the dynamically constructed options
+				el.addEventListener(events[i], eventFunction, options);
 			}
 
 			function eventFunction(event) {
-				// TODO: apply debounce
+				// TODO: apply debounce.
 				// let debounce;
 				// clearTimeout(debounce);
 				// debounce = setTimeout(function() {
@@ -251,6 +345,25 @@ const CoCreateEvents = {
 					if (attribute.includes(prefix)) return;
 					// if (target.closest(`[actions*="${prefix}"]`))
 					// 	return;
+
+					// Define the lifecycle attributes (matching JavaScript event methods)
+					const lifecycleAttributes = [
+						"preventDefault",
+						"stopPropagation",
+						"stopImmediatePropagation"
+					];
+
+					// Handle lifecycle attributes dynamically
+					for (let i = 0; i < lifecycleAttributes.length; i++) {
+						const attr = `${prefix}-${lifecycleAttributes[i]}`; // Add prefix dynamically
+						const attrValue = target.getAttribute(attr); // Directly get the attribute value
+
+						// If attribute exists and is not explicitly "false", apply the corresponding event method
+						if (attrValue !== null && attrValue !== "false") {
+							event[lifecycleAttributes[i]]();
+						}
+					}
+
 					self.__updateElements(
 						target,
 						prefix,
@@ -292,7 +405,26 @@ const CoCreateEvents = {
 		}
 
 		for (let element of elements) {
-			let delay = element.getAttribute(`${prefix}-delay`);
+			// const requestAnimationFrameAttr = element.getAttribute(
+			// 	`${prefix}-requestAnimationFrame`
+			// );
+
+			// if (
+			// 	requestAnimationFrameAttr !== null &&
+			// 	requestAnimationFrameAttr !== "false"
+			// ) {
+			// 	// Double requestAnimationFrame
+			// 	await new Promise((resolve) => {
+			// 		requestAnimationFrame(() => {
+			// 			requestAnimationFrame(() => {
+			// 				resolve();
+			// 			});
+			// 		});
+			// 	});
+			// }
+
+			// TODO: Handle setInterval logic
+			let delay = element.getAttribute(`${prefix}-setTimeout`);
 
 			if (delay) {
 				delay = parseInt(delay, 10) || 0;
@@ -382,13 +514,15 @@ const CoCreateEvents = {
 			let elseCondition = element.getAttribute(`${prefix}-else`);
 
 			let ifValue = element.getAttribute(`${prefix}-if-value`);
-			if (!ifValue && ifValue !== "")
-				ifValue = (await element.getValue()) || values;
-			//values // await element.getValue()
-			else if (ifValue || ifValue === "") ifValue = [ifValue];
-			else ifValue = values;
-
-			if (!Array.isArray(ifValue)) ifValue = [ifValue];
+			if (ifCondition) {
+				if (!ifValue && ifValue !== "")
+					ifValue = (await element.getValue()) || values;
+				//values // await element.getValue()
+				else if (ifValue || ifValue === "") ifValue = [ifValue];
+				else ifValue = values;
+
+				if (!Array.isArray(ifValue)) ifValue = [ifValue];
+			}
 
 			//TODO: improved resize toggling of values
 			// let hasCondition = this.elements2.get(element)
@@ -436,7 +570,11 @@ const CoCreateEvents = {
 				prefix,
 				selector: params
 			});
-			if (targetElements === false) targetElements = [element];
+
+			if (targetElements === false) {
+				targetElements = [element];
+			}
+
 			let action = element.getAttribute(`${prefix}-action`);
 			for (let i = 0; i < targetElements.length; i++) {
 				if (action) {
@@ -471,7 +609,7 @@ const CoCreateEvents = {
 			}
 		}
 
-		document.dispatchEvent(
+		el.dispatchEvent(
 			new CustomEvent(`${prefix}End`, {
 				detail: {}
 			})
@@ -516,7 +654,7 @@ const CoCreateEvents = {
 			// let value = values[0]
 			replaceKey(prefix, element, key, values);
 		} else {
-			// TODo: if html in iframe
+			// TODO: if html in iframe
 			let domTextEditor;
 			if (element.parentElement) {
 				domTextEditor =
@@ -579,7 +717,7 @@ const CoCreateEvents = {
 						element.classList.add(newValue);
 					}
 				} else if (attrName === "value") {
-					element.setValue(newValue);
+					element.setValue(newValue, false);
 				} else if (
 					["$click", "$focus", "$blur", "$save", "$read"].includes(
 						attrName
@@ -822,6 +960,160 @@ function parseNumberCondition(condition) {
 		: condition;
 }
 
+// Helper function for delay using Promises
+const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+/**
+ * Waits for a specific element property to meet a readiness condition,
+ * based on retry attributes defined on the element.
+ * Incorporates optional exponential backoff for retry delays.
+ * Returns a Promise that resolves to true if the condition is met within
+ * the allowed attempts, and false otherwise.
+ *
+ * @param {HTMLElement} element The element with the onload-retry-* attributes.
+ * @returns {Promise<boolean>} A Promise resolving to true if ready, false if timed out.
+ */
+async function checkElementReadinessWithBackoff(element) {
+	const propertyName = element.getAttribute("onload-retry-property");
+
+	if (!propertyName) {
+		return true; // No retry needed
+	}
+
+	// --- Retry Parameters ---
+	const maxAttempts =
+		parseInt(element.getAttribute("onload-retry-attempts") || "3", 10) || 3;
+	// Initial delay (used for the first wait and as the base for backoff)
+	const initialDelayMs =
+		parseInt(element.getAttribute("onload-retry-delay") || "100", 10) ||
+		100;
+	// Exponential backoff factor (e.g., 2 for doubling). <= 1 means fixed delay.
+	// Default to 1 (no backoff) if missing or invalid.
+	const backoffFactor =
+		parseFloat(
+			element.getAttribute("onload-retry-backoff-factor") || "1"
+		) || 1;
+	// Optional maximum delay cap. Use Infinity if missing, invalid, or <= 0.
+	const maxDelayMs = parseInt(
+		element.getAttribute("onload-retry-max-delay") || "0",
+		10
+	);
+	const effectiveMaxDelay =
+		maxDelayMs && maxDelayMs > 0 ? maxDelayMs : Infinity;
+
+	console.log(
+		`Checking readiness for property "${propertyName}" on element ${
+			element.id || ""
+		}. Max attempts: ${maxAttempts}, Initial Delay: ${initialDelayMs}ms, Backoff Factor: ${backoffFactor}, Max Delay: ${
+			effectiveMaxDelay === Infinity ? "None" : effectiveMaxDelay + "ms"
+		}.`
+	);
+
+	// Initialize the delay to be used for the *first* wait.
+	let currentDelay = initialDelayMs;
+
+	for (let attempt = 1; attempt <= maxAttempts; attempt++) {
+		console.log(
+			`Attempt ${attempt}/${maxAttempts}: Checking "${propertyName}"...`
+		);
+		try {
+			const propertyValue = element[propertyName];
+			// Example check: Adjust condition as needed
+			if (propertyValue !== undefined && propertyValue > 0) {
+				console.log(
+					`Property "${propertyName}" ready on attempt ${attempt}. Value: ${propertyValue}`
+				);
+				return true; // Condition met
+			}
+		} catch (error) {
+			console.error(
+				`Error accessing property "${propertyName}" on attempt ${attempt}:`,
+				error
+			);
+		}
+
+		// If condition not met and more attempts remain:
+		if (attempt < maxAttempts) {
+			// Determine the actual delay for this wait, applying the cap
+			const delayForThisWait = Math.min(currentDelay, effectiveMaxDelay);
+
+			console.log(
+				`Waiting ${Math.round(
+					delayForThisWait
+				)}ms before next attempt...`
+			);
+			await delay(delayForThisWait);
+
+			// Calculate the delay for the *next* potential wait, only if backoff is active
+			if (backoffFactor > 1) {
+				currentDelay = currentDelay * backoffFactor;
+				// Note: We apply the cap just before the actual delay,
+				// but the base 'currentDelay' keeps growing exponentially.
+				// Alternatively, you could cap 'currentDelay' itself here:
+				// currentDelay = Math.min(currentDelay * backoffFactor, effectiveMaxDelay);
+				// Let's stick to capping just before delay() for now.
+			}
+			// If backoffFactor <= 1, currentDelay remains initialDelayMs (implicitly handled by initialization)
+		}
+	}
+
+	// If loop finishes without condition being met
+	console.warn(
+		`Readiness check failed for property "${propertyName}" on element ${
+			element.id || ""
+		} after ${maxAttempts} attempts.`
+	);
+	return false; // Timed out
+}
+
+// --- Example Usage (calling code doesn't change) ---
+
+async function handleElementProcessingWithBackoff(element) {
+	// Call the function that now supports backoff
+	const isReady = await checkElementReadinessWithBackoff(element);
+
+	if (isReady) {
+		console.log(
+			`Element ${element.id || ""} is ready. Proceeding with actions.`
+		);
+		// --- Execute subsequent actions ---
+		if (element.hasAttribute("onload-attribute")) {
+			/* ... */
+		}
+		if (element.hasAttribute("onload-next")) {
+			/* ... */
+		}
+	} else {
+		console.warn(
+			`Skipping actions for element ${
+				element.id || ""
+			} because readiness check failed.`
+		);
+	}
+}
+
+// --- Example Elements ---
+
+// With Backoff (Delays: 100, 200, 400, 800 - capped)
+// <span id="elem1" onload-retry-property="scrollWidth"
+//   onload-retry-attempts="5" onload-retry-delay="100"
+//   onload-retry-backoff-factor="2" onload-retry-max-delay="500">
+//   Content 1
+// </span>
+// Waits would be: 100ms, 200ms, 400ms, 500ms (capped)
+
+// No Backoff (factor missing/invalid/<=1)
+// <span id="elem2" onload-retry-property="clientHeight"
+//   onload-retry-attempts="4" onload-retry-delay="300">
+//   Content 2
+// </span>
+// Waits would be: 300ms, 300ms, 300ms
+
+// const element1 = document.getElementById('elem1');
+// if (element1) handleElementProcessingWithBackoff(element1);
+// const element2 = document.getElementById('elem2');
+// if (element2) handleElementProcessingWithBackoff(element2);
+
 CoCreateEvents.init();
 
 export default CoCreateEvents;