tab wip

ionic/components/nav/nav-base.js

@@ -197,7 +197,11 @@ export class NavBase {
     return promise;
   }
 
-  switchActive(enteringItem, opts = {}) {
+  select(enteringItem, opts = {}) {
+    if (!enteringItem || this.isTransitioning()) {
+      return;
+    }
+
     opts.animation = 'none';
 
     let leavingItem = this.getActive() || new NavItem();
@@ -206,8 +210,6 @@ export class NavBase {
     leavingItem.willCache();
 
     this.transition(enteringItem, leavingItem, opts, () => {
-      // transition completed, destroy the leaving item
-      console.log('switchActive comlete')
     });
   }
 
@@ -492,7 +494,7 @@ export class NavBase {
   }
 
   isActive(item) {
-    return (item && item.stage === ACTIVE_STATE);
+    return (item && item.state === ACTIVE_STATE);
   }
 
   clear() {

ionic/components/nav/nav.js

@@ -9,9 +9,6 @@ import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
 import {Compiler} from 'angular2/angular2';
 
 import {NavBase} from './nav-base';
-import {NavController} from './nav-controller';
-import {NavItem, NavParams} from './nav-item';
-import {Tabs} from '../tabs/tabs';
 import {SwipeHandle} from './swipe-handle';
 import {IonicComponent} from '../../config/component';
 

ionic/components/nav/test/basic/pages/second-page.js

@@ -9,20 +9,15 @@ import {ThirdPage} from './third-page';
 @View({
   template: `
     <ion-navbar *navbar><ion-title>Second Page Header</ion-title></ion-navbar>
-
     <ion-content class="padding">
-
       <p>
         <button class="button" (click)="pop()">Pop (Go back to 1st)</button>
       </p>
-
       <p>
         <button class="button" (click)="push()">Push (Go to 3rd)</button>
       </p>
-
       <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
       <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
-
     </ion-content>
   `,
   directives: [NavbarTemplate, Navbar, Content]

ionic/components/nav/test/basic/pages/third-page.js

@@ -8,16 +8,12 @@ import {NavController, NavbarTemplate, Navbar, Content} from 'ionic/ionic';
 @View({
   template: `
     <ion-navbar *navbar><ion-title>Third Page Header</ion-title></ion-navbar>
-
     <ion-content class="padding">
-
       <p>
         <button class="button" (click)="pop()">Pop (Go back to 2nd)</button>
       </p>
-
       <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
       <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
-
     </ion-content>
   `,
   directives: [NavbarTemplate, Navbar, Content]

ionic/components/tabs/tab-button.js

@@ -24,14 +24,14 @@ export class TabButton {
   }
 
   onInit() {
-    this.btnId = 'tab-button-' + this.tab.id;
+    let id = this.tab.item.id
-    this.panelId = 'tab-panel-' + this.tab.id;
+    this.btnId = 'tab-button-' + id;
+    this.panelId = 'tab-panel-' + id;
   }
 
   onClick(ev) {
     ev.stopPropagation();
     ev.preventDefault();
-
+    this.tabs.select(this.tab);
-    this.tabs.selectTab(this.tab);
   }
 }

ionic/components/tabs/tab.js

@@ -54,12 +54,12 @@ export class Tab {
     this.navBase = new NavBase(parentNavBase, compiler, elementRef, loader, injector);
     this.parentNavBase = parentNavBase;
 
-    this.tabItem = new NavItem(parentNavBase);
+    this.item = new NavItem(parentNavBase);
-    this.tabItem.instance = this
+    this.item.instance = this
-    tabs.addTab(this.tabItem);
+    tabs.add(this.item);
 
-    this.panelId = 'tab-panel-' + this.tabItem.id;
+    this.panelId = 'tab-panel-' + this.item.id;
-    this.labeledBy = 'tab-button-' + this.tabItem.id;
+    this.labeledBy = 'tab-button-' + this.item.id;
 
     this.elementRef = elementRef;
 
@@ -68,15 +68,14 @@ export class Tab {
     this.sections = parentNavBase.panes['_n'].sections;
     this.navBase.panes['_n'] = this;
 
-
     this.domElement = elementRef.domElement;
     this.config = Nav.config.invoke(this);
 
-    console.log('Tab constructor', this.id, ' parentNavBase:', parentNavBase);
+    console.log('Tab constructor', this.item.id, ' parentNavBase:', parentNavBase);
   }
 
   get isSelected() {
-    return this.parentNavBase.isActive(this);
+    return this.parentNavBase.isActive(this.item);
   }
 
 }

ionic/components/tabs/tabs.js

@@ -55,11 +55,11 @@ export class Tabs {
     this.config = Tabs.config.invoke(this);
   }
 
-  addTab(tabItem) {
+  add(tabItem) {
     this.navBase.add(tabItem);
 
     if (this.navBase.length() === 1) {
-      this.selectTab(tabItem.instance);
+      this.select(tabItem.instance);
     }
   }
 
@@ -67,10 +67,8 @@ export class Tabs {
     return this.navBase.instances();
   }
 
-  selectTab(tabInstance) {
+  select(tabInstance) {
-    let enteringItem = this.navBase.findByInstance(tabInstance);
+    this.navBase.select( this.navBase.findByInstance(tabInstance) );
-
-    this.navBase.switchActive(enteringItem);
   }
 
 }