A Dialog for Elm
Set up the model with style as the animation for the modal to show up, uses a pretty basic animation. The body property is the modal body, headerTitle just the title, fullHeader is the complete header with css fullBody is the whole body with css and the body, fullFooter should include the buttons with the actions. You don't need to modify visibility
This is the modal itself
module Diyalog exposing (Model, view, update, initial, subscriptions)
{-| A Dialog for Elm
# The model
@docs Model
# The view
@docs view
# The update
@docs update
# The subscriptions
@docs subscriptions
# The initial state
@docs initial
-}
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (on, onClick, targetValue)
import Animation exposing (px)
import Styles exposing (..)
import Utils exposing (..)
import Diyalog.Message exposing (..)
{-| Set up the model with style as the animation for the modal to show up, uses a pretty basic animation.
The body property is the modal body, headerTitle just the title, fullHeader is the complete header with css
fullBody is the whole body with css and the body, fullFooter should include the buttons with the actions.
You don't need to modify visibility -}
type alias Model msg = { style : Animation.State
, mainModalCss : Attribute msg
, modalContentCss : Attribute msg
, body : Html msg
, headerTitle : String
, fullHeader : (String -> Html msg)
, fullBody : (Html msg -> Html msg)
, fullFooter : Html msg
, visibility : ModalVisibility }
{-| This is the modal itself -}
view : (Msg -> msg) -> Model msg -> Html msg
view msg model =
div [ modalVisibility model.visibility ]
[ div [ modalBackground
, Html.Attributes.map msg <| onClick CloseModal ] []
, div ( Animation.render model.style ++ [ model.mainModalCss
, style [("display", "block")]
, id "diyalog-modal" ])
[ div [ model.modalContentCss
, id "modal-content" ]
[ model.fullHeader model.headerTitle
, model.fullBody model.body
, model.fullFooter
]
]
]
{-| -}
update : Msg -> Model msg -> ( Model msg, Cmd Msg)
update msg model =
case msg of
ShowingModal ->
( { model | style =
Animation.interrupt
[ Animation.to
[ Animation.top (px -50.0)
, Animation.opacity 0.0
]
, Animation.to
[ Animation.top (px 20.0)
, Animation.opacity 1.0
]
]
model.style
, visibility = ShowModal }, Cmd.none )
CloseModal ->
( { model | style = Animation.style
[ Animation.top (px -50.0)
, Animation.opacity 0.0 ]
, visibility = HideModal }, Cmd.none )
Animate animMsg ->
( { model | style = Animation.update animMsg model.style }, Cmd.none )
OkModal ->
( { model | style = Animation.style
[ Animation.top (px -50.0)
, Animation.opacity 0.0 ]
, visibility = HideModal }, Cmd.none )
{-| -}
subscriptions : Model msg -> Sub Msg
subscriptions model =
Animation.subscription Animate [ model.style ]
{-| -}
initial : (Msg -> msg) -> Model msg
initial msg = { style = Animation.style
[ Animation.top (px -50.0)
, Animation.opacity 0.0 ]
, body = text ""
, headerTitle = ""
, fullHeader = setFullHeader msg
, fullBody = setFullBody
, fullFooter = setFullFooter msg
, modalContentCss = modalContent
, mainModalCss = mainModalCss
, visibility = HideModal }