From 3824070c617025b13f006504b835534b7b16d355 Mon Sep 17 00:00:00 2001 From: Mariano Uvalle Date: Sun, 10 Mar 2024 19:17:25 -0700 Subject: [PATCH] Done with 3.2.3 --- app.js | 121 ++++++++++++++++++++++++++++++++++++-------- index.html | 19 +++---- src/PhotoGroove.elm | 87 ++++++++++++++++++++++++++++--- 3 files changed, 190 insertions(+), 37 deletions(-) diff --git a/app.js b/app.js index 27597f8..2b682e7 100644 --- a/app.js +++ b/app.js @@ -4450,7 +4450,9 @@ var $elm$core$Set$toList = function (_v0) { var $elm$core$Basics$EQ = {$: 'EQ'}; var $elm$core$Basics$GT = {$: 'GT'}; var $elm$core$Basics$LT = {$: 'LT'}; +var $author$project$PhotoGroove$Medium = {$: 'Medium'}; var $author$project$PhotoGroove$initialModel = { + chosenSize: $author$project$PhotoGroove$Medium, photos: _List_fromArray( [ {url: '1.jpeg'}, @@ -5191,10 +5193,23 @@ var $elm$browser$Browser$sandbox = function (impl) { }; var $author$project$PhotoGroove$update = F2( function (msg, model) { - return (msg.description === 'ClickedPhoto') ? _Utils_update( - model, - {selectedUrl: msg.data}) : model; + var _v0 = msg.description; + switch (_v0) { + case 'ClickedPhoto': + return _Utils_update( + model, + {selectedUrl: msg.data}); + case 'ClickedSurpriseMe': + return _Utils_update( + model, + {selectedUrl: '2.jpeg'}); + default: + return model; + } }); +var $author$project$PhotoGroove$Large = {$: 'Large'}; +var $author$project$PhotoGroove$Small = {$: 'Small'}; +var $elm$html$Html$button = _VirtualDom_node('button'); var $elm$json$Json$Encode$string = _Json_wrap; var $elm$html$Html$Attributes$stringProperty = F2( function (key, string) { @@ -5206,8 +5221,36 @@ var $elm$html$Html$Attributes$stringProperty = F2( var $elm$html$Html$Attributes$class = $elm$html$Html$Attributes$stringProperty('className'); var $elm$html$Html$div = _VirtualDom_node('div'); var $elm$html$Html$h1 = _VirtualDom_node('h1'); +var $elm$html$Html$h3 = _VirtualDom_node('h3'); var $elm$html$Html$Attributes$id = $elm$html$Html$Attributes$stringProperty('id'); var $elm$html$Html$img = _VirtualDom_node('img'); +var $elm$virtual_dom$VirtualDom$Normal = function (a) { + return {$: 'Normal', a: a}; +}; +var $elm$virtual_dom$VirtualDom$on = _VirtualDom_on; +var $elm$html$Html$Events$on = F2( + function (event, decoder) { + return A2( + $elm$virtual_dom$VirtualDom$on, + event, + $elm$virtual_dom$VirtualDom$Normal(decoder)); + }); +var $elm$html$Html$Events$onClick = function (msg) { + return A2( + $elm$html$Html$Events$on, + 'click', + $elm$json$Json$Decode$succeed(msg)); +}; +var $author$project$PhotoGroove$sizeToString = function (size) { + switch (size.$) { + case 'Small': + return 'small'; + case 'Medium': + return 'med'; + default: + return 'large'; + } +}; var $elm$html$Html$Attributes$src = function (url) { return A2( $elm$html$Html$Attributes$stringProperty, @@ -5217,6 +5260,28 @@ var $elm$html$Html$Attributes$src = function (url) { var $elm$virtual_dom$VirtualDom$text = _VirtualDom_text; var $elm$html$Html$text = $elm$virtual_dom$VirtualDom$text; var $author$project$PhotoGroove$urlPrefix = 'http://elm-in-action.com/'; +var $elm$html$Html$input = _VirtualDom_node('input'); +var $elm$html$Html$label = _VirtualDom_node('label'); +var $elm$html$Html$Attributes$name = $elm$html$Html$Attributes$stringProperty('name'); +var $elm$html$Html$Attributes$type_ = $elm$html$Html$Attributes$stringProperty('type'); +var $author$project$PhotoGroove$viewSizeChooser = function (size) { + return A2( + $elm$html$Html$label, + _List_Nil, + _List_fromArray( + [ + A2( + $elm$html$Html$input, + _List_fromArray( + [ + $elm$html$Html$Attributes$type_('radio'), + $elm$html$Html$Attributes$name('size') + ]), + _List_Nil), + $elm$html$Html$text( + $author$project$PhotoGroove$sizeToString(size)) + ])); +}; var $elm$core$List$filter = F2( function (isGood, list) { return A3( @@ -5242,23 +5307,6 @@ var $elm$html$Html$Attributes$classList = function (classes) { $elm$core$Tuple$first, A2($elm$core$List$filter, $elm$core$Tuple$second, classes)))); }; -var $elm$virtual_dom$VirtualDom$Normal = function (a) { - return {$: 'Normal', a: a}; -}; -var $elm$virtual_dom$VirtualDom$on = _VirtualDom_on; -var $elm$html$Html$Events$on = F2( - function (event, decoder) { - return A2( - $elm$virtual_dom$VirtualDom$on, - event, - $elm$virtual_dom$VirtualDom$Normal(decoder)); - }); -var $elm$html$Html$Events$onClick = function (msg) { - return A2( - $elm$html$Html$Events$on, - 'click', - $elm$json$Json$Decode$succeed(msg)); -}; var $author$project$PhotoGroove$viewThumbnail = F2( function (selectedUrl, thumb) { return A2( @@ -5296,10 +5344,41 @@ var $author$project$PhotoGroove$view = function (model) { $elm$html$Html$text('Photo Groove') ])), A2( + $elm$html$Html$button, + _List_fromArray( + [ + $elm$html$Html$Events$onClick( + {data: '', description: 'ClickedSurpriseMe'}) + ]), + _List_fromArray( + [ + $elm$html$Html$text('Surprise me!') + ])), + A2( + $elm$html$Html$h3, + _List_Nil, + _List_fromArray( + [ + $elm$html$Html$text('Thumbnail Size:') + ])), + A2( $elm$html$Html$div, _List_fromArray( [ - $elm$html$Html$Attributes$id('thumbnails') + $elm$html$Html$Attributes$id('choose-size') + ]), + A2( + $elm$core$List$map, + $author$project$PhotoGroove$viewSizeChooser, + _List_fromArray( + [$author$project$PhotoGroove$Small, $author$project$PhotoGroove$Medium, $author$project$PhotoGroove$Large]))), + A2( + $elm$html$Html$div, + _List_fromArray( + [ + $elm$html$Html$Attributes$id('thumbnails'), + $elm$html$Html$Attributes$class( + $author$project$PhotoGroove$sizeToString(model.chosenSize)) ]), A2( $elm$core$List$map, diff --git a/index.html b/index.html index c5fdff3..3d99775 100644 --- a/index.html +++ b/index.html @@ -1,15 +1,16 @@ - + + + + + + + + + +
diff --git a/src/PhotoGroove.elm b/src/PhotoGroove.elm index ee541e4..5c00c8a 100644 --- a/src/PhotoGroove.elm +++ b/src/PhotoGroove.elm @@ -1,19 +1,32 @@ module PhotoGroove exposing (main) +import Array exposing (Array) import Browser -import Html exposing (div, h1, img, text) +import Html exposing (Html, button, div, h1, h3, img, input, label, text) import Html.Attributes exposing (..) import Html.Events exposing (onClick) +urlPrefix : String urlPrefix = "http://elm-in-action.com/" +type alias Msg = + { description : String, data : String } + + +view : Model -> Html Msg view model = div [ class "content" ] [ h1 [] [ text "Photo Groove" ] - , div [ id "thumbnails" ] + , button + [ onClick { description = "ClickedSurpriseMe", data = "" } ] + [ text "Surprise me!" ] + , h3 [] [ text "Thumbnail Size:" ] + , div [ id "choose-size" ] + (List.map viewSizeChooser [ Small, Medium, Large ]) + , div [ id "thumbnails", class (sizeToString model.chosenSize) ] (List.map (viewThumbnail model.selectedUrl) model.photos) , img [ class "large" @@ -23,6 +36,28 @@ view model = ] +viewSizeChooser : ThumbnailSize -> Html Msg +viewSizeChooser size = + label [] + [ input [ type_ "radio", name "size" ] [] + , text (sizeToString size) + ] + + +sizeToString : ThumbnailSize -> String +sizeToString size = + case size of + Small -> + "small" + + Medium -> + "med" + + Large -> + "large" + + +viewThumbnail : String -> Photo -> Html Msg viewThumbnail selectedUrl thumb = img [ src (urlPrefix ++ thumb.url) @@ -32,6 +67,24 @@ viewThumbnail selectedUrl thumb = [] +type ThumbnailSize + = Small + | Medium + | Large + + +type alias Photo = + { url : String } + + +type alias Model = + { photos : List Photo + , selectedUrl : String + , chosenSize : ThumbnailSize + } + + +initialModel : Model initialModel = { photos = [ { url = "1.jpeg" } @@ -39,15 +92,35 @@ initialModel = , { url = "3.jpeg" } ] , selectedUrl = "1.jpeg" + , chosenSize = Medium } -update msg model = - if msg.description == "ClickedPhoto" then - { model | selectedUrl = msg.data } +photoArray : Array Photo +photoArray = + Array.fromList initialModel.photos - else - model + +update msg model = + case msg.description of + "ClickedPhoto" -> + { model | selectedUrl = msg.data } + + "ClickedSurpriseMe" -> + { model | selectedUrl = "2.jpeg" } + + _ -> + model + + +getPhotoUrl : Int -> String +getPhotoUrl index = + case Array.get index photoArray of + Just photo -> + photo.url + + Nothing -> + "" main =