Module

Bonsai.EventDecoder

Package: purescript-bonsai
Repository: grmble/purescript-bonsai

Event decoder utilities

For maximum performance, event handlers attached to the virtual DOM should be comparable by object identity. For this, you have call on with a top level function event decoder.

This module defines composable BrowserEvents and utility functions that use them. For maximum performance, you should define your own toplevel helpers with a composed BrowserEvent of your choice.

Example:

-- convenient but not optimal for handlers that get used a lot onInput MyMsg -- good because will compare equal myMsgDecoder = (f2cmd pureCommand <<< map f <<< targetValueEvent) onInputMyMsg = on "input" myMsgDecoder

#targetCheckedEvent Source

targetCheckedEvent :: EventDecoder Boolean

Read the value of target element's checked property

#targetValueEvent Source

targetValueEvent :: EventDecoder String

Read the value of the target input element

#targetFormValuesEvent Source

targetFormValuesEvent :: EventDecoder (Map String (NonEmptyList String))

#targetValuesEvent Source

targetValuesEvent :: EventDecoder (Map String (NonEmptyList String))

Read the names and values of target form, for form events.

#keyCodeEvent Source

keyCodeEvent :: EventDecoder Int

#enterEscapeKeyEvent Source

enterEscapeKeyEvent :: EventDecoder (Maybe (Either String String))

Event decoding helper: Right for ENTER, Left for ESC

#ignoreEscapeEvent Source

ignoreEscapeEvent :: Foreign -> BrowserEvent Unit

Event decoder returns unit or fails

hack or no hack?

#dataAttributeEvent Source

dataAttributeEvent :: String -> EventDecoder String

Event decoder decodes the value of a data attribute

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.

Attributes — You can set things in HTML itself. So the class in <div class="greeting"></div> is called an attribute.
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.

#defaultOptions Source

defaultOptions :: Options

Everything is False by default.

defaultOptions =
    { stopPropagation = False
    , preventDefault = False
    }

Modules: Bonsai; Bonsai.Core; Bonsai.DOM; Bonsai.DOM.Primitive; Bonsai.Debug; Bonsai.EventDecoder; Bonsai.Html; Bonsai.Html.Attributes; Bonsai.Html.Elements; Bonsai.Html.Events; Bonsai.Html.Internal; Bonsai.Types; Bonsai.VirtualDom