Home | History | Annotate | Download | only in demo 
      1 <!--
      2 @license
      3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
      4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
      5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
      6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
      7 Code distributed by Google as part of the polymer project is also
      8 subject 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