added pause and resume controls for geolocation watcher

vueuse · Oct 28, 2022 · 592e87a · 592e87a
1 parent 39b1f00
commit 592e87a
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 17 deletions.
diff --git a/packages/core/useGeolocation/demo.vue b/packages/core/useGeolocation/demo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useGeolocation } from '@vueuse/core'
 
-const { coords, locatedAt, error, stop, start } = useGeolocation()
+const { coords, locatedAt, error, resume, pause } = useGeolocation()
 </script>
 
 <template>
@@ -25,10 +25,10 @@ const { coords, locatedAt, error, stop, start } = useGeolocation()
       2,
     )
   }}</pre>
-    <button @click="stop">
-      Stop watch
+    <button @click="pause">
+      Pause watch
     </button>
-    <button @click="start">
+    <button @click="resume">
       Start watch
     </button>
   </div>

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, start, stop } = 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,
   }
 }