BodyBuilder.Router

Router based on BodyBuilder and Elegant implementing transitions between pages and history (backward and forward)

type alias History route msg =

{ before : List (Page route msg)

, current : Page route msg

, after : List (Page route msg)

, transition : Maybe (Transition route msg)

, currentPageHasFocusElement : Bool

, standardHistoryWrapper : StandardHistoryMsg -> msg

}

Generic History type handling current page, before pages, after pages and current transition

type StandardHistoryMsg

= Tick Float

| Back

| FocusMsg (Result Error ())

Standard History Messages type : Tick to handle transitions with RequestAnimationFrame Back to handle back buttons

type alias Page route msg =

{ maybeFocusedId : Maybe String

, maybeTransition : Maybe (Transition route msg)

, route : route

}

Page type handling transition

type alias Transition route msg =

{ timer : Float

, length : Float

, kind : Kind route msg

, direction : Direction

, easing : Easing

}

Transition between 2 pages

type alias PageView route msg =

Page route msg -> Maybe (Transition route msg) -> NodeWithStyle msg

handleStandardHistory :

StandardHistoryMsg

-> { a | history : History route msg }

-> ( { a | history : History route msg }, Cmd msg )

handle model's history update using historyMsg

maybeTransitionSubscription : History route msg -> Sub msg

maybe transition subscription

initHistory : route -> (StandardHistoryMsg -> msg) -> History route msg

Init your history.

initHistoryAndData :

route

-> data

-> (StandardHistoryMsg -> msg)

-> { history : History route msg

, data : data

}

initialize history and data based on the routing system

push : Page route msg -> History route msg -> History route msg

push a page into history

slideUp : Transition route msg

slideUp transition

forward : Direction

pageWithDefaultTransition : route -> Page route msg

creates a page with the defaultTransition

pageWithTransition : Transition route msg -> route -> Page route msg

creates a page with a custom transition

pageWithoutTransition : route -> Page route msg

creates a page without any transition

customTransition : Float -> Kind route msg -> Direction -> Easing -> Transition route msg

easeInOut : Easing

customKind :

( History route msg

-> ( Page route msg

-> Maybe (Transition route msg)

-> NodeWithStyle msg

)

-> NodeWithStyle msg

)

-> Kind route msg

overflowHiddenContainer :

Modifiers (FlexContainerAttributes msg)

-> List (FlexItem msg)

-> NodeWithStyle msg

pageView :

(a -> Maybe (Transition route msg) -> NodeWithStyle msg)

-> Maybe (Transition route msg)

-> a

-> NodeWithStyle msg

beforeTransition : History route msg -> List (Page route msg)

percentage : Float -> Float

getMaybeTransitionValue : Maybe (Transition route msg) -> Float

afterTransition : History route msg -> List (Page route msg)

visiblePages : History route msg -> List (Page route msg)

focusedElement : String -> Page route msg -> Page route msg

headerElement :

{ a

| center : NodeWithStyle msg

, left : NodeWithStyle msg

, right : NodeWithStyle msg

}

-> NodeWithStyle msg

display header

pageWithHeader : NodeWithStyle msg -> NodeWithStyle msg -> NodeWithStyle msg

headerButton : msg -> String -> NodeWithStyle msg

display button

historyView :

( Page route msg

-> Maybe (Transition route msg)

-> NodeWithStyle msg

)

-> History route msg

-> NodeWithStyle msg

display the current possible transition from one page to the other using the history and its own routing system

mobileMeta : NodeWithStyle msg

meta tag for a correct display on mobile devices

elm-athlete/athlete/1.0.0

BodyBuilder.Router

Modules