README

.gitignore

@@ -1,2 +1,4 @@
 elm-stuff
 .*.sw?
+elm.js
+index.html

Demo/Textfields.elm

@@ -0,0 +1,52 @@
+module Demo.Textfields where
+
+import Array exposing (Array)
+import Html exposing (Html)
+
+import Material.Textfield as Textfield
+import Material.Grid as Grid exposing (..)
+
+
+type alias Model = Array Textfield.Model
+
+
+model : Model
+model =
+  let t0 = Textfield.model in
+  [ t0
+  , { t0 | label = Just { text = "Labelled", float = False } }
+  , { t0 | label = Just { text = "Floating label", float = True }}
+  , { t0
+    | label = Just { text = "Disabled", float = False }
+    , isDisabled = True
+    }
+  , { t0
+    | label = Just { text = "With error and value", float = False }
+    , error = Just "The input is wrong!"
+    , value = "Incorrect input"
+    }
+  ]
+  |> Array.fromList
+
+
+type Action =
+  Field Int Textfield.Action
+
+
+update : Action -> Model -> Model
+update (Field k action) fields =
+  Array.get k fields
+  |> Maybe.map (Textfield.update action)
+  |> Maybe.map (\field' -> Array.set k field' fields)
+  |> Maybe.withDefault fields
+
+
+view : Signal.Address Action -> Model -> Html
+view addr model =
+  model
+  |> Array.indexedMap (\k field ->
+    Textfield.view (Signal.forwardTo addr (Field k)) field
+  )
+  |> Array.toList
+  |> List.map (\x -> cell [size All 3] [x])
+  |> grid

Native/Material.js

@@ -0,0 +1,50 @@
+/*
+ * Helper functions for accessing Google Material Design lite.
+ */
+
+// ELM Boilerplate
+Elm.Native.Material = {};
+Elm.Native.Material.make = function(elm) {
+  elm.Native = elm.Native || {};
+  elm.Native.Material = elm.Native.Material || {};
+  if (elm.Native.Material.values) {
+    return elm.Native.Material.values;
+  }
+
+  var Signal = Elm.Native.Signal.make(elm);
+  var Json = Elm.Native.Json.make(elm);
+
+  function property(key, value) {
+    return { key: key, value: value };
+  }
+
+  function on(name, options, decoder, createMessage)
+  {
+    function eventHandler(event)
+    {
+      if (options.withGeometry)
+      {
+        event.boundingClientRect = event.currentTarget.getBoundingClientRect();
+      }
+      var value = A2(Json.runDecoderValue, decoder, event);
+      if (value.ctor === 'Ok')
+      {
+        if (options.stopPropagation)
+        {
+          event.stopPropagation();
+        }
+        if (options.preventDefault)
+        {
+          event.preventDefault();
+        }
+        Signal.sendMessage(createMessage(value._0));
+      }
+    }
+
+    return property('on' + name, eventHandler);
+  }
+
+  return elm.Native.Material.values = {
+    on : F4(on)
+  }
+}

README.md

@@ -0,0 +1,55 @@
+# Material Design Components in Elm
+
+Port of Google's
+[Material Design Lite](https://www.getmdl.io/)
+CSS/JS implementation of the
+[Material Design Specification](https://www.google.com/design/spec/material-design/introduction.html).
+
+MDL is implemented primarily through CSS, with a little bit of Javascript
+adding and removing CSS classes in response to DOM events. This port
+re-implements the CSS parts in Elm, but relies on the CSS of MDL verbatim.
+
+*CAUTION* This is an early and incomplete prototype. Use at your own risk.
+
+
+### Get Started
+
+Build the demo:
+
+    > elm-make Demo.elm
+
+This will construct a file `index.html`; open that in your browser.
+
+The library has a tiny native component (for measuring geometry of rendered
+  elements, a necessity for re-implementing MDL ripple-animations), and so
+  cannot be in the elm-package library. If you wish to use the library, I
+  know no better way than to copy `Material.elm` and `Material/*` to your
+  own project. 
+
+
+### Contribute
+
+Please do! The easiest place to start is to add more CSS-only components. These require no porting of Javascript, just putting together css-classes as instructed by the [MDL Component Documentation](https://www.getmdl.io/components/index.html). Take a look at
+
+ - [Badges](https://www.getmdl.io/components/index.html#badges-section)
+ - [Cards](https://www.getmdl.io/components/index.html#cards-section)
+ - [Dialogs](https://www.getmdl.io/components/index.html#dialog-section)
+ - [Footers](https://www.getmdl.io/components/index.html#layout-section/footer)
+ - [Lists](https://www.getmdl.io/components/index.html#lists-section)
+ - [Shadows](https://github.com/google/material-design-lite/tree/v1.1.2/src/shadow)
+
+The remaining components, use Javascript
+in various ways. Toggles seem to use Javascript exclusively to insert ripple-animations and __might__ be easy to implement using the `Ripple.elm`
+component:
+
+ - [Toggles](https://www.getmdl.io/components/index.html#toggles-section)
+
+The rest I haven't looked at; they may or may not be straightforward to port
+to Elm.
+
+ - [Tables](https://www.getmdl.io/components/index.html#tables-section)
+ - [Spinners](https://www.getmdl.io/components/index.html#loading-section)
+ - [Sliders](https://www.getmdl.io/components/index.html#sliders-section)
+ - [Menus](https://www.getmdl.io/components/index.html#menus-section)
+ - [Snackbars](https://www.getmdl.io/components/index.html#snackbar-section)
+ - [Tooltips](https://www.getmdl.io/components/index.html#tooltips-section)

components.html

@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-    <title>elm-mdl-demo</title>
-
-    <!-- MDL -->
-    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500|Roboto+Mono|Roboto+Condensed:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.min.css" />
-
-  </head>
-  <body>
-    <!-- elm -->
-    <script src="elm.js"></script>
-    <script>
-      app = Elm.fullscreen(Elm.Main);
-    </script>
-  </body>