Skip to content

Instantly share code, notes, and snippets.

@imetallica
Last active June 9, 2016 06:14
Show Gist options
  • Save imetallica/b82a38106aa8bdbdac21da31c3046ea2 to your computer and use it in GitHub Desktop.
Save imetallica/b82a38106aa8bdbdac21da31c3046ea2 to your computer and use it in GitHub Desktop.
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 Frame.Msg
update : Msg -> Model -> ( Model, Cmd Msg )
update message model = -- TODO: ???
( model, Cmd.none )
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.view frame)) model.frames
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 ) ]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment