mirror of
https://github.com/mofeng-git/One-KVM.git
synced 2025-12-12 01:00:29 +08:00
pikvm/pikvm#1418: web: hold/lock key on keypad
This commit is contained in:
Maxim Devaev
parent
70ca478a78
commit
c3eed7c497
@ -1003,32 +1003,21 @@
|
||||
<div class="keypad" id="stream-mouse-buttons" align="center">
|
||||
<div class="keypad-block">
|
||||
<div class="keypad-row">
|
||||
<div class="key wide-3 left rounded-left" data-code="left">
|
||||
<div class="label">Left</div>
|
||||
<div class="key wide-3 left rounded-left" data-code="left" data-allow-autohold>
|
||||
<div class="label"><b>•</b><br>Left</div>
|
||||
</div>
|
||||
<div class="modifier left small rounded-right" data-code="left">
|
||||
<div class="label"><b>•</b><br>Hold</div>
|
||||
<div class="key wide-1 rounded-none" data-code="middle" data-allow-autohold>
|
||||
<div class="label"><b>•</b><br>Mid</div>
|
||||
</div>
|
||||
<div class="empty" style="width: 15px"></div>
|
||||
<div class="key wide-1 left rounded-left" data-code="middle">
|
||||
<div class="label">Mid</div>
|
||||
</div>
|
||||
<div class="modifier left small rounded-right" data-code="middle">
|
||||
<div class="label"><b>•</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>•</b><br>Hold</div>
|
||||
</div>
|
||||
<div class="key wide-3 right rounded-right" data-code="right">
|
||||
<div class="label">Right</div>
|
||||
<div class="key wide-3 right rounded-right" data-code="right" data-allow-autohold>
|
||||
<div class="label"><b>•</b><br>Right</div>
|
||||
</div>
|
||||
<div class="empty" style="width: 30px"></div>
|
||||
<div class="key small rounded-left" data-code="up">
|
||||
<div class="label">Up</div>
|
||||
<div class="key small rounded-left" data-code="up" data-allow-autohold>
|
||||
<div class="label"><b>•</b><br>Up</div>
|
||||
</div>
|
||||
<div class="key small rounded-right" data-code="down">
|
||||
<div class="label">Down</div>
|
||||
<div class="key small rounded-right" data-code="down" data-allow-autohold>
|
||||
<div class="label"><b>•</b><br>Down</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1332,7 +1321,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<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>•</b><br>Shift
|
||||
</div>
|
||||
</div>
|
||||
@ -1387,23 +1376,23 @@
|
||||
</div>
|
||||
</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>•</b><br>Shift
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>•</b><br>Ctrl
|
||||
</div>
|
||||
</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>•</b><br>Win
|
||||
</div>
|
||||
</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>•</b><br>Alt
|
||||
</div>
|
||||
</div>
|
||||
@ -1413,12 +1402,12 @@
|
||||
</div>
|
||||
</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>•</b><br>Alt
|
||||
</div>
|
||||
</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>•</b><br>Win
|
||||
</div>
|
||||
</div>
|
||||
@ -1428,7 +1417,7 @@
|
||||
</div>
|
||||
</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>•</b><br>Ctrl
|
||||
</div>
|
||||
</div>
|
||||
@ -1436,7 +1425,7 @@
|
||||
</div>
|
||||
<div class="keypad-block">
|
||||
<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>•</b><br>Pt/Sq
|
||||
</div>
|
||||
</div>
|
||||
@ -1660,19 +1649,19 @@
|
||||
</div>
|
||||
</div>
|
||||
<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>•</b><br>Kana
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>•</b><br>N/Cnv
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>•</b><br>Cnv
|
||||
</div>
|
||||
</div>
|
||||
@ -1738,7 +1727,7 @@
|
||||
</div>
|
||||
</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>•</b><br>Pt/Sq
|
||||
</div>
|
||||
</div>
|
||||
@ -1982,7 +1971,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<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>•</b><br>Shift
|
||||
</div>
|
||||
</div>
|
||||
@ -2053,17 +2042,17 @@
|
||||
</div>
|
||||
</div>
|
||||
<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>•</b><br>Ctrl
|
||||
</div>
|
||||
</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>•</b><br>Win
|
||||
</div>
|
||||
</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>•</b><br>Alt
|
||||
</div>
|
||||
</div>
|
||||
@ -2073,12 +2062,12 @@
|
||||
</div>
|
||||
</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>•</b><br>Alt
|
||||
</div>
|
||||
</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>•</b><br>Win
|
||||
</div>
|
||||
</div>
|
||||
@ -2088,12 +2077,12 @@
|
||||
</div>
|
||||
</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>•</b><br>Shift
|
||||
</div>
|
||||
</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>•</b><br>Ctrl
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -13,7 +13,7 @@ mixin key(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
|
||||
| #[b •]#[br]
|
||||
block
|
||||
@ -21,7 +21,7 @@ mixin modifier(sp, code, 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
|
||||
+spacer(sp)
|
||||
|
||||
|
||||
@ -24,28 +24,16 @@
|
||||
.keypad#stream-mouse-buttons(align="center")
|
||||
.keypad-block
|
||||
.keypad-row
|
||||
.key.wide-3.left.rounded-left(data-code="left")
|
||||
.label Left
|
||||
.modifier.left.small.rounded-right(data-code="left")
|
||||
.label #[b •]#[br]Hold
|
||||
|
||||
.empty(style="width: 15px")
|
||||
|
||||
.key.wide-1.left.rounded-left(data-code="middle")
|
||||
.label Mid
|
||||
.modifier.left.small.rounded-right(data-code="middle")
|
||||
.label #[b •]#[br]Hold
|
||||
|
||||
.empty(style="width: 15px")
|
||||
|
||||
.modifier.right.small.rounded-left(data-code="right")
|
||||
.label #[b •]#[br]Hold
|
||||
.key.wide-3.right.rounded-right(data-code="right")
|
||||
.label Right
|
||||
.key.wide-3.left.rounded-left(data-code="left" data-allow-autohold)
|
||||
.label #[b •]#[br]Left
|
||||
.key.wide-1.rounded-none(data-code="middle" data-allow-autohold)
|
||||
.label #[b •]#[br]Mid
|
||||
.key.wide-3.right.rounded-right(data-code="right" data-allow-autohold)
|
||||
.label #[b •]#[br]Right
|
||||
|
||||
.empty(style="width: 30px")
|
||||
|
||||
.key.small.rounded-left(data-code="up")
|
||||
.label Up
|
||||
.key.small.rounded-right(data-code="down")
|
||||
.label Down
|
||||
.key.small.rounded-left(data-code="up" data-allow-autohold)
|
||||
.label #[b •]#[br]Up
|
||||
.key.small.rounded-right(data-code="down" data-allow-autohold)
|
||||
.label #[b •]#[br]Down
|
||||
|
||||
@ -52,7 +52,6 @@ div.keypad div.keypad-row div.spacer-fixed {
|
||||
}
|
||||
|
||||
div.keypad div.key,
|
||||
div.keypad div.modifier,
|
||||
div.keypad div.empty {
|
||||
vertical-align: top;
|
||||
font-size: 0.9em;
|
||||
@ -65,8 +64,7 @@ div.keypad div.empty {
|
||||
div.keypad div.empty {
|
||||
border: thin solid transparent;
|
||||
}
|
||||
div.keypad div.key,
|
||||
div.keypad div.modifier {
|
||||
div.keypad div.key {
|
||||
box-shadow: var(--shadow-micro);
|
||||
border: var(--border-key-thin);
|
||||
border-radius: 6px;
|
||||
@ -74,33 +72,57 @@ div.keypad div.modifier {
|
||||
background-color: var(--cs-key-default-bg);
|
||||
cursor: pointer;
|
||||
}
|
||||
div.keypad div.key:hover,
|
||||
div.keypad div.modifier:hover {
|
||||
@media (hover: hover) {
|
||||
div.keypad div.key:not(div.holded):not(div.locked):hover {
|
||||
color: var(--cs-key-hovered-fg);
|
||||
background-color: var(--cs-key-hovered-bg);
|
||||
}
|
||||
}
|
||||
|
||||
div.keypad div.rounded-left {
|
||||
border-radius: 6px 0px 0px 6px !important;
|
||||
border-radius: 6px 0px 0px 6px;
|
||||
}
|
||||
div.keypad div.rounded-right {
|
||||
border-radius: 0px 6px 6px 0px !important;
|
||||
border-radius: 0px 6px 6px 0px;
|
||||
}
|
||||
div.keypad div.rounded-none {
|
||||
border-radius: 0px !important;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
div.keypad div.pressed {
|
||||
box-shadow: none;
|
||||
color: var(--cs-key-pressed-fg) !important;
|
||||
background-color: var(--cs-key-pressed-bg) !important;
|
||||
color: var(--cs-key-pressed-fg);
|
||||
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 {
|
||||
box-shadow: none;
|
||||
color: var(--cs-key-default-fg) !important;
|
||||
/* Override animation end on iOS with !important */
|
||||
box-shadow: none !important;
|
||||
color: var(--cs-key-holded-fg) !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.empty:last-child,
|
||||
div.keypad div.modifier:last-child {
|
||||
div.keypad div.empty:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
div.keypad div.wide-0 {
|
||||
@ -120,12 +142,12 @@ div.keypad div.wide-4 {
|
||||
width: 288px;
|
||||
}
|
||||
div.keypad div.left {
|
||||
text-align: left !important;
|
||||
padding-left: 6px !important;
|
||||
text-align: left;
|
||||
padding-left: 6px;
|
||||
}
|
||||
div.keypad div.right {
|
||||
text-align: right !important;
|
||||
padding-right: 6px !important;
|
||||
text-align: right;
|
||||
padding-right: 6px;
|
||||
}
|
||||
div.keypad div.small {
|
||||
font-size: 0.7em;
|
||||
@ -142,3 +164,6 @@ div.keypad div.label {
|
||||
div.keypad b {
|
||||
color: var(--cs-key-holded-bg);
|
||||
}
|
||||
div.keypad div.locked b {
|
||||
color: var(--cs-key-locked-bg);
|
||||
}
|
||||
|
||||
@ -66,6 +66,9 @@
|
||||
--cs-key-pressed-bg: #17191d;
|
||||
--cs-key-pressed-fg: #6c7481;
|
||||
--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-corner-bg: #5b90bb;
|
||||
|
||||
@ -113,9 +113,3 @@ ul#navbar li a.menu-button:hover:not(.active) {
|
||||
div.keypad {
|
||||
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);
|
||||
}
|
||||
|
||||
@ -23,75 +23,69 @@
|
||||
"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 __merged = {};
|
||||
var __keys = {};
|
||||
var __modifiers = {};
|
||||
var __hold_timers = {};
|
||||
|
||||
var __fix_mac_cmd = false;
|
||||
var __fix_win_altgr = false;
|
||||
var __altgr_ctrl_timer = null;
|
||||
|
||||
var __init__ = function() {
|
||||
__el_keypad.addEventListener("contextmenu", (ev) => ev.preventDefault());
|
||||
|
||||
if (__apply_fixes) {
|
||||
__fix_mac_cmd = tools.browser.is_mac;
|
||||
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;
|
||||
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");
|
||||
|
||||
tools.setDefault(__keys, code, []);
|
||||
__keys[code].push(el_key);
|
||||
|
||||
tools.setDefault(__merged, code, []);
|
||||
__merged[code].push(el_key);
|
||||
|
||||
tools.el.setOnDown(el_key, () => __clickHandler(el_key, true));
|
||||
tools.el.setOnUp(el_key, () => __clickHandler(el_key, false));
|
||||
tools.el.setOnDown(el_key, (ev) => __clickHandler(el_key, ev));
|
||||
tools.el.setOnUp(el_key, () => __clickHandler(el_key, null));
|
||||
el_key.onmouseout = function() {
|
||||
if (__isPressed(el_key)) {
|
||||
__clickHandler(el_key, false);
|
||||
if (
|
||||
__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() {
|
||||
for (let dict of [__keys, __modifiers]) {
|
||||
for (let code in dict) {
|
||||
if (__isActive(dict[code][0])) {
|
||||
for (let code in __keys) {
|
||||
if (__isActive(__keys[code][0])) {
|
||||
self.emitByCode(code, false);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
self.emitByKeyEvent = function(ev, state) {
|
||||
@ -113,7 +107,10 @@ export function Keypad(__keys_parent, __sendKey, __apply_fixes) {
|
||||
};
|
||||
|
||||
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 (!__fixWinAltgr(code, state)) {
|
||||
return;
|
||||
@ -122,9 +119,17 @@ export function Keypad(__keys_parent, __sendKey, __apply_fixes) {
|
||||
if (__fix_mac_cmd && apply_fixes) {
|
||||
__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) {
|
||||
@ -148,7 +153,7 @@ export function Keypad(__keys_parent, __sendKey, __apply_fixes) {
|
||||
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 = null;
|
||||
self.emitByCode("ControlLeft", true, false);
|
||||
@ -165,61 +170,93 @@ export function Keypad(__keys_parent, __sendKey, __apply_fixes) {
|
||||
return true; // Continue handling
|
||||
};
|
||||
|
||||
var __clickHandler = function(el_key, state) {
|
||||
__commonHandler(el_key, state, false);
|
||||
__unholdModifiers();
|
||||
};
|
||||
var __clickHandler = function(el_key, ev) {
|
||||
let state = false;
|
||||
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)) {
|
||||
__stopHoldTimer(el_key);
|
||||
__deactivate(el_key);
|
||||
__activate(el_key, (hold ? "holded" : "pressed"));
|
||||
__activate(el_key, act);
|
||||
__process(el_key, true);
|
||||
__startHoldTimer(el_key);
|
||||
} else {
|
||||
let fixed = (__isActive(el_key, "holded") || __isActive(el_key, "locked"));
|
||||
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() {
|
||||
for (let code in __modifiers) {
|
||||
let el_key = __modifiers[code][0];
|
||||
if (__isHolded(el_key)) {
|
||||
var __startHoldTimer = function(el_key) {
|
||||
__stopHoldTimer(el_key);
|
||||
let code = el_key.getAttribute("data-code");
|
||||
__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);
|
||||
__process(el_key, false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var __isPressed = function(el_key) {
|
||||
let is_pressed = false;
|
||||
var __isActive = function(el_key, cls=null) {
|
||||
let el_keys = __resolveKeys(el_key);
|
||||
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;
|
||||
}
|
||||
return is_pressed;
|
||||
};
|
||||
|
||||
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"));
|
||||
} else if (
|
||||
el_key.classList.contains("pressed")
|
||||
|| el_key.classList.contains("holded")
|
||||
|| el_key.classList.contains("locked")
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
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;
|
||||
return false;
|
||||
};
|
||||
|
||||
var __activate = function(el_key, cls) {
|
||||
@ -234,12 +271,13 @@ export function Keypad(__keys_parent, __sendKey, __apply_fixes) {
|
||||
for (el_key of el_keys) {
|
||||
el_key.classList.remove("pressed");
|
||||
el_key.classList.remove("holded");
|
||||
el_key.classList.remove("locked");
|
||||
}
|
||||
};
|
||||
|
||||
var __resolveKeys = function(el_key) {
|
||||
let code = el_key.getAttribute("data-code");
|
||||
return __merged[code];
|
||||
return __keys[code];
|
||||
};
|
||||
|
||||
var __process = function(el_key, state) {
|
||||
|
||||
@ -35,7 +35,7 @@ export function Keyboard(__recordWsEvent) {
|
||||
var __keypad = null;
|
||||
|
||||
var __init__ = function() {
|
||||
__keypad = new Keypad("div#keyboard-window", __sendKey, true);
|
||||
__keypad = new Keypad($("keyboard-window"), __sendKey, true);
|
||||
|
||||
$("hid-keyboard-led").title = "Keyboard free";
|
||||
|
||||
|
||||
@ -55,7 +55,7 @@ export function Mouse(__getGeometry, __recordWsEvent) {
|
||||
var __stream_hovered = false;
|
||||
|
||||
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";
|
||||
|
||||
|
||||
@ -164,7 +164,7 @@ export var tools = new function() {
|
||||
if (prevent_default) {
|
||||
ev.preventDefault();
|
||||
}
|
||||
callback();
|
||||
callback(ev);
|
||||
};
|
||||
},
|
||||
"setOnUp": function(el, callback, prevent_default=true) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user