x-tag-trap

1.0.0 • Public • Published

<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

Dependents (0)

Package Sidebar

Install

npm i x-tag-trap

Weekly Downloads

1

Version

1.0.0

License

MIT

Last publish

Collaborators

  • alternatex