diff --git a/ionic/components/app/structure.scss b/ionic/components/app/structure.scss index dc80ae3891..7c88ffc217 100644 --- a/ionic/components/app/structure.scss +++ b/ionic/components/app/structure.scss @@ -69,6 +69,12 @@ html { height: 100vh; } + .nav-item { + // by default .nav-item is hidden + // and the transition animation will display it + display: none; + } + .nav-item, .nav-item-child { // user created view, contained by .nav-item diff --git a/ionic/components/nav/nav-base.js b/ionic/components/nav/nav-base.js index 682b147187..acc8572b19 100644 --- a/ionic/components/nav/nav-base.js +++ b/ionic/components/nav/nav-base.js @@ -47,7 +47,7 @@ export class NavBase { } } - getActiveItem() { + getActive() { for (let i = 0, ii = this.navItems.length; i < ii; i++) { if (this.navItems[i].state === ACTIVE_STATE) { return this.navItems[i]; @@ -56,6 +56,13 @@ export class NavBase { return null; } + getPrevious(item) { + if (item) { + return this._stack[ this._stack.indexOf(item) - 1 ]; + } + return null; + } + getStagedEnteringItem() { for (let i = 0, ii = this.navItems.length; i < ii; i++) { if (this.navItems[i].state === STAGED_ENTERING_STATE) { @@ -97,7 +104,7 @@ export class NavBase { } // the active item is going to be the leaving one (if one exists) - let leavingItem = this.getActiveItem() || {}; + let leavingItem = this.getActive() || {}; // create a new NavStackItem let enteringItem = new NavStackItem(Class, params); @@ -111,7 +118,6 @@ export class NavBase { // start the transition this.transition(enteringItem, leavingItem, opts).then(() => { - console.log('push completed'); resolve(); }); @@ -133,12 +139,11 @@ export class NavBase { // get the active item and set that it is staged to be leaving // was probably the one popped from the stack - let leavingItem = this.getActiveItem() || {}; + let leavingItem = this.getActive() || {}; // start the transition this.transition(enteringItem, leavingItem, opts).then(() => { // transition completed, destroy the leaving item - console.log('pop completed'); this._destroy(leavingItem); resolve(); }); @@ -190,6 +195,8 @@ export class NavBase { // allow clicks again ClickBlock(false); + console.log('transition, canSwipeBack()', this.canSwipeBack()); + // resolve that this push has completed resolve(); }); @@ -248,23 +255,24 @@ export class NavBase { util.array.remove(this.navItems, navItem); } - getPrevious(item) { - return this._stack[ this._stack.indexOf(item) - 1 ]; - } - getToolbars(pos: String) { let last = this.last(); return last && last.navItem && last.navItem._toolbars[pos] || []; } + + canSwipeBack() { + return !!this.getPrevious(this.getActive()); + } } class NavStackItem { + constructor(ComponentClass, params = {}) { this.Class = ComponentClass; this.params = params; this._setupPromise = new Promise((resolve) => { - this._resolveSetupPromise = resolve; + this._resolveSetup = resolve; }); } @@ -273,64 +281,9 @@ class NavStackItem { } finishSetup(navItem, componentInstance) { - this.navItem = navItem - this.instance = componentInstance - this._resolveSetupPromise() - } - - setAnimation(state) { - if (!state) { - this.navItem.domElement.removeAttribute('animate') - this.navItem.domElement.classList.remove('start') - } else { - 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) - if (animation) { - // We have to wait two rafs for the element to show. Yawn. - return util.dom.rafPromise().then(util.dom.rafPromise).then(() => { - this.startAnimation() - return util.dom.transitionEndPromise(this.navItem.domElement).then(() => { - this.setAnimation(null) - }) - }) - } else { - return Promise.resolve() - } - } - - enterReverse(opts) { - return this.enter( util.extend({reverse: true}, opts) ) - } - - enter({ reverse = false, animate = false } = {}) { - return this._animate({ - isShown: true, - animation: animate ? (reverse ? 'enter-reverse' : 'enter') : null - }) - } - - leave({ reverse = false, animate = false } = {}) { - return this._animate({ - isShown: false, - animation: animate ? (reverse ? 'leave-reverse' : 'leave') : null - }) - } - - leaveReverse(opts) { - return this.leave( util.extend({reverse: true}, opts) ) + this.navItem = navItem; + this.instance = componentInstance; + this._resolveSetup(); } } diff --git a/ionic/components/nav/nav-item.scss b/ionic/components/nav/nav-item.scss deleted file mode 100644 index 8db8d420d8..0000000000 --- a/ionic/components/nav/nav-item.scss +++ /dev/null @@ -1,40 +0,0 @@ - -$transition-duration: 500ms; - - -.nav-item { - display: none; - - &.shown { - display: block; - } - &[animate] { - display: block; - transition: $transition-duration linear; - } - - &[animate=enter] { - transform: translate3d(100%,0,0); - &.start { - transform: translate3d(0,0,0); - } - } - &[animate=enter-reverse] { - transform: translate3d(-100%,0,0); - &.start { - transform: translate3d(0,0,0); - } - } - &[animate=leave-reverse] { - transform: translate3d(0,0,0); - &.start { - transform: translate3d(-100%,0,0); - } - } - &[animate=leave] { - transform: translate3d(0,0,0); - &.start { - transform: translate3d(100%,0,0); - } - } -} diff --git a/ionic/ionic.scss b/ionic/ionic.scss index 4a31461e9c..e83f6471ea 100644 --- a/ionic/ionic.scss +++ b/ionic/ionic.scss @@ -41,7 +41,6 @@ "components/layout/layout", "components/list/list", "components/modal/modal", - "components/nav/nav-item", "components/radio/radio", "components/search-bar/search-bar", "components/switch/switch",