| OLD | NEW | 
|---|
| (Empty) |  | 
|  | 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> | 
| OLD | NEW | 
|---|