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 | |
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS | |
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS | |
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 | |
9 --> | |
10 | |
11 <link rel="import" href="../polymer/polymer.html"> | |
12 <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html
"> | |
13 | |
14 | |
15 <script> | |
16 | |
17 /* | |
18 `iron-a11y-keys` provides a normalized interface for processing keyboard command
s that pertain to [WAI-ARIA best | |
19 practices](http://www.w3.org/TR/wai-aria-practices/#kbd_general_binding). The el
ement takes care of browser differences | |
20 with respect to Keyboard events and uses an expressive syntax to filter key pres
ses. | |
21 | |
22 Use the `keys` attribute to express what combination of keys will trigger the ev
ent to fire. | |
23 | |
24 Use the `target` attribute to set up event handlers on a specific node. | |
25 The `keys-pressed` event will fire when one of the key combinations set with the
`keys` attribute is pressed. | |
26 | |
27 Example: | |
28 | |
29 This element will call `arrowHandler` on all arrow keys: | |
30 | |
31 <iron-a11y-keys target="{{}}" keys="up down left right" on-keys-pressed="{{a
rrowHandler}}"></iron-a11y-keys> | |
32 | |
33 Keys Syntax: | |
34 | |
35 The `keys` attribute can accepts a space seprated, `+` concatenated set of modif
ier keys and some common keyboard keys. | |
36 | |
37 The common keys are `a-z`, `0-9` (top row and number pad), `*` (shift 8 and numb
er pad), `F1-F12`, `Page Up`, `Page | |
38 Down`, `Left Arrow`, `Right Arrow`, `Down Arrow`, `Up Arrow`, `Home`, `End`, `Es
cape`, `Space`, `Tab`, and `Enter` keys. | |
39 | |
40 The modifier keys are `Shift`, `Control`, and `Alt`. | |
41 | |
42 All keys are expected to be lowercase and shortened: | |
43 `Left Arrow` is `left`, `Page Down` is `pagedown`, `Control` is `ctrl`, `F1` is
`f1`, `Escape` is `esc` etc. | |
44 | |
45 Keys Syntax Example: | |
46 | |
47 Given the `keys` attribute value "ctrl+shift+f7 up pagedown esc space alt+m", th
e `<iron-a11y-keys>` element will send | |
48 the `keys-pressed` event if any of the follow key combos are pressed: Control an
d Shift and F7 keys, Up Arrow key, Page | |
49 Down key, Escape key, Space key, Alt and M key. | |
50 | |
51 Slider Example: | |
52 | |
53 The following is an example of the set of keys that fulfil the WAI-ARIA "slider"
role [best | |
54 practices](http://www.w3.org/TR/wai-aria-practices/#slider): | |
55 | |
56 <iron-a11y-keys target="{{}}" keys="left pagedown down" on-keys-pressed="{{d
ecrement}}"></iron-a11y-keys> | |
57 <iron-a11y-keys target="{{}}" keys="right pageup up" on-keys-pressed="{{incr
ement}}"></iron-a11y-keys> | |
58 <iron-a11y-keys target="{{}}" keys="home" on-keys-pressed="{{setMin}}"></iro
n-a11y-keys> | |
59 <iron-a11y-keys target="{{}}" keys="end" on-keys-pressed="{{setMax}}"></iron
-a11y-keys> | |
60 | |
61 The `increment` function will move the slider a set amount toward the maximum va
lue. | |
62 The `decrement` function will move the slider a set amount toward the minimum va
lue. | |
63 The `setMin` function will move the slider to the minimum value. | |
64 The `setMax` function will move the slider to the maximum value. | |
65 | |
66 Keys Syntax Grammar: | |
67 | |
68 [EBNF](http://en.wikipedia.org/wiki/Extended_Backus%E2%80%93Naur_Form) Grammar o
f the `keys` attribute. | |
69 | |
70 modifier = "shift" | "ctrl" | "alt"; | |
71 ascii = ? /[a-z0-9]/ ? ; | |
72 fnkey = ? f1 through f12 ? ; | |
73 arrow = "up" | "down" | "left" | "right" ; | |
74 key = "tab" | "esc" | "space" | "*" | "pageup" | "pagedown" | "home" | "end"
| arrow | ascii | fnkey ; | |
75 keycombo = { modifier, "+" }, key ; | |
76 keys = keycombo, { " ", keycombo } ; | |
77 | |
78 @demo demo/index.html | |
79 */ | |
80 | |
81 | |
82 Polymer({ | |
83 is: 'iron-a11y-keys', | |
84 | |
85 behaviors: [ | |
86 Polymer.IronA11yKeysBehavior | |
87 ], | |
88 | |
89 properties: { | |
90 target: { | |
91 type: Object, | |
92 observer: '_targetChanged' | |
93 }, | |
94 | |
95 keys: { | |
96 type: String, | |
97 reflectToAttribute: true, | |
98 observer: '_keysChanged' | |
99 } | |
100 }, | |
101 | |
102 attached: function() { | |
103 if (!this.target) { | |
104 this.target = this.parentNode; | |
105 } | |
106 }, | |
107 | |
108 _targetChanged: function(target) { | |
109 this.keyEventTarget = target; | |
110 }, | |
111 | |
112 _keysChanged: function() { | |
113 this.removeOwnKeyBindings(); | |
114 this.addOwnKeyBinding(this.keys, '_fireKeysPressed'); | |
115 }, | |
116 | |
117 _fireKeysPressed: function(event) { | |
118 this.fire('keys-pressed', event.detail, {}); | |
119 } | |
120 }); | |
121 </script> | |
OLD | NEW |