elm-athlete / athlete / 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)
, standardHistoryWrapper : StandardHistoryMsg -> msg
, firstFrameHasBeenPainted : Basics.Bool 
}

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


type StandardHistoryMsg
    = Tick Basics.Float
    | Back
    | FocusMsg (Result Browser.Dom.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 : Basics.Float
, length : Basics.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) -> BodyBuilder.NodeWithStyle msg


type Direction
    = Forward
    | Backward


type Easing
    = EaseInOut
    | Linear

handleStandardHistory : StandardHistoryMsg -> { a | history : History route msg } -> ( { a | history : History route msg }, Platform.Cmd.Cmd msg )

handle model's history update using historyMsg

maybeTransitionSubscription : History route msg -> Platform.Sub.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 : Basics.Float -> Kind route msg -> Direction -> Easing -> Transition route msg

easeInOut : Easing

customKind : (History route msg -> (Page route msg -> Maybe (Transition route msg) -> BodyBuilder.NodeWithStyle msg) -> BodyBuilder.NodeWithStyle msg) -> Kind route msg

overflowHiddenContainer : Modifiers (BodyBuilder.Attributes.FlexContainerAttributes msg) -> List (BodyBuilder.FlexItem msg) -> BodyBuilder.NodeWithStyle msg

pageView : (a -> Maybe (Transition route msg) -> BodyBuilder.NodeWithStyle msg) -> Maybe (Transition route msg) -> a -> BodyBuilder.NodeWithStyle msg

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

percentage : Basics.Float -> Basics.Float

getMaybeTransitionValue : Maybe (Transition route msg) -> Basics.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

basicDuration : number

slideUpView : History route msg -> PageView route msg -> BodyBuilder.NodeWithStyle msg

slideLeftView : History route msg -> PageView route msg -> BodyBuilder.NodeWithStyle msg

headerElement : { a | center : BodyBuilder.NodeWithStyle msg, left : BodyBuilder.NodeWithStyle msg, right : BodyBuilder.NodeWithStyle msg } -> BodyBuilder.NodeWithStyle msg

display header

pageWithHeader : BodyBuilder.NodeWithStyle msg -> BodyBuilder.NodeWithStyle msg -> BodyBuilder.NodeWithStyle msg

headerButton : msg -> String -> BodyBuilder.NodeWithStyle msg

display button

historyView : (Page route msg -> Maybe (Transition route msg) -> BodyBuilder.NodeWithStyle msg) -> History route msg -> BodyBuilder.NodeWithStyle msg

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

mobileMeta : BodyBuilder.NodeWithStyle msg

meta tag for a correct display on mobile devices