mirror of
https://github.com/mofeng-git/One-KVM.git
synced 2026-01-30 17:41:54 +08:00
ipad mouse buttons, keyboard refactoring
This commit is contained in:
@@ -91,6 +91,7 @@ function Hid() {
|
||||
|
||||
var __releaseAll = function() {
|
||||
__keyboard.releaseAll();
|
||||
__mouse.releaseAll();
|
||||
};
|
||||
|
||||
var __emitShortcut = function(codes) {
|
||||
@@ -107,7 +108,7 @@ function Hid() {
|
||||
|
||||
var index = 0;
|
||||
var iterate = () => setTimeout(function() {
|
||||
__keyboard.fireEvent(raw_events[index].code, raw_events[index].state);
|
||||
__keyboard.emit(raw_events[index].code, raw_events[index].state);
|
||||
++index;
|
||||
if (index < raw_events.length) {
|
||||
iterate();
|
||||
|
||||
@@ -28,10 +28,12 @@ function Keyboard() {
|
||||
var __ws = null;
|
||||
var __online = true;
|
||||
|
||||
var __keys = [].slice.call($$$("div#keyboard-desktop div.keyboard-block div.keyboard-row div.key"));
|
||||
var __modifiers = [].slice.call($$$("div#keyboard-desktop div.keyboard-block div.keyboard-row div.modifier"));
|
||||
var __keypad = null;
|
||||
var __use_release_hook = false;
|
||||
|
||||
var __init__ = function() {
|
||||
__keypad = new Keypad("div#keyboard-window", __sendKey);
|
||||
|
||||
$("hid-keyboard-led").title = "Keyboard free";
|
||||
|
||||
$("keyboard-window").onkeydown = (event) => __keyboardHandler(event, true);
|
||||
@@ -47,22 +49,11 @@ function Keyboard() {
|
||||
window.addEventListener("focusin", __updateLeds);
|
||||
window.addEventListener("focusout", __updateLeds);
|
||||
|
||||
tools.forEach($$("key"), function(el_key) {
|
||||
tools.setOnDown(el_key, () => __clickHandler(el_key, true));
|
||||
tools.setOnUp(el_key, () => __clickHandler(el_key, false));
|
||||
el_key.onmouseout = function() {
|
||||
if (__isPressed(el_key)) {
|
||||
__clickHandler(el_key, false);
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
tools.forEach($$("modifier"), function(el_key) {
|
||||
tools.setOnDown(el_key, () => __toggleModifierHandler(el_key));
|
||||
});
|
||||
|
||||
if (tools.browser.is_mac) {
|
||||
// https://bugs.chromium.org/p/chromium/issues/detail?id=28089
|
||||
// https://bugzilla.mozilla.org/show_bug.cgi?id=1299553
|
||||
tools.info("Keyboard: enabled Mac-CMD-Hook");
|
||||
__use_release_hook = true;
|
||||
}
|
||||
};
|
||||
|
||||
@@ -82,14 +73,10 @@ function Keyboard() {
|
||||
};
|
||||
|
||||
self.releaseAll = function() {
|
||||
__keys.concat(__modifiers).forEach(function(el_key) {
|
||||
if (__isActive(el_key)) {
|
||||
self.fireEvent(el_key.getAttribute("data-key"), false);
|
||||
}
|
||||
});
|
||||
__keypad.releaseAll(__use_release_hook);
|
||||
};
|
||||
|
||||
self.fireEvent = function(code, state) {
|
||||
self.emit = function(code, state) {
|
||||
__keyboardHandler({code: code}, state);
|
||||
};
|
||||
|
||||
@@ -124,97 +111,14 @@ function Keyboard() {
|
||||
if (event.preventDefault) {
|
||||
event.preventDefault();
|
||||
}
|
||||
var el_key = document.querySelector(`[data-key='${event.code}']`);
|
||||
if (el_key && !event.repeat) {
|
||||
__commonHandler(el_key, state, "pressed");
|
||||
if (tools.browser.is_mac) {
|
||||
// https://bugs.chromium.org/p/chromium/issues/detail?id=28089
|
||||
// https://bugzilla.mozilla.org/show_bug.cgi?id=1299553
|
||||
if ((event.code === "MetaLeft" || event.code === "MetaRight") && !state) {
|
||||
__keys.forEach(function(el_key) {
|
||||
if (__isActive(el_key)) {
|
||||
self.fireEvent(el_key.getAttribute("data-key"), false);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
__unholdModifiers();
|
||||
if (!event.repeat) {
|
||||
// https://bugs.chromium.org/p/chromium/issues/detail?id=28089
|
||||
// https://bugzilla.mozilla.org/show_bug.cgi?id=1299553
|
||||
__keypad.emit(event.code, state, __use_release_hook);
|
||||
}
|
||||
};
|
||||
|
||||
var __clickHandler = function(el_key, state) {
|
||||
__commonHandler(el_key, state, "pressed");
|
||||
__unholdModifiers();
|
||||
};
|
||||
|
||||
var __toggleModifierHandler = function(el_key) {
|
||||
__commonHandler(el_key, !__isActive(el_key), "holded");
|
||||
};
|
||||
|
||||
var __unholdModifiers = function() {
|
||||
__modifiers.forEach(function(el_key) {
|
||||
if (__isHolded(el_key)) {
|
||||
__deactivate(el_key);
|
||||
__sendKey(el_key, false);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var __commonHandler = function(el_key, state, cls) {
|
||||
if (state && !__isActive(el_key)) {
|
||||
__deactivate(el_key);
|
||||
__activate(el_key, cls);
|
||||
__sendKey(el_key, true);
|
||||
} else {
|
||||
__deactivate(el_key);
|
||||
__sendKey(el_key, false);
|
||||
}
|
||||
};
|
||||
|
||||
var __isPressed = function(el_key) {
|
||||
var is_pressed = false;
|
||||
tools.forEach(__resolveKeys(el_key), function(el_key) {
|
||||
is_pressed = (is_pressed || el_key.classList.contains("pressed"));
|
||||
});
|
||||
return is_pressed;
|
||||
};
|
||||
|
||||
var __isHolded = function(el_key) {
|
||||
var is_holded = false;
|
||||
tools.forEach(__resolveKeys(el_key), function(el_key) {
|
||||
is_holded = (is_holded || el_key.classList.contains("holded"));
|
||||
});
|
||||
return is_holded;
|
||||
};
|
||||
|
||||
var __isActive = function(el_key) {
|
||||
var is_active = false;
|
||||
tools.forEach(__resolveKeys(el_key), function(el_key) {
|
||||
is_active = (is_active || el_key.classList.contains("pressed") || el_key.classList.contains("holded"));
|
||||
});
|
||||
return is_active;
|
||||
};
|
||||
|
||||
var __activate = function(el_key, cls) {
|
||||
tools.forEach(__resolveKeys(el_key), function(el_key) {
|
||||
el_key.classList.add(cls);
|
||||
});
|
||||
};
|
||||
|
||||
var __deactivate = function(el_key) {
|
||||
tools.forEach(__resolveKeys(el_key), function(el_key) {
|
||||
el_key.classList.remove("pressed");
|
||||
el_key.classList.remove("holded");
|
||||
});
|
||||
};
|
||||
|
||||
var __resolveKeys = function(el_key) {
|
||||
var code = el_key.getAttribute("data-key");
|
||||
return $$$(`[data-key='${code}']`);
|
||||
};
|
||||
|
||||
var __sendKey = function(el_key, state) {
|
||||
var code = el_key.getAttribute("data-key");
|
||||
var __sendKey = function(code, state) {
|
||||
tools.debug("Keyboard: key", (state ? "pressed:" : "released:"), code);
|
||||
if (__ws) {
|
||||
__ws.send(JSON.stringify({
|
||||
|
||||
@@ -28,6 +28,8 @@ function Mouse() {
|
||||
var __ws = null;
|
||||
var __online = true;
|
||||
|
||||
var __keypad = null;
|
||||
|
||||
var __current_pos = {x: 0, y:0};
|
||||
var __sent_pos = {x: 0, y:0};
|
||||
var __wheel_delta = {x: 0, y: 0};
|
||||
@@ -35,22 +37,18 @@ function Mouse() {
|
||||
var __stream_hovered = false;
|
||||
|
||||
var __init__ = function() {
|
||||
__keypad = new Keypad("div#stream-mouse-buttons", __sendButton);
|
||||
|
||||
$("hid-mouse-led").title = "Mouse free";
|
||||
|
||||
$("stream-box").onmouseenter = __hoverStream;
|
||||
$("stream-box").onmouseleave = __leaveStream;
|
||||
$("stream-box").onmousedown = (event) => __buttonHandler(event, true);
|
||||
$("stream-box").onmouseup = (event) => __buttonHandler(event, false);
|
||||
$("stream-box").onmousedown = (event) => __streamButtonHandler(event, true);
|
||||
$("stream-box").onmouseup = (event) => __streamButtonHandler(event, false);
|
||||
$("stream-box").oncontextmenu = (event) => event.preventDefault();
|
||||
$("stream-box").onmousemove = __moveHandler;
|
||||
$("stream-box").onwheel = __wheelHandler;
|
||||
$("stream-box").ontouchstart = (event) => __touchMoveHandler(event);
|
||||
|
||||
tools.forEach($$$("[data-mouse-button]"), function(el_button) {
|
||||
var button = el_button.getAttribute("data-mouse-button");
|
||||
tools.setOnDown(el_button, () => __sendButton(button, true));
|
||||
tools.setOnUp(el_button, () => __sendButton(button, false));
|
||||
});
|
||||
$("stream-box").onmousemove = __streamMoveHandler;
|
||||
$("stream-box").onwheel = __streamWheelHandler;
|
||||
$("stream-box").ontouchstart = (event) => __streamTouchMoveHandler(event);
|
||||
|
||||
setInterval(__sendMove, 100);
|
||||
};
|
||||
@@ -72,6 +70,10 @@ function Mouse() {
|
||||
__updateLeds();
|
||||
};
|
||||
|
||||
self.releaseAll = function() {
|
||||
__keypad.releaseAll();
|
||||
};
|
||||
|
||||
var __hoverStream = function() {
|
||||
__stream_hovered = true;
|
||||
__updateLeds();
|
||||
@@ -106,16 +108,16 @@ function Mouse() {
|
||||
$("hid-mouse-led").title = title;
|
||||
};
|
||||
|
||||
var __buttonHandler = function(event, state) {
|
||||
var __streamButtonHandler = function(event, state) {
|
||||
// https://www.w3schools.com/jsref/event_button.asp
|
||||
event.preventDefault();
|
||||
switch (event.button) {
|
||||
case 0: __sendButton("left", state); break;
|
||||
case 2: __sendButton("right", state); break;
|
||||
case 0: __keypad.emit("left", state); break;
|
||||
case 2: __keypad.emit("right", state); break;
|
||||
}
|
||||
};
|
||||
|
||||
var __touchMoveHandler = function(event) {
|
||||
var __streamTouchMoveHandler = function(event) {
|
||||
event.preventDefault();
|
||||
if (event.touches[0].target && event.touches[0].target.getBoundingClientRect) {
|
||||
var rect = event.touches[0].target.getBoundingClientRect();
|
||||
@@ -127,7 +129,7 @@ function Mouse() {
|
||||
}
|
||||
};
|
||||
|
||||
var __moveHandler = function(event) {
|
||||
var __streamMoveHandler = function(event) {
|
||||
var rect = event.target.getBoundingClientRect();
|
||||
__current_pos = {
|
||||
x: Math.round(event.clientX - rect.left),
|
||||
@@ -172,7 +174,7 @@ function Mouse() {
|
||||
return Math.round((x - a) / (b - a) * (d - c) + c);
|
||||
};
|
||||
|
||||
var __wheelHandler = function(event) {
|
||||
var __streamWheelHandler = function(event) {
|
||||
// https://learn.javascript.ru/mousewheel
|
||||
if (event.preventDefault) {
|
||||
event.preventDefault();
|
||||
|
||||
Reference in New Issue
Block a user