From 8100f98d6bb62bb11692ab55ec4caa10394e4bcf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= <jeremie@astori.fr>
Date: Sun, 18 Mar 2018 01:18:43 -0400
Subject: [PATCH] =?UTF-8?q?Handle=20scrolls=200-45=C2=B0=20as=20horizontal?=
 =?UTF-8?q?=20(opening=20the=20menu);=2045-90=C2=B0=20as=20vertical=20(cha?=
 =?UTF-8?q?t=20scroll)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/js/slideout.js | 28 ++++++++++++++++------------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/client/js/slideout.js b/client/js/slideout.js
index ab4bf54d..89fc41f8 100644
--- a/client/js/slideout.js
+++ b/client/js/slideout.js
@@ -48,34 +48,38 @@ function onTouchStart(e) {
 
 function onTouchMove(e) {
 	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) {
-		const devicePixelRatio = window.devicePixelRatio || 2;
-
-		if (Math.abs(touch.screenY - touchStartPos.screenY) > devicePixelRatio) {
+		// 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
+		// chat windows must be scrolled.
+		if (Math.abs(distY / distX) >= 1) {
 			onTouchEnd();
 			return;
 		}
 
-		if (Math.abs(setX) > devicePixelRatio) {
+		const devicePixelRatio = window.devicePixelRatio || 2;
+
+		if (Math.abs(distX) > devicePixelRatio) {
 			viewport.classList.toggle("menu-dragging", true);
 			menuIsMoving = true;
 		}
 	}
 
 	if (menuIsOpen) {
-		setX += menuWidth;
+		distX += menuWidth;
 	}
 
-	if (setX > menuWidth) {
-		setX = menuWidth;
-	} else if (setX < 0) {
-		setX = 0;
+	if (distX > menuWidth) {
+		distX = menuWidth;
+	} else if (distX < 0) {
+		distX = 0;
 	}
 
-	menu.style.transform = "translate3d(" + setX + "px, 0, 0)";
-	sidebarOverlay.style.opacity = setX / menuWidth;
+	menu.style.transform = "translate3d(" + distX + "px, 0, 0)";
+	sidebarOverlay.style.opacity = distX / menuWidth;
 }
 
 function onTouchEnd() {