SimpleRouter.elm

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)

import StartApp

-- MODEL

type alias Image =
  { title : String
  , url : String
  }

type Route = Index | ImageRoute Image

type alias Model = 
  { images : List Image
  , route : Route
  }

moon = 
  { title = "Moon"
  , url = "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/292px-FullMoon2010.jpg"
  }

earth =
  { title = "Earth"
  , url = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Africa_and_Europe_from_a_Million_Miles_Away.png/300px-Africa_and_Europe_from_a_Million_Miles_Away.png"
  }
  
-- UPDATE

type Action = ShowIndex | ShowImage Image

update : Action -> Model -> Model
update action model =
  case action of 
     ShowIndex -> { model | route <- Index }
     
     ShowImage image -> { model | route <- ImageRoute image }

-- VIEW

view : Signal.Address Action -> Model -> Html
view address model =
  let 
      layout = div [ style [("text-align", "center")] ]
  in
    case model.route of 
      Index -> layout <|
        List.map (imageView address) model.images
    
      ImageRoute image -> 
        layout 
          [ div 
            [] 
            [ img [ src image.url ] [] ]
          , a 
            [ href "#"
            , onClick address ShowIndex ] 
            [ text "index" ] 
          ]
    
imageView : Signal.Address Action -> Image -> Html
imageView address image =
  div 
    []
    [ a 
      [ href "#"
      , onClick address (ShowImage image) ] 
      [ text image.title ] 
    ]
    
-- WIRING

main = StartApp.start 
  { model = 
    { images = [ earth, moon ]
    , route = Index 
    }
  , update = update
  , view = view
  }