Add Elm 0.14 example

examples/elm/Task.elm

+module Task where
+
+import Html (..)
+import Html.Attributes (..)
+import Html.Events (..)
+import Json.Decode as Json
+import LocalChannel as LC
+import Maybe
+import Signal
+import String
+
+
+-- MODEL
+
+type alias Model =
+    { description : String
+    , completed   : Bool
+    , edits       : Maybe String
+    , id          : Int
+    }
+
+
+init : String -> Int -> Model
+init desc id =
+    { description = desc
+    , completed = False
+    , edits = Nothing
+    , id = id
+    }
+
+
+-- UPDATE
+
+type Action
+    = Focus
+    | Edit String
+    | Cancel
+    | Commit
+    | Completed Bool
+    | Delete
+
+
+update : Action -> Model -> Maybe Model
+update update task =
+    case update of
+      Focus ->
+          Just { task | edits <- Just task.description }
+
+      Edit description ->
+          Just { task | edits <- Just description }
+
+      Cancel ->
+          Just { task | edits <- Nothing }
+
+      Commit ->
+          case task.edits of
+            Nothing ->
+                Just task
+
+            Just rawDescription ->
+                let description = String.trim rawDescription in
+                if String.isEmpty description then Nothing else
+                    Just
+                      { task |
+                          edits <- Nothing,
+                          description <- description
+                      }
+
+      Completed bool ->
+          Just { task | completed <- bool }
+
+      Delete ->
+          Nothing
+
+
+-- VIEW
+
+view : LC.LocalChannel (Int, Action) -> Model -> Html
+view channel task =
+    let className =
+            (if task.completed then "completed " else "") ++
+              case task.edits of
+                Just _ -> "editing"
+                Nothing -> ""
+
+        description =
+            Maybe.withDefault task.description task.edits
+    in
+
+    li
+      [ class className ]
+      [ div
+          [ class "view" ]
+          [ input
+              [ class "toggle"
+              , type' "checkbox"
+              , checked task.completed
+              , onClick (LC.send channel (task.id, Completed (not task.completed)))
+              ]
+              []
+          , label
+              [ onDoubleClick (LC.send channel (task.id, Focus)) ]
+              [ text description ]
+          , button
+              [ class "destroy"
+              , onClick (LC.send channel (task.id, Delete))
+              ]
+              []
+          ]
+      , input
+          [ class "edit"
+          , value description
+          , name "title"
+          , id ("todo-" ++ toString task.id)
+          , on "input" targetValue (\desc -> LC.send channel (task.id, Edit desc))
+          , onBlur (LC.send channel (task.id, Commit))
+          , onFinish
+              (LC.send channel (task.id, Commit))
+              (LC.send channel (task.id, Cancel))
+          ]
+          []
+      ]
+
+
+onFinish : Signal.Message -> Signal.Message -> Attribute
+onFinish enterMessage escapeMessage =
+  let select key =
+        case key of
+          13 -> Ok enterMessage
+          27 -> Ok escapeMessage
+          _ -> Err "Not a 'finish' key, such as ENTER or ESCAPE"
+  in
+      on "keydown" (Json.customDecoder keyCode select) identity

examples/elm/Todo.elm

+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:
+https://gist.github.com/evancz/2b2ba366cae1887fe621
+-}
+
+import Graphics.Element (Element, container, midTop)
+import Html (..)
+import Html.Attributes (..)
+import Html.Events (..)
+import Html.Lazy (lazy, lazy2)
+import List
+import LocalChannel as LC
+import Maybe
+import Signal
+import String
+import Task
+import Window
+
+
+-- MODEL
+
+-- The full application state of our todo app.
+type alias Model =
+    { tasks      : List Task.Model
+    , field      : String
+    , uid        : Int
+    , visibility : String
+    }
+
+
+emptyModel : Model
+emptyModel =
+    { tasks = []
+    , visibility = "All"
+    , field = ""
+    , uid = 0
+    }
+
+
+-- UPDATE
+
+-- A description of the kinds of actions that can be performed on the state of
+-- the application. See the following post for more info on this pattern and
+-- some alternatives: https://gist.github.com/evancz/2b2ba366cae1887fe621
+type Action
+    = NoOp
+    | UpdateField String
+    | Add
+    | UpdateTask (Int, Task.Action)
+    | DeleteComplete
+    | CheckAll Bool
+    | ChangeVisibility String
+
+
+-- How we step the state forward for any given action
+update : Action -> Model -> Model
+update action state =
+    case action of
+      NoOp -> state
+
+      UpdateField str ->
+          { state | field <- str }
+
+      Add ->
+          let description = String.trim state.field in
+          if String.isEmpty description then state else
+              { state |
+                  uid <- state.uid + 1,
+                  field <- "",
+                  tasks <- state.tasks ++ [Task.init description state.uid]
+              }
+
+      UpdateTask (id, taskAction) ->
+          let updateTask t =
+                if t.id == id then Task.update taskAction t else Just t
+          in
+              { state | tasks <- List.filterMap updateTask state.tasks }
+
+      DeleteComplete ->
+          { state | tasks <- List.filter (not << .completed) state.tasks }
+
+      CheckAll bool ->
+          let updateTask t = { t | completed <- bool }
+          in  { state | tasks <- List.map updateTask state.tasks }
+
+      ChangeVisibility visibility ->
+          { state | visibility <- visibility }
+
+
+-- VIEW
+
+view : Model -> Html
+view state =
+    div
+      [ class "todomvc-wrapper"
+      , style [ ("visibility", "hidden") ]
+      ]
+      [ section
+          [ id "todoapp" ]
+          [ lazy taskEntry state.field
+          , lazy2 taskList state.visibility state.tasks
+          , lazy2 controls state.visibility state.tasks
+          ]
+      , infoFooter
+      ]
+
+taskEntry : String -> Html
+taskEntry task =
+    header
+      [ id "header" ]
+      [ h1 [] [ text "todos" ]
+      , input
+          [ id "new-todo"
+          , placeholder "What needs to be done?"
+          , autofocus True
+          , value task
+          , name "newTodo"
+          , on "input" targetValue (Signal.send actions << UpdateField)
+          , Task.onFinish (Signal.send actions Add) (Signal.send actions NoOp)
+          ]
+          []
+      ]
+
+taskList : String -> List Task.Model -> Html
+taskList 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
+      [ id "main"
+      , style [ ("visibility", cssVisibility) ]
+      ]
+      [ input
+          [ id "toggle-all"
+          , type' "checkbox"
+          , name "toggle"
+          , checked allCompleted
+          , onClick (Signal.send actions (CheckAll (not allCompleted)))
+          ]
+          []
+      , label
+          [ for "toggle-all" ]
+          [ text "Mark all as complete" ]
+      , ul
+          [ id "todo-list" ]
+          (List.map (Task.view taskActions) (List.filter isVisible tasks))
+      ]
+
+controls : String -> List Task.Model -> Html
+controls 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
+      [ id "footer"
+      , hidden (List.isEmpty tasks)
+      ]
+      [ span
+          [ id "todo-count" ]
+          [ strong [] [ text (toString tasksLeft) ]
+          , text (item_ ++ " left")
+          ]
+      , ul
+          [ id "filters" ]
+          [ visibilitySwap "#/" "All" visibility
+          , text " "
+          , visibilitySwap "#/active" "Active" visibility
+          , text " "
+          , visibilitySwap "#/completed" "Completed" visibility
+          ]
+      , button
+          [ class "clear-completed"
+          , id "clear-completed"
+          , hidden (tasksCompleted == 0)
+          , onClick (Signal.send actions DeleteComplete)
+          ]
+          [ text ("Clear completed (" ++ toString tasksCompleted ++ ")") ]
+      ]
+
+visibilitySwap : String -> String -> String -> Html
+visibilitySwap uri visibility actualVisibility =
+    let className = if visibility == actualVisibility then "selected" else "" in
+    li
+      [ onClick (Signal.send actions (ChangeVisibility visibility)) ]
+      [ a [ class className, href uri ] [ text visibility ] ]
+
+infoFooter : Html
+infoFooter =
+    footer [ id "info" ]
+      [ p [] [ text "Double-click to edit a todo" ]
+      , p [] [ text "Written by "
+             , a [ href "https://github.com/evancz" ] [ text "Evan Czaplicki" ]
+             ]
+      , p [] [ text "Part of "
+             , a [ href "http://todomvc.com" ] [ text "TodoMVC" ]
+             ]
+      ]
+
+
+-- SIGNALS
+
+-- wire the entire application together
+main : Signal Element
+main =
+    Signal.map2 scene model Window.dimensions
+
+
+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
+model : Signal Model
+model =
+    Signal.foldp update initialModel allActions
+
+
+initialModel : Model
+initialModel =
+    Maybe.withDefault emptyModel savedModel
+
+
+allActions : Signal Action
+allActions =
+    Signal.merge
+      (Signal.subscribe actions)
+      (Signal.map ChangeVisibility route)
+
+
+-- interactions with localStorage
+port savedModel : Maybe Model
+
+port save : Signal Model
+port save = model
+
+-- routing
+port route : Signal String
+
+-- actions from user input
+actions : Signal.Channel Action
+actions = Signal.channel NoOp
+
+taskActions : LC.LocalChannel (Int, Task.Action)
+taskActions = LC.create UpdateTask actions
+
+port focus : Signal (Maybe Int)
+port focus =
+    let toSelector action =
+            case action of
+              UpdateTask (id, Task.Focus) -> Just id
+              _ -> Nothing
+    in
+        Signal.map toSelector (Signal.subscribe actions)

examples/elm/bower.json

+{
+  "name": "todomvc-elm",
+  "version": "0.0.0",
+  "dependencies": {
+    "todomvc-common": "~0.1"
+  }
+}

examples/elm/bower_components/todomvc-common/base.css

+html,
+body {
+	margin: 0;
+	padding: 0;
+}
+
+button {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	background: none;
+	font-size: 100%;
+	vertical-align: baseline;
+	font-family: inherit;
+	color: inherit;
+	-webkit-appearance: none;
+	-ms-appearance: none;
+	-o-appearance: none;
+	appearance: none;
+}
+
+body {
+	font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	line-height: 1.4em;
+	background: #eaeaea url('bg.png');
+	color: #4d4d4d;
+	width: 550px;
+	margin: 0 auto;
+	-webkit-font-smoothing: antialiased;
+	-moz-font-smoothing: antialiased;
+	-ms-font-smoothing: antialiased;
+	-o-font-smoothing: antialiased;
+	font-smoothing: antialiased;
+}
+
+button,
+input[type="checkbox"] {
+  outline: none;
+}
+
+#todoapp {
+	background: #fff;
+	background: rgba(255, 255, 255, 0.9);
+	margin: 130px 0 40px 0;
+	border: 1px solid #ccc;
+	position: relative;
+	border-top-left-radius: 2px;
+	border-top-right-radius: 2px;
+	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2),
+				0 25px 50px 0 rgba(0, 0, 0, 0.15);
+}
+
+#todoapp:before {
+	content: '';
+	border-left: 1px solid #f5d6d6;
+	border-right: 1px solid #f5d6d6;
+	width: 2px;
+	position: absolute;
+	top: 0;
+	left: 40px;
+	height: 100%;
+}
+
+#todoapp input::-webkit-input-placeholder {
+	font-style: italic;
+}
+
+#todoapp input::-moz-placeholder {
+	font-style: italic;
+	color: #a9a9a9;
+}
+
+#todoapp h1 {
+	position: absolute;
+	top: -120px;
+	width: 100%;
+	font-size: 70px;
+	font-weight: bold;
+	text-align: center;
+	color: #b3b3b3;
+	color: rgba(255, 255, 255, 0.3);
+	text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
+	-webkit-text-rendering: optimizeLegibility;
+	-moz-text-rendering: optimizeLegibility;
+	-ms-text-rendering: optimizeLegibility;
+	-o-text-rendering: optimizeLegibility;
+	text-rendering: optimizeLegibility;
+}
+
+#header {
+	padding-top: 15px;
+	border-radius: inherit;
+}
+
+#header:before {
+	content: '';
+	position: absolute;
+	top: 0;
+	right: 0;
+	left: 0;
+	height: 15px;
+	z-index: 2;
+	border-bottom: 1px solid #6c615c;
+	background: #8d7d77;
+	background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
+	background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+	background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
+	border-top-left-radius: 1px;
+	border-top-right-radius: 1px;
+}
+
+#new-todo,
+.edit {
+	position: relative;
+	margin: 0;
+	width: 100%;
+	font-size: 24px;
+	font-family: inherit;
+	line-height: 1.4em;
+	border: 0;
+	outline: none;
+	color: inherit;
+	padding: 6px;
+	border: 1px solid #999;
+	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+	-moz-box-sizing: border-box;
+	-ms-box-sizing: border-box;
+	-o-box-sizing: border-box;
+	box-sizing: border-box;
+	-webkit-font-smoothing: antialiased;
+	-moz-font-smoothing: antialiased;
+	-ms-font-smoothing: antialiased;
+	-o-font-smoothing: antialiased;
+	font-smoothing: antialiased;
+}
+
+#new-todo {
+	padding: 16px 16px 16px 60px;
+	border: none;
+	background: rgba(0, 0, 0, 0.02);
+	z-index: 2;
+	box-shadow: none;
+}
+
+#main {
+	position: relative;
+	z-index: 2;
+	border-top: 1px dotted #adadad;
+}
+
+label[for='toggle-all'] {
+	display: none;
+}
+
+#toggle-all {
+	position: absolute;
+	top: -42px;
+	left: -4px;
+	width: 40px;
+	text-align: center;
+	/* Mobile Safari */
+	border: none;
+}
+
+#toggle-all:before {
+	content: '»';
+	font-size: 28px;
+	color: #d9d9d9;
+	padding: 0 25px 7px;
+}
+
+#toggle-all:checked:before {
+	color: #737373;
+}
+
+#todo-list {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+#todo-list li {
+	position: relative;
+	font-size: 24px;
+	border-bottom: 1px dotted #ccc;
+}
+
+#todo-list li:last-child {
+	border-bottom: none;
+}
+
+#todo-list li.editing {
+	border-bottom: none;
+	padding: 0;
+}
+
+#todo-list li.editing .edit {
+	display: block;
+	width: 506px;
+	padding: 13px 17px 12px 17px;
+	margin: 0 0 0 43px;
+}
+
+#todo-list li.editing .view {
+	display: none;
+}
+
+#todo-list li .toggle {
+	text-align: center;
+	width: 40px;
+	/* auto, since non-WebKit browsers doesn't support input styling */
+	height: auto;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	margin: auto 0;
+	/* Mobile Safari */
+	border: none;
+	-webkit-appearance: none;
+	-ms-appearance: none;
+	-o-appearance: none;
+	appearance: none;
+}
+
+#todo-list li .toggle:after {
+	content: '✔';
+	/* 40 + a couple of pixels visual adjustment */
+	line-height: 43px;
+	font-size: 20px;
+	color: #d9d9d9;
+	text-shadow: 0 -1px 0 #bfbfbf;
+}
+
+#todo-list li .toggle:checked:after {
+	color: #85ada7;
+	text-shadow: 0 1px 0 #669991;
+	bottom: 1px;
+	position: relative;
+}
+
+#todo-list li label {
+	white-space: pre;
+	word-break: break-word;
+	padding: 15px 60px 15px 15px;
+	margin-left: 45px;
+	display: block;
+	line-height: 1.2;
+	-webkit-transition: color 0.4s;
+	transition: color 0.4s;
+}
+
+#todo-list li.completed label {
+	color: #a9a9a9;
+	text-decoration: line-through;
+}
+
+#todo-list li .destroy {
+	display: none;
+	position: absolute;
+	top: 0;
+	right: 10px;
+	bottom: 0;
+	width: 40px;
+	height: 40px;
+	margin: auto 0;
+	font-size: 22px;
+	color: #a88a8a;
+	-webkit-transition: all 0.2s;
+	transition: all 0.2s;
+}
+
+#todo-list li .destroy:hover {
+	text-shadow: 0 0 1px #000,
+				 0 0 10px rgba(199, 107, 107, 0.8);
+	-webkit-transform: scale(1.3);
+	transform: scale(1.3);
+}
+
+#todo-list li .destroy:after {
+	content: '✖';
+}
+
+#todo-list li:hover .destroy {
+	display: block;
+}
+
+#todo-list li .edit {
+	display: none;
+}
+
+#todo-list li.editing:last-child {
+	margin-bottom: -1px;
+}
+
+#footer {
+	color: #777;
+	padding: 0 15px;
+	position: absolute;
+	right: 0;
+	bottom: -31px;
+	left: 0;
+	height: 20px;
+	z-index: 1;
+	text-align: center;
+}
+
+#footer:before {
+	content: '';
+	position: absolute;
+	right: 0;
+	bottom: 31px;
+	left: 0;
+	height: 50px;
+	z-index: -1;
+	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
+				0 6px 0 -3px rgba(255, 255, 255, 0.8),
+				0 7px 1px -3px rgba(0, 0, 0, 0.3),
+				0 43px 0 -6px rgba(255, 255, 255, 0.8),
+				0 44px 2px -6px rgba(0, 0, 0, 0.2);
+}
+
+#todo-count {
+	float: left;
+	text-align: left;
+}
+
+#filters {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	position: absolute;
+	right: 0;
+	left: 0;
+}
+
+#filters li {
+	display: inline;
+}
+
+#filters li a {
+	color: #83756f;
+	margin: 2px;
+	text-decoration: none;
+}
+
+#filters li a.selected {
+	font-weight: bold;
+}
+
+#clear-completed {
+	float: right;
+	position: relative;
+	line-height: 20px;
+	text-decoration: none;
+	background: rgba(0, 0, 0, 0.1);
+	font-size: 11px;
+	padding: 0 10px;
+	border-radius: 3px;
+	box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.2);
+}
+
+#clear-completed:hover {
+	background: rgba(0, 0, 0, 0.15);
+	box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.3);
+}
+
+#info {
+	margin: 65px auto 0;
+	color: #a6a6a6;
+	font-size: 12px;
+	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
+	text-align: center;
+}
+
+#info a {
+	color: inherit;
+}
+
+/*
+	Hack to remove background from Mobile Safari.
+	Can't use it globally since it destroys checkboxes in Firefox and Opera
+*/
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+	#toggle-all,
+	#todo-list li .toggle {
+		background: none;
+	}
+
+	#todo-list li .toggle {
+		height: 40px;
+	}
+
+	#toggle-all {
+		top: -56px;
+		left: -15px;
+		width: 65px;
+		height: 41px;
+		-webkit-transform: rotate(90deg);
+		transform: rotate(90deg);
+		-webkit-appearance: none;
+		appearance: none;
+	}
+}
+
+.hidden {
+	display: none;
+}
+
+hr {
+	margin: 20px 0;
+	border: 0;
+	border-top: 1px dashed #C5C5C5;
+	border-bottom: 1px dashed #F7F7F7;
+}
+
+.learn a {
+	font-weight: normal;
+	text-decoration: none;
+	color: #b83f45;
+}
+
+.learn a:hover {
+	text-decoration: underline;
+	color: #787e7e;
+}
+
+.learn h3,
+.learn h4,
+.learn h5 {
+	margin: 10px 0;
+	font-weight: 500;
+	line-height: 1.2;
+	color: #000;
+}
+
+.learn h3 {
+	font-size: 24px;
+}
+
+.learn h4 {
+	font-size: 18px;
+}
+
+.learn h5 {
+	margin-bottom: 0;
+	font-size: 14px;
+}
+
+.learn ul {
+	padding: 0;
+	margin: 0 0 30px 25px;
+}
+
+.learn li {
+	line-height: 20px;
+}
+
+.learn p {
+	font-size: 15px;
+	font-weight: 300;
+	line-height: 1.3;
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+.quote {
+	border: none;
+	margin: 20px 0 60px 0;
+}
+
+.quote p {
+	font-style: italic;
+}
+
+.quote p:before {
+	content: '“';
+	font-size: 50px;
+	opacity: .15;
+	position: absolute;
+	top: -20px;
+	left: 3px;
+}
+
+.quote p:after {
+	content: '”';
+	font-size: 50px;
+	opacity: .15;
+	position: absolute;
+	bottom: -42px;
+	right: 3px;
+}
+
+.quote footer {
+	position: absolute;
+	bottom: -40px;
+	right: 0;
+}
+
+.quote footer img {
+	border-radius: 3px;
+}
+
+.quote footer a {
+	margin-left: 5px;
+	vertical-align: middle;
+}
+
+.speech-bubble {
+	position: relative;
+	padding: 10px;
+	background: rgba(0, 0, 0, .04);
+	border-radius: 5px;
+}
+
+.speech-bubble:after {
+	content: '';
+	position: absolute;
+	top: 100%;
+	right: 30px;
+	border: 13px solid transparent;
+	border-top-color: rgba(0, 0, 0, .04);
+}
+
+.learn-bar > .learn {
+	position: absolute;
+	width: 272px;
+	top: 8px;
+	left: -300px;
+	padding: 10px;
+	border-radius: 5px;
+	background-color: rgba(255, 255, 255, .6);
+	-webkit-transition-property: left;
+	transition-property: left;
+	-webkit-transition-duration: 500ms;
+	transition-duration: 500ms;
+}
+
+@media (min-width: 899px) {
+	.learn-bar {
+		width: auto;
+		margin: 0 0 0 300px;
+	}
+
+	.learn-bar > .learn {
+		left: 8px;
+	}
+
+	.learn-bar #todoapp {
+		width: 550px;
+		margin: 130px auto 40px auto;
+	}
+}

examples/elm/bower_components/todomvc-common/base.js

+(function () {
+	'use strict';
+
+	// Underscore's Template Module
+	// Courtesy of underscorejs.org
+	var _ = (function (_) {
+		_.defaults = function (object) {
+			if (!object) {
+				return object;
+			}
+			for (var argsIndex = 1, argsLength = arguments.length; argsIndex < argsLength; argsIndex++) {
+				var iterable = arguments[argsIndex];
+				if (iterable) {
+					for (var key in iterable) {
+						if (object[key] == null) {
+							object[key] = iterable[key];
+						}
+					}
+				}
+			}
+			return object;
+		}
+
+		// By default, Underscore uses ERB-style template delimiters, change the
+		// following template settings to use alternative delimiters.
+		_.templateSettings = {
+			evaluate    : /<%([\s\S]+?)%>/g,
+			interpolate : /<%=([\s\S]+?)%>/g,
+			escape      : /<%-([\s\S]+?)%>/g
+		};
+
+		// When customizing `templateSettings`, if you don't want to define an
+		// interpolation, evaluation or escaping regex, we need one that is
+		// guaranteed not to match.
+		var noMatch = /(.)^/;
+
+		// Certain characters need to be escaped so that they can be put into a
+		// string literal.
+		var escapes = {
+			"'":      "'",
+			'\\':     '\\',
+			'\r':     'r',
+			'\n':     'n',
+			'\t':     't',
+			'\u2028': 'u2028',
+			'\u2029': 'u2029'
+		};
+
+		var escaper = /\\|'|\r|\n|\t|\u2028|\u2029/g;
+
+		// JavaScript micro-templating, similar to John Resig's implementation.
+		// Underscore templating handles arbitrary delimiters, preserves whitespace,
+		// and correctly escapes quotes within interpolated code.
+		_.template = function(text, data, settings) {
+			var render;
+			settings = _.defaults({}, settings, _.templateSettings);
+
+			// Combine delimiters into one regular expression via alternation.
+			var matcher = new RegExp([
+				(settings.escape || noMatch).source,
+				(settings.interpolate || noMatch).source,
+				(settings.evaluate || noMatch).source
+			].join('|') + '|$', 'g');
+
+			// Compile the template source, escaping string literals appropriately.
+			var index = 0;
+			var source = "__p+='";
+			text.replace(matcher, function(match, escape, interpolate, evaluate, offset) {
+				source += text.slice(index, offset)
+					.replace(escaper, function(match) { return '\\' + escapes[match]; });
+
+				if (escape) {
+					source += "'+\n((__t=(" + escape + "))==null?'':_.escape(__t))+\n'";
+				}
+				if (interpolate) {
+					source += "'+\n((__t=(" + interpolate + "))==null?'':__t)+\n'";
+				}
+				if (evaluate) {
+					source += "';\n" + evaluate + "\n__p+='";
+				}
+				index = offset + match.length;
+				return match;
+			});
+			source += "';\n";
+
+			// If a variable is not specified, place data values in local scope.
+			if (!settings.variable) source = 'with(obj||{}){\n' + source + '}\n';
+
+			source = "var __t,__p='',__j=Array.prototype.join," +
+				"print=function(){__p+=__j.call(arguments,'');};\n" +
+				source + "return __p;\n";
+
+			try {
+				render = new Function(settings.variable || 'obj', '_', source);
+			} catch (e) {
+				e.source = source;
+				throw e;
+			}
+
+			if (data) return render(data, _);
+			var template = function(data) {
+				return render.call(this, data, _);
+			};
+
+			// Provide the compiled function source as a convenience for precompilation.
+			template.source = 'function(' + (settings.variable || 'obj') + '){\n' + source + '}';
+
+			return template;
+		};
+
+		return _;
+	})({});
+
+	if (location.hostname === 'todomvc.com') {
+		window._gaq = [['_setAccount','UA-31081062-1'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'));
+	}
+
+	function redirect() {
+		if (location.hostname === 'tastejs.github.io') {
+			location.href = location.href.replace('tastejs.github.io/todomvc', 'todomvc.com');
+		}
+	}
+
+	function findRoot() {
+		var base = location.href.indexOf('examples/');
+		return location.href.substr(0, base);
+	}
+
+	function getFile(file, callback) {
+		if (!location.host) {
+			return console.info('Miss the info bar? Run TodoMVC from a server to avoid a cross-origin error.');
+		}
+
+		var xhr = new XMLHttpRequest();
+
+		xhr.open('GET', findRoot() + file, true);
+		xhr.send();
+
+		xhr.onload = function () {
+			if (xhr.status === 200 && callback) {
+				callback(xhr.responseText);
+			}
+		};
+	}
+
+	function Learn(learnJSON, config) {
+		if (!(this instanceof Learn)) {
+			return new Learn(learnJSON, config);
+		}
+
+		var template, framework;
+
+		if (typeof learnJSON !== 'object') {
+			try {
+				learnJSON = JSON.parse(learnJSON);
+			} catch (e) {
+				return;
+			}
+		}
+
+		if (config) {
+			template = config.template;
+			framework = config.framework;
+		}
+
+		if (!template && learnJSON.templates) {
+			template = learnJSON.templates.todomvc;
+		}
+
+		if (!framework && document.querySelector('[data-framework]')) {
+			framework = document.querySelector('[data-framework]').dataset.framework;
+		}
+
+
+		if (template && learnJSON[framework]) {
+			this.frameworkJSON = learnJSON[framework];
+			this.template = template;
+
+			this.append();
+		}
+	}
+
+	Learn.prototype.append = function () {
+		var aside = document.createElement('aside');
+		aside.innerHTML = _.template(this.template, this.frameworkJSON);
+		aside.className = 'learn';
+
+		// Localize demo links
+		var demoLinks = aside.querySelectorAll('.demo-link');
+		Array.prototype.forEach.call(demoLinks, function (demoLink) {
+			demoLink.setAttribute('href', findRoot() + demoLink.getAttribute('href'));
+		});
+
+		document.body.className = (document.body.className + ' learn-bar').trim();
+		document.body.insertAdjacentHTML('afterBegin', aside.outerHTML);
+	};
+
+	redirect();
+	getFile('learn.json', Learn);
+})();

examples/elm/bower_components/todomvc-common/bower.json

+{
+  "name": "todomvc-common",
+  "description": "Common TodoMVC utilities used by our apps",
+  "license": "MIT",
+  "authors": [
+    "TasteJS team"
+  ],
+  "main": [
+    "base.js",
+    "base.css"
+  ],
+  "keywords": [
+    "todomvc",
+    "tastejs",
+    "util",
+    "utilities"
+  ],
+  "ignore": [
+    "package.json",
+    "readme.md"
+  ]
+}

examples/elm/elm-package.json

+{
+    "version": "1.0.0",
+    "summary": "TodoMVC created with Elm and elm-html",
+    "repository": "https://github.com/evancz/elm-todomvc.git",
+    "license": "BSD3",
+    "source-directories": [
+        "."
+    ],
+    "exposed-modules": [],
+    "dependencies": {
+        "elm-lang/core": "1.0.0 <= v < 2.0.0",
+        "evancz/elm-html": "1.0.0 <= v < 2.0.0",
+        "evancz/local-channel": "1.0.0 <= v < 2.0.0"
+    }
+}
\ No newline at end of file

examples/elm/index.html

+<!doctype html>
+<html lang="en" data-framework="elm">
+<head>
+	<meta charset="utf-8">
+	<title>Elm • TodoMVC</title>
+	<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
+	<style>
+		body {
+			width: auto;
+		}
+		.todomvc-wrapper {
+			visibility: visible !important;
+		}
+	</style>
+</head>
+
+<body>
+<script src="elm.js"></script>
+<script>
+	(function () {
+		var result = localStorage.getItem('elm-todo-model');
+		var savedModel = result ? JSON.parse(result) : null;
+
+		var todomvc = Elm.fullscreen(Elm.Todo, {
+			savedModel: savedModel,
+			route: getRoute()
+		});
+
+		todomvc.ports.save.subscribe(function (model) {
+			localStorage.setItem('elm-todo-model', JSON.stringify(model));
+		});
+
+		// Routing
+		window.addEventListener('popstate', function () {
+			todomvc.ports.route.send(getRoute());
+		}, false);
+
+		function getRoute() {
+			var hash = location.href.split('#')[1] || '';
+			var route = hash.replace('/', '');
+			if (['all', 'active', 'completed'].indexOf(route) >= 0) {
+				return route[0].toUpperCase() + route.substr(1);
+			}
+			return 'All';
+		}
+
+		// Setting focus manually
+		todomvc.ports.focus.subscribe(function (id) {
+			setTimeout(function () {
+				if (id === null) {
+					return;
+				}
+				var node = document.getElementById('todo-' + id);
+				if (document.activeElement !== node) {
+					node.focus();
+				}
+			}, 50);
+		});
+	}());
+</script>
+<script async src="bower_components/todomvc-common/base.js"></script>
+</body>
+</html>

examples/elm/readme.md

+# Elm TodoMVC Example
+
+> A functional reactive language for interactive applications
+
+> _[Elm](http://elm-lang.org/)_
+
+
+## Learning Elm
+
+The [Elm website](http://elm-lang.org/) is a great resource for getting
+started.
+
+Here are some links you may find helpful:
+
+* [Try Elm](http://elm-lang.org/try)
+* [Learn Elm](http://elm-lang.org/Learn.elm)
+* [Elm Snippets](http://www.share-elm.com/)
+
+Get help from other Elm users:
+
+* [elm-discuss mailing list](https://groups.google.com/forum/?fromgroups#!forum/elm-discuss)
+* [@elmlang on Twitter](https://twitter.com/elmlang)
+* [@czaplic on Twitter](https://twitter.com/czaplic)
+
+_If you have other helpful links to share, or find any of the links above no longer work, please [let us know](https://github.com/tastejs/todomvc/issues)._
+
+
+
+## Project Structure
+
+All of the Elm code lives in `Todo.elm` and `Task.elm` and relies
+on the [elm-html][] library.
+
+[elm-html]: http://library.elm-lang.org/catalog/evancz-elm-html/latest
+
+There also is a port handler set up in `index.html` to set the focus on
+particular text fields when necessary.
+
+## Build Instructions
+
+You need to install
+[elm](https://github.com/elm-lang/elm-platform/blob/master/README.md#elm-platform)
+on your machine first.
+
+Run the following commands from the root of this project:
+
+```bash
+elm-package install
+elm-make Todo.elm --output build/Todo.js
+```
+
+Then open `index.html` in your browser!
+
+## Credit
+
+This TodoMVC application was created by [@evancz](https://github.com/evancz), and imported into TasteJS by [@passy](https://twitter.com/passy).

learn.json

@@ -292,6 +292,34 @@
 			}]
 		}]
 	},
+	"elm": {
+		"name": "Elm",
+		"description": "A functional reactive language for interactive applications",
+		"homepage": "http://elm-lang.org/",
+		"examples": [{
+			"name": "Example",
+			"url": "examples/elm"
+		}],
+		"link_groups": [{
+			"heading": "Official Resources",
+			"links": [{
+				"name": "Project Site",
+				"url": "http://elm-lang.org/"
+			}, {
+				"name": "Guides",
+				"url": "http://elm-lang.org/Learn.elm"
+			}, {
+				"name": "Syntax Reference",
+				"url": "http://elm-lang.org/learn/Syntax.elm"
+			}, {
+				"name": "Libraries",
+				"url": "http://elm-lang.org/Libraries.elm"
+			}, {
+				"name": "#elm IRC Channel on Freenode",
+				"url": "https://botbot.me/freenode/elm/"
+			}]
+		}]
+	},
 	"batman": {
 		"name": "Batman.js",
 		"description": "A client-side framework for Rails developers. Batman.js is a framework for building rich web applications with CoffeeScript.",