OLD | NEW |
(Empty) | |
| 1 <!-- |
| 2 @license |
| 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 |
| 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 |
| 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 |
| 9 --> |
| 10 |
| 11 <link rel="import" href="../polymer/polymer.html"> |
| 12 |
| 13 <script> |
| 14 (function() { |
| 15 'use strict'; |
| 16 |
| 17 /** |
| 18 * Chrome uses an older version of DOM Level 3 Keyboard Events |
| 19 * |
| 20 * Most keys are labeled as text, but some are Unicode codepoints. |
| 21 * Values taken from: http://www.w3.org/TR/2007/WD-DOM-Level-3-Events-200712
21/keyset.html#KeySet-Set |
| 22 */ |
| 23 var KEY_IDENTIFIER = { |
| 24 'U+0009': 'tab', |
| 25 'U+001B': 'esc', |
| 26 'U+0020': 'space', |
| 27 'U+002A': '*', |
| 28 'U+0030': '0', |
| 29 'U+0031': '1', |
| 30 'U+0032': '2', |
| 31 'U+0033': '3', |
| 32 'U+0034': '4', |
| 33 'U+0035': '5', |
| 34 'U+0036': '6', |
| 35 'U+0037': '7', |
| 36 'U+0038': '8', |
| 37 'U+0039': '9', |
| 38 'U+0041': 'a', |
| 39 'U+0042': 'b', |
| 40 'U+0043': 'c', |
| 41 'U+0044': 'd', |
| 42 'U+0045': 'e', |
| 43 'U+0046': 'f', |
| 44 'U+0047': 'g', |
| 45 'U+0048': 'h', |
| 46 'U+0049': 'i', |
| 47 'U+004A': 'j', |
| 48 'U+004B': 'k', |
| 49 'U+004C': 'l', |
| 50 'U+004D': 'm', |
| 51 'U+004E': 'n', |
| 52 'U+004F': 'o', |
| 53 'U+0050': 'p', |
| 54 'U+0051': 'q', |
| 55 'U+0052': 'r', |
| 56 'U+0053': 's', |
| 57 'U+0054': 't', |
| 58 'U+0055': 'u', |
| 59 'U+0056': 'v', |
| 60 'U+0057': 'w', |
| 61 'U+0058': 'x', |
| 62 'U+0059': 'y', |
| 63 'U+005A': 'z', |
| 64 'U+007F': 'del' |
| 65 }; |
| 66 |
| 67 /** |
| 68 * Special table for KeyboardEvent.keyCode. |
| 69 * KeyboardEvent.keyIdentifier is better, and KeyBoardEvent.key is even bett
er |
| 70 * than that. |
| 71 * |
| 72 * Values from: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEve
nt.keyCode#Value_of_keyCode |
| 73 */ |
| 74 var KEY_CODE = { |
| 75 9: 'tab', |
| 76 13: 'enter', |
| 77 27: 'esc', |
| 78 33: 'pageup', |
| 79 34: 'pagedown', |
| 80 35: 'end', |
| 81 36: 'home', |
| 82 32: 'space', |
| 83 37: 'left', |
| 84 38: 'up', |
| 85 39: 'right', |
| 86 40: 'down', |
| 87 46: 'del', |
| 88 106: '*' |
| 89 }; |
| 90 |
| 91 /** |
| 92 * MODIFIER_KEYS maps the short name for modifier keys used in a key |
| 93 * combo string to the property name that references those same keys |
| 94 * in a KeyboardEvent instance. |
| 95 */ |
| 96 var MODIFIER_KEYS = { |
| 97 shift: 'shiftKey', |
| 98 ctrl: 'ctrlKey', |
| 99 alt: 'altKey', |
| 100 meta: 'metaKey' |
| 101 }; |
| 102 |
| 103 /** |
| 104 * KeyboardEvent.key is mostly represented by printable character made by |
| 105 * the keyboard, with unprintable keys labeled nicely. |
| 106 * |
| 107 * However, on OS X, Alt+char can make a Unicode character that follows an |
| 108 * Apple-specific mapping. In this case, we |
| 109 * fall back to .keyCode. |
| 110 */ |
| 111 var KEY_CHAR = /[a-z0-9*]/; |
| 112 |
| 113 /** |
| 114 * Matches a keyIdentifier string. |
| 115 */ |
| 116 var IDENT_CHAR = /U\+/; |
| 117 |
| 118 /** |
| 119 * Matches arrow keys in Gecko 27.0+ |
| 120 */ |
| 121 var ARROW_KEY = /^arrow/; |
| 122 |
| 123 /** |
| 124 * Matches space keys everywhere (notably including IE10's exceptional name |
| 125 * `spacebar`). |
| 126 */ |
| 127 var SPACE_KEY = /^space(bar)?/; |
| 128 |
| 129 function transformKey(key) { |
| 130 var validKey = ''; |
| 131 if (key) { |
| 132 var lKey = key.toLowerCase(); |
| 133 if (lKey.length == 1) { |
| 134 if (KEY_CHAR.test(lKey)) { |
| 135 validKey = lKey; |
| 136 } |
| 137 } else if (ARROW_KEY.test(lKey)) { |
| 138 validKey = lKey.replace('arrow', ''); |
| 139 } else if (SPACE_KEY.test(lKey)) { |
| 140 validKey = 'space'; |
| 141 } else if (lKey == 'multiply') { |
| 142 // numpad '*' can map to Multiply on IE/Windows |
| 143 validKey = '*'; |
| 144 } else { |
| 145 validKey = lKey; |
| 146 } |
| 147 } |
| 148 return validKey; |
| 149 } |
| 150 |
| 151 function transformKeyIdentifier(keyIdent) { |
| 152 var validKey = ''; |
| 153 if (keyIdent) { |
| 154 if (IDENT_CHAR.test(keyIdent)) { |
| 155 validKey = KEY_IDENTIFIER[keyIdent]; |
| 156 } else { |
| 157 validKey = keyIdent.toLowerCase(); |
| 158 } |
| 159 } |
| 160 return validKey; |
| 161 } |
| 162 |
| 163 function transformKeyCode(keyCode) { |
| 164 var validKey = ''; |
| 165 if (Number(keyCode)) { |
| 166 if (keyCode >= 65 && keyCode <= 90) { |
| 167 // ascii a-z |
| 168 // lowercase is 32 offset from uppercase |
| 169 validKey = String.fromCharCode(32 + keyCode); |
| 170 } else if (keyCode >= 112 && keyCode <= 123) { |
| 171 // function keys f1-f12 |
| 172 validKey = 'f' + (keyCode - 112); |
| 173 } else if (keyCode >= 48 && keyCode <= 57) { |
| 174 // top 0-9 keys |
| 175 validKey = String(48 - keyCode); |
| 176 } else if (keyCode >= 96 && keyCode <= 105) { |
| 177 // num pad 0-9 |
| 178 validKey = String(96 - keyCode); |
| 179 } else { |
| 180 validKey = KEY_CODE[keyCode]; |
| 181 } |
| 182 } |
| 183 return validKey; |
| 184 } |
| 185 |
| 186 function normalizedKeyForEvent(keyEvent) { |
| 187 // fall back from .key, to .keyIdentifier, to .keyCode, and then to |
| 188 // .detail.key to support artificial keyboard events |
| 189 return transformKey(keyEvent.key) || |
| 190 transformKeyIdentifier(keyEvent.keyIdentifier) || |
| 191 transformKeyCode(keyEvent.keyCode) || |
| 192 transformKey(keyEvent.detail.key) || ''; |
| 193 } |
| 194 |
| 195 function keyComboMatchesEvent(keyCombo, keyEvent) { |
| 196 return normalizedKeyForEvent(keyEvent) === keyCombo.key && |
| 197 !!keyEvent.shiftKey === !!keyCombo.shiftKey && |
| 198 !!keyEvent.ctrlKey === !!keyCombo.ctrlKey && |
| 199 !!keyEvent.altKey === !!keyCombo.altKey && |
| 200 !!keyEvent.metaKey === !!keyCombo.metaKey; |
| 201 } |
| 202 |
| 203 function parseKeyComboString(keyComboString) { |
| 204 return keyComboString.split('+').reduce(function(parsedKeyCombo, keyComboP
art) { |
| 205 var eventParts = keyComboPart.split(':'); |
| 206 var keyName = eventParts[0]; |
| 207 var event = eventParts[1]; |
| 208 |
| 209 if (keyName in MODIFIER_KEYS) { |
| 210 parsedKeyCombo[MODIFIER_KEYS[keyName]] = true; |
| 211 } else { |
| 212 parsedKeyCombo.key = keyName; |
| 213 parsedKeyCombo.event = event || 'keydown'; |
| 214 } |
| 215 |
| 216 return parsedKeyCombo; |
| 217 }, { |
| 218 combo: keyComboString.split(':').shift() |
| 219 }); |
| 220 } |
| 221 |
| 222 function parseEventString(eventString) { |
| 223 return eventString.split(' ').map(function(keyComboString) { |
| 224 return parseKeyComboString(keyComboString); |
| 225 }); |
| 226 } |
| 227 |
| 228 |
| 229 /** |
| 230 * `Polymer.IronA11yKeysBehavior` provides a normalized interface for proces
sing |
| 231 * keyboard commands that pertain to [WAI-ARIA best practices](http://www.w3
.org/TR/wai-aria-practices/#kbd_general_binding). |
| 232 * The element takes care of browser differences with respect to Keyboard ev
ents |
| 233 * and uses an expressive syntax to filter key presses. |
| 234 * |
| 235 * Use the `keyBindings` prototype property to express what combination of k
eys |
| 236 * will trigger the event to fire. |
| 237 * |
| 238 * Use the `key-event-target` attribute to set up event handlers on a specif
ic |
| 239 * node. |
| 240 * The `keys-pressed` event will fire when one of the key combinations set w
ith the |
| 241 * `keys` property is pressed. |
| 242 * |
| 243 * @polymerBehavior IronA11yKeysBehavior |
| 244 */ |
| 245 Polymer.IronA11yKeysBehavior = { |
| 246 properties: { |
| 247 /** |
| 248 * The HTMLElement that will be firing relevant KeyboardEvents. |
| 249 */ |
| 250 keyEventTarget: { |
| 251 type: Object, |
| 252 value: function() { |
| 253 return this; |
| 254 } |
| 255 }, |
| 256 |
| 257 _boundKeyHandlers: { |
| 258 value: function() { |
| 259 return []; |
| 260 } |
| 261 }, |
| 262 |
| 263 // We use this due to a limitation in IE10 where instances will have |
| 264 // own properties of everything on the "prototype". |
| 265 _imperativeKeyBindings: { |
| 266 value: function() { |
| 267 return {}; |
| 268 } |
| 269 } |
| 270 }, |
| 271 |
| 272 observers: [ |
| 273 '_resetKeyEventListeners(keyEventTarget, _boundKeyHandlers)' |
| 274 ], |
| 275 |
| 276 keyBindings: {}, |
| 277 |
| 278 registered: function() { |
| 279 this._prepKeyBindings(); |
| 280 }, |
| 281 |
| 282 attached: function() { |
| 283 this._listenKeyEventListeners(); |
| 284 }, |
| 285 |
| 286 detached: function() { |
| 287 this._unlistenKeyEventListeners(); |
| 288 }, |
| 289 |
| 290 /** |
| 291 * Can be used to imperatively add a key binding to the implementing |
| 292 * element. This is the imperative equivalent of declaring a keybinding |
| 293 * in the `keyBindings` prototype property. |
| 294 */ |
| 295 addOwnKeyBinding: function(eventString, handlerName) { |
| 296 this._imperativeKeyBindings[eventString] = handlerName; |
| 297 this._prepKeyBindings(); |
| 298 this._resetKeyEventListeners(); |
| 299 }, |
| 300 |
| 301 /** |
| 302 * When called, will remove all imperatively-added key bindings. |
| 303 */ |
| 304 removeOwnKeyBindings: function() { |
| 305 this._imperativeKeyBindings = {}; |
| 306 this._prepKeyBindings(); |
| 307 this._resetKeyEventListeners(); |
| 308 }, |
| 309 |
| 310 keyboardEventMatchesKeys: function(event, eventString) { |
| 311 var keyCombos = parseEventString(eventString); |
| 312 var index; |
| 313 |
| 314 for (index = 0; index < keyCombos.length; ++index) { |
| 315 if (keyComboMatchesEvent(keyCombos[index], event)) { |
| 316 return true; |
| 317 } |
| 318 } |
| 319 |
| 320 return false; |
| 321 }, |
| 322 |
| 323 _collectKeyBindings: function() { |
| 324 var keyBindings = this.behaviors.map(function(behavior) { |
| 325 return behavior.keyBindings; |
| 326 }); |
| 327 |
| 328 if (keyBindings.indexOf(this.keyBindings) === -1) { |
| 329 keyBindings.push(this.keyBindings); |
| 330 } |
| 331 |
| 332 return keyBindings; |
| 333 }, |
| 334 |
| 335 _prepKeyBindings: function() { |
| 336 this._keyBindings = {}; |
| 337 |
| 338 this._collectKeyBindings().forEach(function(keyBindings) { |
| 339 for (var eventString in keyBindings) { |
| 340 this._addKeyBinding(eventString, keyBindings[eventString]); |
| 341 } |
| 342 }, this); |
| 343 |
| 344 for (var eventString in this._imperativeKeyBindings) { |
| 345 this._addKeyBinding(eventString, this._imperativeKeyBindings[eventStri
ng]); |
| 346 } |
| 347 }, |
| 348 |
| 349 _addKeyBinding: function(eventString, handlerName) { |
| 350 parseEventString(eventString).forEach(function(keyCombo) { |
| 351 this._keyBindings[keyCombo.event] = |
| 352 this._keyBindings[keyCombo.event] || []; |
| 353 |
| 354 this._keyBindings[keyCombo.event].push([ |
| 355 keyCombo, |
| 356 handlerName |
| 357 ]); |
| 358 }, this); |
| 359 }, |
| 360 |
| 361 _resetKeyEventListeners: function() { |
| 362 this._unlistenKeyEventListeners(); |
| 363 |
| 364 if (this.isAttached) { |
| 365 this._listenKeyEventListeners(); |
| 366 } |
| 367 }, |
| 368 |
| 369 _listenKeyEventListeners: function() { |
| 370 Object.keys(this._keyBindings).forEach(function(eventName) { |
| 371 var keyBindings = this._keyBindings[eventName]; |
| 372 var boundKeyHandler = this._onKeyBindingEvent.bind(this, keyBindings); |
| 373 |
| 374 this._boundKeyHandlers.push([this.keyEventTarget, eventName, boundKeyH
andler]); |
| 375 |
| 376 this.keyEventTarget.addEventListener(eventName, boundKeyHandler); |
| 377 }, this); |
| 378 }, |
| 379 |
| 380 _unlistenKeyEventListeners: function() { |
| 381 var keyHandlerTuple; |
| 382 var keyEventTarget; |
| 383 var eventName; |
| 384 var boundKeyHandler; |
| 385 |
| 386 while (this._boundKeyHandlers.length) { |
| 387 // My kingdom for block-scope binding and destructuring assignment.. |
| 388 keyHandlerTuple = this._boundKeyHandlers.pop(); |
| 389 keyEventTarget = keyHandlerTuple[0]; |
| 390 eventName = keyHandlerTuple[1]; |
| 391 boundKeyHandler = keyHandlerTuple[2]; |
| 392 |
| 393 keyEventTarget.removeEventListener(eventName, boundKeyHandler); |
| 394 } |
| 395 }, |
| 396 |
| 397 _onKeyBindingEvent: function(keyBindings, event) { |
| 398 keyBindings.forEach(function(keyBinding) { |
| 399 var keyCombo = keyBinding[0]; |
| 400 var handlerName = keyBinding[1]; |
| 401 |
| 402 if (!event.defaultPrevented && keyComboMatchesEvent(keyCombo, event))
{ |
| 403 this._triggerKeyHandler(keyCombo, handlerName, event); |
| 404 } |
| 405 }, this); |
| 406 }, |
| 407 |
| 408 _triggerKeyHandler: function(keyCombo, handlerName, keyboardEvent) { |
| 409 var detail = Object.create(keyCombo); |
| 410 detail.keyboardEvent = keyboardEvent; |
| 411 |
| 412 this[handlerName].call(this, new CustomEvent(keyCombo.event, { |
| 413 detail: detail |
| 414 })); |
| 415 } |
| 416 }; |
| 417 })(); |
| 418 </script> |
OLD | NEW |