implement touch swiping pinned messages

css/base.css

@@ -824,6 +824,7 @@ table.permission-editor td.checkbox {
 .bot-form button:hover,
 .bot-form button:active {
   outline: 0;
+  color: #1565C0;
   background-color: #e3f2fd;
 }
 
@@ -3084,7 +3085,7 @@ ul.tabbar li.active > a {
   display: flex;
   align-items: center;
   height: 100%;
-  margin-right: 1rem;
+  margin-right: 0.5rem;
 }
 
 .pinned {
@@ -3128,8 +3129,9 @@ ul.tabbar li.active > a {
   background-color: #eeee;
   justify-content: space-evenly;
   height: 100%;
-  padding: 0.1rem;
+  padding: 0.2rem;
   margin-left: 0.35rem;
+  user-select: none;
 }
 
 .pinned-scroll .dot {
@@ -3137,6 +3139,7 @@ ul.tabbar li.active > a {
   height: 0.3rem;
   border-radius: 50%;
   background-color: #999;
+  user-select: none;
 }
 
 .pinned-scroll .adot {
@@ -3144,6 +3147,7 @@ ul.tabbar li.active > a {
   height: 0.45rem;
   border-radius: 50%;
   background-color: #039be5;
+  user-select: none;
 }
 
 #pinned-wrapper:hover .menuTrigger {
@@ -3167,6 +3171,7 @@ ul.tabbar li.active > a {
 
 .pinned-menu .menuTrigger {
   position: relative;
+  user-select: none;
 }
 
 /*

index-dev.html

@@ -35,7 +35,7 @@
     <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/react@18/umd/react.development.js"></script>
     <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.development.js"></script>
     <!-- React-Intl for translations -->
-    <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/react-intl@6/react-intl.iife.js"></script>
+    <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/react-intl@7/react-intl.iife.js"></script>
     <!-- LiveKit for group video calls -->
     <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/livekit-client@1/dist/livekit-client.umd.js"></script>
     <!-- Displaying QR code with ID of the topic -->

index.html

@@ -24,10 +24,10 @@
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
 <link rel="stylesheet" href="css/base.min.css" />
 <script crossorigin="anonymous" src="https://polyfill-fastly.io/v3/polyfill.min.js?features=Intl.Segmenter"></script>
-<script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/react@18.2.0/umd/react.production.min.js"></script>
+<script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/react@18.3.1/umd/react.production.min.js"></script>
-<script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/react-dom@18.2.0/umd/react-dom.production.min.js"></script>
+<script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
 <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/livekit-client@1.10.0/dist/livekit-client.umd.js"></script>
-<script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/react-intl@6.4.4/react-intl.iife.min.js"></script>
+<script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/react-intl@7.1.6/react-intl.iife.min.js"></script>
 <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
 </head>
 <body>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tinode-webapp",
   "description": "Tinode messenger for the web",
-  "version": "0.23.1-rc1",
+  "version": "0.24.0-rc1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tinode/webapp.git"

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) {
+  handleMoveNext(e, isTouch) {
-    e.preventDefault();
+    // 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) {
+  handleMovePrev(e, isTouch) {
-    e.preventDefault();
+    // 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>

umd/index.dev.js

@@ -2230,6 +2230,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   MESSAGES_PAGE: function() { return /* binding */ MESSAGES_PAGE; },
 /* harmony export */   MESSAGE_PREVIEW_LENGTH: function() { return /* binding */ MESSAGE_PREVIEW_LENGTH; },
 /* harmony export */   MIN_DURATION: function() { return /* binding */ MIN_DURATION; },
+/* harmony export */   MIN_SWIPE_DISTANCE: function() { return /* binding */ MIN_SWIPE_DISTANCE; },
 /* harmony export */   MIN_TAG_LENGTH: function() { return /* binding */ MIN_TAG_LENGTH; },
 /* harmony export */   NEW_GRP_ACCESS_MODE: function() { return /* binding */ NEW_GRP_ACCESS_MODE; },
 /* harmony export */   NO_ACCESS_MODE: function() { return /* binding */ NO_ACCESS_MODE; },
@@ -2294,6 +2295,7 @@ const CLICKABLE_URL_SCHEMES = ['http', 'https', 'ftp', 'ftps'];
 const QRCODE_SIZE = 128;
 const WAKE_UP_TIMEOUT = 80000;
 const WAKE_UP_TICK = 1000;
+const MIN_SWIPE_DISTANCE = REM_SIZE * 3;
 
 /***/ }),
 
@@ -3627,7 +3629,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   PACKAGE_VERSION: function() { return /* binding */ PACKAGE_VERSION; }
 /* harmony export */ });
-const PACKAGE_VERSION = "0.23.1-rc1";
+const PACKAGE_VERSION = "0.24.0-rc1";
 
 /***/ }),
 
@@ -15019,6 +15021,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var tinode_sdk__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! tinode-sdk */ "tinode-sdk");
 /* harmony import */ var tinode_sdk__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(tinode_sdk__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _lib_formatters_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../lib/formatters.js */ "./src/lib/formatters.js");
+/* harmony import */ var _config_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../config.js */ "./src/config.js");
+
 
 
 
@@ -15026,11 +15030,33 @@ __webpack_require__.r(__webpack_exports__);
 class PinnedMessages extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComponent) {
   constructor(props) {
     super(props);
+    this.touchSurface = react__WEBPACK_IMPORTED_MODULE_0___default().createRef();
+    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() {
     const list = this.props.messages || [];
@@ -15044,22 +15070,48 @@ class PinnedMessages extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureC
     e.preventDefault();
     this.props.onSelected(this.props.messages[this.getSelectedIndex()].seq);
   }
-  handleMoveNext(e) {
+  handleMoveNext(e, isTouch) {
-    e.preventDefault();
+    isTouch || e.preventDefault();
     e.stopPropagation();
     const idx = Math.max(this.props.selected - 1, 0);
     if (idx != this.props.selected) {
       this.props.setSelected(idx);
     }
   }
-  handleMovePrev(e) {
+  handleMovePrev(e, isTouch) {
-    e.preventDefault();
+    isTouch || e.preventDefault();
     e.stopPropagation();
     const idx = Math.min(this.props.selected + 1, (this.props.messages || []).length - 1);
     if (idx != this.props.selected) {
       this.props.setSelected(idx);
     }
   }
+  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) < _config_js__WEBPACK_IMPORTED_MODULE_4__.MIN_SWIPE_DISTANCE) {
+      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];
@@ -15076,7 +15128,8 @@ class PinnedMessages extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureC
       }));
     });
     return shown ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-      id: "pinned-wrapper"
+      id: "pinned-wrapper",
+      ref: this.touchSurface
     }, this.props.isAdmin ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       className: "cancel"
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {

version.js

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