@cocreate/elements 1.41.0 → 1.42.0

package/CHANGELOG.md

@@ -1,3 +1,26 @@
+# [1.42.0](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.41.1...v1.42.0) (2025-04-11)
+
+
+### Bug Fixes
+
+* $relativePath handeling ([e9d41df](https://github.com/CoCreate-app/CoCreate-elements/commit/e9d41df24291083acc2bd5fa928c6b8b621e8f7c))
+* handeling onRest ([ba102ce](https://github.com/CoCreate-app/CoCreate-elements/commit/ba102cedec35c41f1a974d0f62de3670ed40105e))
+* update observer obseve param to type and and attributeName to attributeFilter ([3ce1a06](https://github.com/CoCreate-app/CoCreate-elements/commit/3ce1a0615fd16eeacc24b89c722593d7a470a566))
+* update to how action is handled ([25f2654](https://github.com/CoCreate-app/CoCreate-elements/commit/25f26548618397c3cbae0469ff284ca1be5a8a7b))
+
+
+### Features
+
+* value-selectors to get value from target element ([e3ae15b](https://github.com/CoCreate-app/CoCreate-elements/commit/e3ae15b5e0d2d953399bd45dc82ea44aa7aa6cde))
+
+## [1.41.1](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.41.0...v1.41.1) (2025-01-18)
+
+
+### Bug Fixes
+
+* path handling ([1276f2d](https://github.com/CoCreate-app/CoCreate-elements/commit/1276f2d3988ec556ce95d3166596526d9d5851c3))
+* sum handling ([86f1e74](https://github.com/CoCreate-app/CoCreate-elements/commit/86f1e74af2e14b51b925e36fd22b2935796073fa))
+
 # [1.41.0](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.40.1...v1.41.0) (2025-01-02)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/elements",
-  "version": "1.41.0",
+  "version": "1.42.0",
   "description": "Fetch content into any html element by using html5 attributes to query data stored in CoCreate headless CMS. If data is changed it will instantly reflect in html tags as changes are broadcasted in realtime",
   "keywords": [
     "elements",

package/src/fetchSrc.js

@@ -22,159 +22,137 @@ async function initElements(elements) {
 		if (!src || /{{\s*([\w\W]+)\s*}}/g.test(src)) continue;
 
 		let initialize = initializing.get(element);
-		if (!initialize || initialize.src != src) {
-			initializing.set(element, { src });
-			if (src) {
-				try {
-					let response = await fetch(src);
-					if (
-						element.tagName === "AUDIO" ||
-						element.tagName === "VIDEO"
-					) {
-						try {
-							let mediaConfig = await response.json();
-							let sourceBuffer;
-
-							const mediaSource = new MediaSource();
-							element.src = URL.createObjectURL(mediaSource);
-							mediaSource.addEventListener(
-								"sourceopen",
-								async () => {
-									sourceBuffer = mediaSource.addSourceBuffer(
-										`${mediaConfig["content-type"]}; codecs="${mediaConfig.codecs}"`
-									);
-
-									sourceBuffer.addEventListener(
-										"updateend",
-										() => {
-											console.log(
-												"Update ended, buffered ranges:",
-												sourceBuffer.buffered
-											);
-											if (
-												!sourceBuffer.updating &&
-												mediaSource.readyState ===
-													"open"
-											) {
-												mediaSource.endOfStream();
-
-												element.addEventListener(
-													"ended",
-													() => {
-														URL.revokeObjectURL(
-															element.src
-														);
-													}
-												);
-											}
-										}
-									);
-									sourceBuffer.addEventListener(
-										"error",
-										(e) => {
-											console.error(
-												"SourceBuffer error event:",
-												e
-											);
-											console.log(
-												"MediaSource readyState:",
-												mediaSource.readyState
-											);
-											console.log(
-												"SourceBuffer updating:",
-												sourceBuffer.updating
-											);
-											console.log(
-												"SourceBuffer buffered ranges:",
-												sourceBuffer.buffered
-											);
-											// Any other state information you can log
-										}
-									);
-
-									getSegment(
-										sourceBuffer,
-										mediaConfig.segments[0]
-									);
-								}
-							);
-
-							mediaSource.addEventListener("sourceended", () => {
-								console.log("MediaSource ended event fired");
-							});
-
-							mediaSource.addEventListener("sourceclose", () => {
-								console.log("MediaSource close event fired");
-							});
-
-							// Event listener for seeking
-							element.addEventListener("seeking", () => {
-								let currentTime = element.currentTime;
-								let chunkIndex = Math.floor(
-									currentTime / chunkDuration
-								);
-							});
-
-							// Event listener for seeked
-							element.addEventListener("seeked", () => {
-								let currentTime = element.currentTime;
-								if (isBuffered(element, currentTime)) return;
-
-								let query = {
-									start: { $lte: currentTime },
-									end: { $gte: currentTime }
-								};
-
-								let segments = queryData(
-									mediaConfig.segments,
-									query
-								);
-								for (let segment of segments) {
-									getSegment(sourceBuffer, segment);
-								}
-							});
-
-							element.addEventListener("timeupdate", function () {
-								const bufferEnd = element.buffered.end(0);
-								const currentTime = element.currentTime;
-								const threshold = 10; // seconds before buffer end to fetch the next segment
-
-								if (bufferEnd - currentTime < threshold) {
-									// Time to fetch the next segment
-									getSegment(sourceBuffer, mediaConfig);
-								}
-							});
-						} catch (error) {
-							element.src = src;
-							// let blob = await response.json();
-							// URL.createObjectURL(blob);
-						}
-					} else if (element.hasAttribute("rendered")) {
-						element.removeAttribute("rendered");
-						// let path = element.getAttribute("path");
-						// if (path) {
-						// 	let elements = element.querySelectorAll("[src]");
-						// 	for (let i = 0; i < elements.length; i++) {
-						// 		text = text.replaceAll("{{path}}", path);
-						// 	}
-						// }
-					} else {
-						let text = await response.text();
-						if (text) {
-							let path = element.getAttribute("path");
-							if (path) text = text.replaceAll("{{path}}", path);
-							element.setValue(text);
-							initializing.delete(element);
-						}
+		if (initialize && initialize.src === src) continue;
+
+		initializing.set(element, { src });
+		try {
+			let state = localStorage.getItem("state"); // Assume this is your state object
+			let response = await fetch(src, {
+				headers: {
+					"X-State": state // Custom header to send state
+				}
+			});
+
+			if (element.tagName === "AUDIO" || element.tagName === "VIDEO") {
+				initMediaSource(element, src);
+			} else {
+				element.removeAttribute("rendered");
+
+				let text = await response.text();
+				if (text) {
+					let pathElement = element.closest("[path]");
+					if (pathElement) {
+						let path =
+							pathElement.getAttribute("path") || getPath();
+						if (path) text = text.replaceAll("$relativePath", path);
 					}
-				} catch (err) {
-					console.log("FetchSrc error:" + err);
+					element.setValue(text);
+					initializing.delete(element);
 				}
 			}
+		} catch (err) {
+			console.log("FetchSrc error:" + err);
 		}
 	}
 }
 
+function getPath() {
+	let currentPath = window.location.pathname.replace(/\/[^\/]*$/, ""); // Remove file from path
+	let depth = currentPath.split("/").filter(Boolean).length; // Count depth levels
+
+	return depth > 0 ? "../".repeat(depth) : "./"; // Return the correct relative path
+}
+
+async function initMediaSource(element, src) {
+	try {
+		let mediaConfig = await response.json();
+		let sourceBuffer;
+
+		const mediaSource = new MediaSource();
+		element.src = URL.createObjectURL(mediaSource);
+		mediaSource.addEventListener("sourceopen", async () => {
+			sourceBuffer = mediaSource.addSourceBuffer(
+				`${mediaConfig["content-type"]}; codecs="${mediaConfig.codecs}"`
+			);
+
+			sourceBuffer.addEventListener("updateend", () => {
+				console.log(
+					"Update ended, buffered ranges:",
+					sourceBuffer.buffered
+				);
+				if (
+					!sourceBuffer.updating &&
+					mediaSource.readyState === "open"
+				) {
+					mediaSource.endOfStream();
+
+					element.addEventListener("ended", () => {
+						URL.revokeObjectURL(element.src);
+					});
+				}
+			});
+
+			sourceBuffer.addEventListener("error", (e) => {
+				console.error("SourceBuffer error event:", e);
+				console.log("MediaSource readyState:", mediaSource.readyState);
+				console.log("SourceBuffer updating:", sourceBuffer.updating);
+				console.log(
+					"SourceBuffer buffered ranges:",
+					sourceBuffer.buffered
+				);
+				// Any other state information you can log
+			});
+
+			getSegment(sourceBuffer, mediaConfig.segments[0]);
+		});
+
+		mediaSource.addEventListener("sourceended", () => {
+			console.log("MediaSource ended event fired");
+		});
+
+		mediaSource.addEventListener("sourceclose", () => {
+			console.log("MediaSource close event fired");
+		});
+
+		// Event listener for seeking
+		element.addEventListener("seeking", () => {
+			let currentTime = element.currentTime;
+			let chunkIndex = Math.floor(currentTime / chunkDuration);
+		});
+
+		// Event listener for seeked
+		element.addEventListener("seeked", () => {
+			let currentTime = element.currentTime;
+			if (isBuffered(element, currentTime)) return;
+
+			let query = {
+				start: { $lte: currentTime },
+				end: { $gte: currentTime }
+			};
+
+			let segments = queryData(mediaConfig.segments, query);
+			for (let segment of segments) {
+				getSegment(sourceBuffer, segment);
+			}
+		});
+
+		element.addEventListener("timeupdate", function () {
+			const bufferEnd = element.buffered.end(0);
+			const currentTime = element.currentTime;
+			const threshold = 10; // seconds before buffer end to fetch the next segment
+
+			if (bufferEnd - currentTime < threshold) {
+				// Time to fetch the next segment
+				getSegment(sourceBuffer, mediaConfig);
+			}
+		});
+	} catch (error) {
+		element.src = src;
+		// let blob = await response.json();
+		// URL.createObjectURL(blob);
+	}
+}
+
 async function getSegment(sourceBuffer, segment) {
 	// TODO: use socket/crud/file with room using the url to get one or more segments and append
 	let segments = [];
@@ -262,17 +240,30 @@ function base64ToArrayBuffer(base64) {
 
 observer.init({
 	name: "CoCreateSrc",
-	observe: ["addedNodes"],
+	types: ["addedNodes"],
 	selector: selector,
 	callback: function (mutation) {
 		init(mutation.target);
 	}
 });
 
+observer.init({
+	name: "CoCreateSrcOperator",
+	types: ["addedNodes"],
+	selector: "img",
+	// selector: "img, video, audio, script, input, iframe, frame, link, source",
+	callback: function (mutation) {
+		let src = mutation.target.getAttribute("src");
+		if (src) {
+			mutation.target.setAttribute("src", src);
+		}
+	}
+});
+
 observer.init({
 	name: "CoCreateSrcAttributes",
-	observe: ["attributes"],
-	attributeName: ["src"],
+	types: ["attributes"],
+	attributeFilter: ["src"],
 	selector: selector,
 	callback: function (mutation) {
 		if (

package/src/form.js

@@ -21,11 +21,18 @@ function init(elements) {
 		setAttribute(element);
 		disableAutoFill(element);
 		setValue(element);
+
 		element.addEventListener("submit", function (event) {
 			if (!element.hasAttribute("action")) {
 				event.preventDefault();
 			}
 		});
+
+		// Handle form reset event
+		element.addEventListener("reset", function (event) {
+			event.preventDefault(); // Prevent default reset
+			reset({ form: event.target }); // Call custom reset logic
+		});
 	}
 }
 
@@ -93,7 +100,9 @@ function disableAutoFill(element) {
 /**
  * @param form
  */
-function reset(form) {
+function reset(action) {
+	let form = action.form;
+
 	// Convert the form elements collection to an array
 	const formElementsArray = Array.from(form.elements);
 
@@ -127,7 +136,13 @@ function reset(form) {
 					element.value ||
 					element.getAttribute("value")
 			);
-		if (!resetType || resetType === "value") element.setValue("");
+		if (!resetType || resetType === "value") {
+			if (element.contentEditable === "true") {
+				element.innerHTML = "";
+			} else {
+				element.setValue("");
+			}
+		}
 	}
 
 	if (form.hasAttribute("object")) form.setAttribute("object", "");
@@ -141,11 +156,13 @@ function reset(form) {
 	});
 
 	// Dispatch a custom reset event
-	document.dispatchEvent(
-		new CustomEvent("reset", {
-			detail: {}
-		})
-	);
+	if (action.element) {
+		action.element.dispatchEvent(
+			new CustomEvent("reset", {
+				detail: {}
+			})
+		);
+	}
 }
 
 function setValue(form) {
@@ -166,15 +183,15 @@ function setValue(form) {
 
 Observer.init({
 	name: "CoCreateForm",
-	observe: ["addedNodes"],
+	types: ["addedNodes"],
 	selector: "form",
 	callback: (mutation) => init(mutation.target)
 });
 
 Observer.init({
 	name: "CoCreateForm",
-	observe: ["attributes"],
-	attributeName: getAttributeNames([
+	types: ["attributes"],
+	attributeFilter: getAttributeNames([
 		"organization_id",
 		"host",
 		"storage",
@@ -190,7 +207,7 @@ Observer.init({
 
 Observer.init({
 	name: "CoCreateFormElements",
-	observe: ["addedNodes"],
+	types: ["addedNodes"],
 	selector:
 		"[organization_id], [host], [storage], [database], [array], [index], [object], [key]",
 	callback: function (mutation) {
@@ -203,7 +220,7 @@ Action.init({
 	name: "reset",
 	endEvent: "reset",
 	callback: (action) => {
-		if (action.form) reset(action.form);
+		if (action.form) reset(action);
 	}
 });
 

package/src/index.js

@@ -40,6 +40,7 @@ import { render, renderValue, renderedNodes } from "@cocreate/render";
 import "@cocreate/element-prototype";
 import "./fetchSrc";
 import { reset } from "./form";
+import "./value.js";
 
 const selector = "[storage], [database], [array], [render-json]";
 const elements = new Map();
@@ -462,7 +463,12 @@ async function filterData(element, data, type, key) {
 		}
 
 		let property = key;
-		if (operator) property = property.replace(operator + ".", "");
+		if (operator) {
+			property = property.replace(operator + ".", "");
+			if (operator === "$sum") {
+				value = 0;
+			}
+		}
 		if (Array.isArray(data[type])) {
 			let Data = [],
 				isObject;
@@ -480,8 +486,12 @@ async function filterData(element, data, type, key) {
 				}
 				let docValue = getValueFromObject(doc, property);
 				if (docValue) {
-					if (Array.isArray(docValue)) Data.push(...docValue);
-					else {
+					if (operator === "$sum" && typeof docValue === "number") {
+						if (typeof value !== "number") value = 0;
+						value += docValue || 0;
+					} else if (Array.isArray(docValue)) {
+						Data.push(...docValue);
+					} else {
 						isObject = true;
 						Data.push(docValue);
 					}
@@ -496,11 +506,11 @@ async function filterData(element, data, type, key) {
 			//     data = { [property]: Data[0] }
 			// } else
 			if (!operator) data = Data;
-			else if (operator === "$sum") {
-				value = Data.reduce((accumulator, currentValue) => {
-					return accumulator + currentValue;
-				}, 0);
-			}
+			// else if (operator === "$sum") {
+			// 	value = data[type].reduce((accumulator, currentValue) => {
+			// 		return accumulator + currentValue;
+			// 	}, 0);
+			// }
 		} else {
 			data = { [property]: data[type][property] };
 		}
@@ -1006,7 +1016,7 @@ async function getData(form) {
 	return dataArray;
 }
 
-async function save(element) {
+async function save(element, action) {
 	if (!element) return;
 	let data, value;
 	let upsert = element.getAttribute("upsert");
@@ -1112,19 +1122,28 @@ async function save(element) {
 				(data[i].type !== "object" &&
 					data[i].method.endsWith(".update")))
 		) {
-			setTypeValue(element, data[i]);
-		} else if (data[i])
-			document.dispatchEvent(
-				new CustomEvent("saved", {
-					detail: data[i]
-				})
-			);
+			setTypeValue(element, data[i], action);
+		} else if (data[i]) {
+			if (action) {
+				action.element.dispatchEvent(
+					new CustomEvent("saved", {
+						detail: data
+					})
+				);
+			} else {
+				document.dispatchEvent(
+					new CustomEvent("saved", {
+						detail: data
+					})
+				);
+			}
+		}
 	}
 
 	return Data;
 }
 
-function setTypeValue(element, data) {
+function setTypeValue(element, data, action) {
 	// TODO: if an array name is updated, the attibute array="" needs to be updated.
 
 	if (!data) return;
@@ -1160,7 +1179,7 @@ function setTypeValue(element, data) {
 		}
 		setData(Array.from(elements.keys()), data);
 
-		//     const state_ids = new Map();
+		//     const state_ids = new Map()
 
 		//     let state_id = form.getAttribute('state_id');
 		//     if (state_id) {
@@ -1213,11 +1232,19 @@ function setTypeValue(element, data) {
 		//     }
 	}
 
-	document.dispatchEvent(
-		new CustomEvent("saved", {
-			detail: data
-		})
-	);
+	if (action) {
+		action.element.dispatchEvent(
+			new CustomEvent("saved", {
+				detail: data
+			})
+		);
+	} else {
+		document.dispatchEvent(
+			new CustomEvent("saved", {
+				detail: data
+			})
+		);
+	}
 }
 
 async function remove(element) {
@@ -1296,7 +1323,7 @@ function initSocket() {
 
 Observer.init({
 	name: "render",
-	observe: ["addedNodes"],
+	types: ["addedNodes"],
 	selector: "[render-clone]",
 	callback: function (mutation) {
 		if (!mutation.parentElement.hasAttribute("dnd")) return;
@@ -1445,16 +1472,16 @@ function dndCrudSend(data, crudType) {
 
 Observer.init({
 	name: "CoCreateElementsChildList",
-	observe: ["childList"],
+	types: ["addedNodes"],
 	selector: selector,
 	callback: function (mutation) {
-		init(mutation.addedNodes);
+		init([mutation.target]);
 	}
 });
 
 Observer.init({
 	name: "CoCreateElementsRemovedNodes",
-	observe: ["removedNodes"],
+	types: ["removedNodes"],
 	selector: selector,
 	callback: function (mutation) {
 		// if (mutation.target.parentElement) return
@@ -1472,8 +1499,8 @@ Observer.init({
 
 Observer.init({
 	name: "CoCreateElementsAttributes",
-	observe: ["attributes"],
-	attributeName: [
+	types: ["attributes"],
+	attributeFilter: [
 		"organization_id",
 		"host",
 		"storage",
@@ -1499,7 +1526,7 @@ Actions.init([
 		name: "save",
 		endEvent: "saved",
 		callback: (action) => {
-			if (action.form) save(action.form);
+			if ((action.form, action)) save(action.form, action);
 		}
 	},
 	{
@@ -1542,7 +1569,7 @@ Actions.init([
 					data[data.type] = { _id: data[data.type] };
 
 				let response = await CRUD.send(data);
-				document.dispatchEvent(
+				action.element.dispatchEvent(
 					new CustomEvent("deleted", {
 						detail: response
 					})

package/src/value.js

@@ -0,0 +1,115 @@
+import Observer from "@cocreate/observer";
+import "@cocreate/element-prototype";
+
+const selector =
+	"[value-selector], [value-closest], [value-parent], [value-next], [value-previous], [value-document], [value-frame], [value-top]";
+
+/**
+ * Initializes elements with value-* attributes to enable dynamic value retrieval and setting.
+ *
+ * @param {HTMLElement|HTMLCollection|NodeList|Array<HTMLElement>} [element] - Optional element(s) to initialize. If not provided, initializes all matching elements in the document.
+ */
+async function init(element) {
+	if (
+		element &&
+		!(element instanceof HTMLCollection) &&
+		!(element instanceof NodeList) &&
+		!Array.isArray(element)
+	) {
+		element = [element];
+	} else if (!element) {
+		element = document.querySelectorAll(selector);
+	}
+
+	for (let i = 0; i < element.length; i++) {
+		initElement(element[i]);
+	}
+}
+
+/**
+ * Initializes a single element with value-* attributes.
+ *
+ * @param {HTMLElement} element - The element to initialize.
+ */
+function initElement(element) {
+	let targets = element.queryElements();
+
+	valueHandler(element, targets, true);
+}
+
+/**
+ * Handles the retrieval and setting of values based on value-* attributes.
+ *
+ * @param {HTMLElement} element - The element to set the value on.
+ * @param {object} targets - An object containing elements retrieved by queryElements().
+ */
+function valueHandler(element, targets = [], initialize) {
+	let values = [];
+	// TODO: consdier the potential of targets being an array of elements, should value be an array of the values?
+	for (let i = 0; i < targets.length; i++) {
+		if (!targets[i] || !targets[i].isConnected) {
+			targets.splice(i, 1); // Remove the element
+			i -= 1; // Adjust the index
+			continue; // Skip to the next iteration
+		}
+
+		if (initialize) {
+			// Remove existing listener (if any)
+			targets[i].removeEventListener("input", elementValueHandler);
+
+			// Add new listener
+			targets[i].addEventListener("input", elementValueHandler);
+		}
+
+		values.push(targets[i].getValue());
+	}
+
+	if (!values.length) {
+		return;
+	} else if (values.length === 1) {
+		values = values[0];
+	}
+
+	let attribute = element.getAttribute("value-attribute");
+	if (attribute) {
+		element.setAttribute(attribute, values);
+	} else {
+		element.setValue(values);
+	}
+
+	function elementValueHandler(e) {
+		valueHandler(element, targets);
+	}
+}
+
+init();
+
+Observer.init({
+	name: "CoCreateElementsValueAdded",
+	types: ["addedNodes"],
+	selector: selector,
+	callback: function (mutation) {
+		init(mutation.target);
+	}
+});
+
+Observer.init({
+	name: "CoCreateElementsAttributes",
+	types: ["attributes"],
+	attributeFilter: [
+		"value-selector",
+		"value-closest",
+		"value-parent",
+		"value-next",
+		"value-previous",
+		"value-document",
+		"value-frame",
+		"value-top"
+	],
+	callback: function (mutation) {
+		let currentValue = mutation.target.getAttribute(mutation.attributeName);
+		if (currentValue !== mutation.oldValue) {
+			initElement(mutation.target);
+		}
+	}
+});