Tabs now have a grouping option to allow multiple tab groups on the same page at the same time.

ignite-html-tabs.js

@@ -2,7 +2,14 @@ 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) {
+/**
+ * Makes this IgniteTemplate a tab that will become active or inactive based on the state of the tab.
+ * @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.
+ */
+IgniteTemplate.prototype.tab = function(name, group = null, active = false) {
     //Set the starting class based on whether or not the tab is active.
     if (active) {
         this.class("tab-active");
@@ -13,15 +20,15 @@ IgniteTemplate.prototype.tab = function(name, active = false) {
     //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 => {
+    var callback = new IgniteCallback(event => {
         if (this.element) {
-            if (e.tabName == name) {
+            if (event.name == name && event.group == group) {
                 this.element.classList.remove("tab-inactive");
 
                 if (!this.element.classList.contains("tab-active")) {
                     this.element.classList.add("tab-active");
                 }
-            } else {
+            } else if (event.group == group) {
                 this.element.classList.remove("tab-active");
 
                 if (!this.element.classList.contains("tab-inactive")) {
@@ -53,8 +60,9 @@ class TabLink extends IgniteElement {
     get properties() {
         return {
             active: false,
-            tabs: [],
+            name: null,
-            target: null
+            group: null,
+            secondary: null
         };
     }
 
@@ -66,27 +74,32 @@ class TabLink extends IgniteElement {
     }
 
     update(event) {
-        if (event.tabName == this.target) {
+        //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;
         }
 
-        for(var i = 0; i < this.tabs.length; i++) {
+        //See if this event matched any of the secondary tabs.
-            if (this.tabs[i] == e.tabName) {
+        for(var i = 0; i < this.secondary.length; i++) {
+            if (this.secondary[i] == event.name && this.group == event.group) {
                 this.active = true;
                 return;
             }
         }
         
-        this.active = false;
+        //Otherwise set this tab to inactive if it's active and the group matches.
-        return;
+        if (event.group == this.group && this.active) {
+            this.active = false;
+        }
     }
 
     onClick(event) {
         event.preventDefault();
 
         var changeEvent = new Event("tabchange");
-        changeEvent.tabName = this.target;
+        changeEvent.name = this.name;
+        changeEvent.group = this.group;
 
         window.dispatchEvent(changeEvent);
     }
@@ -99,23 +112,27 @@ class TabLink extends IgniteElement {
 class TabLinkTemplate extends IgniteTemplate {
     /**
      * Initializes a new tab link template.
-     * @param {String} target The target tab to active when this is clicked.
+     * @param {String} name The name of the tab this link is for and will set active to.
-     * @param {String|String[]} routes Optional tabs that also set this link to active if active.
+     * @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(target, tabs, ...elements) {
+    constructor(name, group, secondary, ...elements) {
         super("tab-link", elements);
 
-        if (!tabs) {
+        //If the secondary tabs is null, set it to an empty array.
-            tabs = [];
+        if (!secondary) {
+            secondary = [];
         }
 
-        if (!Array.isArray(tabs)) {
+        //If the secondary tabs is not an array then wrap it in one.
-            tabs = [tabs];
+        if (!Array.isArray(secondary)) {
+            secondary = [secondary];
         }
 
-        this.property("target", target);
+        this.property("name", name);
-        this.property("tabs", tabs);
+        this.property("group", group);
+        this.property("secondary", secondary);
     }
 }