Index: third_party/polymer/components/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html |
diff --git a/third_party/polymer/components/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html b/third_party/polymer/components/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html |
index fb90a4110a6c36204ee8ab2d5a934ad5f3f5a9ef..35756c61e61a0a23cab9c40b39f0725698602374 100644 |
--- a/third_party/polymer/components/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html |
+++ b/third_party/polymer/components/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html |
@@ -181,7 +181,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN |
return transformKey(keyEvent.key, noSpecialChars) || |
transformKeyIdentifier(keyEvent.keyIdentifier) || |
transformKeyCode(keyEvent.keyCode) || |
- transformKey(keyEvent.detail.key, noSpecialChars) || ''; |
+ transformKey(keyEvent.detail ? keyEvent.detail.key : keyEvent.detail, noSpecialChars) || ''; |
} |
function keyComboMatchesEvent(keyCombo, event) { |
@@ -236,12 +236,31 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN |
* and uses an expressive syntax to filter key presses. |
* |
* Use the `keyBindings` prototype property to express what combination of keys |
- * will trigger the event to fire. |
+ * will trigger the callback. A key binding has the format |
+ * `"KEY+MODIFIER:EVENT": "callback"` (`"KEY": "callback"` or |
+ * `"KEY:EVENT": "callback"` are valid as well). Some examples: |
* |
- * Use the `key-event-target` attribute to set up event handlers on a specific |
+ * keyBindings: { |
+ * 'space': '_onKeydown', // same as 'space:keydown' |
+ * 'shift+tab': '_onKeydown', |
+ * 'enter:keypress': '_onKeypress', |
+ * 'esc:keyup': '_onKeyup' |
+ * } |
+ * |
+ * The callback will receive with an event containing the following information in `event.detail`: |
+ * |
+ * _onKeydown: function(event) { |
+ * console.log(event.detail.combo); // KEY+MODIFIER, e.g. "shift+tab" |
+ * console.log(event.detail.key); // KEY only, e.g. "tab" |
+ * console.log(event.detail.event); // EVENT, e.g. "keydown" |
+ * console.log(event.detail.keyboardEvent); // the original KeyboardEvent |
+ * } |
+ * |
+ * Use the `keyEventTarget` attribute to set up event handlers on a specific |
* node. |
- * The `keys-pressed` event will fire when one of the key combinations set with the |
- * `keys` property is pressed. |
+ * |
+ * See the [demo source code](https://github.com/PolymerElements/iron-a11y-keys-behavior/blob/master/demo/x-key-aware.html) |
+ * for an example. |
* |
* @demo demo/index.html |
* @polymerBehavior |
@@ -249,7 +268,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN |
Polymer.IronA11yKeysBehavior = { |
properties: { |
/** |
- * The HTMLElement that will be firing relevant KeyboardEvents. |
+ * The EventTarget that will be firing relevant KeyboardEvents. Set it to |
+ * `null` to disable the listeners. |
+ * @type {?EventTarget} |
*/ |
keyEventTarget: { |
type: Object, |
@@ -288,6 +309,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN |
'_resetKeyEventListeners(keyEventTarget, _boundKeyHandlers)' |
], |
+ |
+ /** |
+ * To be used to express what combination of keys will trigger the relative |
+ * callback. e.g. `keyBindings: { 'esc': '_onEscPressed'}` |
+ * @type {Object} |
+ */ |
keyBindings: {}, |
registered: function() { |
@@ -395,6 +422,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN |
}, |
_listenKeyEventListeners: function() { |
+ if (!this.keyEventTarget) { |
+ return; |
+ } |
Object.keys(this._keyBindings).forEach(function(eventName) { |
var keyBindings = this._keyBindings[eventName]; |
var boundKeyHandler = this._onKeyBindingEvent.bind(this, keyBindings); |