Merge pull request #2246 from thelounge/astorije/sidebar-overlay

Add a semi-opaque overlay when channel list is open on mobile

client/css/style.css

@@ -518,7 +518,7 @@ kbd {
 	width: 220px;
 }
 
-#sidebar.menu-open {
+#viewport.menu-open #sidebar {
 	display: none;
 	will-change: transform;
 }
@@ -2273,22 +2273,46 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 		height: 100%;
 		position: absolute;
 		left: -220px;
-		z-index: 1;
+		z-index: 2;
 		transition: transform 160ms;
 		transform: translateZ(0);
 	}
 
-	#sidebar.menu-open {
+	#sidebar-overlay {
+		position: fixed;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		background: rgba(0, 0, 0, 0.5);
+		opacity: 0;
+		visibility: hidden;
+		transition: opacity 160ms, visibility 160ms;
+		z-index: 1;
+	}
+
+	#viewport.menu-open #sidebar-overlay {
+		opacity: 1;
+	}
+
+	#viewport.menu-open #sidebar {
 		display: flex;
 		transform: translate3d(220px, 0, 0);
 	}
 
-	#sidebar.menu-dragging {
+	#viewport.menu-dragging #sidebar-overlay,
-		transition: none !important;
+	#viewport.menu-dragging #sidebar {
+		transition: none;
 	}
 
-	#sidebar.menu-open .messages {
+	#viewport.menu-open #sidebar,
-		pointer-events: none;
+	#viewport.menu-dragging #sidebar {
+		box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.5);
+	}
+
+	#viewport.menu-open #sidebar-overlay,
+	#viewport.menu-dragging #sidebar-overlay {
+		visibility: visible;
 	}
 
 	#sidebar .empty::before {

client/index.html.tpl

@@ -44,6 +44,7 @@
 					<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Sign out"><button class="icon sign-out" id="sign-out" aria-label="Sign out"></button></span>
 				</footer>
 			</aside>
+			<div id="sidebar-overlay"></div>
 			<article id="windows">
 				<div id="loading" class="window active">
 					<div id="loading-status-container">

client/js/lounge.js

@@ -40,13 +40,17 @@ $(function() {
 		storage.set(name, state);
 	}
 
-	$("#windows").on("click", function(e) {
+	// If sidebar overlay is visible and it is clicked, close the sidebar
-		const isOpen = slideoutMenu.isOpen();
+	$("#sidebar-overlay").on("click", () => {
+		slideoutMenu.toggle(false);
+		storeSidebarVisibility("thelounge.state.sidebar", false);
+	});
 
-		if ((isOpen && $(window).outerWidth() < utils.mobileViewportPixels) || $(e.target).is(".lt")) {
+	$("#windows").on("click", "button.lt", () => {
-			slideoutMenu.toggle(!isOpen);
+		const isOpen = !slideoutMenu.isOpen();
-			storeSidebarVisibility("thelounge.state.sidebar", !isOpen);
+
-		}
+		slideoutMenu.toggle(isOpen);
+		storeSidebarVisibility("thelounge.state.sidebar", isOpen);
 	});
 
 	viewport.on("click", ".rt", function() {

client/js/slideout.js

@@ -1,6 +1,8 @@
 "use strict";
 
+const viewport = document.getElementById("viewport");
 const menu = document.getElementById("sidebar");
+const sidebarOverlay = document.getElementById("sidebar-overlay");
 
 let touchStartPos = null;
 let touchCurPos = null;
@@ -16,7 +18,7 @@ class SlideoutMenu {
 
 	static toggle(state) {
 		menuIsOpen = state;
-		menu.classList.toggle("menu-open", state);
+		viewport.classList.toggle("menu-open", state);
 	}
 
 	static isOpen() {
@@ -34,46 +36,50 @@ function onTouchStart(e) {
 
 	menuWidth = parseFloat(window.getComputedStyle(menu).width);
 
-	if ((!menuIsOpen && touch.screenX < 50) || (menuIsOpen && touch.screenX > menuWidth)) {
+	if (!menuIsOpen || touch.screenX > menuWidth) {
 		touchStartPos = touch;
 		touchCurPos = touch;
 		touchStartTime = Date.now();
 
-		menu.classList.toggle("menu-dragging", true);
+		document.body.addEventListener("touchmove", onTouchMove, {passive: true});
-		document.body.addEventListener("touchmove", onTouchMove);
 		document.body.addEventListener("touchend", onTouchEnd, {passive: true});
 	}
 }
 
 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 (Math.abs(setX > 30)) {
+	if (!menuIsMoving) {
-		menuIsMoving = true;
+		// 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 (!menuIsMoving && Math.abs(touch.screenY - touchStartPos.screenY) > 30) {
+		if (Math.abs(distY / distX) >= 1) {
 			onTouchEnd();
 			return;
 		}
 
+		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) {
+	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 = distX / menuWidth;
-	if (menuIsMoving) {
-		e.preventDefault();
-		e.stopPropagation();
-	}
 }
 
 function onTouchEnd() {
@@ -86,8 +92,9 @@ function onTouchEnd() {
 
 	document.body.removeEventListener("touchmove", onTouchMove);
 	document.body.removeEventListener("touchend", onTouchEnd);
-	menu.classList.toggle("menu-dragging", false);
+	viewport.classList.toggle("menu-dragging", false);
 	menu.style.transform = null;
+	sidebarOverlay.style.opacity = null;
 
 	touchStartPos = null;
 	touchCurPos = null;