forked from kscience/visionforge
Add plain html input renderer
This commit is contained in:
parent
7561ddad36
commit
c877fcbce3
@ -264,6 +264,7 @@ public class JsVisionClient : AbstractPlugin(), VisionClient {
|
|||||||
|
|
||||||
override fun content(target: String): Map<Name, Any> = if (target == ElementVisionRenderer.TYPE) {
|
override fun content(target: String): Map<Name, Any> = if (target == ElementVisionRenderer.TYPE) {
|
||||||
listOf(
|
listOf(
|
||||||
|
htmlVisionRenderer,
|
||||||
inputVisionRenderer,
|
inputVisionRenderer,
|
||||||
checkboxVisionRenderer,
|
checkboxVisionRenderer,
|
||||||
numberVisionRenderer,
|
numberVisionRenderer,
|
||||||
|
@ -2,6 +2,7 @@ package space.kscience.visionforge
|
|||||||
|
|
||||||
import kotlinx.browser.document
|
import kotlinx.browser.document
|
||||||
import kotlinx.html.InputType
|
import kotlinx.html.InputType
|
||||||
|
import kotlinx.html.div
|
||||||
import kotlinx.html.js.input
|
import kotlinx.html.js.input
|
||||||
import org.w3c.dom.HTMLElement
|
import org.w3c.dom.HTMLElement
|
||||||
import org.w3c.dom.HTMLFormElement
|
import org.w3c.dom.HTMLFormElement
|
||||||
@ -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 =
|
internal val inputVisionRenderer: ElementVisionRenderer =
|
||||||
ElementVisionRenderer<VisionOfHtmlInput>(acceptRating = ElementVisionRenderer.DEFAULT_RATING - 1) { _, vision, _ ->
|
ElementVisionRenderer<VisionOfHtmlInput>(acceptRating = ElementVisionRenderer.DEFAULT_RATING - 1) { _, vision, _ ->
|
||||||
input {
|
input {
|
||||||
type = InputType.text
|
type = InputType.text
|
||||||
}.apply {
|
}.also { htmlInputElement ->
|
||||||
val onEvent: (Event) -> Unit = {
|
val onEvent: (Event) -> Unit = {
|
||||||
vision.value = value.asValue()
|
vision.value = htmlInputElement.value.asValue()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
when (vision.feedbackMode) {
|
when (vision.feedbackMode) {
|
||||||
InputFeedbackMode.ONCHANGE -> onchange = onEvent
|
InputFeedbackMode.ONCHANGE -> htmlInputElement.onchange = onEvent
|
||||||
|
|
||||||
InputFeedbackMode.ONINPUT -> oninput = onEvent
|
InputFeedbackMode.ONINPUT -> htmlInputElement.oninput = onEvent
|
||||||
InputFeedbackMode.NONE -> {}
|
InputFeedbackMode.NONE -> {}
|
||||||
}
|
}
|
||||||
|
|
||||||
subscribeToInput(vision)
|
htmlInputElement.subscribeToInput(vision)
|
||||||
vision.useProperty(VisionOfHtmlInput::value) {
|
vision.useProperty(VisionOfHtmlInput::value) {
|
||||||
this@apply.value = it?.string ?: ""
|
htmlInputElement.value = it?.string ?: ""
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -66,22 +77,22 @@ internal val checkboxVisionRenderer: ElementVisionRenderer =
|
|||||||
ElementVisionRenderer<VisionOfCheckbox> { _, vision, _ ->
|
ElementVisionRenderer<VisionOfCheckbox> { _, vision, _ ->
|
||||||
input {
|
input {
|
||||||
type = InputType.checkBox
|
type = InputType.checkBox
|
||||||
}.apply {
|
}.also { htmlInputElement ->
|
||||||
val onEvent: (Event) -> Unit = {
|
val onEvent: (Event) -> Unit = {
|
||||||
vision.checked = checked
|
vision.checked = htmlInputElement.checked
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
when (vision.feedbackMode) {
|
when (vision.feedbackMode) {
|
||||||
InputFeedbackMode.ONCHANGE -> onchange = onEvent
|
InputFeedbackMode.ONCHANGE -> htmlInputElement.onchange = onEvent
|
||||||
|
|
||||||
InputFeedbackMode.ONINPUT -> oninput = onEvent
|
InputFeedbackMode.ONINPUT -> htmlInputElement.oninput = onEvent
|
||||||
InputFeedbackMode.NONE -> {}
|
InputFeedbackMode.NONE -> {}
|
||||||
}
|
}
|
||||||
|
|
||||||
subscribeToInput(vision)
|
htmlInputElement.subscribeToInput(vision)
|
||||||
vision.useProperty(VisionOfCheckbox::checked) {
|
vision.useProperty(VisionOfCheckbox::checked) {
|
||||||
this@apply.checked = it ?: false
|
htmlInputElement.checked = it ?: false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -90,22 +101,22 @@ internal val textVisionRenderer: ElementVisionRenderer =
|
|||||||
ElementVisionRenderer<VisionOfTextField> { _, vision, _ ->
|
ElementVisionRenderer<VisionOfTextField> { _, vision, _ ->
|
||||||
input {
|
input {
|
||||||
type = InputType.text
|
type = InputType.text
|
||||||
}.apply {
|
}.also { htmlInputElement ->
|
||||||
val onEvent: (Event) -> Unit = {
|
val onEvent: (Event) -> Unit = {
|
||||||
vision.text = value
|
vision.text = htmlInputElement.value
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
when (vision.feedbackMode) {
|
when (vision.feedbackMode) {
|
||||||
InputFeedbackMode.ONCHANGE -> onchange = onEvent
|
InputFeedbackMode.ONCHANGE -> htmlInputElement.onchange = onEvent
|
||||||
|
|
||||||
InputFeedbackMode.ONINPUT -> oninput = onEvent
|
InputFeedbackMode.ONINPUT -> htmlInputElement.oninput = onEvent
|
||||||
InputFeedbackMode.NONE -> {}
|
InputFeedbackMode.NONE -> {}
|
||||||
}
|
}
|
||||||
|
|
||||||
subscribeToInput(vision)
|
htmlInputElement.subscribeToInput(vision)
|
||||||
vision.useProperty(VisionOfTextField::text) {
|
vision.useProperty(VisionOfTextField::text) {
|
||||||
this@apply.value = it ?: ""
|
htmlInputElement.value = it ?: ""
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -114,21 +125,21 @@ internal val numberVisionRenderer: ElementVisionRenderer =
|
|||||||
ElementVisionRenderer<VisionOfNumberField> { _, vision, _ ->
|
ElementVisionRenderer<VisionOfNumberField> { _, vision, _ ->
|
||||||
input {
|
input {
|
||||||
type = InputType.text
|
type = InputType.text
|
||||||
}.apply {
|
}.also { htmlInputElement ->
|
||||||
|
|
||||||
val onEvent: (Event) -> Unit = {
|
val onEvent: (Event) -> Unit = {
|
||||||
value.toDoubleOrNull()?.let { vision.number = it }
|
htmlInputElement.value.toDoubleOrNull()?.let { vision.number = it }
|
||||||
}
|
}
|
||||||
|
|
||||||
when (vision.feedbackMode) {
|
when (vision.feedbackMode) {
|
||||||
InputFeedbackMode.ONCHANGE -> onchange = onEvent
|
InputFeedbackMode.ONCHANGE -> htmlInputElement.onchange = onEvent
|
||||||
|
|
||||||
InputFeedbackMode.ONINPUT -> oninput = onEvent
|
InputFeedbackMode.ONINPUT -> htmlInputElement.oninput = onEvent
|
||||||
InputFeedbackMode.NONE -> {}
|
InputFeedbackMode.NONE -> {}
|
||||||
}
|
}
|
||||||
subscribeToInput(vision)
|
htmlInputElement.subscribeToInput(vision)
|
||||||
vision.useProperty(VisionOfNumberField::value) {
|
vision.useProperty(VisionOfNumberField::value) {
|
||||||
this@apply.valueAsNumber = it?.double ?: 0.0
|
htmlInputElement.valueAsNumber = it?.double ?: 0.0
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -140,21 +151,21 @@ internal val rangeVisionRenderer: ElementVisionRenderer =
|
|||||||
min = vision.min.toString()
|
min = vision.min.toString()
|
||||||
max = vision.max.toString()
|
max = vision.max.toString()
|
||||||
step = vision.step.toString()
|
step = vision.step.toString()
|
||||||
}.apply {
|
}.also { htmlInputElement ->
|
||||||
|
|
||||||
val onEvent: (Event) -> Unit = {
|
val onEvent: (Event) -> Unit = {
|
||||||
value.toDoubleOrNull()?.let { vision.number = it }
|
htmlInputElement.value.toDoubleOrNull()?.let { vision.number = it }
|
||||||
}
|
}
|
||||||
|
|
||||||
when (vision.feedbackMode) {
|
when (vision.feedbackMode) {
|
||||||
InputFeedbackMode.ONCHANGE -> onchange = onEvent
|
InputFeedbackMode.ONCHANGE -> htmlInputElement.onchange = onEvent
|
||||||
|
|
||||||
InputFeedbackMode.ONINPUT -> oninput = onEvent
|
InputFeedbackMode.ONINPUT -> htmlInputElement.oninput = onEvent
|
||||||
InputFeedbackMode.NONE -> {}
|
InputFeedbackMode.NONE -> {}
|
||||||
}
|
}
|
||||||
subscribeToInput(vision)
|
htmlInputElement.subscribeToInput(vision)
|
||||||
vision.useProperty(VisionOfRangeField::value) {
|
vision.useProperty(VisionOfRangeField::value) {
|
||||||
this@apply.valueAsNumber = it?.double ?: 0.0
|
htmlInputElement.valueAsNumber = it?.double ?: 0.0
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user