feat: stop geoloaction callback after user has arrived

feat: automatically start watching if gelocation permission is given

src/components/LockedContent/geolocation.ts

@@ -56,7 +56,7 @@ function locationSuccessCallback(
 
     // Reveal image when the unlock button is clicked
     const unlockButton = document.getElementById("unlock-content-button")
-    unlockButton?.addEventListener("click", revealContent)
+    unlockButton?.addEventListener("click", (ev) => revealContent(ev.target))
   } else {
     const distanceText = generateDistanceText(distance)
     updateText("locked-content-description", `Kalan mesafe: ${distanceText}`)

src/lib/domUtils.ts

@@ -43,7 +43,11 @@ function addAttribute(elemId: string, attribute: string, value: string) {
   else console.error("Element could not be found!")
 }
 
-function revealContent() {
+function revealContent(el: EventTarget | null) {
+  // dispatch user arrived custom event to stop geolocation callback
+  const userArrivedEvent = new Event("userarrived", { bubbles: true })
+  el?.dispatchEvent(userArrivedEvent)
+
   incrementUnlockCounter(document.URL.slice(-12))
   removeClasses("content", "blur-2xl")
   removeElement("unlock-button-container")

src/pages/x/index.astro

@@ -120,6 +120,7 @@ import { CalendarIcon } from "@radix-ui/react-icons"
 
     // Map
     import { initMap } from "@/scripts/initMap"
+    import { startWatchingLocation } from "@/scripts/lockedContent"
 
     const url = new URL(document.URL).searchParams
     const id = url.get("id")
@@ -137,7 +138,6 @@ import { CalendarIcon } from "@radix-ui/react-icons"
     dayjs.locale("tr")
 
     const dateFromNow = dayjs.utc(data?.created_at).from(dayjs.utc())
-    console.log(dateFromNow)
 
     updateText("card-title", data?.author ?? "")
     updateText("card-description", data?.description ?? "")
@@ -166,6 +166,22 @@ import { CalendarIcon } from "@radix-ui/react-icons"
 
     const counter = document.getElementById("counter")
     if (counter) counter.innerText = data?.unlocked_counter.toString() ?? ""
+
+    // When the web page is loaded, check if user has given geolocation
+    // permission before
+    navigator.permissions
+      .query({ name: "geolocation" })
+      .then((permissionStatus) => {
+        switch (permissionStatus.state) {
+          case "granted":
+            startWatchingLocation()
+            break
+          case "denied":
+          case "prompt":
+          default:
+            break
+        }
+      })
   </script>
   <script src='@/scripts/initMap.ts'></script>
   <script src='@/scripts/lockedContent.ts'></script>

src/scripts/lockedContent.ts

@@ -30,7 +30,7 @@ locationPermissionButton.addEventListener("click", startWatchingLocation)
 lockedContentContainer.addEventListener("askpermission", startWatchingLocation)
 
 // Get target position from container's dataset
-function getTargetPosition() {
+function getTargetPosition(): LatLngTuple | void {
   const lockedContentContainer = document.getElementById(
     "locked-content-container"
   )
@@ -59,36 +59,21 @@ function getRadius() {
 }
 
 // Call Geolocation API to start watching user location
-function startWatchingLocation() {
+export function startWatchingLocation() {
   const TARGET_POSITION = getTargetPosition()
   const radius = getRadius()
 
-  if (!watchId) {
+  if (!watchId && TARGET_POSITION) {
     watchId = window.navigator.geolocation.watchPosition(
       (position) => locationSuccessCallback(position, TARGET_POSITION, radius),
       errorCallback
     )
-  }
-}
 
-// When the web page is loaded, check if user has given geolocation
-// permission before
-navigator.permissions
-  .query({ name: "geolocation" })
-  .then((permissionStatus) => {
-    switch (permissionStatus.state) {
-      case "granted":
-        const TARGET_POSITION = getTargetPosition()
-        const radius = getRadius()
-        watchId = window.navigator.geolocation.watchPosition(
-          (position) =>
-            locationSuccessCallback(position, TARGET_POSITION, radius),
-          errorCallback
-        )
-        break
-      case "denied":
-      case "prompt":
-      default:
-        break
-    }
+    const imageContainer = document.getElementById("locked-content-container")
+    if (imageContainer) {
+      imageContainer.addEventListener("userarrived", () => {
+        window.navigator.geolocation.clearWatch(watchId)
       })
+    }
+  }
+}