Added Snackbar

Makefile

@@ -1,7 +1,17 @@
 PAGES=../elm-mdl-gh-pages
 
+elm.js: 
+	elm-make examples/Demo.elm --output elm.js
+
 pages : 
 	elm-make examples/Demo.elm --output $(PAGES)/elm.js
 	(cd $(PAGES); git commit -am "Update."; git push origin gh-pages)
 
-.phony : pages
+clean :
+	rm -f elm.js index.html
+
+distclean : clean
+	rm -rf elm-stuff
+
+
+.PHONY : pages elm.js clean distclean

elm-package.json

@@ -20,6 +20,7 @@
         "elm-lang/core": "3.0.0 <= v < 4.0.0",
         "evancz/elm-effects": "2.0.1 <= v < 3.0.0",
         "evancz/elm-html": "4.0.2 <= v < 5.0.0",
+        "evancz/elm-markdown": "2.0.1 <= v < 3.0.0",
         "evancz/start-app": "2.0.2 <= v < 3.0.0"
     },
     "elm-version": "0.16.0 <= v < 0.17.0"

examples/Demo.elm

@@ -8,12 +8,14 @@ import Signal
 import Task exposing (Task)
 import Array exposing (Array)
 
+import Material.Color as Color
 import Material.Layout as Layout exposing (defaultLayoutModel)
-import Material
+import Material exposing (lift, lift')
 
 import Demo.Buttons
 import Demo.Grid
 import Demo.Textfields
+import Demo.Snackbar
 
 
 -- MODEL
@@ -23,6 +25,7 @@ type alias Model =
   { layout : Layout.Model
   , buttons : Demo.Buttons.Model
   , textfields : Demo.Textfields.Model
+  , snackbar : Demo.Snackbar.Model
   }
 
 
@@ -38,6 +41,7 @@ model =
   { layout = layoutModel
   , buttons = Demo.Buttons.model
   , textfields = Demo.Textfields.model
+  , snackbar = Demo.Snackbar.model
   }
 
 
@@ -48,27 +52,16 @@ type Action
   = LayoutAction Layout.Action
   | ButtonsAction Demo.Buttons.Action
   | TextfieldAction Demo.Textfields.Action
+  | SnackbarAction Demo.Snackbar.Action
 
 
 update : Action -> Model -> (Model, Effects.Effects Action)
 update action model =
-  case action of
+  case Debug.log "Action: " action of
-    LayoutAction a ->
+    LayoutAction a -> lift .layout (\m x->{m|layout=x}) LayoutAction Layout.update a model
-      let
+    ButtonsAction a -> lift .buttons (\m x->{m|buttons=x}) ButtonsAction Demo.Buttons.update a model
-        (l, e) = Layout.update a model.layout
+    TextfieldAction a -> lift' .textfields (\m x->{m|textfields=x}) Demo.Textfields.update a model
-      in
+    SnackbarAction a -> lift .snackbar (\m x->{m|snackbar=x}) SnackbarAction Demo.Snackbar.update a model
-        ({ model | layout = l }, Effects.map LayoutAction e)
-
-    ButtonsAction a ->
-      let
-        (b, e) = Demo.Buttons.update a model.buttons
-      in
-        ({ model | buttons = b }, Effects.map ButtonsAction e)
-
-    TextfieldAction a ->
-      ({ model | textfields = Demo.Textfields.update a model.textfields }
-      , Effects.none
-      )
 
 
 -- VIEW
@@ -109,10 +102,12 @@ header =
 
 tabs : List (String, Addr -> Model -> List Html)
 tabs =
-  [ ("Buttons", \addr model ->
+  [ ("Snackbar", \addr model ->
-      [Demo.Buttons.view (Signal.forwardTo addr ButtonsAction) model.buttons])
+      [Demo.Snackbar.view (Signal.forwardTo addr SnackbarAction) model.snackbar])
   , ("Textfields", \addr model ->
       [Demo.Textfields.view (Signal.forwardTo addr TextfieldAction) model.textfields])
+  , ("Buttons", \addr model ->
+      [Demo.Buttons.view (Signal.forwardTo addr ButtonsAction) model.buttons])
   , ("Grid", \addr model -> Demo.Grid.view)
   ]
 
@@ -151,7 +146,7 @@ view addr model =
        your html, as done with page.html. Removing it will then
        fix the flicker you see on load.
     -}
-    |> Material.topWithColors Material.Teal Material.Red
+    |> Material.topWithColors Color.Teal Color.Red
 
 
 init : (Model, Effects.Effects Action)

src/Material.elm

@@ -1,67 +1,25 @@
 module Material
-  ( Color(..), topWithColors, top
+  ( topWithColors, top
+  , Updater', Updater, lift, lift'
   ) where
 
 {-| Material Design component library for Elm based on Google's
 [Material Design Lite](https://www.getmdl.io/).
 
-This file contains CSS loaders only.
+# Loading CSS
+@docs topWithColors, top
 
-@docs Color, topWithColors, top
+# Component convienience
+@docs Updater', Updater, lift', lift
 -}
 
 
 import String
 import Html exposing (..)
 import Html.Attributes exposing (..)
+import Effects exposing (..)
 
-
+import Material.Color exposing (..)
-{-| Possible colors for color scheme.
--}
-type Color
-  = Indigo
-  | Blue
-  | LightBlue
-  | Cyan
-  | Teal
-  | Green
-  | LightGreen
-  | Lime
-  | Yellow
-  | Amber
-  | Orange
-  | Brown
-  | BlueGrey
-  | Grey
-  | DeepOrange
-  | Red
-  | Pink
-  | Purple
-  | DeepPurple
-
-
-toString : Color -> String
-toString color =
-  case color of
-    Indigo -> "indigo"
-    Blue -> "blue"
-    LightBlue -> "light-blue"
-    Cyan -> "cyan"
-    Teal -> "teal"
-    Green -> "green"
-    LightGreen -> "light-green"
-    Lime -> "lime"
-    Yellow -> "yellow"
-    Amber -> "amber"
-    Orange -> "orange"
-    Brown -> "brown"
-    BlueGrey -> "blue-grey"
-    Grey -> "grey"
-    DeepOrange -> "deep-orange"
-    Red -> "red"
-    Pink -> "pink"
-    Purple -> "purple"
-    DeepPurple -> "deep-purple"
 
 
 css : Color -> Color -> String
@@ -71,7 +29,9 @@ css primary accent =
       Grey -> ""
       Brown -> ""
       BlueGrey -> ""
-      _ -> "." ++ toString primary ++ "-" ++ toString accent
+      Primary -> ""
+      Accent -> ""
+      _ -> "." ++ cssName primary ++ "-" ++ cssName accent
   in
     [ "https://code.getmdl.io/1.1.1/material" ++ cssFile ++ ".min.css"
     , "https://fonts.googleapis.com/icon?family=Material+Icons"
@@ -124,3 +84,50 @@ top : Html -> Html
 top content =
   -- Force default color-scheme by picking an invalid combination.
   topWithColors Grey Grey content
+
+
+
+
+{-| TODO.
+-}
+type alias Updater' action model =
+  action -> model -> model
+
+
+{-| TODO.
+-}
+type alias Updater action model =
+  action -> model -> (model, Effects action)
+
+type alias ComponentModel model components =
+  { model | components : components }
+
+
+{-| TODO.
+-}
+lift' :
+  (model -> submodel) ->                                      -- get
+  (model -> submodel -> model) ->                             -- set
+  Updater' subaction submodel ->                               -- update
+  subaction ->                                                -- action
+  model ->                                                    -- model
+  (model, Effects action)
+lift' get set update action model =
+  (set model (update action (get model)), Effects.none)
+
+
+{-| TODO.
+-}
+lift :
+  (model -> submodel) ->                                      -- get
+  (model -> submodel -> model) ->                             -- set
+  (subaction -> action) ->                                    -- fwd
+  Updater subaction submodel ->                               -- update
+  subaction ->                                                -- action
+  model ->                                                    -- model
+  (model, Effects action)
+lift get set fwd update action model =
+  let
+    (submodel', e) = update action (get model)
+  in
+    (set model submodel', Effects.map fwd e)

src/Material/Grid.elm

@@ -3,6 +3,7 @@ module Material.Grid
   , cell
   , Device(..)
   , Align(..)
+  , CellConfig
   , size
   , offset
   , align
@@ -61,7 +62,7 @@ Cells are configured with a `List CellConfig`; this configuration dictates the
 size, offset, and alignment behaviour of the cell. Construct
 individual `CellConfig` elements using `size`, `offset`, and `align`.
 
-@docs cell, Device, size, offset, Align, align, hide, order
+@docs cell, CellConfig, Device, size, offset, Align, align, hide, order
 -}
 
 
@@ -135,7 +136,7 @@ encapsulates a screen size.)
 type Device = All | Desktop | Tablet | Phone
 
 
-{- Cell configuration. Construct with `size`, `offset`, and `align`.
+{-| Opaque type; construct with `size`, `offset`, `align`, etc.
 -}
 type CellConfig = Config String
 

src/Material/Helpers.elm

@@ -28,6 +28,14 @@ pure : a -> (a, Effects b)
 pure = effect Effects.none
 
 
+addFx : Effects a -> (model, Effects a) -> (model, Effects a)
+addFx effect1 (model, effect2) =
+  (model, Effects.batch [effect1, effect2])
+
+mapFx : (a -> b) -> (model, Effects a) -> (model, Effects b)
+mapFx f (model, effect) =
+  (model, Effects.map f effect)
+
 clip : comparable -> comparable -> comparable -> comparable
 clip lower upper k = Basics.max lower (Basics.min k upper)