2018-07-06 07:18:51 +02:00
|
|
|
class KeyboardHandler {
|
|
|
|
constructor() {
|
|
|
|
this.queue = [];
|
|
|
|
this.shortcuts = {};
|
2024-03-10 23:55:56 +01:00
|
|
|
this.triggers = new Set();
|
2018-07-06 07:18:51 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
on(combination, callback) {
|
|
|
|
this.shortcuts[combination] = callback;
|
2024-03-10 23:55:56 +01:00
|
|
|
this.triggers.add(combination.split(" ")[0]);
|
2018-07-06 07:18:51 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
listen() {
|
|
|
|
document.onkeydown = (event) => {
|
2019-10-07 01:24:39 +02:00
|
|
|
let key = this.getKey(event);
|
|
|
|
if (this.isEventIgnored(event, key) || this.isModifierKeyDown(event)) {
|
2018-07-06 07:18:51 +02:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2024-03-02 01:12:17 +01:00
|
|
|
if (key != "Enter") {
|
Add 'Enter' key as a hotkey to open selected item
There are a few things that need to be done, to make this work.
First, we need to register `Enter` as another hotkey that opens the
selected item.
However, by default the `KeyboardHandler` will override all default
actions. That might make sense for any other key, but for the `Enter`
key, we want to keep the default behavior (i.e. follow a selected link
or press a button). So for this single key event, we do not call
`preventDefault()`.
I see this as unproblematic for the following reasons.
1. With the changes from #2348, when we're in a list of items (articles,
categories, feeds), there is no link selected. This is what made the
`Enter` key work _implicitly_ in the past. With nothing selected, the
`Enter` key will do nothing by default.
2. If we have **any** link selected (including when we are in a view
with a list of selectable items), we'll get the default action of
`Enter` (i.e. follow a link), which is exactly what we had before.
Lastly, we need to update the list of keyboard shortcuts displayed when
pressing `?`.
This fixes #2366.
2024-02-20 09:10:51 +01:00
|
|
|
event.preventDefault();
|
|
|
|
}
|
|
|
|
|
2018-07-06 07:18:51 +02:00
|
|
|
this.queue.push(key);
|
|
|
|
|
|
|
|
for (let combination in this.shortcuts) {
|
|
|
|
let keys = combination.split(" ");
|
|
|
|
|
|
|
|
if (keys.every((value, index) => value === this.queue[index])) {
|
2018-10-23 05:26:17 +02:00
|
|
|
this.queue = [];
|
|
|
|
this.shortcuts[combination](event);
|
2018-07-06 07:18:51 +02:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (keys.length === 1 && key === keys[0]) {
|
2018-10-23 05:26:17 +02:00
|
|
|
this.queue = [];
|
|
|
|
this.shortcuts[combination](event);
|
2018-07-06 07:18:51 +02:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.queue.length >= 2) {
|
|
|
|
this.queue = [];
|
|
|
|
}
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2019-10-07 01:24:39 +02:00
|
|
|
isEventIgnored(event, key) {
|
|
|
|
return event.target.tagName === "INPUT" ||
|
|
|
|
event.target.tagName === "TEXTAREA" ||
|
2024-03-10 23:55:56 +01:00
|
|
|
(this.queue.length < 1 && !this.triggers.has(key));
|
2018-07-06 07:18:51 +02:00
|
|
|
}
|
|
|
|
|
2018-10-31 13:59:02 +01:00
|
|
|
isModifierKeyDown(event) {
|
|
|
|
return event.getModifierState("Control") || event.getModifierState("Alt") || event.getModifierState("Meta");
|
|
|
|
}
|
|
|
|
|
2018-07-06 07:18:51 +02:00
|
|
|
getKey(event) {
|
|
|
|
const mapping = {
|
|
|
|
'Esc': 'Escape',
|
|
|
|
'Up': 'ArrowUp',
|
|
|
|
'Down': 'ArrowDown',
|
|
|
|
'Left': 'ArrowLeft',
|
|
|
|
'Right': 'ArrowRight'
|
|
|
|
};
|
|
|
|
|
|
|
|
for (let key in mapping) {
|
|
|
|
if (mapping.hasOwnProperty(key) && key === event.key) {
|
|
|
|
return mapping[key];
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return event.key;
|
|
|
|
}
|
|
|
|
}
|