Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(193)

Side by Side Diff: bower_components/core-a11y-keys/core-a11y-keys.html

Issue 786953007: npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: Created 5 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « bower_components/core-a11y-keys/bower.json ('k') | bower_components/core-a11y-keys/demo.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!--
2 @license
3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
4 This code may only be used under the BSD style license found at http://polym er.github.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/CO NTRIBUTORS.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/P ATENTS.txt
9 -->
10
11 <!--
12 `core-a11y-keys` provides a normalized interface for processing keyboard command s that pertain to [WAI-ARIA best
13 practices](http://www.w3.org/TR/wai-aria-practices/#kbd_general_binding). The el ement takes care of browser differences
14 with respect to Keyboard events and uses an expressive syntax to filter key pres ses.
15
16 Use the `keys` attribute to express what combination of keys will trigger the ev ent to fire.
17
18 Use the `target` attribute to set up event handlers on a specific node.
19 The `keys-pressed` event will fire when one of the key combinations set with the `keys` attribute is pressed.
20
21 Example:
22
23 This element will call `arrowHandler` on all arrow keys:
24
25 <core-a11y-keys target="{{}}" keys="up down left right" on-keys-pressed="{{a rrowHandler}}"></core-a11y-keys>
26
27 Keys Syntax:
28
29 The `keys` attribute can accepts a space seprated, `+` concatenated set of modif ier keys and some common keyboard keys.
30
31 The common keys are `a-z`, `0-9` (top row and number pad), `*` (shift 8 and numb er pad), `F1-F12`, `Page Up`, `Page
32 Down`, `Left Arrow`, `Right Arrow`, `Down Arrow`, `Up Arrow`, `Home`, `End`, `Es cape`, `Space`, `Tab`, and `Enter` keys.
33
34 The modifier keys are `Shift`, `Control`, and `Alt`.
35
36 All keys are expected to be lowercase and shortened:
37 `Left Arrow` is `left`, `Page Down` is `pagedown`, `Control` is `ctrl`, `F1` is `f1`, `Escape` is `esc` etc.
38
39 Keys Syntax Example:
40
41 Given the `keys` attribute value "ctrl+shift+f7 up pagedown esc space alt+m", th e `<core-a11y-keys>` element will send
42 the `keys-pressed` event if any of the follow key combos are pressed: Control an d Shift and F7 keys, Up Arrow key, Page
43 Down key, Escape key, Space key, Alt and M key.
44
45 Slider Example:
46
47 The following is an example of the set of keys that fulfil the WAI-ARIA "slider" role [best
48 practices](http://www.w3.org/TR/wai-aria-practices/#slider):
49
50 <core-a11y-keys target="{{}}" keys="left pagedown down" on-keys-pressed="{{d ecrement}}"></core-a11y-keys>
51 <core-a11y-keys target="{{}}" keys="right pageup up" on-keys-pressed="{{incr ement}}"></core-a11y-keys>
52 <core-a11y-keys target="{{}}" keys="home" on-keys-pressed="{{setMin}}"></cor e-a11y-keys>
53 <core-a11y-keys target="{{}}" keys="end" on-keys-pressed="{{setMax}}"></core -a11y-keys>
54
55 The `increment` function will move the slider a set amount toward the maximum va lue.
56 The `decrement` function will move the slider a set amount toward the minimum va lue.
57 The `setMin` function will move the slider to the minimum value.
58 The `setMax` function will move the slider to the maximum value.
59
60 Keys Syntax Grammar:
61
62 [EBNF](http://en.wikipedia.org/wiki/Extended_Backus%E2%80%93Naur_Form) Grammar o f the `keys` attribute.
63
64 modifier = "shift" | "ctrl" | "alt";
65 ascii = ? /[a-z0-9]/ ? ;
66 fnkey = ? f1 through f12 ? ;
67 arrow = "up" | "down" | "left" | "right" ;
68 key = "tab" | "esc" | "space" | "*" | "pageup" | "pagedown" | "home" | "end" | arrow | ascii | fnkey ;
69 keycombo = { modifier, "+" }, key ;
70 keys = keycombo, { " ", keycombo } ;
71
72 @group Core Elements
73 @element core-a11y-keys
74 @homepage github.io
75 -->
76
77 <link rel="import" href="../polymer/polymer.html">
78
79 <style shim-shadowdom>
80 html /deep/ core-a11y-keys {
81 display: none;
82 }
83 </style>
84
85 <polymer-element name="core-a11y-keys">
86 <script>
87 (function() {
88 /*
89 * Chrome uses an older version of DOM Level 3 Keyboard Events
90 *
91 * Most keys are labeled as text, but some are Unicode codepoints.
92 * Values taken from: http://www.w3.org/TR/2007/WD-DOM-Level-3-Events-200712 21/keyset.html#KeySet-Set
93 */
94 var KEY_IDENTIFIER = {
95 'U+0009': 'tab',
96 'U+001B': 'esc',
97 'U+0020': 'space',
98 'U+002A': '*',
99 'U+0030': '0',
100 'U+0031': '1',
101 'U+0032': '2',
102 'U+0033': '3',
103 'U+0034': '4',
104 'U+0035': '5',
105 'U+0036': '6',
106 'U+0037': '7',
107 'U+0038': '8',
108 'U+0039': '9',
109 'U+0041': 'a',
110 'U+0042': 'b',
111 'U+0043': 'c',
112 'U+0044': 'd',
113 'U+0045': 'e',
114 'U+0046': 'f',
115 'U+0047': 'g',
116 'U+0048': 'h',
117 'U+0049': 'i',
118 'U+004A': 'j',
119 'U+004B': 'k',
120 'U+004C': 'l',
121 'U+004D': 'm',
122 'U+004E': 'n',
123 'U+004F': 'o',
124 'U+0050': 'p',
125 'U+0051': 'q',
126 'U+0052': 'r',
127 'U+0053': 's',
128 'U+0054': 't',
129 'U+0055': 'u',
130 'U+0056': 'v',
131 'U+0057': 'w',
132 'U+0058': 'x',
133 'U+0059': 'y',
134 'U+005A': 'z',
135 'U+007F': 'del'
136 };
137
138 /*
139 * Special table for KeyboardEvent.keyCode.
140 * KeyboardEvent.keyIdentifier is better, and KeyBoardEvent.key is even bett er than that
141 *
142 * Values from: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEve nt.keyCode#Value_of_keyCode
143 */
144 var KEY_CODE = {
145 13: 'enter',
146 27: 'esc',
147 33: 'pageup',
148 34: 'pagedown',
149 35: 'end',
150 36: 'home',
151 32: 'space',
152 37: 'left',
153 38: 'up',
154 39: 'right',
155 40: 'down',
156 46: 'del',
157 106: '*'
158 };
159
160 /*
161 * KeyboardEvent.key is mostly represented by printable character made by th e keyboard, with unprintable keys labeled
162 * nicely.
163 *
164 * However, on OS X, Alt+char can make a Unicode character that follows an A pple-specific mapping. In this case, we
165 * fall back to .keyCode.
166 */
167 var KEY_CHAR = /[a-z0-9*]/;
168
169 function transformKey(key) {
170 var validKey = '';
171 if (key) {
172 var lKey = key.toLowerCase();
173 if (lKey.length == 1) {
174 if (KEY_CHAR.test(lKey)) {
175 validKey = lKey;
176 }
177 } else if (lKey == 'multiply') {
178 // numpad '*' can map to Multiply on IE/Windows
179 validKey = '*';
180 } else {
181 validKey = lKey;
182 }
183 }
184 return validKey;
185 }
186
187 var IDENT_CHAR = /U\+/;
188 function transformKeyIdentifier(keyIdent) {
189 var validKey = '';
190 if (keyIdent) {
191 if (IDENT_CHAR.test(keyIdent)) {
192 validKey = KEY_IDENTIFIER[keyIdent];
193 } else {
194 validKey = keyIdent.toLowerCase();
195 }
196 }
197 return validKey;
198 }
199
200 function transformKeyCode(keyCode) {
201 var validKey = '';
202 if (Number(keyCode)) {
203 if (keyCode >= 65 && keyCode <= 90) {
204 // ascii a-z
205 // lowercase is 32 offset from uppercase
206 validKey = String.fromCharCode(32 + keyCode);
207 } else if (keyCode >= 112 && keyCode <= 123) {
208 // function keys f1-f12
209 validKey = 'f' + (keyCode - 112);
210 } else if (keyCode >= 48 && keyCode <= 57) {
211 // top 0-9 keys
212 validKey = String(48 - keyCode);
213 } else if (keyCode >= 96 && keyCode <= 105) {
214 // num pad 0-9
215 validKey = String(96 - keyCode);
216 } else {
217 validKey = KEY_CODE[keyCode];
218 }
219 }
220 return validKey;
221 }
222
223 function keyboardEventToKey(ev) {
224 // fall back from .key, to .keyIdentifier, and then to .keyCode
225 var normalizedKey = transformKey(ev.key) || transformKeyIdentifier(ev.keyI dentifier) || transformKeyCode(ev.keyCode) || '';
226 return {
227 shift: ev.shiftKey,
228 ctrl: ev.ctrlKey,
229 meta: ev.metaKey,
230 alt: ev.altKey,
231 key: normalizedKey
232 };
233 }
234
235 /*
236 * Input: ctrl+shift+f7 => {ctrl: true, shift: true, key: 'f7'}
237 * ctrl/space => {ctrl: true} || {key: space}
238 */
239 function stringToKey(keyCombo) {
240 var keys = keyCombo.split('+');
241 var keyObj = Object.create(null);
242 keys.forEach(function(key) {
243 if (key == 'shift') {
244 keyObj.shift = true;
245 } else if (key == 'ctrl') {
246 keyObj.ctrl = true;
247 } else if (key == 'alt') {
248 keyObj.alt = true;
249 } else {
250 keyObj.key = key;
251 }
252 });
253 return keyObj;
254 }
255
256 function keyMatches(a, b) {
257 return Boolean(a.alt) == Boolean(b.alt) && Boolean(a.ctrl) == Boolean(b.ct rl) && Boolean(a.shift) == Boolean(b.shift) && a.key === b.key;
258 }
259
260 /**
261 * Fired when a keycombo in `keys` is pressed.
262 *
263 * @event keys-pressed
264 */
265 function processKeys(ev) {
266 var current = keyboardEventToKey(ev);
267 for (var i = 0, dk; i < this._desiredKeys.length; i++) {
268 dk = this._desiredKeys[i];
269 if (keyMatches(dk, current)) {
270 ev.preventDefault();
271 ev.stopPropagation();
272 this.fire('keys-pressed', current, this, false);
273 break;
274 }
275 }
276 }
277
278 function listen(node, handler) {
279 if (node && node.addEventListener) {
280 node.addEventListener('keydown', handler);
281 }
282 }
283
284 function unlisten(node, handler) {
285 if (node && node.removeEventListener) {
286 node.removeEventListener('keydown', handler);
287 }
288 }
289
290 Polymer('core-a11y-keys', {
291 created: function() {
292 this._keyHandler = processKeys.bind(this);
293 },
294 attached: function() {
295 listen(this.target, this._keyHandler);
296 },
297 detached: function() {
298 unlisten(this.target, this._keyHandler);
299 },
300 publish: {
301 /**
302 * The set of key combinations to listen for.
303 *
304 * @attribute keys
305 * @type string (keys syntax)
306 * @default ''
307 */
308 keys: '',
309 /**
310 * The node that will fire keyboard events.
311 *
312 * @attribute target
313 * @type Node
314 * @default null
315 */
316 target: null
317 },
318 keysChanged: function() {
319 // * can have multiple mappings: shift+8, * on numpad or Multiply on num pad
320 var normalized = this.keys.replace('*', '* shift+*');
321 this._desiredKeys = normalized.toLowerCase().split(' ').map(stringToKey) ;
322 },
323 targetChanged: function(oldTarget) {
324 unlisten(oldTarget, this._keyHandler);
325 listen(this.target, this._keyHandler);
326 }
327 });
328 })();
329 </script>
330 </polymer-element>
OLDNEW
« no previous file with comments | « bower_components/core-a11y-keys/bower.json ('k') | bower_components/core-a11y-keys/demo.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698