rxjs-keyboard-event

rxjs-keyboard-event.ts

import { fromEvent, of, EMPTY } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { isEmpty } from 'lodash';

function bindKeyboardShortcuts(eventName: string, keybinding: string) {
    const keys = keybinding.split('.').map(key => key.toLowerCase());
    const allModifierKeys = ['ctrl', 'shift', 'alt', 'cmd', 'meta']; // meta === cmd
    const modifierKeys = keys.filter(key => allModifierKeys.indexOf(key) !== -1);
    return fromEvent(document, eventName).pipe(
        switchMap((e: KeyboardEvent) => {
            if (!isEmpty(modifierKeys)) {
                // 判断对应的功能按键是否存在
                const flag = modifierKeys.every(key => {
                    switch (key) {
                        case 'ctrl':
                            return e.ctrlKey;
                        case 'shift':
                            return e.shiftKey;
                        case 'alt':
                            return e.altKey;
                        case 'cmd':
                        case 'meta':
                            return e.metaKey;
                        default:
                            return false;
                    }
                });
                if (!flag) {
                    return EMPTY;
                }
            }
            const eventKey = e.key.toLowerCase();
            if (keys.indexOf(eventKey) === -1) {
                return EMPTY;
            }
            return of(e);
        })
    );
}