log101/konulu-konum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add DOM utility functions

Browse Source
This commit is contained in:
log101 2024-07-26 00:03:56 +03:00
parent 9e798f1b15
commit 193b8604b6
1 changed files with 63 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/scripts/lockedContent.ts
View File

@ -14,10 +14,26 @@ const targetLocation = document.getElementById("locked-content-container")
const descriptionElement = document.getElementById( const descriptionElement = document.getElementById(
"locked-content-description" "locked-content-description"
); );
const locationPermissionButton = document.getElementById( const locationPermissionButton = document.getElementById(
"location-permission-button" "location-permission-button"
); );
const unlockButton = document.getElementById("unlock-content-button");
const unlockIcon = document.getElementById("unlock-icon");
const lockIcon = document.getElementById("lock-icon");
const buttonText = document.getElementById("button-text");
const description = document.getElementById("locked-content-description");
function updateText(elemId: string, text: string) {
const elem = document.getElementById(elemId);
if (elem) elem.innerText = text;
else console.error("Element could not be found!");
}
function toggleClass(elemId: string, className: string) {
const elem = document.getElementById(elemId);
if (elem) elem.classList.toggle(className);
else console.error("Element could not be found!");
}
if (locationPermissionButton) if (locationPermissionButton)
locationPermissionButton.addEventListener("click", startWatchingLocation); locationPermissionButton.addEventListener("click", startWatchingLocation);
@ -36,7 +52,7 @@ function generateDistanceText(distance: number) {
function updateCurrentLocation(position: GeolocationPosition) { function updateCurrentLocation(position: GeolocationPosition) {
const newPosition = position.coords; const newPosition = position.coords;
if (targetLocation) { if (!targetLocation) return;
// Calculate the distance remaining // Calculate the distance remaining
const distance = calculateDistance( const distance = calculateDistance(
[newPosition.latitude, newPosition.longitude], [newPosition.latitude, newPosition.longitude],
@ -46,19 +62,12 @@ function updateCurrentLocation(position: GeolocationPosition) {
if (distance < 100) { if (distance < 100) {
// If user has arrived to destination // If user has arrived to destination
// Transform locked button to reveal button // Transform locked button to reveal button
const unlockButton = document.getElementById("unlock-content-button"); updateText("button-text", "İçeriği Göster");
const unlockIcon = document.getElementById("unlock-icon"); toggleClass("lock-icon", "hidden");
const lockIcon = document.getElementById("lock-icon"); toggleClass("unlock-icon", "hidden");
const buttonText = document.getElementById("button-text"); updateText("locked-content-description", "İçeriği görmek için butona bas!");
const description = document.getElementById("locked-content-description"); unlockButton?.classList.remove("bg-primary", "hover:bg-primary/90");
if (unlockButton) { unlockButton?.classList.add(
if (buttonText) buttonText.innerText = "İçeriği Göster";
if (lockIcon) lockIcon.classList.add("hidden");
if (unlockIcon) unlockIcon.classList.remove("hidden");
if (description)
description.innerText = "İçeriği görmek için butona bas!";
unlockButton.classList.remove("bg-primary", "hover:bg-primary/90");
unlockButton.classList.add(
"bg-indigo-600", "bg-indigo-600",
"hover:bg-indigo-700", "hover:bg-indigo-700",
"hover:animate-none", "hover:animate-none",
@ -66,11 +75,11 @@ function updateCurrentLocation(position: GeolocationPosition) {
"border-indigo-800" "border-indigo-800"
); );
setTimeout(() => { setTimeout(() => {
unlockButton.classList.remove("duration-1000"); unlockButton?.classList.remove("duration-1000");
unlockButton.classList.add("animate-pulse"); unlockButton?.classList.add("animate-pulse");
}, 800); }, 800);
unlockButton.addEventListener("click", () => { unlockButton?.addEventListener("click", () => {
const image = document.getElementById("content"); const image = document.getElementById("content");
const unlockButtonContainer = document.getElementById( const unlockButtonContainer = document.getElementById(
"unlock-button-container" "unlock-button-container"
@ -79,7 +88,6 @@ function updateCurrentLocation(position: GeolocationPosition) {
if (image) image.classList.remove("blur-2xl"); if (image) image.classList.remove("blur-2xl");
if (unlockButtonContainer) unlockButtonContainer.remove(); if (unlockButtonContainer) unlockButtonContainer.remove();
}); });
}
} else { } else {
const distanceText = generateDistanceText(distance); const distanceText = generateDistanceText(distance);
@ -90,7 +98,6 @@ function updateCurrentLocation(position: GeolocationPosition) {
if (locationPermissionButton) { if (locationPermissionButton) {
locationPermissionButton.remove(); locationPermissionButton.remove();
} }
}
// Update leaflet controls // Update leaflet controls
onLocationSuccess(position); onLocationSuccess(position);
@ -109,10 +116,11 @@ const lockedContentContainer = document.getElementById(
"locked-content-container" "locked-content-container"
); );
lockedContentContainer?.addEventListener( if (lockedContentContainer)
lockedContentContainer.addEventListener(
"askpermission", "askpermission",
startWatchingLocation startWatchingLocation
); );
navigator.permissions.query({ name: "geolocation" }).then(permissionStatus => { navigator.permissions.query({ name: "geolocation" }).then(permissionStatus => {
switch (permissionStatus.state) { switch (permissionStatus.state) {