forks/miniflux
1
0
Fork 0
Code Releases Activity

Make swipe gestures feel more natural.

Browse source 
Removes opacity transition when swiping an article read/unread.

Adds "resistance" to the swiped entry when the 75px threshold is
reached.

Fixes an issue in which a swiped article couldn't be moved <15px.
This commit is contained in:
dzaikos 2022-04-03 07:02:30 +00:00 • committed by Frédéric Guillot
parent 0f2b29741e
commit ec2b911881
2 changed files with 19 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
ui/static/css/common.css
View file

@ -756,6 +756,12 @@ template {
display: none; display: none;
} }
.touch-item {
transition-property: transform;
transition-duration: 0s;
transition-timing-function: ease-out;
}
/* Feeds list */ /* Feeds list */
article.feed-parsing-error { article.feed-parsing-error {
background-color: var(--feed-parsing-error-background-color); background-color: var(--feed-parsing-error-background-color);

19
ui/static/js/touch_handler.js
View file

@ -7,6 +7,7 @@ class TouchHandler {
this.touch = { this.touch = {
start: { x: -1, y: -1 }, start: { x: -1, y: -1 },
move: { x: -1, y: -1 }, move: { x: -1, y: -1 },
moved: false,
element: null element: null
}; };
} }
@ -16,7 +17,7 @@ class TouchHandler {
let horizontalDistance = Math.abs(this.touch.move.x - this.touch.start.x); let horizontalDistance = Math.abs(this.touch.move.x - this.touch.start.x);
let verticalDistance = Math.abs(this.touch.move.y - this.touch.start.y); let verticalDistance = Math.abs(this.touch.move.y - this.touch.start.y);
if (horizontalDistance > 30 && verticalDistance < 70) { if (horizontalDistance > 30 && verticalDistance < 70 || this.touch.moved) {
return this.touch.move.x - this.touch.start.x; return this.touch.move.x - this.touch.start.x;
} }
} }
@ -41,6 +42,7 @@ class TouchHandler {
this.touch.start.x = event.touches[0].clientX; this.touch.start.x = event.touches[0].clientX;
this.touch.start.y = event.touches[0].clientY; this.touch.start.y = event.touches[0].clientY;
this.touch.element = this.findElement(event.touches[0].target); this.touch.element = this.findElement(event.touches[0].target);
this.touch.element.style.transitionDuration = "0s";
} }
onTouchMove(event) { onTouchMove(event) {
@ -55,10 +57,14 @@ class TouchHandler {
let absDistance = Math.abs(distance); let absDistance = Math.abs(distance);
if (absDistance > 0) { if (absDistance > 0) {
let opacity = 1 - (absDistance > 75 ? 0.9 : absDistance / 75 * 0.9); this.touch.moved = true;
let tx = distance > 75 ? 75 : (distance < -75 ? -75 : distance);
let tx = absDistance > 75 ? Math.pow(absDistance - 75, 0.5) + 75 : absDistance;
if (distance < 0) {
tx = -tx;
}
this.touch.element.style.opacity = opacity;
this.touch.element.style.transform = "translateX(" + tx + "px)"; this.touch.element.style.transform = "translateX(" + tx + "px)";
event.preventDefault(); event.preventDefault();
@ -77,9 +83,8 @@ class TouchHandler {
toggleEntryStatus(this.touch.element); toggleEntryStatus(this.touch.element);
} }
// If not on the unread page, undo transform of the dragged element. if (this.touch.moved) {
if (document.URL.split("/").indexOf("unread") == -1 || distance <= 75) { this.touch.element.style.transitionDuration = "0.15s";
this.touch.element.style.opacity = 1;
this.touch.element.style.transform = "none"; this.touch.element.style.transform = "none";
} }
} }