Mirrors/whitebophir
2
0
Fork 0
mirror of https://github.com/lovasoa/whitebophir synced 2024-11-10 06:24:17 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #194 from sents/dragmenu

Browse source 
Make navigating overflowing menu more accessible
This commit is contained in:
Ophir LOJKINE 2021-05-24 00:14:30 +02:00 committed by GitHub
commit 8e90aa3ef7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 26 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
client-data/board.css
View file

@ -54,7 +54,6 @@ html, body, svg {
transition-duration: 1s; transition-duration: 1s;
cursor: default; cursor: default;
padding: 10px; padding: 10px;
pointer-events: none;
} }
#menu.closed { #menu.closed {
@ -84,7 +83,7 @@ html, body, svg {
} }
#settings { #settings {
margin-bottom: 0; margin-bottom: 20px;
} }
#menu .tool { #menu .tool {

2
client-data/board.html
View file

@ -35,7 +35,7 @@
<div id="loadingMessage">{{translations.loading}}</div> <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"> <div id="menuItems">
<ul id="tools" class="tools"> <ul id="tools" class="tools">
<li class="tool" tabindex="-1"> <li class="tool" tabindex="-1">

23
client-data/js/board.js
View file

@ -682,3 +682,26 @@ Tools.svg.height.baseVal.value = document.body.clientHeight;
"stylesheet" : "style.css", "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);
})()