Add support for using enter to accept models

Author: hojberg

src/UI/Modal.elm

@@ -8,6 +8,7 @@ module UI.Modal exposing
     , modal
     , modal_
     , view
+    , withAccept
     , withActions
     , withActionsIf
     , withAttributes
@@ -35,6 +36,7 @@ type Content msg
 type alias Modal msg =
     { id : String
     , closeMsg : Maybe msg
+    , acceptMsg : Maybe msg
     , attributes : List (Attribute msg)
     , header : Maybe (Html msg)
     , footer :
@@ -59,6 +61,7 @@ modal_ : String -> Content msg -> Modal msg
 modal_ id content_ =
     { id = id
     , closeMsg = Nothing
+    , acceptMsg = Nothing
     , attributes = []
     , header = Nothing
     , footer = { leftSide = [], actions = [] }
@@ -109,6 +112,7 @@ map : (a -> b) -> Modal a -> Modal b
 map f m =
     { id = m.id
     , closeMsg = Maybe.map f m.closeMsg
+    , acceptMsg = Maybe.map f m.acceptMsg
     , attributes = List.map (Attributes.map f) m.attributes
     , header = Maybe.map (Html.map f) m.header
     , footer =
@@ -129,6 +133,11 @@ withClose closeMsg modal__ =
     { modal__ | closeMsg = Just closeMsg }
 
 
+withAccept : msg -> Modal msg -> Modal msg
+withAccept acceptMsg modal__ =
+    { modal__ | acceptMsg = Just acceptMsg }
+
+
 withHeader : String -> Modal msg -> Modal msg
 withHeader title modal__ =
     { modal__ | header = Just (text title) }
@@ -231,6 +240,7 @@ view modal__ =
     in
     view_
         modal__.closeMsg
+        modal__.acceptMsg
         (id modal__.id
             :: classList [ ( "modal_dim-overlay", modal__.dimOverlay ) ]
             :: modal__.attributes
@@ -242,8 +252,8 @@ view modal__ =
 -- INTERNALS
 
 
-view_ : Maybe msg -> List (Attribute msg) -> List (Html msg) -> Html msg
-view_ closeMsg attrs content_ =
+view_ : Maybe msg -> Maybe msg -> List (Attribute msg) -> List (Html msg) -> Html msg
+view_ closeMsg acceptMsg attrs content_ =
     let
         ( modalContent, onEsc ) =
             case closeMsg of
@@ -264,7 +274,7 @@ view_ closeMsg attrs content_ =
                     , Nothing
                     )
     in
-    modalOverlay onEsc modalContent
+    modalOverlay onEsc acceptMsg modalContent
 
 
 overlayId : String

src/UI/ModalOverlay.elm

@@ -3,17 +3,15 @@ module UI.ModalOverlay exposing (modalOverlay)
 import Html exposing (Html, node)
 import Html.Events exposing (on)
 import Json.Decode as Decode
+import Maybe.Extra as MaybeE
 
 
-modalOverlay : Maybe msg -> Html msg -> Html msg
-modalOverlay onEscape content =
+modalOverlay : Maybe msg -> Maybe msg -> Html msg -> Html msg
+modalOverlay onEscape onEnter content =
     let
         attrs =
-            case onEscape of
-                Just onEsc ->
-                    [ on "escape" (Decode.succeed onEsc) ]
-
-                Nothing ->
-                    []
+            [ onEscape |> Maybe.map (\onEsc -> on "escape" (Decode.succeed onEsc))
+            , onEnter |> Maybe.map (\onEnt -> on "enter" (Decode.succeed onEnt))
+            ]
     in
-    node "modal-overlay" attrs [ content ]
+    node "modal-overlay" (MaybeE.values attrs) [ content ]

src/UI/ModalOverlay.js

@@ -32,6 +32,13 @@ class ModalOverlay extends HTMLElement {
 
         this.dispatchEvent(new CustomEvent("escape"));
       }
+
+      if (ev.key === "Enter") {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        this.dispatchEvent(new CustomEvent("enter"));
+      }
     };
 
     window.addEventListener("keydown", this.onKeydown);