This module provides the Elm bindings to render and work with a native HTML 5 <dialog> element.
It uses the custom elm-dialog-proxy Web component to
bridge between setting attributes and properties to the
native dialog.
import Curtissimo.NativeDialog as Dialog
view : Model -> Browser.Document Msg
view model =
let
dialogOptions =
Dialog.init { id = "my-dialog" }
|> Dialog.showDialog model.showDialog
|> Dialog.withCancelHandler
(Dialog.allowDefault DialogCanceled)
|> Dialog.withClassList
[ ( "dialog", True ) ]
|> Dialog.withCloseHandler DialogClosed
in
Html.main_ []
[ Dialog.view dialogOptions
[ Html.form
[ Html.Events.onSubmit HideDialog ]
[ Html.div []
[ Html.header []
[ Html.p [] [ Html.text "My Dialog" ] ]
, Html.section []
[ Html.p []
[ Html.text "This is a <dialog> element!" ]
, Html.p []
[ Html.text "You can hit the "
, Html.kbd [] [ Html.text "Esc" ]
, Html.text " key to cancel it"
]
]
, Html.div [}
[ Html.div []
[ Html.button []
[ Html.text "Submit" ]
, Html.button
[ Attrs.attribute "formmethod" "dialog"]
[ Html.text "Close" ]
]
]
]
]
]
]Set the flag in the dialog state to show or hide the dialog.
Set the Json.Decode.Decoder to use when the dialog is canceled
with the Esc key. This provides you a way to stop propagation on the
event.
Note: This only fires when the dialog is dismissed using the Esc key
Set the class list that will be applied to the <dialog> element.
Set the message you want to have fired when the dialog is closed.
Render the <dialog> element and the proxy handler needed to control the dialog.
Note: Make sure you have included the elm-dialog-proxy.js in your page
or as part of your build.
Specify the msg and a flag to indicate if the
cancel event should be prevented from occurring.
message is the value you want to pass to the page's
update function.preventDefault will prevent the dialog from closing
if set to True.If you never will prevent the default behavior of the cancel event of the dialog, you can use this convenience function.
The state needed by the native dialog to properly render.
Initialize the dialog state with the HTML id to use for the dialog.