From 484bc7c89948d4c52a1f04fa97a06016fa0b5b4a Mon Sep 17 00:00:00 2001
From: nea <romangraef@gmail.com>
Date: Sun, 28 Aug 2022 16:08:50 +0200
Subject: add mobile support

---
 src/jsMain/kotlin/moe/nea89/website/KConsole.kt | 60 ++++++++++++++++++++-----
 src/jsMain/kotlin/moe/nea89/website/Styles.kt   | 10 +++--
 2 files changed, 56 insertions(+), 14 deletions(-)

(limited to 'src/jsMain')

diff --git a/src/jsMain/kotlin/moe/nea89/website/KConsole.kt b/src/jsMain/kotlin/moe/nea89/website/KConsole.kt
index 4a51219..3c5fad1 100644
--- a/src/jsMain/kotlin/moe/nea89/website/KConsole.kt
+++ b/src/jsMain/kotlin/moe/nea89/website/KConsole.kt
@@ -2,16 +2,20 @@ package moe.nea89.website
 
 import kotlinx.browser.document
 import kotlinx.dom.addClass
+import kotlinx.html.InputType
 import kotlinx.html.dom.append
 import kotlinx.html.dom.create
-import kotlinx.html.input
+import kotlinx.html.js.input
 import kotlinx.html.js.p
 import kotlinx.html.js.pre
 import kotlinx.html.js.span
 import org.w3c.dom.HTMLElement
+import org.w3c.dom.HTMLInputElement
 import org.w3c.dom.HTMLParagraphElement
 import org.w3c.dom.HTMLPreElement
+import org.w3c.dom.events.EventType
 import org.w3c.dom.events.KeyboardEvent
+import org.w3c.dom.events.addEventHandler
 import styled.injectGlobal
 import kotlin.collections.set
 
@@ -24,8 +28,10 @@ class KConsole(
 ) {
 
 
+    private lateinit var uninjectKeyHandler: () -> Unit
     val fileAccessor = fileSystem?.let { FileAccessor(it) }
     var PS1: KConsole.() -> String = { "$" }
+    private lateinit var mobileInput: HTMLInputElement
 
     companion object {
 
@@ -42,10 +48,8 @@ class KConsole(
             prompt.addClass(Styles.promptClass)
             element.classList.add(Styles.consoleClass)
             val console = KConsole(element, text, prompt, fileSystem)
-            val inp = element.append.input()
-            inp.hidden = true
-            inp.focus()
-            document.body!!.onkeydown = console::keydown
+            console.uninjectKeyHandler =
+                document.body!!.addEventHandler(EventType("keydown"), console::keydown)
             console.rerender()
             return console
         }
@@ -59,6 +63,23 @@ class KConsole(
     var state = ConsoleState.SHELLPROMPT
 
     var input: String = ""
+    var justHandledInput = false
+    fun openMobileKeyboardOnTap() {
+        uninjectKeyHandler()
+        mobileInput = this.root.append.input(InputType.text)
+        mobileInput.classList.add(Styles.mobileFocusInput)
+        mobileInput.onkeyup = this::keydown
+        mobileInput.oninput = {
+            input += it.data
+            mobileInput.value = ""
+            justHandledInput = true
+            rerender()
+            scrollDown()
+        }
+        root.onclick = {
+            mobileInput.focus()
+        }
+    }
 
     fun addLines(newLines: List<String>) {
         newLines.forEach { addLine(it) }
@@ -149,16 +170,33 @@ class KConsole(
         return parts
     }
 
+    fun handleSubmit() {
+        val toExecute = input
+        addLine("${PS1.invoke(this)} $toExecute")
+        input = ""
+        executeCommand(toExecute)
+    }
+
     fun keydown(event: KeyboardEvent) {
         if (event.altKey || event.ctrlKey || event.metaKey) return
-        if (event.isComposing || event.keyCode == 229) return
+        if (event.isComposing) return
         if (state != ConsoleState.SHELLPROMPT) return
-        when (event.key) {
+        if (justHandledInput) {
+            justHandledInput = false
+            return
+        }
+        val toHandle = if (event.keyCode == 229) {
+            val x = (mobileInput.selectionStart ?: 1) - 1
+            val v = mobileInput.value
+            addLine("X: $x, V: $v")
+            if (x < 0 || x >= v.length)
+                return
+            mobileInput.value = ""
+            v[x]
+        } else event.key
+        when (toHandle) {
             "Enter" -> {
-                val toExecute = input
-                addLine("${PS1.invoke(this)} $toExecute")
-                input = ""
-                executeCommand(toExecute)
+                handleSubmit()
             }
 
             "Backspace" -> input = input.substring(0, input.length - 1)
diff --git a/src/jsMain/kotlin/moe/nea89/website/Styles.kt b/src/jsMain/kotlin/moe/nea89/website/Styles.kt
index e1470d7..62e4f8b 100644
--- a/src/jsMain/kotlin/moe/nea89/website/Styles.kt
+++ b/src/jsMain/kotlin/moe/nea89/website/Styles.kt
@@ -10,6 +10,7 @@ import styled.animation
 
 object Styles : StyleSheet("DefaultConsoleStyles") {
     val consoleClass = "Console"
+    val mobileFocusInput = "mobileFocusInput"
     val promptClass = "prompt"
 
     val bgColor = CustomColor.BLACK.color
@@ -23,6 +24,11 @@ object Styles : StyleSheet("DefaultConsoleStyles") {
             boxSizing = BoxSizing.borderBox
         }
 
+        ".$mobileFocusInput" {
+            width = 0.px
+            height = 0.px
+            opacity = 0
+        }
         ".$promptClass" {
             width = LinearDimension.fitContent
             borderRightColor = fgColor
@@ -47,9 +53,7 @@ object Styles : StyleSheet("DefaultConsoleStyles") {
             fontFamily = monospacedFont
             width = 100.pct
             height = 100.pct
-            pre {
-                fontFamily = monospacedFont
-            }
+            fontFamily = monospacedFont
         }
     }
 }
\ No newline at end of file
-- 
cgit