How to Handle Input with Polymer, without blue border tab focus?

Question

Edit 2:

Keypress events working, on this jsbin: http://jsbin.com/foyile/1/. The problem is, I need to focus the tab on the element, with these two pieces line of code

ready: function() {
  this.tabIndex = 0;
  this.focus();
}

The problem is this causes to draw a blue border around the element, and it gets ugly when I do this on my moving element, Is there a way to capture the key event globally on the page without focusing on the element, (or a parent element that will make the border invisible and focusing more natural)?

Original Question

Is there a polymer component that handles user input, mainly key presses and swipe gestures. I want to create a game, and I need to control the player via up, down button or swipe gestures.

Is there a polymer way to handle input, or I need to use native dom and javascript?

Edit:

According to this answer Polymer keypress event handler not being called: this.tabIndex = 0 must be set, this to work.

Here's a jsbin: http://jsbin.com/foyile/1/.

http://www.polymer-project.org/docs/polymer/polymer.html#declarative-event-mapping — Pete TNT, Sep 19 '14 at 16:09
What is not working in the JSBin? If you click on the circle and press keys the browser console prints 'key'. — Günter Zöchbauer, Sep 19 '14 at 17:33
@GünterZöchbauer I don't know, first time I tried, it worked, now key presses doesn't work for me, also when you focus out, can you focus back when you click the circle, so key presses work again? — user3995789, Sep 19 '14 at 17:35
Yes works fine no matter if I leave/focus the element using the tab key or the mouse (using Chrome). — Günter Zöchbauer, Sep 19 '14 at 17:37
@GünterZöchbauer , now I get it, the letters are working fine, but I am trying the arrow keys, they don't work, is that weird? — user3995789, Sep 19 '14 at 17:38
It's not weird, you need to use other events for these keys (on-keydown ,on-keyup). KeyPress works only for actual character keys. — Günter Zöchbauer, Sep 19 '14 at 17:40
@GünterZöchbauer Wow, thanks I will accept your answer, even though that's not what I was looking, for. — user3995789, Sep 19 '14 at 17:41
Hey @user3995789 you should really ask a new question rather than changing the old one, so it can help other users in the future — imcg, Sep 20 '14 at 12:51

score 1 · Answer 1 · answered Sep 19 '14 at 16:11

1

Yes, Polymer uses on-event attributes to bind handler functions for user input.

This is an example from the developer guide that illustrates how to handle key input:

<polymer-element name="g-cool" on-keypress="{{keypressHandler}}">
  <template>
    <button on-click="{{buttonClick}}"></button>
  </template>
  <script>
    Polymer({
      keypressHandler: function(event, detail, sender) { ...},
      buttonClick: function(event, detail, sender) { ... }
    });
  </script>
</polymer-element>

answered Sep 19 '14 at 16:11

imcg

2,601
1
18
13

well, it doesn't work. @imcg, can you provide a jsbin please. – user3995789 Sep 19 '14 at 16:14
This is JavaScript not Dart. – Günter Zöchbauer Sep 19 '14 at 16:15
Yup but shouldn't the Polymer events still work if you convert the JavaScript part to Dart? – imcg Sep 19 '14 at 16:36
@imcg, can you get my provided jsbin working, I can't make it work, also notice, `tap` event fires when I tap the element, but `keypress` doesn't fire when I press keys, I can't focus on the element I guess. – user3995789 Sep 19 '14 at 16:53
The key event is working for me in Chrome in your jsbin. I do have to focus on the element first though. – imcg Sep 19 '14 at 17:12
PS always a good idea to have a start button on your game that gives the app focus for this very reason – imcg Sep 19 '14 at 17:13
@imcg The declarative part looks identical in Dart but the code block has to look different. – Günter Zöchbauer Sep 19 '14 at 17:18
the border thing isn't Polymer related it's CSS http://stackoverflow.com/questions/3397113/how-to-remove-border-outline-around-text-input-boxes-chrome – imcg Sep 20 '14 at 12:53

Günter Zöchbauer · Accepted Answer · 2014-09-19T16:20:55.860

You can create a custom element and use bindings like explained in the link from @PeteTNT. There is also special touch-support in Polymer see http://www.polymer-project.org/docs/polymer/touch.html

But there is no reason not to use imperative event listeners like querySelector('xxx').onSomeEvent.listen(...) in a Polymer app or querySelector('xxx').on['some-event'].listen(...) for custom events (you can also use document.on... or window.on... to register events.

declarative example

<link rel="import" href="packages/polymer/polymer.html">
<polymer-element name="some-element">
  <template>
   <button on-click="{{buttonClickHandler}}">press me</button>
  </template>
  <script type="application/dart" src="some_element.dart">
</polymer-element>

import 'package:polymer/polymer.dart';
@CustomTag('some-element')
class SomeElement extends PolymerElement {

  SomeElement.created() : super.created() {}

  void buttonClickHandler(MouseEvent e) {
    doSomething();
  }
}

What HTML element is it? Maybe you are looking for http://stackoverflow.com/questions/3660831. Please start new questions instead of extending the old one. This two things are not quite related. — Günter Zöchbauer, Sep 20 '14 at 07:26

Emanuele Sabetta · Answer 3 · 2014-09-19T17:30:33.420

1

The official Polymer.Gestures library is made exactly for this purpouse:

Official Repo: https://github.com/Polymer/polymer-gestures
Description: http://www.polymer-project.org/docs/polymer/touch.html

Unfortunately there is no Dart version of it yet.

I've opened an Issue on the Dart bug Tracker on this, star it if you want:

https://code.google.com/p/dart/issues/detail?id=21017

edited Sep 19 '14 at 17:30

answered Sep 19 '14 at 17:21

Emanuele Sabetta

1,571
12
34

Have you tried it in Dart? As far as I know it just produces events. Shouldn't matter wheter the events are fired in Dart or JavaScript (except when event.detail content is necessary but there are workarounds to access the details in JS events. – Günter Zöchbauer Sep 19 '14 at 17:23
can you take a look at jsbin and make the `on-keypress` event work please. – user3995789 Sep 19 '14 at 17:23

How to Handle Input with Polymer, without blue border tab focus?

3 Answers3

Linked