@@ -0,0 +1,348 @@
module Todo where
{- | TodoMVC implemented in Elm, using plain HTML and CSS for rendering.
This application is broken up into four distinct parts:
1. Model - a full definition of the application's state
2. Update - a way to step the application state forward
3. View - a way to visualize our application state with HTML
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 in the Pong tutorial: http://elm-lang.org/blog/Pong.elm
This program is not particularly large, so definitely see the following
document for notes on structuring more complex GUIs with Elm:
http://elm-lang.org/learn/Architecture.elm
-}
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Html.Lazy exposing (lazy , lazy2 , lazy3 )
import Json.Decode as Json
import Signal exposing (Signal , Address )
import String
import Window
-- -- MODEL ----
-- The full application state of our todo app.
type alias Model =
{ : List Task
, : String
, : Int
, : String
}
type alias Task =
{ : String
, : Bool
, : Bool
, : Int
}
newTask : String -> Int -> Task
newTask desc id =
{ = desc
, = False
, = False
, = id
}
emptyModel : Model
emptyModel =
{ = []
, = " All"
, = " "
, = 0
}
-- -- UPDATE ----
-- A description of the kinds of actions that can be performed on the model of
-- our application. See the following post for more info on this pattern and
-- some alternatives: http://elm-lang.org/learn/Architecture.elm
type Action
= NoOp
| UpdateField String
| EditingTask Int Bool
| UpdateTask Int String
| Add
| Delete Int
| DeleteComplete
| Check Int Bool
| CheckAll Bool
| ChangeVisibility String
-- How we update our Model on a given Action?
update : Action -> Model -> Model
update action model =
case action of
NoOp -> model
Add ->
model
|> ! uid ( (+) 1 )
|> ! field ( always " " )
|> ! tasks ( if String . isEmpty model. field then identity else ( (++) [ . field model. uid] ))
UpdateField str ->
model
|> ! field ( always str)
EditingTask id isEditing ->
let updateTask t = if t. id == id then t |> ! editing ( always isEditing) else t
in
model
|> ! tasks ( List . map updateTask)
UpdateTask id task ->
let updateTask t = if t. id == id then t |> ! description ( always task) else t
in
model
|> ! tasks ( List . map updateTask)
Delete id ->
model
|> ! tasks ( List . filter ( \ t -> t. id /= id))
DeleteComplete ->
model
|> ! tasks ( List . filter ( not << . completed))
Check id isCompleted ->
let updateTask t = if t. id == id then t |> ! completed ( always isCompleted) else t
in
model
|> ! tasks ( List . map updateTask)
CheckAll isCompleted ->
let updateTask = ! completed ( always isCompleted)
in
model
|> ! tasks ( List . map updateTask)
ChangeVisibility visibility ->
model
|> ! visibility ( always visibility)
-- -- VIEW ----
view : Address Action -> Model -> Html
view address model =
div
[ " todomvc-wrapper"
, [ ( " visibility" , " hidden" ) ]
]
[
[ " todoapp" ]
[ . field
, . visibility model. tasks
, . visibility model. tasks
]
,
]
onEnter : Address a -> a -> Attribute
onEnter address value =
on " keydown"
( Json . customDecoder keyCode is13)
( \ _ -> Signal . message address value)
is13 : Int -> Result String ()
is13 code =
if code == 13 then Ok () else Err " not the right key code"
taskEntry : Address Action -> String -> Html
taskEntry address task =
header
[ " header" ]
[ [] [ " todos" ]
,
[ " new-todo"
, " What needs to be done?"
, True
,
, " newTodo"
, " input" ( Signal . message address << UpdateField )
, Add
]
[]
]
taskList : Address Action -> String -> List Task -> Html
taskList address visibility tasks =
let isVisible todo =
case visibility of
" Completed" -> todo. completed
" Active" -> not todo. completed
" All" -> True
allCompleted = List . all . completed tasks
cssVisibility = if List . isEmpty tasks then " hidden" else " visible"
in
section
[ " main"
, [ ( " visibility" , ) ]
]
[
[ " toggle-all"
, " checkbox"
, " toggle"
,
, ( CheckAll ( not allCompleted))
]
[]
,
[ " toggle-all" ]
[ " Mark all as complete" ]
,
[ " todo-list" ]
( List . map ( todoItem address) ( List . filter isVisible tasks))
]
todoItem : Address Action -> Task -> Html
todoItem address todo =
li
[ [ ( " completed" , . completed) , ( " editing" , . editing) ] ]
[
[ " view" ]
[
[ " toggle"
, " checkbox"
, . completed
, ( Check todo. id ( not todo. completed))
]
[]
,
[ ( EditingTask todo. id True ) ]
[ . description ]
,
[ " destroy"
, ( Delete todo. id)
]
[]
]
,
[ " edit"
, . description
, " title"
, ( " todo-" ++ toString todo. id)
, " input" ( Signal . message address << UpdateTask todo. id)
, ( EditingTask todo. id False )
, ( EditingTask todo. id False )
]
[]
]
controls : Address Action -> String -> List Task -> Html
controls address visibility tasks =
let tasksCompleted = List . length ( List . filter . completed tasks)
tasksLeft = List . length tasks - tasksCompleted
item_ = if tasksLeft == 1 then " item" else " items"
in
footer
[ " footer"
, ( List . isEmpty tasks)
]
[
[ " todo-count" ]
[ [] [ ( toString tasksLeft) ]
, ( item_ ++ " left" )
]
,
[ " filters" ]
[ " #/" " All"
, " "
, " #/active" " Active"
, " "
, " #/completed" " Completed"
]
,
[ " clear-completed"
, " clear-completed"
, ( tasksCompleted == 0 )
, DeleteComplete
]
[ ( " Clear completed (" ++ toString tasksCompleted ++ " )" ) ]
]
visibilitySwap : Address Action -> String -> String -> String -> Html
visibilitySwap address uri visibility actualVisibility =
li
[ ( ChangeVisibility visibility) ]
[ [ , [ ( " selected" , == actualVisibility) ] ] [ ] ]
infoFooter : Html
infoFooter =
footer [ " info" ]
[ [] [ " Double-click to edit a todo" ]
, []
[ " Written by "
, [ " https://github.com/evancz" ] [ " Evan Czaplicki" ]
]
, []
[ " Part of "
, [ " http://todomvc.com" ] [ " TodoMVC" ]
]
]
-- -- INPUTS ----
-- wire the entire application together
main : Signal Html
main =
Signal . map ( view actions. address) model
-- manage the model of our application over time
model : Signal Model
model =
Signal . foldp update initialModel actions. signal
initialModel : Model
initialModel =
Maybe . withDefault emptyModel getStorage
-- actions from user input
actions : Signal .Mailbox Action
actions =
Signal . mailbox NoOp
port focus : Signal String
port focus =
let needsFocus act =
case act of
EditingTask id bool -> bool
_ -> False
toSelector ( EditingTask id _) = ( " #todo-" ++ toString id)
in
actions. signal
|> Signal . filter needsFocus ( EditingTask 0 True )
|> Signal . map toSelector
-- interactions with localStorage to save the model
port getStorage : Maybe Model
port setStorage : Signal Model
port setStorage = model
TheSeamau5 created this gist