paricafe/src/client/app/common/hotkey.ts

import keyCode from './keycode';
import { concat } from '../../../prelude/array';

type pattern = {
	which: string[];
	ctrl?: boolean;
	shift?: boolean;
	alt?: boolean;
};

type action = {
	patterns: pattern[];

	callback: Function;
};

const getKeyMap = keymap => Object.entries(keymap).map(([patterns, callback]): action => {
	const result = {
		patterns: [],
		callback: callback
	} as action;

	result.patterns = patterns.split('|').map(part => {
		const pattern = {
			which: [],
			ctrl: false,
			alt: false,
			shift: false
		} as pattern;

		part.trim().split('+').forEach(key => {
			key = key.trim().toLowerCase();
			switch (key) {
				case 'ctrl': pattern.ctrl = true; break;
				case 'alt': pattern.alt = true; break;
				case 'shift': pattern.shift = true; break;
				default: pattern.which = keyCode(key).map(k => k.toLowerCase());
			}
		});

		return pattern;
	});

	return result;
});

const ignoreElemens = ['input', 'textarea'];

export default {
	install(Vue) {
		Vue.directive('hotkey', {
			bind(el, binding) {
				el._hotkey_global = binding.modifiers.global === true;

				const actions = getKeyMap(binding.value);

				// flatten
				const reservedKeys = concat(concat(actions.map(a => a.patterns.map(p => p.which))));

				el.dataset.reservedKeys = reservedKeys.map(key => `'${key}'`).join(' ');

				el._keyHandler = (e: KeyboardEvent) => {
					const key = e.code.toLowerCase();

					const targetReservedKeys = document.activeElement ? ((document.activeElement as any).dataset || {}).reservedKeys || '' : '';
					if (document.activeElement && ignoreElemens.some(el => document.activeElement.matches(el))) return;

					for (const action of actions) {
						if (el._hotkey_global && targetReservedKeys.includes(`'${key}'`)) break;

						const matched = action.patterns.some(pattern => {
							const matched = pattern.which.includes(key) &&
								pattern.ctrl == e.ctrlKey &&
								pattern.shift == e.shiftKey &&
								pattern.alt == e.altKey &&
								e.metaKey == false;

							if (matched) {
								e.preventDefault();
								e.stopPropagation();
								action.callback(e);
								return true;
							} else {
								return false;
							}
						});

						if (matched) {
							break;
						}
					}
				};

				if (el._hotkey_global) {
					document.addEventListener('keydown', el._keyHandler);
				} else {
					el.addEventListener('keydown', el._keyHandler);
				}
			},

			unbind(el) {
				if (el._hotkey_global) {
					document.removeEventListener('keydown', el._keyHandler);
				} else {
					el.removeEventListener('keydown', el._keyHandler);
				}
			}
		});
	}
};