hot-key.html

<link rel="import" href="../polymer/polymer.html">
<script src="../mousetrap/mousetrap.js"></script>

<!--
hot-key is used to add keyboard shortcuts to your application.
The attribute `shortcut` is used to define a shortcut or multiple shortcuts that will trigger the event
defined in `trigger`. This shortcut is only active if the `if` attribute is true.

##### Example

    <hot-key shortcut="?" trigger="help"></hot-key>

@class hot-key
@blurb A Polymer element for lisiting to keyboard events
@status alpha
@homepage https://github.com/FWeinb/hot-key
-->
<polymer-element name="hot-key" attributes="shortcut trigger if">
  <script>
    Polymer('hot-key', {

      /**
       * The currently active shortcut
       * @type string|array
       */
      _activeShortcut : null,

      /**
       * A single shortcut or an array of shortcuts that are used to tirgger the event defined in `trigger`
       * @attribute shortcut
       * @type string|array
       */
      shortcut : [],


      /**
       * Fire event if a shortcut was pressed.
       * The name of the event equals the string defined in attribute `trigger
       *
       * @event attribute `trigger`
       */

      /**
       * The event that will be triggerd if the shortcut was pressed.
       * @attribute trigger
       * @type string
       */
      trigger : null,

      /**
       * A boolean to indicate if this hot-key is active.
       * @attribute if
       * @type boolean
       */
      if : true,

      ready : function () {
        if ( this.shortcut !== undefined && this.shortcut.length !== 0 && this.trigger !== null) {
          this._activeShortcut = this.shortcut.slice(0);
          Mousetrap.bind(this.shortcut, this._trigger.bind(this));
        }
      },

      reready : function(){
       if ( !!this._activeShortcut )
          Mousetrap.unbind(this._activeShortcut);

        this.ready();
      },

      triggerChanged : function(){
        this.reready();
      },

      shortcutChanged : function() {
        this.reready();
      },

      get _trigger () {
        return this.wrapTrigger(this.eventTrigger(this.trigger));
      },

      eventTrigger : function (eventName) {
        return function (){
          this.fire(eventName, { scope : this.parentNode });
        };
      },

      wrapTrigger : function ( funcToTrigger ) {
        return function (){
          if ( this.if ) {
            funcToTrigger.bind(this)();
          }
        }.bind(this);
      }
    });
  </script>
</polymer-element>

<polymer-element name="" attributes="shortcut trigger if">

</polymer-element>