| OLD | NEW |
| 1 (function() { | 1 (function() { |
| 2 'use strict'; | 2 'use strict'; |
| 3 | 3 |
| 4 /** | 4 /** |
| 5 * Chrome uses an older version of DOM Level 3 Keyboard Events | 5 * Chrome uses an older version of DOM Level 3 Keyboard Events |
| 6 * | 6 * |
| 7 * Most keys are labeled as text, but some are Unicode codepoints. | 7 * Most keys are labeled as text, but some are Unicode codepoints. |
| 8 * Values taken from: http://www.w3.org/TR/2007/WD-DOM-Level-3-Events-200712
21/keyset.html#KeySet-Set | 8 * Values taken from: http://www.w3.org/TR/2007/WD-DOM-Level-3-Events-200712
21/keyset.html#KeySet-Set |
| 9 */ | 9 */ |
| 10 var KEY_IDENTIFIER = { | 10 var KEY_IDENTIFIER = { |
| (...skipping 205 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 216 }); | 216 }); |
| 217 } | 217 } |
| 218 | 218 |
| 219 /** | 219 /** |
| 220 * `Polymer.IronA11yKeysBehavior` provides a normalized interface for proces
sing | 220 * `Polymer.IronA11yKeysBehavior` provides a normalized interface for proces
sing |
| 221 * keyboard commands that pertain to [WAI-ARIA best practices](http://www.w3
.org/TR/wai-aria-practices/#kbd_general_binding). | 221 * keyboard commands that pertain to [WAI-ARIA best practices](http://www.w3
.org/TR/wai-aria-practices/#kbd_general_binding). |
| 222 * The element takes care of browser differences with respect to Keyboard ev
ents | 222 * The element takes care of browser differences with respect to Keyboard ev
ents |
| 223 * and uses an expressive syntax to filter key presses. | 223 * and uses an expressive syntax to filter key presses. |
| 224 * | 224 * |
| 225 * Use the `keyBindings` prototype property to express what combination of k
eys | 225 * Use the `keyBindings` prototype property to express what combination of k
eys |
| 226 * will trigger the event to fire. | 226 * will trigger the callback. A key binding has the format |
| 227 * `"KEY+MODIFIER:EVENT": "callback"` (`"KEY": "callback"` or |
| 228 * `"KEY:EVENT": "callback"` are valid as well). Some examples: |
| 227 * | 229 * |
| 228 * Use the `key-event-target` attribute to set up event handlers on a specif
ic | 230 * keyBindings: { |
| 231 * 'space': '_onKeydown', // same as 'space:keydown' |
| 232 * 'shift+tab': '_onKeydown', |
| 233 * 'enter:keypress': '_onKeypress', |
| 234 * 'esc:keyup': '_onKeyup' |
| 235 * } |
| 236 * |
| 237 * The callback will receive with an event containing the following informat
ion in `event.detail`: |
| 238 * |
| 239 * _onKeydown: function(event) { |
| 240 * console.log(event.detail.combo); // KEY+MODIFIER, e.g. "shift+tab" |
| 241 * console.log(event.detail.key); // KEY only, e.g. "tab" |
| 242 * console.log(event.detail.event); // EVENT, e.g. "keydown" |
| 243 * console.log(event.detail.keyboardEvent); // the original KeyboardE
vent |
| 244 * } |
| 245 * |
| 246 * Use the `keyEventTarget` attribute to set up event handlers on a specific |
| 229 * node. | 247 * node. |
| 230 * The `keys-pressed` event will fire when one of the key combinations set w
ith the | 248 * |
| 231 * `keys` property is pressed. | 249 * See the [demo source code](https://github.com/PolymerElements/iron-a11y-k
eys-behavior/blob/master/demo/x-key-aware.html) |
| 250 * for an example. |
| 232 * | 251 * |
| 233 * @demo demo/index.html | 252 * @demo demo/index.html |
| 234 * @polymerBehavior | 253 * @polymerBehavior |
| 235 */ | 254 */ |
| 236 Polymer.IronA11yKeysBehavior = { | 255 Polymer.IronA11yKeysBehavior = { |
| 237 properties: { | 256 properties: { |
| 238 /** | 257 /** |
| 239 * The EventTarget that will be firing relevant KeyboardEvents. Set it t
o | 258 * The EventTarget that will be firing relevant KeyboardEvents. Set it t
o |
| 240 * `null` to disable the listeners. | 259 * `null` to disable the listeners. |
| 241 * @type {?EventTarget} | 260 * @type {?EventTarget} |
| (...skipping 28 matching lines...) Expand all Loading... |
| 270 value: function() { | 289 value: function() { |
| 271 return {}; | 290 return {}; |
| 272 } | 291 } |
| 273 } | 292 } |
| 274 }, | 293 }, |
| 275 | 294 |
| 276 observers: [ | 295 observers: [ |
| 277 '_resetKeyEventListeners(keyEventTarget, _boundKeyHandlers)' | 296 '_resetKeyEventListeners(keyEventTarget, _boundKeyHandlers)' |
| 278 ], | 297 ], |
| 279 | 298 |
| 299 |
| 300 /** |
| 301 * To be used to express what combination of keys will trigger the relati
ve |
| 302 * callback. e.g. `keyBindings: { 'esc': '_onEscPressed'}` |
| 303 * @type {Object} |
| 304 */ |
| 280 keyBindings: {}, | 305 keyBindings: {}, |
| 281 | 306 |
| 282 registered: function() { | 307 registered: function() { |
| 283 this._prepKeyBindings(); | 308 this._prepKeyBindings(); |
| 284 }, | 309 }, |
| 285 | 310 |
| 286 attached: function() { | 311 attached: function() { |
| 287 this._listenKeyEventListeners(); | 312 this._listenKeyEventListeners(); |
| 288 }, | 313 }, |
| 289 | 314 |
| (...skipping 154 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 444 detail: detail, | 469 detail: detail, |
| 445 cancelable: true | 470 cancelable: true |
| 446 }); | 471 }); |
| 447 this[handlerName].call(this, event); | 472 this[handlerName].call(this, event); |
| 448 if (event.defaultPrevented) { | 473 if (event.defaultPrevented) { |
| 449 keyboardEvent.preventDefault(); | 474 keyboardEvent.preventDefault(); |
| 450 } | 475 } |
| 451 } | 476 } |
| 452 }; | 477 }; |
| 453 })(); | 478 })(); |
| OLD | NEW |