Pushing up first version of ignite tabs.

ignite-tabs.js

@@ -0,0 +1,124 @@
+import { IgniteElement } from "../ignite-html/ignite-element.js";
+import { IgniteCallback } from "../ignite-html/ignite-html.js";
+import { IgniteTemplate, slot, div, html } from "../ignite-html/ignite-template.js";
+
+IgniteTemplate.prototype.tab = function(name, active = false) {
+    //Set the starting class based on whether or not the tab is active.
+    if (active) {
+        this.class("tab-active");
+    } else {
+        this.class("tab-inactive");
+    }
+
+    //What we do is create an IgniteCallback that will get called when
+    //the tabchange event is raised. Upon disconnecting the callback we remove
+    //the event listener.
+    var callback = new IgniteCallback(e => {
+        if (e.tabName == name) {
+            this.element.classList.remove("tab-inactive");
+
+            if (!this.element.classList.contains("tab-active")) {
+                this.element.classList.add("tab-active");
+            }
+        } else {
+            this.element.classList.remove("tab-active");
+
+            if (!this.element.classList.contains("tab-inactive")) {
+                this.element.classList.add("tab-inactive");
+            }
+        }
+    }, () => {
+        window.removeEventListener("tabchange", callback.callback);
+    });
+
+    //Register our callback to the tabchange event.
+    window.addEventListener("tabchange", callback.callback);
+
+    //Add this callback to our template so that upon deconstruction our callback is destroyed correctly.
+    this._callbacks.push(callback);
+
+    return this;
+};
+
+class TabLink extends IgniteElement {
+    constructor() {
+        super();
+
+        this.tabChangeListener = e => this.update(e);
+        window.addEventListener("tabchange", this.tabChangeListener);
+    }
+
+    get properties() {
+        return {
+            active: false,
+            tabs: [],
+            target: null
+        };
+    }
+
+    render() {
+        return this.template
+            .onClick((event) => this.onClick(event))
+            .class(this.active, value => value ? "active" : null)
+            .child(new slot(this).class(this.active, value => value ? "active" : null));
+    }
+
+    update(event) {
+        if (event.tabName == this.target) {
+            this.active = true;
+            return;
+        }
+
+        for(var i = 0; i < this.tabs.length; i++) {
+            if (this.tabs[i] == e.tabName) {
+                this.active = true;
+                return;
+            }
+        }
+        
+        this.active = false;
+        return;
+    }
+
+    onClick(event) {
+        event.preventDefault();
+
+        var changeEvent = new Event("tabchange");
+        changeEvent.tabName = this.target;
+
+        window.dispatchEvent(changeEvent);
+    }
+
+    cleanup() {
+        window.removeEventListener("tabchange", this.tabChangeListener);
+    }
+}
+
+class TabLinkTemplate extends IgniteTemplate {
+    /**
+     * Initializes a new tab link template.
+     * @param {String} target The target tab to active when this is clicked.
+     * @param {String|String[]} routes Optional tabs that also set this link to active if active.
+     * @param  {...any} elements Elements to render within the link.
+     */
+    constructor(target, tabs, ...elements) {
+        super("tab-link", elements);
+
+        if (!tabs) {
+            tabs = [];
+        }
+
+        if (!Array.isArray(tabs)) {
+            tabs = [tabs];
+        }
+
+        this.property("target", target);
+        this.property("tabs", tabs);
+    }
+}
+
+customElements.define("tab-link", TabLink);
+
+export {
+    TabLinkTemplate as TabLink
+}