Bonsai.Html.Events

preventDefaultStopPropagation :: Options

Event options: prevent default, stop propagation

onClick :: forall msg. msg -> Property msg

Event listener property for the click event.

onCheckedChange :: forall msg. (Boolean -> msg) -> Property msg

Suboptimal helper for boolean (checkbox) input

onInput :: forall msg. (String -> msg) -> Property msg

Suboptimal helper for the input event.

onKeyEnter :: forall msg. (String -> msg) -> Property msg

Emit commands on enter key presses

onKeyEnterEscape :: forall msg. (String -> msg) -> (String -> msg) -> Property msg

Emit commands on enter or escape key presses

onSubmit :: forall msg. msg -> Property msg

Emit a command on form submit.

newtype Property msg

When using HTML and JS, there are two ways to specify parts of a DOM node.

1. Attributes — You can set things in HTML itself. So the class in <div class="greeting"></div> is called an attribute.

2. Properties — You can also set things in JS. So the className in div.className = 'greeting' is called a property.

So the class attribute corresponds to the className property. At first glance, perhaps this distinction is defensible, but it gets much crazier. There is not always a one-to-one mapping between attributes and properties! Yes, that is a true fact. Sometimes an attribute exists, but there is no corresponding property. Sometimes changing an attribute does not change the underlying property. For example, as of this writing, the webkit-playsinline attribute can be used in HTML, but there is no corresponding property!

type Options = { preventDefault :: Boolean, stopPropagation :: Boolean }

Options for an event listener. If stopPropagation is true, it means the event stops traveling through the DOM so it will not trigger any other event listeners. If preventDefault is true, any built-in browser behavior related to the event is prevented. For example, this is used with touch events when you want to treat them as gestures of your own, not as scrolls.

onWithOptions :: forall msg aff. String -> Options -> CmdDecoder aff msg -> Property msg

Same as on but you can set a few options.

on :: forall msg eff. String -> (CmdDecoder eff msg) -> Property msg

Create a custom event listener.