implement touch swiping pinned messages

src/config.js

@@ -139,3 +139,5 @@ export const QRCODE_SIZE = 128;
 export const WAKE_UP_TIMEOUT = 80000;
 // Timer interval between checks if computer woke up from sleep (1 sec).
 export const WAKE_UP_TICK = 1000;
+
+export const MIN_SWIPE_DISTANCE = REM_SIZE * 3;

src/version.js

@@ -1,3 +1,3 @@
 // This is a generated file. Don't edit.
 
-export const PACKAGE_VERSION = "0.23.1-rc1";
+export const PACKAGE_VERSION = "0.24.0-rc1";

src/widgets/pinned-messages.jsx

@@ -4,16 +4,37 @@ import { injectIntl } from 'react-intl';
 import { Drafty } from 'tinode-sdk';
 
 import { previewFormatter } from '../lib/formatters.js';
+import { MIN_SWIPE_DISTANCE } from '../config.js';
 
 class PinnedMessages extends React.PureComponent {
   constructor(props) {
     super(props);
 
+    this.touchSurface = React.createRef();
+    // Starting location of the touch gesture.
+    this.touchX = null;
+    this.touchY = null;
+
     this.getSelectedIndex = this.getSelectedIndex.bind(this);
     this.handleCancel = this.handleCancel.bind(this);
     this.handleSelected = this.handleSelected.bind(this);
     this.handleMoveNext = this.handleMoveNext.bind(this);
     this.handleMovePrev = this.handleMovePrev.bind(this);
+    this.handleTouchEventStart = this.handleTouchEventStart.bind(this);
+    this.handleTouchEventEnd = this.handleTouchEventEnd.bind(this);
+    this.handleTouchCancel = this.handleTouchCancel.bind(this);
+  }
+
+  componentDidMount() {
+    this.touchSurface.current.addEventListener('touchstart', this.handleTouchEventStart, {passive: true});
+    this.touchSurface.current.addEventListener('touchend', this.handleTouchEventEnd, {passive: true});
+    this.touchSurface.current.addEventListener('touchcancel', this.handleTouchCancel, {passive: true});
+  }
+
+  componentWillUnmount() {
+    this.touchSurface.current.removeEventListener('touchstart', this.handleTouchEventStart);
+    this.touchSurface.current.removeEventListener('touchend', this.handleTouchEventEnd);
+    this.touchSurface.current.removeEventListener('touchcancel', this.handleTouchCancel);
   }
 
   getSelectedIndex() {
@@ -31,8 +52,9 @@ class PinnedMessages extends React.PureComponent {
     this.props.onSelected(this.props.messages[this.getSelectedIndex()].seq);
   }
 
-  handleMoveNext(e) {
-    e.preventDefault();
+  handleMoveNext(e, isTouch) {
+    // Don't call preventDefault for touch events.
+    isTouch || e.preventDefault();
     e.stopPropagation();
     const idx = Math.max(this.props.selected - 1, 0);
     if (idx != this.props.selected) {
@@ -40,8 +62,9 @@ class PinnedMessages extends React.PureComponent {
     }
   }
 
-  handleMovePrev(e) {
-    e.preventDefault();
+  handleMovePrev(e, isTouch) {
+    // Don't call preventDefault for touch events.
+    isTouch || e.preventDefault();
     e.stopPropagation();
     const idx = Math.min(this.props.selected + 1, (this.props.messages || []).length - 1);
     if (idx != this.props.selected) {
@@ -49,6 +72,39 @@ class PinnedMessages extends React.PureComponent {
     }
   }
 
+  handleTouchEventStart(e) {
+    if (e.touches.length == 1) {
+      this.touchX = e.touches[0].clientX;
+      this.touchY = e.touches[0].clientY;
+    }
+  }
+
+  handleTouchEventEnd(e) {
+    if (this.touchX === null || e.changedTouches.length != 1) {
+      this.touchX = null;
+      return;
+    }
+
+    const dX = this.touchX - e.changedTouches[0].clientX;
+    const dY = this.touchY - e.changedTouches[0].clientY;
+    this.touchX = null;
+
+    if (Math.abs(dX) > Math.abs(dY) || Math.abs(dY) < MIN_SWIPE_DISTANCE) {
+      // Horizontal swipe or too short vertical swipe.
+      return;
+    }
+
+    if (dY > 0) {
+      this.handleMovePrev(e, true);
+    } else {
+      this.handleMoveNext(e, true);
+    }
+  }
+
+  handleTouchCancel(e) {
+    this.touchX = null;
+  }
+
   render() {
     const selected = this.getSelectedIndex();
     let shown = (this.props.messages || [])[selected];
@@ -64,7 +120,7 @@ class PinnedMessages extends React.PureComponent {
     });
 
     return shown ?
-      (<div id="pinned-wrapper">
+      (<div id="pinned-wrapper" ref={this.touchSurface}>
         {this.props.isAdmin ?
           <div className="cancel">
             <a href="#" onClick={this.handleCancel}><i className="material-icons gray">close</i></a>