Merge pull request #194 from sents/dragmenu

Make navigating overflowing menu more accessible
lovasoa · May 23, 2021 · 8e90aa3 · 8e90aa3
2 parents 729dbdb + e6e47eb
commit 8e90aa3
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 4 deletions.
diff --git a/client-data/board.css b/client-data/board.css
@@ -54,7 +54,6 @@ html, body, svg {
 	transition-duration: 1s;
 	cursor: default;
 	padding: 10px;
-	pointer-events: none;
 }
 
 #menu.closed {
@@ -84,7 +83,7 @@ html, body, svg {
 }
 
 #settings {
-	margin-bottom: 0;
+	margin-bottom: 20px;
 }
 
 #menu .tool {
@@ -285,4 +284,4 @@ circle.opcursor {
 	label.tool-name[for=chooseColor] {
 		line-height: 10px;
 	}
-}
+}
diff --git a/client-data/board.html b/client-data/board.html
@@ -35,7 +35,7 @@
 
 	<div id="loadingMessage">{{translations.loading}}</div>
 
-	<div id="menu" {{#hideMenu}}style="display:none;"{{/hideMenu}}>
+	<div id="menu" tabindex="0" {{#hideMenu}}style="display:none;"{{/hideMenu}}>
 		<div id="menuItems">
 			<ul id="tools" class="tools">
 				<li class="tool" tabindex="-1">

diff --git a/client-data/js/board.js b/client-data/js/board.js
@@ -682,3 +682,26 @@ Tools.svg.height.baseVal.value = document.body.clientHeight;
 	  "stylesheet" : "style.css",
 }
 */
+
+
+(function () {
+    let pos = {top: 0, scroll:0};
+    let menu = document.getElementById("menu");
+    function menu_mousedown(evt) {
+	pos = {
+	    top: menu.scrollTop,
+	    scroll: evt.clientY
+	}
+	menu.addEventListener("mousemove", menu_mousemove);
+	document.addEventListener("mouseup", menu_mouseup);
+    }
+    function menu_mousemove(evt) {
+	const dy = evt.clientY - pos.scroll;
+	menu.scrollTop = pos.top - dy;
+    }
+    function menu_mouseup(evt) {
+	menu.removeEventListener("mousemove", menu_mousemove);
+	document.removeEventListener("mouseup", menu_mouseup);
+    }
+    menu.addEventListener("mousedown", menu_mousedown);
+})()