javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 11:17:19 +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;
updateURL?: boolean;
delegate?: FrameworkDelegate;
viewIsReady?: () => Promise<any>;
viewIsReady?: (enteringEl: HTMLElement) => Promise<any>;
}
export interface Page extends Function {

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

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

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

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

110
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-two', PageTwo);
customElements.define('page-three', PageThree);
customElements.define('tabs-page', TabsPage);
customElements.define('tab-one', TabOne);
customElements.define('tab-two', TabTwo);
customElements.define('tab-three', TabThree);
customElements.define('login-page', LoginPage);
customElements.define('login-confirm-page', LoginConfirmPage);
</script>
</head>
<body>
@ -113,42 +180,23 @@
<ion-app>
<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="/two" component="tab-two">
<ion-route component="page-one"> </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="/" component="tabs-page">
<ion-route url="/" component="tab-one"> </ion-route>
<ion-route url="/two" component="tab-two">
<ion-route component="page-one"> </ion-route>
<ion-route url="/second-page" component="page-two"> </ion-route>
<ion-route url="/three/:prop1" component="page-three"> </ion-route>
</ion-route>
<ion-route url="/three" component="tab3"> </ion-route>
<ion-route url="/four" component="tab4"> </ion-route>
</ion-route>
<ion-route url="/three" component="tab3"> </ion-route>
<ion-route url="/four" component="tab4"> </ion-route>
</ion-router>
<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>
<ion-nav></ion-nav>
</ion-app>
<style>

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

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