From 113af9e53bbfa228bbead1743d886ae2b504f22e Mon Sep 17 00:00:00 2001
From: "Manu Mtz.-Almeida" <manu.mtza@gmail.com>
Date: Tue, 27 Mar 2018 12:05:22 +0200
Subject: [PATCH] fix(router): ion-nav

---
 core/src/components/nav/nav-util.ts           |   2 +-
 core/src/components/nav/nav.tsx               |   7 +-
 .../components/router-outlet/route-outlet.tsx |   4 +-
 .../components/router/test/basic/index.html   | 110 +++++++++++++-----
 core/src/utils/transition.ts                  |  10 +-
 5 files changed, 90 insertions(+), 43 deletions(-)

diff --git a/core/src/components/nav/nav-util.ts b/core/src/components/nav/nav-util.ts
index e600cac186..d37946927c 100644
--- a/core/src/components/nav/nav-util.ts
+++ b/core/src/components/nav/nav-util.ts
@@ -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 {
diff --git a/core/src/components/nav/nav.tsx b/core/src/components/nav/nav.tsx
index 047098dc3d..a6a82c5474 100644
--- a/core/src/components/nav/nav.tsx
+++ b/core/src/components/nav/nav.tsx
@@ -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;
diff --git a/core/src/components/router-outlet/route-outlet.tsx b/core/src/components/router-outlet/route-outlet.tsx
index 881fa54133..dfcc142edf 100644
--- a/core/src/components/router-outlet/route-outlet.tsx
+++ b/core/src/components/router-outlet/route-outlet.tsx
@@ -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,
     });
diff --git a/core/src/components/router/test/basic/index.html b/core/src/components/router/test/basic/index.html
index caba2d7f37..08a894e74a 100644
--- a/core/src/components/router/test/basic/index.html
+++ b/core/src/components/router/test/basic/index.html
@@ -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>
diff --git a/core/src/utils/transition.ts b/core/src/utils/transition.ts
index f0e334145b..a15489e892 100644
--- a/core/src/utils/transition.ts
+++ b/core/src/utils/transition.ts
@@ -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;