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 |