elm-mdl/examples/Component.elm

import StartApp
import Html exposing (..)
import Html.Attributes exposing (href, class, style)
import Effects exposing (Effects, Never)
import Task exposing (Task)

import Material
import Material.Scheme
import Material.Button as Button


-- MODEL


type alias Model = 
  { count : Int
  , mdl : Material.Model Action
      -- Boilerplate: mdl is the Model store for any and all MDL components you need. 
  }


model : Model 
model = 
  { count = 0
  , mdl = Material.model 
      -- Boilerplate: Always use this initial MDL model store.
  }


-- ACTION, UPDATE


type Action
  = Increase
  | Reset
  | MDL (Material.Action Action)   
      -- Boilerplate: Action for MDL actions (ripple animations etc.).


update : Action -> Model -> (Model, Effects Action)
update action model =
  case Debug.log "" action of
    Increase -> 
      ( { model | count = model.count + 1 } 
      , Effects.none
      )

    Reset -> 
      ( { model | count = 0 }
      , Effects.none
      )

    {- Boilerplate: MDL action handler. It should always look like this, except
       you can of course choose to put its saved model someplace other than 
       model.mdl.
    -}
    MDL action' -> 
      let (mdl', fx) = 
        Material.update MDL action' model.mdl 
      in 
        ( { model | mdl = mdl' } , fx )


-- VIEW


type alias Mdl = Material.Model Action


{- We construct the instances of the Button component that we need, one 
for the increase button, one for the reset button. First, the increase
button. The arguments are: 

  - An instance id (the `0`). Every component that uses the same model collection
    (model.mdl in this file) must have a distinct instance id. 
  - An Action creator (`MDL`), lifting MDL actions to your Action type. 
  - A button view (`flat`). 
  - An initial model (`(Button.model True)`---a button with a ripple animation. 
  - A list of observations you want to make of the button (final argument). 
    In this case, we hook up Click events of the button to the `Increase` action
    defined above. 
-}
increase : Button.Instance Mdl Action
increase =
  Button.instance 0 MDL Button.flat (Button.model True) 
    [ Button.fwdClick Increase ]


{- Next, the reset button. This one has id 1, does not ripple, and forwards its
click event to our Reset action.
-}
reset : Button.Instance Mdl Action
reset = 
  Button.instance 1 MDL Button.flat (Button.model False)
    [ Button.fwdClick Reset ]


{- Notice that we did not have to add increase and reset separately to model.mdl, 
and we did not have to add to our update actions to handle their internal events.
-}


view : Signal.Address Action -> Model -> Html
view addr model =
  div
    [ style
      [ ("margin", "auto")
      , ("padding-left", "5%")
      , ("padding-right", "5%")
      ]
    ]
    [ text ("Current count: " ++ toString model.count )
    , increase.view addr model.mdl [] [ text "Increase" ]
    , reset.view    addr model.mdl [] [ text "Reset" ]
    -- Note that we use the .view function of our component instances to
    -- actually render the component. 
    ]
  |> Material.Scheme.top
  

{- The remainder of this file is Elm/StartApp boilerplate.
-}


-- SETUP


init : (Model, Effects.Effects Action)
init = (model, Effects.none)


inputs : List (Signal.Signal Action)
inputs =
  [ 
  ]


app : StartApp.App Model
app =
    StartApp.start
      { init = init
      , view = view
      , update = update
      , inputs = inputs
      }


main : Signal Html
main =
    app.html


-- PORTS


port tasks : Signal (Task Never ())
port tasks =
    app.tasks