65 lines
2 KiB
TypeScript
65 lines
2 KiB
TypeScript
import type { Routes } from "../models";
|
|
|
|
export default class Router {
|
|
routes: Routes;
|
|
el: HTMLElement;
|
|
onpagechange: (route: string) => void;
|
|
lazy: boolean;
|
|
|
|
constructor(
|
|
element: HTMLElement,
|
|
routes: Routes,
|
|
onpagechange: (route: string) => void,
|
|
lazy = false
|
|
) {
|
|
this.routes = routes;
|
|
this.el = element;
|
|
this.onpagechange = onpagechange;
|
|
this.lazy = lazy;
|
|
window.addEventListener("hashchange", this.onhashchange.bind(this));
|
|
this.onhashchange();
|
|
}
|
|
|
|
onhashchange() {
|
|
const hash = location.hash;
|
|
const hashSplit = hash.slice(1).split("/");
|
|
let didNavigate = false;
|
|
Object.keys(this.routes).forEach(async (route) => {
|
|
const routeSplit = route.split("/");
|
|
if (routeSplit.length <= hashSplit.length) {
|
|
let params = {};
|
|
let rigthRoute = true;
|
|
for (let i = 0; i < hashSplit.length && rigthRoute; i++) {
|
|
if (routeSplit[i] != undefined && routeSplit[i][0] == ":") {
|
|
if (routeSplit[i][1] == ":") {
|
|
params[routeSplit[i].substr(2)] = hashSplit.slice(i).join("/");
|
|
break;
|
|
} else {
|
|
params[routeSplit[i].substr(1)] = decodeURIComponent(
|
|
hashSplit[i]
|
|
);
|
|
}
|
|
} else if (routeSplit[i] != hashSplit[i]) rigthRoute = false;
|
|
}
|
|
|
|
if (rigthRoute) {
|
|
const routeName = routeSplit[0] == "hertzschlag" ? "" : routeSplit[0];
|
|
if (this.el.getAttribute("currentroute") != routeName || !this.lazy) {
|
|
this.el.setAttribute("currentroute", routeName);
|
|
let neww = this.routes[route](params);
|
|
this.el.innerHTML = "";
|
|
this.el.appendChild(neww);
|
|
}
|
|
this.onpagechange(route);
|
|
didNavigate = true;
|
|
}
|
|
}
|
|
});
|
|
if (!this.lazy && !didNavigate) {
|
|
this.el.innerHTML = "";
|
|
}
|
|
const navToggle = document.getElementById("nav-toggle") as HTMLInputElement;
|
|
if (navToggle && navToggle.checked) navToggle.checked = false;
|
|
this.onpagechange(hash.slice(1));
|
|
}
|
|
}
|