add mobile support

3 files changed, 77 insertions, 15 deletions

diff --git a/example/src/main/kotlin/moe/nea89/website/test/index.kt b/example/src/main/kotlin/moe/nea89/website/test/index.kt
index 846b0db..a613a94 100644
--- a/example/src/main/kotlin/moe/nea89/website/test/index.kt
+++ b/example/src/main/kotlin/moe/nea89/website/test/index.kt
@@ -2,6 +2,7 @@ package moe.nea89.website.test
 
 import kotlinext.js.require
 import kotlinx.browser.document
+import kotlinx.browser.window
 import kotlinx.css.*
 import kotlinx.html.dom.append
 import kotlinx.html.js.div
@@ -30,6 +31,25 @@ fun main() {
     val root = document.body!!.append.div()
     val console = KConsole.createFor(root, fileSystem = defaultFileSystem)
     console.text.id = "myconsole"
+
+    val mobileNavigators = listOf(
+        "webos",
+        "android",
+        "iphone",
+        "ipad",
+        "ipod",
+        "blackberry",
+        "iemobile",
+        "opera mini"
+    )
+
+    fun isMobileBrowser() : Boolean{
+        return js("'ontouchstart' in document.documentElement") as Boolean
+    }
+
+    if (window.location.search == "mobile" || (window.location.search != "desktop" && isMobileBrowser())) {
+        console.openMobileKeyboardOnTap()
+    }
     console.fileAccessor!!.cd("home/nea")
     injectGlobal {
         body {
@@ -37,6 +57,7 @@ fun main() {
         }
         ".${Styles.consoleClass}" {
             margin(LinearDimension.auto)
+            fontFamily = "\"Comic Mono\", monospace"
             width = 50.vw
             height = 50.vh
             marginTop = 25.vh
@@ -44,7 +65,6 @@ fun main() {
             backgroundClip = BackgroundClip.contentBox
             overflowY = Overflow.scroll
         }
-
     }
     console.addLine("Starting up terminal.")
     console.PS1 = { "${this.fileAccessor?.currentDir?.joinToString("/", "/") ?: ""} >" }
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