Add floating soft keyboard input

html_orig/jssrc/soft_keyboard.js

@@ -0,0 +1,36 @@
+$.ready(() => {
+  const input = qs('#softkb-input')
+  let keyboardOpen = false
+
+  let updateInputPosition = function () {
+    if (!keyboardOpen) return
+
+    let [x, y] = Screen.gridToScreen(Screen.cursor.x, Screen.cursor.y)
+    input.style.transform = `translate(${x}px, ${y}px)`
+  }
+
+  input.addEventListener('focus', () => {
+    keyboardOpen = true
+    updateInputPosition()
+  })
+  input.addEventListener('blur', () => (keyboardOpen = false))
+  Screen.on('cursor-moved', updateInputPosition)
+
+  window.kbOpen = function openSoftKeyboard (open) {
+    keyboardOpen = open
+    updateInputPosition()
+    if (open) input.focus()
+    else input.blur()
+  }
+
+  input.addEventListener('keydown', e => {
+    if (e.key === 'Backspace') {
+      e.preventDefault()
+      e.stopPropagation()
+      Input.sendString('\b')
+    }
+  })
+  input.addEventListener('keypress', e => {
+    e.stopPropagation()
+  })
+})

html_orig/packjs.sh

@@ -11,4 +11,5 @@ cat jssrc/chibi.js \
 	jssrc/lang.js \
 	jssrc/wifi.js \
 	jssrc/term_* \
-	jssrc/term.js | npm run --silent minify > js/app.js
+	jssrc/term.js \
+  jssrc/soft_keyboard.js | npm run --silent minify > js/app.js

html_orig/pages/term.php

@@ -41,7 +41,9 @@
 <h1><!-- Screen title gets loaded here by JS --></h1>
 
 <div id="term-wrap">
-	<div id="screen" class="theme-%theme%"></div>
+	<div id="screen" class="theme-%theme%">
+		<textarea id="softkb-input" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>
+	</div>
 
 	<div id="action-buttons">
 		<button data-n="1"></button><!--
@@ -52,8 +54,6 @@
 	</div>
 </div>
 
-<textarea id="softkb-input" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>
-
 <nav id="term-nav">
 	<a href="#" onclick="kbOpen(true);return false" class="mq-tablet-max"><i class="icn-keyboard"></i><span><?= tr('term_nav.keybd') ?></span></a><!--
 	--><a href="#" onclick="TermUpl.open();return false"><i class="icn-download"></i><span><?= tr('term_nav.upload') ?></span></a><!--

html_orig/sass/pages/_term.scss

@@ -21,6 +21,7 @@ body.term {
 	padding: 6px;
 	display: inline-block;
 	border: 2px solid #3983CD;
+	position: relative;
 
 	font-size: 20px; // some font heights cause visual glitches with some font renderers. This should be configurable.
 	font-family: $screen-stack;
@@ -28,6 +29,20 @@ body.term {
 	canvas.selectable {
 		cursor: text;
 	}
+
+	// Dummy input field used to open soft keyboard
+	#softkb-input {
+		position: absolute;
+		// compensate for padding
+		top: 6px;
+		left: 6px;
+		width: 1em;
+		height: 1em;
+		background: none;
+		border: none;
+		resize: none;
+		// visible for debugging. do opacity 0 later on
+	}
 }
 
 #action-buttons {
@@ -99,12 +114,6 @@ body.term {
 	text-align: center;
 }
 
-// Dummy input field used to open android keyboard
-#softkb-input {
-	position: absolute;
-	top: -9999px;
-}
-
 #fu_modal {
 	align-items: flex-start;
 }