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

touch improvements

Browse Source
This commit is contained in:
Devaev Maxim 2018-09-08 01:16:37 +03:00
parent 3a68c2ae10
commit 15981e62b5
9 changed files with 65 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
kvmd/web/css/main.css
View File

@ -14,7 +14,7 @@ a {
text-decoration: underline dotted;
color: var(--fg-color-normal);
}
@media (hover: hover) {
@media (hover: hover), (min--moz-device-pixel-ratio: 0) {
a:hover {
text-decoration: underline;
}
@ -37,7 +37,7 @@ button, select {
outline: none;
cursor: pointer;
}
@media (hover: hover) {
@media (hover: hover), (min--moz-device-pixel-ratio: 0) {
button:enabled:hover, select:enabled:hover {
color: var(--fg-color-intensive);
background-color: var(--bg-color-dark) !important;
@ -45,6 +45,9 @@ button, select {
button:active, select:active {
color: var(--fg-color-selected) !important;
}
select:enabled:hover {
background-image: url("../svg/select-arrow-intensive.svg") !important;
}
}
@media (hover: none) {
button:active, select:active {
@ -68,9 +71,6 @@ select {
background-position: center right;
background-repeat: no-repeat;
}
select:enabled:hover {
background-image: url("../svg/select-arrow-intensive.svg") !important;
}
select:disabled {
background-image: url("../svg/select-arrow-inactive.svg") !important;
}
@ -200,9 +200,5 @@ ul#footer li.footer-right {
float: right;
}
ul#footer li a {
text-decoration: underline dotted;
color: var(--fg-color-inactive);
}
ul#footer li a:hover {
text-decoration: underline;
}

6
kvmd/web/js/atx.js
View File

@ -7,9 +7,9 @@ function Atx() {
$("atx-power-led").title = "Power Led";
$("atx-hdd-led").title = "Disk Activity Led";
$("atx-power-button").onclick = () => __clickButton("power", null, "Are you sure to click the power button?");
$("atx-power-button-long").onclick = () => __clickButton("power_long", 15000, "Are you sure to perform the long press of the power button?");
$("atx-reset-button").onclick = () => __clickButton("reset", null, "Are you sure to reboot the server?");
tools.setOnClick($("atx-power-button"), () => __clickButton("power", null, "Are you sure to click the power button?"));
tools.setOnClick($("atx-power-button-long"), () => __clickButton("power_long", 15000, "Are you sure to perform the long press of the power button?"));
tools.setOnClick($("atx-reset-button"), () => __clickButton("reset", null, "Are you sure to reboot the server?"));
};
/********************************************************************************/

4
kvmd/web/js/hid.js
View File

@ -43,13 +43,13 @@ function Hid() {
if (window.navigator.clipboard && window.navigator.clipboard.readText) {
__chars_to_codes = __buildCharsToCodes();
$("pak-button").onclick = __pasteAsKeys;
tools.setOnClick($("pak-button"), __pasteAsKeys);
} else {
$("pak-button").title = $("pak-led").title = "Your browser does not support the Clipboard API.\nUse Google Chrome or Chromium.";
}
Array.prototype.forEach.call(document.querySelectorAll("[data-shortcut]"), function(el_shortcut) {
el_shortcut.onclick = () => __emitShortcut(el_shortcut.getAttribute("data-shortcut").split(" "));
tools.setOnClick(el_shortcut, () => __emitShortcut(el_shortcut.getAttribute("data-shortcut").split(" ")));
});
};

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

@ -29,19 +29,17 @@ function Keyboard() {
$("stream-window").onblur = __updateLeds;
Array.prototype.forEach.call($$("key"), function(el_key) {
el_key.onmousedown = () => __clickHandler(el_key, true);
el_key.onmouseup = () => __clickHandler(el_key, false);
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);
}
};
el_key.ontouchstart = (event) => __touchHandler(event, el_key, true);
el_key.ontouchend = (event) => __touchHandler(event, el_key, false);
});
Array.prototype.forEach.call($$("modifier"), function(el_key) {
el_key.onmousedown = () => __toggleModifierHandler(el_key);
tools.setOnDown(el_key, () => __toggleModifierHandler(el_key));
});
if (__mac_cmd_hook) {
@ -68,10 +66,7 @@ function Keyboard() {
};
self.fireEvent = function(code, state) {
$("keyboard-window").dispatchEvent(new KeyboardEvent(
(state ? "keydown" : "keyup"),
{code: code}
));
__keyboardHandler({code: code}, state);
};
var __updateLeds = function() {
@ -85,7 +80,9 @@ function Keyboard() {
};
var __keyboardHandler = function(event, state) {
if (event.preventDefault) {
event.preventDefault();
}
var el_key = document.querySelector("[data-key='" + event.code + "']");
if (el_key && !event.repeat) {
__commonHandler(el_key, state, "pressed");
@ -104,12 +101,6 @@ function Keyboard() {
}
};
var __touchHandler = function(event, el_key, state) {
event.stopPropagation();
event.preventDefault();
__clickHandler(el_key, state);
};
var __clickHandler = function(el_key, state) {
__commonHandler(el_key, state, "pressed");
__unholdModifiers();

7
kvmd/web/js/mouse.js
View File

@ -24,10 +24,8 @@ function Mouse() {
$("stream-box").ontouchstart = (event) => __touchMoveHandler(event);
Array.prototype.forEach.call(document.querySelectorAll("[data-mouse-button]"), function(el_button) {
var button = el_button.getAttribute("data-mouse-button");
el_button.onmousedown = () => __sendButton(button, true);
el_button.onmouseup = () => __sendButton(button, false);
el_button.ontouchstart = () => __sendButton(button, true);
el_button.ontouchend = () => __sendButton(button, false);
tools.setOnDown(el_button, () => __sendButton(button, true));
tools.setOnUp(el_button, () => __sendButton(button, false));
});
setInterval(__sendMove, 100);
@ -74,7 +72,6 @@ function Mouse() {
};
var __touchMoveHandler = function(event) {
event.stopPropagation();
event.preventDefault();
if (event.touches[0].target && event.touches[0].target.getBoundingClientRect) {
var rect = event.touches[0].target.getBoundingClientRect();

10
kvmd/web/js/msd.js
View File

@ -11,13 +11,13 @@ function Msd() {
$("msd-led").title = "Unknown state";
$("msd-select-new-image-file").onchange = __selectNewImageFile;
$("msd-select-new-image-button").onclick = () => $("msd-select-new-image-file").click();
tools.setOnClick($("msd-select-new-image-button"), () => $("msd-select-new-image-file").click());
$("msd-upload-new-image-button").onclick = __clickUploadNewImageButton;
$("msd-abort-uploading-button").onclick = __clickAbortUploadingButton;
tools.setOnClick($("msd-upload-new-image-button"), __clickUploadNewImageButton);
tools.setOnClick($("msd-abort-uploading-button"), __clickAbortUploadingButton);
$("msd-switch-to-kvm-button").onclick = () => __clickSwitchButton("kvm");
$("msd-switch-to-server-button").onclick = () => __clickSwitchButton("server");
tools.setOnClick($("msd-switch-to-kvm-button"), () => __clickSwitchButton("kvm"));
tools.setOnClick($("msd-switch-to-server-button"), () => __clickSwitchButton("server"));
};
/********************************************************************************/

2
kvmd/web/js/stream.js
View File

@ -14,7 +14,7 @@ function Stream() {
var __init__ = function() {
$("stream-led").title = "Stream inactive";
$("stream-reset-button").onclick = __clickResetButton;
tools.setOnClick($("stream-reset-button"), __clickResetButton);
$("stream-resolution-select").onchange = __changeResolution;
$("stream-size-slider").oninput = __resize;
$("stream-size-slider").onchange = __resize;

19
kvmd/web/js/tools.js
View File

@ -10,6 +10,25 @@ var tools = new function() {
return http;
};
this.setOnClick = function(el, callback) {
el.onclick = el.ontouchend = function(event) {
event.preventDefault();
callback();
};
};
this.setOnDown = function(el, callback) {
el.onmousedown = el.ontouchstart = function(event) {
event.preventDefault();
callback();
};
};
this.setOnUp = function(el, callback) {
el.onmouseup = el.ontouchend = function(event) {
event.preventDefault();
callback();
};
};
this.debug = function(...args) {
if (__debug) {
console.log("LOG/DEBUG", ...args); // eslint-disable-line no-console

32
kvmd/web/js/ui.js
View File

@ -15,7 +15,7 @@ function Ui() {
});
Array.prototype.forEach.call($$("ctl-item"), function(el_item) {
el_item.onclick = () => __toggleMenu(el_item);
tools.setOnClick(el_item, () => __toggleMenu(el_item));
__ctl_items.push(el_item);
});
@ -25,22 +25,22 @@ function Ui() {
var el_button = el_window.querySelector(".window-header .window-button-close");
if (el_button) {
el_button.onclick = function() {
tools.setOnClick(el_button, function() {
el_window.style.visibility = "hidden";
__raiseLastWindow();
};
});
}
});
window.onmouseup = __globalMouseButtonHandler;
// window.oncontextmenu = __globalMouseButtonHandler;
window.ontouchend = __globalMouseButtonHandler;
window.addEventListener("resize", () => __organizeWindowsOnResize(false));
window.addEventListener("orientationchange", () => __organizeWindowsOnResize(true));
$("show-about-button").onclick = () => self.showWindow($("about-window"));
$("show-keyboard-button").onclick = () => self.showWindow($("keyboard-window"));
$("show-stream-button").onclick = () => self.showWindow($("stream-window"));
tools.setOnClick($("show-about-button"), () => self.showWindow($("about-window")));
tools.setOnClick($("show-keyboard-button"), () => self.showWindow($("keyboard-window")));
tools.setOnClick($("show-stream-button"), () => self.showWindow($("stream-window")));
self.showWindow($("stream-window"));
};
@ -90,15 +90,13 @@ function Ui() {
if (cancel) {
var el_cancel_button = document.createElement("button");
el_cancel_button.innerHTML = "Cancel";
el_cancel_button.onclick = () => close(false);
el_cancel_button.ontouchstart = function() {};
tools.setOnClick(el_cancel_button, () => close(false));
el_buttons.appendChild(el_cancel_button);
}
if (ok) {
var el_ok_button = document.createElement("button");
el_ok_button.innerHTML = "OK";
el_ok_button.onclick = () => close(true);
el_cancel_button.ontouchstart = function() {};
tools.setOnClick(el_ok_button, () => close(true));
el_buttons.appendChild(el_ok_button);
}
if (ok && cancel) {
@ -165,6 +163,7 @@ function Ui() {
__ctl_items.forEach(function(el_item) {
var el_menu = el_item.parentElement.querySelector(".ctl-dropdown-content");
if (el_item === el_a && window.getComputedStyle(el_menu, null).visibility === "hidden") {
el_item.focus();
el_item.classList.add("ctl-item-selected");
el_menu.style.visibility = "visible";
all_hidden &= false;
@ -283,7 +282,7 @@ function Ui() {
}
el_window.setAttribute("data-centered", "");
el_window.onclick = () => __raiseWindow(el_window);
tools.setOnClick(el_window, () => __raiseWindow(el_window));
el_grab.onmousedown = startMoving;
el_grab.ontouchstart = startMoving;
@ -303,11 +302,9 @@ function Ui() {
};
var __raiseWindow = function(el_window) {
if (el_window.className === "modal") {
el_window.querySelector(".modal-window").focus();
} else {
el_window.focus();
}
var el_to_focus = (el_window.className === "modal" ? el_window.querySelector(".modal-window") : el_window);
if (document.activeElement !== el_to_focus) {
el_to_focus.focus();
tools.debug("Focused window:", el_window);
if (el_window.className !== "modal" && parseInt(el_window.style.zIndex) !== __top_z_index) {
var z_index = __top_z_index + 1;
@ -315,6 +312,7 @@ function Ui() {
__top_z_index = z_index;
tools.debug("Raised window:", el_window);
}
}
};
__init__();