Overview

Miso.Event.Decoder provides Decoder, the type that tells miso how to extract a Haskell value from a browser DOM Event object. It pairs a target path (DecodeTarget) into the event with a JSON-style parser (Value -> Parser a).

Decoders are consumed by on from Miso.Html.Event:

on :: MisoString   -- event name (e.g. "click")
   -> Decoder a      -- how to extract a from the event object
   -> (a -> action)   -- turn the extracted value into an action
   -> Attribute action

DecodeTarget

A DecodeTarget selects the sub-object of the event to decode:

• DecodeTarget [] — the event object itself (e.g. for keyboard events).
• DecodeTarget ["target"] — event.target (e.g. for input values).
• DecodeTargets [["a"], ["b"]] — tries event.a first, then event.b; the first successful decode wins.

Built-in decoders

emptyDecoder

() — click, submit, stateless events

keycodeDecoder

KeyCode — keydown / keyup key code

keyInfoDecoder

KeyInfo — key code + modifier keys

valueDecoder

MisoString — input / change (event.target.value)

checkedDecoder

Checked — checkbox change (event.target.checked)

pointerDecoder

PointerEvent — pointer/mouse position and metadata

Custom decoders

Build a custom decoder with at or by constructing Decoder directly:

-- Extract (offsetX, offsetY) from a click event
clickXY :: Decoder (Int, Int)
clickXY = Decoder
  { decodeAt = DecodeTarget []
  , decoder  = withObject "click" $ \o ->
      (,) <$> o .: "offsetX"
          <*> o .: "offsetY"
  }

See also

• Miso.Html.Event — on and the pre-wired event handlers (onClick, onInput, …)
• Miso.Event.Types — payload types (KeyCode, PointerEvent, …)
• Miso.JSON — Value, Parser, withObject, (.:)