third_party/polymer/components-chromium/core-a11y-keys/demo.html

   1 <!--
   2     @license
   3     Copyright (c) 2014 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 <!DOCTYPE html>
  11 <html lang="en">
  12 <head>
  13   <meta charset="UTF-8">
  14   <title>Core A11y Keys demo</title>
  15   <script src="../webcomponentsjs/webcomponents.js"></script>
  16   <link rel="import" href="core-a11y-keys.html">
  17   <style>
  18     div {
  19       height: 100px;
  20       width: 100px;
  21       background: gray;
  22     }
  23   </style>
  24 </head>
  25 <body>
  26   <template is="auto-binding">
  27     <span>Press any of these keys: {{keys}}</span>
  28     <core-a11y-keys id="a11y" keys="{{keys}}" on-keys-pressed="{{print}}"></core-a11y-keys>
  29     <pre id="output"></pre>
  30   </template>
  31   <script>
  32     addEventListener('template-bound', function(ev) {
  33       ev.target.keys = "* pageup pagedown left right down up shift+a alt+a home end space enter"
  34       ev.target.print = function(ev) {
  35         console.log(ev.detail);
  36         this.$.output.textContent += ev.detail.key + ' pressed!\n';
  37       }
  38     });
  39   </script>
  40 </body>
  41 </html>