Permalink
Browse files

Disable swiping when starting from the navigation bar

Summary: Right now, it is possible to initiate a swipe by pressing on a key in the navigation bar. Since the navigation bar does not move with a swipe, it can be confusing to swipe the navigation bar but see other elements move instead. Now, it is not possible to initiate a swipe from the navigation bar, and so swipes must start from the main key panel instead.

Test Plan:
- Verified in a browser that it is still possible to swipe from non-navigation keys
- Checked that it is still possible to use all the keys on the keypad
- Checked that it is still possible to move over the navigation bar during a swipe

Reviewers: charlie, kevinb

Reviewed By: charlie, kevinb

Differential Revision: https://phabricator.khanacademy.org/D28012
1 parent 3b7cde4 commit 1bf10fa807ea1d98a755e18b38d502c6c7d551b3 @shadaj shadaj committed Jun 8, 2016
Showing with 15 additions and 6 deletions.
  1. +2 −2 src/components/gesture-manager.js
  2. +11 −3 src/components/gesture-state-machine.js
  3. +2 −1 src/store/index.js
@@ -13,7 +13,7 @@ const coordsForEvent = (evt) => {
};
class GestureManager {
- constructor(options, handlers) {
+ constructor(options, handlers, disabledSwipeKeys) {
const { swipeEnabled } = options;
this.swipeEnabled = swipeEnabled;
@@ -70,7 +70,7 @@ class GestureManager {
},
onSwipeChange: handlers.onSwipeChange,
onSwipeEnd: handlers.onSwipeEnd,
- });
+ }, disabledSwipeKeys);
}
/**
@@ -10,11 +10,13 @@ const longPressWaitTimeMs = 100;
const swipeThresholdPx = 20;
class GestureStateMachine {
- constructor(handlers) {
+ constructor(handlers, swipeDisabledNodeIds) {
this.handlers = handlers;
+ this.swipeDisabledNodeIds = swipeDisabledNodeIds;
this.swiping = false;
this.startX = null;
+ this._swipeDisabledForGesture = false;
}
_maybeCancelLongPress() {
@@ -88,8 +90,12 @@ class GestureStateMachine {
*/
onTouchStart(getId, pageX) {
this.startX = pageX;
+ const startingNode = getId();
- this._onFocus(getId());
+ this._swipeDisabledForGesture =
+ this.swipeDisabledNodeIds.includes(startingNode);
+
+ this._onFocus(startingNode);
}
/**
@@ -104,7 +110,7 @@ class GestureStateMachine {
onTouchMove(getId, pageX, swipeEnabled) {
const dx = pageX - this.startX;
const shouldBeginSwiping = !this.swiping && swipeEnabled &&
- Math.abs(dx) > swipeThresholdPx;
+ Math.abs(dx) > swipeThresholdPx && !this._swipeDisabledForGesture;
if (this.swiping) {
this.handlers.onSwipeChange(dx);
@@ -155,6 +161,7 @@ class GestureStateMachine {
this.swiping = false;
this.startX = null;
+ this._swipeDisabledForGesture = false;
}
/**
@@ -174,6 +181,7 @@ class GestureStateMachine {
this.swiping = false;
this.startX = null;
+ this._swipeDisabledForGesture = false;
}
}
View
@@ -257,7 +257,8 @@ const createStore = () => {
...layoutProps,
});
},
- });
+ }, [Keys.LEFT, Keys.RIGHT, Keys.BACKSPACE, Keys.DISMISS,
+ Keys.JUMP_OUT, Keys.MORE, Keys.NUMBERS]);
};
const initialGestureState = {

0 comments on commit 1bf10fa

Please sign in to comment.