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

fix(router): fixes navChanged()

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-03-26 22:07:00 +02:00
parent 076b7e55bd
commit dddaee1719
17 changed files with 120 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
core/src/components.d.ts vendored
View File

@ -95,6 +95,7 @@ import {
} from './components/nav/view-controller';
import {
RouteID,
RouterDirection,
RouterEventDetail,
RouteWrite,
} from './components/router/utils/interfaces';
@ -3502,7 +3503,6 @@ declare global {
'canGoBack': (view?: ViewController) => boolean;
'delegate': FrameworkDelegate;
'getActive': () => ViewController;
'getAllChildNavs': () => any[];
'getByIndex': (index: number) => ViewController;
'getPrevious': (view?: ViewController) => ViewController;
'getRouteId': () => RouteID;
@ -3546,7 +3546,7 @@ declare global {
export interface IonNavAttributes extends HTMLAttributes {
'animated'?: boolean;
'delegate'?: FrameworkDelegate;
'onIonNavChanged'?: (event: CustomEvent) => void;
'onIonNavChanged'?: (event: CustomEvent<void>) => void;
'root'?: any;
'rootParams'?: any;
'swipeBackEnabled'?: boolean;
@ -4733,8 +4733,8 @@ declare global {
declare global {
interface HTMLIonRouterElement extends HTMLStencilElement {
'base': string;
'navChanged': (isPop: boolean) => Promise<boolean>;
'push': (url: string, backDirection?: boolean) => Promise<boolean>;
'navChanged': (direction: RouterDirection) => Promise<boolean>;
'push': (url: string, direction?: RouterDirection) => Promise<boolean>;
'useHash': boolean;
}
var HTMLIonRouterElement: {
@ -5977,7 +5977,7 @@ declare global {
* Emitted when the tab changes.
*/
'onIonChange'?: (event: CustomEvent) => void;
'onIonNavChanged'?: (event: CustomEvent<any>) => void;
'onIonNavChanged'?: (event: CustomEvent<void>) => void;
'scrollable'?: boolean;
/**
* If true, the tabbar

3
core/src/components/back-button/back-button.tsx
View File

@ -1,6 +1,7 @@
import { Component, Element, Prop } from '@stencil/core';
import { Config } from '../../index';
import { openURL } from '../../utils/theme';
import { RouterDirection } from '../router/utils/interfaces';
@Component({
tag: 'ion-back-button',
@ -41,7 +42,7 @@ export class BackButton {
ev.preventDefault();
nav.pop();
} else if (this.defaultHref) {
openURL(this.defaultHref, ev, true);
openURL(this.defaultHref, ev, RouterDirection.Back);
}
}

4
core/src/components/hide-when/hide-when.tsx
View File

@ -38,8 +38,4 @@ export class HideWhen implements DisplayWhen {
}
};
}
}

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

@ -34,8 +34,8 @@ export const enum ViewState {
}
export const enum NavDirection {
back = 'back',
forward = 'forward'
Back = 'back',
Forward = 'forward'
}
export type NavParams = {[key: string]: any};
@ -58,6 +58,7 @@ export interface NavOptions {
keyboardClose?: boolean;
progressAnimation?: boolean;
ev?: any;
updateURL?: boolean;
delegate?: FrameworkDelegate;
viewIsReady?: () => Promise<any>;
}

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

@ -13,7 +13,7 @@ import {
import { ViewController, isViewController } from './view-controller';
import { Animation, Config, DomController, FrameworkDelegate, GestureDetail, NavOutlet } from '../..';
import { RouteID, RouteWrite } from '../router/utils/interfaces';
import { RouteID, RouteWrite, RouterDirection } from '../router/utils/interfaces';
import { AnimationOptions, ViewLifecycle, lifecycle, transition } from '../../utils/transition';
import { assert } from '../../utils/helpers';
@ -25,7 +25,6 @@ import mdTransitionAnimation from './animations/md.transition';
})
export class NavControllerBase implements NavOutlet {
private _children: NavControllerBase[] = [];
private _ids = -1;
private _init = false;
private _queue: TransitionInstruction[] = [];
@ -64,7 +63,7 @@ export class NavControllerBase implements NavOutlet {
}
}
@Event() ionNavChanged: EventEmitter;
@Event() ionNavChanged: EventEmitter<void>;
componentWillLoad() {
this.id = 'n' + (++ctrlIds);
@ -209,27 +208,31 @@ export class NavControllerBase implements NavOutlet {
let resolve: (result: RouteWrite) => void;
const promise = new Promise<RouteWrite>((r) => resolve = r);
let finish: Promise<boolean>;
const commonOpts: NavOptions = {
updateURL: false,
viewIsReady: () => {
let markVisible;
const p = new Promise(r => markVisible = r);
let mark: Function;
const p = new Promise(r => mark = r);
resolve({
changed: true,
element: this.getActive().element,
markVisible
markVisible: async () => {
mark();
await finish;
}
});
return p;
}
};
if (viewController) {
this.popTo(viewController, {...commonOpts, direction: NavDirection.back});
finish = this.popTo(viewController, {...commonOpts, direction: NavDirection.Back});
} else if (direction === 1) {
this.push(id, params, commonOpts);
finish = this.push(id, params, commonOpts);
} else if (direction === -1) {
this.setRoot(id, params, {...commonOpts, direction: NavDirection.back, animate: true});
finish = this.setRoot(id, params, {...commonOpts, direction: NavDirection.Back, animate: true});
} else {
this.setRoot(id, params, commonOpts);
finish = this.setRoot(id, params, commonOpts);
}
return promise;
}
@ -244,11 +247,6 @@ export class NavControllerBase implements NavOutlet {
} : undefined;
}
@Method()
getAllChildNavs(): any[] {
return this._children.slice();
}
@Method()
canGoBack(view = this.getActive()): boolean {
return !!(view && this.getPrevious(view));
@ -331,13 +329,6 @@ export class NavControllerBase implements NavOutlet {
}
this._init = true;
const isPop = result.direction === NavDirection.back;
if (this.useRouter) {
const router = document.querySelector('ion-router');
router && router.navChanged(isPop);
}
this.ionNavChanged.emit({isPop});
if (ti.done) {
ti.done(
result.hasCompleted,
@ -348,6 +339,18 @@ export class NavControllerBase implements NavOutlet {
);
}
ti.resolve(result.hasCompleted);
if (ti.opts.updateURL !== false && this.useRouter) {
const router = document.querySelector('ion-router');
if (router) {
const direction = (result.direction === NavDirection.Back)
? RouterDirection.Back
: RouterDirection.Forward;
router && router.navChanged(direction);
}
}
this.ionNavChanged.emit();
}
private _failed(rejectReason: any, ti: TransitionInstruction) {
@ -528,7 +531,7 @@ export class NavControllerBase implements NavOutlet {
}
}
// default the direction to "back"
opts.direction = opts.direction || NavDirection.back;
opts.direction = opts.direction || NavDirection.Back;
}
const finalBalance = this._views.length + (insertViews ? insertViews.length : 0) - (removeCount ? removeCount : 0);
@ -556,7 +559,7 @@ export class NavControllerBase implements NavOutlet {
if (ti.enteringRequiresTransition) {
// default to forward if not already set
opts.direction = opts.direction || NavDirection.forward;
opts.direction = opts.direction || NavDirection.Forward;
}
}
@ -757,7 +760,7 @@ export class NavControllerBase implements NavOutlet {
// default the direction to "back";
const opts: NavOptions = {
direction: NavDirection.back,
direction: NavDirection.Back,
progressAnimation: true
};
@ -809,7 +812,6 @@ export class NavControllerBase implements NavOutlet {
canSwipeBack(): boolean {
return (
this.swipeBackEnabled &&
this._children.length === 0 &&
!this.isTransitioning &&
this.canGoBack()
);

3
core/src/components/nav/readme.md
View File

@ -72,9 +72,6 @@ boolean
#### getActive()
#### getAllChildNavs()
#### getByIndex()

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

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

57
core/src/components/router/router.tsx
View File

@ -1,9 +1,9 @@
import { Build, Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
import { Config, DomController } from '../../index';
import { flattenRouterTree, readRedirects, readRoutes } from './utils/parser';
import { readNavState, writeNavState } from './utils/dom';
import { chainToPath, generatePath, parsePath, readPath, writePath } from './utils/path';
import { RouteChain, RouteRedirect, RouterEventDetail } from './utils/interfaces';
import { RouteChain, RouteRedirect, RouterDirection, RouterEventDetail } from './utils/interfaces';
import { routeRedirect, routerIDsToChain, routerPathToChain } from './utils/matching';
import { printRoutes } from './utils/debug';
@ -53,9 +53,7 @@ export class Router {
const tree = readRoutes(this.el);
this.routes = flattenRouterTree(tree);
if (Build.isDev) {
printRoutes(this.routes);
}
printRoutes(this.routes);
// schedule write
if (this.timer) {
@ -75,17 +73,21 @@ export class Router {
this.state++;
window.history.replaceState(this.state, document.title, document.location.href);
}
const direction = window.history.state >= this.state ? 1 : -1;
this.writeNavStateRoot(this.getPath(), direction);
const direction = window.history.state >= this.state
? RouterDirection.Forward
: RouterDirection.Back;
const path = this.getPath();
console.debug('[ion-router] URL changed -> update nav', path, direction);
this.writeNavStateRoot(path, direction);
}
@Method()
async navChanged(isPop: boolean): Promise<boolean> {
async navChanged(direction: RouterDirection): Promise<boolean> {
if (this.busy) {
return false;
}
console.debug('[IN] nav changed -> update URL');
const { ids, pivot } = readNavState(document.body);
const { ids, outlet } = readNavState(document.body);
const chain = routerIDsToChain(ids, this.routes);
if (!chain) {
console.warn('no matching URL for ', ids.map(i => i.id));
@ -93,31 +95,38 @@ export class Router {
}
const path = chainToPath(chain);
this.setPath(path, isPop);
if (!path) {
console.warn('router could not match path because some required param is missing');
return false;
}
if (chain.length > ids.length) {
await this.writeNavState(pivot, chain.slice(ids.length), 0);
console.debug('[ion-router] nav changed -> update URL', ids, path);
this.setPath(path, direction);
if (outlet) {
console.debug('[ion-router] updating nested outlet', outlet);
await this.writeNavState(outlet, chain, RouterDirection.None, ids.length);
}
this.emitRouteChange(path, null);
return true;
}
@Method()
push(url: string, backDirection = false) {
push(url: string, direction = RouterDirection.Forward) {
const path = parsePath(url);
this.setPath(path, backDirection);
this.setPath(path, direction);
return this.writeNavStateRoot(path, backDirection ? -1 : 1);
console.debug('[ion-router] URL pushed -> updating nav', url, direction);
return this.writeNavStateRoot(path, direction);
}
private async writeNavStateRoot(path: string[], direction: number): Promise<boolean> {
private async writeNavStateRoot(path: string[], direction: RouterDirection): Promise<boolean> {
if (this.busy) {
return false;
}
const redirect = routeRedirect(path, this.redirects);
let redirectFrom: string[] = null;
if (redirect) {
this.setPath(redirect.to, true);
this.setPath(redirect.to, direction);
redirectFrom = redirect.from;
path = redirect.to;
}
@ -129,24 +138,25 @@ export class Router {
return changed;
}
private async writeNavState(node: any, chain: RouteChain, direction: number): Promise<boolean> {
private async writeNavState(node: any, chain: RouteChain, direction: RouterDirection, index = 0): Promise<boolean> {
if (this.busy) {
return false;
}
try {
this.busy = true;
const changed = await writeNavState(node, chain, 0, direction);
const changed = await writeNavState(node, chain, direction, index);
this.busy = false;
return changed;
} catch (e) {
this.busy = false;
throw e;
console.error(e);
return false;
}
}
private setPath(path: string[], isPop: boolean) {
private setPath(path: string[], direction: RouterDirection) {
this.state++;
writePath(window.history, this.base, this.useHash, path, isPop, this.state);
writePath(window.history, this.base, this.useHash, path, direction, this.state);
}
private getPath(): string[] | null {
@ -154,6 +164,7 @@ export class Router {
}
private emitRouteChange(path: string[], redirectPath: string[]|null) {
console.debug('[ion-router] route changed', path);
const from = this.previousPath;
const redirectedFrom = redirectPath ? generatePath(redirectPath) : null;
const to = generatePath(path);

12
core/src/components/router/test/parser.spec.tsx
View File

@ -20,12 +20,12 @@ describe('readRoutes', () => {
r4.appendChild(r6);
const expected: RouteTree = [
{ path: [''], id: 'main-page', children: [], params: {router: root} },
{ path: ['one-page'], id: 'one-page', children: [], params: {router: root} },
{ path: ['secondpage'], id: 'second-page', params: {router: root}, children: [
{ path: ['5', 'hola'], id: '4', params: {router: root}, children: [
{ path: ['path', 'to', 'five'], id: '5', children: [], params: {router: root} },
{ path: ['path', 'to', 'five2'], id: '6', children: [], params: {router: root} }
{ path: [''], id: 'main-page', children: [], params: undefined },
{ path: ['one-page'], id: 'one-page', children: [], params: undefined },
{ path: ['secondpage'], id: 'second-page', params: undefined, children: [
{ path: ['5', 'hola'], id: '4', params: undefined, children: [
{ path: ['path', 'to', 'five'], id: '5', children: [], params: undefined },
{ path: ['path', 'to', 'five2'], id: '6', children: [], params: undefined }
] }
] }
];

4
core/src/components/router/test/path.spec.tsx
View File

@ -78,7 +78,7 @@ describe('chainToPath', () => {
{ id: '3', path: ['segment'], params: undefined },
{ id: '8', path: [':name'], params: undefined },
];
expect(() => chainToPath(chain)).toThrowError('missing param name');
expect(chainToPath(chain)).toBeNull();
});
it('should raise an exception 2', () => {
@ -86,7 +86,7 @@ describe('chainToPath', () => {
{ id: '3', path: ['segment'], params: undefined },
{ id: '8', path: [':name', ':id'], params: {name: 'hey'} },
];
expect(() => chainToPath(chain)).toThrowError('missing param id');
expect(chainToPath(chain)).toBeNull();
});
});

22
core/src/components/router/utils/dom.ts
View File

@ -1,6 +1,6 @@
import { NavOutlet, NavOutletElement, RouteChain, RouteID } from './interfaces';
import { NavOutlet, NavOutletElement, RouteChain, RouteID, RouterDirection } from './interfaces';
export async function writeNavState(root: HTMLElement|undefined, chain: RouteChain|null, index: number, direction: number): Promise<boolean> {
export async function writeNavState(root: HTMLElement|undefined, chain: RouteChain|null, direction: RouterDirection, index: number): Promise<boolean> {
// find next navigation outlet in the DOM
const outlet = searchNavNode(root);
@ -16,11 +16,11 @@ export async function writeNavState(root: HTMLElement|undefined, chain: RouteCha
// if the outlet changed the page, reset navigation to neutral (no direction)
// this means nested outlets will not animate
if (result.changed) {
direction = 0;
direction = RouterDirection.None;
}
// recursivelly set nested outlets
const changed = await writeNavState(result.element, chain, index + 1, direction);
const changed = await writeNavState(result.element, chain, direction, index + 1);
// once all nested outlets are visible let's make the parent visible too,
// using markVisible prevents flickering
@ -30,14 +30,14 @@ export async function writeNavState(root: HTMLElement|undefined, chain: RouteCha
return changed;
}
export function readNavState(root: HTMLElement) {
export function readNavState(root: HTMLElement | null) {
const ids: RouteID[] = [];
let pivot: NavOutlet|null;
let node: HTMLElement|undefined = root;
let outlet: NavOutlet|null;
let node: HTMLElement|null = root;
while (true) {
pivot = searchNavNode(node);
if (pivot) {
const id = pivot.getRouteId();
outlet = searchNavNode(node);
if (outlet) {
const id = outlet.getRouteId();
if (id) {
node = id.element;
id.element = undefined;
@ -49,7 +49,7 @@ export function readNavState(root: HTMLElement) {
break;
}
}
return {ids, pivot};
return {ids, outlet};
}
const QUERY = ':not([no-router]) ion-nav,:not([no-router]) ion-tabs, :not([no-router]) ion-router-outlet';

6
core/src/components/router/utils/interfaces.ts
View File

@ -10,6 +10,12 @@ export interface RouterEventDetail {
to: string;
}
export const enum RouterDirection {
None = 0,
Forward = 1,
Back = -1,
}
export interface RouteRedirect {
from: string[];
to: string[]|undefined;

6
core/src/components/router/utils/parser.ts
View File

@ -1,6 +1,5 @@
import { RouteChain, RouteNode, RouteRedirect, RouteTree } from './interfaces';
import { parsePath } from './path';
import { mergeParams } from './matching';
export function readRedirects(root: Element): RouteRedirect[] {
@ -16,16 +15,13 @@ export function readRedirects(root: Element): RouteRedirect[] {
}
export function readRoutes(root: Element, node = root): RouteTree {
const commonParams = {
router: root
};
return (Array.from(node.children) as HTMLIonRouteElement[])
.filter(el => el.tagName === 'ION-ROUTE' && el.component)
.map(el => {
return {
path: parsePath(readProp(el, 'url')),
id: readProp(el, 'component').toLowerCase(),
params: mergeParams(commonParams, el.componentProps),
params: el.componentProps,
children: readRoutes(root, el)
};
});

15
core/src/components/router/utils/path.ts
View File

@ -1,4 +1,4 @@
import { RouteChain } from './interfaces';
import { RouteChain, RouterDirection } from './interfaces';
export function generatePath(segments: string[]): string {
const path = segments
@ -8,14 +8,14 @@ export function generatePath(segments: string[]): string {
return '/' + path;
}
export function chainToPath(chain: RouteChain): string[] {
export function chainToPath(chain: RouteChain): string[]|null {
const path = [];
for (const route of chain) {
for (const segment of route.path) {
if (segment[0] === ':') {
const param = route.params && route.params[segment.slice(1)];
if (!param) {
throw new Error(`missing param ${segment.slice(1)}`);
return null;
}
path.push(param);
} else if (segment !== '') {
@ -26,17 +26,16 @@ export function chainToPath(chain: RouteChain): string[] {
return path;
}
export function writePath(history: History, base: string, usePath: boolean, path: string[], isPop: boolean, state: number) {
export function writePath(history: History, base: string, usePath: boolean, path: string[], direction: RouterDirection, state: number) {
path = [base, ...path];
let url = generatePath(path);
if (usePath) {
url = '#' + url;
}
if (isPop) {
// history.back();
history.replaceState(state, '', url);
} else {
if (direction === RouterDirection.Forward) {
history.pushState(state, '', url);
} else {
history.replaceState(state, '', url);
}
}

19
core/src/components/tabs/tabs.tsx
View File

@ -1,6 +1,6 @@
import { Build, Component, Element, Event, EventEmitter, Listen, Method, Prop, State } from '@stencil/core';
import { Config, NavOutlet } from '../../index';
import { RouteID, RouteWrite } from '../router/utils/interfaces';
import { RouteID, RouteWrite, RouterDirection } from '../router/utils/interfaces';
@Component({
@ -68,7 +68,7 @@ export class Tabs implements NavOutlet {
* Emitted when the tab changes.
*/
@Event() ionChange: EventEmitter;
@Event() ionNavChanged: EventEmitter<any>;
@Event() ionNavChanged: EventEmitter<void>;
componentWillLoad() {
this.useRouter = !!document.querySelector('ion-router') && !this.el.closest('[no-router]');
@ -105,7 +105,8 @@ export class Tabs implements NavOutlet {
}
await this.setActive(selectedTab);
await this.notifyRouter();
return this.tabSwitch();
await this.tabSwitch();
return true;
}
@Method()
@ -119,7 +120,7 @@ export class Tabs implements NavOutlet {
return {
changed: true,
element: this.selectedTab,
markVisible: () => { this.tabSwitch(); }
markVisible: () => this.tabSwitch(),
};
}
@ -220,14 +221,14 @@ export class Tabs implements NavOutlet {
return selectedTab.setActive();
}
private tabSwitch(): boolean {
private tabSwitch() {
const selectedTab = this.selectedTab;
const leavingTab = this.leavingTab;
this.leavingTab = undefined;
this.transitioning = false;
if (!selectedTab) {
return false;
return;
}
selectedTab.selected = true;
@ -236,17 +237,15 @@ export class Tabs implements NavOutlet {
leavingTab.active = false;
}
this.ionChange.emit(selectedTab);
this.ionNavChanged.emit({isPop: false});
return true;
this.ionNavChanged.emit();
}
return false;
}
private notifyRouter() {
if (this.useRouter) {
const router = document.querySelector('ion-router');
if (router) {
return router.navChanged(false);
return router.navChanged(RouterDirection.Forward);
}
}
return Promise.resolve(false);

5
core/src/utils/theme.ts
View File

@ -1,4 +1,5 @@
import { CssClassMap } from '../index';
import { RouterDirection } from '../components/router/utils/interfaces';
/**
* Create the mode and color classes for the component based on the classes passed in
@ -65,12 +66,12 @@ export function getClassMap(classes: string | undefined): CssClassMap {
return map;
}
export function openURL(url: string, ev: Event, isPop = false) {
export function openURL(url: string, ev: Event, direction = RouterDirection.Forward) {
if (url && url[0] !== '#' && url.indexOf('://') === -1) {
const router = document.querySelector('ion-router');
if (router) {
ev && ev.preventDefault();
return router.componentOnReady().then(() => router.push(url, isPop));
return router.componentOnReady().then(() => router.push(url, direction));
}
}
return Promise.resolve();

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

@ -121,7 +121,7 @@ function fireDidEvents(enteringEl: HTMLElement, leavingEl: HTMLElement) {
function setZIndex(enteringEl: HTMLElement, leavingEl: HTMLElement, direction: NavDirection) {
if (enteringEl) {
enteringEl.style.zIndex = (direction === NavDirection.back)
enteringEl.style.zIndex = (direction === NavDirection.Back)
? '99'
: '101';
}