javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 16:16:41 +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 { Animation, AnimationController } from '../..';
import { ComponentDataPair, FrameworkDelegate, Nav, NavController, NavOptions, ViewController } from '../../navigation/nav-interfaces';
import { isReady } from '../../utils/helpers';
@ -25,78 +26,79 @@ export class NavControllerImpl implements NavController {
@Element() element: HTMLElement;
@Prop() delegate: FrameworkDelegate;
@Prop({ connect: 'ion-animation-controller' }) animationCtrl: AnimationController;
constructor() {
}
@Method()
push(nav: Nav, component: any, data?: any, opts?: NavOptions): Promise<any> {
return getDelegate(this).then((delegate) => {
return pushImpl(nav, delegate, component, data, opts);
return hydrateDelegateAndAnimation(this).then(([delegate, animation]) => {
return pushImpl(nav, delegate, animation, component, data, opts);
});
}
@Method()
pop(nav: Nav, opts?: NavOptions): Promise<any> {
return getDelegate(this).then((delegate) => {
return popImpl(nav, delegate, opts);
return hydrateDelegateAndAnimation(this).then(([delegate, animation]) => {
return popImpl(nav, delegate, animation, opts);
});
}
@Method()
setRoot(nav: Nav, component: any, data?: any, opts?: NavOptions): Promise<any> {
return getDelegate(this).then((delegate) => {
return setRootImpl(nav, delegate, component, data, opts);
return hydrateDelegateAndAnimation(this).then(([delegate, animation]) => {
return setRootImpl(nav, delegate, animation, component, data, opts);
});
}
@Method()
insert(nav: Nav, insertIndex: number, page: any, params?: any, opts?: NavOptions): Promise<any> {
return getDelegate(this).then((delegate) => {
return insertImpl(nav, delegate, insertIndex, page, params, opts);
return hydrateDelegateAndAnimation(this).then(([delegate, animation]) => {
return insertImpl(nav, delegate, animation, insertIndex, page, params, opts);
});
}
@Method()
insertPages(nav: Nav, insertIndex: number, insertPages: any[], opts?: NavOptions): Promise<any> {
return getDelegate(this).then((delegate) => {
return insertPagesImpl(nav, delegate, insertIndex, insertPages, opts);
return hydrateDelegateAndAnimation(this).then(([delegate, animation]) => {
return insertPagesImpl(nav, delegate, animation, insertIndex, insertPages, opts);
});
}
@Method()
popToRoot(nav: Nav, opts?: NavOptions): Promise<any> {
return getDelegate(this).then((delegate) => {
return popToRootImpl(nav, delegate, opts);
return hydrateDelegateAndAnimation(this).then(([delegate, animation]) => {
return popToRootImpl(nav, delegate, animation, opts);
});
}
@Method()
popTo(nav: Nav, indexOrViewCtrl: any, opts?: NavOptions): Promise<any> {
return getDelegate(this).then((delegate) => {
return popToImpl(nav, delegate, indexOrViewCtrl, opts);
return hydrateDelegateAndAnimation(this).then(([delegate, animation]) => {
return popToImpl(nav, delegate, animation, indexOrViewCtrl, opts);
});
}
@Method()
remove(nav: Nav, startIndex: number, removeCount?: number, opts?: NavOptions): Promise<any> {
return getDelegate(this).then((delegate) => {
return removeImpl(nav, delegate, startIndex, removeCount, opts);
return hydrateDelegateAndAnimation(this).then(([delegate, animation]) => {
return removeImpl(nav, delegate, animation, startIndex, removeCount, opts);
});
}
@Method()
removeView(nav: Nav, viewController: ViewController, opts?: NavOptions): Promise<any> {
return getDelegate(this).then((delegate) => {
return removeViewImpl(nav, delegate, viewController, opts);
return hydrateDelegateAndAnimation(this).then(([delegate, animation]) => {
return removeViewImpl(nav, delegate, animation, viewController, opts);
});
}
@Method()
setPages(nav: Nav, componentDataPairs: ComponentDataPair[], opts? : NavOptions): Promise<any> {
return getDelegate(this).then((delegate) => {
return setPagesImpl(nav, delegate, componentDataPairs, opts);
return hydrateDelegateAndAnimation(this).then(([delegate, animation]) => {
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) {
return Promise.resolve(navController.delegate);
}
@ -115,5 +121,9 @@ export function getDelegate(navController: NavController): Promise<FrameworkDele
return isReady(element).then(() => {
defaultDelegate = element as any as FrameworkDelegate;
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 { AnimationController, Config } from '../..';
import { Config } from '../..';
import { ComponentDataPair, FrameworkDelegate, Nav, NavController, NavOptions, ViewController } from '../../navigation/nav-interfaces';
import { getActiveImpl, getFirstView, getPreviousImpl, getViews, init } from '../../navigation/nav-utils';
@ -25,9 +25,9 @@ export class IonNav implements Nav {
childNavs?: Nav[];
navController?: NavController;
@Prop() mode: string;
@Prop() root: any;
@Prop() delegate: FrameworkDelegate;
@Prop({ connect: 'ion-animation-controller' }) animationCtrl: AnimationController;
@Prop({ context: 'config' }) config: Config;
constructor() {
@ -119,8 +119,8 @@ export class IonNav implements Nav {
}
@Listen('navInit')
navInitialized(event: any) {
console.log('got the event: ', event);
navInitialized(event: CustomEvent) {
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;
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();
}
}