preventdefault swipeback

Closes #40

ionic/components/nav/nav.js

@@ -40,6 +40,14 @@ export class Nav extends NavBase {
   width() {
     return this.domElement.offsetWidth;
   }
+
+  get swipeBackEnabled() {
+    let activeItem = this.getActive();
+    if (activeItem) {
+      return activeItem.enableBack;
+    }
+    return false;
+  }
 }
 new IonicComponent(Nav, {});
 

ionic/components/nav/swipe-handle.js

@@ -7,12 +7,17 @@ import {Nav} from './nav';
 
 
 @Directive({
-  selector: 'swipe-handle'
+  selector: 'swipe-handle',
+  hostProperties: {
+    '!nav.swipeBackEnabled': 'hidden'
+  }
 })
 export class SwipeHandle {
   constructor(@Parent() nav: Nav, elementRef: ElementRef) {
     let gesture = new Gesture(elementRef.domElement);
 
+    this.nav = nav;
+
     gesture.listen();
 
     gesture.on('panend', onDragEnd);
@@ -23,6 +28,9 @@ export class SwipeHandle {
     let swipeableAreaWidth = null;
 
     function onDragEnd(ev) {
+      ev.preventDefault();
+      ev.stopPropagation();
+
       // TODO: POLISH THESE NUMBERS WITH GOOD MATHIFICATION
 
       let progress = (ev.gesture.center.x - startX) / swipeableAreaWidth;
@@ -57,6 +65,9 @@ export class SwipeHandle {
 
     function onDragHorizontal(ev) {
       if (startX === null) {
+        ev.preventDefault();
+        ev.stopPropagation();
+
         startX = ev.gesture.center.x;
         swipeableAreaWidth = nav.width() - startX;
 

ionic/components/tabs/tab-button.js

@@ -10,7 +10,7 @@ import {Tabs} from './tabs';
   properties: ['tab'],
   hostProperties: {
     'btnId': 'attr.id',
-    'ariaControls': 'attr.aria-controls',
+    'panelId': 'attr.aria-controls',
     'tab.isSelected': 'attr.aria-selected'
   },
   hostAttributes: {
@@ -28,7 +28,7 @@ export class TabButton {
 
   onInit() {
     this.btnId = 'tab-button-' + this.tab.id;
-    this.ariaControls = 'tab-content-' + this.tab.id;
+    this.panelId = 'tab-panel-' + this.tab.id;
   }
 
   onClick(ev) {

ionic/components/tabs/tab.js

@@ -6,10 +6,10 @@ import {Injector} from 'angular2/di';
 
 import {Tabs} from './tabs';
 import {Content} from '../content/content';
-import * as util from 'ionic/util';
 import {IonicComponent} from 'ionic/config/component';
 import {NavBase} from '../nav/nav-base';
 
+let tabId = -1;
 
 @Directive({
   selector: 'ion-tab',
@@ -19,7 +19,7 @@ import {NavBase} from '../nav/nav-base';
     'tabIcon'
   ],
   hostProperties: {
-    'contentId': 'attr.id',
+    'panelId': 'attr.id',
     'labeledBy': 'attr.aria-labelledby',
     'ariaHidden': 'attr.aria-hidden',
     'isSelected': 'class.show-tab'
@@ -38,8 +38,8 @@ export class Tab {
     this.nav = new NavBase(loader, injector);
     this.domElement = elementRef.domElement;
 
-    this.id = util.nextUid();
+    this.id = ++tabId;
-    this.contentId = 'tab-content-' + this.id;
+    this.panelId = 'tab-panel-' + this.id;
     this.labeledBy = 'tab-button-' + this.id;
 
     tabs.addTab(this);