120 lines
3.7 KiB
TypeScript
120 lines
3.7 KiB
TypeScript
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 homeTime = document.querySelector(".home-time");
|
|
if (homeTime != undefined) {
|
|
setInterval(() => {
|
|
let [hours, minutes, seconds] = homeTime.innerHTML
|
|
.split(" ")[0]
|
|
.split(":")
|
|
.map((x) => parseInt(x, 10));
|
|
const ampm = homeTime.innerHTML.split(" ")[1];
|
|
const time = new Date();
|
|
hours = ampm == "AM" ? hours : hours + 12;
|
|
time.setHours(hours, minutes, seconds);
|
|
|
|
const nextTime = time.valueOf() + 1000;
|
|
homeTime.innerHTML = formatAMPM(new Date(nextTime));
|
|
}, 1000);
|
|
}
|
|
|
|
function formatAMPM(date) {
|
|
var hours = date.getHours();
|
|
var minutes = date.getMinutes();
|
|
var seconds = date.getSeconds();
|
|
var ampm = hours >= 12 ? "PM" : "AM";
|
|
hours = hours % 12;
|
|
hours = hours ? hours : 12; // the hour '0' should be '12'
|
|
|
|
hours = hours < 10 ? "0" + hours : hours;
|
|
minutes = minutes < 10 ? "0" + minutes : minutes;
|
|
seconds = seconds < 10 ? "0" + seconds : seconds;
|
|
var strTime = hours + ":" + minutes + ":" + seconds + " " + ampm;
|
|
return strTime;
|
|
}
|
|
|
|
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);
|
|
}
|
|
}
|
|
});
|
|
})();
|