Updated tab switching logic

Author: edcarroll

components/tabs/tab.ts

@@ -14,6 +14,8 @@ export class SuiTab {
         }
     }
 
+    public index:number;
+
     private _content:SuiTabContent;
 
     public set content(content:SuiTabContent) {
@@ -27,7 +29,10 @@ export class SuiTab {
     private _stateObserver: Observer<SuiTab>;
 
     constructor() {
-        this.stateChanged$ = new Observable<SuiTab>((observer:any) => this._stateObserver = observer);
+        this.stateChanged$ = new Observable<SuiTab>((observer:any) => {
+            this._stateObserver = observer;
+            this._stateObserver.next(this);
+        });
     }
 
     private _isActive:boolean = false;
@@ -39,7 +44,9 @@ export class SuiTab {
     public set isActive(value:boolean) {
         var change = this._isActive != value;
         this._isActive = value;
-        this._content.isActive = value;
+        if (this._content) {
+            this._content.isActive = value;
+        }
         this.stateObserverNext(change);
         this.isActiveChange.emit(this._isActive);
 
@@ -62,7 +69,7 @@ export class SuiTab {
     }
 
     private stateObserverNext(change:boolean) {
-        if (change) {
+        if (change && this._stateObserver) {
             this._stateObserver.next(this);
         }
     }

components/tabs/tabset.ts

@@ -41,7 +41,7 @@ export class SuiTabset implements AfterContentInit {
             throw new Error("You cannot have no tabs!");
         }
         //For every content header we have managed to find,
-        this._loadedTabs.forEach((t:SuiTab) => {
+        this._loadedTabs.forEach((t:SuiTab, i:number) => {
             //Assuming they have an associated content
             if (!t.content) {
                 //Link the content header with the content with the same ID excluding ones that are already linked
@@ -56,6 +56,8 @@ export class SuiTabset implements AfterContentInit {
                 t.content = possibleContents.pop();
             }
 
+            t.index = i;
+
             //Next observe the content's state to catch any changes made anywhere
             t.stateChanged$.subscribe((t:SuiTab) => this.tabStateChanged(t));
         });
@@ -81,8 +83,8 @@ export class SuiTabset implements AfterContentInit {
             this._activeTab = tab;
         }
         //Otherwise check there are no active tabs
-        else if (this._activeTab && !this._loadedTabs.filter((tH:SuiTab) => tH.isActive).length) {
-            this.activateClosestTab(tab);
+        else if (this._activeTab && !this._loadedTabs.find((tH:SuiTab) => tH.isActive)) {
+            this.activateClosestTab(this._activeTab);
         }
 
         //Check if the content is now disabled, and if so if is currently active
@@ -114,13 +116,14 @@ export class SuiTabset implements AfterContentInit {
     private activateClosestTab(tab:SuiTab) {
         //Grab a list of all of the loaded tabs that aren't disabled (excluding the one we are leaving)
         var availableTabs = this._loadedTabs
-            .filter((tH:SuiTab) => !tH.isDisabled || tH == tab);
+            .filter((tH:SuiTab) => !tH.isDisabled);
 
-        var tabIndex = availableTabs
-            .findIndex((tH:SuiTab) => tH == tab);
+        var tabIndex = tab.index;
 
-        //Go to the previous content, unless it is the 1st content.
-        tabIndex += (tabIndex ? -1 : 1);
+        // Only change the tabIndex if we have to.
+        if (tabIndex >= availableTabs.length) {
+            tabIndex = availableTabs.length - 1;
+        }
 
         availableTabs[tabIndex].isActive = true;
         //This if we just activated a disabled content, not to worry as it will bubble through

demo/app/pages/tabs/tabs.page.ts

@@ -92,7 +92,7 @@ export class TabsPage {
 <sui-tabset>
     <div class="ui top attached tabular menu">
         <a class="item" suiTabHeader="static">Static</a>
-        <a class="item" *ngFor="let tab of tabs; let i = index" [suiTabHeader]="i">{{ tab.header }}</a>
+        <a class="item" *ngFor="let tab of tabs; let i = index" [suiTabHeader]="i" [(isActive)]="active[i]">{{ tab.header }}</a>
     </div>
     <div class="ui bottom attached segment" *ngFor="let tab of tabs; let i = index" [suiTabContent]="i">{{ tab.content }}</div>
     <div class="ui bottom attached segment" suiTabContent="static">
@@ -149,18 +149,21 @@ export class TabExampleProperties {
     template: new TabsPage().exampleDynamicTemplate
 })
 export class TabExampleDynamic {
+    public active:boolean[] = [];
     public tabs = [
         { header: "1st", content: "Dynamic content" },
         { header: "2nd", content: "More content" },
         { header: "3rd", content: "Even more content" }
     ];
     public addTab() {
+        this.active.push(true);
         this.tabs.push({
             header: "New",
             content: "Another dynamic tab"
         });
     };
     public removeTab() {
+        this.active.pop();
         this.tabs.pop();
     }
 }