refactor(nav-viewport): rename animations to avoid confusion

src/components/nav-view/nav-view.scss

@@ -11,28 +11,28 @@
   }
   &[animate] {
     display: block;
-    transition: 1s linear;
+    transition: 0.3s linear;
   }
 
-  &[animate=push-enter] {
+  &[animate=enter] {
     transform: translate3d(100%,0,0);
     &.start {
       transform: translate3d(0,0,0);
     }
   }
-  &[animate=pop-enter] {
+  &[animate=enter-reverse] {
     transform: translate3d(-100%,0,0);
     &.start {
       transform: translate3d(0,0,0);
     }
   }
-  &[animate=push-leave] {
+  &[animate=leave-reverse] {
     transform: translate3d(0,0,0);
     &.start {
       transform: translate3d(-100%,0,0);
     }
   }
-  &[animate=pop-leave] {
+  &[animate=leave] {
     transform: translate3d(0,0,0);
     &.start {
       transform: translate3d(100%,0,0);

src/components/nav-viewport/nav-viewport.js

@@ -6,33 +6,34 @@ import {array as arrayUtil, dom as domUtil} from 'ionic2/util'
 @Component({
   selector: 'ion-nav-viewport',
   bind: {
-    initial: 'initial'
+    initialComponent: 'initialComponent'
   },
 })
 @Template({
   inline: `
-  <section class="nav-view" *for="#item of creator._array" [item]="item">
+  <section class="nav-view" *for="#item of _ngForLoopArray" [item]="item">
   </section>
   `,
   directives: [NavView, For]
 })
 export class NavViewport {
   constructor() {
+    // stack is our public stack of items. This is synchronous and says an item
+    // is removed even if it's still animating out.
     this.stack = []
-    this.creator =  new ItemCreator()
+
+    // _ngForLoopArray is our loop that actually adds/removes components. It doesn't
+    // remove a component until it's done animating out.
+    this._ngForLoopArray = []
   }
 
-  set initial(Class) {
+  set initialComponent(Class) {
     if (!this.initialized) {
       this.initialized = true
       this.push(Class)
     }
   }
 
-  getAnimation(opts) {
-    return 'fade'
-  }
-
   /**
    * Push a new view into the history stack.
    *
@@ -46,10 +47,11 @@ export class NavViewport {
   push(Class, opts = {}) {
     let item = new NavItem(Class, opts)
     this.stack.push(item)
-    return this.creator.instantiate(item).then(() => {
+    this._ngForLoopArray.push(item)
+    return item.waitForSetup().then(() => {
       let current = this.getPrevious(item)
-      current && current.pushLeave()
+      current && current.leaveReverse()
-      return item.pushEnter()
+      return item.enter()
     })
   }
 
@@ -61,9 +63,10 @@ export class NavViewport {
   pop() {
     let current = this.stack.pop()
     let previous = this.stack[this.stack.length - 1]
-    previous.popEnter()
+    previous.enterReverse()
-    current.popLeave().then(() => {
+    return current.leave().then(() => {
-      this.creator.destroy(current)
+      // The animation is done, remove it from the dom
+      arrayUtil.remove(this._ngForLoopArray, current)
     })
   }
 
@@ -135,17 +138,17 @@ class NavItem {
       })
     })
   }
-  pushEnter() {
+  enter() {
-    return this._animate({ isShown: true, animation: 'push-enter' })
+    return this._animate({ isShown: true, animation: 'enter' })
   }
-  popEnter() {
+  enterReverse() {
-    return this._animate({ isShown: true, animation: 'pop-enter' })
+    return this._animate({ isShown: true, animation: 'enter-reverse' })
   }
-  pushLeave() {
+  leave() {
-    return this._animate({ isShown: false, animation: 'push-leave' })
+    return this._animate({ isShown: false, animation: 'leave' })
   }
-  popLeave() {
+  leaveReverse() {
-    return this._animate({ isShown: false, animation: 'pop-leave' })
+    return this._animate({ isShown: false, animation: 'leave-reverse' })
   }
 }
 

src/components/nav-viewport/test/basic/main.html

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

src/components/tabs/tabs.js

@@ -1,19 +1,15 @@
-import {NgElement, Component, Template, Foreach, Parent} from 'angular2/angular2';
+import {NgElement, Component, Template, Foreach, Parent} from 'angular2/angular2'
-import {ComponentConfig} from 'ionic2/config/component-config';
+import {NavViewport} from 'ionic2/components'
-
+import {IonicComponent} from 'ionic2/config/component'
-export let TabsConfig = new ComponentConfig('tabs');
-
 
 @Component({
   selector: 'ion-tabs',
   bind: {
-    tabBarPlacement: 'tab-bar-placement'
+    placement: 'placement'
   },
-  services: [TabsConfig]
 })
 @Template({
   inline: `
-
     <div class="toolbar tab-bar toolbar-ios toolbar-bottom">
       <div class="tab-bar-content">
         <a class="tab-bar-item tab-active" href="#">
@@ -27,23 +23,28 @@ export let TabsConfig = new ComponentConfig('tabs');
         </a>
       </div>
     </div>
-
-    <div class="pane-container">
-      <div class="content">
-        <content></content>
-      </div>
-    </div>
   `,
+  directives: []
 })
-export class Tabs {
+export class Tabs extends NavViewport {
   constructor(
-    configFactory: TabsConfig,
     element: NgElement
   ) {
+    super()
     this.domElement = element.domElement
     this.domElement.classList.add('pane')
-    configFactory.create(this)
+    this.config = Tabs.config.invoke(this)
-
-    this.tabBarPlacement = this.tabBarPlacement || 'bottom'
   }
 }
+
+new IonicComponent(Tabs, {
+  bind: {
+    placement: {
+      defaults: {
+        ios: 'bottom',
+        android: 'top',
+        base: 'bottom'
+      }
+    }
+  }
+})

src/platform/platform.js

@@ -60,7 +60,6 @@ var ua = window.navigator.userAgent
 platform.register({
   name: 'android',
   matcher() {
-    //TODO Make a better override than window
     return queryPlatform == 'android' || /android/i.test(ua)
   }
 })