2023-01-13 05:40:33 +01:00
|
|
|
import keyCode from "./keycode";
|
2020-12-27 09:04:41 +01:00
|
|
|
|
2022-07-04 16:46:48 +02:00
|
|
|
type Callback = (ev: KeyboardEvent) => void;
|
|
|
|
|
|
|
|
type Keymap = Record<string, Callback>;
|
2020-12-27 09:04:41 +01:00
|
|
|
|
2023-09-02 01:27:33 +02:00
|
|
|
interface Pattern {
|
2020-12-27 09:04:41 +01:00
|
|
|
which: string[];
|
|
|
|
ctrl?: boolean;
|
|
|
|
shift?: boolean;
|
|
|
|
alt?: boolean;
|
2023-09-02 01:27:33 +02:00
|
|
|
}
|
2020-12-27 09:04:41 +01:00
|
|
|
|
2023-09-02 01:27:33 +02:00
|
|
|
interface Action {
|
2020-12-27 09:04:41 +01:00
|
|
|
patterns: Pattern[];
|
2022-07-04 16:46:48 +02:00
|
|
|
callback: Callback;
|
2020-12-27 09:04:41 +01:00
|
|
|
allowRepeat: boolean;
|
2023-09-02 01:27:33 +02:00
|
|
|
}
|
2020-12-27 09:04:41 +01:00
|
|
|
|
2023-01-13 05:40:33 +01:00
|
|
|
const parseKeymap = (keymap: Keymap) =>
|
|
|
|
Object.entries(keymap).map(([patterns, callback]): Action => {
|
|
|
|
const result = {
|
|
|
|
patterns: [],
|
|
|
|
callback,
|
|
|
|
allowRepeat: true,
|
|
|
|
} as Action;
|
|
|
|
|
|
|
|
if (patterns.match(/^\(.*\)$/) !== null) {
|
|
|
|
result.allowRepeat = false;
|
|
|
|
patterns = patterns.slice(1, -1);
|
2020-12-27 09:04:41 +01:00
|
|
|
}
|
|
|
|
|
2023-01-13 05:40:33 +01:00
|
|
|
result.patterns = patterns.split("|").map((part) => {
|
|
|
|
const pattern = {
|
|
|
|
which: [],
|
|
|
|
ctrl: false,
|
|
|
|
alt: false,
|
|
|
|
shift: false,
|
|
|
|
} as Pattern;
|
|
|
|
|
|
|
|
const keys = part
|
|
|
|
.trim()
|
|
|
|
.split("+")
|
|
|
|
.map((x) => x.trim().toLowerCase());
|
|
|
|
for (const key of keys) {
|
|
|
|
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());
|
|
|
|
}
|
|
|
|
}
|
2020-12-27 09:04:41 +01:00
|
|
|
|
2023-01-13 05:40:33 +01:00
|
|
|
return pattern;
|
|
|
|
});
|
|
|
|
|
|
|
|
return result;
|
|
|
|
});
|
2020-12-27 09:04:41 +01:00
|
|
|
|
2023-01-13 05:40:33 +01:00
|
|
|
const ignoreElemens = ["input", "textarea"];
|
2020-12-27 09:04:41 +01:00
|
|
|
|
2023-01-13 05:40:33 +01:00
|
|
|
function match(ev: KeyboardEvent, patterns: Action["patterns"]): boolean {
|
2022-05-07 07:19:15 +02:00
|
|
|
const key = ev.code.toLowerCase();
|
2023-01-13 05:40:33 +01:00
|
|
|
return patterns.some(
|
|
|
|
(pattern) =>
|
|
|
|
pattern.which.includes(key) &&
|
|
|
|
pattern.ctrl === ev.ctrlKey &&
|
|
|
|
pattern.shift === ev.shiftKey &&
|
|
|
|
pattern.alt === ev.altKey &&
|
|
|
|
!ev.metaKey,
|
2020-12-27 09:04:41 +01:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export const makeHotkey = (keymap: Keymap) => {
|
|
|
|
const actions = parseKeymap(keymap);
|
|
|
|
|
2022-05-07 07:19:15 +02:00
|
|
|
return (ev: KeyboardEvent) => {
|
2020-12-27 09:04:41 +01:00
|
|
|
if (document.activeElement) {
|
2023-01-13 05:40:33 +01:00
|
|
|
if (ignoreElemens.some((el) => document.activeElement!.matches(el)))
|
|
|
|
return;
|
2023-09-02 01:27:33 +02:00
|
|
|
if (document.activeElement.attributes.contenteditable) return;
|
2020-12-27 09:04:41 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
for (const action of actions) {
|
2022-05-07 07:19:15 +02:00
|
|
|
const matched = match(ev, action.patterns);
|
2020-12-27 09:04:41 +01:00
|
|
|
|
|
|
|
if (matched) {
|
2022-05-07 07:19:15 +02:00
|
|
|
if (!action.allowRepeat && ev.repeat) return;
|
2020-12-27 09:04:41 +01:00
|
|
|
|
2022-05-07 07:19:15 +02:00
|
|
|
ev.preventDefault();
|
|
|
|
ev.stopPropagation();
|
|
|
|
action.callback(ev);
|
2020-12-27 09:04:41 +01:00
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|