feat: add css transition for unlock buton
This commit is contained in:
parent
4f5a437c7c
commit
e6b140068b
|
|
@ -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
|
||||
}
|
||||
|
|
@ -40,14 +40,13 @@ const dateFromNow = dayjs.utc(data?.created_at).from(dayjs.utc());
|
|||
---
|
||||
|
||||
<Layout>
|
||||
<main class="flex flex-col gap-4">
|
||||
<main class='flex flex-col gap-4'>
|
||||
<div>
|
||||
<h1
|
||||
class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl hover:underline"
|
||||
>
|
||||
class='scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl hover:underline'>
|
||||
<a href=`${import.meta.env.PUBLIC_HOME_URL}`> Konulu Konum</a>
|
||||
</h1>
|
||||
<p class="leading-7 [&:not(:first-child)]:mt-6">
|
||||
<p class='leading-7 [&:not(:first-child)]:mt-6'>
|
||||
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());
|
|||
|
||||
<Separator />
|
||||
|
||||
<Card className="w-full">
|
||||
<Card className='w-full'>
|
||||
<CardHeader>
|
||||
<CardTitle>{data?.author}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p>{data?.description}</p>
|
||||
</CardContent>
|
||||
<CardFooter className="gap-2">
|
||||
<CardFooter className='gap-2'>
|
||||
<CalendarIcon />
|
||||
<p>{dateFromNow}</p>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
|
||||
<locked-content
|
||||
id="locked-content-component"
|
||||
id='locked-content-component'
|
||||
imageId={data?.url}
|
||||
imageURL={`http://localhost:3000/images/${data?.blob_url}`}
|
||||
targetPosition={data?.loc}></locked-content>
|
||||
|
||||
<div
|
||||
id="locked-content-container"
|
||||
id='locked-content-container'
|
||||
data-target-position={data?.loc}
|
||||
class="w-full h-[475px] overflow-hidden border border-zinc-200 shadow-sm p-4 rounded"
|
||||
>
|
||||
<div class="flex flex-col justify-center items-center image-wrapper">
|
||||
class='w-full h-[475px] overflow-hidden border border-zinc-200 shadow-sm p-4 rounded'>
|
||||
<div class='flex flex-col justify-center items-center image-wrapper'>
|
||||
<img
|
||||
id="content"
|
||||
id='content'
|
||||
src={`http://localhost:3000/images/${data?.blob_url}`}
|
||||
class="h-[450px] blur-2xl"
|
||||
class='h-[450px] blur-2xl'
|
||||
/>
|
||||
<div class="flex flex-col justify-center gap-4 overlay">
|
||||
<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"
|
||||
>
|
||||
İçerik Kilitli
|
||||
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'>
|
||||
<svg
|
||||
id='lock-icon'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width='24'
|
||||
height='24'
|
||||
fill='#ffffff'
|
||||
viewBox='0 0 256 256'>
|
||||
<path
|
||||
d='M208,80H176V56a48,48,0,0,0-96,0V80H48A16,16,0,0,0,32,96V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V96A16,16,0,0,0,208,80ZM96,56a32,32,0,0,1,64,0V80H96ZM208,208H48V96H208V208Zm-68-56a12,12,0,1,1-12-12A12,12,0,0,1,140,152Z'
|
||||
></path>
|
||||
</svg>
|
||||
<svg
|
||||
id='unlock-icon'
|
||||
class='hidden'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width='24'
|
||||
height='24'
|
||||
fill='#ffffff'
|
||||
viewBox='0 0 256 256'>
|
||||
<path
|
||||
d='M208,80H96V56a32,32,0,0,1,32-32c15.37,0,29.2,11,32.16,25.59a8,8,0,0,0,15.68-3.18C171.32,24.15,151.2,8,128,8A48.05,48.05,0,0,0,80,56V80H48A16,16,0,0,0,32,96V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V96A16,16,0,0,0,208,80Zm0,128H48V96H208V208Zm-68-56a12,12,0,1,1-12-12A12,12,0,0,1,140,152Z'
|
||||
></path>
|
||||
</svg>
|
||||
<p id='button-text'>İçerik Kilitli</p>
|
||||
</button>
|
||||
<div
|
||||
class="rounded-lg border bg-card text-card-foreground shadow-sm p-2"
|
||||
>
|
||||
<div class="pb-0 text-center flex flex-col gap-4">
|
||||
<p id="locked-content-description">
|
||||
class='rounded-lg border bg-card text-card-foreground shadow-sm p-2'>
|
||||
<div class='pb-0 text-center flex flex-col gap-4'>
|
||||
<p id='locked-content-description'>
|
||||
Ne kadar yaklaştığını görmek için aşağıdaki butona bas.
|
||||
</p>
|
||||
<button
|
||||
id="location-permission-button"
|
||||
_="on click send askpermission to me"
|
||||
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"
|
||||
>
|
||||
id='location-permission-button'
|
||||
_='on click send askpermission to me'
|
||||
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>
|
||||
|
|
@ -114,20 +132,19 @@ const dateFromNow = dayjs.utc(data?.created_at).from(dayjs.utc());
|
|||
</div>
|
||||
|
||||
<div
|
||||
id="map"
|
||||
class="w-full h-[450px] rounded"
|
||||
data-target-location={data?.loc}
|
||||
>
|
||||
id='map'
|
||||
class='w-full h-[450px] rounded'
|
||||
data-target-location={data?.loc}>
|
||||
</div>
|
||||
|
||||
<ShareButton client:only />
|
||||
<div class="flex justify-center">
|
||||
<p class="text-muted-foreground">
|
||||
<div class='flex justify-center'>
|
||||
<p class='text-muted-foreground'>
|
||||
Fotoğrafın kilidi şu ana dek <b>{data?.unlocked_counter}</b> kez açıldı
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<script src="../components/locked-content.ts"></script>
|
||||
<script src="../scripts/initMap.ts"></script>
|
||||
<script src="../scripts/lockedContent.ts"></script>
|
||||
<script src='../components/locked-content.ts'></script>
|
||||
<script src='../scripts/initMap.ts'></script>
|
||||
<script src='../scripts/lockedContent.ts'></script>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -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 };
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user