diff --git a/angular/src/directives/index.ts b/angular/src/directives/index.ts index e2f97530024..5cf53e28abb 100644 --- a/angular/src/directives/index.ts +++ b/angular/src/directives/index.ts @@ -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'; diff --git a/angular/src/directives/navigation/go-back.ts b/angular/src/directives/navigation/go-back.ts deleted file mode 100644 index c675d07dec4..00000000000 --- a/angular/src/directives/navigation/go-back.ts +++ /dev/null @@ -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); - } -} diff --git a/angular/src/directives/navigation/router-direction.ts b/angular/src/directives/navigation/router-direction.ts new file mode 100644 index 00000000000..03af1907d24 --- /dev/null +++ b/angular/src/directives/navigation/router-direction.ts @@ -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; + } +} diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts index e4a473dbb40..42dccfb4544 100644 --- a/angular/src/directives/proxies.ts +++ b/angular/src/directives/proxies.ts @@ -20,7 +20,7 @@ export function inputs(instance: any, el: ElementRef, props: string[]) { }); }); } -const accept = 'accept', activated = 'activated', active = 'active', addRipple = 'addRipple', allowEmptySelection = 'allowEmptySelection', animated = 'animated', autoHide = 'autoHide', autocapitalize = 'autocapitalize', autocomplete = 'autocomplete', autocorrect = 'autocorrect', autofocus = 'autofocus', badge = 'badge', badgeStyle = 'badgeStyle', btnId = 'btnId', button = 'button', buttonType = 'buttonType', canGoBack = 'canGoBack', cancel = 'cancel', cancelButtonText = 'cancelButtonText', cancelText = 'cancelText', checked = 'checked', clearInput = 'clearInput', clearOnEdit = 'clearOnEdit', close = 'close', closeDuration = 'closeDuration', closeOpened = 'closeOpened', closeSlidingItems = 'closeSlidingItems', color = 'color', cols = 'cols', complete = 'complete', component = 'component', componentProps = 'componentProps', contentId = 'contentId', dayNames = 'dayNames', dayShortNames = 'dayShortNames', dayValues = 'dayValues', debounce = 'debounce', defaultHref = 'defaultHref', delegate = 'delegate', detail = 'detail', disabled = 'disabled', displayFormat = 'displayFormat', doneText = 'doneText', dualKnobs = 'dualKnobs', duration = 'duration', edge = 'edge', expand = 'expand', expandable = 'expandable', fill = 'fill', fireSwipeEvent = 'fireSwipeEvent', fixed = 'fixed', floating = 'floating', forceOverscroll = 'forceOverscroll', fullscreen = 'fullscreen', getActive = 'getActive', getActiveIndex = 'getActiveIndex', getByIndex = 'getByIndex', getOpenAmount = 'getOpenAmount', getOpenItem = 'getOpenItem', getPrevious = 'getPrevious', getPreviousIndex = 'getPreviousIndex', getProgress = 'getProgress', getRouteId = 'getRouteId', getSelected = 'getSelected', getSlidingRatio = 'getSlidingRatio', getTab = 'getTab', getTabId = 'getTabId', getText = 'getText', goBack = 'goBack', header = 'header', horizontal = 'horizontal', hourValues = 'hourValues', href = 'href', icon = 'icon', inputmode = 'inputmode', insert = 'insert', insertPages = 'insertPages', interfaceOptions = 'interfaceOptions', ionBlur = 'ionBlur', ionCancel = 'ionCancel', ionChange = 'ionChange', ionClear = 'ionClear', ionClick = 'ionClick', ionClose = 'ionClose', ionDrag = 'ionDrag', ionFocus = 'ionFocus', ionInfinite = 'ionInfinite', ionInput = 'ionInput', ionInputDidLoad = 'ionInputDidLoad', ionInputDidUnload = 'ionInputDidUnload', ionMenuChange = 'ionMenuChange', ionNavDidChange = 'ionNavDidChange', ionNavWillChange = 'ionNavWillChange', ionOpen = 'ionOpen', ionPull = 'ionPull', ionRadioDidLoad = 'ionRadioDidLoad', ionRadioDidUnload = 'ionRadioDidUnload', ionRefresh = 'ionRefresh', ionScroll = 'ionScroll', ionScrollEnd = 'ionScrollEnd', ionScrollStart = 'ionScrollStart', ionSelect = 'ionSelect', ionSelectOptionDidLoad = 'ionSelectOptionDidLoad', ionSelectOptionDidUnload = 'ionSelectOptionDidUnload', ionSlideDidChange = 'ionSlideDidChange', ionSlideDrag = 'ionSlideDrag', ionSlideNextEnd = 'ionSlideNextEnd', ionSlideNextStart = 'ionSlideNextStart', ionSlidePrevEnd = 'ionSlidePrevEnd', ionSlidePrevStart = 'ionSlidePrevStart', ionSlideReachEnd = 'ionSlideReachEnd', ionSlideReachStart = 'ionSlideReachStart', ionSlideTouchEnd = 'ionSlideTouchEnd', ionSlideTouchStart = 'ionSlideTouchStart', ionSlideTransitionEnd = 'ionSlideTransitionEnd', ionSlideTransitionStart = 'ionSlideTransitionStart', ionSlideWillChange = 'ionSlideWillChange', ionSplitPaneVisible = 'ionSplitPaneVisible', ionStart = 'ionStart', ionStyle = 'ionStyle', ionSwipe = 'ionSwipe', isActive = 'isActive', isBeginning = 'isBeginning', isEnd = 'isEnd', isOpen = 'isOpen', isPane = 'isPane', isRightSide = 'isRightSide', isVisible = 'isVisible', label = 'label', length = 'length', loadingSpinner = 'loadingSpinner', loadingText = 'loadingText', lockSwipeToNext = 'lockSwipeToNext', lockSwipeToPrev = 'lockSwipeToPrev', lockSwipes = 'lockSwipes', max = 'max', maxEdgeStart = 'maxEdgeStart', maxlength = 'maxlength', mediaQuery = 'mediaQuery', menu = 'menu', menuId = 'menuId', message = 'message', min = 'min', minlength = 'minlength', minuteValues = 'minuteValues', mode = 'mode', monthNames = 'monthNames', monthShortNames = 'monthShortNames', monthValues = 'monthValues', multiple = 'multiple', name = 'name', okText = 'okText', open = 'open', options = 'options', or = 'or', orientation = 'orientation', pager = 'pager', pattern = 'pattern', paused = 'paused', persistent = 'persistent', pickerFormat = 'pickerFormat', pickerOptions = 'pickerOptions', pin = 'pin', placeholder = 'placeholder', platform = 'platform', pop = 'pop', popTo = 'popTo', popToRoot = 'popToRoot', position = 'position', pullMax = 'pullMax', pullMin = 'pullMin', pullingIcon = 'pullingIcon', pullingText = 'pullingText', push = 'push', ratio = 'ratio', ratioUpper = 'ratioUpper', readonly = 'readonly', refreshingSpinner = 'refreshingSpinner', refreshingText = 'refreshingText', removeIndex = 'removeIndex', required = 'required', results = 'results', root = 'root', rootParams = 'rootParams', round = 'round', rows = 'rows', scrollByPoint = 'scrollByPoint', scrollEnabled = 'scrollEnabled', scrollEvents = 'scrollEvents', scrollToBottom = 'scrollToBottom', scrollToPoint = 'scrollToPoint', scrollToTop = 'scrollToTop', scrollable = 'scrollable', select = 'select', selected = 'selected', selectedText = 'selectedText', setActive = 'setActive', setOpen = 'setOpen', setOpenItem = 'setOpenItem', setPages = 'setPages', setRoot = 'setRoot', setRouteId = 'setRouteId', show = 'show', showCancelButton = 'showCancelButton', side = 'side', size = 'size', slideNext = 'slideNext', slidePrev = 'slidePrev', slideTo = 'slideTo', snapbackDuration = 'snapbackDuration', snaps = 'snaps', spellcheck = 'spellcheck', stacked = 'stacked', startAutoplay = 'startAutoplay', step = 'step', stopAutoplay = 'stopAutoplay', strong = 'strong', subHeader = 'subHeader', swipeBackEnabled = 'swipeBackEnabled', swipeEnabled = 'swipeEnabled', tabbarHidden = 'tabbarHidden', tabbarHighlight = 'tabbarHighlight', tabbarLayout = 'tabbarLayout', tabbarPlacement = 'tabbarPlacement', tabsHideOnSubPages = 'tabsHideOnSubPages', tapClick = 'tapClick', text = 'text', threshold = 'threshold', toggle = 'toggle', translucent = 'translucent', type = 'type', update = 'update', url = 'url', useRouter = 'useRouter', value = 'value', vertical = 'vertical', waitFor = 'waitFor', when = 'when', width = 'width', wrap = 'wrap', yearValues = 'yearValues'; +const accept = 'accept', activated = 'activated', active = 'active', addRipple = 'addRipple', allowEmptySelection = 'allowEmptySelection', animated = 'animated', autoHide = 'autoHide', autocapitalize = 'autocapitalize', autocomplete = 'autocomplete', autocorrect = 'autocorrect', autofocus = 'autofocus', badge = 'badge', badgeStyle = 'badgeStyle', btnId = 'btnId', button = 'button', buttonType = 'buttonType', canGoBack = 'canGoBack', cancel = 'cancel', cancelButtonText = 'cancelButtonText', cancelText = 'cancelText', checked = 'checked', clearInput = 'clearInput', clearOnEdit = 'clearOnEdit', close = 'close', closeDuration = 'closeDuration', closeOpened = 'closeOpened', closeSlidingItems = 'closeSlidingItems', color = 'color', cols = 'cols', complete = 'complete', component = 'component', componentProps = 'componentProps', contentId = 'contentId', dayNames = 'dayNames', dayShortNames = 'dayShortNames', dayValues = 'dayValues', debounce = 'debounce', defaultHref = 'defaultHref', delegate = 'delegate', detail = 'detail', disabled = 'disabled', displayFormat = 'displayFormat', doneText = 'doneText', dualKnobs = 'dualKnobs', duration = 'duration', edge = 'edge', expand = 'expand', expandable = 'expandable', fill = 'fill', fireSwipeEvent = 'fireSwipeEvent', fixed = 'fixed', floating = 'floating', forceOverscroll = 'forceOverscroll', fullscreen = 'fullscreen', getActive = 'getActive', getActiveIndex = 'getActiveIndex', getByIndex = 'getByIndex', getOpenAmount = 'getOpenAmount', getOpenItem = 'getOpenItem', getPrevious = 'getPrevious', getPreviousIndex = 'getPreviousIndex', getProgress = 'getProgress', getRouteId = 'getRouteId', getSelected = 'getSelected', getSlidingRatio = 'getSlidingRatio', getTab = 'getTab', getTabId = 'getTabId', getText = 'getText', header = 'header', horizontal = 'horizontal', hourValues = 'hourValues', href = 'href', icon = 'icon', inputmode = 'inputmode', insert = 'insert', insertPages = 'insertPages', interfaceOptions = 'interfaceOptions', ionBlur = 'ionBlur', ionCancel = 'ionCancel', ionChange = 'ionChange', ionClear = 'ionClear', ionClick = 'ionClick', ionClose = 'ionClose', ionDrag = 'ionDrag', ionFocus = 'ionFocus', ionInfinite = 'ionInfinite', ionInput = 'ionInput', ionInputDidLoad = 'ionInputDidLoad', ionInputDidUnload = 'ionInputDidUnload', ionMenuChange = 'ionMenuChange', ionNavDidChange = 'ionNavDidChange', ionNavWillChange = 'ionNavWillChange', ionOpen = 'ionOpen', ionPull = 'ionPull', ionRadioDidLoad = 'ionRadioDidLoad', ionRadioDidUnload = 'ionRadioDidUnload', ionRefresh = 'ionRefresh', ionScroll = 'ionScroll', ionScrollEnd = 'ionScrollEnd', ionScrollStart = 'ionScrollStart', ionSelect = 'ionSelect', ionSelectOptionDidLoad = 'ionSelectOptionDidLoad', ionSelectOptionDidUnload = 'ionSelectOptionDidUnload', ionSlideDidChange = 'ionSlideDidChange', ionSlideDrag = 'ionSlideDrag', ionSlideNextEnd = 'ionSlideNextEnd', ionSlideNextStart = 'ionSlideNextStart', ionSlidePrevEnd = 'ionSlidePrevEnd', ionSlidePrevStart = 'ionSlidePrevStart', ionSlideReachEnd = 'ionSlideReachEnd', ionSlideReachStart = 'ionSlideReachStart', ionSlideTouchEnd = 'ionSlideTouchEnd', ionSlideTouchStart = 'ionSlideTouchStart', ionSlideTransitionEnd = 'ionSlideTransitionEnd', ionSlideTransitionStart = 'ionSlideTransitionStart', ionSlideWillChange = 'ionSlideWillChange', ionSplitPaneVisible = 'ionSplitPaneVisible', ionStart = 'ionStart', ionStyle = 'ionStyle', ionSwipe = 'ionSwipe', isActive = 'isActive', isBeginning = 'isBeginning', isEnd = 'isEnd', isOpen = 'isOpen', isPane = 'isPane', isRightSide = 'isRightSide', isVisible = 'isVisible', label = 'label', length = 'length', loadingSpinner = 'loadingSpinner', loadingText = 'loadingText', lockSwipeToNext = 'lockSwipeToNext', lockSwipeToPrev = 'lockSwipeToPrev', lockSwipes = 'lockSwipes', max = 'max', maxEdgeStart = 'maxEdgeStart', maxlength = 'maxlength', mediaQuery = 'mediaQuery', menu = 'menu', menuId = 'menuId', message = 'message', min = 'min', minlength = 'minlength', minuteValues = 'minuteValues', mode = 'mode', monthNames = 'monthNames', monthShortNames = 'monthShortNames', monthValues = 'monthValues', multiple = 'multiple', name = 'name', okText = 'okText', open = 'open', options = 'options', or = 'or', orientation = 'orientation', pager = 'pager', pattern = 'pattern', paused = 'paused', persistent = 'persistent', pickerFormat = 'pickerFormat', pickerOptions = 'pickerOptions', pin = 'pin', placeholder = 'placeholder', platform = 'platform', pop = 'pop', popTo = 'popTo', popToRoot = 'popToRoot', position = 'position', pullMax = 'pullMax', pullMin = 'pullMin', pullingIcon = 'pullingIcon', pullingText = 'pullingText', push = 'push', ratio = 'ratio', ratioUpper = 'ratioUpper', readonly = 'readonly', refreshingSpinner = 'refreshingSpinner', refreshingText = 'refreshingText', removeIndex = 'removeIndex', required = 'required', results = 'results', root = 'root', rootParams = 'rootParams', round = 'round', routerDirection = 'routerDirection', rows = 'rows', scrollByPoint = 'scrollByPoint', scrollEnabled = 'scrollEnabled', scrollEvents = 'scrollEvents', scrollToBottom = 'scrollToBottom', scrollToPoint = 'scrollToPoint', scrollToTop = 'scrollToTop', scrollable = 'scrollable', select = 'select', selected = 'selected', selectedText = 'selectedText', setActive = 'setActive', setOpen = 'setOpen', setOpenItem = 'setOpenItem', setPages = 'setPages', setRoot = 'setRoot', setRouteId = 'setRouteId', show = 'show', showCancelButton = 'showCancelButton', side = 'side', size = 'size', slideNext = 'slideNext', slidePrev = 'slidePrev', slideTo = 'slideTo', snapbackDuration = 'snapbackDuration', snaps = 'snaps', spellcheck = 'spellcheck', stacked = 'stacked', startAutoplay = 'startAutoplay', step = 'step', stopAutoplay = 'stopAutoplay', strong = 'strong', subHeader = 'subHeader', swipeBackEnabled = 'swipeBackEnabled', swipeEnabled = 'swipeEnabled', tabbarHidden = 'tabbarHidden', tabbarHighlight = 'tabbarHighlight', tabbarLayout = 'tabbarLayout', tabbarPlacement = 'tabbarPlacement', tabsHideOnSubPages = 'tabsHideOnSubPages', tapClick = 'tapClick', text = 'text', threshold = 'threshold', toggle = 'toggle', translucent = 'translucent', type = 'type', update = 'update', url = 'url', useRouter = 'useRouter', value = 'value', vertical = 'vertical', waitFor = 'waitFor', when = 'when', width = 'width', wrap = 'wrap', yearValues = 'yearValues'; @NgDirective({ selector: 'ion-app' }) export class App { @@ -99,9 +99,9 @@ export class Button { */ @NgInput() fill: string; /** - * 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`. */ - @NgInput() goBack: boolean; + @NgInput() routerDirection: string; /** * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. */ @@ -125,7 +125,7 @@ export class Button { @NgOutput() ionFocus: NgEventEmitter; @NgOutput() ionBlur: NgEventEmitter; constructor(r: ElementRef) { - inputs(this, r, [color, mode, buttonType, disabled, expand, fill, goBack, href, round, size, strong, type]); + inputs(this, r, [color, mode, buttonType, disabled, expand, fill, routerDirection, href, round, size, strong, type]); outputs(this, [ionFocus, ionBlur]); } } @@ -724,9 +724,12 @@ export class Item { * Whether or not this item should be tappable. If true, a button tag will be rendered. Defaults to `false`. */ @NgInput() button: boolean; - @NgInput() goBack: boolean; + /** + * When using a router, it specifies the transition direction when navigating a another page usign `href`. + */ + @NgInput() routerDirection: string; constructor(r: ElementRef) { - inputs(this, r, [color, mode, detail, disabled, href, button, goBack]); + inputs(this, r, [color, mode, detail, disabled, href, button, routerDirection]); } } diff --git a/angular/src/module.ts b/angular/src/module.ts index 30d06978804..0e10fcc6dd9 100644 --- a/angular/src/module.ts +++ b/angular/src/module.ts @@ -94,9 +94,9 @@ const DECLARATIONS = [ c.TextValueAccessor, // navigation - c.GoBack, c.IonBackButton, c.IonRouterOutlet, + c.RouterDirection, c.NavDelegate, c.TabDelegate, c.TabsDelegate, diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 5c6a60833e1..dfb56f0a0f0 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -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'; } } } diff --git a/core/src/components/anchor/anchor.tsx b/core/src/components/anchor/anchor.tsx index e1b3a169ca5..d6636891711 100644 --- a/core/src/components/anchor/anchor.tsx +++ b/core/src/components/anchor/anchor.tsx @@ -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 openURL(this.href, ev, this.goBack)}> + onClick={(ev) => openURL(this.href, ev, this.routerDirection)}> ; } diff --git a/core/src/components/back-button/back-button.tsx b/core/src/components/back-button/back-button.tsx index 7bc4932cbad..903ece16d2d 100644 --- a/core/src/components/back-button/back-button.tsx +++ b/core/src/components/back-button/back-button.tsx @@ -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'); } } diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx index ec20f0460c9..21a13ef9aee 100644 --- a/core/src/components/button/button.tsx +++ b/core/src/components/button/button.tsx @@ -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)}> diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx index f3de8188b05..1061afad461 100644 --- a/core/src/components/item/item.tsx +++ b/core/src/components/item/item.tsx @@ -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 { openURL(this.href, ev, this.goBack)}> + onClick={(ev) => openURL(this.href, ev, this.routerDirection)}>
diff --git a/core/src/utils/theme.ts b/core/src/utils/theme.ts index dff0f362d09..1c18a6f8ee4 100644 --- a/core/src/utils/theme.ts +++ b/core/src/utils/theme.ts @@ -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();