From e6b140068b633ae7508572e1f5ac8f9d4d9fdb26 Mon Sep 17 00:00:00 2001 From: log101 Date: Tue, 23 Jul 2024 22:32:26 +0300 Subject: [PATCH] feat: add css transition for unlock buton --- prettierrc.json => .prettierrc | 8 ++-- src/pages/[id].astro | 87 ++++++++++++++++++++-------------- src/scripts/lockedContent.ts | 71 +++++++++++++++++++-------- 3 files changed, 107 insertions(+), 59 deletions(-) rename prettierrc.json => .prettierrc (77%) diff --git a/prettierrc.json b/.prettierrc similarity index 77% rename from prettierrc.json rename to .prettierrc index d6bad6b..d9cf6b8 100644 --- a/prettierrc.json +++ b/.prettierrc @@ -1,18 +1,18 @@ { "endOfLine": "lf", - "printWidth": 120, + "printWidth": 80, "arrowParens": "avoid", "bracketSpacing": true, "htmlWhitespaceSensitivity": "css", "insertPragma": false, "bracketSameLine": true, "jsxSingleQuote": true, - "proseWrap": "preserve", + "proseWrap": "always", "quoteProps": "as-needed", "requirePragma": false, - "semi": false, + "semi": true, "singleQuote": false, "tabWidth": 2, - "trailingComma": "none", + "trailingComma": "es5", "useTabs": false } diff --git a/src/pages/[id].astro b/src/pages/[id].astro index 4dc412f..8060d08 100644 --- a/src/pages/[id].astro +++ b/src/pages/[id].astro @@ -40,14 +40,13 @@ const dateFromNow = dayjs.utc(data?.created_at).from(dayjs.utc()); --- -
+

+ class='scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl hover:underline'> Konulu Konum

-

+

Arkadaşınız size bir fotoğraf ve bir not bıraktı. Fakat fotoğrafı görebilmeniz için aşağıdaki konuma gitmeniz gerekiyor. Konuma yaklaştığınızda butona basıp fotoğrafı görüntüleyebilirsiniz. @@ -56,55 +55,74 @@ const dateFromNow = dayjs.utc(data?.created_at).from(dayjs.utc()); - + {data?.author}

{data?.description}

- +

{dateFromNow}
-
+ class='w-full h-[475px] overflow-hidden border border-zinc-200 shadow-sm p-4 rounded'> +
-
+
-
-

+ class='rounded-lg border bg-card text-card-foreground shadow-sm p-2'> +

+

Ne kadar yaklaştığını görmek için aşağıdaki butona bas.

@@ -114,20 +132,19 @@ const dateFromNow = dayjs.utc(data?.created_at).from(dayjs.utc());
+ id='map' + class='w-full h-[450px] rounded' + data-target-location={data?.loc}>
-
-

+

+

Fotoğrafın kilidi şu ana dek {data?.unlocked_counter} kez açıldı

- - - + + + diff --git a/src/scripts/lockedContent.ts b/src/scripts/lockedContent.ts index a092f01..4115362 100644 --- a/src/scripts/lockedContent.ts +++ b/src/scripts/lockedContent.ts @@ -8,6 +8,8 @@ let watchId: number; const targetLocation = document.getElementById("locked-content-container") ?.dataset.targetPosition; +// This element display the distance between the user and the +// target if geolocation permission is granted const descriptionElement = document.getElementById( "locked-content-description" ); @@ -16,8 +18,9 @@ const locationPermissionButton = document.getElementById( "location-permission-button" ); +// Generates a human readable destination text according to +// distance remaining function generateDistanceText(distance: number) { - // Update the proximity text according to the distance remaining if (distance > 1000) { return `${(distance / 1000).toFixed()} KM`; } else if (distance > 100) { @@ -25,23 +28,53 @@ function generateDistanceText(distance: number) { } } +// Update the elements according to distance remaining 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 (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 distanceText = generateDistanceText(distance); + if (unlockButton) { + if (buttonText) buttonText.innerText = "İçeriği Göster"; + if (lockIcon) lockIcon.classList.add("hidden"); + if (unlockIcon) unlockIcon.classList.remove("hidden"); + unlockButton.classList.remove("bg-primary", "hover:bg-primary/90"); + unlockButton.classList.add( + "transition-[background-color]", + "duration-1000" + ); + unlockButton.classList.add( + "animate-pulse", + "bg-indigo-600", + "hover:bg-indigo-700", + "hover:animate-none", + "border-2", + "border-indigo-800" + ); + } + } else { + const distanceText = generateDistanceText(distance); - if (descriptionElement) - descriptionElement.innerText = `Kalan mesafe: ${distanceText}`; + if (descriptionElement) + descriptionElement.innerText = `Kalan mesafe: ${distanceText}`; + } if (locationPermissionButton) locationPermissionButton.remove(); } + // Update leaflet controls onLocationSuccess(position); } @@ -63,21 +96,19 @@ lockedContentContainer?.addEventListener( startWatchingLocation ); -navigator.permissions - .query({ name: "geolocation" }) - .then((permissionStatus) => { - switch (permissionStatus.state) { - case "granted": - watchId = window.navigator.geolocation.watchPosition( - updateCurrentLocation, - errorCallback - ); - break; - case "denied": - case "prompt": - default: - break; - } - }); +navigator.permissions.query({ name: "geolocation" }).then(permissionStatus => { + switch (permissionStatus.state) { + case "granted": + watchId = window.navigator.geolocation.watchPosition( + updateCurrentLocation, + errorCallback + ); + break; + case "denied": + case "prompt": + default: + break; + } +}); export { startWatchingLocation };