Use generic KEY_EVENTS handlers

[briarsweetbriar]

trafficstars

I'm interested in implementing something similar to ember-keyboard-service. Rather than a handful of hard-coded key events, it supports listeners for the full keyboard, including a variety of modifier keys. If you're interested in moving in that direction, I'd be happy to do the work.

[lukemelia]

We would be very open to this direction!

[briarsweetbriar]

Glad to hear it! I'll get on this as soon as I have a spare moment.

[briarsweetbriar]

So it just occurred to me that having event listeners with names like 'a', '1', and '.' could be problematic. So, namespace? We could do something generic like 'key:a', which would go well with the modifiers too: 'key:alt+a' or 'key:shift+1'. But rather than just 'key', what about 'keyUp'? Currently, ember-key-responders only responds to 'keyUp' events, but it'd be great to one day support 'keyDown' or 'keyPress'. If we go with 'keyUp:a', then it'll allow us to more easily integrate future events like 'keyDown:a'. Thoughts?

[briarsweetbriar]

@lukemelia So I just gave it shot, and it's pretty easy to get support for 'keyDown:a' and 'keyPress:a'. If you're good with it, I'll just add some tests to this and send it your way.

[lukemelia]

I'm not crazy about the colon-based method names. Should we just have a single event name with args?

[briarsweetbriar]

Could you give an example of that?

[briarsweetbriar]

Maybe something like keyDownCtrlB? I guess this is so you can easily name functions without resorting to quotes or using on?

[lukemelia]

Hey @null-null-null sorry for the delay. How about something like a typical JS event handler:

handleKey: function(e) {
  if (e.keyChar === 'b' && e.ctrlKey) {
    // Ctrl+b was pressed
  }
}

[briarsweetbriar]

@lukemelia We could do that, though I do prefer this:

keyUpB: function() {
  // b was pressed
},

keyUpCtrlE: function() {
  // ctrl+e was pressed
}

Compared to:

handleKey: function(e) {
  if (e.keyChar === 'b' && !e.ctrlKey && !e.altKey && !e.shiftKey) {
    // b was pressed
  } else if (e.keyChar === 'e' && e.ctrlKey && !e.altKey && !e.shiftKey) {
    // Ctrl+e was pressed
  }
}

Especially since it'll open the door to using keyDown, wish is desirable for a project I'm working on. It'll make scrolling feel far more fluid.

[lukemelia]

@stefanpenner @raycohen you guys have an opinion about this API?

[raycohen]

would we be providing things like KeyUpCtrlAltShiftE ?

[lukemelia]

@raycohen that is one of the proposals on the table.

[raycohen]

is there a performance difference between the two approaches?

What about supplying methods to help match:

import keyMatcher from 'ember-key-responder/key-matcher';

handleKey: function(e) {
  if (keyMatcher.test(e, 'b')) {
    // b was pressed
  } else if (keyMatcher.test(e, 'ctrl+e')) {
    // Ctrl+e was pressed
  }
}

[lukemelia]

Nice idea @raycohen

[briarsweetbriar]

Most likely the handleKey approach is more performant. The keyUpCtrlAltShiftE has to make a nasty little compromise. Since the user might write the handle as keyUpCtrlAltShiftE or keyUpShiftCtrlAltE or any other variant of that key combination, this approach requires us to call trigger multiple times. Not sure how that would compare to long if/else branch, but even in an extreme case, handleKey would probably be faster.