elm-mdl/Demo.elm

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

import Material.Textfield as Textfield
import Material.Grid as Grid exposing (Device(..))
import Material.Layout as Layout

import Buttons


-- MODEL


type alias Model =
  { layout : Layout.Model
  , buttons : Buttons.Model
  , t0 : Textfield.Model
  , t1 : Textfield.Model
  , t2 : Textfield.Model
  , t3 : Textfield.Model
  , t4 : Textfield.Model
  }


layoutModel : Layout.Model
layoutModel =
  { selectedTab = "Buttons"
  , isDrawerOpen = False
  , state = Layout.initState ["Buttons", "Grid", "Textfields"]
  }


model : Model
model =
  let t0 = Textfield.model in
  { layout = layoutModel
  , buttons = Buttons.model
  , t0 = t0
  , t1 = { t0 | label = Just { text = "Labelled", float = False } }
  , t2 = { t0 | label = Just { text = "Floating label", float = True }}
  , t3 = { t0
         | label = Just { text = "Disabled", float = False }
         , isDisabled = True
         }
  , t4 = { t0
           | label = Just { text = "With error and value", float = False }
           , error = Just "The input is wrong!"
           , value = "Incorrect input"
           }
  }


-- ACTION, UPDATE


type Action
  = LayoutAction Layout.Action
  | ButtonsAction Buttons.Action
  | T0 Textfield.Action
  | T1 Textfield.Action
  | T2 Textfield.Action
  | T3 Textfield.Action
  | T4 Textfield.Action


update : Action -> Model -> (Model, Effects.Effects Action)
update action model =
  case action of
    LayoutAction a ->
      let
        (l, e) = Layout.update a model.layout
      in
        ({ model | layout = l }, Effects.map LayoutAction e)

    ButtonsAction a ->
      let (b, e) = Buttons.update a model.buttons
      in
        ({ model | buttons = b }, Effects.map ButtonsAction e)

    T0 a ->
      ({ model | t0 = Textfield.update a model.t0 }, Effects.none)

    T1 a ->
      ({ model | t1 = Textfield.update a model.t1 }, Effects.none)

    T2 a ->
      ({ model | t2 = Textfield.update a model.t2 }, Effects.none)

    T3 a ->
      ({ model | t3 = Textfield.update a model.t3 }, Effects.none)

    T4 a ->
      ({ model | t4 = Textfield.update a model.t4 }, Effects.none)


-- VIEW


type alias Addr = Signal.Address Action


layoutConfig : Layout.Config
layoutConfig = Layout.defaultConfig


drawer : List Html
drawer =
  [ Layout.title "elm-mdl"
  , Layout.navigation
    [ Layout.link [] [text "Dead Link 1"]
    , Layout.link [] [text "Dead Link 2"]
    , Layout.link [] [text "Dead Link 3"]
    ]
  ]


header : List Html
header =
  [ Layout.title "elm-mdl"
  , Layout.spacer
  , Layout.navigation
    [ Layout.link
      [ href "https://www.getmdl.io/components/index.html" ]
      [ text "MDL" ]
    ]
  ]


tabGrid : Addr -> Model -> List Html
tabGrid addr model =
  [ Grid.grid
      [ Grid.cell [ Grid.col All 4 ]
          [ h4 [] [text "Cell 1"] ]
      , Grid.cell [ Grid.offset All 2, Grid.col All 4 ]
          [ h4 [] [text "Cell 2"], p [] [text "This cell is offset by 2"] ]
      , Grid.cell [ Grid.col All 6 ]
          [ h4 [] [text "Cell 3"] ]
      , Grid.cell [ Grid.col Tablet 6, Grid.col Desktop 12, Grid.col Phone 2 ]
          [ h4 [] [text "Cell 4"], p [] [text "Size varies with device"] ]
      ]
  ]


tabButtons : Addr -> Model -> List Html
tabButtons addr model =
  [ Buttons.view (Signal.forwardTo addr ButtonsAction) model.buttons ]


tabTextfields : Addr -> Model -> List Html
tabTextfields addr model   =
  let fwd = Signal.forwardTo addr in
  [ Textfield.view (fwd T0) model.t0
  , Textfield.view (fwd T1) model.t1
  , Textfield.view (fwd T2) model.t2
  , Textfield.view (fwd T3) model.t3
  , Textfield.view (fwd T4) model.t4
  ]
  |> List.map (\elem -> Grid.cell [ Grid.col All 4 ] [elem])
  |> (\content -> [Grid.grid content])



tabs : Dict String (Addr -> Model -> List Html)
tabs =
  Dict.fromList
    [ ("Buttons", tabButtons)
    , ("Textfields", tabTextfields)
    , ("Grid", tabGrid)
    ]


view : Signal.Address Action -> Model -> Html
view addr model =
  let contents =
        Dict.get model.layout.selectedTab tabs
        |> Maybe.withDefault tabGrid

      top =
        div
          [ style
            [ ("margin", "auto")
            , ("width", "90%")
            ]
          ]
          <| contents addr model

      addr' = Signal.forwardTo addr LayoutAction

  in
    Layout.view addr'
      layoutConfig model.layout
      (Just drawer, Just header)
      [ top ]


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


inputs : List (Signal.Signal Action)
inputs =
  [ Layout.setupSizeChangeSignal LayoutAction
  ]


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.Task Never ())
port tasks =
    app.tasks