mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-12-26 07:04:33 +03:00
a98e805abf
I vaguely suspect that tab should take the user into the controlled content, rather than through the rest of the control options... but will elave it to testing
102 lines
1.7 KiB
Elm
102 lines
1.7 KiB
Elm
module KeyboardSupport exposing
|
|
( view
|
|
, KeyboardSupport
|
|
, Key(..), Direction(..)
|
|
)
|
|
|
|
{-|
|
|
|
|
@docs view
|
|
@docs KeyboardSupport
|
|
@docs Key, Direction
|
|
|
|
-}
|
|
|
|
import Css exposing (..)
|
|
import Html.Styled as Html exposing (..)
|
|
import Html.Styled.Attributes exposing (css)
|
|
|
|
|
|
{-| -}
|
|
type alias KeyboardSupport =
|
|
{ keys : List Key
|
|
, result : String
|
|
}
|
|
|
|
|
|
{-| -}
|
|
view : List KeyboardSupport -> Html msg
|
|
view keyboardSupport =
|
|
case keyboardSupport of
|
|
[] ->
|
|
text ""
|
|
|
|
_ ->
|
|
details []
|
|
[ summary [] [ text "Keyboard Support" ]
|
|
, ul
|
|
[ css [ listStyle none, margin2 (px 10) zero, padding zero ]
|
|
]
|
|
(List.map viewKeyboardActions keyboardSupport)
|
|
]
|
|
|
|
|
|
viewKeyboardActions : KeyboardSupport -> Html msg
|
|
viewKeyboardActions { keys, result } =
|
|
li []
|
|
[ strong [] [ text (String.join "+" (List.map keyToString keys) ++ ": ") ]
|
|
, text result
|
|
]
|
|
|
|
|
|
{-| -}
|
|
type Key
|
|
= Shift
|
|
| Enter
|
|
| Arrow Direction
|
|
| Tab
|
|
| Space
|
|
|
|
|
|
keyToString : Key -> String
|
|
keyToString key =
|
|
case key of
|
|
Shift ->
|
|
"Shift"
|
|
|
|
Enter ->
|
|
"Enter"
|
|
|
|
Arrow direction ->
|
|
directionToString direction ++ " arrow"
|
|
|
|
Tab ->
|
|
"Tab"
|
|
|
|
Space ->
|
|
"Space"
|
|
|
|
|
|
{-| -}
|
|
type Direction
|
|
= Up
|
|
| Right
|
|
| Down
|
|
| Left
|
|
|
|
|
|
directionToString : Direction -> String
|
|
directionToString direction =
|
|
case direction of
|
|
Up ->
|
|
"Up"
|
|
|
|
Right ->
|
|
"Right"
|
|
|
|
Down ->
|
|
"Down"
|
|
|
|
Left ->
|
|
"Left"
|