From c06b99e72348d4c30aaf3b9ebc6f8351380a4c2a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B8ren=20Debois?= Date: Sun, 13 Mar 2016 23:11:20 +0100 Subject: [PATCH] README --- .gitignore | 2 ++ Demo/Textfields.elm | 52 ++++++++++++++++++++++++++++++++++++++++++ Native/Material.js | 50 +++++++++++++++++++++++++++++++++++++++++ README.md | 55 +++++++++++++++++++++++++++++++++++++++++++++ components.html | 21 ----------------- 5 files changed, 159 insertions(+), 21 deletions(-) create mode 100644 Demo/Textfields.elm create mode 100644 Native/Material.js create mode 100644 README.md delete mode 100644 components.html diff --git a/.gitignore b/.gitignore index 4ad753b..7b256f2 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,4 @@ elm-stuff .*.sw? +elm.js +index.html diff --git a/Demo/Textfields.elm b/Demo/Textfields.elm new file mode 100644 index 0000000..e5634b0 --- /dev/null +++ b/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 diff --git a/Native/Material.js b/Native/Material.js new file mode 100644 index 0000000..a6efe64 --- /dev/null +++ b/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) + } +} diff --git a/README.md b/README.md new file mode 100644 index 0000000..3f64018 --- /dev/null +++ b/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) diff --git a/components.html b/components.html deleted file mode 100644 index 56dc12b..0000000 --- a/components.html +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - elm-mdl-demo - - - - - - - - - - - -