keymaster. This library could not exists without it, and is, in fact, an adaptation of it that integrates cleanly with Ember.
Get the code:
bower install ember-shortcuts
Include it on your page somewhere after ember.js.
In any route:
Ember.Route.extend({
shortcuts: {
'shift+a': 'someAction'
},
actions: {
someAction: function() {
console.log('someAction');
}
}
});Like actions, shortcuts get dispatch bottom-up through the currently active
routes.
Unlike actions, the shortcut handling does not bubble. In the example
above, if a child of that route defined a shift+a: 'otherAction' handler and
was active when the shortcut was pressed, the action otherAction would get
sent instead of someAction.
Passing in an object rather than a string enables listening for keydown and key up events separately.
In any route:
Ember.Route.extend({
shortcuts: {
'shift+a': { keyDown: 'triggeredOnKeyDown', keyUp: 'triggeredOnKeyUp' },
},
actions: {
triggeredOnKeyDown: function() {
console.log('keyDown!');
},
triggeredOnKeyUp: function() {
console.log('keyUp!');
},
}
});Ember.Shortcuts, once includes, is available to you as an injected singleton on
your controllers, components and routes as the shortcuts property.
this.shortcuts.disable
this.shortcuts.enable
Call this to toggle whether or not the global keyboard shortcut handlers will fire.
Before any event is triggered this.shortcuts.filters is checked to determine
if the event will fire.
By default, ember-shortcuts checks the event target isn't an input, select or text area.
Modify this.shortcuts.filters to add extra filters, for example:
function modalIsNotOpen() {
return !Ember.$('.modal').length;
}
function targetIsNotInput(event) {
const tagName = event.target.tagName;
return (tagName !== 'INPUT') && (tagName !== 'SELECT') && (tagName !== 'TEXTAREA');
}
Ember.Shortcuts.reopen({
filters: [modalIsNotOpen, targetIsNotInput]
});