summaryrefslogtreecommitdiff
path: root/src/jsMain/kotlin/moe/nea89/website
diff options
context:
space:
mode:
Diffstat (limited to 'src/jsMain/kotlin/moe/nea89/website')
-rw-r--r--src/jsMain/kotlin/moe/nea89/website/KConsole.kt60
-rw-r--r--src/jsMain/kotlin/moe/nea89/website/Styles.kt10
2 files changed, 56 insertions, 14 deletions
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