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

feat: reveal image when unlock button is clicked

Browse Source
This commit is contained in:
log101 2024-07-23 22:45:07 +03:00
parent e6b140068b
commit 05a5b436d1
3 changed files with 26 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/LockedContent/templates.ts
View File

@ -8,8 +8,7 @@ function permissionButtonTemplate(onClickHandler: () => void) {
<div class="flex flex-col justify-center gap-4 overlay">
<button
id="unlock-content-button"
class="inline-flex items-center justify-center whitespace-nowrap font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-11 rounded-md text-lg p-6 text-md"
>
class="inline-flex items-center justify-center whitespace-nowrap font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-11 rounded-md text-lg p-6 text-md">
İçerik Kilitli
</button>
<div class="rounded-lg border bg-card text-card-foreground shadow-sm p-2">
@ -19,8 +18,7 @@ function permissionButtonTemplate(onClickHandler: () => void) {
</p>
<button
@click="${onClickHandler}"
class="inline-flex items-center justify-center whitespace-nowrap font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 text-primary-foreground h-9 rounded-md px-3 bg-green-700 hover:bg-green-600 text-md"
>
class="inline-flex items-center justify-center whitespace-nowrap font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 text-primary-foreground h-9 rounded-md px-3 bg-green-700 hover:bg-green-600 text-md">
Konum İzni Ver
</button>
</div>
@ -34,8 +32,7 @@ function permissionDeniedButtonTemplate() {
return html`<div class="flex flex-col justify-center gap-4 overlay">
<button
id="unlock-content-button"
class="inline-flex gap-2 items-center justify-center whitespace-nowrap font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-11 rounded-md text-lg p-6 text-md"
>
class="inline-flex gap-2 items-center justify-center whitespace-nowrap font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-11 rounded-md text-lg p-6 text-md">
${lockSVG}
<p>İçerik Kilitli</p>
</button>
@ -55,8 +52,7 @@ function lockedButtonTemplate(proximityText: string | undefined) {
return html`<div class="flex flex-col justify-center gap-4 overlay">
<button
id="unlock-content-button"
class="inline-flex gap-2 items-center justify-center whitespace-nowrap font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-11 rounded-md text-lg p-6 text-md"
>
class="inline-flex gap-2 items-center justify-center whitespace-nowrap font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-11 rounded-md text-lg p-6 text-md">
${lockSVG}
<p>İçerik Kilitli</p>
</button>
@ -78,8 +74,7 @@ function unlockedButtonTemplate(onClickHandler: () => void) {
<button
@click="${onClickHandler}"
id="unlock-content-button"
class="inline-flex gap-2 items-center justify-center whitespace-nowrap font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 text-primary-foreground h-11 rounded-md text-lg p-6 animate-pulse bg-indigo-600 hover:bg-indigo-700 hover:animate-none border-2 border-indigo-800"
>
class="inline-flex gap-2 items-center justify-center whitespace-nowrap font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 text-primary-foreground h-11 rounded-md text-lg p-6 animate-pulse bg-indigo-600 hover:bg-indigo-700 hover:animate-none border-2 border-indigo-800 transition-1000">
${unlockSVG}
<p>İçeriğin Kilidi Açıldı</p>
</button>

8
src/pages/[id].astro
View File

@ -82,12 +82,14 @@ const dateFromNow = dayjs.utc(data?.created_at).from(dayjs.utc());
<img
id='content'
src={`http://localhost:3000/images/${data?.blob_url}`}
class='h-[450px] blur-2xl'
class='h-[450px] blur-2xl transition-all duration-1000'
/>
<div class='flex flex-col justify-center gap-4 overlay'>
<div
id='unlock-button-container'
class='flex flex-col justify-center gap-4 overlay'>
<button
id='unlock-content-button'
class='inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-11 rounded-md text-lg p-6 text-md'>
class='transition-[background-color] duration-1000 inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-11 rounded-md text-lg p-6 text-md'>
<svg
id='lock-icon'
xmlns='http://www.w3.org/2000/svg'

21
src/scripts/lockedContent.ts
View File

@ -45,24 +45,35 @@ function updateCurrentLocation(position: GeolocationPosition) {
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(
"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"
);
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"
);
if (image) image.classList.remove("blur-2xl");
if (unlockButtonContainer) unlockButtonContainer.remove();
});
}
} else {
const distanceText = generateDistanceText(distance);