Removed tab link template in favor of tabButton extension. Added tabs api class similar to my route plugin. Cleaned up code and added new functionality.

ignite-html-tabs.js

@@ -7,14 +7,16 @@ import { IgniteTemplate, slot, div, html } from "../ignite-html/ignite-template.
  * @param {String} name The name of the tab.
  * @param {String} group The tab group to put this tab under, by default this is null.
  * @param {Boolean} active Whether or not this tab is active by default.
- * @returns {IgniteTemplate} This ignite template.
+ * @returns {IgniteTemplate} Returns this ignite template.
  */
  IgniteTemplate.prototype.tab = function(name, group = null, active = false) {
-    //Set the starting class based on whether or not the tab is active.
+    //Add the tab class to this element.
+    this.class("tab")
+
+    //If active, make this tab active.
     if (active) {
-        this.class("tab-active");
+        this.class("active");
-    } else {
+        Tabs.change(name, group);
-        this.class("tab-inactive");
     }
 
     //What we do is create an IgniteCallback that will get called when
@@ -23,17 +25,11 @@ import { IgniteTemplate, slot, div, html } from "../ignite-html/ignite-template.
     var callback = new IgniteCallback(event => {
         if (this.element) {
             if (event.name == name && event.group == group) {
-                this.element.classList.remove("tab-inactive");
+                if (!this.element.classList.contains("active")) {
-
+                    this.element.classList.add("active");
-                if (!this.element.classList.contains("tab-active")) {
-                    this.element.classList.add("tab-active");
                 }
             } else if (event.group == group) {
-                this.element.classList.remove("tab-active");
+                this.element.classList.remove("active");
-
-                if (!this.element.classList.contains("tab-inactive")) {
-                    this.element.classList.add("tab-inactive");
-                }
             }
         }
     }, () => {
@@ -49,109 +45,123 @@ import { IgniteTemplate, slot, div, html } from "../ignite-html/ignite-template.
     return this;
 }
 
-class TabLink extends IgniteElement {
+/**
-    constructor() {
+ * Makes this IgniteTemplate a tab button that will become active or inactive based on the current tab and change tabs when clicked.
-        super();
+ * @param {String} name The name of the tab that this button will set to active.
-
+ * @param {String} group The tab group the tab belongs to.
-        this.tabChangeListener = e => this.update(e);
+ * @param {Boolean} active Whether or not this button is active, indicating the tab is active.
-        window.addEventListener("tabchange", this.tabChangeListener);
+ * @returns {IgniteTemplate} Returns this ignite template.
-    }
-
-    get properties() {
-        return {
-            active: false,
-            name: null,
-            group: null,
-            secondary: 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 the name and group match, set this tab link to active.
-        if (this.name == event.name && this.group == event.group) {
-            this.active = true;
-            return;
-        }
-
-        //See if this event matched any of the secondary tabs.
-        for(var i = 0; i < this.secondary.length; i++) {
-            if (this.secondary[i] == event.name && this.group == event.group) {
-                this.active = true;
-                return;
-            }
-        }
-        
-        //Otherwise set this tab to inactive if it's active and the group matches.
-        if (event.group == this.group && this.active) {
-            this.active = false;
-        }
-    }
-
-    onClick(event) {
-        event.preventDefault();
-
-        var changeEvent = new Event("tabchange");
-        changeEvent.name = this.name;
-        changeEvent.group = this.group;
-
-        window.dispatchEvent(changeEvent);
-    }
-
-    cleanup() {
-        window.removeEventListener("tabchange", this.tabChangeListener);
-    }
-}
-
-class TabLinkTemplate extends IgniteTemplate {
-    /**
-     * Initializes a new tab link template.
-     * @param {String} name The name of the tab this link is for and will set active to.
-     * @param {String} group The name of the group this link belongs to, this is optional.
-     * @param {String|String[]} secondary Optional tabs that also set this link to active if active.
-     * @param  {...any} elements Elements to render within the link.
  */
-    constructor(name, group, secondary, ...elements) {
+IgniteTemplate.prototype.tabButton = function(name, group = null, active = false) {
-        super("tab-link", elements);
+    //Add the tab-btn class to this element.
+    this.class("tab-btn");
 
-        //If the secondary tabs is null, set it to an empty array.
+    //If active, make the button active.
-        if (!secondary) {
+    if (active) {
-            secondary = [];
+        this.class("active");
     }
 
-        //If the secondary tabs is not an array then wrap it in one.
+    //What we do is create an IgniteCallback that will get called when
-        if (!Array.isArray(secondary)) {
+    //the tabchange event is raised. Upon disconnecting the callback we remove
-            secondary = [secondary];
+    //the event listener.
+    var callback = new IgniteCallback(event => {
+        if (this.element) {
+            //See if the group matches.
+            if (event.group == group) {
+                if (event.name == name) {
+                    //Mark this button as active.
+                    if (!this.element.classList.contains("active")) {
+                        this.element.classList.add("active");
                     }
+                } else {
+                    //Mark this button as inactive.
+                    this.element.classList.remove("active");
+                }
+            }
+        }
+    }, () => {
+        window.removeEventListener("tabchange", callback.callback);
+    });
 
-        this.property("name", name);
+    //Register our callback to the tabchange event.
-        this.property("group", group);
+    window.addEventListener("tabchange", callback.callback);
-        this.property("secondary", secondary);
+
-    }
+    //Add this callback to our template so that upon deconstruction our callback is destroyed correctly.
+    this._callbacks.push(callback);
+
+    //Setup our on click to change tabs.
+    this.onClick(() => Tabs.change(name, group));
+
+    return this;
 }
 
 /**
- * Fires a change tab event that will cause the given tab to become active.
+ * A api class to help easily work with tabs.
- * @param {String} name The name of the tab to change to.
- * @param {String} group The name of the tab group if applicable.
  */
-function changeTab(name, group = null) {
+class Tabs {
-    var changeEvent = new Event("tabchange");
+    /**
-    changeEvent.name = name;
+     * Changes the given tab to active.
-    changeEvent.group = group;
+     * @param {String} name The name of the tab to change to.
+     * @param {String} group The name of the group this tab belongs to if any. Default is null.
+     * @param {Boolean} active Whether or not to make this tab active. Default is true.
+     */
+    static change(name, group = null, active = true) {
+        //Init the groups if needed.
+        if (Tabs.groups[group] == undefined) {
+            Tabs.groups[group] = { };
+        }
 
+        //Init the tabs if needed.
+        if (group == null && Tabs.tabs[name] == undefined) {
+            Tabs.tabs[name] = false;
+        }
+
+        //If this tab is supposed to be active make that happen.
+        if (active) {
+            if (group) {
+                //Reset all tabs
+                Object.keys(Tabs.groups[group]).forEach(key => Tabs.groups[group][key] = false);
+
+                //Set this tab to active.
+                Tabs.groups[group][name] = true;
+            } else {
+                //Reset all tabs
+                Object.keys(Tabs.tabs).forEach(key => Tabs.tabs[key] = false);
+
+                //Set this tab to active.
+                Tabs.groups[group][name] = true;
+            }
+        } else {
+            //Set this tab to inactive.
+            if (group) {
+                Tabs.groups[group][name] = false;
+            } else {
+                Tabs.tabs[name] = false;
+            }
+        }
+
+        //Create a tab change event and fire it.
+        var changeEvent = new Event("tabchange");
+        changeEvent.name = (active ? name : "");
+        changeEvent.group = group;
         window.dispatchEvent(changeEvent);
+    }
+
+    /**
+     * Returns whether or not the given tab is active.
+     * @param {String} name The name of the tab.
+     * @param {String} group The name of the group this tab belongs to. Default is null.
+     */
+    static isActive(name, group = null) {
+        return ((group && Tabs.groups[group] != undefined && Tabs.groups[group][name]) || (group == null && Tabs.tabs[name] != undefined && Tabs.tabs[name])) ? true : false;
+    }
 }
 
-customElements.define("tab-link", TabLink);
+Tabs.groups = { };
+Tabs.tabs = { };
+
+window.Tabs = Tabs;
 
 export {
-    TabLinkTemplate as TabLink,
+    Tabs
-    changeTab as changeTab
 }