Skip to content

Commit 55266ec

Browse files
igorkamyshevigorkamyshev
authored
Geolocation API (#84)
1 parent 16fc974 commit 55266ec

File tree

13 files changed

+1052
-2
lines changed

13 files changed

+1052
-2
lines changed

‎.changeset/dry-cats-wash.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@withease/web-api': minor
3+
---
4+
5+
Add `trackGeolocation` integration

‎apps/web-api-demo/geolocation.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>web-api demo</title>
6+
<base href="/" />
7+
8+
<meta name="viewport" content="width=device-width, initial-scale=1" />
9+
<link rel="icon" type="image/x-icon" href="favicon.ico" />
10+
</head>
11+
<body>
12+
<section>
13+
<h2>Geolocation</h2>
14+
15+
<p>latitude: <span id="latitude" /></p>
16+
<p>longitude: <span id="longitude" /></p>
17+
18+
<button id="get-location">Get Location</button>
19+
20+
<button id="start-watching">Start Watching</button>
21+
<button id="stop-watching">Stop Watching</button>
22+
</section>
23+
<script type="module" src="/src/geolocation.ts"></script>
24+
</body>
25+
</html>

‎apps/web-api-demo/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ <h1>@withease/web-api</h1>
1616
<li><a href="/page-visibility.html">page-visibility</a></li>
1717
<li><a href="/screen-orientation.html">screen-orientation</a></li>
1818
<li><a href="/preferred-languages.html">preferred-languages</a></li>
19+
<li><a href="/geolocation.html">geolocation</a></li>
1920
</ul>
2021
</body>
2122
</html>

‎apps/web-api-demo/src/geolocation.ts

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { trackGeolocation } from '@withease/web-api';
2+
3+
const latitudeElement = document.querySelector('#latitude')!;
4+
const longitudeElement = document.querySelector('#longitude')!;
5+
const getLocationButton = document.querySelector('#get-location')!;
6+
const startWatchingButton = document.querySelector('#start-watching')!;
7+
const stopWatchingButton = document.querySelector('#stop-watching')!;
8+
9+
const { $latitude, $longitude, request, watching } = trackGeolocation({});
10+
11+
$latitude.watch((latitude) => {
12+
console.log('latitude', latitude);
13+
latitudeElement.textContent = JSON.stringify(latitude);
14+
});
15+
$longitude.watch((longitude) => {
16+
console.log('longitude', longitude);
17+
longitudeElement.textContent = JSON.stringify(longitude);
18+
});
19+
20+
getLocationButton.addEventListener('click', () => request());
21+
startWatchingButton.addEventListener('click', () => watching.start());
22+
stopWatchingButton.addEventListener('click', () => watching.stop());

‎apps/web-api-demo/test/geolocation.spec.ts

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import { expect, test } from '@playwright/test';
2+
3+
const GEOLOCATION_PAGE = '/geolocation.html';
4+
5+
test.use({
6+
geolocation: { longitude: 41.890221, latitude: 12.492348 },
7+
permissions: ['geolocation'],
8+
});
9+
10+
test('request', async ({ page, context }) => {
11+
await page.goto(GEOLOCATION_PAGE);
12+
13+
const latitudeContainer = await page.$('#latitude');
14+
const longitudeContainer = await page.$('#longitude');
15+
const getLocationButton = await page.$('#get-location');
16+
17+
// By default it should be null
18+
expect(await latitudeContainer!.textContent()).toBe('null');
19+
expect(await longitudeContainer!.textContent()).toBe('null');
20+
21+
// After requesting the location, it should be updated
22+
await getLocationButton!.click();
23+
expect(await latitudeContainer!.textContent()).toBe('12.492348');
24+
expect(await longitudeContainer!.textContent()).toBe('41.890221');
25+
26+
// Change geolocation, values should NOT be updated
27+
await context.setGeolocation({ longitude: 22.492348, latitude: 32.890221 });
28+
expect(await latitudeContainer!.textContent()).toBe('12.492348');
29+
expect(await longitudeContainer!.textContent()).toBe('41.890221');
30+
// Request the location again, values should be updated
31+
await getLocationButton!.click();
32+
expect(await latitudeContainer!.textContent()).toBe('32.890221');
33+
expect(await longitudeContainer!.textContent()).toBe('22.492348');
34+
});
35+
36+
test('watch', async ({ page, context }) => {
37+
await page.goto(GEOLOCATION_PAGE);
38+
39+
const latitudeContainer = await page.$('#latitude');
40+
const longitudeContainer = await page.$('#longitude');
41+
const startWatchingButton = await page.$('#start-watching');
42+
const stopWatchingButton = await page.$('#stop-watching');
43+
44+
// By default it should be null
45+
expect(await latitudeContainer!.textContent()).toBe('null');
46+
expect(await longitudeContainer!.textContent()).toBe('null');
47+
48+
// After watching the location, it should be updated immediately
49+
await startWatchingButton!.click();
50+
expect(await latitudeContainer!.textContent()).toBe('12.492348');
51+
expect(await longitudeContainer!.textContent()).toBe('41.890221');
52+
53+
// Change geolocation, values should be updated immediately
54+
await context.setGeolocation({ longitude: 22.492348, latitude: 32.890221 });
55+
expect(await latitudeContainer!.textContent()).toBe('32.890221');
56+
expect(await longitudeContainer!.textContent()).toBe('22.492348');
57+
58+
// Stop watching and change geolocation, values should NOT be updated
59+
await stopWatchingButton!.click();
60+
await context.setGeolocation({ longitude: 42.492348, latitude: 52.890221 });
61+
expect(await latitudeContainer!.textContent()).toBe('32.890221');
62+
expect(await longitudeContainer!.textContent()).toBe('22.492348');
63+
});

‎apps/website/docs/.vitepress/config.mjs

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,10 @@ export default defineConfig({
107107
text: 'Preferred languages',
108108
link: '/web-api/preferred_languages',
109109
},
110+
{
111+
text: 'Geolocation',
112+
link: '/web-api/geolocation',
113+
},
110114
],
111115
},
112116
]),

‎apps/website/docs/web-api/geolocation.live.vue

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<script setup>
2+
import { trackGeolocation } from '@withease/web-api';
3+
import { useUnit } from 'effector-vue/composition';
4+
5+
const geo = trackGeolocation();
6+
7+
const { latitude, longitude, request } = useUnit({
8+
latitude: geo.$latitude,
9+
longitude: geo.$longitude,
10+
request: geo.request,
11+
});
12+
</script>
13+
14+
<template>
15+
<p>latitude: {{ latitude }}</p>
16+
<p>longitude: {{ longitude }}</p>
17+
18+
<button v-on:click="request">Request geolocation</button>
19+
</template>

0 commit comments

Comments
 (0)