• 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  <template>
17    <style>
18      :host {
19        display: block;
20        position: relative;
21      }
22
23      pre {
24        color: var(--google-blue-700);
25      }
26
27      .keys {
28        line-height: 25px;
29      }
30
31      .keys span {
32        cursor: default;
33        background-color: var(--google-grey-100);
34        border: 1px solid var(--google-grey-300);
35        padding: 1px 5px;
36        border-radius: 5px;
37      }
38    </style>
39
40    <h4>Press any of these keys</h4>
41    <input type="checkbox" checked="{{preventDefault::change}}"> prevent default = {{preventDefault}}
42    <p class="keys">
43      <template is="dom-repeat" items="[[boundKeys]]">
44        <span>{{item}}</span>
45      </template>
46    </p>
47    <pre>[[pressed]]</pre>
48  </template>
49</dom-module>
50
51<script>
52  Polymer({
53    is: 'x-key-aware',
54
55    behaviors: [
56      Polymer.IronA11yKeysBehavior
57    ],
58
59    properties: {
60      pressed: {
61        type: String,
62        readOnly: true,
63        value: ''
64      },
65
66      boundKeys: {
67        type: Array,
68        value: function() {
69          return Object.keys(this.keyBindings).join(' ').split(' ');
70        }
71      },
72
73      preventDefault: {
74        type: Boolean,
75        value: true,
76        notify: true
77      },
78
79      keyEventTarget: {
80        type: Object,
81        value: function() {
82          return document.body;
83        }
84      }
85    },
86
87    keyBindings: {
88      '* pageup pagedown left right down up home end space enter @ ~ " $ ? ! \\ + : # backspace': '_updatePressed',
89      'a': '_updatePressed',
90      'shift+a alt+a': '_updatePressed',
91      'shift+tab shift+space': '_updatePressed'
92    },
93
94    _updatePressed: function(event) {
95      console.log(event.detail);
96
97      if (this.preventDefault) {
98        event.preventDefault();
99      }
100      this._setPressed(
101        this.pressed + event.detail.combo + ' pressed!\n'
102      );
103    }
104  });
105</script>
106