Lightbox

Main.elm

import Html exposing (..)
import Html.Attributes as Attr
import Html.Events as Evt exposing (onClick)
import Html.Events.Extra as Evte
import Html.Keyed as Keyed
import Material

{- Program -}
main = 
  Html.program
    { init = ( initialModel, Cmd.none )
    , view = view
    , update = update
    , subscriptions = Sub.none
    }

{- Models -} 
type alias LightboxModel =
  { content : Maybe (Html Msg)
  , visible : Bool
  }

lbModel =
  { content = Nothing
  , visible = True
  }

type alias Model =
  { mdl : Material.Model
  , lb : LightboxModel
  }
  
initialModel : Model
initialModel =
  { mdl = Material.model
  , lb = lbModel
  }
  
type Msg
  = Mdl (Material.Msg Msg)
  | ShowLightbox
  | HideLightbox
  | UpdateLightbox (Html Msg)

{- Update -}
update : Types.Msg -> Model -> ( Model, Cmd Types.Msg )
update msg model =
  case msg of
    ShowLightbox ->
      let lb = model.lb
          newLb = { lb | visible = True }
      in
      ( { model | lb = newLb }, Cmd.none )
    HideLightbox ->
      let lb = model.lb
          newLb = { lb | visible = False, content = Nothing }
      in  
      ( { model | lb = newLb }, Cmd.none )
    UpdateLightbox html -> 
      let lb = model.lb
          newLb = { lb | content = (Just html), visible = True}
      in
      ( { model | lb = newLb }, Cmd.none )
    Mdl msg_ ->
      Material.update Mdl msg_ model

{- Views -}
view : Model -> Html Msg
view model = 
  layout model testView

layout : Types.Model -> Html Msg -> Html Msg
layout model content =
  div [] 
    [ content, 
      lbView model.lb
    ]

testView : Model -> Html Msg
testView model =
 div [ Attr.class "test"]
  [
    h3 [] [ text "Test Toggle" ]
    , Toggles.switch Mdl [1] model.mdl
        [ Toggles.ripple
        , Toggles.value False
        , Options.onToggle (UpdateLightbox (testForm model))
        ]
        [ text "Test Lightbox"]
   ]
   
testForm : Types.Model -> Html Types.Msg
testForm model =
  div [ Attr.class "form" ]
    [ h1 [] [ text "Test Form" ]
    , Textfield.render Types.Mdl
        [ 0 ]
        model.mdl
        [ Textfield.label "Test"
        , Textfield.floatingLabel
        , Textfield.text_
        , Textfield.value ""
        , Options.cs "fullwidth"
        ]
        []
    ]

{- Lightbox View -}
style : Bool -> Html.Attribute msg
style visible =
  case visible of
    True ->
      Attr.style
        [ ("visibility", "visible")
        , ("opacity", "1")
        ]
    False ->
      Attr.style
        [ ("visibility", "hidden")
        , ("opacity", "0")
        ]    
    
lbView : LightboxModel -> Html Msg
lbView model =
  case model.content of
    Nothing ->
      div [ Attr.class "lightbox", style model.visible ]
      [ a [ Attr.href "#",  Attr.class "lightbox-close", Evte.onClickPreventDefault Hide ] [Icon.i "clear"]
      , Keyed.node "div" [ Attr.class "lightbox-body" ] [ ("lightbox-body", (text "no content") ) ]
      ]
    Just content ->
      div [ Attr.class "lightbox", style model.visible ]
      [ a [ Attr.href "#",  Attr.class "lightbox-close", Evte.onClickPreventDefault Hide ] [Icon.i "clear"]
      , Keyed.node "div" [ Attr.class "lightbox-body" ] [ ("lightbox-body", content ) ]
      ]