@cocreate/elements 1.41.1 → 1.42.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/elements",
-  "version": "1.41.1",
+  "version": "1.42.1",
   "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",
@@ -45,25 +45,21 @@
   },
   "main": "./src/index.js",
   "devDependencies": {
-    "@babel/core": "^7.9.6",
-    "@babel/preset-env": "^7.9.6",
-    "babel-loader": "^8.1.0",
-    "clean-webpack-plugin": "^3.0.0",
-    "file-loader": "^6.2.0",
+    "css-loader": "^5.1.3",
+    "esbuild": "^0.25.2",
+    "esbuild-loader": "^4.3.0",
     "mini-css-extract-plugin": "^1.5.0",
-    "style-loader": "^3.3.1",
-    "terser-webpack-plugin": "^5.1.1",
     "webpack": "^5.24.4",
     "webpack-cli": "^4.5.0",
     "webpack-log": "^3.0.1"
   },
   "dependencies": {
-    "@cocreate/actions": "^1.18.4",
-    "@cocreate/crud-client": "^1.33.11",
-    "@cocreate/element-prototype": "^1.23.0",
-    "@cocreate/filter": "^1.15.1",
-    "@cocreate/observer": "^1.16.3",
-    "@cocreate/render": "^1.41.3",
-    "@cocreate/utils": "^1.34.1"
+    "@cocreate/actions": "^1.21.0",
+    "@cocreate/crud-client": "^1.34.1",
+    "@cocreate/element-prototype": "^1.29.0",
+    "@cocreate/filter": "^1.33.1",
+    "@cocreate/observer": "^1.18.0",
+    "@cocreate/render": "^1.45.1",
+    "@cocreate/utils": "^1.38.0"
   }
 }

package/src/fetchSrc.js

@@ -1,4 +1,5 @@
 import observer from "@cocreate/observer";
+import { ObjectId } from "@cocreate/utils";
 
 const selector =
 	"[src]:not(img, video, audio, script, input, iframe, frame, link, source), [source], [stream]";
@@ -22,163 +23,141 @@ 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 {
-						element.removeAttribute("rendered");
-
-						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);
+
+					text = text.replaceAll("ObjectId()", () => {
+						// Generate a NEW ObjectId inside the function
+						return ObjectId().toString(); // Return its string representation
+					});
+					element.setValue(text);
 				}
 			}
+		} 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 = [];
@@ -266,24 +245,38 @@ 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 (
 			mutation.oldValue !==
 			mutation.target.getAttribute(mutation.attributeName)
-		)
+		) {
 			init(mutation.target);
+		}
 	}
 });
 

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);
 	}
 });