Close modals with Escape

src/Umbra.elm

@@ -1,11 +1,13 @@
 module Umbra exposing (main)
 
 import Browser
+import Browser.Events exposing (onKeyUp)
 import FeatherIcons
 import Hex
 import Html exposing (..)
 import Html.Attributes exposing (..)
 import Html.Events exposing (onClick, onInput)
+import Json.Decode as Decode
 import Random
 
 
@@ -52,6 +54,8 @@ type Msg
     | Guybrush
     | CloseExportModal
     | GotRandomColor Color
+    | PressedLetter Char
+    | PressedControl String
 
 
 type ShadowParam
@@ -146,6 +150,20 @@ update msg model =
             , Cmd.none
             )
 
+        PressedControl "Escape" ->
+            ( { model
+                | css = Nothing
+                , selectedShadowId = ""
+              }
+            , Cmd.none
+            )
+
+        PressedControl _ ->
+            ( model, Cmd.none )
+
+        PressedLetter _ ->
+            ( model, Cmd.none )
+
 
 
 ----------------------------------------------
@@ -212,7 +230,7 @@ main =
         { init = \_ -> ( initialModel, Cmd.none )
         , view = view
         , update = update
-        , subscriptions = \_ -> Sub.none
+        , subscriptions = \_ -> onKeyUp keyDecoder
         }
 
 
@@ -610,3 +628,18 @@ randomColor =
 colorToString : Color -> String
 colorToString c =
     "#" ++ Hex.toString c.r ++ Hex.toString c.g ++ Hex.toString c.b
+
+
+keyDecoder : Decode.Decoder Msg
+keyDecoder =
+    Decode.map toKey (Decode.field "key" Decode.string)
+
+
+toKey : String -> Msg
+toKey string =
+    case String.uncons string of
+        Just ( char, "" ) ->
+            PressedLetter char
+
+        _ ->
+            PressedControl string