fix(tabs): swipeBackEnabled works with tabs as expected

ionic-team · Jun 21, 2016 · 2bff535 · 2bff535
1 parent aea866a
commit 2bff535
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 9 deletions.
diff --git a/src/components/input/native-input.ts b/src/components/input/native-input.ts
@@ -31,7 +31,7 @@ export class NativeInput {
   }
 
   @HostListener('input', ['$event'])
-  private _change(ev) {
+  private _change(ev: any) {
     this.valueChange.emit(ev.target.value);
   }
 
@@ -40,9 +40,9 @@ export class NativeInput {
     var self = this;
 
     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);

diff --git a/src/components/nav/nav-controller.ts b/src/components/nav/nav-controller.ts
@@ -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}

diff --git a/src/components/nav/nav.ts b/src/components/nav/nav.ts
@@ -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);
   }

diff --git a/src/components/tabs/tab.ts b/src/components/tabs/tab.ts
@@ -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;
   }

diff --git a/src/components/tabs/test/advanced/index.ts b/src/components/tabs/test/advanced/index.ts
@@ -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;

diff --git a/src/components/tabs/test/advanced/tabs.html b/src/components/tabs/test/advanced/tabs.html
@@ -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>