Done with 3.2.3
This commit is contained in:
parent
8e69e0e8ea
commit
3824070c61
3 changed files with 190 additions and 37 deletions
119
app.js
119
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(
|
||||
var _v0 = msg.description;
|
||||
switch (_v0) {
|
||||
case 'ClickedPhoto':
|
||||
return _Utils_update(
|
||||
model,
|
||||
{selectedUrl: msg.data}) : 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,
|
||||
|
|
|
|||
19
index.html
19
index.html
|
|
@ -1,15 +1,16 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
body { background-color: rgb(44, 44, 44); color: white; }
|
||||
img { border: 1px solid white; margin: 5px; }
|
||||
.large { width: 500px; float: right; }
|
||||
.selected { margin: 0; border: 6px solid #60b5cc; }
|
||||
.content { margin: 40px auto; width: 960px; }
|
||||
#thumbnails { width: 440px; float: left; }
|
||||
h1 { font-family: Verdana; color: #60b5cc; }
|
||||
</style>
|
||||
<!-- <style> -->
|
||||
<!-- body { background-color: rgb(44, 44, 44); color: white; } -->
|
||||
<!-- img { border: 1px solid white; margin: 5px; } -->
|
||||
<!-- .large { width: 500px; float: right; } -->
|
||||
<!-- .selected { margin: 0; border: 6px solid #60b5cc; } -->
|
||||
<!-- .content { margin: 40px auto; width: 960px; } -->
|
||||
<!-- #thumbnails { width: 440px; float: left; } -->
|
||||
<!-- h1 { font-family: Verdana; color: #60b5cc; } -->
|
||||
<!-- </style> -->
|
||||
<link rel="stylesheet" href="http://elm-in-action.com/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
|
|
|||
|
|
@ -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,17 +92,37 @@ initialModel =
|
|||
, { url = "3.jpeg" }
|
||||
]
|
||||
, selectedUrl = "1.jpeg"
|
||||
, chosenSize = Medium
|
||||
}
|
||||
|
||||
|
||||
photoArray : Array Photo
|
||||
photoArray =
|
||||
Array.fromList initialModel.photos
|
||||
|
||||
|
||||
update msg model =
|
||||
if msg.description == "ClickedPhoto" then
|
||||
case msg.description of
|
||||
"ClickedPhoto" ->
|
||||
{ model | selectedUrl = msg.data }
|
||||
|
||||
else
|
||||
"ClickedSurpriseMe" ->
|
||||
{ model | selectedUrl = "2.jpeg" }
|
||||
|
||||
_ ->
|
||||
model
|
||||
|
||||
|
||||
getPhotoUrl : Int -> String
|
||||
getPhotoUrl index =
|
||||
case Array.get index photoArray of
|
||||
Just photo ->
|
||||
photo.url
|
||||
|
||||
Nothing ->
|
||||
""
|
||||
|
||||
|
||||
main =
|
||||
Browser.sandbox
|
||||
{ init = initialModel
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue