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

118
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,60 +52,51 @@ function generateDistanceText(distance: number) {
function updateCurrentLocation(position: GeolocationPosition) {
const newPosition = position.coords;
if (targetLocation) {
// Calculate the distance remaining
const distance = calculateDistance(
[newPosition.latitude, newPosition.longitude],
JSON.parse(targetLocation)
if (!targetLocation) return;
// Calculate the distance remaining
const distance = calculateDistance(
[newPosition.latitude, newPosition.longitude],
JSON.parse(targetLocation)
);
if (distance < 100) {
// If user has arrived to destination
// Transform locked button to reveal button
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",
"border-2",
"border-indigo-800"
);
setTimeout(() => {
unlockButton?.classList.remove("duration-1000");
unlockButton?.classList.add("animate-pulse");
}, 800);
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(
"bg-indigo-600",
"hover:bg-indigo-700",
"hover:animate-none",
"border-2",
"border-indigo-800"
);
setTimeout(() => {
unlockButton.classList.remove("duration-1000");
unlockButton.classList.add("animate-pulse");
}, 800);
unlockButton?.addEventListener("click", () => {
const image = document.getElementById("content");
const unlockButtonContainer = document.getElementById(
"unlock-button-container"
);
incrementUnlockCounter(document.URL.slice(-12));
if (image) image.classList.remove("blur-2xl");
if (unlockButtonContainer) unlockButtonContainer.remove();
});
} else {
const distanceText = generateDistanceText(distance);
unlockButton.addEventListener("click", () => {
const image = document.getElementById("content");
const unlockButtonContainer = document.getElementById(
"unlock-button-container"
);
incrementUnlockCounter(document.URL.slice(-12));
if (image) image.classList.remove("blur-2xl");
if (unlockButtonContainer) unlockButtonContainer.remove();
});
}
} else {
const distanceText = generateDistanceText(distance);
if (descriptionElement)
descriptionElement.innerText = `Kalan mesafe: ${distanceText}`;
}
if (descriptionElement)
descriptionElement.innerText = `Kalan mesafe: ${distanceText}`;
}
if (locationPermissionButton) {
locationPermissionButton.remove();
}
if (locationPermissionButton) {
locationPermissionButton.remove();
}
// Update leaflet controls
@ -109,10 +116,11 @@ const lockedContentContainer = document.getElementById(
"locked-content-container"
);
lockedContentContainer?.addEventListener(
"askpermission",
startWatchingLocation
);
if (lockedContentContainer)
lockedContentContainer.addEventListener(
"askpermission",
startWatchingLocation
);
navigator.permissions.query({ name: "geolocation" }).then(permissionStatus => {
switch (permissionStatus.state) {