mirror of
https://github.com/jhillyerd/inbucket.git
synced 2025-12-17 17:47:03 +00:00
59 lines
1.5 KiB
Elm
59 lines
1.5 KiB
Elm
module Modal exposing (Msg, resetFocusCmd, updateSession, view)
|
|
|
|
import Browser.Dom as Dom
|
|
import Data.Session as Session exposing (Session)
|
|
import Html exposing (Html, div, span, text)
|
|
import Html.Attributes exposing (class, id, tabindex)
|
|
import Html.Events exposing (onFocus)
|
|
import Task
|
|
|
|
|
|
type alias Msg =
|
|
Result Dom.Error ()
|
|
|
|
|
|
{-| Creates a command to focus the modal dialog.
|
|
-}
|
|
resetFocusCmd : (Msg -> msg) -> Cmd msg
|
|
resetFocusCmd resultMsg =
|
|
Task.attempt resultMsg (Dom.focus domId)
|
|
|
|
|
|
{-| Updates a Session with an error Flash if the resetFocusCmd failed.
|
|
-}
|
|
updateSession : Msg -> Session -> Session
|
|
updateSession result session =
|
|
case result of
|
|
Ok () ->
|
|
session
|
|
|
|
Err (Dom.NotFound missingDomId) ->
|
|
let
|
|
flash =
|
|
{ title = "DOM element not found"
|
|
, table = [ ( "Element ID", missingDomId ) ]
|
|
}
|
|
in
|
|
Session.showFlash flash session
|
|
|
|
|
|
view : msg -> Maybe (Html msg) -> Html msg
|
|
view unfocusedMsg maybeModal =
|
|
case maybeModal of
|
|
Just modal ->
|
|
div [ class "modal-mask" ]
|
|
[ span [ onFocus unfocusedMsg, tabindex 0 ] []
|
|
, div [ id domId, class "modal well", tabindex -1 ] [ modal ]
|
|
, span [ onFocus unfocusedMsg, tabindex 0 ] []
|
|
]
|
|
|
|
Nothing ->
|
|
text ""
|
|
|
|
|
|
{-| DOM ID of the modal dialog.
|
|
-}
|
|
domId : String
|
|
domId =
|
|
"modal-dialog"
|