Bonsai HTML Event helpers

These are convenience functions, if you use an event handler A LOT, you should call on with a top level function. See explanation in Bonsai.EventDecoder

#preventDefaultStopPropagation Source

preventDefaultStopPropagation :: Options

Event options: prevent default, stop propagation

#onClick Source

onClick :: forall msg. msg -> Property msg

Event listener property for the click event.

#onCheckedChange Source

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

Suboptimal helper for boolean (checkbox) input

#onInput Source

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

Suboptimal helper for the input event.

#onKeyEnter Source

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

Emit commands on enter key presses

#onKeyEnterEscape Source

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

Emit commands on enter or escape key presses

#onSubmit Source

onSubmit :: forall msg. msg -> Property msg

Emit a command on form submit.

Re-exports from Bonsai.VirtualDom

#Property Source

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!

#Options Source

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 Source

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

Same as on but you can set a few options.

#on Source

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

Create a custom event listener.