feat: stop geoloaction callback after user has arrived
All checks were successful
/ Build (push) Successful in 34s

feat: automatically start watching if gelocation permission is given
This commit is contained in:
log101 2024-09-03 10:54:09 +03:00
parent 5445f62e2e
commit 1d06a06697
4 changed files with 33 additions and 28 deletions

View File

@ -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}`)

View File

@ -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")

View File

@ -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>

View File

@ -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)
})
}
}
}