1.0.0 • Published 10 years ago

x-tag-trap v1.0.0

Weekly downloads
3
License
MIT
Repository
github
Last release
10 years ago

<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

AttributeOptionsDefaultDescription
keysstring | Keys
gesturesstring | Gestures
actionstring/functionfunction(){}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