Ember-handle-keys-helper NPM

`{{handle-keys}}` helper

Ember helper for handling keyboard events directly in templates together with the {{on}} modifier.

It returns a KeyboardEvent handler which will call your function, if the key property of the event matches your target keys (e.g. "Escape" or "ArrowUp").

Main features:

can handle multiple keys
can call preventDefault/stopPropagation on matched events
handles non-standard key identifiers for IE and Edge
it's really tiny and has no dependencies

Installation

ember install ember-handle-keys-helper

Usage

A single key:

<Player {{on 'keydown' (handle-keys @pause 'Escape')}} />

Multiple keys for the same handler:

<Player {{on 'keydown' (handle-keys @pause 'Escape' 'Delete')}} />

With stopPropagation (it will only be called on a matched event):

<Player {{on 'keydown' (handle-keys @play 'Enter' stopPropagation=true)}} />

Multiple handlers with multiple {{on}} modifiers:

<Player
  {{on 'keydown' (handle-keys @play 'Enter')}}
  {{on 'keydown' (handle-keys @pause 'Escape')}}
/>

Multiple handlers with a single {{on}} modifier and {{queue}} helper:

<Player
  {{on
    'keydown'
    (queue
      (handle-keys @play 'Enter')
      (handle-keys @pause 'Escape')
      (handle-keys @volumeUp 'ArrowUp')
      (handle-keys @volumeDown 'ArrowDown')
      (handle-keys 'ArrowUp' 'ArrowDown' preventDefault=true)
    )
  }}
/>