javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(router): ion-nav

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-03-27 12:05:22 +02:00
parent 00fc460c4e
commit 113af9e53b
5 changed files with 90 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/src/components/nav/nav-util.ts
View File

@ -60,7 +60,7 @@ export interface NavOptions {
ev?: any; ev?: any;
updateURL?: boolean; updateURL?: boolean;
delegate?: FrameworkDelegate; delegate?: FrameworkDelegate;
viewIsReady?: () => Promise<any>; viewIsReady?: (enteringEl: HTMLElement) => Promise<any>;
} }
export interface Page extends Function { export interface Page extends Function {

7
core/src/components/nav/nav.tsx
View File

@ -197,9 +197,8 @@ export class NavControllerBase implements NavOutlet {
} }
@Method() @Method()
setRouteId(id: string, params: any = {}, direction: number): Promise<RouteWrite> { setRouteId(id: string, params: any, direction: number): Promise<RouteWrite> {
const active = this.getActive(); const active = this.getActive();
if (active && active.matches(id, params)) { if (active && active.matches(id, params)) {
return Promise.resolve({changed: false, element: active.element}); return Promise.resolve({changed: false, element: active.element});
} }
@ -211,12 +210,12 @@ export class NavControllerBase implements NavOutlet {
let finish: Promise<boolean>; let finish: Promise<boolean>;
const commonOpts: NavOptions = { const commonOpts: NavOptions = {
updateURL: false, updateURL: false,
viewIsReady: () => { viewIsReady: (enteringEl) => {
let mark: Function; let mark: Function;
const p = new Promise(r => mark = r); const p = new Promise(r => mark = r);
resolve({ resolve({
changed: true, changed: true,
element: this.getActive().element, element: enteringEl,
markVisible: async () => { markVisible: async () => {
mark(); mark();
await finish; await finish;

4
core/src/components/router-outlet/route-outlet.tsx
View File

@ -79,8 +79,8 @@ export class RouterOutlet implements NavOutlet {
} }
@Method() @Method()
async setRouteId(id: string, data: any, direction: number): Promise<RouteWrite> { async setRouteId(id: string, params: any, direction: number): Promise<RouteWrite> {
const changed = await this.setRoot(id, data, { const changed = await this.setRoot(id, params, {
duration: direction === 0 ? 0 : undefined, duration: direction === 0 ? 0 : undefined,
direction: direction === -1 ? NavDirection.Back : NavDirection.Forward, direction: direction === -1 ? NavDirection.Back : NavDirection.Forward,
}); });

98
core/src/components/router/test/basic/index.html
View File

@ -99,13 +99,80 @@
} }
} }
class TabsPage extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<ion-tabs>
<ion-tab component="tab-one"
title="Plain List"
icon="star"></ion-tab>
<ion-tab component="tab-two"
title="Schedule"
icon="globe"></ion-tab>
<ion-tab name="tab3"
title="Stopwatch"
icon="logo-facebook"
component="tab-three"></ion-tab>
<ion-tab name="tab4"
title="Messages"
icon="chatboxes"
name="tab-four">
inline tab 4
</ion-tab>
</ion-tabs>
`;
}
}
class LoginPage extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<ion-header>
<ion-toolbar>
<ion-title>Login Page</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
page one
<p><a href='#/two/second-page'>Go to page 2</a></p>
<p><a href='#/two/three/hola'>Go to page 3 (hola)</a></p>
<p><a href='#/two/three/something'>Go to page 3 (something)</a></p>
</ion-content>`;
}
}
class LoginConfirmPage extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<ion-header>
<ion-toolbar>
<ion-title>Login Confirm Page</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
page one
<p><a href='#/two/second-page'>Go to page 2</a></p>
<p><a href='#/two/three/hola'>Go to page 3 (hola)</a></p>
<p><a href='#/two/three/something'>Go to page 3 (something)</a></p>
</ion-content>`;
}
}
customElements.define('page-one', PageOne); customElements.define('page-one', PageOne);
customElements.define('page-two', PageTwo); customElements.define('page-two', PageTwo);
customElements.define('page-three', PageThree); customElements.define('page-three', PageThree);
customElements.define('tabs-page', TabsPage);
customElements.define('tab-one', TabOne); customElements.define('tab-one', TabOne);
customElements.define('tab-two', TabTwo); customElements.define('tab-two', TabTwo);
customElements.define('tab-three', TabThree); customElements.define('tab-three', TabThree);
customElements.define('login-page', LoginPage);
customElements.define('login-confirm-page', LoginConfirmPage);
</script> </script>
</head> </head>
<body> <body>
@ -113,42 +180,23 @@
<ion-app> <ion-app>
<ion-router> <ion-router>
<ion-route url="/" component="tab-one"> </ion-route> <ion-route url="/login" component="login-page"></ion-route>
<ion-route url="/login-confirm" component="login-confirm-page"></ion-route>
<ion-route url="/" component="tabs-page">
<ion-route url="/" component="tab-one"> </ion-route>
<ion-route url="/two" component="tab-two"> <ion-route url="/two" component="tab-two">
<ion-route component="page-one"> </ion-route> <ion-route component="page-one"> </ion-route>
<ion-route url="/second-page" component="page-two"> </ion-route> <ion-route url="/second-page" component="page-two"> </ion-route>
<ion-route url="/three/:prop1" component="page-three"> </ion-route> <ion-route url="/three/:prop1" component="page-three"> </ion-route>
</ion-route> </ion-route>
<ion-route url="/three" component="tab3"> </ion-route> <ion-route url="/three" component="tab3"> </ion-route>
<ion-route url="/four" component="tab4"> </ion-route> <ion-route url="/four" component="tab4"> </ion-route>
</ion-route>
</ion-router> </ion-router>
<ion-tabs> <ion-nav></ion-nav>
<ion-tab component="tab-one"
title="Plain List"
icon="star"></ion-tab>
<ion-tab component="tab-two"
title="Schedule"
icon="globe"></ion-tab>
<ion-tab name="tab3"
title="Stopwatch"
icon="logo-facebook"
component="tab-three"></ion-tab>
<ion-tab name="tab4"
title="Messages"
icon="chatboxes"
name="tab-four">
inline tab 4
</ion-tab>
</ion-tabs>
</ion-app> </ion-app>
<style> <style>

10
core/src/utils/transition.ts
View File

@ -27,9 +27,9 @@ export async function transition(opts: AnimationOptions): Promise<Animation|void
return transition; return transition;
} }
async function notifyViewReady(viewIsReady: undefined | (() => Promise<any>)) { async function notifyViewReady(viewIsReady: undefined | ((enteringEl: HTMLElement) => Promise<any>), enteringEl: HTMLElement) {
if (viewIsReady) { if (viewIsReady) {
await viewIsReady(); await viewIsReady(enteringEl);
} }
} }
@ -51,7 +51,7 @@ async function waitDeepReady(opts: AnimationOptions) {
deepReady(opts.enteringEl), deepReady(opts.enteringEl),
deepReady(opts.leavingEl) deepReady(opts.leavingEl)
]); ]);
await notifyViewReady(opts.viewIsReady); await notifyViewReady(opts.viewIsReady, opts.enteringEl);
} }
async function waitShallowReady(opts: AnimationOptions) { async function waitShallowReady(opts: AnimationOptions) {
@ -59,7 +59,7 @@ async function waitShallowReady(opts: AnimationOptions) {
shallowReady(opts.enteringEl), shallowReady(opts.enteringEl),
shallowReady(opts.leavingEl) shallowReady(opts.leavingEl)
]); ]);
await notifyViewReady(opts.viewIsReady); await notifyViewReady(opts.viewIsReady, opts.enteringEl);
} }
function showPages(enteringEl: HTMLElement, leavingEl: HTMLElement) { function showPages(enteringEl: HTMLElement, leavingEl: HTMLElement) {
@ -177,7 +177,7 @@ export interface AnimationOptions {
direction?: NavDirection; direction?: NavDirection;
duration?: number; duration?: number;
easing?: string; easing?: string;
viewIsReady?: () => Promise<any>; viewIsReady?: (enteringEl: HTMLElement) => Promise<any>;
showGoBack?: boolean; showGoBack?: boolean;
progressAnimation?: Function; progressAnimation?: Function;
enteringEl: HTMLElement; enteringEl: HTMLElement;