diff --git a/src/components/LockedContent/geolocation.ts b/src/components/LockedContent/geolocation.ts
index 73efd46..7462d99 100644
--- a/src/components/LockedContent/geolocation.ts
+++ b/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}`)
diff --git a/src/lib/domUtils.ts b/src/lib/domUtils.ts
index 5aec002..2ce7329 100644
--- a/src/lib/domUtils.ts
+++ b/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")
diff --git a/src/pages/x/index.astro b/src/pages/x/index.astro
index 08df6c3..0e6cef6 100644
--- a/src/pages/x/index.astro
+++ b/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
+ }
+ })
diff --git a/src/scripts/lockedContent.ts b/src/scripts/lockedContent.ts
index 7b69eee..ffa0f7b 100644
--- a/src/scripts/lockedContent.ts
+++ b/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
)
+
+ const imageContainer = document.getElementById("locked-content-container")
+ if (imageContainer) {
+ imageContainer.addEventListener("userarrived", () => {
+ window.navigator.geolocation.clearWatch(watchId)
+ })
+ }
}
}
-
-// 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
- }
- })