Get information on an element position relative to the current viewport.
Keeps track of viewport position, viewport dimensions and element positions.
{ scene : { width : Basics.Float
, height : Basics.Float }
, viewport : { x : Basics.Float
, y : Basics.Float
, maxX : Basics.Float
, maxY : Basics.Float
, width : Basics.Float
, height : Basics.Float }
}
Similar to Browser.Dom.Viewport with the addition of maxX
and maxY
.
You can use maxX
and maxY
to check if an element has ever been in the viewport before.
{ x : Basics.Float
, y : Basics.Float
, width : Basics.Float
, height : Basics.Float
}
Similar to Browser.Dom.Element without scene and viewport.
init : (Msg -> msg) -> List String -> ( State, Platform.Cmd.Cmd msg )
Takes a list of element ids you want to track and attempts to find them on the current page.
A message type for the state to update.
update : (Msg -> msg) -> Msg -> State -> ( State, Platform.Cmd.Cmd msg )
Update viewport size and element positions.
updateViewportOffset : { x : Basics.Float, y : Basics.Float } -> State -> State
Update current viewport x
and y
offset.
subscriptions : (Msg -> msg) -> State -> Platform.Sub.Sub msg
Subscribe to browser resize events to recalculate element positions.
addElements : (Msg -> msg) -> List String -> State -> ( State, Platform.Cmd.Cmd msg )
Track element positions after you've initialized the state.
Use this when the page content moves around after initialization, like for example when images load and stuff gets pushed down.
isInView : String -> State -> Maybe Basics.Bool
True if the element with the given id is in the current viewport.
note: The result is a Maybe because the element might not be on the page at all.
isInOrAboveView : String -> State -> Maybe Basics.Bool
True if the element with the given id is in or above the current viewport.
note: The result is a Maybe because the element might not be on the page at all.
{ top : Basics.Float
, right : Basics.Float
, bottom : Basics.Float
, left : Basics.Float
}
isInViewWithMargin : String -> Margin -> State -> Maybe Basics.Bool
True if the element with the given id is in the current viewport but with an offset. A positive offset will make the viewport smaller and vice versa.
note: The result is a Maybe because the element might not be on the page at all.
isInOrAboveViewWithMargin : String -> Margin -> State -> Maybe Basics.Bool
True if the element with the given id is in or above the current viewport but an offset. A positive offset will make the viewport smaller and vice versa.
note: The result is a Maybe because the element might not be on the page at all.
custom : (Viewport -> Maybe Element -> a) -> String -> State -> a
Write your own check function.
For example isInOrAboveViewWithMargin
is implemented like:
isInOrAboveViewWithMargin : String -> Margin -> State -> Maybe Bool
isInOrAboveViewWithMargin id margin state =
let
calc { viewport } element =
(viewport.y - margin.bottom + viewport.height > element.y)
&& (viewport.x - margin.right + viewport.width > element.x)
in
custom (\a b -> Maybe.map (calc a) b) id state
note: Element is a Maybe because the element might not be on the page at all.