OLD | NEW |
(Empty) | |
| 1 |
| 2 Polymer('paper-focusable', { |
| 3 |
| 4 publish: { |
| 5 |
| 6 /** |
| 7 * If true, the button is currently active either because the |
| 8 * user is holding down the button, or the button is a toggle |
| 9 * and is currently in the active state. |
| 10 * |
| 11 * @attribute active |
| 12 * @type boolean |
| 13 * @default false |
| 14 */ |
| 15 active: {value: false, reflect: true}, |
| 16 |
| 17 /** |
| 18 * If true, the element currently has focus due to keyboard |
| 19 * navigation. |
| 20 * |
| 21 * @attribute focused |
| 22 * @type boolean |
| 23 * @default false |
| 24 */ |
| 25 focused: {value: false, reflect: true}, |
| 26 |
| 27 /** |
| 28 * If true, the user is currently holding down the button. |
| 29 * |
| 30 * @attribute pressed |
| 31 * @type boolean |
| 32 * @default false |
| 33 */ |
| 34 pressed: {value: false, reflect: true}, |
| 35 |
| 36 /** |
| 37 * If true, the user cannot interact with this element. |
| 38 * |
| 39 * @attribute disabled |
| 40 * @type boolean |
| 41 * @default false |
| 42 */ |
| 43 disabled: {value: false, reflect: true}, |
| 44 |
| 45 /** |
| 46 * If true, the button toggles the active state with each tap. |
| 47 * Otherwise, the button becomes active when the user is holding |
| 48 * it down. |
| 49 * |
| 50 * @attribute isToggle |
| 51 * @type boolean |
| 52 * @default false |
| 53 */ |
| 54 isToggle: {value: false, reflect: false} |
| 55 |
| 56 }, |
| 57 |
| 58 disabledChanged: function() { |
| 59 if (this.disabled) { |
| 60 this.removeAttribute('tabindex'); |
| 61 } else { |
| 62 this.setAttribute('tabindex', 0); |
| 63 } |
| 64 }, |
| 65 |
| 66 downAction: function() { |
| 67 this.pressed = true; |
| 68 this.focused = false; |
| 69 |
| 70 if (this.isToggle) { |
| 71 this.active = !this.active; |
| 72 } else { |
| 73 this.active = true; |
| 74 } |
| 75 }, |
| 76 |
| 77 // Pulling up the context menu for an item should focus it; but we need to |
| 78 // be careful about how we deal with down/up events surrounding context |
| 79 // menus. The up event typically does not fire until the context menu |
| 80 // closes: so we focus immediately. |
| 81 // |
| 82 // This fires _after_ downAction. |
| 83 contextMenuAction: function(e) { |
| 84 // Note that upAction may fire _again_ on the actual up event. |
| 85 this.upAction(e); |
| 86 this.focusAction(); |
| 87 }, |
| 88 |
| 89 upAction: function() { |
| 90 this.pressed = false; |
| 91 |
| 92 if (!this.isToggle) { |
| 93 this.active = false; |
| 94 } |
| 95 }, |
| 96 |
| 97 focusAction: function() { |
| 98 if (!this.pressed) { |
| 99 // Only render the "focused" state if the element gains focus due to |
| 100 // keyboard navigation. |
| 101 this.focused = true; |
| 102 } |
| 103 }, |
| 104 |
| 105 blurAction: function() { |
| 106 this.focused = false; |
| 107 } |
| 108 |
| 109 }); |
| 110 |
| 111 |
OLD | NEW |