Accordion.elm

module MetroUi.Widgets.Accordion exposing ( Model
                                          , defaultAccordion
                                          , update
                                          , view )

import Html
import Html.App
import Html.Attributes as Attr
import MetroUi.Widgets.Frame as Frame

type alias Model =
  { id: String,
    frames: List Frame.Model,
    colors: List String
  }

type Msg
  = AddFrame
  | FrameMsg String Frame.Msg

update : Msg -> Model -> ( Model, Cmd Msg )
update message model =
  case message of 
    FrameMsg id msg ->
      let
        model = { model | frames = List.map (updateHelp id msg) model.frames }
      in
        (model, Cmd.none)
    AddFrame ->
      (model, Cmd.none)

updateHelp : String -> Frame.Msg -> Frame.Model -> Frame.Model
updateHelp targetId msg frame =
  if targetId == frame.id then Frame.update msg frame else frame

defaultAccordion : List Frame.Model -> Model
defaultAccordion frames =
  Model "" frames []

view : Model -> Html.Html Msg
view model =
  let
    heading = [ ( "accordion", True ) ]
    id = accordionId model
    colors = accordionColors model
    frames = getFrames model
  in
    Html.div [ Attr.classList ( heading ++ colors ), id ] frames

-- Helpers

accordionColors : Model -> List (String, Bool)
accordionColors model =
  case model.colors of
    [] -> []
    colors -> List.map (\color -> (color, True)) colors

accordionId : Model -> Html.Attribute Msg
accordionId model =
  case model.id of
    "" -> Attr.id ""
    id -> Attr.id id

getFrames : Model -> List ( Html.Html Msg )
getFrames model =
  List.map (\frame -> Html.App.map (FrameMsg frame.id) (Frame.view frame)) model.frames

Frame.elm

module MetroUi.Widgets.Frame exposing ( Msg
                                      , Model
                                      , defaultFrame
                                      , update
                                      , view )

import Html
import Html.Attributes as Attr
import Html.Events as Evt

type FrameStates
  = Inactive
  | Active
  | Disabled

type alias FrameHeading = {
  id: String,
  content: String,
  icon: String,
  colors: List String
}

type alias FrameContent = {
  id: String,
  content: String
}

type alias Model = {
  id: String,
  state: FrameStates,
  heading: FrameHeading,
  content: FrameContent
}

type Msg
  = HeadingClick

update : Msg -> Model -> (Model, Cmd Msg)
update message model =
  ( model, Cmd.none )

updateInternal : Msg -> Model -> Model
updateInternal message model =
  case message of
    HeadingClick ->
      case model.state of
        Inactive -> { model | state = Active }
        Active -> { model | state = Inactive }
        Disabled -> model

defaultFrame : String -> String -> Model
defaultFrame title content =
  let
    heading = FrameHeading "" title "" []
    body = FrameContent "" content
    f = Model "" Inactive heading body
  in
    f

view : Model -> Html.Html Msg
view model =
  let
    frameHeading = [ ( "frame", True ) ]
    state = frameState model
    id = frameId model

    heading = [ ( "heading", True ) ]
    headingId = frameHeadingId model
    headingColors = frameHeadingColors model
    headingIcon = frameHeadingIcon model
    headingContent = frameHeadingContent model

    content = [ ( "content", True ) ]
    contentId = frameContentId model
    contentContent = frameContentContent model
  in
    Html.div
    [ Attr.classList ( frameHeading ++ state ),
      Evt.onClick HeadingClick,
      id ]
    [ Html.div [ Attr.classList ( heading ++ headingColors ), headingId ]
      [ headingContent, headingIcon ]
    , Html.div [ Attr.classList ( content ), contentId ]
      [ contentContent ] ]


-- Helpers

frameId : Model -> Html.Attribute Msg
frameId model =
  case model.id of
    "" -> Attr.id ""
    id -> Attr.id id

frameContentId : Model -> Html.Attribute Msg
frameContentId model =
  case model.content.id of
    "" -> Attr.id ""
    id -> Attr.id id

frameContentContent : Model -> Html.Html Msg
frameContentContent model =
  Html.text model.content.content

frameHeadingId : Model -> Html.Attribute Msg
frameHeadingId model =
  case model.heading.id of
    "" -> Attr.id ""
    id -> Attr.id id

frameHeadingColors : Model -> List (String, Bool)
frameHeadingColors model =
  case model.heading.colors of
    [] -> []
    colors -> List.map (\color -> (color, True)) colors

frameHeadingIcon : Model -> Html.Html Msg
frameHeadingIcon model =
  case model.heading.icon of
    "" -> Html.span [] []
    icon -> Html.span [ Attr.class (icon ++ " icon") ] []

frameHeadingContent : Model -> Html.Html Msg
frameHeadingContent model =
  case model.heading.content of
    "" -> Html.text ""
    content -> Html.text content

frameState : Model -> List (String, Bool)
frameState model =
  case model.state of
    Inactive -> [ ( "active", False ), ( "disabled", False ) ]
    Active ->   [ ( "active", True ), ( "disabled", False ) ]
    Disabled -> [ ( "active", False ), ( "disabled", True ) ]