GithubFollow/One-KVM
1
0
Fork 0
mirror of https://github.com/mofeng-git/One-KVM.git synced 2025-12-12 01:00:29 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

hold modifiers on mouse click

Browse Source
This commit is contained in:
Devaev Maxim 2018-07-26 02:26:31 +03:00
parent 940fe28a9f
commit bb180b6bf8
4 changed files with 86 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
kvmd/web/css/keyboard.css
View File

@ -22,7 +22,7 @@ div#keyboard div.keyboard-row:last-child {
margin-bottom: 0;
}
div#keyboard div.key, div.empty-key {
div#keyboard div.key, div.modifier, div.empty-key {
box-sizing: border-box;
display: inline-block;
margin-right: 5px;
@ -30,7 +30,7 @@ div#keyboard div.key, div.empty-key {
width: 40px;
height: 40px;
}
div#keyboard div.key {
div#keyboard div.key, div.modifier {
font-size: 0.9em;
text-align: center;
vertical-align: top;
@ -43,16 +43,21 @@ div#keyboard div.key {
background-color: var(--bg-color-gray);
cursor: pointer;
}
div#keyboard div.key:hover {
div#keyboard div.key:hover, div.modifier:hover {
color: var(--fg-color-intensive);
background-color: var(--bg-color-ctl);
}
div#keyboard div.key:active {
div#keyboard div.pressed, div.pressed {
box-shadow: none;
color: var(--fg-color-selected);
background-color: var(--bg-color-dark);
}
div#keyboard div.key:last-child, div.empty-key:last-child {
div#keyboard div.holded {
box-shadow: none;
color: var(--fg-color-normal);
background-color: var(--bg-color-intensive);
}
div#keyboard div.key:last-child, div.empty-key:last-child, div.modifier:last-child {
margin-right: 0;
}
div#keyboard div.wide-1 {
@ -82,7 +87,7 @@ div#keyboard div.small {
font-size: 0.7em;
}
div#keyboard div.key p {
div#keyboard p {
margin: 0;
position: relative;
top: 50%;
@ -90,3 +95,6 @@ div#keyboard div.key p {
-moz-transform: translateY(-50%);
transform: translateY(-50%);
}
div#keyboard b {
color: var(--fg-color-special);
}

2
kvmd/web/css/vars.css
View File

@ -12,6 +12,7 @@
--bg-color-gray: #3b3e43;
--bg-color-dark: #17191d;
--bg-color-ctl: #202225;
--bg-color-intensive: #436a8a;
--bg-color-hovered: #1a1c1f;
--bg-color-selected: #171717;
--bg-color-progress: #171717;
@ -22,6 +23,7 @@
--fg-color-inactive: #6c7481;
--fg-color-selected: #6c7481;
--fg-color-progress: #436a8a;
--fg-color-special: #436a8a;
--bg-color-stream-screen: black;
}

16
kvmd/web/index.html
View File

@ -245,7 +245,7 @@
<div id="Enter" class="key wide-3 right small"><p>Enter<br>&crarr;</p></div>
</div>
<div class="keyboard-row">
<div id="ShiftLeft" class="key wide-4 left small"><p>Shift</p></div>
<div id="ShiftLeft" class="modifier wide-4 left small"><p><b>&bull;</b><br>Shift</p></div>
<div id="KeyZ" class="key single"><p>Z</p></div>
<div id="KeyX" class="key single"><p>X</p></div>
<div id="KeyC" class="key single"><p>C</p></div>
@ -256,16 +256,16 @@
<div id="Comma" class="key"><p>&lt;<br>,</p></div>
<div id="Period" class="key"><p>&gt;<br>.</p></div>
<div id="Slash" class="key"><p>?<br>/</p></div>
<div id="ShiftRight" class="key wide-4 right small"><p>Shift</p></div>
<div id="ShiftRight" class="modifier wide-4 right small"><p><b>&bull;</b><br>Shift</p></div>
</div>
<div class="keyboard-row">
<div id="ControlLeft" class="key wide-1 left small"><p>Ctrl</p></div>
<div id="MetaLeft" class="key wide-1 left small"><p>Win</p></div>
<div id="AltLeft" class="key wide-1 left small"><p>Alt</p></div>
<div id="ControlLeft" class="modifier wide-1 left small"><p><b>&bull;</b><br>Ctrl</p></div>
<div id="MetaLeft" class="modifier wide-1 left small"><p><b>&bull;</b><br>Win</p></div>
<div id="AltLeft" class="modifier wide-1 left small"><p><b>&bull;</b><br>Alt</p></div>
<div id="Space" class="key wide-5"></div>
<div id="AltRight" class="key wide-1 right small"><p>Alt</p></div>
<div id="MetaRight" class="key wide-1 right small"><p>Win</p></div>
<div id="ControlRight" class="key wide-1 right small"><p>Ctrl</p></div>
<div id="AltRight" class="modifier wide-1 right small"><p><b>&bull;</b><br>Alt</p></div>
<div id="MetaRight" class="modifier wide-1 right small"><p><b>&bull;</b><br>Win</p></div>
<div id="ControlRight" class="modifier wide-1 right small"><p><b>&bull;</b><br>Ctrl</p></div>
</div>
</div>
<div class="keyboard-block">

81
kvmd/web/js/keyboard.js
View File

@ -1,9 +1,19 @@
var keyboard = new function() {
var __ws = null;
var __modifiers = [];
this.init = function() {
document.onkeydown = (event) => __keyHandler(event, true);
document.onkeyup = (event) => __keyHandler(event, false);
document.onkeydown = (event) => __keyboardHandler(event, true);
document.onkeyup = (event) => __keyboardHandler(event, false);
Array.prototype.forEach.call(document.getElementsByClassName("key"), function(el_key) {
el_key.onmousedown = () => __clickHandler(el_key, true);
el_key.onmouseup = () => __clickHandler(el_key, false);
});
Array.prototype.forEach.call(document.getElementsByClassName("modifier"), function(el_key) {
el_key.onmousedown = () => __toggleModifierHandler(el_key);
__modifiers.push(el_key);
});
};
this.setSocket = function(ws) {
@ -11,29 +21,62 @@ var keyboard = new function() {
$("hid-keyboard-led").className = (ws ? "led-on" : "led-off");
};
var __keyHandler = function(event, state) {
// https://github.com/wesbos/keycodes/blob/gh-pages/scripts.js
var __keyboardHandler = function(event, state) {
event.preventDefault();
el_key = $(event.code);
if (el_key) {
event.preventDefault();
__commonHandler(el_key, state, "pressed");
__unholdModifiers();
}
};
tools.debug("Key", (state ? "pressed:" : "released:"), event);
var __clickHandler = function(el_key, state) {
__commonHandler(el_key, state, "pressed");
__unholdModifiers();
};
if (state) {
el_key.style.boxShadow = "none";
el_key.style.color = "var(--fg-color-selected)";
el_key.style.backgroundColor = "var(--bg-color-dark)";
} else {
el_key.removeAttribute("style");
var __toggleModifierHandler = function(el_key) {
__commonHandler(el_key, !__isActive(el_key), "holded");
};
var __unholdModifiers = function() {
__modifiers.forEach(function(el_key) {
if (__isHolded(el_key)) {
el_key.classList.remove("pressed");
el_key.classList.remove("holded");
__sendKey(el_key.id, false);
}
});
};
if (__ws) {
__ws.send(JSON.stringify({
event_type: "key",
key: event.code,
state: state,
}));
}
var __commonHandler = function(el_key, state, cls) {
if (state && !__isActive(el_key)) {
el_key.classList.remove("holded");
el_key.classList.add(cls);
__sendKey(el_key.id, true);
} else {
el_key.classList.remove("pressed");
el_key.classList.remove("holded");
__sendKey(el_key.id, false);
}
};
var __isHolded = function(el_key) {
return el_key.classList.contains("holded");
};
var __isActive = function(el_key) {
return (el_key.classList.contains("pressed") || __isHolded(el_key));
};
var __sendKey = function(code, state) {
tools.debug("Key", (state ? "pressed:" : "released:"), code);
if (__ws) {
__ws.send(JSON.stringify({
event_type: "key",
key: code,
state: state,
}));
}
};
};