commit 85fb265651a9ad61bab074762f1ba4776fa44367 Author: Matt Mo Date: Tue Sep 8 15:44:26 2020 -0700 Working on initial router code. diff --git a/ignite-router.js b/ignite-router.js new file mode 100644 index 0000000..04fd162 --- /dev/null +++ b/ignite-router.js @@ -0,0 +1,57 @@ +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(); + } + + render() { + return this.template; + } +} + +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 +} \ No newline at end of file