ModalExample.elm

module Modal exposing
    ( view
    , headerView
    , Msg(..)
    )


import Html.Styled exposing (Html)
import Html.Styled.Attributes as Attrs


type alias ViewParams msg =
    { style : List Style
    , onClickOutside : msg
    , children : List (Html msg)
    }

view : ViewParams msg -> Html msg
view params =
    Html.div
        [ Attrs.css
            [ defaultStyles
            , params.style
            ]
        , customOutsideClickHandler params.onClickOutside
        ]
        params.children

type alias HeaderViewParams msg =
    { style : List Style
    , onClickClose : msg
    , title : String
    }


headerView : HeaderViewParams msg -> Html msg
headerView params =
    Html.div
        [ Attr.css
            [ defaultHeaderStyles 
            , params.style
            ]
        ]
        [ headerTitle params.title
        , headerCloseButton params.onClickClose
        ]


-- Useage --

type alias Model =
    { showConfirmation : Bool }

type Msg  
    = ClickedOutsideModal
    | ClickedModalCloseButton


view model =
    -- ..
    Modal.view
        { style = []
        , onClickOutside = ClickedOutsideModal
        , children =
            [ Modal.headerView 
                { style = []
                , onClickClose = ClickedModalCloseButton
                , title = "Confirm"
                }
            , Html.p 
                [] 
                
                [ Html.text "Are you sure you would like to quit?"]
            , Button.view [] [ Html.text "Yes"]
            , Button.view [] [ html.text "No"]
            ]
        }