From f924bf2531f629580ee1c34511984ef4316a0863 Mon Sep 17 00:00:00 2001 From: Andrew Date: Thu, 2 Apr 2015 10:37:45 -0600 Subject: [PATCH] refactor(nav-viewport): rename animations to avoid confusion --- src/components/nav-view/nav-view.scss | 10 ++-- src/components/nav-viewport/nav-viewport.js | 47 ++++++++++--------- .../nav-viewport/test/basic/main.html | 2 +- src/components/tabs/tabs.js | 39 +++++++-------- src/platform/platform.js | 1 - 5 files changed, 51 insertions(+), 48 deletions(-) diff --git a/src/components/nav-view/nav-view.scss b/src/components/nav-view/nav-view.scss index 8af252d50f..f264fd7ffc 100644 --- a/src/components/nav-view/nav-view.scss +++ b/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); diff --git a/src/components/nav-viewport/nav-viewport.js b/src/components/nav-viewport/nav-viewport.js index 30bf7cde7c..5a0d50ed2d 100644 --- a/src/components/nav-viewport/nav-viewport.js +++ b/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: ` -
+
`, 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() - return item.pushEnter() + current && current.leaveReverse() + 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() - current.popLeave().then(() => { - this.creator.destroy(current) + previous.enterReverse() + return current.leave().then(() => { + // The animation is done, remove it from the dom + arrayUtil.remove(this._ngForLoopArray, current) }) } @@ -135,17 +138,17 @@ class NavItem { }) }) } - pushEnter() { - return this._animate({ isShown: true, animation: 'push-enter' }) + enter() { + return this._animate({ isShown: true, animation: 'enter' }) } - popEnter() { - return this._animate({ isShown: true, animation: 'pop-enter' }) + enterReverse() { + return this._animate({ isShown: true, animation: 'enter-reverse' }) } - pushLeave() { - return this._animate({ isShown: false, animation: 'push-leave' }) + leave() { + return this._animate({ isShown: false, animation: 'leave' }) } - popLeave() { - return this._animate({ isShown: false, animation: 'pop-leave' }) + leaveReverse() { + return this._animate({ isShown: false, animation: 'leave-reverse' }) } } diff --git a/src/components/nav-viewport/test/basic/main.html b/src/components/nav-viewport/test/basic/main.html index 9de8f8a062..7944cfe164 100644 --- a/src/components/nav-viewport/test/basic/main.html +++ b/src/components/nav-viewport/test/basic/main.html @@ -1,2 +1,2 @@ - + diff --git a/src/components/tabs/tabs.js b/src/components/tabs/tabs.js index 013ac2a22f..54b3911c85 100644 --- a/src/components/tabs/tabs.js +++ b/src/components/tabs/tabs.js @@ -1,19 +1,15 @@ -import {NgElement, Component, Template, Foreach, Parent} from 'angular2/angular2'; -import {ComponentConfig} from 'ionic2/config/component-config'; - -export let TabsConfig = new ComponentConfig('tabs'); - +import {NgElement, Component, Template, Foreach, Parent} from 'angular2/angular2' +import {NavViewport} from 'ionic2/components' +import {IonicComponent} from 'ionic2/config/component' @Component({ selector: 'ion-tabs', bind: { - tabBarPlacement: 'tab-bar-placement' + placement: 'placement' }, - services: [TabsConfig] }) @Template({ inline: ` -
@@ -27,23 +23,28 @@ export let TabsConfig = new ComponentConfig('tabs');
- -
-
- -
-
`, + 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.tabBarPlacement = this.tabBarPlacement || 'bottom' + this.config = Tabs.config.invoke(this) } } + +new IonicComponent(Tabs, { + bind: { + placement: { + defaults: { + ios: 'bottom', + android: 'top', + base: 'bottom' + } + } + } +}) diff --git a/src/platform/platform.js b/src/platform/platform.js index 23333e3f50..31ff59736d 100644 --- a/src/platform/platform.js +++ b/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) } })