Skip to content

Commit

Permalink
Add plain html input renderer
Browse files Browse the repository at this point in the history
  • Loading branch information
@altavir
altavir committed Dec 2, 2023
1 parent 7561dda commit c877fcb
Show file tree
Hide file tree
Showing 2 changed files with 42 additions and 30 deletions.
1 change: 1 addition & 0 deletions visionforge-core/src/jsMain/kotlin/space/kscience/visionforge/JsVisionClient.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -264,6 +264,7 @@ public class JsVisionClient : AbstractPlugin(), VisionClient {

override fun content(target: String): Map<Name, Any> = if (target == ElementVisionRenderer.TYPE) {
listOf(
htmlVisionRenderer,
inputVisionRenderer,
checkboxVisionRenderer,
numberVisionRenderer,
Expand Down
71 changes: 41 additions & 30 deletions visionforge-core/src/jsMain/kotlin/space/kscience/visionforge/inputRenderers.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ package space.kscience.visionforge

import kotlinx.browser.document
import kotlinx.html.InputType
import kotlinx.html.div
import kotlinx.html.js.input
import org.w3c.dom.HTMLElement
import org.w3c.dom.HTMLFormElement
Expand Down Expand Up @@ -38,26 +39,36 @@ private fun HTMLInputElement.subscribeToInput(inputVision: VisionOfHtmlInput) {
}
}

internal val htmlVisionRenderer: ElementVisionRenderer =
ElementVisionRenderer<VisionOfPlainHtml> { _, vision, _ ->
div {}.also { div ->
div.subscribeToVision(vision)
vision.useProperty(VisionOfPlainHtml::content) {
div.textContent = it
}
}
}

internal val inputVisionRenderer: ElementVisionRenderer =
ElementVisionRenderer<VisionOfHtmlInput>(acceptRating = ElementVisionRenderer.DEFAULT_RATING - 1) { _, vision, _ ->
input {
type = InputType.text
}.apply {
}.also { htmlInputElement ->
val onEvent: (Event) -> Unit = {
vision.value = value.asValue()
vision.value = htmlInputElement.value.asValue()
}


when (vision.feedbackMode) {
InputFeedbackMode.ONCHANGE -> onchange = onEvent
InputFeedbackMode.ONCHANGE -> htmlInputElement.onchange = onEvent

InputFeedbackMode.ONINPUT -> oninput = onEvent
InputFeedbackMode.ONINPUT -> htmlInputElement.oninput = onEvent
InputFeedbackMode.NONE -> {}
}

subscribeToInput(vision)
htmlInputElement.subscribeToInput(vision)
vision.useProperty(VisionOfHtmlInput::value) {
this@apply.value = it?.string ?: ""
htmlInputElement.value = it?.string ?: ""
}
}
}
Expand All @@ -66,22 +77,22 @@ internal val checkboxVisionRenderer: ElementVisionRenderer =
ElementVisionRenderer<VisionOfCheckbox> { _, vision, _ ->
input {
type = InputType.checkBox
}.apply {
}.also { htmlInputElement ->
val onEvent: (Event) -> Unit = {
vision.checked = checked
vision.checked = htmlInputElement.checked
}


when (vision.feedbackMode) {
InputFeedbackMode.ONCHANGE -> onchange = onEvent
InputFeedbackMode.ONCHANGE -> htmlInputElement.onchange = onEvent

InputFeedbackMode.ONINPUT -> oninput = onEvent
InputFeedbackMode.ONINPUT -> htmlInputElement.oninput = onEvent
InputFeedbackMode.NONE -> {}
}

subscribeToInput(vision)
htmlInputElement.subscribeToInput(vision)
vision.useProperty(VisionOfCheckbox::checked) {
this@apply.checked = it ?: false
htmlInputElement.checked = it ?: false
}
}
}
Expand All @@ -90,22 +101,22 @@ internal val textVisionRenderer: ElementVisionRenderer =
ElementVisionRenderer<VisionOfTextField> { _, vision, _ ->
input {
type = InputType.text
}.apply {
}.also { htmlInputElement ->
val onEvent: (Event) -> Unit = {
vision.text = value
vision.text = htmlInputElement.value
}


when (vision.feedbackMode) {
InputFeedbackMode.ONCHANGE -> onchange = onEvent
InputFeedbackMode.ONCHANGE -> htmlInputElement.onchange = onEvent

InputFeedbackMode.ONINPUT -> oninput = onEvent
InputFeedbackMode.ONINPUT -> htmlInputElement.oninput = onEvent
InputFeedbackMode.NONE -> {}
}

subscribeToInput(vision)
htmlInputElement.subscribeToInput(vision)
vision.useProperty(VisionOfTextField::text) {
this@apply.value = it ?: ""
htmlInputElement.value = it ?: ""
}
}
}
Expand All @@ -114,21 +125,21 @@ internal val numberVisionRenderer: ElementVisionRenderer =
ElementVisionRenderer<VisionOfNumberField> { _, vision, _ ->
input {
type = InputType.text
}.apply {
}.also { htmlInputElement ->

val onEvent: (Event) -> Unit = {
value.toDoubleOrNull()?.let { vision.number = it }
htmlInputElement.value.toDoubleOrNull()?.let { vision.number = it }
}

when (vision.feedbackMode) {
InputFeedbackMode.ONCHANGE -> onchange = onEvent
InputFeedbackMode.ONCHANGE -> htmlInputElement.onchange = onEvent

InputFeedbackMode.ONINPUT -> oninput = onEvent
InputFeedbackMode.ONINPUT -> htmlInputElement.oninput = onEvent
InputFeedbackMode.NONE -> {}
}
subscribeToInput(vision)
htmlInputElement.subscribeToInput(vision)
vision.useProperty(VisionOfNumberField::value) {
this@apply.valueAsNumber = it?.double ?: 0.0
htmlInputElement.valueAsNumber = it?.double ?: 0.0
}
}
}
Expand All @@ -140,21 +151,21 @@ internal val rangeVisionRenderer: ElementVisionRenderer =
min = vision.min.toString()
max = vision.max.toString()
step = vision.step.toString()
}.apply {
}.also { htmlInputElement ->

val onEvent: (Event) -> Unit = {
value.toDoubleOrNull()?.let { vision.number = it }
htmlInputElement.value.toDoubleOrNull()?.let { vision.number = it }
}

when (vision.feedbackMode) {
InputFeedbackMode.ONCHANGE -> onchange = onEvent
InputFeedbackMode.ONCHANGE -> htmlInputElement.onchange = onEvent

InputFeedbackMode.ONINPUT -> oninput = onEvent
InputFeedbackMode.ONINPUT -> htmlInputElement.oninput = onEvent
InputFeedbackMode.NONE -> {}
}
subscribeToInput(vision)
htmlInputElement.subscribeToInput(vision)
vision.useProperty(VisionOfRangeField::value) {
this@apply.valueAsNumber = it?.double ?: 0.0
htmlInputElement.valueAsNumber = it?.double ?: 0.0
}
}
}
Expand Down

0 comments on commit c877fcb

Please sign in to comment.