designtips / hotkey

Global DOM element activation

Hotkey Behavior

Trigger a action on element when keyboard hotkey is pressed.

Automatically binds hotkeys to any link with a data-hotkey attribute set. Multiple hotkeys are separated by a ,. Key combinations are separated by a +, and key sequences are separated by a space.

Two-keypress sequences like g c and g i would be stored under the 'g' key in a nested object with keys 'c' and 'i'.

mappings =
  'c'     : <a href="/rails/rails/issues/new" data-hotkey="c">New Issue</a>
  'g'     :
    'c'   : <a href="/rails/rails" data-hotkey="g c">Code</a>
    'i'   : <a href="/rails/rails/issues" data-hotkey="g i">Issues</a>

So both g c and c could be available hotkeys on the same page, but g c and g couldn't coexist. If the user presses g, the c hotkey will be unavailable for 1500ms while we listen for either g c or g i.

Installation

$ npm install @github/hotkey

Usage

HTML

<a href="/page/2" data-hotkey="j">Next</a>
<a href="/help" data-hotkey="Control+h">Help</a>
<a href="/rails/rails" data-hotkey="g c">Code</a>
<a href="/search" data-hotkey="s,/">Search</a>

See the list of KeyboardEvent key values for a list of supported key values.

JS

import {install} from '@github/hotkey'
for (const el of document.querySelector('[data-hotkey]')) {
  install(el)
}

Development

npm install
npm test

License

Distributed under the MIT license. See LICENSE for details.