feat: enhance keybind input handling with Escape key functionality and improved keyboard context management

This commit is contained in:
PandaDEV 2025-03-16 23:38:52 +01:00
parent bbd7a54948
commit 8abf231912
No known key found for this signature in database
GPG key ID: 13EFF9BAF70EE75C

View file

@ -45,6 +45,7 @@
<div <div
@blur="onBlur" @blur="onBlur"
@focus="onFocus" @focus="onFocus"
@keydown="onKeyDown"
class="keybind-input" class="keybind-input"
ref="keybindInput" ref="keybindInput"
tabindex="0" tabindex="0"
@ -88,6 +89,7 @@ const isKeybindInputFocused = ref(false);
const keybind = ref<KeyValues[]>([]); const keybind = ref<KeyValues[]>([]);
const keybindInput = ref<HTMLElement | null>(null); const keybindInput = ref<HTMLElement | null>(null);
const lastBlurTime = ref(0); const lastBlurTime = ref(0);
const blurredByEscape = ref(false);
const os = ref(""); const os = ref("");
const router = useRouter(); const router = useRouter();
const showEmptyKeybindError = ref(false); const showEmptyKeybindError = ref(false);
@ -127,6 +129,7 @@ const onBlur = () => {
const onFocus = () => { const onFocus = () => {
isKeybindInputFocused.value = true; isKeybindInputFocused.value = true;
blurredByEscape.value = false;
activeModifiers.clear(); activeModifiers.clear();
keybind.value = []; keybind.value = [];
showEmptyKeybindError.value = false; showEmptyKeybindError.value = false;
@ -137,7 +140,10 @@ const onKeyDown = (event: KeyboardEvent) => {
if (key === KeyValues.Escape) { if (key === KeyValues.Escape) {
if (keybindInput.value) { if (keybindInput.value) {
blurredByEscape.value = true;
keybindInput.value.blur(); keybindInput.value.blur();
event.preventDefault();
event.stopPropagation();
} }
return; return;
} }
@ -201,36 +207,30 @@ onMounted(async () => {
if (os.value === "macos") { if (os.value === "macos") {
$keyboard.on("settings", [$keyboard.Key.LeftMeta, $keyboard.Key.Enter], () => { $keyboard.on("settings", [$keyboard.Key.LeftMeta, $keyboard.Key.Enter], () => {
if (!isKeybindInputFocused.value) { saveKeybind();
saveKeybind(); }, { priority: $keyboard.PRIORITY.HIGH });
}
}, { priority: $keyboard.PRIORITY.MEDIUM });
$keyboard.on("settings", [$keyboard.Key.RightMeta, $keyboard.Key.Enter], () => { $keyboard.on("settings", [$keyboard.Key.RightMeta, $keyboard.Key.Enter], () => {
if (!isKeybindInputFocused.value) { saveKeybind();
saveKeybind(); }, { priority: $keyboard.PRIORITY.HIGH });
}
}, { priority: $keyboard.PRIORITY.MEDIUM });
} else { } else {
$keyboard.on("settings", [$keyboard.Key.LeftControl, $keyboard.Key.Enter], () => { $keyboard.on("settings", [$keyboard.Key.LeftControl, $keyboard.Key.Enter], () => {
if (!isKeybindInputFocused.value) { saveKeybind();
saveKeybind(); }, { priority: $keyboard.PRIORITY.HIGH });
}
}, { priority: $keyboard.PRIORITY.MEDIUM });
$keyboard.on("settings", [$keyboard.Key.RightControl, $keyboard.Key.Enter], () => { $keyboard.on("settings", [$keyboard.Key.RightControl, $keyboard.Key.Enter], () => {
if (!isKeybindInputFocused.value) { saveKeybind();
saveKeybind(); }, { priority: $keyboard.PRIORITY.HIGH });
}
}, { priority: $keyboard.PRIORITY.MEDIUM });
} }
$keyboard.on("settings", [$keyboard.Key.Escape], () => { $keyboard.on("settings", [$keyboard.Key.Escape], () => {
if (!isKeybindInputFocused.value) { if (!isKeybindInputFocused.value && !blurredByEscape.value) {
router.push("/"); router.push("/");
} }
}, { priority: $keyboard.PRIORITY.MEDIUM }); blurredByEscape.value = false;
}, { priority: $keyboard.PRIORITY.HIGH });
$keyboard.disableContext("main");
$keyboard.enableContext("settings"); $keyboard.enableContext("settings");
autostart.value = (await $settings.getSetting("autostart")) === "true"; autostart.value = (await $settings.getSetting("autostart")) === "true";