@cocreate/pwa 1.21.0 → 1.22.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [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.0",
   "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) {
+	document.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";
 
 /**