Skip to content

Commit 4bc95fb

Browse files
frankpaganfrankpagan
committed
feat: geolocation intergration
1 parent 21ef707 commit 4bc95fb

File tree

3 files changed

+166
-0
lines changed

3 files changed

+166
-0
lines changed

‎demo/geolocation.html

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Geolocation Web API Demo</title>
7+
</head>
8+
<body>
9+
<form id="locationForm">
10+
<input
11+
geolocation="getCurrentPosition"
12+
geolocation-key="coords.latitude"
13+
placeholder="Latitude" />
14+
<input
15+
geolocation="getCurrentPosition"
16+
geolocation-key="coords.longitude"
17+
placeholder="Longitude" />
18+
<input
19+
geolocation="getCurrentPosition"
20+
geolocation-key="coords.accuracy"
21+
placeholder="Accuracy (meters)" />
22+
<button actions="geoLocation.getCurrentPosition">
23+
Get Location
24+
</button>
25+
</form>
26+
27+
<form id="trackLocationForm">
28+
<input
29+
geolocation="watchPosition"
30+
geolocation-key="id"
31+
placeholder="id"
32+
input-next
33+
input-attribute="value" />
34+
<input
35+
geolocation="clearWatch"
36+
geolocation-key="id"
37+
placeholder="id" />
38+
<input
39+
geolocation="watchPosition"
40+
geolocation-key="coords.latitude"
41+
placeholder="Latitude" />
42+
<input
43+
geolocation="watchPosition"
44+
geolocation-key="coords.longitude"
45+
placeholder="Longitude" />
46+
<input
47+
geolocation="watchPosition"
48+
geolocation-key="coords.speed"
49+
placeholder="Speed (m/s)" />
50+
<button actions="geoLocation.watchPosition">Start Tracking</button>
51+
<button actions="geoLocation.clearWatch">Stop Tracking</button>
52+
</form>
53+
54+
<form id="errorForm">
55+
<input
56+
geolocation="getCurrentPosition"
57+
geolocation-key="coords.latitude"
58+
placeholder="Latitude" />
59+
<input
60+
geolocation="getCurrentPosition"
61+
geolocation-key="coords.longitude"
62+
placeholder="Longitude" />
63+
<input
64+
geolocation="getCurrentPosition"
65+
geolocation-key="error.message"
66+
placeholder="Error Message" />
67+
<button actions="geoLocation.getCurrentPosition">
68+
Get Location
69+
</button>
70+
</form>
71+
<script src="./dist/CoCreate.js"></script>
72+
</body>
73+
</html>

‎src/geolocation.js

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import Actions from "@cocreate/actions";
2+
import Api from "@cocreate/api";
3+
4+
const geolocationHandlers = {
5+
getCurrentPosition,
6+
watchPosition,
7+
clearWatch
8+
};
9+
10+
// Get Current Position
11+
async function getCurrentPosition(action) {
12+
if (action.element) action.options = await Api.getData(action);
13+
14+
navigator.geolocation.getCurrentPosition(
15+
(position) => {
16+
action.data = {
17+
geoLocation: { coords: position.coords }
18+
};
19+
Api.setData(action);
20+
dispatchEvent(action);
21+
},
22+
(error) => handleError(error, action),
23+
action.options
24+
);
25+
}
26+
27+
// Watch Position
28+
async function watchPosition(action) {
29+
if (action.element) action.options = await Api.getData(action);
30+
31+
const watchId = navigator.geolocation.watchPosition(
32+
(position) => {
33+
// Use a closure to access `watchId`
34+
action.data = {
35+
geoLocation: {
36+
id: watchId, // Access `watchId` from outer scope
37+
coords: position.coords
38+
}
39+
};
40+
41+
Api.setData(action);
42+
dispatchEvent(action);
43+
},
44+
(error) => handleError(error, action),
45+
action.options
46+
);
47+
}
48+
49+
// Clear Watch
50+
async function clearWatch(action) {
51+
if (action.element) action.options = await Api.getData(action);
52+
53+
if (action.options.id) {
54+
navigator.geolocation.clearWatch(Number(action.options.id));
55+
dispatchEvent(action);
56+
}
57+
}
58+
59+
// Handle Errors
60+
function handleError(error, action) {
61+
if (!action.data) action.data = { error };
62+
else action.data.error = error;
63+
console.error(`Geolocation error: ${error.message}`);
64+
Api.setData(action);
65+
}
66+
67+
function dispatchEvent(action) {
68+
document.dispatchEvent(
69+
new CustomEvent(action.endEvent, {
70+
detail: {
71+
data: action
72+
}
73+
})
74+
);
75+
}
76+
77+
// Actions Integration
78+
Actions.init([
79+
{
80+
name: "geoLocation",
81+
endEvent: "geolocation",
82+
callback(action) {
83+
geolocationHandlers[action.method](action);
84+
}
85+
}
86+
]);
87+
88+
export default {
89+
getCurrentPosition,
90+
watchPosition,
91+
clearWatch
92+
};

‎src/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
import observer from "@cocreate/observer";
2626
import localStorage from "@cocreate/local-storage";
2727
import "./web-share";
28+
import "./geolocation";
2829
// import "./theme";
2930

3031
/**

0 commit comments

Comments
 (0)