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

pikvm/pikvm#1418: web: hold/lock key on keypad

Browse Source
This commit is contained in:
Maxim Devaev 2025-05-18 22:07:47 +03:00
parent 70ca478a78
commit c3eed7c497
10 changed files with 207 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
web/kvm/index.html
View File

@ -1003,32 +1003,21 @@
<div class="keypad" id="stream-mouse-buttons" align="center"> <div class="keypad" id="stream-mouse-buttons" align="center">
<div class="keypad-block"> <div class="keypad-block">
<div class="keypad-row"> <div class="keypad-row">
<div class="key wide-3 left rounded-left" data-code="left"> <div class="key wide-3 left rounded-left" data-code="left" data-allow-autohold>
<div class="label">Left</div> <div class="label"><b>&bull;</b><br>Left</div>
</div> </div>
<div class="modifier left small rounded-right" data-code="left"> <div class="key wide-1 rounded-none" data-code="middle" data-allow-autohold>
<div class="label"><b>&bull;</b><br>Hold</div> <div class="label"><b>&bull;</b><br>Mid</div>
</div> </div>
<div class="empty" style="width: 15px"></div> <div class="key wide-3 right rounded-right" data-code="right" data-allow-autohold>
<div class="key wide-1 left rounded-left" data-code="middle"> <div class="label"><b>&bull;</b><br>Right</div>
<div class="label">Mid</div>
</div>
<div class="modifier left small rounded-right" data-code="middle">
<div class="label"><b>&bull;</b><br>Hold</div>
</div>
<div class="empty" style="width: 15px"></div>
<div class="modifier right small rounded-left" data-code="right">
<div class="label"><b>&bull;</b><br>Hold</div>
</div>
<div class="key wide-3 right rounded-right" data-code="right">
<div class="label">Right</div>
</div> </div>
<div class="empty" style="width: 30px"></div> <div class="empty" style="width: 30px"></div>
<div class="key small rounded-left" data-code="up"> <div class="key small rounded-left" data-code="up" data-allow-autohold>
<div class="label">Up</div> <div class="label"><b>&bull;</b><br>Up</div>
</div> </div>
<div class="key small rounded-right" data-code="down"> <div class="key small rounded-right" data-code="down" data-allow-autohold>
<div class="label">Down</div> <div class="label"><b>&bull;</b><br>Down</div>
</div> </div>
</div> </div>
</div> </div>
@ -1332,7 +1321,7 @@
</div> </div>
</div> </div>
<div class="keypad-row"> <div class="keypad-row">
<div class="modifier wide-3 left small" data-code="ShiftLeft"> <div class="key wide-3 left small" data-code="ShiftLeft" data-allow-autohold>
<div class="label"><b>&bull;</b><br>Shift <div class="label"><b>&bull;</b><br>Shift
</div> </div>
</div> </div>
@ -1387,23 +1376,23 @@
</div> </div>
</div> </div>
<div class="spacer"></div> <div class="spacer"></div>
<div class="modifier wide-3 right small" data-code="ShiftRight"> <div class="key wide-3 right small" data-code="ShiftRight" data-allow-autohold>
<div class="label"><b>&bull;</b><br>Shift <div class="label"><b>&bull;</b><br>Shift
</div> </div>
</div> </div>
</div> </div>
<div class="keypad-row"> <div class="keypad-row">
<div class="modifier wide-1 left small" data-code="ControlLeft"> <div class="key wide-1 left small" data-code="ControlLeft" data-allow-autohold>
<div class="label"><b>&bull;</b><br>Ctrl <div class="label"><b>&bull;</b><br>Ctrl
</div> </div>
</div> </div>
<div class="spacer-fixed"></div> <div class="spacer-fixed"></div>
<div class="modifier wide-1 left small" data-code="MetaLeft"> <div class="key wide-1 left small" data-code="MetaLeft" data-allow-autohold>
<div class="label"><b>&bull;</b><br>Win <div class="label"><b>&bull;</b><br>Win
</div> </div>
</div> </div>
<div class="spacer-fixed"></div> <div class="spacer-fixed"></div>
<div class="modifier wide-1 left small" data-code="AltLeft"> <div class="key wide-1 left small" data-code="AltLeft" data-allow-autohold>
<div class="label"><b>&bull;</b><br>Alt <div class="label"><b>&bull;</b><br>Alt
</div> </div>
</div> </div>
@ -1413,12 +1402,12 @@
</div> </div>
</div> </div>
<div class="spacer-fixed"></div> <div class="spacer-fixed"></div>
<div class="modifier wide-1 right small" data-code="AltRight"> <div class="key wide-1 right small" data-code="AltRight" data-allow-autohold>
<div class="label"><b>&bull;</b><br>Alt <div class="label"><b>&bull;</b><br>Alt
</div> </div>
</div> </div>
<div class="spacer-fixed"></div> <div class="spacer-fixed"></div>
<div class="modifier wide-1 right small" data-code="MetaRight"> <div class="key wide-1 right small" data-code="MetaRight" data-allow-autohold>
<div class="label"><b>&bull;</b><br>Win <div class="label"><b>&bull;</b><br>Win
</div> </div>
</div> </div>
@ -1428,7 +1417,7 @@
</div> </div>
</div> </div>
<div class="spacer-fixed"></div> <div class="spacer-fixed"></div>
<div class="modifier wide-1 right small" data-code="ControlRight"> <div class="key wide-1 right small" data-code="ControlRight" data-allow-autohold>
<div class="label"><b>&bull;</b><br>Ctrl <div class="label"><b>&bull;</b><br>Ctrl
</div> </div>
</div> </div>
@ -1436,7 +1425,7 @@
</div> </div>
<div class="keypad-block"> <div class="keypad-block">
<div class="keypad-row"> <div class="keypad-row">
<div class="modifier small" data-code="PrintScreen"> <div class="key small" data-code="PrintScreen" data-allow-autohold>
<div class="label"><b>&bull;</b><br>Pt/Sq <div class="label"><b>&bull;</b><br>Pt/Sq
</div> </div>
</div> </div>
@ -1660,19 +1649,19 @@
</div> </div>
</div> </div>
<div class="keypad-row"> <div class="keypad-row">
<div class="modifier small" data-code="KanaMode"> <div class="key small" data-code="KanaMode" data-allow-autohold>
<div class="label"><b>&bull;</b><br>Kana <div class="label"><b>&bull;</b><br>Kana
</div> </div>
</div> </div>
</div> </div>
<div class="keypad-row"> <div class="keypad-row">
<div class="modifier small" data-code="NonConvert"> <div class="key small" data-code="NonConvert" data-allow-autohold>
<div class="label"><b>&bull;</b><br>N/Cnv <div class="label"><b>&bull;</b><br>N/Cnv
</div> </div>
</div> </div>
</div> </div>
<div class="keypad-row"> <div class="keypad-row">
<div class="modifier small" data-code="Convert"> <div class="key small" data-code="Convert" data-allow-autohold>
<div class="label"><b>&bull;</b><br>Cnv <div class="label"><b>&bull;</b><br>Cnv
</div> </div>
</div> </div>
@ -1738,7 +1727,7 @@
</div> </div>
</div> </div>
<div class="spacer-fixed"></div> <div class="spacer-fixed"></div>
<div class="modifier small" data-code="PrintScreen"> <div class="key small" data-code="PrintScreen" data-allow-autohold>
<div class="label"><b>&bull;</b><br>Pt/Sq <div class="label"><b>&bull;</b><br>Pt/Sq
</div> </div>
</div> </div>
@ -1982,7 +1971,7 @@
</div> </div>
</div> </div>
<div class="keypad-row"> <div class="keypad-row">
<div class="modifier wide-3 left small" data-code="ShiftLeft"> <div class="key wide-3 left small" data-code="ShiftLeft" data-allow-autohold>
<div class="label"><b>&bull;</b><br>Shift <div class="label"><b>&bull;</b><br>Shift
</div> </div>
</div> </div>
@ -2053,17 +2042,17 @@
</div> </div>
</div> </div>
<div class="keypad-row"> <div class="keypad-row">
<div class="modifier wide-1 left small" data-code="ControlLeft"> <div class="key wide-1 left small" data-code="ControlLeft" data-allow-autohold>
<div class="label"><b>&bull;</b><br>Ctrl <div class="label"><b>&bull;</b><br>Ctrl
</div> </div>
</div> </div>
<div class="spacer"></div> <div class="spacer"></div>
<div class="modifier wide-1 left small" data-code="MetaLeft"> <div class="key wide-1 left small" data-code="MetaLeft" data-allow-autohold>
<div class="label"><b>&bull;</b><br>Win <div class="label"><b>&bull;</b><br>Win
</div> </div>
</div> </div>
<div class="spacer"></div> <div class="spacer"></div>
<div class="modifier wide-1 left small" data-code="AltLeft"> <div class="key wide-1 left small" data-code="AltLeft" data-allow-autohold>
<div class="label"><b>&bull;</b><br>Alt <div class="label"><b>&bull;</b><br>Alt
</div> </div>
</div> </div>
@ -2073,12 +2062,12 @@
</div> </div>
</div> </div>
<div class="spacer"></div> <div class="spacer"></div>
<div class="modifier right small" data-code="AltRight"> <div class="key right small" data-code="AltRight" data-allow-autohold>
<div class="label"><b>&bull;</b><br>Alt <div class="label"><b>&bull;</b><br>Alt
</div> </div>
</div> </div>
<div class="spacer"></div> <div class="spacer"></div>
<div class="modifier right small" data-code="MetaRight"> <div class="key right small" data-code="MetaRight" data-allow-autohold>
<div class="label"><b>&bull;</b><br>Win <div class="label"><b>&bull;</b><br>Win
</div> </div>
</div> </div>
@ -2088,12 +2077,12 @@
</div> </div>
</div> </div>
<div class="spacer"></div> <div class="spacer"></div>
<div class="modifier right small" data-code="ShiftRight"> <div class="key right small" data-code="ShiftRight" data-allow-autohold>
<div class="label"><b>&bull;</b><br>Shift <div class="label"><b>&bull;</b><br>Shift
</div> </div>
</div> </div>
<div class="spacer"></div> <div class="spacer"></div>
<div class="modifier right small" data-code="ControlRight"> <div class="key right small" data-code="ControlRight" data-allow-autohold>
<div class="label"><b>&bull;</b><br>Ctrl <div class="label"><b>&bull;</b><br>Ctrl
</div> </div>
</div> </div>

4
web/kvm/window-keyboard.pug
View File

@ -13,7 +13,7 @@ mixin key(sp, code, classes="", width=0)
mixin modifier(sp, code, classes="", width=0) mixin modifier(sp, code, classes="", width=0)
div(data-code=code class=`modifier ${classes}` style=(width ? `width: ${width}px` : "")) div(data-code=code, data-allow-autohold, class=`key ${classes}`, style=(width ? `width: ${width}px` : ""))
.label .label
| #[b &bull;]#[br] | #[b &bull;]#[br]
block block
@ -21,7 +21,7 @@ mixin modifier(sp, code, classes="", width=0)
mixin empty(sp, classes="", width=0) mixin empty(sp, classes="", width=0)
div(class=`empty ${classes}` style=(width ? `width:${width}px` : "")) div(class=`empty ${classes}`, style=(width ? `width:${width}px` : ""))
.label &nbsp; .label &nbsp;
+spacer(sp) +spacer(sp)

32
web/kvm/window-stream.pug
View File

@ -24,28 +24,16 @@
.keypad#stream-mouse-buttons(align="center") .keypad#stream-mouse-buttons(align="center")
.keypad-block .keypad-block
.keypad-row .keypad-row
.key.wide-3.left.rounded-left(data-code="left") .key.wide-3.left.rounded-left(data-code="left" data-allow-autohold)
.label Left .label #[b &bull;]#[br]Left
.modifier.left.small.rounded-right(data-code="left") .key.wide-1.rounded-none(data-code="middle" data-allow-autohold)
.label #[b &bull;]#[br]Hold .label #[b &bull;]#[br]Mid
.key.wide-3.right.rounded-right(data-code="right" data-allow-autohold)
.empty(style="width: 15px") .label #[b &bull;]#[br]Right
.key.wide-1.left.rounded-left(data-code="middle")
.label Mid
.modifier.left.small.rounded-right(data-code="middle")
.label #[b &bull;]#[br]Hold
.empty(style="width: 15px")
.modifier.right.small.rounded-left(data-code="right")
.label #[b &bull;]#[br]Hold
.key.wide-3.right.rounded-right(data-code="right")
.label Right
.empty(style="width: 30px") .empty(style="width: 30px")
.key.small.rounded-left(data-code="up") .key.small.rounded-left(data-code="up" data-allow-autohold)
.label Up .label #[b &bull;]#[br]Up
.key.small.rounded-right(data-code="down") .key.small.rounded-right(data-code="down" data-allow-autohold)
.label Down .label #[b &bull;]#[br]Down

65
web/share/css/keypad.css
View File

@ -52,7 +52,6 @@ div.keypad div.keypad-row div.spacer-fixed {
} }
div.keypad div.key, div.keypad div.key,
div.keypad div.modifier,
div.keypad div.empty { div.keypad div.empty {
vertical-align: top; vertical-align: top;
font-size: 0.9em; font-size: 0.9em;
@ -65,8 +64,7 @@ div.keypad div.empty {
div.keypad div.empty { div.keypad div.empty {
border: thin solid transparent; border: thin solid transparent;
} }
div.keypad div.key, div.keypad div.key {
div.keypad div.modifier {
box-shadow: var(--shadow-micro); box-shadow: var(--shadow-micro);
border: var(--border-key-thin); border: var(--border-key-thin);
border-radius: 6px; border-radius: 6px;
@ -74,33 +72,57 @@ div.keypad div.modifier {
background-color: var(--cs-key-default-bg); background-color: var(--cs-key-default-bg);
cursor: pointer; cursor: pointer;
} }
div.keypad div.key:hover, @media (hover: hover) {
div.keypad div.modifier:hover { div.keypad div.key:not(div.holded):not(div.locked):hover {
color: var(--cs-key-hovered-fg); color: var(--cs-key-hovered-fg);
background-color: var(--cs-key-hovered-bg); background-color: var(--cs-key-hovered-bg);
}
} }
div.keypad div.rounded-left { div.keypad div.rounded-left {
border-radius: 6px 0px 0px 6px !important; border-radius: 6px 0px 0px 6px;
} }
div.keypad div.rounded-right { div.keypad div.rounded-right {
border-radius: 0px 6px 6px 0px !important; border-radius: 0px 6px 6px 0px;
} }
div.keypad div.rounded-none { div.keypad div.rounded-none {
border-radius: 0px !important; border-radius: 0px;
} }
div.keypad div.pressed { div.keypad div.pressed {
box-shadow: none; box-shadow: none;
color: var(--cs-key-pressed-fg) !important; color: var(--cs-key-pressed-fg);
background-color: var(--cs-key-pressed-bg) !important; background-color: var(--cs-key-pressed-bg);
} }
div.keypad div.pressed:not(div.holded):not(div.locked):hover[data-allow-autohold] {
/* :active is not working on Firefox and iOS */
background: linear-gradient(to top, var(--cs-key-holded-bg) 50%, var(--cs-key-pressed-bg) 0);
background-size: 100% 200%;
background-position: top;
animation: keypad-animate-holding 0.2s 0.3s forwards;
}
@keyframes keypad-animate-holding {
100% {
background-position: bottom;
}
}
div.keypad div.holded { div.keypad div.holded {
box-shadow: none; /* Override animation end on iOS with !important */
color: var(--cs-key-default-fg) !important; box-shadow: none !important;
color: var(--cs-key-holded-fg) !important;
background-color: var(--cs-key-holded-bg) !important; background-color: var(--cs-key-holded-bg) !important;
} }
div.keypad div.locked {
box-shadow: none;
color: var(--cs-key-locked-fg);
background-color: var(--cs-key-locked-bg);
}
div.keypad div.key:last-child, div.keypad div.key:last-child,
div.keypad div.empty:last-child, div.keypad div.empty:last-child {
div.keypad div.modifier:last-child {
margin-right: 0; margin-right: 0;
} }
div.keypad div.wide-0 { div.keypad div.wide-0 {
@ -120,12 +142,12 @@ div.keypad div.wide-4 {
width: 288px; width: 288px;
} }
div.keypad div.left { div.keypad div.left {
text-align: left !important; text-align: left;
padding-left: 6px !important; padding-left: 6px;
} }
div.keypad div.right { div.keypad div.right {
text-align: right !important; text-align: right;
padding-right: 6px !important; padding-right: 6px;
} }
div.keypad div.small { div.keypad div.small {
font-size: 0.7em; font-size: 0.7em;
@ -142,3 +164,6 @@ div.keypad div.label {
div.keypad b { div.keypad b {
color: var(--cs-key-holded-bg); color: var(--cs-key-holded-bg);
} }
div.keypad div.locked b {
color: var(--cs-key-locked-bg);
}

3
web/share/css/vars.css
View File

@ -66,6 +66,9 @@
--cs-key-pressed-bg: #17191d; --cs-key-pressed-bg: #17191d;
--cs-key-pressed-fg: #6c7481; --cs-key-pressed-fg: #6c7481;
--cs-key-holded-bg: #436a8a; --cs-key-holded-bg: #436a8a;
--cs-key-holded-fg: white;
--cs-key-locked-bg: #a80000;
--cs-key-locked-fg: white;
--cs-marker-fg: #5b90bb; --cs-marker-fg: #5b90bb;
--cs-corner-bg: #5b90bb; --cs-corner-bg: #5b90bb;

6
web/share/css/x-mobile.css
View File

@ -113,9 +113,3 @@ ul#navbar li a.menu-button:hover:not(.active) {
div.keypad { div.keypad {
zoom: 1.28 !important; zoom: 1.28 !important;
} }
div.keypad div.key:hover,
div.keypad div.modifier:hover {
color: var(--cs-key-default-fg);
background-color: var(--cs-key-default-bg);
}

188
web/share/js/keypad.js
View File

@ -23,73 +23,67 @@
"use strict"; "use strict";
import {tools, $$$} from "./tools.js"; import {tools} from "./tools.js";
export function Keypad(__keys_parent, __sendKey, __apply_fixes) { export function Keypad(__el_keypad, __sendKey, __apply_fixes) {
var self = this; var self = this;
/************************************************************************/ /************************************************************************/
var __merged = {};
var __keys = {}; var __keys = {};
var __modifiers = {}; var __hold_timers = {};
var __fix_mac_cmd = false; var __fix_mac_cmd = false;
var __fix_win_altgr = false; var __fix_win_altgr = false;
var __altgr_ctrl_timer = null; var __altgr_ctrl_timer = null;
var __init__ = function() { var __init__ = function() {
__el_keypad.addEventListener("contextmenu", (ev) => ev.preventDefault());
if (__apply_fixes) { if (__apply_fixes) {
__fix_mac_cmd = tools.browser.is_mac; __fix_mac_cmd = tools.browser.is_mac;
if (__fix_mac_cmd) { if (__fix_mac_cmd) {
tools.info(`Keymap at ${__keys_parent}: enabled Fix-Mac-CMD`); tools.info(`Keymap at ${__el_keypad.id}: enabled Fix-Mac-CMD`);
} }
__fix_win_altgr = tools.browser.is_win; __fix_win_altgr = tools.browser.is_win;
if (__fix_win_altgr) { if (__fix_win_altgr) {
tools.info(`Keymap at ${__keys_parent}: enabled Fix-Win-AltGr`); tools.info(`Keymap at ${__el_keypad.id}: enabled Fix-Win-AltGr`);
} }
} }
for (let el_key of $$$(`${__keys_parent} div.key`)) { for (let el_key of [].slice.call(__el_keypad.getElementsByClassName("key"))) {
if (el_key.hasAttribute("data-allow-autohold")) {
el_key.title = "Long left click or short right click for hold, middle for lock";
} else {
el_key.title = "Right click for hold, middle for lock";
}
let code = el_key.getAttribute("data-code"); let code = el_key.getAttribute("data-code");
tools.setDefault(__keys, code, []); tools.setDefault(__keys, code, []);
__keys[code].push(el_key); __keys[code].push(el_key);
tools.setDefault(__merged, code, []); tools.el.setOnDown(el_key, (ev) => __clickHandler(el_key, ev));
__merged[code].push(el_key); tools.el.setOnUp(el_key, () => __clickHandler(el_key, null));
tools.el.setOnDown(el_key, () => __clickHandler(el_key, true));
tools.el.setOnUp(el_key, () => __clickHandler(el_key, false));
el_key.onmouseout = function() { el_key.onmouseout = function() {
if (__isPressed(el_key)) { if (
__clickHandler(el_key, false); __isActive(el_key, "pressed")
&& !__isActive(el_key, "holded")
&& !__isActive(el_key, "locked")
) {
__clickHandler(el_key, null);
} }
}; };
} }
for (let el_key of $$$(`${__keys_parent} div.modifier`)) {
let code = el_key.getAttribute("data-code");
tools.setDefault(__modifiers, code, []);
__modifiers[code].push(el_key);
tools.setDefault(__merged, code, []);
__merged[code].push(el_key);
tools.el.setOnDown(el_key, () => __toggleModifierHandler(el_key));
}
}; };
/************************************************************************/ /************************************************************************/
self.releaseAll = function() { self.releaseAll = function() {
for (let dict of [__keys, __modifiers]) { for (let code in __keys) {
for (let code in dict) { if (__isActive(__keys[code][0])) {
if (__isActive(dict[code][0])) { self.emitByCode(code, false);
self.emitByCode(code, false);
}
} }
} }
}; };
@ -113,7 +107,10 @@ export function Keypad(__keys_parent, __sendKey, __apply_fixes) {
}; };
self.emitByCode = function(code, state, apply_fixes=true) { self.emitByCode = function(code, state, apply_fixes=true) {
if (code in __merged) { if (code in __keys) {
let el_key = __keys[code][0];
__stopHoldTimer(el_key);
if (__fix_win_altgr && apply_fixes) { if (__fix_win_altgr && apply_fixes) {
if (!__fixWinAltgr(code, state)) { if (!__fixWinAltgr(code, state)) {
return; return;
@ -122,9 +119,17 @@ export function Keypad(__keys_parent, __sendKey, __apply_fixes) {
if (__fix_mac_cmd && apply_fixes) { if (__fix_mac_cmd && apply_fixes) {
__fixMacCmd(code, state); __fixMacCmd(code, state);
} }
__commonHandler(__merged[code][0], state, false);
__unholdModifiers(); if (state && !__isActive(el_key)) {
} __deactivate(el_key);
__activate(el_key, "pressed");
__process(el_key, true);
} else {
__deactivate(el_key);
__process(el_key, false);
}
__unholdAll();
};
}; };
var __fixMacCmd = function(code, state) { var __fixMacCmd = function(code, state) {
@ -148,7 +153,7 @@ export function Keypad(__keys_parent, __sendKey, __apply_fixes) {
self.emitByCode("ControlLeft", true, false); self.emitByCode("ControlLeft", true, false);
} }
} }
if (code === "ControlLeft" && !__isActive(__modifiers["ControlLeft"][0])) { if (code === "ControlLeft" && !__isActive(__keys["ControlLeft"][0])) {
__altgr_ctrl_timer = setTimeout(function() { __altgr_ctrl_timer = setTimeout(function() {
__altgr_ctrl_timer = null; __altgr_ctrl_timer = null;
self.emitByCode("ControlLeft", true, false); self.emitByCode("ControlLeft", true, false);
@ -165,61 +170,93 @@ export function Keypad(__keys_parent, __sendKey, __apply_fixes) {
return true; // Continue handling return true; // Continue handling
}; };
var __clickHandler = function(el_key, state) { var __clickHandler = function(el_key, ev) {
__commonHandler(el_key, state, false); let state = false;
__unholdModifiers(); let act = "pressed";
}; if (ev) {
state = (ev.type === "mousedown" || ev.type === "touchstart");
if (ev.type === "mousedown") {
if (ev.button === 1) {
act = "locked";
} else if (ev.button === 2) {
act = "holded";
}
}
}
var __toggleModifierHandler = function(el_key) {
__commonHandler(el_key, !__isActive(el_key), true);
};
var __commonHandler = function(el_key, state, hold) {
if (state && !__isActive(el_key)) { if (state && !__isActive(el_key)) {
__stopHoldTimer(el_key);
__deactivate(el_key); __deactivate(el_key);
__activate(el_key, (hold ? "holded" : "pressed")); __activate(el_key, act);
__process(el_key, true); __process(el_key, true);
__startHoldTimer(el_key);
} else { } else {
__deactivate(el_key); let fixed = (__isActive(el_key, "holded") || __isActive(el_key, "locked"));
__process(el_key, false); if (!state && fixed && __stopHoldTimer(el_key)) {
return; // Игнорировать первое отжатие сразу после нажатия
}
if (!state) {
__stopHoldTimer(el_key);
__deactivate(el_key);
__process(el_key, false);
if (!fixed) {
__unholdAll();
}
}
} }
}; };
var __unholdModifiers = function() { var __startHoldTimer = function(el_key) {
for (let code in __modifiers) { __stopHoldTimer(el_key);
let el_key = __modifiers[code][0]; let code = el_key.getAttribute("data-code");
if (__isHolded(el_key)) { __hold_timers[code] = setTimeout(function() {
// Помимо прямой функции, hold timer используется для детектирования факта
// нажатия в рамках одной сессии press/release, чтобы не отпустить сразу же
// зажатую или заблокированную клавишу. Поэтому таймер инициализируется всегда,
// но основную функцию выполняет только если у него есть атрибут data-allow-autohold.
if (el_key.hasAttribute("data-allow-autohold")) {
__deactivate(el_key);
__activate(el_key, "holded");
}
}, 500); // Check keypad.css for the animation
};
var __stopHoldTimer = function(el_key) {
let code = el_key.getAttribute("data-code");
if (!__hold_timers[code]) {
return false;
}
clearTimeout(__hold_timers[code]);
__hold_timers[code] = null;
return true;
};
var __unholdAll = function() {
for (let el_key of [].slice.call(__el_keypad.getElementsByClassName("key"))) {
__stopHoldTimer(el_key);
if (__isActive(el_key, "holded") && !__isActive(el_key, "locked")) { // Skip duplicating keys
__deactivate(el_key); __deactivate(el_key);
__process(el_key, false); __process(el_key, false);
} }
} }
}; };
var __isPressed = function(el_key) { var __isActive = function(el_key, cls=null) {
let is_pressed = false;
let el_keys = __resolveKeys(el_key); let el_keys = __resolveKeys(el_key);
for (el_key of el_keys) { for (el_key of el_keys) {
is_pressed = (is_pressed || el_key.classList.contains("pressed")); if (cls) {
if (el_key.classList.contains(cls)) {
return true;
}
} else if (
el_key.classList.contains("pressed")
|| el_key.classList.contains("holded")
|| el_key.classList.contains("locked")
) {
return true;
}
} }
return is_pressed; return false;
};
var __isHolded = function(el_key) {
let is_holded = false;
let el_keys = __resolveKeys(el_key);
for (el_key of el_keys) {
is_holded = (is_holded || el_key.classList.contains("holded"));
}
return is_holded;
};
var __isActive = function(el_key) {
let is_active = false;
let el_keys = __resolveKeys(el_key);
for (el_key of el_keys) {
is_active = (is_active || el_key.classList.contains("pressed") || el_key.classList.contains("holded"));
}
return is_active;
}; };
var __activate = function(el_key, cls) { var __activate = function(el_key, cls) {
@ -234,12 +271,13 @@ export function Keypad(__keys_parent, __sendKey, __apply_fixes) {
for (el_key of el_keys) { for (el_key of el_keys) {
el_key.classList.remove("pressed"); el_key.classList.remove("pressed");
el_key.classList.remove("holded"); el_key.classList.remove("holded");
el_key.classList.remove("locked");
} }
}; };
var __resolveKeys = function(el_key) { var __resolveKeys = function(el_key) {
let code = el_key.getAttribute("data-code"); let code = el_key.getAttribute("data-code");
return __merged[code]; return __keys[code];
}; };
var __process = function(el_key, state) { var __process = function(el_key, state) {

2
web/share/js/kvm/keyboard.js
View File

@ -35,7 +35,7 @@ export function Keyboard(__recordWsEvent) {
var __keypad = null; var __keypad = null;
var __init__ = function() { var __init__ = function() {
__keypad = new Keypad("div#keyboard-window", __sendKey, true); __keypad = new Keypad($("keyboard-window"), __sendKey, true);
$("hid-keyboard-led").title = "Keyboard free"; $("hid-keyboard-led").title = "Keyboard free";

2
web/share/js/kvm/mouse.js
View File

@ -55,7 +55,7 @@ export function Mouse(__getGeometry, __recordWsEvent) {
var __stream_hovered = false; var __stream_hovered = false;
var __init__ = function() { var __init__ = function() {
__keypad = new Keypad("div#stream-mouse-buttons", __sendButton, false); __keypad = new Keypad($("stream-mouse-buttons"), __sendButton, false);
$("hid-mouse-led").title = "Mouse free"; $("hid-mouse-led").title = "Mouse free";

2
web/share/js/tools.js
View File

@ -164,7 +164,7 @@ export var tools = new function() {
if (prevent_default) { if (prevent_default) {
ev.preventDefault(); ev.preventDefault();
} }
callback(); callback(ev);
}; };
}, },
"setOnUp": function(el, callback, prevent_default=true) { "setOnUp": function(el, callback, prevent_default=true) {