mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-10-08 10:56:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix workspace swipe gesture does not respect the swipe direction

Browse Source
This commit is contained in:
Sena Cahya
2025-02-05 08:56:10 +09:00
parent 25407369de
commit c401dfabdc
1 changed files with 13 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/browser/base/zen-components/ZenWorkspaces.mjs
View File

@@ -8,7 +8,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
_swipeState = { _swipeState = {
isGestureActive: true, isGestureActive: true,
cumulativeDelta: 0, lastDelta: 0,
direction: null, direction: null,
}; };
_lastScrollTime = 0; _lastScrollTime = 0;
@@ -207,7 +207,10 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
element.addEventListener('MozSwipeGestureMayStart', this._handleSwipeMayStart.bind(this), true); element.addEventListener('MozSwipeGestureMayStart', this._handleSwipeMayStart.bind(this), true);
element.addEventListener('MozSwipeGestureStart', this._handleSwipeStart.bind(this), true); element.addEventListener('MozSwipeGestureStart', this._handleSwipeStart.bind(this), true);
element.addEventListener('MozSwipeGestureUpdate', this._handleSwipeUpdate.bind(this), true); element.addEventListener('MozSwipeGestureUpdate', this._handleSwipeUpdate.bind(this), true);
element.addEventListener('MozSwipeGestureEnd', this._handleSwipeEnd.bind(this), true);
// Use MozSwipeGesture instead of MozSwipeGestureEnd because MozSwipeGestureEnd is fired after animation ends,
// while MozSwipeGesture is fired immediately after swipe ends.
element.addEventListener('MozSwipeGesture', this._handleSwipeEnd.bind(this), true);
} }
_handleSwipeMayStart(event) { _handleSwipeMayStart(event) {
@@ -231,7 +234,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
this._swipeState = { this._swipeState = {
isGestureActive: true, isGestureActive: true,
cumulativeDelta: 0, lastDelta: 0,
direction: null, direction: null,
}; };
} }
@@ -242,23 +245,17 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
// Update cumulative delta const delta = event.delta * 500;
this._swipeState.cumulativeDelta += event.delta; this._swipeState.lastDelta = delta;
// Determine swipe direction based on cumulative delta if (Math.abs(delta) > 1) {
if (Math.abs(this._swipeState.cumulativeDelta) > 1) { this._swipeState.direction = delta > 0 ? 'left' : 'right';
this._swipeState.direction = this._swipeState.cumulativeDelta > 0 ? 'left' : 'right';
} }
// Apply a translateX to the tab strip to give the user feedback on the swipe // Apply a translateX to the tab strip to give the user feedback on the swipe
const stripWidth = document.getElementById('tabbrowser-tabs').scrollWidth; const stripWidth = document.getElementById('tabbrowser-tabs').scrollWidth;
// To make the animation larger, we multiply the delta by 5 const translateX = Math.max(-stripWidth, Math.min(delta, stripWidth));
let translateX = this._swipeState.cumulativeDelta * 10;
if (this._swipeState.direction === 'left') {
translateX = Math.min(translateX, stripWidth);
} else {
translateX = Math.max(translateX, -stripWidth);
}
for (const element of this._animateTabsElements) { for (const element of this._animateTabsElements) {
element.style.transform = `translateX(${translateX}px)`; element.style.transform = `translateX(${translateX}px)`;
} }
@@ -282,7 +279,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
// Reset swipe state // Reset swipe state
this._swipeState = { this._swipeState = {
isGestureActive: false, isGestureActive: false,
cumulativeDelta: 0, lastDelta: 0,
direction: null, direction: null,
}; };
} }