WebUI: Improve table scrolling and selection on mobile

This PR improves touch interaction with table rows that have a context menu. Previously, those rows couldn't be selected or scrolled on mobile. Additionally, this PR modifies the context menu to appear when the user removes their finger/touch, rather than the current behavior of appearing mid-touch. This allows us to only display the context menu if the user's finger remains on the same element, which should significantly reduce erroneous context menu triggering.

Closes #19819.
Closes #19820,
Closes #19823.
PR #20639.
This commit is contained in:
Thomas Piccirello 2024-04-08 23:33:10 -07:00 committed by GitHub
parent 01cc4ea90b
commit e697d40382
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 27 additions and 22 deletions

View file

@ -169,24 +169,30 @@ window.qBittorrent.ContextMenu = (function() {
}.bind(this));
elem.addEvent('touchstart', function(e) {
e.preventDefault();
clearTimeout(this.touchstartTimer);
this.hide();
const touchstartEvent = e;
this.touchstartTimer = setTimeout(function() {
this.touchstartTimer = -1;
this.triggerMenu(touchstartEvent, elem);
}.bind(this), this.options.touchTimer);
this.touchStartAt = performance.now();
this.touchStartEvent = e;
}.bind(this));
elem.addEvent('touchend', function(e) {
e.preventDefault();
clearTimeout(this.touchstartTimer);
this.touchstartTimer = -1;
const now = performance.now();
const touchStartAt = this.touchStartAt;
const touchStartEvent = this.touchStartEvent;
this.touchStartAt = null;
this.touchStartEvent = null;
const isTargetUnchanged = (Math.abs(e.event.pageX - touchStartEvent.event.pageX) <= 10) && (Math.abs(e.event.pageY - touchStartEvent.event.pageY) <= 10);
if (((now - touchStartAt) >= this.options.touchTimer) && isTargetUnchanged) {
this.triggerMenu(touchStartEvent, elem);
}
}.bind(this));
},
addTarget: function(t) {
// prevent long press from selecting this text
t.style.setProperty('user-select', 'none');
t.style.setProperty('-webkit-user-select', 'none');
this.targets[this.targets.length] = t;
this.setupEventListeners(t);
},
@ -238,18 +244,16 @@ window.qBittorrent.ContextMenu = (function() {
lastShownContextMenu.hide();
this.fx.start(1);
this.fireEvent('show');
this.shown = true;
lastShownContextMenu = this;
return this;
},
//hide the menu
hide: function(trigger) {
if (this.shown) {
if (lastShownContextMenu && (lastShownContextMenu.menu.style.visibility !== 'hidden')) {
this.fx.start(0);
//this.menu.fade('out');
this.fireEvent('hide');
this.shown = false;
}
return this;
},