<!– @license Copyright © 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at polymer.github.io/LICENSE.txt The complete set of authors may be found at polymer.github.io/AUTHORS.txt The complete set of contributors may be found at polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as part of the polymer project is also subject to an additional IP rights grant found at polymer.github.io/PATENTS.txt –>

<link rel=“import” href=“../../polymer/polymer.html”> <link rel=“import” href=“../../paper-styles/color.html”> <link rel=“import” href=“../iron-a11y-keys-behavior.html”>

<dom-module id=“x-key-aware”>

<template>
  <style>
    :host {
      display: block;
      position: relative;
    }

    pre {
      color: var(--google-blue-700);
    }

    .keys {
      line-height: 25px;
    }

    .keys span {
      cursor: default;
      background-color: var(--google-grey-100);
      border: 1px solid var(--google-grey-300);
      padding: 1px 5px;
      border-radius: 5px;
    }
  </style>

  <h4>Press any of these keys</h4>
  <input type="checkbox" checked="{{preventDefault::change}}"> prevent default = {{preventDefault}}
  <p class="keys">
    <template is="dom-repeat" items="[[boundKeys]]">
      <span>{{item}}</span>
    </template>
  </p>
  <pre>[[pressed]]</pre>
</template>

</dom-module>

<script>

Polymer({
  is: 'x-key-aware',

  behaviors: [
    Polymer.IronA11yKeysBehavior
  ],

  properties: {
    pressed: {
      type: String,
      readOnly: true,
      value: ''
    },

    boundKeys: {
      type: Array,
      value: function() {
        return Object.keys(this.keyBindings).join(' ').split(' ');
      }
    },

    preventDefault: {
      type: Boolean,
      value: true,
      notify: true
    },

    keyEventTarget: {
      type: Object,
      value: function() {
        return document.body;
      }
    }
  },

  keyBindings: {
    '* pageup pagedown left right down up home end space enter @ ~ " $ ? ! \\ + : # backspace': '_updatePressed',
    'a': '_updatePressed',
    'shift+a alt+a': '_updatePressed',
    'shift+tab shift+space': '_updatePressed'
  },

  _updatePressed: function(event) {
    console.log(event.detail);

    if (this.preventDefault) {
      event.preventDefault();
    }
    this._setPressed(
      this.pressed + event.detail.combo + ' pressed!\n'
    );
  }
});

</script>