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

50
src/scripts/lockedContent.ts
View File

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