Cleanup assets

slices/main/assets/js/app.ts

@@ -0,0 +1,87 @@
+import "@app/builds/tailwind.css";
+import "@main/css/app.css";
+import { md_gallery } from "./gallery.js";
+
+(function () {
+  document.addEventListener("DOMContentLoaded", function () {
+    window
+      .matchMedia("(prefers-color-scheme: dark)")
+      .addEventListener("change", (event) => {
+        localStorage.setItem("_x_darkMode", event.matches ? true : false);
+      });
+
+    if (window.hljs !== undefined) {
+      window.hljs.highlightAll();
+    }
+
+    const times = document.querySelectorAll("time");
+    times.forEach((time) => {
+      const oldDtime = Date.parse(time.dateTime);
+      time.innerHTML = new Date(oldDtime).toLocaleDateString(
+        navigator.language,
+        { weekday: "long", year: "numeric", month: "short", day: "numeric" },
+      );
+
+      md_gallery({
+        class_name: "grid gap-4 grid-cols-2 prose-img:m-0",
+      });
+
+      const mediaForm = document.getElementById("media_form");
+      if (mediaForm !== null) {
+        htmx.on("#media_form", "htmx:xhr:progress", function (evt) {
+          htmx
+            .find("#progress")
+            .setAttribute(
+              "value",
+              (evt.detail.loaded / evt.detail.total) * 100,
+            );
+        });
+      }
+    });
+
+    const videos = document.querySelectorAll("video");
+    videos.forEach((video) => {
+      video.addEventListener("click", () => {
+        const isPaused = video.paused;
+        video[isPaused ? "play" : "pause"]();
+        video.classList.toggle("u-none", !isPaused);
+      });
+    });
+
+    const mapContainer = document.getElementById("map");
+    const goBack = document.getElementById("go-back");
+    if (mapContainer !== null) {
+      if (goBack !== null) {
+        document.getElementById("go-back").addEventListener("click", () => {
+          history.back();
+        });
+      }
+
+      mapboxgl.accessToken =
+        "pk.eyJ1IjoiZG5pdHphIiwiYSI6ImNsZWIyY3ZzaTE0cjUzdm4xdnZ6czRlYjUifQ.FRETOXYRID6T2IoB7qqRLg";
+      var map = new mapboxgl.Map({
+        container: "map",
+        style: "mapbox://styles/mapbox/streets-v11",
+        maxZoom: 8,
+      });
+
+      const markers = JSON.parse(mapContainer.dataset["markers"]);
+
+      const bounds = new mapboxgl.LngLatBounds(markers[0], markers[0]);
+
+      for (var i = 0; i < markers.length; i++) {
+        bounds.extend(markers[i]);
+      }
+
+      map.fitBounds(bounds, { padding: 60 });
+
+      for (var i = 0; i < markers.length; i++) {
+        const marker = markers[i];
+        const el = document.createElement("div");
+        el.className = "map-marker";
+
+        new mapboxgl.Marker(el).setLngLat(marker).addTo(map);
+      }
+    }
+  });
+})();