Handle Keyboard events for iron-list in GWT?

Question

I use iron-list from google Polymer.

<iron-list items="[[data]]" as="item">
  <template>
    <div tabindex$="[[tabIndex]]">
      Name: [[item.name]]
    </div>
  </template>
</iron-list>

I kwon you can use Polymer.IronA11yKeysBehavior but even with the example I have no idea how I add it in JavaScript to my iron-list.

Using Vaadin Polymer GWT lib. In this lib you have

IronList list; 
list.setKeyBindings(???);  // don't know how to use this function
list.setKeyEventTarget(????);  // don't know how to use this function

When I check the current values of the key bindings I defined a print function to log a variable to the console:

public native void print(JavaScriptObject obj) /-{ console.log(obj); }-/;

Then I print the current values with:

print(list.getKeyBindings());

The result is:

Object {up: "_didMoveUp", down: "_didMoveDown", enter: "_didEnter"}

It seem that there are some key bindings already defined, but I have no idea where I find the functions _didMoveUp, _didMoveDown and _didEnter.

When I do

print(list.getKeyEventTarget());

I get:

<iron-list class="fit x-scope iron-list-0" tabindex="1" style="overflow: auto;">
</iron-list>

How can I set up a handler for capturing keyboard events using Vaadin Polymer GWT lib? How can I receive an event when keys like enter are pressed?

Answer 1

answering this question

list.setKeyBindings(???); // don't know how to use this function

according to com/vaadin/polymer/vaadin-gwt-polymer-elements/1.2.3.1-SNAPSHOT/vaadin-gwt-polymer-elements-1.2.3.1-20160201.114641-2.jar!/com/vaadin/polymer/public/bower_components/iron-list/iron-list.html:292

the keyBindings should have object of such structure:

    {
      'up': '_didMoveUp',
      'down': '_didMoveDown',
      'enter': '_didEnter'
    }

to construct such object, you can use following:

        new JSONObject() {{
            put("up", new JSONString("_didMoveUp"));
            put("down", new JSONString("_didMoveDown"));
            put("enter", new JSONString("_didEnter"));
        }}.getJavaScriptObject();

I have no idea where I find the functions _didMoveUp, _didMoveDown and _didEnter

they can be found here: com/vaadin/polymer/vaadin-gwt-polymer-elements/1.2.3.1-SNAPSHOT/vaadin-gwt-polymer-elements-1.2.3.1-20160201.114641-2.jar!/com/vaadin/polymer/public/bower_components/iron-list/iron-list.html:1504

here's the extract

    _didMoveUp: function() {
      this._focusPhysicalItem(Math.max(0, this._focusedIndex - 1));
    },

    _didMoveDown: function() {
      this._focusPhysicalItem(Math.min(this._virtualCount, this._focusedIndex + 1));
    },

    _didEnter: function(e) {
      // focus the currently focused physical item
      this._focusPhysicalItem(this._focusedIndex);
      // toggle selection
      this._selectionHandler(e.detail.keyboardEvent);
    }

How can I set up a handler for capturing keyboard events using Vaadin Polymer GWT lib?

How can I receive an event when keys like enter are pressed?

I could find this Polymer convention: properties not intended for external use should be prefixed with an underscore.

That's the reason why they are not exposed in JsType IronListElement. You can change this function using JSNI. I think that smth like this:

    private native static void changeDidMoveUp(IronListElement ironList) /*-{
        var _old = ironList._didMoveUp;
        ironList._didMoveUp = function() {
            console.log('tracking');
            _old();
        }
    }-*/;

or add a new one

    IronListElement element ...

    com.vaadin.polymer.elemental.Function<Void, Event> func = event -> {
        logger.debug(event.detail);
        ...
        return null;
    };

    private native static void addUpdatePressed(IronListElement ironList, Function func) /*-{
        ironList._updatePressed = func;
    }-*/;

    {
        addUpdatePressed(element, func);
        element.addOwnKeyBinding("a", "_updatePressed");
        element.addOwnKeyBinding("shift+a alt+a", "_updatePressed");
        element.addOwnKeyBinding("shift+tab shift+space", "_updatePressed");
    }

should work. You can get element from IronList#getPolymerElement().

keep in mind, that I haven't tested this code :)