Router based on BodyBuilder and Elegant implementing transitions between pages and history (backward and forward)
{ 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
Standard History Messages type : Tick to handle transitions with RequestAnimationFrame Back to handle back buttons
{ maybeFocusedId : Maybe String
, maybeTransition : Maybe (Transition route msg)
, route : route
}
Page type handling transition
{ timer : Basics.Float
, length : Basics.Float
, kind : Kind route msg
, direction : Direction
, easing : Easing
}
Transition between 2 pages
Page route msg -> Maybe (Transition route msg) -> BodyBuilder.NodeWithStyle msg
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