imroved pak

This commit is contained in:
Devaev Maxim 2018-10-05 12:55:55 +03:00
parent 54cc8393a7
commit bbaf99c1b4
3 changed files with 35 additions and 14 deletions

21
web/css/shortcuts.css Normal file
View File

@ -0,0 +1,21 @@
textarea#pak-text {
display: block;
resize: none;
width: 100%;
height: 40px;
color: var(--fg-color-dark);
background-color: var(--bg-color-light);
border: none;
outline: 0 !important;
-webkit-appearance:none;
}
textarea#pak-text::-moz-placeholder {
line-height: 40px;
text-align: center;
}
textarea#pak-text::-webkit-input-placeholder {
line-height: 40px;
text-align: center;
}

View File

@ -15,6 +15,7 @@
<link rel="stylesheet" href="css/modals.css"> <link rel="stylesheet" href="css/modals.css">
<link rel="stylesheet" href="css/leds.css"> <link rel="stylesheet" href="css/leds.css">
<link rel="stylesheet" href="css/stream.css"> <link rel="stylesheet" href="css/stream.css">
<link rel="stylesheet" href="css/shortcuts.css">
<link rel="stylesheet" href="css/msd.css"> <link rel="stylesheet" href="css/msd.css">
<link rel="stylesheet" href="css/keyboard.css"> <link rel="stylesheet" href="css/keyboard.css">
<link rel="stylesheet" href="css/about.css"> <link rel="stylesheet" href="css/about.css">
@ -222,7 +223,9 @@
</a> </a>
<div class="ctl-dropdown-content"> <div class="ctl-dropdown-content">
<div class="ctl-dropdown-content-buttons"> <div class="ctl-dropdown-content-buttons">
<button disabled id="pak-button">&bull; Paste-as-Keys <sup><i>ascii-only</i></sup></button> <textarea data-dont-hide-menu id="pak-text" placeholder="Paste your text here"></textarea>
<hr>
<button disabled id="pak-button">&bull; &uarr; Paste-as-Keys <sup><i>ascii-only</i></sup></button>
<hr> <hr>
<div class="buttons-row"> <div class="buttons-row">
<button data-shortcut="CapsLock" class="row50">&bull; CapsLock</button> <button data-shortcut="CapsLock" class="row50">&bull; CapsLock</button>

View File

@ -41,12 +41,8 @@ function Hid() {
window.onpagehide = __releaseAll; window.onpagehide = __releaseAll;
window.onblur = __releaseAll; window.onblur = __releaseAll;
if (window.navigator.clipboard && window.navigator.clipboard.readText) { __chars_to_codes = __buildCharsToCodes();
__chars_to_codes = __buildCharsToCodes(); tools.setOnClick($("pak-button"), __pasteAsKeys);
tools.setOnClick($("pak-button"), __pasteAsKeysFromClipboard);
} 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) { Array.prototype.forEach.call(document.querySelectorAll("[data-shortcut]"), function(el_shortcut) {
tools.setOnClick(el_shortcut, () => __emitShortcut(el_shortcut.getAttribute("data-shortcut").split(" "))); tools.setOnClick(el_shortcut, () => __emitShortcut(el_shortcut.getAttribute("data-shortcut").split(" ")));
@ -59,7 +55,7 @@ function Hid() {
__ws = ws; __ws = ws;
__keyboard.setSocket(ws); __keyboard.setSocket(ws);
__mouse.setSocket(ws); __mouse.setSocket(ws);
$("pak-button").disabled = !(window.navigator.clipboard && window.navigator.clipboard.readText && ws); $("pak-text").disabled = $("pak-button").disabled = !ws;
}; };
var __releaseAll = function() { var __releaseAll = function() {
@ -131,12 +127,8 @@ function Hid() {
return chars_to_codes; return chars_to_codes;
}; };
var __pasteAsKeysFromClipboard = function() { var __pasteAsKeys = function() {
window.navigator.clipboard.readText().then(__pasteAsKeys); var text = $("pak-text").value.replace(/[^\x00-\x7F]/g, ""); // eslint-disable-line no-control-regex
};
var __pasteAsKeys = function(text) {
text = text.replace(/[^\x00-\x7F]/g, ""); // eslint-disable-line no-control-regex
if (text) { if (text) {
var clipboard_codes = []; var clipboard_codes = [];
var codes_count = 0; var codes_count = 0;
@ -157,6 +149,7 @@ function Hid() {
ui.confirm(confirm_msg).then(function(ok) { ui.confirm(confirm_msg).then(function(ok) {
if (ok) { if (ok) {
$("pak-text").disabled = true;
$("pak-button").disabled = true; $("pak-button").disabled = true;
$("pak-led").className = "led-pak-typing"; $("pak-led").className = "led-pak-typing";
$("pak-led").title = "Autotyping..."; $("pak-led").title = "Autotyping...";
@ -170,6 +163,8 @@ function Hid() {
if (index < clipboard_codes.length && __ws) { if (index < clipboard_codes.length && __ws) {
iterate(); iterate();
} else { } else {
$("pak-text").value = "";
$("pak-text").disabled = false;
$("pak-button").disabled = false; $("pak-button").disabled = false;
$("pak-led").className = "led-off"; $("pak-led").className = "led-off";
$("pak-led").title = ""; $("pak-led").title = "";
@ -177,6 +172,8 @@ function Hid() {
}); });
}; };
iterate(); iterate();
} else {
$("pak-text").value = "";
} }
}); });
} }