mirror of
https://github.com/pewdiepie-archdaemon/odysseus.git
synced 2026-06-15 17:25:26 -04:00
Email accounts strip: wheel + grab-drag horizontal scroll
The single-row chip strip relied on native horizontal scroll, which is hard to reach without a horizontal wheel. Wire two scroll mechanisms on the strip once it's rendered: - Vertical wheel → horizontal scroll (intercept only when overflow exists and the wheel motion is primarily vertical, so normal page scroll still works elsewhere). - Mouse grab-and-drag: cursor goes grab/grabbing, mousedown→move bumps scrollLeft by the cursor delta. A 5px drag threshold cancels the chip click so the user can drag-scroll without accidentally switching accounts.
This commit is contained in:
@@ -1344,6 +1344,53 @@ function _renderAccountsStrip() {
|
||||
_loadEmails({ force: true, useCache: false });
|
||||
});
|
||||
});
|
||||
// Idempotent — wire wheel + grab-drag scroll once per strip element.
|
||||
if (!strip._scrollWired) {
|
||||
strip._scrollWired = true;
|
||||
// Vertical wheel → horizontal scroll. Only intercept when there's
|
||||
// actually horizontal overflow to scroll through, otherwise let the
|
||||
// page do its normal vertical scroll.
|
||||
strip.addEventListener('wheel', (e) => {
|
||||
if (strip.scrollWidth <= strip.clientWidth) return;
|
||||
if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return;
|
||||
e.preventDefault();
|
||||
strip.scrollLeft += e.deltaY;
|
||||
}, { passive: false });
|
||||
// Click-and-drag scroll. Track mousedown, then mousemove deltas
|
||||
// bump scrollLeft. Cancel a chip click if the user actually dragged
|
||||
// more than a few pixels.
|
||||
let dragging = false;
|
||||
let startX = 0;
|
||||
let startScroll = 0;
|
||||
let moved = 0;
|
||||
strip.style.cursor = 'grab';
|
||||
strip.addEventListener('mousedown', (e) => {
|
||||
if (e.button !== 0) return;
|
||||
dragging = true;
|
||||
moved = 0;
|
||||
startX = e.pageX;
|
||||
startScroll = strip.scrollLeft;
|
||||
strip.style.cursor = 'grabbing';
|
||||
strip.style.userSelect = 'none';
|
||||
});
|
||||
window.addEventListener('mousemove', (e) => {
|
||||
if (!dragging) return;
|
||||
const dx = e.pageX - startX;
|
||||
moved = Math.max(moved, Math.abs(dx));
|
||||
strip.scrollLeft = startScroll - dx;
|
||||
});
|
||||
window.addEventListener('mouseup', () => {
|
||||
if (!dragging) return;
|
||||
dragging = false;
|
||||
strip.style.cursor = 'grab';
|
||||
strip.style.userSelect = '';
|
||||
});
|
||||
// Swallow chip clicks fired after a real drag — the user meant to scroll,
|
||||
// not select.
|
||||
strip.addEventListener('click', (e) => {
|
||||
if (moved > 5) { e.stopPropagation(); e.preventDefault(); moved = 0; }
|
||||
}, true);
|
||||
}
|
||||
_publishActiveAccount();
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user