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

src/components/gesture-manager.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);
     }
 
     /**

src/components/gesture-state-machine.js

@@ -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;
     }
 }
 

src/store/index.js

@@ -257,7 +257,8 @@ const createStore = () => {
                     ...layoutProps,
                 });
             },
-        });
+        }, [Keys.LEFT, Keys.RIGHT, Keys.BACKSPACE, Keys.DISMISS,
+            Keys.JUMP_OUT, Keys.MORE, Keys.NUMBERS]);
     };
 
     const initialGestureState = {