fix(router): flickering 2

Author: manucorporat

packages/core/src/components/nav/animations/ios.transition.ts

@@ -35,13 +35,13 @@ export default function iosTransitionAnimation(Animation: Animation, _: HTMLElem
   const backDirection = (opts.direction === 'back');
   // setting up enter view
   if (enteringEl) {
-    const contentEl = enteringEl.querySelector('ion-content');
-    const headerEls = enteringEl.querySelectorAll('ion-header > *:not(ion-toolbar),ion-footer > *');
-    const enteringToolBarEle = enteringEl.querySelector('ion-toolbar');
+    const contentEl = enteringEl.querySelector(':scope > ion-content');
+    const headerEls = enteringEl.querySelectorAll(':scope > ion-header > *:not(ion-toolbar), :scope > ion-footer > *');
+    const enteringToolBarEle = enteringEl.querySelector(':scope > ion-header > ion-toolbar');
     const enteringContent = new Animation();
 
     if (!contentEl && !enteringToolBarEle && headerEls.length === 0) {
-      enteringContent.addElement(enteringEl.querySelector('ion-page,ion-nav,ion-tabs'));
+      enteringContent.addElement(enteringEl.querySelector(':scope > ion-page, :scope > ion-nav, :scope > ion-tabs'));
     } else {
       enteringContent.addElement(contentEl);
       enteringContent.addElement(headerEls);
@@ -110,7 +110,7 @@ export default function iosTransitionAnimation(Animation: Animation, _: HTMLElem
 
 
           const enteringBackBtnText = new Animation();
-          enteringBackBtnText.addElement(enteringToolBarEle.querySelector('.back-button .button-text'));
+          enteringBackBtnText.addElement(enteringToolBarEle.querySelector('ion-back-button .button-text'));
 
           enteringBackBtnText.fromTo(TRANSLATEX, (isRTL ? '-100px' : '100px'), '0px');
           enteringToolBar.add(enteringBackBtnText);
@@ -125,8 +125,8 @@ export default function iosTransitionAnimation(Animation: Animation, _: HTMLElem
   if (leavingEl) {
 
     const leavingContent = new Animation();
-    leavingContent.addElement(leavingEl.querySelector('ion-content'));
-    leavingContent.addElement(leavingEl.querySelectorAll('ion-header > *:not(ion-toolbar),ion-footer > *'));
+    leavingContent.addElement(leavingEl.querySelector(':scope > ion-content'));
+    leavingContent.addElement(leavingEl.querySelectorAll(':scope > ion-header > *:not(ion-toolbar), :scope > ion-footer > *'));
     rootTransition.add(leavingContent);
 
     if (backDirection) {
@@ -143,7 +143,7 @@ export default function iosTransitionAnimation(Animation: Animation, _: HTMLElem
         .fromTo(OPACITY, 1, OFF_OPACITY, true);
     }
 
-    const leavingToolBarEle = leavingEl.querySelector('ion-toolbar');
+    const leavingToolBarEle = leavingEl.querySelector(':scope > ion-header > ion-toolbar');
     if (leavingToolBarEle) {
       const leavingToolBar = new Animation();
       leavingToolBar.addElement(leavingToolBarEle);
@@ -158,7 +158,7 @@ export default function iosTransitionAnimation(Animation: Animation, _: HTMLElem
       leavingToolBarBg.addElement(leavingToolBarEle.querySelector('.toolbar-background'));
 
       const leavingBackButton = new Animation();
-      leavingBackButton.addElement(leavingToolBarEle.querySelector('.back-button'));
+      leavingBackButton.addElement(leavingToolBarEle.querySelector('ion-back-button'));
 
       leavingToolBar
         .add(leavingTitle)
@@ -184,7 +184,7 @@ export default function iosTransitionAnimation(Animation: Animation, _: HTMLElem
           .fromTo(OPACITY, 1, 0.01, true);
 
         const leavingBackBtnText = new Animation();
-        leavingBackBtnText.addElement(leavingToolBarEle.querySelector('.back-button .button-text'));
+        leavingBackBtnText.addElement(leavingToolBarEle.querySelector('ion-back-button .button-text'));
         leavingBackBtnText.fromTo(TRANSLATEX, CENTER, (isRTL ? -115 : 115) + 'px');
         leavingToolBar.add(leavingBackBtnText);
 

packages/core/src/components/nav/animations/md.transition.ts

@@ -65,19 +65,10 @@ function getIonPageElement(element: HTMLElement) {
   if (element.classList.contains('ion-page')) {
     return element;
   }
-  const ionPage = element.querySelector('.ion-page');
+  const ionPage = element.querySelector(':scope > .ion-page, :scope > ion-nav, :scope > ion-tabs');
   if (ionPage) {
     return ionPage;
   }
-  const ionNav = element.querySelector('ion-nav');
-  if (ionNav) {
-    return ionNav;
-  }
-  const ionTabs = element.querySelector('ion-tabs');
-  if (ionTabs) {
-    return ionTabs;
-  }
-
   // idk, return the original element so at least something animates and we don't have a null pointer
   return element;
 }

packages/core/src/components/nav/nav-util.ts

@@ -144,6 +144,7 @@ export interface NavOptions {
   ev?: any;
   updateUrl?: boolean;
   isNavRoot?: boolean;
+  viewIsReady?: () => Promise<any>;
 }
 
 export function isPresent(val: any): val is any { return val !== undefined && val !== null; }

packages/core/src/components/nav/nav.tsx

@@ -26,7 +26,7 @@ import { Transition } from './transition';
 
 import iosTransitionAnimation from './animations/ios.transition';
 import mdTransitionAnimation from './animations/md.transition';
-import { RouteID } from '../router/utils/interfaces';
+import { RouteID, RouteWrite } from '../router/utils/interfaces';
 
 const TrnsCtrl = new TransitionController();
 
@@ -203,17 +203,41 @@ export class NavControllerBase implements NavOutlet {
   }
 
   @Method()
-  setRouteId(id: string, params: any = {}, direction: number): Promise<boolean> {
+  setRouteId(id: string, params: any = {}, direction: number): Promise<RouteWrite> {
     const active = this.getActive();
     if (active && active.component === id) {
-      return Promise.resolve(false);
+      return Promise.resolve({changed: false});
     }
+
+    let resolve: (result: RouteWrite) => void;
+    const promise = new Promise<RouteWrite>((r) => resolve = r);
+
+    const commonOpts: NavOptions = {
+      viewIsReady: () => {
+        let markVisible;
+        const p = new Promise((r) => markVisible = r);
+        resolve({
+          changed: true,
+          markVisible
+        });
+        return p;
+      }
+    };
+
     if (direction === 1) {
-      return this.push(id, params).then(() => true);
-    } else if (direction === -1 && this.canGoBack()) {
-      return this.pop().then(() => true);
+      this.push(id, params, commonOpts);
+    } else if (direction === -1) {
+      this.canGoBack()
+        ? this.pop(commonOpts)
+        : this.setRoot(id, params, {
+          ...commonOpts,
+          direction: DIRECTION_BACK,
+          animate: true
+        });
+    } else {
+      this.setRoot(id, params, commonOpts);
     }
-    return this.setRoot(id, params).then(() => true);
+    return promise;
   }
 
   @Method()
@@ -340,9 +364,13 @@ export class NavControllerBase implements NavOutlet {
     this.isTransitioning = false;
     // let's see if there's another to kick off
     this._nextTrns();
-    this.ionNavChanged.emit({
-      isPop: result.direction === 'back'
-    });
+    const router = document.querySelector('ion-router');
+    const isPop = result.direction === DIRECTION_BACK;
+    if (router) {
+      router.navChanged(isPop);
+    }
+
+    this.ionNavChanged.emit({isPop});
 
     if (ti.done) {
       ti.done(
@@ -425,15 +453,19 @@ export class NavControllerBase implements NavOutlet {
     return true;
   }
 
-  private _waitUntilReady(enteringView: ViewController, leavingView: ViewController) {
+  private _waitUntilReady(enteringView: ViewController, leavingView: ViewController, ti: TransitionInstruction) {
     const promises = [];
     if (enteringView) {
       promises.push(isReady(enteringView.element));
     }
     if (leavingView) {
       promises.push(isReady(leavingView.element));
     }
-    return Promise.all(promises);
+    const promise = Promise.all(promises);
+    if (ti.opts.viewIsReady) {
+      return promise.then(ti.opts.viewIsReady);
+    }
+    return promise;
   }
 
   private _startTI(ti: TransitionInstruction): Promise<void> {
@@ -690,7 +722,7 @@ export class NavControllerBase implements NavOutlet {
 
     // transition start has to be registered before attaching the view to the DOM!
     const promise = new Promise<void>(resolve => transition.registerStart(resolve))
-      .then(() => this._waitUntilReady(enteringView, leavingView))
+      .then(() => this._waitUntilReady(enteringView, leavingView, ti))
       .then(() => this._transitionInit(transition, enteringView, leavingView, opts))
       .then(() => this._transitionStart(transition, enteringView, leavingView, opts));
 

packages/core/src/components/router/utils/dom.ts

@@ -11,17 +11,17 @@ export function writeNavState(root: HTMLElement, chain: RouteChain|null, index:
   }
   return node.componentOnReady()
     .then(() => node.setRouteId(route.id, route.params, direction))
-    .then(changed => {
-      if (changed) {
+    .then(result => {
+      if (result.changed) {
         direction = 0;
       }
       const nextEl = node.getContainerEl();
       const promise = (nextEl)
         ? writeNavState(nextEl, chain, index + 1, direction)
         : Promise.resolve();
 
-      if (node.markVisible) {
-        return promise.then(() => node.markVisible());
+      if (result.markVisible) {
+        return promise.then(() => result.markVisible());
       }
       return promise;
     });

packages/core/src/components/router/utils/interfaces.ts

@@ -1,12 +1,16 @@
 
 export interface NavOutlet {
-  setRouteId(id: string, data: any, direction: number): Promise<boolean>;
-  markVisible?(): Promise<void>;
+  setRouteId(id: string, data: any, direction: number): Promise<RouteWrite>;
   getRouteId(): RouteID|null;
 
   getContainerEl(): HTMLElement | null;
 }
 
+export interface RouteWrite {
+  changed: boolean;
+  markVisible?: () => void|Promise<void>;
+}
+
 export interface RouteID {
   id: string;
   params?: any;

packages/core/src/components/tabs/readme.md

@@ -234,9 +234,6 @@ Emitted when the tab changes.
 #### getTab()
 
 
-#### markVisible()
-
-
 #### select()
 
 

packages/core/src/components/tabs/tabs.tsx

@@ -1,6 +1,6 @@
 import { Build, Component, Element, Event, EventEmitter, Listen, Method, Prop, State } from '@stencil/core';
 import { Config, NavOutlet } from '../../index';
-import { RouteID } from '../router/utils/interfaces';
+import { RouteID, RouteWrite } from '../router/utils/interfaces';
 
 
 @Component({
@@ -105,12 +105,15 @@ export class Tabs implements NavOutlet {
   }
 
   @Method()
-  setRouteId(id: string): Promise<boolean> {
+  setRouteId(id: string): Promise<RouteWrite> {
     const selectedTab = this.getTab(id);
     if (!this.shouldSwitch(selectedTab)) {
-      return Promise.resolve(false);
+      return Promise.resolve({changed: false});
     }
-    return this.setActive(selectedTab).then(() => true);
+    return this.setActive(selectedTab).then(() => ({
+      changed: true,
+      markVisible: () => { this.tabSwitch(); }
+    }));
   }
 
   @Method()
@@ -132,13 +135,6 @@ export class Tabs implements NavOutlet {
     return this.selectedTab;
   }
 
-
-  @Method()
-  markVisible(): Promise<void> {
-    this.tabSwitch();
-    return Promise.resolve();
-  }
-
   @Method()
   getRouteId(): RouteID|null {
     const id = this.selectedTab && this.selectedTab.getTabId();

packages/core/src/components/tap-click/tap-click.tsx

@@ -85,7 +85,7 @@ export class TapClick {
 
   private pointerUp(ev: UIEvent) {
     this.setActivatedElement(null, ev);
-    if (this.cancelled) {
+    if (this.cancelled && ev.cancelable) {
       ev.preventDefault();
     }
   }