fix(tabs): swipeBackEnabled works with tabs as expected

This commit is contained in:
Manu Mtz.-Almeida
2016-06-21 17:56:30 +02:00
committed by Adam Bradley
parent aea866a742
commit 2bff535e7b
6 changed files with 30 additions and 9 deletions

View File

@ -31,7 +31,7 @@ export class NativeInput {
}
@HostListener('input', ['$event'])
private _change(ev) {
private _change(ev: any) {
this.valueChange.emit(ev.target.value);
}
@ -41,8 +41,8 @@ export class NativeInput {
self.focusChange.emit(true);
function docTouchEnd(ev) {
var tapped: HTMLElement = ev.target;
function docTouchEnd(ev: TouchEvent) {
var tapped = <HTMLElement>ev.target;
if (tapped && self.element()) {
if (tapped.tagName !== 'INPUT' && tapped.tagName !== 'TEXTAREA' && !tapped.classList.contains('input-cover')) {
self.element().blur();
@ -178,7 +178,7 @@ export class NativeInput {
}
function cloneInput(focusedInputEle, addCssClass) {
function cloneInput(focusedInputEle: any, addCssClass: string) {
let clonedInputEle = focusedInputEle.cloneNode(true);
clonedInputEle.classList.add('cloned-input');
clonedInputEle.classList.add(addCssClass);
@ -191,7 +191,7 @@ function cloneInput(focusedInputEle, addCssClass) {
return clonedInputEle;
}
function removeClone(focusedInputEle, queryCssClass) {
function removeClone(focusedInputEle: any, queryCssClass: string) {
let clonedInputEle = focusedInputEle.parentElement.querySelector('.' + queryCssClass);
if (clonedInputEle) {
clonedInputEle.parentNode.removeChild(clonedInputEle);

View File

@ -1783,6 +1783,13 @@ export class NavController extends Ion {
return this._views.length;
}
/**
* @private
*/
isSwipeBackEnabled(): boolean {
return this._sbEnabled;
}
/**
* Returns the root `NavController`.
* @returns {NavController}

View File

@ -191,7 +191,6 @@ export class Nav extends NavController implements AfterViewInit {
get swipeBackEnabled(): boolean {
return this._sbEnabled;
}
set swipeBackEnabled(val: boolean) {
this._sbEnabled = isTrueProperty(val);
}

View File

@ -201,6 +201,17 @@ export class Tab extends NavController {
this._isShown = isTrueProperty(val);
}
/**
* @input {boolean} Whether it's possible to swipe-to-go-back on this tab or not.
*/
@Input()
get swipeBackEnabled(): boolean {
return this._sbEnabled;
}
set swipeBackEnabled(val: boolean) {
this._sbEnabled = isTrueProperty(val);
}
/**
* @output {Tab} Method to call when the current tab is selected
*/
@ -222,6 +233,10 @@ export class Tab extends NavController {
parentTabs.add(this);
if (parentTabs.rootNav) {
this._sbEnabled = parentTabs.rootNav.isSwipeBackEnabled();
}
this._panelId = 'tabpanel-' + this.id;
this._btnId = 'tab-' + this.id;
}

View File

@ -411,7 +411,7 @@ class Tab3Page1 {
@Component({
template: '<ion-nav [root]="root"></ion-nav>'
template: '<ion-nav [root]="root" swipeBackEnabled="false"></ion-nav>'
})
class E2EApp {
root = SignIn;

View File

@ -1,6 +1,6 @@
<ion-tabs preloadTabs="false" (ionChange)="onTabChange()">
<ion-tab tabTitle="Recents" tabIcon="call" [root]="tab1Root" [rootParams]="params"></ion-tab>
<ion-tab tabTitle="Recents" tabIcon="call" [root]="tab1Root" [rootParams]="params" swipeBackEnabled="true"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="star" [root]="tab2Root"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="tab3Root"></ion-tab>
<ion-tab tabTitle="Chat" tabIcon="chatbubbles" (ionSelect)="chat()"></ion-tab>