@cocreate/pwa 1.21.0 → 1.22.1

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [1.22.1](https://github.com/CoCreate-app/CoCreate-pwa/compare/v1.22.0...v1.22.1) (2025-04-11)
+
+
+### Bug Fixes
+
+* dispatch end event on action element rather than document ([c14b2f3](https://github.com/CoCreate-app/CoCreate-pwa/commit/c14b2f3e92e50f3487aefd66a479e4222c835ab6))
+* update observer observe param to type and and attributeName to attributeFilter ([5545765](https://github.com/CoCreate-app/CoCreate-pwa/commit/554576546507eda1c7577ae593e5c660572ba774))
+
+# [1.22.0](https://github.com/CoCreate-app/CoCreate-pwa/compare/v1.21.0...v1.22.0) (2025-01-18)
+
+
+### Features
+
+* geolocation intergration ([4bc95fb](https://github.com/CoCreate-app/CoCreate-pwa/commit/4bc95fb1192efec090da1a45698f347376427d44))
+
 # [1.21.0](https://github.com/CoCreate-app/CoCreate-pwa/compare/v1.20.0...v1.21.0) (2024-12-14)
 
 

package/demo/geolocation.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Geolocation Web API Demo</title>
+	</head>
+	<body>
+		<form id="locationForm">
+			<input
+				geolocation="getCurrentPosition"
+				geolocation-key="coords.latitude"
+				placeholder="Latitude" />
+			<input
+				geolocation="getCurrentPosition"
+				geolocation-key="coords.longitude"
+				placeholder="Longitude" />
+			<input
+				geolocation="getCurrentPosition"
+				geolocation-key="coords.accuracy"
+				placeholder="Accuracy (meters)" />
+			<button actions="geoLocation.getCurrentPosition">
+				Get Location
+			</button>
+		</form>
+
+		<form id="trackLocationForm">
+			<input
+				geolocation="watchPosition"
+				geolocation-key="id"
+				placeholder="id"
+				input-next
+				input-attribute="value" />
+			<input
+				geolocation="clearWatch"
+				geolocation-key="id"
+				placeholder="id" />
+			<input
+				geolocation="watchPosition"
+				geolocation-key="coords.latitude"
+				placeholder="Latitude" />
+			<input
+				geolocation="watchPosition"
+				geolocation-key="coords.longitude"
+				placeholder="Longitude" />
+			<input
+				geolocation="watchPosition"
+				geolocation-key="coords.speed"
+				placeholder="Speed (m/s)" />
+			<button actions="geoLocation.watchPosition">Start Tracking</button>
+			<button actions="geoLocation.clearWatch">Stop Tracking</button>
+		</form>
+
+		<form id="errorForm">
+			<input
+				geolocation="getCurrentPosition"
+				geolocation-key="coords.latitude"
+				placeholder="Latitude" />
+			<input
+				geolocation="getCurrentPosition"
+				geolocation-key="coords.longitude"
+				placeholder="Longitude" />
+			<input
+				geolocation="getCurrentPosition"
+				geolocation-key="error.message"
+				placeholder="Error Message" />
+			<button actions="geoLocation.getCurrentPosition">
+				Get Location
+			</button>
+		</form>
+		<script src="./dist/CoCreate.js"></script>
+	</body>
+</html>

package/package.json

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

package/src/geolocation.js

@@ -0,0 +1,92 @@
+import Actions from "@cocreate/actions";
+import Api from "@cocreate/api";
+
+const geolocationHandlers = {
+	getCurrentPosition,
+	watchPosition,
+	clearWatch
+};
+
+// Get Current Position
+async function getCurrentPosition(action) {
+	if (action.element) action.options = await Api.getData(action);
+
+	navigator.geolocation.getCurrentPosition(
+		(position) => {
+			action.data = {
+				geoLocation: { coords: position.coords }
+			};
+			Api.setData(action);
+			dispatchEvent(action);
+		},
+		(error) => handleError(error, action),
+		action.options
+	);
+}
+
+// Watch Position
+async function watchPosition(action) {
+	if (action.element) action.options = await Api.getData(action);
+
+	const watchId = navigator.geolocation.watchPosition(
+		(position) => {
+			// Use a closure to access `watchId`
+			action.data = {
+				geoLocation: {
+					id: watchId, // Access `watchId` from outer scope
+					coords: position.coords
+				}
+			};
+
+			Api.setData(action);
+			dispatchEvent(action);
+		},
+		(error) => handleError(error, action),
+		action.options
+	);
+}
+
+// Clear Watch
+async function clearWatch(action) {
+	if (action.element) action.options = await Api.getData(action);
+
+	if (action.options.id) {
+		navigator.geolocation.clearWatch(Number(action.options.id));
+		dispatchEvent(action);
+	}
+}
+
+// Handle Errors
+function handleError(error, action) {
+	if (!action.data) action.data = { error };
+	else action.data.error = error;
+	console.error(`Geolocation error: ${error.message}`);
+	Api.setData(action);
+}
+
+function dispatchEvent(action) {
+	action.element.dispatchEvent(
+		new CustomEvent(action.endEvent, {
+			detail: {
+				data: action
+			}
+		})
+	);
+}
+
+// Actions Integration
+Actions.init([
+	{
+		name: "geoLocation",
+		endEvent: "geolocation",
+		callback(action) {
+			geolocationHandlers[action.method](action);
+		}
+	}
+]);
+
+export default {
+	getCurrentPosition,
+	watchPosition,
+	clearWatch
+};

package/src/index.js

@@ -25,6 +25,7 @@
 import observer from "@cocreate/observer";
 import localStorage from "@cocreate/local-storage";
 import "./web-share";
+import "./geolocation";
 // import "./theme";
 
 /**
@@ -144,7 +145,7 @@ async function persistData() {
 
 observer.init({
 	name: "initPwa",
-	observe: ["addedNodes"],
+	types: ["addedNodes"],
 	selector: '[actions="install"]',
 	callback: (mutation) => {
 		init();

package/src/web-share.js

@@ -23,60 +23,68 @@
  * For details, visit <https://cocreate.app/licenses/> or contact us at sales@cocreate.app.
  */
 
-import Observer from '@cocreate/observer'
-import Actions from '@cocreate/actions'
+import Observer from "@cocreate/observer";
+import Actions from "@cocreate/actions";
 
 const selector = "[share]";
 
 async function init(element) {
-    if (element && !(element instanceof HTMLCollection) && !Array.isArray(element))
-        element = [element]
-    else if (!element) {
-        element = document.querySelectorAll(selector)
-    }
-
-    for (let i = 0; i < element.length; i++)
-        element[i].addEventListener('click', function (e) {
-            share(e.target);
-        });
+	if (
+		element &&
+		!(element instanceof HTMLCollection) &&
+		!Array.isArray(element)
+	)
+		element = [element];
+	else if (!element) {
+		element = document.querySelectorAll(selector);
+	}
 
+	for (let i = 0; i < element.length; i++)
+		element[i].addEventListener("click", function (e) {
+			share(e.target);
+		});
 }
 
 function share(element) {
-    if (navigator.share && element) {
-        let title = element.getAttribute('share-title') || document.title;
-        let text = element.getAttribute('share-text') || document.querySelector('meta[name="description"]')?.content || '';
-        let url = element.getAttribute('share-url') || window.location.href;
+	if (navigator.share && element) {
+		let title = element.getAttribute("share-title") || document.title;
+		let text =
+			element.getAttribute("share-text") ||
+			document.querySelector('meta[name="description"]')?.content ||
+			"";
+		let url = element.getAttribute("share-url") || window.location.href;
 
-        navigator.share({
-            title: title,
-            text: text,
-            url: url
-        })
-            .then(() => console.log('Successful share'))
-            .catch((error) => console.log('Error sharing', error));
-    } else {
-        console.log('Web Share API is not supported or element is not provided.');
-    }
+		navigator
+			.share({
+				title: title,
+				text: text,
+				url: url
+			})
+			.then(() => console.log("Successful share"))
+			.catch((error) => console.log("Error sharing", error));
+	} else {
+		console.log(
+			"Web Share API is not supported or element is not provided."
+		);
+	}
 }
 
 Observer.init({
-    name: 'webshare',
-    observe: ['addedNodes'],
-    selector: '[share]',
-    callback: (mutation) => {
-        init(mutation.target)
-    }
+	name: "webshare",
+	types: ["addedNodes"],
+	selector: "[share]",
+	callback: (mutation) => {
+		init(mutation.target);
+	}
 });
 
 Actions.init({
-    name: "share",
-    callback: (action) => {
-        share(action.element);
-    }
-})
-
-init()
+	name: "share",
+	callback: (action) => {
+		share(action.element);
+	}
+});
 
-export default { init }
+init();
 
+export default { init };