| 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 * @demo demo/index.html | |
| 244 * @polymerBehavior IronA11yKeysBehavior | |
| 245 */ | |
| 246 Polymer.IronA11yKeysBehavior = { | |
| 247 properties: { | |
| 248 /** | |
| 249 * The HTMLElement that will be firing relevant KeyboardEvents. | |
| 250 */ | |
| 251 keyEventTarget: { | |
| 252 type: Object, | |
| 253 value: function() { | |
| 254 return this; | |
| 255 } | |
| 256 }, | |
| 257 | |
| 258 _boundKeyHandlers: { | |
| 259 type: Array, | |
| 260 value: function() { | |
| 261 return []; | |
| 262 } | |
| 263 }, | |
| 264 | |
| 265 // We use this due to a limitation in IE10 where instances will have | |
| 266 // own properties of everything on the "prototype". | |
| 267 _imperativeKeyBindings: { | |
| 268 type: Object, | |
| 269 value: function() { | |
| 270 return {}; | |
| 271 } | |
| 272 } | |
| 273 }, | |
| 274 | |
| 275 observers: [ | |
| 276 '_resetKeyEventListeners(keyEventTarget, _boundKeyHandlers)' | |
| 277 ], | |
| 278 | |
| 279 keyBindings: {}, | |
| 280 | |
| 281 registered: function() { | |
| 282 this._prepKeyBindings(); | |
| 283 }, | |
| 284 | |
| 285 attached: function() { | |
| 286 this._listenKeyEventListeners(); | |
| 287 }, | |
| 288 | |
| 289 detached: function() { | |
| 290 this._unlistenKeyEventListeners(); | |
| 291 }, | |
| 292 | |
| 293 /** | |
| 294 * Can be used to imperatively add a key binding to the implementing | |
| 295 * element. This is the imperative equivalent of declaring a keybinding | |
| 296 * in the `keyBindings` prototype property. | |
| 297 */ | |
| 298 addOwnKeyBinding: function(eventString, handlerName) { | |
| 299 this._imperativeKeyBindings[eventString] = handlerName; | |
| 300 this._prepKeyBindings(); | |
| 301 this._resetKeyEventListeners(); | |
| 302 }, | |
| 303 | |
| 304 /** | |
| 305 * When called, will remove all imperatively-added key bindings. | |
| 306 */ | |
| 307 removeOwnKeyBindings: function() { | |
| 308 this._imperativeKeyBindings = {}; | |
| 309 this._prepKeyBindings(); | |
| 310 this._resetKeyEventListeners(); | |
| 311 }, | |
| 312 | |
| 313 keyboardEventMatchesKeys: function(event, eventString) { | |
| 314 var keyCombos = parseEventString(eventString); | |
| 315 var index; | |
| 316 | |
| 317 for (index = 0; index < keyCombos.length; ++index) { | |
| 318 if (keyComboMatchesEvent(keyCombos[index], event)) { | |
| 319 return true; | |
| 320 } | |
| 321 } | |
| 322 | |
| 323 return false; | |
| 324 }, | |
| 325 | |
| 326 _collectKeyBindings: function() { | |
| 327 var keyBindings = this.behaviors.map(function(behavior) { | |
| 328 return behavior.keyBindings; | |
| 329 }); | |
| 330 | |
| 331 if (keyBindings.indexOf(this.keyBindings) === -1) { | |
| 332 keyBindings.push(this.keyBindings); | |
| 333 } | |
| 334 | |
| 335 return keyBindings; | |
| 336 }, | |
| 337 | |
| 338 _prepKeyBindings: function() { | |
| 339 this._keyBindings = {}; | |
| 340 | |
| 341 this._collectKeyBindings().forEach(function(keyBindings) { | |
| 342 for (var eventString in keyBindings) { | |
| 343 this._addKeyBinding(eventString, keyBindings[eventString]); | |
| 344 } | |
| 345 }, this); | |
| 346 | |
| 347 for (var eventString in this._imperativeKeyBindings) { | |
| 348 this._addKeyBinding(eventString, this._imperativeKeyBindings[eventStri
ng]); | |
| 349 } | |
| 350 }, | |
| 351 | |
| 352 _addKeyBinding: function(eventString, handlerName) { | |
| 353 parseEventString(eventString).forEach(function(keyCombo) { | |
| 354 this._keyBindings[keyCombo.event] = | |
| 355 this._keyBindings[keyCombo.event] || []; | |
| 356 | |
| 357 this._keyBindings[keyCombo.event].push([ | |
| 358 keyCombo, | |
| 359 handlerName | |
| 360 ]); | |
| 361 }, this); | |
| 362 }, | |
| 363 | |
| 364 _resetKeyEventListeners: function() { | |
| 365 this._unlistenKeyEventListeners(); | |
| 366 | |
| 367 if (this.isAttached) { | |
| 368 this._listenKeyEventListeners(); | |
| 369 } | |
| 370 }, | |
| 371 | |
| 372 _listenKeyEventListeners: function() { | |
| 373 Object.keys(this._keyBindings).forEach(function(eventName) { | |
| 374 var keyBindings = this._keyBindings[eventName]; | |
| 375 var boundKeyHandler = this._onKeyBindingEvent.bind(this, keyBindings); | |
| 376 | |
| 377 this._boundKeyHandlers.push([this.keyEventTarget, eventName, boundKeyH
andler]); | |
| 378 | |
| 379 this.keyEventTarget.addEventListener(eventName, boundKeyHandler); | |
| 380 }, this); | |
| 381 }, | |
| 382 | |
| 383 _unlistenKeyEventListeners: function() { | |
| 384 var keyHandlerTuple; | |
| 385 var keyEventTarget; | |
| 386 var eventName; | |
| 387 var boundKeyHandler; | |
| 388 | |
| 389 while (this._boundKeyHandlers.length) { | |
| 390 // My kingdom for block-scope binding and destructuring assignment.. | |
| 391 keyHandlerTuple = this._boundKeyHandlers.pop(); | |
| 392 keyEventTarget = keyHandlerTuple[0]; | |
| 393 eventName = keyHandlerTuple[1]; | |
| 394 boundKeyHandler = keyHandlerTuple[2]; | |
| 395 | |
| 396 keyEventTarget.removeEventListener(eventName, boundKeyHandler); | |
| 397 } | |
| 398 }, | |
| 399 | |
| 400 _onKeyBindingEvent: function(keyBindings, event) { | |
| 401 keyBindings.forEach(function(keyBinding) { | |
| 402 var keyCombo = keyBinding[0]; | |
| 403 var handlerName = keyBinding[1]; | |
| 404 | |
| 405 if (!event.defaultPrevented && keyComboMatchesEvent(keyCombo, event))
{ | |
| 406 this._triggerKeyHandler(keyCombo, handlerName, event); | |
| 407 } | |
| 408 }, this); | |
| 409 }, | |
| 410 | |
| 411 _triggerKeyHandler: function(keyCombo, handlerName, keyboardEvent) { | |
| 412 var detail = Object.create(keyCombo); | |
| 413 detail.keyboardEvent = keyboardEvent; | |
| 414 | |
| 415 this[handlerName].call(this, new CustomEvent(keyCombo.event, { | |
| 416 detail: detail | |
| 417 })); | |
| 418 } | |
| 419 }; | |
| 420 })(); | |
| 421 </script> | |
| OLD | NEW |