<x-trap>

A X-Tag element for handling keyboard shortcuts & gestures, backed by Hammer.js and Mousetrap.

Maintained by Gianni Furger.

Demo

Check it live.

Install

Install with Bower:

$ bower install --save x-tag-trap

Usage

1. Import Web Components' polyfill:

   <script src="dist/x-tags-components.js"></script>

2. Import hammer.js to handle gestures:

   <script src="dist/hammer.min.js"></script>

3. Import mousetrap.js to handle keyboard shortcuts:

   <script src="dist/mousetrap.min.js"></script>

4. Import Custom Element:

   <script src="dist/trap.js"></script>

5. Start using it!

   <x-trap></x-trap>

Examples

HTML

  <x-trap keys="a space command" action="window.open('http://spacecommandmusic.com');"></x-trap>

Setup

In order to run it locally you'll need a basic server setup.

1. Install Node.js

2. Install Grunt:

   $ npm install --global grunt-cli

3. Install Bower

4. Install local dependencies:

   $ npm install && bower install

5. Run a local server and open http://localhost:3001.

   $ grunt connect

Options

Attribute | Options | Default | Description --- | --- | --- | --- keys | string | | Keys `gestures` | *string* | | Gestures action | string/function | function(){} | Action

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -m 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

History

For detailed changelog, check Releases.

License

MIT License