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( 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,60 +52,51 @@ 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],
JSON.parse(targetLocation) 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) { unlockButton?.addEventListener("click", () => {
// If user has arrived to destination const image = document.getElementById("content");
// Transform locked button to reveal button const unlockButtonContainer = document.getElementById(
const unlockButton = document.getElementById("unlock-content-button"); "unlock-button-container"
const unlockIcon = document.getElementById("unlock-icon"); );
const lockIcon = document.getElementById("lock-icon"); incrementUnlockCounter(document.URL.slice(-12));
const buttonText = document.getElementById("button-text"); if (image) image.classList.remove("blur-2xl");
const description = document.getElementById("locked-content-description"); if (unlockButtonContainer) unlockButtonContainer.remove();
if (unlockButton) { });
if (buttonText) buttonText.innerText = "İçeriği Göster"; } else {
if (lockIcon) lockIcon.classList.add("hidden"); const distanceText = generateDistanceText(distance);
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", () => { if (descriptionElement)
const image = document.getElementById("content"); descriptionElement.innerText = `Kalan mesafe: ${distanceText}`;
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) if (locationPermissionButton) {
descriptionElement.innerText = `Kalan mesafe: ${distanceText}`; locationPermissionButton.remove();
}
if (locationPermissionButton) {
locationPermissionButton.remove();
}
} }
// Update leaflet controls // Update leaflet controls
@ -109,10 +116,11 @@ const lockedContentContainer = document.getElementById(
"locked-content-container" "locked-content-container"
); );
lockedContentContainer?.addEventListener( if (lockedContentContainer)
"askpermission", lockedContentContainer.addEventListener(
startWatchingLocation "askpermission",
); startWatchingLocation
);
navigator.permissions.query({ name: "geolocation" }).then(permissionStatus => { navigator.permissions.query({ name: "geolocation" }).then(permissionStatus => {
switch (permissionStatus.state) { switch (permissionStatus.state) {