refactor: move lockedcontent webcomponent to standard html

This commit is contained in:
log101 2024-07-23 18:27:06 +03:00
parent d5bc7b98dd
commit 4f5a437c7c
6 changed files with 136 additions and 43 deletions

BIN
bun.lockb

Binary file not shown.

View File

@ -28,6 +28,7 @@
"clsx": "^2.1.1",
"dayjs": "^1.11.11",
"htmx.org": "^1.9.12",
"hyperscript.org": "^0.9.12",
"kysely": "^0.26.3",
"leaflet": "^1.9.4",
"lit": "^3.1.4",

6
src/env.d.ts vendored
View File

@ -7,4 +7,10 @@ export declare global {
interface Window {
htmx: any;
}
namespace astroHTML.JSX {
interface HTMLAttributes {
_?: any;
}
}
}

View File

@ -41,8 +41,10 @@
<script>
import htmx from "htmx.org";
import _hyperscript from "hyperscript.org";
window.htmx = htmx;
_hyperscript.browserInit();
</script>
</html>
<style is:global></style>

View File

@ -1,7 +1,10 @@
---
// Styles
import "@/styles/globals.css";
import "../styles/locked-page.css";
import "../styles/locked-content.css";
// Components
import Layout from "../layouts/Layout.astro";
import ShareButton from "../components/ShareButton";
import {
@ -14,6 +17,8 @@ import {
import { CalendarIcon } from "@radix-ui/react-icons";
import { Separator } from "@/components/ui/separator";
import type { ContentTable } from "@/lib/db";
// Dayjs
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import utc from "dayjs/plugin/utc";
@ -70,6 +75,44 @@ const dateFromNow = dayjs.utc(data?.created_at).from(dayjs.utc());
imageURL={`http://localhost:3000/images/${data?.blob_url}`}
targetPosition={data?.loc}></locked-content>
<div
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">
<img
id="content"
src={`http://localhost:3000/images/${data?.blob_url}`}
class="h-[450px] blur-2xl"
/>
<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
</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">
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"
>
Konum İzni Ver
</button>
</div>
</div>
</div>
</div>
</div>
<div
id="map"
class="w-full h-[450px] rounded"
@ -84,49 +127,7 @@ const dateFromNow = dayjs.utc(data?.created_at).from(dayjs.utc());
</p>
</div>
</main>
<script>
import { errorCallback } from "@/components/LockedContent/geolocation";
import { onLocationSuccess } from "@/scripts/initMap";
let watchId: number;
function updateCurrentLocation(position: GeolocationPosition) {
const lockedContent = document.getElementById("locked-content-component");
if (lockedContent) {
lockedContent.setAttribute(
"currentPosition",
`[${position.coords.latitude}, ${position.coords.longitude}]`
);
}
onLocationSuccess(position);
}
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;
}
});
window.addEventListener("askpermission", () => {
if (!watchId) {
watchId = window.navigator.geolocation.watchPosition(
updateCurrentLocation,
errorCallback
);
}
});
</script>
<script src="../components/locked-content.ts"></script>
<script src="../scripts/initMap.ts"></script>
<script src="../scripts/lockedContent.ts"></script>
</Layout>

View File

@ -0,0 +1,83 @@
import {
calculateDistance,
errorCallback,
} from "@/components/LockedContent/geolocation";
import { onLocationSuccess } from "@/scripts/initMap";
let watchId: number;
const targetLocation = document.getElementById("locked-content-container")
?.dataset.targetPosition;
const descriptionElement = document.getElementById(
"locked-content-description"
);
const locationPermissionButton = document.getElementById(
"location-permission-button"
);
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) {
return `${distance.toFixed(0)} M`;
}
}
function updateCurrentLocation(position: GeolocationPosition) {
const newPosition = position.coords;
if (targetLocation) {
const distance = calculateDistance(
[newPosition.latitude, newPosition.longitude],
JSON.parse(targetLocation)
);
const distanceText = generateDistanceText(distance);
if (descriptionElement)
descriptionElement.innerText = `Kalan mesafe: ${distanceText}`;
if (locationPermissionButton) locationPermissionButton.remove();
}
onLocationSuccess(position);
}
function startWatchingLocation() {
if (!watchId) {
watchId = window.navigator.geolocation.watchPosition(
updateCurrentLocation,
errorCallback
);
}
}
const lockedContentContainer = document.getElementById(
"locked-content-container"
);
lockedContentContainer?.addEventListener(
"askpermission",
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;
}
});
export { startWatchingLocation };