@cocreate/events 1.25.0 → 1.26.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# [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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/events",
-  "version": "1.25.0",
+  "version": "1.26.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]");
@@ -92,33 +94,22 @@ const CoCreateEvents = {
 		observer.init({
 			name: "CoCreateEventattributes",
 			observe: ["attributes", "addedNodes"],
-			attributeName: [`${prefix}-events`],
-			selector: selector,
+			attributeName: [
+				`${prefix}-key`,
+				`${prefix}-value`,
+				`${prefix}-selector`,
+				`${prefix}-closest`,
+				`${prefix}-parent`,
+				`${prefix}-next`,
+				`${prefix}-previous`,
+				`${prefix}-events`
+			],
+			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);
 	},
@@ -221,10 +212,68 @@ 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++) {
 				if (
 					events[i] !== "onload" &&
 					events[i] !== "observer" &&
+					events[i] !== "intersection" &&
 					events[i] !== "resize"
 				) {
 					el.removeEventListener(events[i], eventFunction);