ember-handle-keys-helper

1.0.0 • Public • Published

{{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)
    )
  }}
/>

Compatibility

  • Ember.js v3.20 or above
  • Ember CLI v3.20 or above
  • Node.js v12 or above

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.

Readme

Keywords

Package Sidebar

Install

npm i ember-handle-keys-helper

Weekly Downloads

35

Version

1.0.0

License

MIT

Unpacked Size

15 kB

Total Files

19

Last publish

Collaborators

  • ivanvotti
  • jfh