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

Side by Side Diff: third_party/polymer/v1_0/components-chromium/iron-a11y-keys/iron-a11y-keys-extracted.js

Issue 1984963002: Roll Polymer elements (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 4 years, 7 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
OLDNEW
1 /* 1 /**
2 `iron-a11y-keys` provides a cross-browser interface for processing 2 `iron-a11y-keys` provides a cross-browser interface for processing
3 keyboard commands. The interface adheres to [WAI-ARIA best 3 keyboard commands. The interface adheres to [WAI-ARIA best
4 practices](http://www.w3.org/TR/wai-aria-practices/#kbd_general_binding). 4 practices](http://www.w3.org/TR/wai-aria-practices/#kbd_general_binding).
5 It uses an expressive syntax to filter key presses. 5 It uses an expressive syntax to filter key presses.
6 6
7 ## Basic usage 7 ## Basic usage
8 8
9 The sample code below is a portion of a custom element. The goal is to call 9 The sample code below is a portion of a custom element. The goal is to call
10 the `onEnter` method whenever the `paper-input` element is in focus and 10 the `onEnter` method whenever the `paper-input` element is in focus and
11 the `Enter` key is pressed. 11 the `Enter` key is pressed.
12 12
13 <iron-a11y-keys id="a11y" target="[[target]]" keys="enter" 13 <iron-a11y-keys id="a11y" target="[[target]]" keys="enter"
14 on-keys-pressed="onEnter"></iron-a11y-keys> 14 on-keys-pressed="onEnter"></iron-a11y-keys>
15 <paper-input id="input" 15 <paper-input id="input"
16 placeholder="Type something. Press enter. Check console." 16 placeholder="Type something. Press enter. Check console."
17 value="{{userInput::input}}"></paper-input> 17 value="{{userInput::input}}"></paper-input>
18 18
19 The custom element declares an `iron-a11y-keys` element that is bound to a 19 The custom element declares an `iron-a11y-keys` element that is bound to a
20 property called `target`. The `target` property 20 property called `target`. The `target` property
21 needs to evaluate to the `paper-input` node. `iron-a11y-keys` registers 21 needs to evaluate to the `paper-input` node. `iron-a11y-keys` registers
22 an event handler for the target node using Polymer's [annotated event handler 22 an event handler for the target node using Polymer's [annotated event handler
23 syntax](https://www.polymer-project.org/1.0/docs/devguide/events.html#annotated- listeners). `{{userInput::input}}` sets the `userInput` property to the 23 syntax](https://www.polymer-project.org/1.0/docs/devguide/events.html#annotated- listeners). `{{userInput::input}}` sets the `userInput` property to the
24 user's input on each keystroke. 24 user's input on each keystroke.
25 25
26 The last step is to link the two elements within the custom element's 26 The last step is to link the two elements within the custom element's
27 registration. 27 registration.
28 28
29 ... 29 ...
30 properties: { 30 properties: {
31 userInput: { 31 userInput: {
32 type: String, 32 type: String,
33 notify: true, 33 notify: true,
34 }, 34 },
35 target: { 35 target: {
36 type: Object, 36 type: Object,
37 value: function() { 37 value: function() {
38 return this.$.input; 38 return this.$.input;
39 } 39 }
40 }, 40 },
41 }, 41 },
42 onEnter: function() { 42 onEnter: function() {
43 console.log(this.userInput); 43 console.log(this.userInput);
44 } 44 }
45 ... 45 ...
46 46
47 ## The `keys` attribute 47 ## The `keys` attribute
48 48
49 The `keys` attribute expresses what combination of keys triggers the event. 49 The `keys` attribute expresses what combination of keys triggers the event.
50 50
51 The attribute accepts a space-separated, plus-sign-concatenated 51 The attribute accepts a space-separated, plus-sign-concatenated
52 set of modifier keys and some common keyboard keys. 52 set of modifier keys and some common keyboard keys.
53 53
54 The common keys are: `a-z`, `0-9` (top row and number pad), `*` (shift 8 and 54 The common keys are: `a-z`, `0-9` (top row and number pad), `*` (shift 8 and
55 number pad), `F1-F12`, `Page Up`, `Page Down`, `Left Arrow`, `Right Arrow`, 55 number pad), `F1-F12`, `Page Up`, `Page Down`, `Left Arrow`, `Right Arrow`,
56 `Down Arrow`, `Up Arrow`, `Home`, `End`, `Escape`, `Space`, `Tab`, `Enter`. 56 `Down Arrow`, `Up Arrow`, `Home`, `End`, `Escape`, `Space`, `Tab`, `Enter`.
57 57
58 The modifier keys are: `Shift`, `Control`, `Alt`. 58 The modifier keys are: `Shift`, `Control`, `Alt`, `Meta`.
59 59
60 All keys are expected to be lowercase and shortened. E.g. 60 All keys are expected to be lowercase and shortened. E.g.
61 `Left Arrow` is `left`, `Page Down` is `pagedown`, `Control` is `ctrl`, 61 `Left Arrow` is `left`, `Page Down` is `pagedown`, `Control` is `ctrl`,
62 `F1` is `f1`, `Escape` is `esc`, etc. 62 `F1` is `f1`, `Escape` is `esc`, etc.
63 63
64 ### Grammar 64 ### Grammar
65 65
66 Below is the [EBNF](http://en.wikipedia.org/wiki/Extended_Backus%E2%80%93Naur_Fo rm) 66 Below is the [EBNF](http://en.wikipedia.org/wiki/Extended_Backus%E2%80%93Naur_Fo rm)
67 Grammar of the `keys` attribute. 67 Grammar of the `keys` attribute.
68 68
69 modifier = "shift" | "ctrl" | "alt"; 69 modifier = "shift" | "ctrl" | "alt" | "meta";
70 ascii = ? /[a-z0-9]/ ? ; 70 ascii = ? /[a-z0-9]/ ? ;
71 fnkey = ? f1 through f12 ? ; 71 fnkey = ? f1 through f12 ? ;
72 arrow = "up" | "down" | "left" | "right" ; 72 arrow = "up" | "down" | "left" | "right" ;
73 key = "tab" | "esc" | "space" | "*" | "pageup" | "pagedown" | 73 key = "tab" | "esc" | "space" | "*" | "pageup" | "pagedown" |
74 "home" | "end" | arrow | ascii | fnkey; 74 "home" | "end" | arrow | ascii | fnkey;
75 keycombo = { modifier, "+" }, key ; 75 keycombo = { modifier, "+" }, key ;
76 keys = keycombo, { " ", keycombo } ; 76 keys = keycombo, { " ", keycombo } ;
77 77
78 ### Example 78 ### Example
79 79
80 Given the following value for `keys`: 80 Given the following value for `keys`:
81 81
82 `ctrl+shift+f7 up pagedown esc space alt+m` 82 `ctrl+shift+f7 up pagedown esc space alt+m`
83 83
84 The event is fired if any of the following key combinations are fired: 84 The event is fired if any of the following key combinations are fired:
85 `Control` and `Shift` and `F7` keys, `Up Arrow` key, `Page Down` key, 85 `Control` and `Shift` and `F7` keys, `Up Arrow` key, `Page Down` key,
86 `Escape` key, `Space` key, `Alt` and `M` keys. 86 `Escape` key, `Space` key, `Alt` and `M` keys.
87 87
88 ### WAI-ARIA Slider Example 88 ### WAI-ARIA Slider Example
89 89
90 The following is an example of the set of keys that fulfills WAI-ARIA's 90 The following is an example of the set of keys that fulfills WAI-ARIA's
91 "slider" role [best 91 "slider" role [best
92 practices](http://www.w3.org/TR/wai-aria-practices/#slider): 92 practices](http://www.w3.org/TR/wai-aria-practices/#slider):
93 93
94 <iron-a11y-keys target="[[target]]" keys="left pagedown down" 94 <iron-a11y-keys target="[[target]]" keys="left pagedown down"
95 on-keys-pressed="decrement"></iron-a11y-keys> 95 on-keys-pressed="decrement"></iron-a11y-keys>
96 <iron-a11y-keys target=""[[target]] keys="right pageup up" 96 <iron-a11y-keys target="[[target]]" keys="right pageup up"
97 on-keys-pressed="increment"></iron-a11y-keys> 97 on-keys-pressed="increment"></iron-a11y-keys>
98 <iron-a11y-keys target="[[target]]" keys="home" 98 <iron-a11y-keys target="[[target]]" keys="home"
99 on-keys-pressed="setMin"></iron-a11y-keys> 99 on-keys-pressed="setMin"></iron-a11y-keys>
100 <iron-a11y-keys target=""[[target]] keys="end" 100 <iron-a11y-keys target=""[[target]] keys="end"
101 on-keys-pressed="setMax"></iron-a11y-keys> 101 on-keys-pressed="setMax"></iron-a11y-keys>
102 102
103 The `target` properties must evaluate to a node. See the basic usage 103 The `target` properties must evaluate to a node. See the basic usage
104 example above. 104 example above.
105 105
106 Each of the values for the `on-keys-pressed` attributes must evalute 106 Each of the values for the `on-keys-pressed` attributes must evalute
107 to methods. The `increment` method should move the slider a set amount 107 to methods. The `increment` method should move the slider a set amount
108 toward the maximum value. `decrement` should move the slider a set amount 108 toward the maximum value. `decrement` should move the slider a set amount
109 toward the minimum value. `setMin` should move the slider to the minimum 109 toward the minimum value. `setMin` should move the slider to the minimum
110 value. `setMax` should move the slider to the maximum value. 110 value. `setMax` should move the slider to the maximum value.
111 111
112 @demo demo/index.html 112 @demo demo/index.html
113 */ 113 */
114 114
115 115
116
116 Polymer({ 117 Polymer({
117 is: 'iron-a11y-keys', 118 is: 'iron-a11y-keys',
118 119
119 behaviors: [ 120 behaviors: [
120 Polymer.IronA11yKeysBehavior 121 Polymer.IronA11yKeysBehavior
121 ], 122 ],
122 123
123 properties: { 124 properties: {
124 /** @type {?Node} */ 125 /** @type {?Node} */
125 target: { 126 target: {
(...skipping 20 matching lines...) Expand all
146 147
147 _keysChanged: function() { 148 _keysChanged: function() {
148 this.removeOwnKeyBindings(); 149 this.removeOwnKeyBindings();
149 this.addOwnKeyBinding(this.keys, '_fireKeysPressed'); 150 this.addOwnKeyBinding(this.keys, '_fireKeysPressed');
150 }, 151 },
151 152
152 _fireKeysPressed: function(event) { 153 _fireKeysPressed: function(event) {
153 this.fire('keys-pressed', event.detail, {}); 154 this.fire('keys-pressed', event.detail, {});
154 } 155 }
155 }); 156 });
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698