81 lines
1.7 KiB
Elm
81 lines
1.7 KiB
Elm
module PhotoGroove exposing (main)
|
|
|
|
import Array exposing (Array)
|
|
import Browser
|
|
import Html exposing (Html, button, div, h1, img, text)
|
|
import Html.Attributes exposing (..)
|
|
import Html.Events exposing (onClick)
|
|
|
|
|
|
type alias Model =
|
|
{ photos : List Photo, selectedUrl : String }
|
|
|
|
|
|
type alias Photo =
|
|
{ url : String }
|
|
|
|
|
|
initialModel : Model
|
|
initialModel =
|
|
{ photos =
|
|
[ { url = "1.jpeg" }
|
|
, { url = "2.jpeg" }
|
|
, { url = "3.jpeg" }
|
|
]
|
|
, selectedUrl = "1.jpeg"
|
|
}
|
|
|
|
|
|
photoArray : Array Photo
|
|
photoArray =
|
|
Array.fromList initialModel.photos
|
|
|
|
|
|
view : Model -> Html Message
|
|
view model =
|
|
div [ class "content" ]
|
|
[ h1 [] [ text "Photo Groove" ]
|
|
, button [ onClick ClickedSurpriseMe ] [ text "Surprise me!" ]
|
|
, div [ id "thumbnails" ]
|
|
(List.map (viewThumbnail model.selectedUrl) model.photos)
|
|
, img [ class "large", src (urlPrefix ++ "large/" ++ model.selectedUrl) ] []
|
|
]
|
|
|
|
|
|
viewThumbnail : String -> Photo -> Html Message
|
|
viewThumbnail selectedUrl thumb =
|
|
img
|
|
[ src (urlPrefix ++ thumb.url)
|
|
, classList [ ( "selected", selectedUrl == thumb.url ) ]
|
|
, onClick (ClickedThumbnail thumb.url)
|
|
]
|
|
[]
|
|
|
|
|
|
type Message
|
|
= ClickedThumbnail String
|
|
| ClickedSurpriseMe
|
|
|
|
|
|
update : Message -> Model -> Model
|
|
update msg model =
|
|
case msg of
|
|
ClickedThumbnail thumb ->
|
|
{ model | selectedUrl = thumb }
|
|
|
|
ClickedSurpriseMe ->
|
|
{ model | selectedUrl = "2.jpeg" }
|
|
|
|
|
|
urlPrefix : String
|
|
urlPrefix =
|
|
"http://elm-in-action.com/"
|
|
|
|
|
|
main : Program () Model Message
|
|
main =
|
|
Browser.sandbox
|
|
{ init = initialModel
|
|
, view = view
|
|
, update = update
|
|
}
|