Bonsai.Html.Events

preventDefaultStopPropagation :: Options

Event options: prevent default, stop propagation

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

Suboptimal helper for the input event.

onClick :: forall msg. msg -> Property msg

Event listener property for the click 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. (StrMap String -> 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.

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

Create a custom event listener.

import Json.Decode as Json

onClick : msg -> Property msg
onClick msg =
  on "click" (Json.succeed msg)

You first specify the name of the event in the same format as with JavaScript’s addEventListener. Next you give a JSON decoder, which lets you pull information out of the event object. If the decoder succeeds, it will produce a message and route it to your update function.