javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(routerDirection): refactors goBack

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-04-11 22:40:50 +02:00
parent d623b3b71f
commit 54d7a12bea
11 changed files with 95 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
angular/src/directives/index.ts
View File

@@ -5,7 +5,7 @@ export { RadioValueAccessor } from './control-value-accessors/radio-value-access
export { SelectValueAccessor } from './control-value-accessors/select-value-accessor';
export { TextValueAccessor } from './control-value-accessors/text-value-accessor';
export { GoBack } from './navigation/go-back';
export { RouterDirection } from './navigation/router-direction';
export { IonBackButton } from './navigation/ion-back-button';
export { NavDelegate } from './navigation/nav-delegate';
export { TabDelegate } from './navigation/tab-delegate';

17
angular/src/directives/navigation/go-back.ts
View File

@@ -1,17 +0,0 @@
import { Directive, HostListener } from '@angular/core';
import { NavController, NavIntent } from '../../providers/nav-controller';
@Directive({
selector: '[goBack]',
})
export class GoBack {
constructor(
private navCtrl: NavController,
) {}
@HostListener('click')
onClick() {
this.navCtrl.setIntent(NavIntent.Back);
}
}

28
angular/src/directives/navigation/router-direction.ts Normal file
View File

@@ -0,0 +1,28 @@
import { Directive, HostListener, Input } from '@angular/core';
import { NavController, NavIntent } from '../../providers/nav-controller';
@Directive({
selector: '[routerDirection]',
})
export class RouterDirection {
@Input() routerDirection: string;
constructor(
private navCtrl: NavController,
) {}
@HostListener('click')
onClick() {
this.navCtrl.setIntent(textToIntent(this.routerDirection));
}
}
function textToIntent(direction: string) {
switch (direction) {
case 'forward': return NavIntent.Forward;
case 'back': return NavIntent.Back;
case 'root': return NavIntent.Root;
default: return NavIntent.Auto;
}
}

15
angular/src/directives/proxies.ts
View File

File diff suppressed because one or more lines are too long

2
angular/src/module.ts
View File

@@ -94,9 +94,9 @@ const DECLARATIONS = [
c.TextValueAccessor,
// navigation
c.GoBack,
c.IonBackButton,
c.IonRouterOutlet,
c.RouterDirection,
c.NavDelegate,
c.TabDelegate,
c.TabsDelegate,

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

@@ -492,8 +492,14 @@ declare global {
declare global {
interface HTMLIonAnchorElement extends HTMLStencilElement {
'goBack': boolean;
/**
* Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
*/
'href': string;
/**
* When using a router, it specifies the transition direction when navigating a another page usign `href`.
*/
'routerDirection': 'forward' | 'back';
}
var HTMLIonAnchorElement: {
prototype: HTMLIonAnchorElement;
@@ -512,8 +518,14 @@ declare global {
}
namespace JSXElements {
export interface IonAnchorAttributes extends HTMLAttributes {
'goBack'?: boolean;
/**
* Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
*/
'href'?: string;
/**
* When using a router, it specifies the transition direction when navigating a another page usign `href`.
*/
'routerDirection'?: 'forward' | 'back';
}
}
}
@@ -781,10 +793,6 @@ declare global {
* Set to `"clear"` for a transparent button, to `"outline"` for a transparent button with a border, or to `"solid"`. The default style is `"solid"` except inside of a toolbar, where the default is `"clear"`.
*/
'fill': 'clear' | 'outline' | 'solid' | 'default';
/**
* If true, the transition direction will be backwards upon navigation. Defaults to `false`.
*/
'goBack': boolean;
/**
* Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
*/
@@ -797,6 +805,10 @@ declare global {
* If true, activates a button with rounded corners.
*/
'round': boolean;
/**
* When using a router, it specifies the transition direction when navigating a another page usign `href`.
*/
'routerDirection': 'forward' | 'back';
/**
* The button size. Possible values are: `"small"`, `"default"`, `"large"`.
*/
@@ -847,10 +859,6 @@ declare global {
* Set to `"clear"` for a transparent button, to `"outline"` for a transparent button with a border, or to `"solid"`. The default style is `"solid"` except inside of a toolbar, where the default is `"clear"`.
*/
'fill'?: 'clear' | 'outline' | 'solid' | 'default';
/**
* If true, the transition direction will be backwards upon navigation. Defaults to `false`.
*/
'goBack'?: boolean;
/**
* Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
*/
@@ -871,6 +879,10 @@ declare global {
* If true, activates a button with rounded corners.
*/
'round'?: boolean;
/**
* When using a router, it specifies the transition direction when navigating a another page usign `href`.
*/
'routerDirection'?: 'forward' | 'back';
/**
* The button size. Possible values are: `"small"`, `"default"`, `"large"`.
*/
@@ -2658,7 +2670,6 @@ declare global {
* If true, the user cannot interact with the item. Defaults to `false`.
*/
'disabled': boolean;
'goBack': boolean;
/**
* Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
*/
@@ -2667,6 +2678,10 @@ declare global {
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
'mode': 'ios' | 'md';
/**
* When using a router, it specifies the transition direction when navigating a another page usign `href`.
*/
'routerDirection': 'forward' | 'back';
}
var HTMLIonItemElement: {
prototype: HTMLIonItemElement;
@@ -2701,7 +2716,6 @@ declare global {
* If true, the user cannot interact with the item. Defaults to `false`.
*/
'disabled'?: boolean;
'goBack'?: boolean;
/**
* Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
*/
@@ -2710,6 +2724,10 @@ declare global {
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
'mode'?: 'ios' | 'md';
/**
* When using a router, it specifies the transition direction when navigating a another page usign `href`.
*/
'routerDirection'?: 'forward' | 'back';
}
}
}

12
core/src/components/anchor/anchor.tsx
View File

@@ -7,14 +7,22 @@ import { openURL } from '../../utils/theme';
})
export class Anchor {
/**
* Contains a URL or a URL fragment that the hyperlink points to.
* If this property is set, an anchor tag will be rendered.
*/
@Prop() href: string;
@Prop() goBack = false;
/**
* When using a router, it specifies the transition direction when navigating a
* another page usign `href`.
*/
@Prop() routerDirection: 'forward' | 'back';
render() {
return <a
href={this.href}
onClick={(ev) => openURL(this.href, ev, this.goBack)}>
onClick={(ev) => openURL(this.href, ev, this.routerDirection)}>
<slot/>
</a>;
}

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

@@ -54,7 +54,7 @@ export class BackButton {
ev.preventDefault();
nav.pop();
} else if (this.defaultHref) {
openURL(this.defaultHref, ev, true);
openURL(this.defaultHref, ev, 'back');
}
}

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

@@ -55,9 +55,10 @@ export class Button {
@Prop() fill: 'clear' | 'outline' | 'solid' | 'default' = 'default';
/**
* If true, the transition direction will be backwards upon navigation. Defaults to `false`.
* When using a router, it specifies the transition direction when navigating a
* another page usign `href`.
*/
@Prop() goBack = false;
@Prop() routerDirection: 'forward' | 'back';
/**
* Contains a URL or a URL fragment that the hyperlink points to.
@@ -144,7 +145,7 @@ export class Button {
onFocus={this.onFocus.bind(this)}
onKeyUp={this.onKeyUp.bind(this)}
onBlur={this.onBlur.bind(this)}
onClick={(ev) => openURL(this.href, ev, this.goBack)}>
onClick={(ev) => openURL(this.href, ev, this.routerDirection)}>
<span class='button-inner'>
<slot name='icon-only'></slot>
<slot name='start'></slot>

8
core/src/components/item/item.tsx
View File

@@ -53,7 +53,11 @@ export class Item {
*/
@Prop() button = false;
@Prop() goBack = false;
/**
* When using a router, it specifies the transition direction when navigating a
* another page usign `href`.
*/
@Prop() routerDirection: 'forward' | 'back';
@Listen('ionStyle')
@@ -122,7 +126,7 @@ export class Item {
<TagType
{...attrs}
class={themedClasses}
onClick={(ev) => openURL(this.href, ev, this.goBack)}>
onClick={(ev) => openURL(this.href, ev, this.routerDirection)}>
<slot name='start'></slot>
<div class='item-inner'>
<div class='input-wrapper'>

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

@@ -68,12 +68,15 @@ export function getClassMap(classes: string | string[] | undefined): CssClassMap
return map;
}
export function openURL(url: string, ev: Event, goBack = false) {
export type RouterDirection = 'forward' | 'back';
export async 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, goBack ? -1 : 1));
await router.componentOnReady();
return router.push(url, direction === 'back' ? -1 : 1);
}
}
return Promise.resolve();