import com.raquo.laminar.api.L._
import org.scalajs.dom
def Counter(label: String, initialStep: Int): HtmlElement = {
val allowedSteps = List(1, 2, 3, 5, 10)
val stepVar = Var(initialStep)
val diffBus = new EventBus[Int]
val $count: Signal[Int] = diffBus.events.foldLeft(initial = 0)(_ + _)
div(
p(
"Step: ",
select(
value <-- stepVar.signal.map(_.toString),
inContext { thisNode =>
onChange.mapTo(thisNode.ref.value.toInt) --> stepVar
},
allowedSteps.map { step =>
option(value := step.toString, step)
}
)
),
p(
label + ": ",
b(child.text <-- $count),
" ",
button(
"–",
onClick.mapTo(-1 * stepVar.now()) --> diffBus
),
button(
"+",
inContext(_.events(onClick).sample(stepVar.signal) --> diffBus)
)
)
)
}
val app = div(
h1("Let's count!"),
Counter("Sheep", initialStep = 3)
)
val containerNode = dom.document.querySelector("#mdoc-html-run0")
render(containerNode, app)