tabs wip

ionic/components/nav/nav-base.js

@@ -117,18 +117,14 @@ export class NavBase {
     let resolve;
     let promise = new Promise(res => { resolve = res; });
 
-    // default the direction to "forward"
-    opts.direction = opts.direction || 'forward';
-
-    if(opts.animate === false) {
-      opts.animation = 'none';
-    }
-
     // do not animate if this is the first in the stack
     if (!this.items.length) {
       opts.animation = 'none';
     }
 
+    // default the direction to "forward"
+    opts.direction = opts.direction || 'forward';
+
     // the active item is going to be the leaving one (if one exists)
     let leavingItem = this.getActive() || new NavItem();
     leavingItem.shouldDestroy = false;
@@ -154,10 +150,6 @@ export class NavBase {
       return Promise.reject();
     }
 
-    if(opts.animate === false) {
-      opts.animation = 'none';
-    }
-
     let resolve;
     let promise = new Promise(res => { resolve = res; });
 
@@ -175,7 +167,7 @@ export class NavBase {
     // Note: we might not have an entering item if this is the only
     // item on the history stack.
     let enteringItem = this.getPrevious(leavingItem);
-    if(enteringItem) {
+    if (enteringItem) {
       // start the transition
       this.transition(enteringItem, leavingItem, opts, () => {
         // transition completed, destroy the leaving item
@@ -195,7 +187,11 @@ export class NavBase {
       return callback();
     }
 
-    opts.isAnimated = (opts.animation !== 'none');
+    if (opts.animate === false) {
+      opts.animation = 'none';
+    }
+
+    opts.animate = (opts.animation !== 'none');
 
     this.transitionStart(opts);
 
@@ -276,7 +272,7 @@ export class NavBase {
     enteringItem.willEnter();
 
     // start the transition
-    this.transitionStart({ isAnimated: true });
+    this.transitionStart({ animate: true });
 
     // wait for the new item to complete setup
     enteringItem.stage(() => {
@@ -378,7 +374,7 @@ export class NavBase {
   }
 
   transitionStart(opts) {
-    if (opts.isAnimated) {
+    if (opts.animate) {
       // block possible clicks during transition
       ClickBlock(true, 520);
       this.getNavElement().classList.add('transitioning');

ionic/components/nav/nav-item.js

@@ -101,12 +101,28 @@ export class NavItem {
         this.loaded();
 
         // all done, fire the callback
-        callback();
+        if (this._wait) {
+          this._waitCallback = callback;
+        } else {
+          callback();
+        }
+
       });
 
     });
   }
 
+  waitForResolve() {
+    this._wait = true;
+  }
+
+  resolve() {
+    if (this._wait) {
+      this._waitCallback && this._waitCallback();
+      this._wait = this._waitCallback = null;
+    }
+  }
+
   setInstance(instance) {
     this.instance = instance;
   }

ionic/components/tabs/tab.js

@@ -74,14 +74,18 @@ export class Tab extends NavBase {
   }
 
   onInit() {
-    if ( this.tabs.isActive(this.item) || this.tabs.isStagedEntering(this.item) ) {
-      this.loadInitial();
+    if ( this.item._initial ) {
+      this.tabs.select(this);
     }
   }
 
   loadInitial(callback) {
     if (!this._loaded && this.initial) {
-      this.push(this.initial).then(() => {
+      let opts = {
+        animate: false,
+        navbar: false
+      };
+      this.push(this.initial, null, opts).then(() => {
         callback && callback();
       });
       this._loaded = true;

ionic/components/tabs/tabs.js

@@ -43,12 +43,14 @@ export class Tabs extends NavBase {
 
   constructor(
     @Optional() parentNavBase: NavBase,
+    @Optional() navItem: NavItem,
     compiler: Compiler,
     elementRef: ElementRef,
     loader: DynamicComponentLoader,
     injector: Injector
   ) {
     super(parentNavBase, compiler, elementRef, loader, injector);
+    this.item = navItem;
 
     this.domElement = elementRef.domElement;
     this.config = Tabs.config.invoke(this);
@@ -58,7 +60,8 @@ export class Tabs extends NavBase {
     this.add(tabItem);
 
     if (this.length() === 1) {
-      this.select(0);
+      this.item && this.item.waitForResolve();
+      tabItem._initial = true;
     }
   }
 
@@ -76,7 +79,7 @@ export class Tabs extends NavBase {
 
     enteringItem.instance.loadInitial(() => {
       let opts = {
-        animation: 'none'
+        animate: false
       };
 
       let leavingItem = this.getActive() || new NavItem();
@@ -84,8 +87,13 @@ export class Tabs extends NavBase {
       leavingItem.shouldCache = true;
       leavingItem.willCache();
 
+      enteringItem.navbarView = (enteringItem.instance.getActive() || {}).navbarView;
+      if (leavingItem.instance) {
+        leavingItem.navbarView = (leavingItem.instance.getActive() || {}).navbarView;
+      }
+
       this.transition(enteringItem, leavingItem, opts, () => {
-        console.log('tab selected')
+        this.item && this.item.resolve();
       });
     });
   }

ionic/components/tabs/tabs.scss

@@ -10,13 +10,17 @@ $tab-button-max-width:             160px !default;
 
 
 ion-tabs-view {
-  display: flex;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: white;
+
+  display: none;
+  &.show-view {
+    display: flex;
+  }
 }
 
 ion-tabs {

ionic/transitions/ios-transition.js

@@ -16,8 +16,8 @@ const OFF_OPACITY = 0.8;
 
 class IOSTransition extends Transition {
 
-  constructor(navCtrl, opts) {
-    super(navCtrl);
+  constructor(nav, opts) {
+    super(nav, opts);
 
     // global duration and easing for all child animations
     this.duration(DURATION);

ionic/transitions/transition.js

@@ -9,26 +9,28 @@ let registry = {};
 
 export class Transition extends Animation {
 
-  constructor(navCtrl) {
+  constructor(nav, opts) {
     super();
 
     // get the entering and leaving items
-    let enteringItem = this.entering = navCtrl.getStagedEnteringItem();
-    let leavingItem = this.leaving = navCtrl.getStagedLeavingItem();
+    let enteringItem = this.entering = nav.getStagedEnteringItem();
+    let leavingItem = this.leaving = nav.getStagedLeavingItem();
 
     // create animation for the entering item's "ion-view" element
     this.enteringView = new Animation(enteringItem.viewElement());
     this.enteringView.beforePlay.addClass(SHOW_VIEW_CSS);
+    this.addAnimation(this.enteringView);
 
     // create animation for the entering item's "ion-navbar" element
-    this.enteringNavbar = new Animation(enteringItem.navbarElement());
-    this.enteringNavbar.beforePlay.addClass(SHOW_NAVBAR_CSS);
+    if (opts.navbar !== false) {
+      this.enteringNavbar = new Animation(enteringItem.navbarElement());
+      this.enteringNavbar.beforePlay.addClass(SHOW_NAVBAR_CSS);
 
-    // create animation for the entering item's "ion-title" element
-    this.enteringTitle = new Animation(enteringItem.titleElement());
-    this.enteringNavbar.addAnimation(this.enteringTitle);
-
-    this.addAnimation(this.enteringView, this.enteringNavbar);
+      // create animation for the entering item's "ion-title" element
+      this.enteringTitle = new Animation(enteringItem.titleElement());
+      this.enteringNavbar.addAnimation(this.enteringTitle);
+      this.addAnimation(this.enteringNavbar);
+    }
 
     if (leavingItem) {
       // create animation for the entering item's "ion-view" element
@@ -56,7 +58,7 @@ export class Transition extends Animation {
   /*
    STATIC CLASSES
    */
-  static create(navCtrl, opts = {}) {
+  static create(nav, opts = {}) {
     let name = opts.animation || 'ios';
 
     let TransitionClass = registry[name];
@@ -66,7 +68,7 @@ export class Transition extends Animation {
       TransitionClass = Transition;
     }
 
-    return new TransitionClass(navCtrl, opts);
+    return new TransitionClass(nav, opts);
   }
 
   static register(name, TransitionClass) {