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 |