nav updates

ionic/components/nav/nav-base.js

@@ -14,10 +14,10 @@ export class NavBase {
     // is removed even if it's still animating out.
     this._stack = [];
 
-    // The _ng* arrays are what add/remove components from the dom.
+    // The navItems array is what add/remove components from the dom.
     // These arrays won't remove a component until they're
     // done animating out.
-    this._ngNavItems = [];
+    this.navItems = [];
   }
 
   containsClass(Class) {
@@ -32,47 +32,32 @@ export class NavBase {
   set initial(Class) {
     if (!this.initialized) {
       this.initialized = true
-      this.push(Class)
+      this.push(Class, {}, {
+        animation: 'none'
+      });
     }
   }
-  //TODO let the view handle enter/leave so splitview can override
 
   /**
    * Push a new view into the history stack.
-   *
-   * @param view the new view
-   * @param shouldAnimate whether to animate
    */
-  // TODO don't push same component twice if one is already pushing
-  // TODO only animate if state hasn't changed
-  // TODO make sure the timing is together
-  // TODO allow starting an animation in the middle (eg gestures). Leave
-  // most of this up to the animation's implementation.
   push(Class: Function, params = {}, opts = {}) {
-    util.defaults(opts, {
-      sync: this._stack.length === 0
-    })
+    let pushedItem = new NavStackData(Class, params);
 
-    let pushedItem = new NavStackData(Class, params)
-    this._stack.push(pushedItem)
-    this._ngNavItems.push(pushedItem)
+    this._stack.push(pushedItem);
+    this.navItems.push(pushedItem);
 
-    return pushedItem.waitForSetup().then(() => {
-      let current = this._getPrevious(pushedItem)
-      current && current.leaveReverse(opts)
-      return pushedItem.enter(opts)
-    })
+    return pushedItem.setup().then(() => {
+      let current = this._getPrevious(pushedItem);
+      current && current.leaveReverse(opts);
+      return pushedItem.enter(opts);
+    });
   }
 
   /**
    * Pop a view off the history
-   *
-   * @param shouldAnimate whether to animate
    */
   pop(opts = {}) {
-    util.defaults(opts, {
-      sync: false
-    })
     let current = this._stack.pop()
     let dest = this.last()
 
@@ -84,6 +69,7 @@ export class NavBase {
   last() {
     return this._stack[this._stack.length - 1]
   }
+
   length() {
     return this._stack.length;
   }
@@ -101,7 +87,7 @@ export class NavBase {
   popTo(index, opts = {}) {
     // Abort if we're already here.
     if (this._stack.length <= index + 1) {
-      return Promise.resolve()
+      return Promise.resolve();
     }
 
     // Save the current navItem, and remove all the other ones in front of our
@@ -119,7 +105,7 @@ export class NavBase {
 
   setStack(stack) {
     this._stack = stack.slice()
-    this._ngNavItems = stack.slice()
+    this.navItems = stack.slice()
   }
 
   remove(index) {
@@ -129,10 +115,7 @@ export class NavBase {
   }
 
   _destroy(navItem) {
-    console.warn(
-`Component "${navItem.Class.name}" was popped from the nav stack, but we are keeping its element in the DOM for now because of an ng2 bug.`
-    );
-    // util.array.remove(this._ngNavItems, navItem)
+    util.array.remove(this.navItems, navItem)
   }
 
   _getPrevious(item) {
@@ -147,20 +130,23 @@ export class NavBase {
 
 class NavStackData {
   constructor(ComponentClass, params = {}) {
-    this.Class = ComponentClass
-    this.params = params
+    this.Class = ComponentClass;
+    this.params = params;
     this._setupPromise = new Promise((resolve) => {
-      this._resolveSetupPromise = resolve
-    })
+      this._resolveSetupPromise = resolve;
+    });
   }
-  waitForSetup() {
-    return this._setupPromise
+
+  setup() {
+    return this._setupPromise;
   }
+
   finishSetup(navItem, componentInstance) {
     this.navItem = navItem
     this.instance = componentInstance
     this._resolveSetupPromise()
   }
+
   setAnimation(state) {
     if (!state) {
       this.navItem.domElement.removeAttribute('animate')
@@ -169,12 +155,15 @@ class NavStackData {
       this.navItem.domElement.setAttribute('animate', state)
     }
   }
+
   setShown(isShown) {
     this.navItem.domElement.classList[isShown?'add':'remove']('shown')
   }
+
   startAnimation() {
     this.navItem.domElement.classList.add('start')
   }
+
   _animate({ isShown, animation }) {
     this.setAnimation(animation)
     this.setShown(isShown)
@@ -190,22 +179,27 @@ class NavStackData {
       return Promise.resolve()
     }
   }
+
   enterReverse(opts) {
     return this.enter( util.extend({reverse: true}, opts) )
   }
+
   enter({ reverse = false, sync = false } = {}) {
     return this._animate({
       isShown: true,
       animation: sync ? null : (reverse ? 'enter-reverse' : 'enter')
     })
   }
+
   leave({ reverse = false, sync = false } = {}) {
     return this._animate({
       isShown: false,
       animation: sync ? null : (reverse ? 'leave-reverse' : 'leave')
     })
   }
+
   leaveReverse(opts) {
     return this.leave( util.extend({reverse: true}, opts) )
   }
+
 }

ionic/components/nav/nav.js

@@ -39,7 +39,7 @@ export class NavInjectable {}
   </header>
   <section class="nav-item-container">
     <div class="nav-item"
-         *for="#item of _ngNavItems"
+         *for="#item of navItems"
          [item]="item"></div>
   </section>
   <footer class="toolbar-container" [class.hide]="getToolbars('bottom').length == 0">

ionic/components/nav/test/basic/main.html

@@ -1,2 +1,2 @@
-<ion-nav [initial-component]="initial">
+<ion-nav [initial]="initial">
 </ion-nav>

ionic/components/nav/test/basic/main.js

@@ -11,8 +11,8 @@ import {FirstPage} from 'pages/first-page'
 class IonicApp {
   constructor() {
     this.initial = FirstPage
-    console.log('IonicApp Start')
+    console.log('IonicApp Start');
   }
 }
 
-bootstrap(IonicApp)
+bootstrap(IonicApp);

ionic/components/nav/test/basic/pages/first-page.html

@@ -1,3 +1,6 @@
-<ion-view nav-title="First Page">
-  <button (click)="nextPage()">Push Page 2</button>
-</ion-view>
+
+<h1>First Page</h1>
+
+<p>
+  <button (click)="push()">Push (Go to 2nd)</button>
+</p>

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

@@ -1,22 +1,21 @@
 import {Component, View, Parent} from 'angular2/angular2'
-import {Nav} from 'ionic/ionic'
+import {NavController} from 'ionic/ionic'
 import {SecondPage} from 'pages/second-page'
 
-@Component({
-  selector: 'first-page'
-})
+
+@Component()
 @View({
   templateUrl: 'pages/first-page.html',
   directives: []
 })
 export class FirstPage {
   constructor(
-    @Parent() viewport: Nav
+    nav: NavController
   ) {
-    this.viewport = viewport
+    this.nav = nav;
   }
 
-  nextPage() {
-    this.viewport.push(SecondPage)
+  push() {
+    this.nav.push(SecondPage);
   }
 }

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

@@ -1,3 +1,10 @@
-<ion-view nav-title="Second Page">
-  <button (click)="pop()">Pop (Go back)</button>
-</ion-view>
+
+<h1>Second Page</h1>
+
+<p>
+  <button (click)="pop()">Pop (Go back to 1st)</button>
+</p>
+
+<p>
+  <button (click)="push()">Push (Go to 3rd)</button>
+</p>

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

@@ -1,21 +1,22 @@
 import {Component, View, Parent} from 'angular2/angular2'
-import {Nav} from 'ionic/components'
+import {NavController} from 'ionic/components'
+import {ThirdPage} from 'pages/third-page'
 
 
-@Component({
-  selector: 'second-page'
-})
+@Component()
 @View({
-  templateUrl: 'pages/second-page.html',
-  directives: []
+  templateUrl: 'pages/second-page.html'
 })
 export class SecondPage {
   constructor(
-    @Parent() viewport: Nav
+    nav: NavController
   ) {
-    this.viewport = viewport
+    this.nav = nav
   }
   pop() {
-    this.viewport.pop()
+    this.nav.pop();
+  }
+  push() {
+    this.nav.push(ThirdPage);
   }
 }

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

@@ -0,0 +1,6 @@
+
+<h1>Third Page</h1>
+
+<p>
+  <button (click)="pop()">Pop (Go back to 2nd)</button>
+</p>

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

@@ -0,0 +1,19 @@
+import {Component, View, Parent} from 'angular2/angular2'
+import {NavController} from 'ionic/components'
+
+
+@Component()
+@View({
+  templateUrl: 'pages/third-page.html',
+  directives: []
+})
+export class ThirdPage {
+  constructor(
+    nav: NavController
+  ) {
+    this.nav = nav
+  }
+  pop() {
+    this.nav.pop()
+  }
+}