All Downloads are FREE. Search and download functionalities are using the official Maven repository.

com.vaadin.polymer.iron.widget.IronA11yKeys Maven / Gradle / Ivy

The newest version!
/*
 * This code was generated with Vaadin Web Component GWT API Generator, 
 * from iron-a11y-keys project by The Polymer Authors
 * that is licensed with http://polymer.github.io/LICENSE.txt license.
 */
package com.vaadin.polymer.iron.widget;

import com.vaadin.polymer.iron.*;

import com.vaadin.polymer.iron.widget.event.KeysPressedEvent;
import com.vaadin.polymer.iron.widget.event.KeysPressedEventHandler;

import com.vaadin.polymer.*;
import com.vaadin.polymer.elemental.*;
import com.vaadin.polymer.PolymerWidget;
import com.google.gwt.core.client.JsArray;
import com.google.gwt.event.shared.HandlerRegistration;
import com.google.gwt.core.client.JavaScriptObject;

/**
 * 

iron-a11y-keys provides a cross-browser interface for processing
keyboard commands. The interface adheres to WAI-ARIA best
practices
.
It uses an expressive syntax to filter key presses.

*

Basic usage

*

The sample code below is a portion of a custom element. The goal is to call
the onEnter method whenever the paper-input element is in focus and
the Enter key is pressed.

*
<iron-a11y-keys id="a11y" target="[[target]]" keys="enter"
 *                     on-keys-pressed="onEnter"></iron-a11y-keys>
 * <paper-input id="input"
 *              placeholder="Type something. Press enter. Check console."
 *              value="{{userInput::input}}"></paper-input>
 * 
 * 
 * 

The custom element declares an iron-a11y-keys element that is bound to a
property called target. The target property
needs to evaluate to the paper-input node. iron-a11y-keys registers
an event handler for the target node using Polymer’s annotated event handler
syntax
. {{userInput::input}} sets the userInput property to the
user’s input on each keystroke.

*

The last step is to link the two elements within the custom element’s
registration.

*
...
 * properties: {
 *   userInput: {
 *     type: String,
 *     notify: true,
 *   },
 *   target: {
 *     type: Object,
 *     value: function() {
 *       return this.$.input;
 *     }
 *   },
 * },
 * onEnter: function() {
 *   console.log(this.userInput);
 * }
 * ...
 * 
 * 
 * 

The keys attribute

*

The keys attribute expresses what combination of keys triggers the event.

*

The attribute accepts a space-separated, plus-sign-concatenated
set of modifier keys and some common keyboard keys.

*

The common keys are: a-z, 0-9 (top row and number pad), * (shift 8 and
number pad), F1-F12, Page Up, Page Down, Left Arrow, Right Arrow,
Down Arrow, Up Arrow, Home, End, Escape, Space, Tab, Enter.

*

The modifier keys are: Shift, Control, Alt, Meta.

*

All keys are expected to be lowercase and shortened. E.g.
Left Arrow is left, Page Down is pagedown, Control is ctrl,
F1 is f1, Escape is esc, etc.

*

Grammar

*

Below is the EBNF
Grammar of the keys attribute.

*
modifier = "shift" | "ctrl" | "alt" | "meta";
 * ascii = ? /[a-z0-9]/ ? ;
 * fnkey = ? f1 through f12 ? ;
 * arrow = "up" | "down" | "left" | "right" ;
 * key = "tab" | "esc" | "space" | "*" | "pageup" | "pagedown" |
 *       "home" | "end" | arrow | ascii | fnkey;
 * event = "keypress" | "keydown" | "keyup";
 * keycombo = { modifier, "+" }, key, [ ":", event ] ;
 * keys = keycombo, { " ", keycombo } ;
 * 
 * 
 * 

Example

*

Given the following value for keys:

*

ctrl+shift+f7 up pagedown esc space alt+m

*

The event is fired if any of the following key combinations are fired:
Control and Shift and F7 keys, Up Arrow key, Page Down key,
Escape key, Space key, Alt and M keys.

*

WAI-ARIA Slider Example

*

The following is an example of the set of keys that fulfills WAI-ARIA’s
“slider” role best
practices
:

*
<iron-a11y-keys target="[[target]]" keys="left pagedown down"
 *                 on-keys-pressed="decrement"></iron-a11y-keys>
 * <iron-a11y-keys target="[[target]]" keys="right pageup up"
 *                 on-keys-pressed="increment"></iron-a11y-keys>
 * <iron-a11y-keys target="[[target]]" keys="home"
 *                 on-keys-pressed="setMin"></iron-a11y-keys>
 * <iron-a11y-keys target="[[target]]" keys="end"
 *                 on-keys-pressed="setMax"></iron-a11y-keys>
 * 
 * 
 * 

The target properties must evaluate to a node. See the basic usage
example above.

*

Each of the values for the on-keys-pressed attributes must evalute
to methods. The increment method should move the slider a set amount
toward the maximum value. decrement should move the slider a set amount
toward the minimum value. setMin should move the slider to the minimum
value. setMax should move the slider to the maximum value.

*/ public class IronA11yKeys extends PolymerWidget { /** * Default Constructor. */ public IronA11yKeys() { this(""); } /** * Constructor used by UIBinder to create widgets with content. */ public IronA11yKeys(String html) { super(IronA11yKeysElement.TAG, IronA11yKeysElement.SRC, html); } /** * Gets a handle to the Polymer object's underlying DOM element. */ public IronA11yKeysElement getPolymerElement() { return (IronA11yKeysElement) getElement(); } /** *

To be used to express what combination of keys will trigger the relative
callback. e.g. keyBindings: { 'esc': '_onEscPressed'}

* * JavaScript Info: * @property keyBindings * @type !Object * @behavior VaadinDatePicker */ public JavaScriptObject getKeyBindings() { return getPolymerElement().getKeyBindings(); } /** *

To be used to express what combination of keys will trigger the relative
callback. e.g. keyBindings: { 'esc': '_onEscPressed'}

* * JavaScript Info: * @property keyBindings * @type !Object * @behavior VaadinDatePicker */ public void setKeyBindings(JavaScriptObject value) { getPolymerElement().setKeyBindings(value); } /** *

The EventTarget that will be firing relevant KeyboardEvents. Set it to
null to disable the listeners.

* * JavaScript Info: * @property keyEventTarget * @type ?EventTarget * @behavior VaadinDatePicker */ public JavaScriptObject getKeyEventTarget() { return getPolymerElement().getKeyEventTarget(); } /** *

The EventTarget that will be firing relevant KeyboardEvents. Set it to
null to disable the listeners.

* * JavaScript Info: * @property keyEventTarget * @type ?EventTarget * @behavior VaadinDatePicker */ public void setKeyEventTarget(JavaScriptObject value) { getPolymerElement().setKeyEventTarget(value); } /** * * * JavaScript Info: * @property target * @type ?Node * */ public JavaScriptObject getTarget() { return getPolymerElement().getTarget(); } /** * * * JavaScript Info: * @property target * @type ?Node * */ public void setTarget(JavaScriptObject value) { getPolymerElement().setTarget(value); } /** *

If true, this property will cause the implementing element to
automatically stop propagation on any handled KeyboardEvents.

* * JavaScript Info: * @property stopKeyboardEventPropagation * @type Boolean * @behavior VaadinDatePicker */ public boolean getStopKeyboardEventPropagation() { return getPolymerElement().getStopKeyboardEventPropagation(); } /** *

If true, this property will cause the implementing element to
automatically stop propagation on any handled KeyboardEvents.

* * JavaScript Info: * @property stopKeyboardEventPropagation * @type Boolean * @behavior VaadinDatePicker */ public void setStopKeyboardEventPropagation(boolean value) { getPolymerElement().setStopKeyboardEventPropagation(value); } /** *

Space delimited list of keys where each key follows the format:
[MODIFIER+]*KEY[:EVENT].
e.g. keys="space ctrl+shift+tab enter:keyup".
More detail can be found in the “Grammar” section of the documentation

* * JavaScript Info: * @property keys * @type String * */ public String getKeys() { return getPolymerElement().getKeys(); } /** *

Space delimited list of keys where each key follows the format:
[MODIFIER+]*KEY[:EVENT].
e.g. keys="space ctrl+shift+tab enter:keyup".
More detail can be found in the “Grammar” section of the documentation

* * JavaScript Info: * @property keys * @type String * */ public void setKeys(String value) { getPolymerElement().setKeys(value); } // Needed in UIBinder /** *

The EventTarget that will be firing relevant KeyboardEvents. Set it to
null to disable the listeners.

* * JavaScript Info: * @attribute key-event-target * @behavior VaadinDatePicker */ public void setKeyEventTarget(String value) { Polymer.property(this.getPolymerElement(), "keyEventTarget", value); } // Needed in UIBinder /** * * * JavaScript Info: * @attribute target * */ public void setTarget(String value) { Polymer.property(this.getPolymerElement(), "target", value); } // Needed in UIBinder /** *

To be used to express what combination of keys will trigger the relative
callback. e.g. keyBindings: { 'esc': '_onEscPressed'}

* * JavaScript Info: * @attribute key-bindings * @behavior VaadinDatePicker */ public void setKeyBindings(String value) { Polymer.property(this.getPolymerElement(), "keyBindings", value); } /** *

Can be used to imperatively add a key binding to the implementing
element. This is the imperative equivalent of declaring a keybinding
in the keyBindings prototype property.

* * JavaScript Info: * @method addOwnKeyBinding * @param {} eventString * @param {} handlerName * @behavior VaadinDatePicker * */ public void addOwnKeyBinding(Object eventString, Object handlerName) { getPolymerElement().addOwnKeyBinding(eventString, handlerName); } /** *

Returns true if a keyboard event matches eventString.

* * JavaScript Info: * @method keyboardEventMatchesKeys * @param {KeyboardEvent} event * @param {string} eventString * @behavior VaadinDatePicker * @return {boolean} */ public boolean keyboardEventMatchesKeys(JavaScriptObject event, String eventString) { return getPolymerElement().keyboardEventMatchesKeys(event, eventString); } /** *

When called, will remove all imperatively-added key bindings.

* * JavaScript Info: * @method removeOwnKeyBindings * @behavior VaadinDatePicker * */ public void removeOwnKeyBindings() { getPolymerElement().removeOwnKeyBindings(); } /** * * * JavaScript Info: * @event keys-pressed */ public HandlerRegistration addKeysPressedHandler(KeysPressedEventHandler handler) { return addDomHandler(handler, KeysPressedEvent.TYPE); } }




© 2015 - 2024 Weber Informatics LLC | Privacy Policy