datahub/wherehows-web/app/components/hotkeys/global-hotkeys.ts

import Component from '@ember/component';
import { get } from '@ember/object';
import { service } from '@ember-decorators/service';
import ComputedProperty from '@ember/object/computed';
import HotKeys from 'wherehows-web/services/hot-keys';

export default class GlobalHotkeys extends Component {
  /**
   * Sets the class names binded to the html element generated by this component
   * @type {Array<string>}
   */
  classNames = ['global-hotkey-binder'];

  /**
   * Contains a set of elements that we deem to be inEligible in any circumstance. Targets
   * with these tags will never be passed through for global hotkeys
   * @type {Set<string>}
   */
  inEligibleTargets = new Set(['INPUT', 'TEXTAREA']);

  /**
   * Service that assists with actually triggering the actions tied to a particular Eligible
   * target hotkey
   * @type {Ember.Service}
   */
  @service
  hotKeys: ComputedProperty<HotKeys>;

  /**
   * Returns true if target exists, is not an input, and is not an editable div
   * @param {HTMLElement} target - target element
   * @returns {boolean}
   */
  isEligibleTarget(target: HTMLElement): boolean {
    return (
      !!target &&
      !get(this, 'inEligibleTargets').has(target.tagName) &&
      !(target.tagName === 'DIV' && target.attributes.getNamedItem('contenteditable'))
    );
  }

  /**
   * Method for handling the global keyup.
   * @param {KeyboardEvent} e - KeyboardEvent triggered by user input
   */
  onKeyUp(e: KeyboardEvent) {
    // KeyboardEvent.target is not well defined in our TS, casting any to return as HTMLElement
    const target = <HTMLElement>e.target;

    if (this.isEligibleTarget(target)) {
      get(this, 'hotKeys').applyKeyMapping(e.keyCode);
    }
  }

  /**
   * Note: When originally developing the global hotkeys handler, we intended to wrap this component around all
   * application content and use the keyUp hook in order to catch key presses. However, this hook only catches
   * Ember fired keyUp events and is unreliable in catching all user keypresses (which would be captured by
   * native DOM events) so instead we are using this native event listener
   */
  didInsertElement() {
    const applicationBody = document.getElementsByClassName('ember-application')[0];
    applicationBody && applicationBody.addEventListener('keyup', this.onKeyUp.bind(this));
  }

  willDestroyElement() {
    const applicationBody = document.getElementsByClassName('ember-application')[0];
    applicationBody && applicationBody.removeEventListener('keyup', this.onKeyUp.bind(this));
  }
}