Added touch controls to navigate presentations. (#876)

Co-authored-by: Tod Naturlich <[email protected]>

Author: 2 people

CHANGELOG.md

@@ -1,9 +1,16 @@
 # Changelog
 
+## Unreleased
+
+- Add support for mobile navigation of slides.
+  [#876](https://github.com/FormidableLabs/spectacle/pull/876)
+
 ## 6.0.2
 
-- Allow for `props.fontSize` to override the theme's monospace font size in `CodePane`. [#875](https://github.com/FormidableLabs/spectacle/pull/875)
-- Surface `textDecoration` prop from styled-system for `Link`s. [#869](https://github.com/FormidableLabs/spectacle/pull/869)
+- Allow for `props.fontSize` to override the theme's monospace font size in `CodePane`.
+  [#875](https://github.com/FormidableLabs/spectacle/pull/875)
+- Surface `textDecoration` prop from styled-system for `Link`s.
+  [#869](https://github.com/FormidableLabs/spectacle/pull/869)
 
 ## 6.0.1
 

src/components/deck/index.js

@@ -19,6 +19,7 @@ import usePresentation, {
   MSG_SLIDE_STATE_CHANGE
 } from '../../hooks/use-presentation';
 import useKeyboardControls from '../../hooks/use-keyboard-controls';
+import useTouchControls from '../../hooks/use-touch-controls';
 import {
   DEFAULT_SLIDE_ELEMENT_INDEX,
   DEFAULT_SLIDE_INDEX
@@ -208,6 +209,11 @@ const Deck = props => {
     toggleMode
   });
 
+  useTouchControls({
+    navigateToNext,
+    navigateToPrevious
+  });
+
   const { runTransition } = React.useContext(TransitionPipeContext);
   const slideTransitionEffect =
     filteredChildren[state.currentSlide].props.transitionEffect || {};

src/hooks/use-touch-controls.js

@@ -0,0 +1,57 @@
+import React from 'react';
+
+/**
+ * Hook that navigates to next or previous slide when the user swipes
+ * left or right in a touch device, where there is no keyboard.
+ */
+const useTouchControls = ({ navigateToNext, navigateToPrevious }) => {
+  const touchId = React.useRef(null); // To keep track of which touch started the swipe.
+  const startTouchX = React.useRef(0); // Where the swipe started.
+
+  const threshold = 100; // Pixels the user must drag to trigger a slide swipe.
+
+  React.useEffect(() => {
+    /**
+     * Keep track of which touch even we're following.
+     */
+    function handleTouchStart(e) {
+      if (touchId.current === null) {
+        const touch = e.changedTouches[0];
+        touchId.current = touch.identifier;
+        startTouchX.current = touch.clientX;
+      }
+    }
+
+    /**
+     * Only care about the touch we're tracking.
+     * See how much the user swiped, if it's more than
+     * the threshold, navigate to the previous or next slide.
+     */
+    function handleTouchEnd(e) {
+      const touchList = e.changedTouches;
+      for (let i = 0; i < touchList.length; i++) {
+        const touch = touchList[i];
+        if (touch.identifier === touchId.current) {
+          touchId.current = null;
+          const distance = touch.clientX - startTouchX.current;
+          if (distance > threshold) {
+            navigateToPrevious();
+          } else if (distance < -threshold) {
+            navigateToNext();
+          }
+          break;
+        }
+      }
+    }
+
+    window.addEventListener('touchstart', handleTouchStart);
+    window.addEventListener('touchend', handleTouchEnd);
+
+    return () => {
+      window.removeEventListener('touchstart', handleTouchStart);
+      window.removeEventListener('touchend', handleTouchEnd);
+    };
+  }, [navigateToNext, navigateToPrevious]);
+};
+
+export default useTouchControls;