imroved pak

3 files changed, 35 insertions, 14 deletions

diff --git a/web/css/shortcuts.css b/web/css/shortcuts.css
new file mode 100644
index 00000000..a96716ab
--- /dev/null
+++ b/web/css/shortcuts.css
@@ -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;
+}
diff --git a/web/index.html b/web/index.html
index 5bcc5b27..1c16bc91 100644
--- a/web/index.html
+++ b/web/index.html
@@ -15,6 +15,7 @@
 	<link rel="stylesheet" href="css/modals.css">
 	<link rel="stylesheet" href="css/leds.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/keyboard.css">
 	<link rel="stylesheet" href="css/about.css">
@@ -222,7 +223,9 @@
 				</a>
 				<div class="ctl-dropdown-content">
 					<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>
 						<div class="buttons-row">
 							<button data-shortcut="CapsLock" class="row50">&bull; CapsLock</button>
diff --git a/web/js/hid.js b/web/js/hid.js
index ca535157..24f5bfbc 100644
--- a/web/js/hid.js
+++ b/web/js/hid.js
@@ -41,12 +41,8 @@ function Hid() {
 		window.onpagehide = __releaseAll;
 		window.onblur = __releaseAll;
 
-		if (window.navigator.clipboard && window.navigator.clipboard.readText) {
-			__chars_to_codes = __buildCharsToCodes();
-			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.";
-		}
+		__chars_to_codes = __buildCharsToCodes();
+		tools.setOnClick($("pak-button"), __pasteAsKeys);
 
 		Array.prototype.forEach.call(document.querySelectorAll("[data-shortcut]"), function(el_shortcut) {
 			tools.setOnClick(el_shortcut, () => __emitShortcut(el_shortcut.getAttribute("data-shortcut").split(" ")));
@@ -59,7 +55,7 @@ function Hid() {
 		__ws = ws;
 		__keyboard.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() {
@@ -131,12 +127,8 @@ function Hid() {
 		return chars_to_codes;
 	};
 
-	var __pasteAsKeysFromClipboard = function() {
-		window.navigator.clipboard.readText().then(__pasteAsKeys);
-	};
-
-	var __pasteAsKeys = function(text) {
-		text = text.replace(/[^\x00-\x7F]/g, "");  // eslint-disable-line no-control-regex
+	var __pasteAsKeys = function() {
+		var text = $("pak-text").value.replace(/[^\x00-\x7F]/g, "");  // eslint-disable-line no-control-regex
 		if (text) {
 			var clipboard_codes = [];
 			var codes_count = 0;
@@ -157,6 +149,7 @@ function Hid() {
 
 			ui.confirm(confirm_msg).then(function(ok) {
 				if (ok) {
+					$("pak-text").disabled = true;
 					$("pak-button").disabled = true;
 					$("pak-led").className = "led-pak-typing";
 					$("pak-led").title = "Autotyping...";
@@ -170,6 +163,8 @@ function Hid() {
 							if (index < clipboard_codes.length && __ws) {
 								iterate();
 							} else {
+								$("pak-text").value = "";
+								$("pak-text").disabled = false;
 								$("pak-button").disabled = false;
 								$("pak-led").className = "led-off";
 								$("pak-led").title = "";
@@ -177,6 +172,8 @@ function Hid() {
 						});
 					};
 					iterate();
+				} else {
+					$("pak-text").value = "";
 				}
 			});
 		}