javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 15:07:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(navigation): load animation and the delegate concurrently, various small refactory things

Browse Source
This commit is contained in:
Dan Bucholtz
2017-08-24 16:14:58 -05:00
parent 2dc36f7274
commit e79be735a1
4 changed files with 93 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
packages/core/src/components/nav-controller/nav-controller.tsx
View File

@ -1,4 +1,5 @@
import { Component, Element, Method, Prop } from '@stencil/core'; import { Component, Element, Method, Prop } from '@stencil/core';
import { Animation, AnimationController } from '../..';
import { ComponentDataPair, FrameworkDelegate, Nav, NavController, NavOptions, ViewController } from '../../navigation/nav-interfaces'; import { ComponentDataPair, FrameworkDelegate, Nav, NavController, NavOptions, ViewController } from '../../navigation/nav-interfaces';
import { isReady } from '../../utils/helpers'; import { isReady } from '../../utils/helpers';
@ -25,78 +26,79 @@ export class NavControllerImpl implements NavController {
@Element() element: HTMLElement; @Element() element: HTMLElement;
@Prop() delegate: FrameworkDelegate; @Prop() delegate: FrameworkDelegate;
@Prop({ connect: 'ion-animation-controller' }) animationCtrl: AnimationController;
constructor() { constructor() {
} }
@Method() @Method()
push(nav: Nav, component: any, data?: any, opts?: NavOptions): Promise<any> { push(nav: Nav, component: any, data?: any, opts?: NavOptions): Promise<any> {
return getDelegate(this).then((delegate) => { return hydrateDelegateAndAnimation(this).then(([delegate, animation]) => {
return pushImpl(nav, delegate, component, data, opts); return pushImpl(nav, delegate, animation, component, data, opts);
}); });
} }
@Method() @Method()
pop(nav: Nav, opts?: NavOptions): Promise<any> { pop(nav: Nav, opts?: NavOptions): Promise<any> {
return getDelegate(this).then((delegate) => { return hydrateDelegateAndAnimation(this).then(([delegate, animation]) => {
return popImpl(nav, delegate, opts); return popImpl(nav, delegate, animation, opts);
}); });
} }
@Method() @Method()
setRoot(nav: Nav, component: any, data?: any, opts?: NavOptions): Promise<any> { setRoot(nav: Nav, component: any, data?: any, opts?: NavOptions): Promise<any> {
return getDelegate(this).then((delegate) => { return hydrateDelegateAndAnimation(this).then(([delegate, animation]) => {
return setRootImpl(nav, delegate, component, data, opts); return setRootImpl(nav, delegate, animation, component, data, opts);
}); });
} }
@Method() @Method()
insert(nav: Nav, insertIndex: number, page: any, params?: any, opts?: NavOptions): Promise<any> { insert(nav: Nav, insertIndex: number, page: any, params?: any, opts?: NavOptions): Promise<any> {
return getDelegate(this).then((delegate) => { return hydrateDelegateAndAnimation(this).then(([delegate, animation]) => {
return insertImpl(nav, delegate, insertIndex, page, params, opts); return insertImpl(nav, delegate, animation, insertIndex, page, params, opts);
}); });
} }
@Method() @Method()
insertPages(nav: Nav, insertIndex: number, insertPages: any[], opts?: NavOptions): Promise<any> { insertPages(nav: Nav, insertIndex: number, insertPages: any[], opts?: NavOptions): Promise<any> {
return getDelegate(this).then((delegate) => { return hydrateDelegateAndAnimation(this).then(([delegate, animation]) => {
return insertPagesImpl(nav, delegate, insertIndex, insertPages, opts); return insertPagesImpl(nav, delegate, animation, insertIndex, insertPages, opts);
}); });
} }
@Method() @Method()
popToRoot(nav: Nav, opts?: NavOptions): Promise<any> { popToRoot(nav: Nav, opts?: NavOptions): Promise<any> {
return getDelegate(this).then((delegate) => { return hydrateDelegateAndAnimation(this).then(([delegate, animation]) => {
return popToRootImpl(nav, delegate, opts); return popToRootImpl(nav, delegate, animation, opts);
}); });
} }
@Method() @Method()
popTo(nav: Nav, indexOrViewCtrl: any, opts?: NavOptions): Promise<any> { popTo(nav: Nav, indexOrViewCtrl: any, opts?: NavOptions): Promise<any> {
return getDelegate(this).then((delegate) => { return hydrateDelegateAndAnimation(this).then(([delegate, animation]) => {
return popToImpl(nav, delegate, indexOrViewCtrl, opts); return popToImpl(nav, delegate, animation, indexOrViewCtrl, opts);
}); });
} }
@Method() @Method()
remove(nav: Nav, startIndex: number, removeCount?: number, opts?: NavOptions): Promise<any> { remove(nav: Nav, startIndex: number, removeCount?: number, opts?: NavOptions): Promise<any> {
return getDelegate(this).then((delegate) => { return hydrateDelegateAndAnimation(this).then(([delegate, animation]) => {
return removeImpl(nav, delegate, startIndex, removeCount, opts); return removeImpl(nav, delegate, animation, startIndex, removeCount, opts);
}); });
} }
@Method() @Method()
removeView(nav: Nav, viewController: ViewController, opts?: NavOptions): Promise<any> { removeView(nav: Nav, viewController: ViewController, opts?: NavOptions): Promise<any> {
return getDelegate(this).then((delegate) => { return hydrateDelegateAndAnimation(this).then(([delegate, animation]) => {
return removeViewImpl(nav, delegate, viewController, opts); return removeViewImpl(nav, delegate, animation, viewController, opts);
}); });
} }
@Method() @Method()
setPages(nav: Nav, componentDataPairs: ComponentDataPair[], opts? : NavOptions): Promise<any> { setPages(nav: Nav, componentDataPairs: ComponentDataPair[], opts? : NavOptions): Promise<any> {
return getDelegate(this).then((delegate) => { return hydrateDelegateAndAnimation(this).then(([delegate, animation]) => {
return setPagesImpl(nav, delegate, componentDataPairs, opts); return setPagesImpl(nav, delegate, animation, componentDataPairs, opts);
}); });
} }
@ -105,7 +107,11 @@ export class NavControllerImpl implements NavController {
} }
} }
export function getDelegate(navController: NavController): Promise<FrameworkDelegate> { export function hydrateDelegateAndAnimation(navController: NavController): Promise<any> {
return Promise.all([hydrateDelegate(navController), hydrateAnimationController(navController.animationCtrl)]);
}
export function hydrateDelegate(navController: NavController): Promise<FrameworkDelegate> {
if (navController.delegate) { if (navController.delegate) {
return Promise.resolve(navController.delegate); return Promise.resolve(navController.delegate);
} }
@ -115,5 +121,9 @@ export function getDelegate(navController: NavController): Promise<FrameworkDele
return isReady(element).then(() => { return isReady(element).then(() => {
defaultDelegate = element as any as FrameworkDelegate; defaultDelegate = element as any as FrameworkDelegate;
return defaultDelegate; return defaultDelegate;
}) });
}
export function hydrateAnimationController(animationController: AnimationController): Promise<Animation> {
return animationController.create();
} }

18
packages/core/src/components/nav/nav.tsx
View File

@ -1,5 +1,5 @@
import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core'; import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
import { AnimationController, Config } from '../..'; import { Config } from '../..';
import { ComponentDataPair, FrameworkDelegate, Nav, NavController, NavOptions, ViewController } from '../../navigation/nav-interfaces'; import { ComponentDataPair, FrameworkDelegate, Nav, NavController, NavOptions, ViewController } from '../../navigation/nav-interfaces';
import { getActiveImpl, getFirstView, getPreviousImpl, getViews, init } from '../../navigation/nav-utils'; import { getActiveImpl, getFirstView, getPreviousImpl, getViews, init } from '../../navigation/nav-utils';
@ -25,9 +25,9 @@ export class IonNav implements Nav {
childNavs?: Nav[]; childNavs?: Nav[];
navController?: NavController; navController?: NavController;
@Prop() mode: string;
@Prop() root: any; @Prop() root: any;
@Prop() delegate: FrameworkDelegate; @Prop() delegate: FrameworkDelegate;
@Prop({ connect: 'ion-animation-controller' }) animationCtrl: AnimationController;
@Prop({ context: 'config' }) config: Config; @Prop({ context: 'config' }) config: Config;
constructor() { constructor() {
@ -119,8 +119,8 @@ export class IonNav implements Nav {
} }
@Listen('navInit') @Listen('navInit')
navInitialized(event: any) { navInitialized(event: CustomEvent) {
console.log('got the event: ', event); navInitializedImpl(this, event);
} }
@ -203,4 +203,14 @@ export function getNavController(nav: Nav): Promise<any> {
} }
nav.navController = document.querySelector('ion-nav-controller') as any as NavController; nav.navController = document.querySelector('ion-nav-controller') as any as NavController;
return isReady(nav.navController as any as HTMLElement); return isReady(nav.navController as any as HTMLElement);
}
export function navInitializedImpl(nav: Nav, event: CustomEvent) {
if (nav.element !== event.target) {
console.log('nav.id is parent of: ', (event as any).detail.id);
// set the parent on the child nav that dispatched the event
(event.detail as Nav).parent = nav;
// kill the event so it doesn't propagate further
event.stopPropagation();
}
} }

79
packages/core/src/navigation/nav-controller-functions.ts
View File

@ -39,69 +39,75 @@ const queueMap = new Map<number, TransitionInstruction[]>();
// public api // public api
export function push(nav: Nav, delegate: FrameworkDelegate, component: any, data?: any, opts?: NavOptions, done? : () => void): Promise<any> { export function push(nav: Nav, delegate: FrameworkDelegate, animation: Animation, component: any, data?: any, opts?: NavOptions, done? : () => void): Promise<any> {
return queueTransaction({ return queueTransaction({
insertStart: -1, insertStart: -1,
insertViews: [{page: component, params: data}], insertViews: [{page: component, params: data}],
opts: opts, opts: opts,
nav: nav, nav: nav,
delegate: delegate, delegate: delegate,
id: nav.id id: nav.id,
animation: animation
}, done); }, done);
} }
export function insert(nav: Nav, delegate: FrameworkDelegate, insertIndex: number, page: any, params?: any, opts?: NavOptions, done?: () => void): Promise<any> { export function insert(nav: Nav, delegate: FrameworkDelegate, animation: Animation, insertIndex: number, page: any, params?: any, opts?: NavOptions, done?: () => void): Promise<any> {
return queueTransaction({ return queueTransaction({
insertStart: insertIndex, insertStart: insertIndex,
insertViews: [{ page: page, params: params }], insertViews: [{ page: page, params: params }],
opts: opts, opts: opts,
nav: nav, nav: nav,
delegate: delegate, delegate: delegate,
id: nav.id id: nav.id,
animation: animation
}, done); }, done);
} }
export function insertPages(nav: Nav, delegate: FrameworkDelegate, insertIndex: number, insertPages: any[], opts?: NavOptions, done?: () => void): Promise<any> { export function insertPages(nav: Nav, delegate: FrameworkDelegate, animation: Animation, insertIndex: number, insertPages: any[], opts?: NavOptions, done?: () => void): Promise<any> {
return queueTransaction({ return queueTransaction({
insertStart: insertIndex, insertStart: insertIndex,
insertViews: insertPages, insertViews: insertPages,
opts: opts, opts: opts,
nav: nav, nav: nav,
delegate: delegate, delegate: delegate,
id: nav.id id: nav.id,
animation: animation
}, done); }, done);
} }
export function pop(nav: Nav, delegate: FrameworkDelegate, opts?: NavOptions, done?: () => void): Promise<any> { export function pop(nav: Nav, delegate: FrameworkDelegate, animation: Animation, opts?: NavOptions, done?: () => void): Promise<any> {
return queueTransaction({ return queueTransaction({
removeStart: -1, removeStart: -1,
removeCount: 1, removeCount: 1,
opts: opts, opts: opts,
nav: nav, nav: nav,
delegate: delegate, delegate: delegate,
id: nav.id id: nav.id,
animation: animation
}, done); }, done);
} }
export function popToRoot(nav: Nav, delegate: FrameworkDelegate, opts?: NavOptions, done?: () => void): Promise<any> { export function popToRoot(nav: Nav, delegate: FrameworkDelegate, animation: Animation, opts?: NavOptions, done?: () => void): Promise<any> {
return queueTransaction({ return queueTransaction({
removeStart: 1, removeStart: 1,
removeCount: -1, removeCount: -1,
opts: opts, opts: opts,
nav: nav, nav: nav,
delegate: delegate, delegate: delegate,
id: nav.id id: nav.id,
animation: animation
}, done); }, done);
} }
export function popTo(nav: Nav, delegate: FrameworkDelegate, indexOrViewCtrl: any, opts?: NavOptions, done?: () => void): Promise<any> { export function popTo(nav: Nav, delegate: FrameworkDelegate, animation: Animation, indexOrViewCtrl: any, opts?: NavOptions, done?: () => void): Promise<any> {
const config: TransitionInstruction = { const config: TransitionInstruction = {
removeStart: -1, removeStart: -1,
removeCount: -1, removeCount: -1,
opts: opts, opts: opts,
nav: nav, nav: nav,
delegate: delegate, delegate: delegate,
id: nav.id id: nav.id,
animation: animation
}; };
if (isViewController(indexOrViewCtrl)) { if (isViewController(indexOrViewCtrl)) {
config.removeView = indexOrViewCtrl; config.removeView = indexOrViewCtrl;
@ -112,18 +118,19 @@ export function popTo(nav: Nav, delegate: FrameworkDelegate, indexOrViewCtrl: an
return queueTransaction(config, done); return queueTransaction(config, done);
} }
export function remove(nav: Nav, delegate: FrameworkDelegate, startIndex: number, removeCount: number = 1, opts?: NavOptions, done?: () => void): Promise<any> { export function remove(nav: Nav, delegate: FrameworkDelegate, animation: Animation, startIndex: number, removeCount: number = 1, opts?: NavOptions, done?: () => void): Promise<any> {
return queueTransaction({ return queueTransaction({
removeStart: startIndex, removeStart: startIndex,
removeCount: removeCount, removeCount: removeCount,
opts: opts, opts: opts,
nav: nav, nav: nav,
delegate: delegate, delegate: delegate,
id: nav.id id: nav.id,
animation: animation
}, done); }, done);
} }
export function removeView(nav: Nav, delegate: FrameworkDelegate, viewController: ViewController, opts?: NavOptions, done?: () => void): Promise<any> { export function removeView(nav: Nav, delegate: FrameworkDelegate, animation: Animation, viewController: ViewController, opts?: NavOptions, done?: () => void): Promise<any> {
return queueTransaction({ return queueTransaction({
removeView: viewController, removeView: viewController,
removeStart: 0, removeStart: 0,
@ -131,15 +138,16 @@ export function removeView(nav: Nav, delegate: FrameworkDelegate, viewController
opts: opts, opts: opts,
nav: nav, nav: nav,
delegate: delegate, delegate: delegate,
id: nav.id id: nav.id,
animation: animation
}, done); }, done);
} }
export function setRoot(nav: Nav, delegate: FrameworkDelegate, page: any, params?: any, opts?: NavOptions, done?: () => void): Promise<any> { export function setRoot(nav: Nav, delegate: FrameworkDelegate, animation: Animation, page: any, params?: any, opts?: NavOptions, done?: () => void): Promise<any> {
return setPages(nav, delegate, [{ page: page, params: params }], opts, done); return setPages(nav, delegate, animation, [{ page: page, params: params }], opts, done);
} }
export function setPages(nav: Nav, delegate: FrameworkDelegate, componentDataPars: ComponentDataPair[], opts? : NavOptions, done?: () => void): Promise<any> { export function setPages(nav: Nav, delegate: FrameworkDelegate, animation: Animation, componentDataPars: ComponentDataPair[], opts? : NavOptions, done?: () => void): Promise<any> {
if (!isDef(opts)) { if (!isDef(opts)) {
opts = {}; opts = {};
} }
@ -154,7 +162,8 @@ export function setPages(nav: Nav, delegate: FrameworkDelegate, componentDataPar
opts: opts, opts: opts,
nav: nav, nav: nav,
delegate: delegate, delegate: delegate,
id: nav.id id: nav.id,
animation: animation
}, done); }, done);
} }
@ -303,26 +312,22 @@ export function loadViewAndTransition(nav: Nav, enteringView: ViewController, le
ev: ti.opts.event, ev: ti.opts.event,
}; };
return nav.animationCtrl.create().then((animation: Animation) => { const emptyTransition = transitionFactory(ti.animation);
const emptyTransition = transitionFactory(animation); transition = getHydratedTransition(animationOpts.animation, nav.config, nav.transitionId, emptyTransition, enteringView, leavingView, animationOpts, buildMdTransition);
console.log('nav.config: ', nav.config);
console.log('mode: ', nav.config.get('mode'));
transition = getHydratedTransition(animationOpts.animation, nav.config, nav.transitionId, emptyTransition, enteringView, leavingView, animationOpts, buildMdTransition);
if (nav.swipeToGoBackTransition) { if (nav.swipeToGoBackTransition) {
nav.swipeToGoBackTransition.destroy(); nav.swipeToGoBackTransition.destroy();
nav.swipeToGoBackTransition = null; nav.swipeToGoBackTransition = null;
} }
// it's a swipe to go back transition // it's a swipe to go back transition
if (transition.isRoot() && ti.opts.progressAnimation) { if (transition.isRoot() && ti.opts.progressAnimation) {
nav.swipeToGoBackTransition = transition; nav.swipeToGoBackTransition = transition;
} }
transition.start(); transition.start();
}).then(() => {
return executeAsyncTransition(nav, transition, enteringView, leavingView, ti.delegate, ti.opts, ti.nav.config.getBoolean('animate')); return executeAsyncTransition(nav, transition, enteringView, leavingView, ti.delegate, ti.opts, ti.nav.config.getBoolean('animate'));
});
} }
// TODO - transition type // TODO - transition type

5
packages/core/src/navigation/nav-interfaces.d.ts vendored
View File

@ -29,7 +29,7 @@ export interface Nav {
root?: any; root?: any;
navInit?: EventEmitter; navInit?: EventEmitter;
config?: Config; config?: Config;
animationCtrl?: AnimationController; mode?: string;
// public methods // public methods
getActive(): ViewController; getActive(): ViewController;
@ -58,7 +58,9 @@ export interface NavController {
remove(nav: Nav, startIndex: number, removeCount: number, opts: NavOptions): Promise<any>; remove(nav: Nav, startIndex: number, removeCount: number, opts: NavOptions): Promise<any>;
removeView(nav: Nav, viewController: ViewController, opts?: NavOptions): Promise<any>; removeView(nav: Nav, viewController: ViewController, opts?: NavOptions): Promise<any>;
setPages(nav: Nav, componentDataPairs: ComponentDataPair[], opts? : NavOptions): Promise<any>; setPages(nav: Nav, componentDataPairs: ComponentDataPair[], opts? : NavOptions): Promise<any>;
delegate?: FrameworkDelegate; delegate?: FrameworkDelegate;
animationCtrl?: AnimationController;
} }
export interface ViewController { export interface ViewController {
@ -126,6 +128,7 @@ export interface TransitionInstruction {
id?: number; id?: number;
nav?: Nav; nav?: Nav;
delegate?: FrameworkDelegate; delegate?: FrameworkDelegate;
animation?: Animation;
} }
export interface NavResult { export interface NavResult {