third_party/polymer/components/core-focusable/demo.html

   1 <!doctype html>
   2 <!--
   3 Copyright 2013 The Polymer Authors. All rights reserved.
   4 Use of this source code is governed by a BSD-style
   5 license that can be found in the LICENSE file.
   6 -->
   7 <html>
   8 <head>
   9
  10   <meta charset="utf-8">
  11   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  12   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
  13
  14   <title>core-focusable</title>
  15
  16   <script src="../webcomponentsjs/webcomponents.js"></script>
  17
  18   <link href="core-focusable.html" rel="import">
  19
  20   <style shim-shadowdom>
  21     body {
  22       font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
  23       font-size: 14px;
  24       margin: 0;
  25       padding: 24px;
  26       -webkit-tap-highlight-color: rgba(0,0,0,0);
  27       -webkit-touch-callout: none;
  28     }
  29
  30     section {
  31       padding: 20px 0;
  32     }
  33
  34     section > div {
  35       padding: 14px;
  36       font-size: 16px;
  37     }
  38
  39     focusable-button {
  40       display: inline-block;
  41       padding: 0.5em 1em;
  42       border-radius: 3px;
  43       outline: none;
  44     }
  45
  46     focusable-button[disabled] {
  47       background: #e0e0e0;
  48     }
  49
  50     focusable-button[active] {
  51       background: #000;
  52       color: #fff;
  53     }
  54
  55     focusable-button[pressed] {
  56       background: #ffb74d;
  57       color: #000;
  58     }
  59
  60     focusable-button[focused] {
  61       border: 1px solid #4fc3f7;
  62     }
  63
  64   </style>
  65 </head>
  66 <body unresolved>
  67
  68   <polymer-element name="focusable-button" tabindex="0">
  69   <script>
  70     (function() {
  71       var p = {
  72
  73         eventDelegates: {
  74           down: 'downAction',
  75           up: 'upAction'
  76         },
  77
  78         downAction: function() {
  79           // call overriden event delegate
  80           this._downAction();
  81           console.log('down');
  82         },
  83
  84         upAction: function() {
  85           // call overriden event delegate
  86           this._upAction();
  87           console.log('up');
  88         }
  89
  90       };
  91
  92       Polymer.mixin2(p, Polymer.CoreFocusable);
  93       Polymer(p);
  94     })();
  95   </script>
  96   </polymer-element>
  97
  98   <section>
  99
 100     <focusable-button>button</focusable-button>
 101
 102     <focusable-button toggle>toggle</focusable-button>
 103
 104     <focusable-button disabled>disabled</focusable-button>
 105
 106   </section>
 107
 108 </body>
 109 </html>