{{on-key}} modifier for Ember.js

on-key.js

import { modifier } from 'ember-modifier';

import { isArray } from '@ember/array';
import { capitalize } from '@ember/string';
import { isEmpty, isPresent, typeOf } from '@ember/utils';

const { isInteger } = Number;

const parseKeys = arr => arr
  .filter(_ => typeOf(_) === 'string')
  .map(capitalize);

const parseKeyCodes = arr => arr
  .filter(isPresent)
  .map(_ => parseInt(_, 10))
  .filter(isInteger);

function onKey(element, positional, named) {
  const
    press = positional.shift(),
    callback = positional.shift();

  const {
    key,
    keys,
    keyCode,
    keyCodes,
    ...eventListenerOptions
  } = named;

  const
    wantedKeys = new Set(
      [positional, [key], keys]
        .filter(arr => isArray(arr) && !isEmpty(arr))
        .flatMap(parseKeys)
    ),
    wantedKeyCodes = new Set(
      [[keyCode], keyCodes]
        .filter(arr => isArray(arr) && !isEmpty(arr))
        .flatMap(parseKeyCodes)
    );

  const handler = (event) => {
    if (event.isComposing || event.keyCode === 229) {
      return;
    }

    if (wantedKeys.has(event.key) || wantedKeyCodes.has(event.keyCode)) {
      callback(event);
    }
  };

  element.addEventListener(`key${press}`, handler, eventListenerOptions);

  return () => {
    element.removeEventListener(`key${press}`, handler, eventListenerOptions);
  };
}

export default modifier(onKey);