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 163 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
174 * keyEvent.key = @ | 174 * keyEvent.key = @ |
175 * To get 2 returned, set noSpecialChars = true | 175 * To get 2 returned, set noSpecialChars = true |
176 * To get @ returned, set noSpecialChars = false | 176 * To get @ returned, set noSpecialChars = false |
177 */ | 177 */ |
178 function normalizedKeyForEvent(keyEvent, noSpecialChars) { | 178 function normalizedKeyForEvent(keyEvent, noSpecialChars) { |
179 // Fall back from .key, to .keyIdentifier, to .keyCode, and then to | 179 // Fall back from .key, to .keyIdentifier, to .keyCode, and then to |
180 // .detail.key to support artificial keyboard events. | 180 // .detail.key to support artificial keyboard events. |
181 return transformKey(keyEvent.key, noSpecialChars) || | 181 return transformKey(keyEvent.key, noSpecialChars) || |
182 transformKeyIdentifier(keyEvent.keyIdentifier) || | 182 transformKeyIdentifier(keyEvent.keyIdentifier) || |
183 transformKeyCode(keyEvent.keyCode) || | 183 transformKeyCode(keyEvent.keyCode) || |
184 transformKey(keyEvent.detail.key, noSpecialChars) || ''; | 184 transformKey(keyEvent.detail ? keyEvent.detail.key : keyEvent.detail, no
SpecialChars) || ''; |
185 } | 185 } |
186 | 186 |
187 function keyComboMatchesEvent(keyCombo, event) { | 187 function keyComboMatchesEvent(keyCombo, event) { |
188 // For combos with modifiers we support only alpha-numeric keys | 188 // For combos with modifiers we support only alpha-numeric keys |
189 var keyEvent = normalizedKeyForEvent(event, keyCombo.hasModifiers); | 189 var keyEvent = normalizedKeyForEvent(event, keyCombo.hasModifiers); |
190 return keyEvent === keyCombo.key && | 190 return keyEvent === keyCombo.key && |
191 (!keyCombo.hasModifiers || ( | 191 (!keyCombo.hasModifiers || ( |
192 !!event.shiftKey === !!keyCombo.shiftKey && | 192 !!event.shiftKey === !!keyCombo.shiftKey && |
193 !!event.ctrlKey === !!keyCombo.ctrlKey && | 193 !!event.ctrlKey === !!keyCombo.ctrlKey && |
194 !!event.altKey === !!keyCombo.altKey && | 194 !!event.altKey === !!keyCombo.altKey && |
(...skipping 34 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
229 }); | 229 }); |
230 } | 230 } |
231 | 231 |
232 /** | 232 /** |
233 * `Polymer.IronA11yKeysBehavior` provides a normalized interface for proces
sing | 233 * `Polymer.IronA11yKeysBehavior` provides a normalized interface for proces
sing |
234 * keyboard commands that pertain to [WAI-ARIA best practices](http://www.w3
.org/TR/wai-aria-practices/#kbd_general_binding). | 234 * keyboard commands that pertain to [WAI-ARIA best practices](http://www.w3
.org/TR/wai-aria-practices/#kbd_general_binding). |
235 * The element takes care of browser differences with respect to Keyboard ev
ents | 235 * The element takes care of browser differences with respect to Keyboard ev
ents |
236 * and uses an expressive syntax to filter key presses. | 236 * and uses an expressive syntax to filter key presses. |
237 * | 237 * |
238 * Use the `keyBindings` prototype property to express what combination of k
eys | 238 * Use the `keyBindings` prototype property to express what combination of k
eys |
239 * will trigger the event to fire. | 239 * will trigger the callback. A key binding has the format |
| 240 * `"KEY+MODIFIER:EVENT": "callback"` (`"KEY": "callback"` or |
| 241 * `"KEY:EVENT": "callback"` are valid as well). Some examples: |
240 * | 242 * |
241 * Use the `key-event-target` attribute to set up event handlers on a specif
ic | 243 * keyBindings: { |
| 244 * 'space': '_onKeydown', // same as 'space:keydown' |
| 245 * 'shift+tab': '_onKeydown', |
| 246 * 'enter:keypress': '_onKeypress', |
| 247 * 'esc:keyup': '_onKeyup' |
| 248 * } |
| 249 * |
| 250 * The callback will receive with an event containing the following informat
ion in `event.detail`: |
| 251 * |
| 252 * _onKeydown: function(event) { |
| 253 * console.log(event.detail.combo); // KEY+MODIFIER, e.g. "shift+tab" |
| 254 * console.log(event.detail.key); // KEY only, e.g. "tab" |
| 255 * console.log(event.detail.event); // EVENT, e.g. "keydown" |
| 256 * console.log(event.detail.keyboardEvent); // the original KeyboardE
vent |
| 257 * } |
| 258 * |
| 259 * Use the `keyEventTarget` attribute to set up event handlers on a specific |
242 * node. | 260 * node. |
243 * The `keys-pressed` event will fire when one of the key combinations set w
ith the | 261 * |
244 * `keys` property is pressed. | 262 * See the [demo source code](https://github.com/PolymerElements/iron-a11y-k
eys-behavior/blob/master/demo/x-key-aware.html) |
| 263 * for an example. |
245 * | 264 * |
246 * @demo demo/index.html | 265 * @demo demo/index.html |
247 * @polymerBehavior | 266 * @polymerBehavior |
248 */ | 267 */ |
249 Polymer.IronA11yKeysBehavior = { | 268 Polymer.IronA11yKeysBehavior = { |
250 properties: { | 269 properties: { |
251 /** | 270 /** |
252 * The HTMLElement that will be firing relevant KeyboardEvents. | 271 * The EventTarget that will be firing relevant KeyboardEvents. Set it t
o |
| 272 * `null` to disable the listeners. |
| 273 * @type {?EventTarget} |
253 */ | 274 */ |
254 keyEventTarget: { | 275 keyEventTarget: { |
255 type: Object, | 276 type: Object, |
256 value: function() { | 277 value: function() { |
257 return this; | 278 return this; |
258 } | 279 } |
259 }, | 280 }, |
260 | 281 |
261 /** | 282 /** |
262 * If true, this property will cause the implementing element to | 283 * If true, this property will cause the implementing element to |
(...skipping 18 matching lines...) Expand all Loading... |
281 value: function() { | 302 value: function() { |
282 return {}; | 303 return {}; |
283 } | 304 } |
284 } | 305 } |
285 }, | 306 }, |
286 | 307 |
287 observers: [ | 308 observers: [ |
288 '_resetKeyEventListeners(keyEventTarget, _boundKeyHandlers)' | 309 '_resetKeyEventListeners(keyEventTarget, _boundKeyHandlers)' |
289 ], | 310 ], |
290 | 311 |
| 312 |
| 313 /** |
| 314 * To be used to express what combination of keys will trigger the relati
ve |
| 315 * callback. e.g. `keyBindings: { 'esc': '_onEscPressed'}` |
| 316 * @type {Object} |
| 317 */ |
291 keyBindings: {}, | 318 keyBindings: {}, |
292 | 319 |
293 registered: function() { | 320 registered: function() { |
294 this._prepKeyBindings(); | 321 this._prepKeyBindings(); |
295 }, | 322 }, |
296 | 323 |
297 attached: function() { | 324 attached: function() { |
298 this._listenKeyEventListeners(); | 325 this._listenKeyEventListeners(); |
299 }, | 326 }, |
300 | 327 |
(...skipping 87 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
388 | 415 |
389 _resetKeyEventListeners: function() { | 416 _resetKeyEventListeners: function() { |
390 this._unlistenKeyEventListeners(); | 417 this._unlistenKeyEventListeners(); |
391 | 418 |
392 if (this.isAttached) { | 419 if (this.isAttached) { |
393 this._listenKeyEventListeners(); | 420 this._listenKeyEventListeners(); |
394 } | 421 } |
395 }, | 422 }, |
396 | 423 |
397 _listenKeyEventListeners: function() { | 424 _listenKeyEventListeners: function() { |
| 425 if (!this.keyEventTarget) { |
| 426 return; |
| 427 } |
398 Object.keys(this._keyBindings).forEach(function(eventName) { | 428 Object.keys(this._keyBindings).forEach(function(eventName) { |
399 var keyBindings = this._keyBindings[eventName]; | 429 var keyBindings = this._keyBindings[eventName]; |
400 var boundKeyHandler = this._onKeyBindingEvent.bind(this, keyBindings); | 430 var boundKeyHandler = this._onKeyBindingEvent.bind(this, keyBindings); |
401 | 431 |
402 this._boundKeyHandlers.push([this.keyEventTarget, eventName, boundKeyH
andler]); | 432 this._boundKeyHandlers.push([this.keyEventTarget, eventName, boundKeyH
andler]); |
403 | 433 |
404 this.keyEventTarget.addEventListener(eventName, boundKeyHandler); | 434 this.keyEventTarget.addEventListener(eventName, boundKeyHandler); |
405 }, this); | 435 }, this); |
406 }, | 436 }, |
407 | 437 |
(...skipping 45 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
453 cancelable: true | 483 cancelable: true |
454 }); | 484 }); |
455 this[handlerName].call(this, event); | 485 this[handlerName].call(this, event); |
456 if (event.defaultPrevented) { | 486 if (event.defaultPrevented) { |
457 keyboardEvent.preventDefault(); | 487 keyboardEvent.preventDefault(); |
458 } | 488 } |
459 } | 489 } |
460 }; | 490 }; |
461 })(); | 491 })(); |
462 </script> | 492 </script> |
OLD | NEW |