rl-king / elm-inview / InView

Get information on an element position relative to the current viewport.

Definition


type State

Keeps track of viewport position, viewport dimensions and element positions.


type alias Viewport =
{ 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.


type alias Element =
{ x : Basics.Float
, y : Basics.Float
, width : Basics.Float
, height : Basics.Float 
}

Similar to Browser.Dom.Element without scene and viewport.

Init

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.

Update


type Msg

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.

Check

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.

check

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.

checkAlt

Check with margin


type alias Margin =
{ 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.

isInViewWithMargin

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.

isInOrAboveViewWithMargin

Custom check

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.