From e315ebc25fcfec830fa8068aa7ac850610a8d79c Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Mon, 4 May 2015 13:34:00 -0500 Subject: [PATCH] nav updates --- ionic/animations/ios-transition.js | 31 ++++++++ ionic/collide/easing.js | 66 +++++++++-------- ionic/components/nav-pane/nav-pane.js | 65 ---------------- ionic/components/nav/nav-base.js | 74 +++++++++---------- ionic/components/nav/nav.js | 2 +- ionic/components/nav/test/basic/main.html | 2 +- ionic/components/nav/test/basic/main.js | 4 +- .../nav/test/basic/pages/first-page.html | 9 ++- .../nav/test/basic/pages/first-page.js | 15 ++-- .../nav/test/basic/pages/second-page.html | 13 +++- .../nav/test/basic/pages/second-page.js | 19 ++--- .../nav/test/basic/pages/third-page.html | 6 ++ .../nav/test/basic/pages/third-page.js | 19 +++++ ionic/components/tabs/tab.js | 2 +- ionic/components/toolbar/toolbar.js | 38 +++++----- 15 files changed, 182 insertions(+), 183 deletions(-) create mode 100644 ionic/animations/ios-transition.js delete mode 100644 ionic/components/nav-pane/nav-pane.js create mode 100644 ionic/components/nav/test/basic/pages/third-page.html create mode 100644 ionic/components/nav/test/basic/pages/third-page.js diff --git a/ionic/animations/ios-transition.js b/ionic/animations/ios-transition.js new file mode 100644 index 0000000000..261a292628 --- /dev/null +++ b/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); + } + + + +} diff --git a/ionic/collide/easing.js b/ionic/collide/easing.js index cd22371641..e4ecb6a2d5 100644 --- a/ionic/collide/easing.js +++ b/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; -} +}; diff --git a/ionic/components/nav-pane/nav-pane.js b/ionic/components/nav-pane/nav-pane.js deleted file mode 100644 index fa14223329..0000000000 --- a/ionic/components/nav-pane/nav-pane.js +++ /dev/null @@ -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 diff --git a/ionic/components/nav/nav-base.js b/ionic/components/nav/nav-base.js index 08cd5314e4..4ada0b6767 100644 --- a/ionic/components/nav/nav-base.js +++ b/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) ) } + } diff --git a/ionic/components/nav/nav.js b/ionic/components/nav/nav.js index 2495639c88..cfe0378684 100644 --- a/ionic/components/nav/nav.js +++ b/ionic/components/nav/nav.js @@ -39,7 +39,7 @@ export class NavInjectable {}