From f554cc51dfd22e92bfd0bf8676868acf32285643 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Sun, 31 May 2015 20:38:44 -0500 Subject: [PATCH] preventdefault swipeback Closes #40 --- ionic/components/nav/nav.js | 8 ++++++++ ionic/components/nav/swipe-handle.js | 13 ++++++++++++- ionic/components/tabs/tab-button.js | 4 ++-- ionic/components/tabs/tab.js | 8 ++++---- 4 files changed, 26 insertions(+), 7 deletions(-) diff --git a/ionic/components/nav/nav.js b/ionic/components/nav/nav.js index 0489670d46..08f248f023 100644 --- a/ionic/components/nav/nav.js +++ b/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, {}); diff --git a/ionic/components/nav/swipe-handle.js b/ionic/components/nav/swipe-handle.js index d4005558e6..6226c66450 100644 --- a/ionic/components/nav/swipe-handle.js +++ b/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; diff --git a/ionic/components/tabs/tab-button.js b/ionic/components/tabs/tab-button.js index 3130af7da7..0b7b8488dd 100644 --- a/ionic/components/tabs/tab-button.js +++ b/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) { diff --git a/ionic/components/tabs/tab.js b/ionic/components/tabs/tab.js index 8cdbf89913..de2dcdeeb1 100644 --- a/ionic/components/tabs/tab.js +++ b/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.contentId = 'tab-content-' + this.id; + this.id = ++tabId; + this.panelId = 'tab-panel-' + this.id; this.labeledBy = 'tab-button-' + this.id; tabs.addTab(this);