ignite-html-router/ignite-router.js

import { IgniteElement } from "../ignite-html/ignite-element.js";
import { IgniteTemplate, slot, div, html } from "../ignite-html/ignite-template.js";

class RouterLink extends IgniteElement {
    constructor() {
        super();
    }

    get properties() {
        return {
            active: false
        };
    }

    render() {
        return this.template
            .onClick((event) => this.onClick(event))
            .child(
                new slot(this)
                    .class(this.active, (value) => { return value ? "active" : null })
            );
    }

    onClick(event) {
        console.log("Router link was clicked, event:", event);
    }
}

class RouterView extends IgniteElement {
    constructor() {
        super();

        console.log("Added pop & push state events");
        window.addEventListener("popstate", (event) => this.popState(event));
        window.addEventListener("pushstate", (event) => this.pushState(event));
    }

    render() {
        return this.template;
    }

    pushState(event) {
        console.log("Window pushState:", event);
    }

    popState(event) {
        console.log("Window popState:", event);
    }
}

class RouterLinkTemplate extends IgniteTemplate {
    constructor(...children) {
        super("router-link", children);
    }
}

class RouterViewTemplate extends IgniteTemplate {
    constructor(...children) {
        super("router-view", children);
    }
}

customElements.define("router-link", RouterLink);
customElements.define("router-view", RouterView);

export {
    RouterLinkTemplate as RouterLink,
    RouterViewTemplate as RouterView
}