initial commit

2026-01-28 07:02:55 +01:00
commit 1ab026c35c
37 changed files with 4447 additions and 0 deletions
--- a/js/router.js
+++ b/js/router.js
@@ -0,0 +1,155 @@
+class Router {
+    constructor() {
+        this.routes = new Map();
+        this.currentRoute = null;
+        this.outlet = null;
+        this.beforeNavigate = null;
+        this.afterNavigate = null;
+        
+        window.addEventListener('hashchange', () => this.handleRouteChange());
+    }
+
+    setOutlet(element) {
+        this.outlet = element;
+    }
+
+    register(path, componentTag) {
+        this.routes.set(path, componentTag);
+        return this;
+    }
+
+    parseHash() {
+        const hash = window.location.hash.slice(1) || '/';
+        const [path, queryString] = hash.split('?');
+        const params = new URLSearchParams(queryString || '');
+        
+        return { path, params: Object.fromEntries(params) };
+    }
+
+    matchRoute(path) {
+        if (this.routes.has(path)) {
+            return { componentTag: this.routes.get(path), params: {} };
+        }
+        
+        for (const [routePath, componentTag] of this.routes) {
+            const routeParts = routePath.split('/');
+            const pathParts = path.split('/');
+            
+            if (routeParts.length !== pathParts.length) continue;
+            
+            const params = {};
+            let match = true;
+            
+            for (let i = 0; i < routeParts.length; i++) {
+                if (routeParts[i].startsWith(':')) {
+                    params[routeParts[i].slice(1)] = pathParts[i];
+                } else if (routeParts[i] !== pathParts[i]) {
+                    match = false;
+                    break;
+                }
+            }
+            
+            if (match) {
+                return { componentTag, params };
+            }
+        }
+        
+        return null;
+    }
+
+    async handleRouteChange() {
+        const { path, params: queryParams } = this.parseHash();
+        const match = this.matchRoute(path);
+        
+        if (this.beforeNavigate) {
+            const shouldContinue = await this.beforeNavigate(path);
+            if (!shouldContinue) return;
+        }
+        
+        if (!match) {
+            this.renderNotFound();
+            return;
+        }
+        
+        const { componentTag, params: routeParams } = match;
+        
+        this.currentRoute = {
+            path,
+            params: { ...routeParams, ...queryParams },
+            componentTag
+        };
+        
+        this.render();
+        
+        if (this.afterNavigate) {
+            this.afterNavigate(this.currentRoute);
+        }
+    }
+
+    render() {
+        if (!this.outlet || !this.currentRoute) return;
+        
+        const { componentTag, params } = this.currentRoute;
+        const oldComponent = this.outlet.firstElementChild;
+        const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        
+        const component = document.createElement(componentTag);
+        
+        Object.entries(params).forEach(([key, value]) => {
+            component.setAttribute(`data-${key}`, value);
+        });
+        
+        if (prefersReducedMotion || !oldComponent) {
+            if (oldComponent) oldComponent.remove();
+            this.outlet.appendChild(component);
+            return;
+        }
+        
+        component.classList.add('animate__animated', 'animate__fadeIn', 'animate__faster');
+        oldComponent.classList.add('animate__animated', 'animate__fadeOut', 'animate__faster');
+        
+        const fallbackTimer = setTimeout(() => {
+            oldComponent.remove();
+            this.outlet.appendChild(component);
+        }, 300);
+        
+        oldComponent.addEventListener('animationend', () => {
+            clearTimeout(fallbackTimer);
+            oldComponent.remove();
+            this.outlet.appendChild(component);
+        }, { once: true });
+    }
+
+    renderNotFound() {
+        if (!this.outlet) return;
+        
+        this.outlet.innerHTML = '';
+        const notFound = document.createElement('page-not-found');
+        this.outlet.appendChild(notFound);
+    }
+
+    navigate(path, params = {}) {
+        let url = `#${path}`;
+        
+        if (Object.keys(params).length > 0) {
+            const queryString = new URLSearchParams(params).toString();
+            url += `?${queryString}`;
+        }
+        
+        window.location.hash = url.slice(1);
+    }
+
+    back() {
+        window.history.back();
+    }
+
+    forward() {
+        window.history.forward();
+    }
+
+    getCurrentRoute() {
+        return this.currentRoute;
+    }
+}
+
+export const router = new Router();