mirror of
https://github.com/correl/elm-mdl.git
synced 2024-11-15 11:09:31 +00:00
158 lines
3.5 KiB
Elm
158 lines
3.5 KiB
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
|