@checksub_team/peaks_timeline/src/keyboard-handler.js

JavaScript UI component for displaying audio waveforms

/**
 * @file
 *
 * Defines the {@link KeyboardHandler} class.
 *
 * @module keyboard-handler
 */

define([], function() {
  'use strict';

  var nodes = ['OBJECT', 'TEXTAREA', 'INPUT', 'SELECT', 'OPTION'];

  var keys = ['Spacebar', ' ', 'Tab', 'ArrowLeft', 'ArrowRight', 'Delete'];

  /**
   * Configures keyboard event handling.
   *
   * @class
   * @alias KeyboardHandler
   *
   * @param {EventEmitter} eventEmitter
   */

  function KeyboardHandler(eventEmitter) {
    this.eventEmitter = eventEmitter;

    this._handleKeyEvent = this._handleKeyEvent.bind(this);

    this._ctrlCmdPressed = false;

    document.addEventListener('keydown', this._handleKeyEvent);
    document.addEventListener('keypress', this._handleKeyEvent);
    document.addEventListener('keyup', this._handleKeyEvent);
  }

  KeyboardHandler.prototype.isCtrlCmdPressed = function handleKeyEvent() {
    return this._ctrlCmdPressed;
  };

  /**
   * Keyboard event handler function.
   *
   * @note Arrow keys only triggered on keydown, not keypress.
   *
   * @param {KeyboardEvent} event
   * @private
   */

  KeyboardHandler.prototype._handleKeyEvent = function handleKeyEvent(event) {
    if (nodes.indexOf(event.target.nodeName) === -1) {
      if (this.eventEmitter.view.isFocused() && keys.indexOf(event.code) > -1) {
        event.preventDefault();
      }

      if (event.type === 'keydown' || event.type === 'keypress') {
        if ((event.ctrlKey || event.metaKey) && !this._ctrlCmdPressed) {
          this.eventEmitter.emit('keyboard.ctrlCmdDown');
          this._ctrlCmdPressed = true;
        }
        switch (event.code) {
          case 'Spacebar':
          case ' ':
            this.eventEmitter.emit('keyboard.space');
            break;

          case 'Tab':
            this.eventEmitter.emit('keyboard.tab');
            break;
        }
      }
      else if (event.type === 'keyup') {
        if (!(event.ctrlKey || event.metaKey) && this._ctrlCmdPressed) {
          this.eventEmitter.emit('keyboard.ctrlCmdUp');
          this._ctrlCmdPressed = false;
        }
        switch (event.code) {
          case 'ArrowLeft':
            if (event.shiftKey) {
              this.eventEmitter.emit('keyboard.shift_left');
            }
            else {
              this.eventEmitter.emit('keyboard.left');
            }
            break;

          case 'ArrowRight':
            if (event.shiftKey) {
              this.eventEmitter.emit('keyboard.shift_right');
            }
            else {
              this.eventEmitter.emit('keyboard.right');
            }
            break;

          case 'Delete':
          case 'Backspace':
            this.eventEmitter.emit('keyboard.delete');
            break;
        }
      }
    }
  };

  KeyboardHandler.prototype.destroy = function() {
    document.removeEventListener('keydown', this._handleKeyEvent);
    document.removeEventListener('keypress', this._handleKeyEvent);
    document.removeEventListener('keyup', this._handleKeyEvent);
  };

  return KeyboardHandler;
});