Updated template

demo/Demo.elm

@@ -27,7 +27,6 @@ import Demo.Textfields
 import Demo.Snackbar
 import Demo.Badges
 import Demo.Elevation
-
 --import Demo.Template
 
 
@@ -89,7 +88,7 @@ model =
   , buttons = Demo.Buttons.model
   , textfields = Demo.Textfields.model
   , snackbar = Demo.Snackbar.model
-      --, template = Demo.Template.model
+  --, template = Demo.Template.model
   }
 
 
@@ -106,7 +105,7 @@ type Action
   | ButtonsAction Demo.Buttons.Action
   | TextfieldAction Demo.Textfields.Action
   | SnackbarAction Demo.Snackbar.Action
---| TemplateAction Demo.Template.Action
+--  | TemplateAction Demo.Template.Action
 
 
 nth : Int -> List a -> Maybe a
@@ -202,10 +201,8 @@ tabs =
       Demo.Snackbar.view (Signal.forwardTo addr SnackbarAction) model.snackbar)
   , ("Textfields", "textfields", \addr model ->
       Demo.Textfields.view (Signal.forwardTo addr TextfieldAction) model.textfields)
-  {-
-  , ("Template", "tempate", \addr model -> 
-      [Demo.Template.view (Signal.forwardTo addr TemplateAction) model.template])
-  -}
+  --, ("Template", "tempate", \addr model -> 
+  --    Demo.Template.view (Signal.forwardTo addr TemplateAction) model.template)
   ]
 
 

demo/Demo/Template.elm

@@ -3,23 +3,28 @@ module Demo.Template where
 import Effects exposing (Effects, none)
 import Html exposing (..)
 
-import Markdown
-
 import Material.Template as Template
-import Material exposing (lift, lift')
+import Material.Helpers exposing (map1st)
+import Material 
+
+import Demo.Page as Page
 
 
 -- MODEL
 
 
+type alias Mdl = 
+  Material.Model 
+
+
 type alias Model =
-  { template : Template.Model
+  { mdl : Material.Model
   }
 
 
 model : Model
 model =
-  { template = Template.model
+  { mdl = Material.model
   }
 
 
@@ -27,47 +32,56 @@ model =
 
 
 type Action 
-  = TemplateAction Template.Action
+  = TemplateAction 
+  | MDL (Material.Action Action)
 
 
 update : Action -> Model -> (Model, Effects Action)
 update action model =
   case action of
-    TemplateAction action' -> lift .template (\m x -> {m|template=x}) TemplateAction Template.update action' model
+    TemplateAction -> 
+      (model, Effects.none)
+
+    MDL action' -> 
+      Material.update MDL action' model.mdl
+        |> map1st (\m -> { model | mdl = m })
 
 
 -- VIEW
 
 
+template = 
+  Template.instance 0 MDL Template.model 
+    [ Template.fwdTemplate TemplateAction ]
+
 
 view : Signal.Address Action -> Model -> Html
 view addr model =
-  div []
-    [ intro
-    , Template.view (Signal.forwardTo addr TemplateAction) model.template
-    ]
-
+  [ div 
+      [] 
+      [ template.view addr model.mdl []
+      ]
+  ]
+  |> Page.body2 "TEMPLATE" srcUrl intro references
 
 
 intro : Html
-intro = """
-# TEMPLATE
-
-From the
-[Material Design Lite documentation](https://www.getmdl.io/components/index.html#TEMPLATE-section).
-
+intro = 
+  Page.fromMDL "https://www.getmdl.io/components/index.html#TEMPLATE-section" """
 > ...
-
-#### See also
-
- - [Demo source code](https://github.com/debois/elm-mdl/blob/master/examples/Demo/TEMPLATE.elm)
- - [elm-mdl package documentation](http://package.elm-lang.org/packages/debois/elm-mdl/latest/Material-TEMPLATE)
- - [Material Design Specification](https://www.google.com/design/spec/components/TEMPLATE.html)
- - [Material Design Lite documentation](https://www.getmdl.io/components/index.html#TEMPLATE)
-
-#### Demo
-
-""" |> Markdown.toHtml
+""" 
 
 
+srcUrl : String 
+srcUrl =
+  "https://github.com/debois/elm-mdl/blob/master/demo/Demo/TEMPLATE.elm"
+
+
+references : List (String, String)
+references = 
+  [ Page.package "http://package.elm-lang.org/packages/debois/elm-mdl/latest/Material-TEMPLATE"
+  , Page.mds "https://www.google.com/design/spec/components/TEMPLATE.html"
+  , Page.mdl "https://www.getmdl.io/components/index.html#TEMPLATE"
+  ]
+
 

src/Material.elm

@@ -164,7 +164,7 @@ import Material.Button as Button
 import Material.Textfield as Textfield
 import Material.Snackbar as Snackbar
 import Material.Component as Component exposing (Indexed)
-
+--import Material.Template as Template
 
 {-| Model encompassing all Material components. Since some components store
 user actions in their model (notably Snackbar), the model is generic in the 
@@ -174,6 +174,7 @@ type alias Model =
   { button : Indexed Button.Model
   , textfield : Indexed Textfield.Model
   , snackbar : Maybe (Snackbar.Model Int) 
+--  , template : Indexed Template.Model
   }
 
 
@@ -184,6 +185,7 @@ model =
   { button = Dict.empty
   , textfield = Dict.empty
   , snackbar = Nothing
+--, template = Dict.empty
   }
 
 

src/Material/Template.elm

@@ -2,6 +2,8 @@ module Material.Template
   ( Model, model
   , Action, update
   , view
+  , instance, fwdTemplate
+  , Container, Observer, Instance
   ) where
 
 -- TEMPLATE. Copy this to a file for your component, then update.
@@ -13,18 +15,24 @@ module Material.Template
 See also the
 [Material Design Specification]([https://www.google.com/design/spec/components/TEMPLATE.html).
 
-# Component
-@docs Model, model, Action, update
+Refer to [this site](http://debois.github.io/elm-mdl#/template)
+for a live demo.
 
-# View
+@docs Model, model, Action, update
 @docs view
 
+# Component support
+
+@docs Container, Observer, Instance, instance, fwdTemplate
 -}
 
 
 import Effects exposing (Effects, none)
 import Html exposing (..)
 
+import Material.Component as Component exposing (Indexed)
+import Material.Style as Style exposing (Style, cs, css')
+
 
 -- MODEL
 
@@ -65,6 +73,57 @@ update action model =
 
 {-| Component view.
 -}
-view : Signal.Address Action -> Model -> Html
-view addr model =
-  div [] [ h1 [] [ text "TEMPLATE" ] ]
+view : Signal.Address Action -> Model -> List Style -> Html
+view addr model styles =
+  Style.div 
+    ( cs "TEMPLATE"
+    :: styles
+    ) 
+    [ h1 [] [ text "TEMPLATE" ] ]
+
+
+-- COMPONENT
+
+
+{-|
+-}
+type alias Container c =
+  { c | template : Indexed Model }
+
+
+{-|
+-}
+type alias Observer obs = 
+  Component.Observer Action obs
+
+
+{-|
+-}
+type alias Instance container obs =
+  Component.Instance 
+    Model container Action obs (List Style -> Html)
+
+
+{-| Create a component instance. Example usage, assuming you have a type
+`Action` with a constructor ...
+-}
+instance : 
+  Int
+  -> (Component.Action (Container c) obs -> obs)
+  -> Model
+  -> List (Observer obs)
+  -> Instance (Container c) obs
+
+instance id lift model0 observers = 
+  Component.instance 
+    view update .template (\x y -> {y | template = x}) id lift model0 observers
+
+
+{-| 
+-}
+fwdTemplate : obs -> (Observer obs)
+fwdTemplate obs action = 
+  case action of 
+    MyAction -> Just obs
+
+