refactor: move lockedcontent webcomponent to standard html

package.json

@@ -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",

src/env.d.ts

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

src/layouts/Layout.astro

@@ -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>

src/pages/[id].astro

@@ -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>

src/scripts/lockedContent.ts

@@ -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 };