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

Side by Side Diff: third_party/polymer/v0_8/components/iron-a11y-keys/iron-a11y-keys.html

Issue 1162563004: Upgrade to 1.0 and switch clients to dom-repeat where needed. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Fix a layout import and remove the gzipped webanimation in reproduce.sh Created 5 years, 6 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
(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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698