navigate : Route -> Cmd msg (1) navigate route = Navigation.newUrl (encode route) linkTo : Route -> List (Attribute msg) -> List (Html msg) -> Html msg linkTo route attrs content = (2) a ((linkAttrs route) ++ attrs) content linkAttrs : Route -> List (Attribute msg) linkAttrs route = let path = encode route in [ href path , attribute "data-navigate" path (3) ] catchNavigationClicks : (String -> msg) -> Attribute msg catchNavigationClicks tagger = (4) onWithOptions "click" { stopPropagation = True , preventDefault = True } (Json.map tagger (Json.at [ "target" ] pathDecoder)) pathDecoder : Json.Decoder String (5) pathDecoder = Json.oneOf [ Json.at [ "data-navigate" ] Json.string , Json.at [ "parentElement" ] (lazy (\_ -> pathDecoder)) , Json.fail "no path found for click" ] 1 A couple of places in the Album app we wish to be able to navigate to a new page as a result of some logic in the update function of some component. We might actually be better off inlining this to be honest. in the relevant update functions. 2 This is a handy convenience function for creating a link to one of our defined routes (aka pages in our App). 3 In addition to the href attribute we define a data-navigate attribute which we can use for a catch all handler we’ll come to in a second. 4 This function allows us to catch all link clicks for a given element and all its child elements. It prevents the browser from making the url request and rather allows us to provide a custom tagger function that receives the Url in question and can create a message as a result. It will make more sense to you when you see how it’s used in our Main module later on. 5 A Json parser which will recursivly walk up the element tree for the node receiving the event and try to find an element with the data-navigage attribute defined.

redirect : Route -> Effects () redirect route = encode route |> Signal.send TransitRouter.pushPathAddress |> Effects.task clickAttr : Route -> Attribute clickAttr route = on "click" Json.value (\_ -> Signal.message TransitRouter.pushPathAddress <| encode route) linkAttrs : Route -> List Attribute linkAttrs route = let path = encode route in [ href path , onWithOptions "click" { stopPropagation = True, preventDefault = True } Json.value (\_ -> Signal.message TransitRouter.pushPathAddress path) ]