class Keyboard {
/**
* Creates an instance of Keyboard.
* The objects in the keyTemplates look like:
*
* @constructor
* @param {Object[]} Commands array of keyboard command objects
*
* @example
* // A command object looks like:
* {
* key: 's',
* cmd: () => anim.start(),
* }
*
*
* @example
* // The array of keyboard commands looks like:
* const keyTemplates = [
* { key: 'q', cmd: () => console.log('q') },
* { key: '2', cmd: () => console.log('2') },
* { key: 'F2', cmd: () => console.log('F2') },
* { key: 'ArrowDown', cmd: () => console.log('ArrowDown') },
* { key: 'Escape', cmd: () => console.log('Escape') },
* ]
* const keyboard = new Keyboard(keyTemplates)
*/
constructor(keyTemplates) {
this.keyCommands = {}
keyTemplates.forEach(obj => {
let { key, cmd } = obj
if (!cmd) throw Error('No cmd given for ' + obj)
this.keyCommands[key] = { key, cmd }
})
// console.log(this)
}
/**
* Start the keyboard running
*/
start() {
document.addEventListener('keydown', this.handleEvent)
return this
}
/**
* Stop the keyboard running
*/
stop() {
// Note: multiple calls safe
document.removeEventListener('keydown', this.handleEvent)
return this
}
// insure the cmd is executed in this name space:
handleEvent = ev => this.handleKeyboardEvent(ev)
handleKeyboardEvent(event) {
// https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event
if (event.isComposing || event.keyCode === 229 || event.repeat) {
console.log('skipping..', event)
return
}
// const modifiers = ['altKey', 'ctrlKey', 'metaKey', 'shiftKey']
const key = this.keyCommands[event.key]
if (key) {
console.log('key:', key.key, 'cmd:', key.cmd)
key.cmd()
} else {
if (event.key.length === 1) {
console.log('you typed key:', event.key + '; key event:', event)
}
}
}
}
export default Keyboard