From e6e47ebef9e278c324c048ef7b7353780ef23673 Mon Sep 17 00:00:00 2001
From: Finn Krein <finn@krein.moe>
Date: Sun, 23 May 2021 22:34:49 +0200
Subject: [PATCH] Make menu draggable

---
 client-data/board.css   |  5 ++---
 client-data/board.html  |  2 +-
 client-data/js/board.js | 23 +++++++++++++++++++++++
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/client-data/board.css b/client-data/board.css
index cdab39cb..5498c148 100644
--- 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;
 	}
-}
\ No newline at end of file
+}
diff --git a/client-data/board.html b/client-data/board.html
index b5f65940..be9e3ea6 100644
--- 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
index 2403a01b..ebb0d03d 100644
--- 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);
+})()