pro/im_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implement touch swiping pinned messages

Browse Source
This commit is contained in:
or-else
2025-02-14 17:38:49 +03:00
parent 17b91c4bb8
commit f91d8a979d
13 changed files with 140 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/base.css
+7 -2
View File
@@ -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;
}
/*
css/base.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
index-dev.html
+1 -1
View File
@@ -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
+3 -3
View File
@@ -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-dom@18.2.0/umd/react-dom.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.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 -1
View File
@@ -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
+2
View File
@@ -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 -1
View File
@@ -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
+61 -5
View File
@@ -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>
umd/index.dev.js
+59 -6
View File
@@ -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) {
e.preventDefault();
handleMoveNext(e, isTouch) {
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) {
e.preventDefault();
handleMovePrev(e, isTouch) {
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", {
umd/index.dev.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/index.prod.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/index.prod.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
version.js
+1 -1
View File
@@ -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";