keyboard plugin about binding HOT 4 CLOSED

This would be really cool although potentially hard to get right. Would need to nail down the scope of what Aurelia would handle vs things you might use an outside framework like Mousetrap for.

Considerations:

• single keys (enter, a, b, c)
• modifier keys (ctrl+k, command+shift+j)
• key sequences like in gmail, VS, etc
• platform support, test-ability, quirks
• binding multiple keys or key-sequences to the same model action
• keydown/keyup/keypress
• data entry elements only?

from binding.

Not sure if we should have it OOTB. But it might be a good 3rd party plugin. Said plugin would leverage the event manager potentially to add custom events in combination with extending the binding grammar.

from binding.

I'm closing this for now. I think it would be a great idea for a plugin though.

from binding.

I see this is closed, but some native support would be nice. Currently, if its an input field I want to enhance, I can just add keypress.delegate="keyPressed($event)" and have the VM handle it nicely. Useful if you want to have the enter key act the same as tab in a form.

In another case, I am viewing record detail in an Aurelia Dialog. Have previous and next buttons. The same keypress.delegate="keyPressed($event)" doesn't work on <ai-dialog> or similar elements. If it did, I think this issue would have been solved without Mousetrap or anything else. For this relatively simple case I has to use a jQuery fallback, which seems to happen a bit too often.

In the Vm for my dialog:

attached() {
    this.$document.on('keydown', (e) => {
        console.log("keydown", e);
        this.keyHandler(e);
    });
}

detached() {
    this.$document.off('keydown');
}

keyHandler(e) {
    switch (e.which) {
        case 27: // esc
            this.header.controller.ok();
            break;
        case 37: // left
            this.previous();
            break;
        case 38: // up
            this.previous();
            break;
        case 39: // right
            this.next();
            break;
        case 40: // down
            this.next();
            break;
         default:
            return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
}

from binding.