feat(useGeolocation): pause and resume controls (#2376)

Co-authored-by: egstartsev <egstartsev@ozon.ru> Co-authored-by: BenaXskope <78896684+BenaXskope@users.noreply.github.com> closes #2372
vueuse · Nov 8, 2022 · 2c4fdcd · 2c4fdcd
1 parent 259c618
commit 2c4fdcd
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 15 deletions.
diff --git a/packages/core/useGeolocation/demo.vue b/packages/core/useGeolocation/demo.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { useGeolocation } from '@vueuse/core'
 
-const { coords, locatedAt, error } = useGeolocation()
+const { coords, locatedAt, error, resume, pause } = useGeolocation()
 </script>
 
 <template>
-  <pre lang="json">{{
+  <div>
+    <pre lang="json">{{
     JSON.stringify(
       {
         coords: {
@@ -24,4 +25,11 @@ const { coords, locatedAt, error } = useGeolocation()
       2,
     )
   }}</pre>
+    <button @click="pause">
+      Pause watch
+    </button>
+    <button @click="resume">
+      Start watch
+    </button>
+  </div>
 </template>
diff --git a/packages/core/useGeolocation/index.md b/packages/core/useGeolocation/index.md
@@ -11,14 +11,16 @@ Reactive [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geol
 ```js
 import { useGeolocation } from '@vueuse/core'
 
-const { coords, locatedAt, error } = useGeolocation()
+const { coords, locatedAt, error, resume, pause } = useGeolocation()
 ```
 
 | State     | Type                                                                          | Description                                                              |
 | --------- | ----------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
 | coords    | [`Coordinates`](https://developer.mozilla.org/en-US/docs/Web/API/Coordinates) | information about the position retrieved like the latitude and longitude |
 | locatedAt | `Date`                                                                        | The time of the last geolocation call                                    |
 | error     | `string`                                                                      | An error message in case geolocation API fails.                          |
+| resume     | `function`                                                                      | Control function to resume updating geolocation |
+| pause      | `function`                                                                        | Control function to pause updating geolocation |
 
 ## Config
 

diff --git a/packages/core/useGeolocation/index.ts b/packages/core/useGeolocation/index.ts
@@ -7,7 +7,9 @@ import type { ConfigurableNavigator } from '../_configurable'
 import { defaultNavigator } from '../_configurable'
 import { useSupported } from '../useSupported'
 
-export interface UseGeolocationOptions extends Partial<PositionOptions>, ConfigurableNavigator {}
+export interface UseGeolocationOptions extends Partial<PositionOptions>, ConfigurableNavigator {
+  immediate?: boolean
+}
 
 /**
  * Reactive Geolocation API.
@@ -45,28 +47,38 @@ export function useGeolocation(options: UseGeolocationOptions = {}) {
 
   let watcher: number
 
-  if (isSupported.value) {
-    watcher = navigator!.geolocation.watchPosition(
-      updatePosition,
-      err => error.value = err,
-      {
-        enableHighAccuracy,
-        maximumAge,
-        timeout,
-      },
-    )
+  function resume() {
+    if (isSupported.value) {
+      watcher = navigator!.geolocation.watchPosition(
+        updatePosition,
+        err => error.value = err,
+        {
+          enableHighAccuracy,
+          maximumAge,
+          timeout,
+        },
+      )
+    }
   }
 
-  tryOnScopeDispose(() => {
+  resume()
+
+  function pause() {
     if (watcher && navigator)
       navigator.geolocation.clearWatch(watcher)
+  }
+
+  tryOnScopeDispose(() => {
+    pause()
   })
 
   return {
     isSupported,
     coords,
     locatedAt,
     error,
+    resume,
+    pause,
   }
 }