diff options
Diffstat (limited to 'kvmd')
-rw-r--r-- | kvmd/web/css/main.css | 14 | ||||
-rw-r--r-- | kvmd/web/js/atx.js | 6 | ||||
-rw-r--r-- | kvmd/web/js/hid.js | 4 | ||||
-rw-r--r-- | kvmd/web/js/keyboard.js | 23 | ||||
-rw-r--r-- | kvmd/web/js/mouse.js | 7 | ||||
-rw-r--r-- | kvmd/web/js/msd.js | 10 | ||||
-rw-r--r-- | kvmd/web/js/stream.js | 2 | ||||
-rw-r--r-- | kvmd/web/js/tools.js | 19 | ||||
-rw-r--r-- | kvmd/web/js/ui.js | 44 |
9 files changed, 65 insertions, 64 deletions
diff --git a/kvmd/web/css/main.css b/kvmd/web/css/main.css index d2d434d7..0dd07fc2 100644 --- a/kvmd/web/css/main.css +++ b/kvmd/web/css/main.css @@ -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; -} diff --git a/kvmd/web/js/atx.js b/kvmd/web/js/atx.js index 6f1d2b19..f4b4811a 100644 --- a/kvmd/web/js/atx.js +++ b/kvmd/web/js/atx.js @@ -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?")); }; /********************************************************************************/ diff --git a/kvmd/web/js/hid.js b/kvmd/web/js/hid.js index fb8438a5..520c4552 100644 --- a/kvmd/web/js/hid.js +++ b/kvmd/web/js/hid.js @@ -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(" "))); }); }; diff --git a/kvmd/web/js/keyboard.js b/kvmd/web/js/keyboard.js index b29f1764..b8c4797b 100644 --- a/kvmd/web/js/keyboard.js +++ b/kvmd/web/js/keyboard.js @@ -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) { - event.preventDefault(); + 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(); diff --git a/kvmd/web/js/mouse.js b/kvmd/web/js/mouse.js index 30897233..e4038436 100644 --- a/kvmd/web/js/mouse.js +++ b/kvmd/web/js/mouse.js @@ -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(); diff --git a/kvmd/web/js/msd.js b/kvmd/web/js/msd.js index f8225406..f90e4b05 100644 --- a/kvmd/web/js/msd.js +++ b/kvmd/web/js/msd.js @@ -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")); }; /********************************************************************************/ diff --git a/kvmd/web/js/stream.js b/kvmd/web/js/stream.js index 43b720df..577c6026 100644 --- a/kvmd/web/js/stream.js +++ b/kvmd/web/js/stream.js @@ -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; diff --git a/kvmd/web/js/tools.js b/kvmd/web/js/tools.js index 67149085..76f27b7d 100644 --- a/kvmd/web/js/tools.js +++ b/kvmd/web/js/tools.js @@ -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 diff --git a/kvmd/web/js/ui.js b/kvmd/web/js/ui.js index 6b519bdc..d04184c1 100644 --- a/kvmd/web/js/ui.js +++ b/kvmd/web/js/ui.js @@ -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,17 +302,16 @@ function Ui() { }; var __raiseWindow = function(el_window) { - if (el_window.className === "modal") { - el_window.querySelector(".modal-window").focus(); - } else { - el_window.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; - el_window.style.zIndex = z_index; - __top_z_index = z_index; - tools.debug("Raised window:", el_window); + 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; + el_window.style.zIndex = z_index; + __top_z_index = z_index; + tools.debug("Raised window:", el_window); + } } }; |