This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
Handle keyboard key combinations with type safety in Elm
version 5.0.0
license BSD3
native-modules False
elm-version 0.18.0 <= v < 0.19.0
Tag 5.0.0
Committed At 2017-09-15 17:04:58 UTC
ohanhi/keyboard-extra 2.0.2 <= v < 3.0.0 2.1.0
elm-lang/html 2.0.0 <= v < 3.0.0 2.0.0
elm-lang/core 5.0.0 <= v < 6.0.0 5.1.1

README

Keyboard Combo

Handle keyboard key combinations with type safety in Elm

Check out the demo

Note: Not every key is implemented yet. Please open a PR if one is missing.

Usage

Usage example taken from Example in examples directory

module Main exposing (..)

import Html exposing (..)
import Keyboard.Combo


main : Program Never Model Msg
main =
    Html.program
        { subscriptions = subscriptions
        , init = init
        , update = update
        , view = view
        }


keyboardCombos : List (Keyboard.Combo.KeyCombo Msg)
keyboardCombos =
    [ Keyboard.Combo.combo2 ( Keyboard.Combo.control, Keyboard.Combo.s ) Save
    , Keyboard.Combo.combo2 ( Keyboard.Combo.control, Keyboard.Combo.a ) SelectAll
    , Keyboard.Combo.combo3 ( Keyboard.Combo.control, Keyboard.Combo.alt, Keyboard.Combo.e ) RandomThing
    ]



-- Init


init : ( Model, Cmd Msg )
init =
    { keys = Keyboard.Combo.init keyboardCombos ComboMsg
    , content = "No combo yet"
    }
        ! []


subscriptions : Model -> Sub Msg
subscriptions model =
    Keyboard.Combo.subscriptions model.keys



-- Model


type alias Model =
    { keys : Keyboard.Combo.Model Msg
    , content : String
    }



-- Update


type Msg
    = Save
    | SelectAll
    | RandomThing
    | ComboMsg Keyboard.Combo.Msg


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        Save ->
            { model | content = "Saved" } ! []

        SelectAll ->
            { model | content = "Select All" } ! []

        RandomThing ->
            { model | content = "Random Thing" } ! []

        ComboMsg msg ->
            let
                ( keys, cmd ) =
                    Keyboard.Combo.update msg model.keys
            in
                ( { model | keys = keys }, cmd )



-- View


view : Model -> Html Msg
view model =
    div []
        [ h1 [] [ text "Available Key Commands:" ]
        , ul []
            [ li [] [ text "Save: Ctrl+s" ]
            , li [] [ text "Select All: Ctrl+a" ]
            , li [] [ text "Random Thing: Ctrl+Alt+e" ]
            ]
        , div []
            [ strong [] [ text "Current command: " ]
            , span [] [ text model.content ]
            ]
        ]