← Back to branch summary

~didrocks/+junk/face-detection-15.04

« back to all changes in this revision

Viewing changes to facedetection/www/bower_components/iron-a11y-keys/demo/x-key-aware.html

  • Committer: Didier Roche
  • Date: 2016-05-10 23:09:11 UTC
  • Revision ID: didier.roche@canonical.com-20160510230911-c7xr490zrj3yrzxd
New version

Show diffs side-by-side

added added

removed removed

Lines of Context:
facedetection/www/bower_components/iron-a11y-keys/demo/x-key-aware.html
 
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.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
    <span class="keys">
 
41
      <template is="dom-repeat" items="[[boundKeys]]">
 
42
        <span>{{item}}</span>
 
43
      </template>
 
44
    </span>
 
45
    <iron-a11y-keys
 
46
      id="keys"
 
47
      keys="* pageup pagedown left right down up shift+a alt+a home end space enter"
 
48
      target="[[target]]"
 
49
      on-keys-pressed="_updatePressed">
 
50
    </iron-a11y-keys>
 
51
    <pre id="output">[[pressed]]</pre>
 
52
  </template>
 
53
</dom-module>
 
54
 
 
55
<script>
 
56
  Polymer({
 
57
    is: 'x-key-aware',
 
58
 
 
59
    properties: {
 
60
      pressed: {
 
61
        type: String,
 
62
        readOnly: true,
 
63
        value: ''
 
64
      },
 
65
 
 
66
      boundKeys: {
 
67
        type: Array
 
68
      },
 
69
 
 
70
      target: {
 
71
        type: Object,
 
72
        value: function() {
 
73
          return document.body;
 
74
        }
 
75
      }
 
76
    },
 
77
 
 
78
    ready: function() {
 
79
      this.boundKeys = this.$.keys.keys.split(' ');
 
80
    },
 
81
 
 
82
    _updatePressed: function(event) {
 
83
      console.log(event.detail);
 
84
 
 
85
      this._setPressed(
 
86
        this.pressed + event.detail.combo + ' pressed!\n'
 
87
      );
 
88
    }
 
89
  });
 
90
</script>