bacontrap

Keyboard shortcuts wrapped in Bacon

Usage no npm install needed!

<script type="module">
  import bacontrap from 'https://cdn.skypack.dev/bacontrap';
</script>

README

Bacontrap Build Status

Mousetrap inspired keyboard shortcuts implemented with Bacon.js.

Unlike Mousetrap, Bacontrap is not a standalone library: Bacon.js and jQuery/Zepto are dependencies. Since these provide functionality for Bacontrap, the library itself is even smaller than Mousetrap.

Installation

Via NPM:

$ npm install bacontrap --save

Usage

const Bacontrap = require('Bacontrap');
Bacontrap.bind('4').onValue(function() { console.log('4'); });
Bacontrap.bind('?').onValue(function() { console.log('show shortcuts!'); });
Bacontrap.bind('esc').onValue({ console.log('escape'); });

// combinations
Bacontrap.bind('command+shift+k').onValue(function() { console.log('command shift k'); });

Bacontrap.bind(['command+k', 'ctrl+k']).onValue(function(event) {
  console.log('command k or control k');

  // prevent default browser behaviour
  event.preventDefault();
  // and stop event from bubbling
  event.stopPropagation();
  // return value is used by Bacon to control stream end
  return Bacon.more;
});

// gmail style sequences
Bacontrap.bind('g i').onValue(function() { console.log('go to inbox'); });
Bacontrap.bind('* a').onValue(function() { console.log('select all'); });

// shift+letter = LETTER
Bacontrap.bind('G').onValue(function() { console.log('shift+g'); });
Bacontrap.bind('shift+g').onValue(function() { console.log('also triggered'); });

// konami code!
Bacontrap.bind('up up down down left right left right b a enter').onValue(function() {
  console.log('konami code');
});

Hacking

The build process runs on gulp. Assuming npm is installed, dependencies can be installed by running

$ npm install

After that, you can run use local gulp from ./node_modules/.bin/gulp or have it installed globally with

$ npm install -g gulp

Then you should be able to run tests with

$ gulp test

To continously run tests after file changes use

$ gulp watch

There's also a gulp task for compiling distributable JS files.

$ gulp dist

TODO

  • Test with Internet Explorer
  • Escape as modifier key
  • Maybe support for different key events (keydown/keyup)
  • Keyboard shortcuts using cmd/ctrl are not triggered on Google Chrome, but using these is probably a bad idea anyway
  • Pressing modifier keys do not interrupt shortcut sequences