Commit db75d2b6 authored by Pascal Hartig's avatar Pascal Hartig

Elm: Sync with @evancz/elm-todomvc/trim

parent 0fe9e8d9
...@@ -3,9 +3,9 @@ module Todo where ...@@ -3,9 +3,9 @@ module Todo where
This application is broken up into four distinct parts: This application is broken up into four distinct parts:
1. Model - a full definition of the application's state 1. Model - a full description of the application as data
2. Update - a way to step the application state forward 2. Update - a way to update the model based on user actions
3. View - a way to visualize our application state with HTML 3. View - a way to visualize our model with HTML
4. Inputs - the signals necessary to manage events 4. Inputs - the signals necessary to manage events
This clean division of concerns is a core part of Elm. You can read more about This clean division of concerns is a core part of Elm. You can read more about
...@@ -13,10 +13,9 @@ this in the Pong tutorial: http://elm-lang.org/blog/Pong.elm ...@@ -13,10 +13,9 @@ this in the Pong tutorial: http://elm-lang.org/blog/Pong.elm
This program is not particularly large, so definitely see the following This program is not particularly large, so definitely see the following
document for notes on structuring more complex GUIs with Elm: document for notes on structuring more complex GUIs with Elm:
https://gist.github.com/evancz/2b2ba366cae1887fe621 http://elm-lang.org/learn/Architecture.elm
-} -}
import Graphics.Element (Element, container, midTop)
import Html (..) import Html (..)
import Html.Attributes (..) import Html.Attributes (..)
import Html.Events (..) import Html.Events (..)
...@@ -52,9 +51,9 @@ emptyModel = ...@@ -52,9 +51,9 @@ emptyModel =
-- UPDATE -- UPDATE
-- A description of the kinds of actions that can be performed on the state of -- A description of the kinds of actions that can be performed on the model of
-- the application. See the following post for more info on this pattern and -- our application. See the following post for more info on this pattern and
-- some alternatives: https://gist.github.com/evancz/2b2ba366cae1887fe621 -- some alternatives: http://elm-lang.org/learn/Architecture.elm
type Action type Action
= NoOp = NoOp
| UpdateField String | UpdateField String
...@@ -65,54 +64,54 @@ type Action ...@@ -65,54 +64,54 @@ type Action
| ChangeVisibility String | ChangeVisibility String
-- How we step the state forward for any given action -- How we update our Model on any given Action
update : Action -> Model -> Model update : Action -> Model -> Model
update action state = update action model =
case action of case action of
NoOp -> state NoOp -> model
UpdateField str -> UpdateField str ->
{ state | field <- str } { model | field <- str }
Add -> Add ->
let description = String.trim state.field in let description = String.trim model.field in
if String.isEmpty description then state else if String.isEmpty description then model else
{ state | { model |
uid <- state.uid + 1, uid <- model.uid + 1,
field <- "", field <- "",
tasks <- state.tasks ++ [Task.init description state.uid] tasks <- model.tasks ++ [Task.init description model.uid]
} }
UpdateTask (id, taskAction) -> UpdateTask (id, taskAction) ->
let updateTask t = let updateTask t =
if t.id == id then Task.update taskAction t else Just t if t.id == id then Task.update taskAction t else Just t
in in
{ state | tasks <- List.filterMap updateTask state.tasks } { model | tasks <- List.filterMap updateTask model.tasks }
DeleteComplete -> DeleteComplete ->
{ state | tasks <- List.filter (not << .completed) state.tasks } { model | tasks <- List.filter (not << .completed) model.tasks }
CheckAll bool -> CheckAll bool ->
let updateTask t = { t | completed <- bool } let updateTask t = { t | completed <- bool }
in { state | tasks <- List.map updateTask state.tasks } in { model | tasks <- List.map updateTask model.tasks }
ChangeVisibility visibility -> ChangeVisibility visibility ->
{ state | visibility <- visibility } { model | visibility <- visibility }
-- VIEW -- VIEW
view : Model -> Html view : Model -> Html
view state = view model =
div div
[ class "todomvc-wrapper" [ class "todomvc-wrapper"
, style [ ("visibility", "hidden") ] , style [ ("visibility", "hidden") ]
] ]
[ section [ section
[ id "todoapp" ] [ id "todoapp" ]
[ lazy taskEntry state.field [ lazy taskEntry model.field
, lazy2 taskList state.visibility state.tasks , lazy2 taskList model.visibility model.tasks
, lazy2 controls state.visibility state.tasks , lazy2 controls model.visibility model.tasks
] ]
, infoFooter , infoFooter
] ]
...@@ -221,14 +220,9 @@ infoFooter = ...@@ -221,14 +220,9 @@ infoFooter =
-- SIGNALS -- SIGNALS
-- wire the entire application together -- wire the entire application together
main : Signal Element main : Signal Html
main = main =
Signal.map2 scene model Window.dimensions Signal.map view model
scene : Model -> (Int,Int) -> Element
scene model (w,h) =
container w h midTop (toElement 550 h (view model))
-- manage the model of our application over time -- manage the model of our application over time
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment