You read values off the DOM by constructing a JSON decoder.
See the target
value for example use.
target : Json.Decode.Decoder a -> Json.Decode.Decoder a
Get the target DOM element of an event. You will usually start with this decoder. E.g., to make a button which when clicked emit an Action that carries the width of the button:
import DOM exposing (offsetWidth, target)
myButton : Html Float
myButton =
button
[ on "click" (target offsetWidth) ]
[ text "Click me!" ]
currentTarget : Json.Decode.Decoder a -> Json.Decode.Decoder a
Get the currentTarget DOM element of an event.
offsetParent : a -> Json.Decode.Decoder a -> Json.Decode.Decoder a
Get the offsetParent of the current element. Returns first argument if the current element is already the root; applies the second argument to the parent element if not.
To do traversals of the DOM, exploit that Elm allows recursive values.
parentElement : Json.Decode.Decoder a -> Json.Decode.Decoder a
Get the parent of an element.
findAncestor : Json.Decode.Decoder Basics.Bool -> Json.Decode.Decoder a -> Json.Decode.Decoder (Maybe a)
Get the closest ancestor of an element that satisfies the provided predicate.
nextSibling : Json.Decode.Decoder a -> Json.Decode.Decoder a
Get the next sibling of an element.
previousSibling : Json.Decode.Decoder a -> Json.Decode.Decoder a
Get the previous sibling of an element.
childNode : Basics.Int -> Json.Decode.Decoder a -> Json.Decode.Decoder a
Find the ith child of an element.
childNodes : Json.Decode.Decoder a -> Json.Decode.Decoder (List a)
Get the children of an element.
Decoders for reading sizing etc. properties off the DOM. All decoders return measurements in pixels.
Refer to, e.g., the Mozilla documentation for the precise semantics of these measurements. See also this stackoverflow answer.
offsetWidth : Json.Decode.Decoder Basics.Float
Get the width of an element in pixels; underlying implementation
reads .offsetWidth
.
offsetHeight : Json.Decode.Decoder Basics.Float
Get the heigh of an element in pixels. Underlying implementation
reads .offsetHeight
.
offsetLeft : Json.Decode.Decoder Basics.Float
Get the left-offset of the element in the parent element in pixels.
Underlying implementation reads .offsetLeft
.
offsetTop : Json.Decode.Decoder Basics.Float
Get the top-offset of the element in the parent element in pixels.
Underlying implementation reads .offsetTop
.
{ top : Basics.Float
, left : Basics.Float
, width : Basics.Float
, height : Basics.Float
}
Types for rectangles.
boundingClientRect : Json.Decode.Decoder Rectangle
Approximation of the method getBoundingClientRect, based off this stackoverflow answer.
NB! This decoder produces wrong results if a parent element is scrolled and
does not have explicit positioning (e.g., position: relative;
); see
this issue.
Also note that this decoder is likely computationally expensive and may produce
results that differ slightly from getBoundingClientRect
in browser-dependent
ways.
(I don't get to call getBoundingClientRect directly from Elm without going native or using ports; my packages don't get to go native and I can find no solution with ports. So we do it like in the bad old days with an O(lg n) traversal of the DOM, browser-dependencies and CSS quirks, only now through presumably expensive JSON decoders. It's 2007 forever, baby!)
scrollLeft : Json.Decode.Decoder Basics.Float
Get the amount of left scroll of the element in pixels.
Underlying implementation reads .scrollLeft
.
scrollTop : Json.Decode.Decoder Basics.Float
Get the amount of top scroll of the element in pixels.
Underlying implementation reads .scrollTop
.
hasClass : String -> Json.Decode.Decoder Basics.Bool
Checks if an element has a given class.
isTag : String -> Json.Decode.Decoder Basics.Bool
Compares the tag name of an element to the parameter. The tName parameter has to be uppercased
and : Json.Decode.Decoder Basics.Bool -> Json.Decode.Decoder Basics.Bool -> Json.Decode.Decoder Basics.Bool
Joins two predicates with an and operator
or : Json.Decode.Decoder Basics.Bool -> Json.Decode.Decoder Basics.Bool -> Json.Decode.Decoder Basics.Bool
Joins two predicates with an or operator
negate : Json.Decode.Decoder Basics.Bool -> Json.Decode.Decoder Basics.Bool
Inverses a predicate
tagName : Json.Decode.Decoder String
Get the tag name of an element.
className : Json.Decode.Decoder String
Get the class name(s) of an element.
classList : Json.Decode.Decoder (List String)
Get the class list of an element. typeof classList is object, so we can not call Decode.list
textContent : Json.Decode.Decoder String
Get the text content of an element.