diff --git a/ionic/components/nav/nav-base.js b/ionic/components/nav/nav-base.js index f8d3c0d126..77e7d71b82 100644 --- a/ionic/components/nav/nav-base.js +++ b/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'); diff --git a/ionic/components/nav/nav-item.js b/ionic/components/nav/nav-item.js index f3e32ba13a..8b0f105e41 100644 --- a/ionic/components/nav/nav-item.js +++ b/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; } diff --git a/ionic/components/tabs/tab.js b/ionic/components/tabs/tab.js index a13e90a97b..5670be0636 100644 --- a/ionic/components/tabs/tab.js +++ b/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; diff --git a/ionic/components/tabs/tabs.js b/ionic/components/tabs/tabs.js index 6203048ac3..62f91d449e 100644 --- a/ionic/components/tabs/tabs.js +++ b/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(); }); }); } diff --git a/ionic/components/tabs/tabs.scss b/ionic/components/tabs/tabs.scss index 6f775eadd1..c6889d86e9 100644 --- a/ionic/components/tabs/tabs.scss +++ b/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 { diff --git a/ionic/transitions/ios-transition.js b/ionic/transitions/ios-transition.js index fe95dacf4e..9e7668def9 100644 --- a/ionic/transitions/ios-transition.js +++ b/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); diff --git a/ionic/transitions/transition.js b/ionic/transitions/transition.js index e053ff11d4..544a35dd06 100644 --- a/ionic/transitions/transition.js +++ b/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) {