nav updates

ionic/animations/ios-transition.js

@@ -0,0 +1,31 @@
+import {Animation} from '../collide/animation';
+import {addEasing} from '../collide/easing';
+
+
+const easing = [.36, .66, .04, 1];
+const duration = 500;
+
+
+class IOSTransition extends Animation {
+
+  constructor(navCtrl) {
+
+    this.duration(duration);
+
+    addEasing('ios', easing);
+    this.easing('ios');
+
+
+    var enteringViewEle = navCtrl.enteringEle();
+
+
+    var viewA = new Animation();
+    viewA.elements( document.querySelectorAll('.square') )
+         .to('translateX', translateX)
+
+    this.addChild(row1);
+  }
+
+
+
+}

ionic/collide/easing.js

@@ -23,7 +23,7 @@ function generateBezier (mX1, mY1, mX2, mY2) {
       SUBDIVISION_MAX_ITERATIONS = 10,
       kSplineTableSize = 11,
       kSampleStepSize = 1.0 / (kSplineTableSize - 1.0),
-      float32ArraySupported = "Float32Array" in window;
+      float32ArraySupported = 'Float32Array' in window;
 
   /* Must contain four arguments. */
   if (arguments.length !== 4) {
@@ -32,7 +32,7 @@ function generateBezier (mX1, mY1, mX2, mY2) {
 
   /* Arguments must be numbers. */
   for (var i = 0; i < 4; ++i) {
-    if (typeof arguments[i] !== "number" || isNaN(arguments[i]) || !isFinite(arguments[i])) {
+    if (typeof arguments[i] !== 'number' || isNaN(arguments[i]) || !isFinite(arguments[i])) {
       return false;
     }
   }
@@ -134,7 +134,7 @@ function generateBezier (mX1, mY1, mX2, mY2) {
 
   f.getControlPoints = function() { return [{ x: mX1, y: mY1 }, { x: mX2, y: mY2 }]; };
 
-  var str = "generateBezier(" + [mX1, mY1, mX2, mY2] + ")";
+  var str = 'generateBezier(' + [mX1, mY1, mX2, mY2] + ')';
   f.toString = function () { return str; };
 
   return f;
@@ -240,39 +240,43 @@ Collide.Easings = {
 (function() {
 
   let penner = [
-    [ "ease", [ 0.25, 0.1, 0.25, 1.0 ] ],
-    [ "ease-in", [ 0.42, 0.0, 1.00, 1.0 ] ],
-    [ "ease-out", [ 0.00, 0.0, 0.58, 1.0 ] ],
-    [ "ease-in-out", [ 0.42, 0.0, 0.58, 1.0 ] ],
-    [ "easeInSine", [ 0.47, 0, 0.745, 0.715 ] ],
-    [ "easeOutSine", [ 0.39, 0.575, 0.565, 1 ] ],
-    [ "easeInOutSine", [ 0.445, 0.05, 0.55, 0.95 ] ],
-    [ "easeInQuad", [ 0.55, 0.085, 0.68, 0.53 ] ],
-    [ "easeOutQuad", [ 0.25, 0.46, 0.45, 0.94 ] ],
-    [ "easeInOutQuad", [ 0.455, 0.03, 0.515, 0.955 ] ],
-    [ "easeInCubic", [ 0.55, 0.055, 0.675, 0.19 ] ],
-    [ "easeOutCubic", [ 0.215, 0.61, 0.355, 1 ] ],
-    [ "easeInOutCubic", [ 0.645, 0.045, 0.355, 1 ] ],
-    [ "easeInQuart", [ 0.895, 0.03, 0.685, 0.22 ] ],
-    [ "easeOutQuart", [ 0.165, 0.84, 0.44, 1 ] ],
-    [ "easeInOutQuart", [ 0.77, 0, 0.175, 1 ] ],
-    [ "easeInQuint", [ 0.755, 0.05, 0.855, 0.06 ] ],
-    [ "easeOutQuint", [ 0.23, 1, 0.32, 1 ] ],
-    [ "easeInOutQuint", [ 0.86, 0, 0.07, 1 ] ],
-    [ "easeInExpo", [ 0.95, 0.05, 0.795, 0.035 ] ],
-    [ "easeOutExpo", [ 0.19, 1, 0.22, 1 ] ],
-    [ "easeInOutExpo", [ 1, 0, 0, 1 ] ],
-    [ "easeInCirc", [ 0.6, 0.04, 0.98, 0.335 ] ],
-    [ "easeOutCirc", [ 0.075, 0.82, 0.165, 1 ] ],
-    [ "easeInOutCirc", [ 0.785, 0.135, 0.15, 0.86 ] ]
+    [ 'ease', [ 0.25, 0.1, 0.25, 1 ] ],
+    [ 'ease-in', [ 0.42, 0.0, 1.00, 1 ] ],
+    [ 'ease-out', [ 0.00, 0.0, 0.58, 1 ] ],
+    [ 'ease-in-out', [ 0.42, 0.0, 0.58, 1 ] ],
+    [ 'easeInSine', [ 0.47, 0, 0.745, 0.715 ] ],
+    [ 'easeOutSine', [ 0.39, 0.575, 0.565, 1 ] ],
+    [ 'easeInOutSine', [ 0.445, 0.05, 0.55, 0.95 ] ],
+    [ 'easeInQuad', [ 0.55, 0.085, 0.68, 0.53 ] ],
+    [ 'easeOutQuad', [ 0.25, 0.46, 0.45, 0.94 ] ],
+    [ 'easeInOutQuad', [ 0.455, 0.03, 0.515, 0.955 ] ],
+    [ 'easeInCubic', [ 0.55, 0.055, 0.675, 0.19 ] ],
+    [ 'easeOutCubic', [ 0.215, 0.61, 0.355, 1 ] ],
+    [ 'easeInOutCubic', [ 0.645, 0.045, 0.355, 1 ] ],
+    [ 'easeInQuart', [ 0.895, 0.03, 0.685, 0.22 ] ],
+    [ 'easeOutQuart', [ 0.165, 0.84, 0.44, 1 ] ],
+    [ 'easeInOutQuart', [ 0.77, 0, 0.175, 1 ] ],
+    [ 'easeInQuint', [ 0.755, 0.05, 0.855, 0.06 ] ],
+    [ 'easeOutQuint', [ 0.23, 1, 0.32, 1 ] ],
+    [ 'easeInOutQuint', [ 0.86, 0, 0.07, 1 ] ],
+    [ 'easeInExpo', [ 0.95, 0.05, 0.795, 0.035 ] ],
+    [ 'easeOutExpo', [ 0.19, 1, 0.22, 1 ] ],
+    [ 'easeInOutExpo', [ 1, 0, 0, 1 ] ],
+    [ 'easeInCirc', [ 0.6, 0.04, 0.98, 0.335 ] ],
+    [ 'easeOutCirc', [ 0.075, 0.82, 0.165, 1 ] ],
+    [ 'easeInOutCirc', [ 0.785, 0.135, 0.15, 0.86 ] ]
   ];
 
   for (var i = 0, l = penner.length; i < l; i++) {
-    Collide.Easings[ penner[i][0] ] = generateBezier.apply(null, penner[i][1]);
+    addEasing(penner[i][0], penner[i][1]);
   }
 
 })();
 
+export function addEasing(name, values) {
+  Collide.Easings[name] = generateBezier.apply(null, values);
+};
+
 
 /* Determine the appropriate easing type given an easing input. */
 export function getEasing(value, duration) {
@@ -303,10 +307,10 @@ export function getEasing(value, duration) {
     easing = false;
   }
 
-  /* Revert to the fall back to "swing" */
+  /* Revert to the fall back to 'swing' */
   if (easing === false) {
     easing = 'swing';
   }
 
   return easing;
-}
+};

ionic/components/nav-pane/nav-pane.js

@@ -1,65 +0,0 @@
-import {
-  DynamicComponent,
-  Parent,
-  NgElement,
-  DynamicComponentLoader,
-  ElementRef
-} from 'angular2/angular2'
-import {Optional} from 'angular2/di'
-import {Nav} from 'ionic/components/nav/nav'
-import {Tab} from 'ionic/components/tabs/tab'
-
-@DynamicComponent({
-  selector: '.nav-pane',
-  properties: {
-    item: 'item'
-  }
-})
-export class NavPane {
-  constructor(
-    loader: DynamicComponentLoader,
-    location: ElementRef,
-    @NgElement() element: NgElement,
-
-    // FIXME: this is temporary until ng2 lets us inject tabs as a Nav
-    @Optional() @Parent() viewportNav: Nav,
-    @Optional() @Parent() viewportTab: Tab
-  ) {
-    this._loader = loader
-    this._location = location
-    this.viewport = viewportTab || viewportNav
-    this.domElement = element.domElement
-  }
-
-  set item(navItem) {
-    if (this.initialized) return;
-    this.initialized = true;
-    this.Class = navItem.Class;
-
-    this._loader.loadIntoExistingLocation(navItem.Class, this._location).then(instance => {
-      this.instance = instance
-      navItem.finishSetup(this, instance)
-    })
-  }
-
-  /**
-   * Push out of this view into another view
-   */
-  push(Class: Function, opts = {}) {
-    return this.viewport.push(Class, opts)
-  }
-
-  /**
-   * Go back
-   */
-  pop(opts) {
-    return this.viewport.pop(opts)
-  }
-
-  popTo(index, opts) {
-    return this.viewport.popTo(index, opts)
-  }
-}
-
-/*
- Ideal API: inject a tN

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()
+  }
+}

ionic/components/tabs/tab.js

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

ionic/components/toolbar/toolbar.js

@@ -46,22 +46,22 @@ export class Toolbar {
     console.log('Toolbar!');
 
     // TODO use config to add these classes
-    this.viewContainer.domElement.classList.add('toolbar');
-    this.viewContainer.domElement.classList.add(`toolbar-${Platform.getMode()}`);
+    // this.viewContainer.domElement.classList.add('toolbar');
+    // this.viewContainer.domElement.classList.add(`toolbar-${Platform.getMode()}`);
 
     // TODO Make a better way than this
-    if (/header/i.test(this.viewContainer.domElement.tagName)) {
+    // if (/header/i.test(this.viewContainer.domElement.tagName)) {
        this.placement = 'top';
-    } else {
-      this.placement = 'bottom';
-    }
+    // } else {
+    //   this.placement = 'bottom';
+    // }
   }
 
   set placement(pos) {
-    this.viewContainer.domElement.classList.add(`toolbar-${pos}`);
+    //this.viewContainer.domElement.classList.add(`toolbar-${pos}`);
     this._placement = pos;
     this.navCtrl.addToolbar(this._placement, this);
-    this.viewContainer.domElement.setAttribute('placement', pos);
+    //this.viewContainer.domElement.setAttribute('placement', pos);
   }
 
   onDestroy() {
@@ -86,17 +86,17 @@ export class ToolbarTitle {
   constructor(
     element: NgElement
   ) {
-    this.domElement = element.domElement;
+    // this.domElement = element.domElement;
 
-    // TODO find better way to get parent toolbar
-    let current = this.domElement;
-    while (current = current.parentNode) {
-      if (current.classList.contains('toolbar')) {
-        break;
-      }
-    }
-    this.toolbarElement = current;
-    this.align();
+    // // TODO find better way to get parent toolbar
+    // let current = this.domElement;
+    // while (current = current.parentNode) {
+    //   if (current.classList.contains('toolbar')) {
+    //     break;
+    //   }
+    // }
+    // this.toolbarElement = current;
+    // this.align();
   }
 
   align() {