OLD | NEW |
1 <!-- | 1 <!-- |
2 @license | 2 @license |
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | 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.g
ithub.io/LICENSE.txt | 4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.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/CONTRI
BUTORS.txt | 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
7 Code distributed by Google as part of the polymer project is also | 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/PATEN
TS.txt | 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
9 --> | 9 --> |
10 | 10 |
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
43 reflectToAttribute: true | 43 reflectToAttribute: true |
44 }, | 44 }, |
45 | 45 |
46 /** | 46 /** |
47 * If true, the button is a toggle and is currently in the active state. | 47 * If true, the button is a toggle and is currently in the active state. |
48 */ | 48 */ |
49 active: { | 49 active: { |
50 type: Boolean, | 50 type: Boolean, |
51 value: false, | 51 value: false, |
52 notify: true, | 52 notify: true, |
53 reflectToAttribute: true, | 53 reflectToAttribute: true |
54 observer: '_activeChanged' | |
55 }, | 54 }, |
56 | 55 |
57 /** | 56 /** |
58 * True if the element is currently being pressed by a "pointer," which | 57 * True if the element is currently being pressed by a "pointer," which |
59 * is loosely defined as mouse or touch input (but specifically excluding | 58 * is loosely defined as mouse or touch input (but specifically excluding |
60 * keyboard input). | 59 * keyboard input). |
61 */ | 60 */ |
62 pointerDown: { | 61 pointerDown: { |
63 type: Boolean, | 62 type: Boolean, |
64 readOnly: true, | 63 readOnly: true, |
65 value: false | 64 value: false |
66 }, | 65 }, |
67 | 66 |
68 /** | 67 /** |
69 * True if the input device that caused the element to receive focus | 68 * True if the input device that caused the element to receive focus |
70 * was a keyboard. | 69 * was a keyboard. |
71 */ | 70 */ |
72 receivedFocusFromKeyboard: { | 71 receivedFocusFromKeyboard: { |
73 type: Boolean, | 72 type: Boolean, |
74 readOnly: true | 73 readOnly: true |
| 74 }, |
| 75 |
| 76 /** |
| 77 * The aria attribute to be set if the button is a toggle and in the |
| 78 * active state. |
| 79 */ |
| 80 ariaActiveAttribute: { |
| 81 type: String, |
| 82 value: 'aria-pressed', |
| 83 observer: '_ariaActiveAttributeChanged' |
75 } | 84 } |
76 }, | 85 }, |
77 | 86 |
78 listeners: { | 87 listeners: { |
79 down: '_downHandler', | 88 down: '_downHandler', |
80 up: '_upHandler', | 89 up: '_upHandler', |
81 tap: '_tapHandler' | 90 tap: '_tapHandler' |
82 }, | 91 }, |
83 | 92 |
84 observers: [ | 93 observers: [ |
85 '_detectKeyboardFocus(focused)' | 94 '_detectKeyboardFocus(focused)', |
| 95 '_activeChanged(active, ariaActiveAttribute)' |
86 ], | 96 ], |
87 | 97 |
88 keyBindings: { | 98 keyBindings: { |
89 'enter:keydown': '_asyncClick', | 99 'enter:keydown': '_asyncClick', |
90 'space:keydown': '_spaceKeyDownHandler', | 100 'space:keydown': '_spaceKeyDownHandler', |
91 'space:keyup': '_spaceKeyUpHandler', | 101 'space:keyup': '_spaceKeyUpHandler', |
92 }, | 102 }, |
93 | 103 |
| 104 _mouseEventRe: /^mouse/, |
| 105 |
94 _tapHandler: function() { | 106 _tapHandler: function() { |
95 if (this.toggles) { | 107 if (this.toggles) { |
96 // a tap is needed to toggle the active state | 108 // a tap is needed to toggle the active state |
97 this._userActivate(!this.active); | 109 this._userActivate(!this.active); |
98 } else { | 110 } else { |
99 this.active = false; | 111 this.active = false; |
100 } | 112 } |
101 }, | 113 }, |
102 | 114 |
103 _detectKeyboardFocus: function(focused) { | 115 _detectKeyboardFocus: function(focused) { |
104 this._setReceivedFocusFromKeyboard(!this.pointerDown && focused); | 116 this._setReceivedFocusFromKeyboard(!this.pointerDown && focused); |
105 }, | 117 }, |
106 | 118 |
107 // to emulate native checkbox, (de-)activations from a user interaction fire | 119 // to emulate native checkbox, (de-)activations from a user interaction fire |
108 // 'change' events | 120 // 'change' events |
109 _userActivate: function(active) { | 121 _userActivate: function(active) { |
110 this.active = active; | 122 if (this.active !== active) { |
111 this.fire('change'); | 123 this.active = active; |
| 124 this.fire('change'); |
| 125 } |
112 }, | 126 }, |
113 | 127 |
114 _downHandler: function() { | 128 _downHandler: function(event) { |
115 this._setPointerDown(true); | 129 this._setPointerDown(true); |
116 this._setPressed(true); | 130 this._setPressed(true); |
117 this._setReceivedFocusFromKeyboard(false); | 131 this._setReceivedFocusFromKeyboard(false); |
118 }, | 132 }, |
119 | 133 |
120 _upHandler: function() { | 134 _upHandler: function() { |
121 this._setPointerDown(false); | 135 this._setPointerDown(false); |
122 this._setPressed(false); | 136 this._setPressed(false); |
123 }, | 137 }, |
124 | 138 |
| 139 /** |
| 140 * @param {!KeyboardEvent} event . |
| 141 */ |
125 _spaceKeyDownHandler: function(event) { | 142 _spaceKeyDownHandler: function(event) { |
126 var keyboardEvent = event.detail.keyboardEvent; | 143 var keyboardEvent = event.detail.keyboardEvent; |
| 144 var target = Polymer.dom(keyboardEvent).localTarget; |
| 145 |
| 146 // Ignore the event if this is coming from a focused light child, since th
at |
| 147 // element will deal with it. |
| 148 if (this.isLightDescendant(/** @type {Node} */(target))) |
| 149 return; |
| 150 |
127 keyboardEvent.preventDefault(); | 151 keyboardEvent.preventDefault(); |
128 keyboardEvent.stopImmediatePropagation(); | 152 keyboardEvent.stopImmediatePropagation(); |
129 this._setPressed(true); | 153 this._setPressed(true); |
130 }, | 154 }, |
131 | 155 |
132 _spaceKeyUpHandler: function() { | 156 /** |
| 157 * @param {!KeyboardEvent} event . |
| 158 */ |
| 159 _spaceKeyUpHandler: function(event) { |
| 160 var keyboardEvent = event.detail.keyboardEvent; |
| 161 var target = Polymer.dom(keyboardEvent).localTarget; |
| 162 |
| 163 // Ignore the event if this is coming from a focused light child, since th
at |
| 164 // element will deal with it. |
| 165 if (this.isLightDescendant(/** @type {Node} */(target))) |
| 166 return; |
| 167 |
133 if (this.pressed) { | 168 if (this.pressed) { |
134 this._asyncClick(); | 169 this._asyncClick(); |
135 } | 170 } |
136 this._setPressed(false); | 171 this._setPressed(false); |
137 }, | 172 }, |
138 | 173 |
139 // trigger click asynchronously, the asynchrony is useful to allow one | 174 // trigger click asynchronously, the asynchrony is useful to allow one |
140 // event handler to unwind before triggering another event | 175 // event handler to unwind before triggering another event |
141 _asyncClick: function() { | 176 _asyncClick: function() { |
142 this.async(function() { | 177 this.async(function() { |
143 this.click(); | 178 this.click(); |
144 }, 1); | 179 }, 1); |
145 }, | 180 }, |
146 | 181 |
147 // any of these changes are considered a change to button state | 182 // any of these changes are considered a change to button state |
148 | 183 |
149 _pressedChanged: function(pressed) { | 184 _pressedChanged: function(pressed) { |
150 this._changedButtonState(); | 185 this._changedButtonState(); |
151 }, | 186 }, |
152 | 187 |
153 _activeChanged: function(active) { | 188 _ariaActiveAttributeChanged: function(value, oldValue) { |
| 189 if (oldValue && oldValue != value && this.hasAttribute(oldValue)) { |
| 190 this.removeAttribute(oldValue); |
| 191 } |
| 192 }, |
| 193 |
| 194 _activeChanged: function(active, ariaActiveAttribute) { |
154 if (this.toggles) { | 195 if (this.toggles) { |
155 this.setAttribute('aria-pressed', active ? 'true' : 'false'); | 196 this.setAttribute(this.ariaActiveAttribute, |
| 197 active ? 'true' : 'false'); |
156 } else { | 198 } else { |
157 this.removeAttribute('aria-pressed'); | 199 this.removeAttribute(this.ariaActiveAttribute); |
158 } | 200 } |
159 this._changedButtonState(); | 201 this._changedButtonState(); |
160 }, | 202 }, |
161 | 203 |
162 _controlStateChanged: function() { | 204 _controlStateChanged: function() { |
163 if (this.disabled) { | 205 if (this.disabled) { |
164 this._setPressed(false); | 206 this._setPressed(false); |
165 } else { | 207 } else { |
166 this._changedButtonState(); | 208 this._changedButtonState(); |
167 } | 209 } |
168 }, | 210 }, |
169 | 211 |
170 // provide hook for follow-on behaviors to react to button-state | 212 // provide hook for follow-on behaviors to react to button-state |
171 | 213 |
172 _changedButtonState: function() { | 214 _changedButtonState: function() { |
173 if (this._buttonStateChanged) { | 215 if (this._buttonStateChanged) { |
174 this._buttonStateChanged(); // abstract | 216 this._buttonStateChanged(); // abstract |
175 } | 217 } |
176 } | 218 } |
177 | 219 |
178 }; | 220 }; |
179 | 221 |
180 /** @polymerBehavior */ | 222 /** @polymerBehavior */ |
181 Polymer.IronButtonState = [ | 223 Polymer.IronButtonState = [ |
182 Polymer.IronA11yKeysBehavior, | 224 Polymer.IronA11yKeysBehavior, |
183 Polymer.IronButtonStateImpl | 225 Polymer.IronButtonStateImpl |
184 ]; | 226 ]; |
185 | 227 |
186 </script> | 228 </script> |
OLD | NEW |