Web.Dom

Helpers for DOM node types as part of an Interface.

These are primitives used for svg and html. Compare with elm/virtual-dom

documentEventListen : String -> Interface Value

An Interface that listens for a specific document event like like keypress, keydown, keyup, click, mousemove, mousedown, mouseup

text : String -> DomNode state_

Plain text DomNode

element :

String

-> List (Modifier state)

-> List (DomNode state)

-> DomNode state

Create a DOM element with a given tag, Modifiers and sub-nodes. For example to get <p>flying</p>

Web.Dom.element "p"
    []
    [ Web.Dom.text "flying" ]

elementNamespaced :

String

-> String

-> List (Modifier state)

-> List (DomNode state)

-> DomNode state

Create a DOM element with a given namespace, tag, Modifiers and sub-nodes. For example, Web.Svg defines its elements using

element : String -> List (Modifier state) -> List (DomNode state) -> DomNode state
element tag modifiers subs =
    Web.Dom.elementNamespaced "http://www.w3.org/2000/svg" tag modifiers subs

type alias Modifier state =

Rope (ModifierSingle state)

Set the behavior of a Web.Dom.element. To create one, use attribute, style, listenTo. To combine multiple, use Web.Dom.modifierBatch and Web.Dom.modifierNone

For example to get <a href="https://elm-lang.org">elm</a>

Web.Dom.element "a"
    [ Web.Dom.attribute "href" "https://elm-lang.org" ]
    [ Web.Dom.text "elm" ]

Btw: If you can think of a nicer name for this like "customization", "characteristic" or "aspect", please open an issue!

type ModifierSingle state

= Attribute

{ namespace : Maybe String

, key : String

, value : String

}

| Style

{ key : String

, value : String

}

| Listen

{ eventName : String

, on : Value -> state

, defaultActionHandling : DefaultActionHandling

}

An individual Modifier. Create using attribute, style, listenTo.

attribute : String -> String -> Modifier state_

A key-value attribute Modifier

attributeNamespaced : String -> String -> String -> Modifier state_

A namespaced key-value attribute Modifier. For example, you could define an SVG xlink href attribute as

attributeXlinkHref : String -> Modifier msg
attributeXlinkHref value =
    Web.Dom.attributeNamespaced "http://www.w3.org/1999/xlink" "xlink:href" value

style : String -> String -> Modifier state_

A key-value style Modifier

listenTo : String -> Modifier Value

Listen for a specific DOM event on the DomElement. Use modifierMap to wire this to a specific event.

If you want to override the browser's default behavior for that event, use listenToPreventingDefaultAction

listenToPreventingDefaultAction : String -> Modifier Value

Like listenTo but preventing the browser's default action.

That's for example how elm's Browser.Events.onSubmit prevents the form from changing the page’s location:

submitListen : Web.Dom.Modifier ()
submitListen =
    Web.Dom.listenToPreventingDefaultAction "submit"
        |> Web.Dom.modifierMap (\_ -> ())

modifierMap : (state -> mappedState) -> Modifier state -> Modifier mappedState

Wire events from this Modifier to a specific event.

Web.Dom.listen "click" |> Web.Dom.modifierMap (\_ -> ButtonClicked)

modifierBatch : List (Modifier state) -> Modifier state

Combine multiple Modifiers into one.

modifierNone : Modifier state_

Doing nothing as a Modifier. These two examples are equivalent:

Web.Dom.modifierBatch
    [ a, Web.Dom.modifierNone, b ]

and

Web.Dom.modifierBatch
    (List.filterMap identity
        [ a |> Just, Nothing, b |> Just ]
    )

map : (state -> mappedState) -> DomNode state -> DomNode mappedState

Wire events from this DomNode to a specific event.

buttonUi "start"
    |> Web.Dom.map (\Clicked -> StartButtonClicked)

with e.g.

buttonUi : List (Web.DomNode ()) -> Web.DomNode ButtonEvent
buttonUi subs =
    Web.Dom.element "button"
        [ Web.Dom.listenTo "click"
            |> Web.Dom.modifierMap (\_ -> Clicked)
        ]
        [ Web.Dom.text label ]


type ButtonEvent
    = Clicked

render : DomNode state -> Interface state

An Interface for displaying a given DomNode.

lue-bird/elm-state-interface/1.0.0

Web.Dom

Modules