On this page

# Keyboard.js

    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

Type anything to view search result