• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!--
2@license
3Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7Code distributed by Google as part of the polymer project is also
8subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
9-->
10
11<link rel="import" href="../../polymer/polymer.html">
12<link rel="import" href="../../paper-styles/color.html">
13<link rel="import" href="../iron-a11y-keys-behavior.html">
14
15<dom-module id="x-key-aware">
16  <style>
17    :host {
18      display: block;
19      position: relative;
20    }
21
22    pre {
23      color: var(--google-blue-700);
24    }
25
26    .keys {
27      line-height: 25px;
28    }
29
30    .keys span {
31      cursor: default;
32      background-color: var(--google-grey-100);
33      border: 1px solid var(--google-grey-300);
34      padding: 1px 5px;
35      border-radius: 5px;
36    }
37  </style>
38  <template>
39    <h4>Press any of these keys</h4>
40    <input type="checkbox" checked="{{preventDefault::change}}"> prevent default = {{preventDefault}}
41    <p class="keys">
42      <template is="dom-repeat" items="[[boundKeys]]">
43        <span>{{item}}</span>
44      </template>
45    </p>
46    <pre>[[pressed]]</pre>
47  </template>
48</dom-module>
49
50<script>
51  Polymer({
52    is: 'x-key-aware',
53
54    behaviors: [
55      Polymer.IronA11yKeysBehavior
56    ],
57
58    properties: {
59      pressed: {
60        type: String,
61        readOnly: true,
62        value: ''
63      },
64
65      boundKeys: {
66        type: Array,
67        value: function() {
68          return Object.keys(this.keyBindings).join(' ').split(' ');
69        }
70      },
71
72      preventDefault: {
73        type: Boolean,
74        value: true,
75        notify: true
76      },
77
78      keyEventTarget: {
79        type: Object,
80        value: function() {
81          return document.body;
82        }
83      }
84    },
85
86    keyBindings: {
87      '* pageup pagedown left right down up home end space enter @ ~ " $ ? ! \\ + : # backspace': '_updatePressed',
88      'a': '_updatePressed',
89      'shift+a alt+a': '_updatePressed',
90      'shift+tab shift+space': '_updatePressed'
91    },
92
93    _updatePressed: function(event) {
94      console.log(event.detail);
95
96      if (this.preventDefault) {
97        event.preventDefault();
98      }
99      this._setPressed(
100        this.pressed + event.detail.combo + ' pressed!\n'
101      );
102    }
103  });
104</script>
105