supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Handle scrolls 0-45° as horizontal (opening the menu); 45-90° as vertical (chat scroll)

Browse Source
This commit is contained in:
Jérémie Astori 2018-03-18 01:18:43 -04:00
parent 6828cd1075
commit 8100f98d6b
No known key found for this signature in database
GPG Key ID: B9A4F245CD67BDE8
1 changed files with 16 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
client/js/slideout.js
View File

@ -48,34 +48,38 @@ function onTouchStart(e) {
function onTouchMove(e) { function onTouchMove(e) {
const touch = touchCurPos = e.touches.item(0); const touch = touchCurPos = e.touches.item(0);
let setX = touch.screenX - touchStartPos.screenX; let distX = touch.screenX - touchStartPos.screenX;
const distY = touch.screenY - touchStartPos.screenY;
if (!menuIsMoving) { if (!menuIsMoving) {
const devicePixelRatio = window.devicePixelRatio || 2; // tan(45°) is 1. Gestures in 0°-45° (< 1) are considered horizontal, so
// menu must be open; gestures in 45°-90° (>1) are considered vertical, so
if (Math.abs(touch.screenY - touchStartPos.screenY) > devicePixelRatio) { // chat windows must be scrolled.
if (Math.abs(distY / distX) >= 1) {
onTouchEnd(); onTouchEnd();
return; return;
} }
if (Math.abs(setX) > devicePixelRatio) { const devicePixelRatio = window.devicePixelRatio || 2;
if (Math.abs(distX) > devicePixelRatio) {
viewport.classList.toggle("menu-dragging", true); viewport.classList.toggle("menu-dragging", true);
menuIsMoving = true; menuIsMoving = true;
} }
} }
if (menuIsOpen) { if (menuIsOpen) {
setX += menuWidth; distX += menuWidth;
} }
if (setX > menuWidth) { if (distX > menuWidth) {
setX = menuWidth; distX = menuWidth;
} else if (setX < 0) { } else if (distX < 0) {
setX = 0; distX = 0;
} }
menu.style.transform = "translate3d(" + setX + "px, 0, 0)"; menu.style.transform = "translate3d(" + distX + "px, 0, 0)";
sidebarOverlay.style.opacity = setX / menuWidth; sidebarOverlay.style.opacity = distX / menuWidth;
} }
function onTouchEnd() { function onTouchEnd() {