Orasund/elm-ui-widgets/2.0.4

NOTE: the latest version is 3.4.0

Widget.ScrollingNav

The Scrolling Nav is a navigation bar thats updates while you scroll through the page. Clicking on a navigation button will scroll directly to that section.

Basics

type alias ScrollingNav section =
{ toString : section -> String
, fromString : String -> Maybe section
, positions : IntDict String
, arrangement : List section
, scrollPos : Int
}
{ toString : section -> String
, fromString : String -> Maybe section
, arrangement : List section
, toMsg :
Result Error (ScrollingNav section -> ScrollingNav section) -> msg
}
-> ( ScrollingNav section, Cmd msg )

The intial state include the labels and the arrangement of the sections

(section -> Element msg)
-> ScrollingNav section
-> List (Element msg)

Opinionated way of viewing the section.

This might be useful at first, but you should consider writing your own view function.

view :
    (section -> Element msg)
    -> Model section
    -> List (Element msg)
view asElement { toString, arrangement } =
    arrangement
        |> List.map
            (\header ->
                Element.el
                    [ header
                        |> toString
                        |> Attributes.id
                        |> Element.htmlAttribute
                    , Element.width <| Element.fill
                    ]
                <|
                    asElement <|
                        header
            )
current : (String -> Maybe section) -> ScrollingNav section -> Maybe section

Returns the current section

toSelect : (Int -> Maybe msg) -> ScrollingNav section -> Select msg

Returns a select widget containing all section, with the current section selected.

Operations

{ section : section
, onChange : Result Error () -> msg
}
-> ScrollingNav section
-> Cmd msg

Scrolls the screen to the respective section

{ offset : Float
, section : section
, onChange : Result Error () -> msg
}
-> ScrollingNav section
-> Cmd msg

Scrolls the screen to the respective section with some offset

ScrollingNav section
-> Task Error (ScrollingNav section -> ScrollingNav section)

Updates the positions of all sections. This functions should be called regularly if the height of elements on your page can change during time.

getPos : Task x (ScrollingNav selection -> ScrollingNav selection)

Syncs the position of of the viewport

setPos : Int -> ScrollingNav section -> ScrollingNav section

sets the position of the viewport to show a specific section