GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-18 22:12:21 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Switch to keyboard shortcuts based on event.key

Browse source
This commit is contained in:
Henrik Giesel 2021-05-20 18:28:59 +02:00
parent 398cdc8992
commit ae19ed527d
11 changed files with 51 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ts/components/WithShortcut.svelte
View file

@ -8,7 +8,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import { onDestroy } from "svelte";
import { registerShortcut, getPlatformString } from "lib/shortcuts";
export let shortcut: string;
export let shortcut: string[][];
export let optionalModifiers: Modifier[] | undefined = [];
const shortcutLabel = getPlatformString(shortcut);

4
ts/deckoptions/DeckOptionsPage.svelte
View file

@ -36,7 +36,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
let registerCleanup: () => void;
onMount(() => {
registerCleanup = registerShortcut(() => state.save(false), "Control+Enter");
registerCleanup = registerShortcut(() => state.save(false), [
["Control", "Enter"],
]);
});
onDestroy(() => registerCleanup?.());
</script>

2
ts/deckoptions/deckoptions-base.scss
View file

@ -51,5 +51,5 @@ code {
// override the default down arrow colour in <select> elements
.night-mode select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e")
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

2
ts/editor/ClozeButton.svelte
View file

@ -42,7 +42,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</script>
<WithShortcut
shortcut="Control+Shift+KeyC"
shortcut={[['Control', 'Shift', 'C']]}
optionalModifiers={['Alt']}
let:createShortcut
let:shortcutLabel>

4
ts/editor/ColorButtons.svelte
View file

@ -36,7 +36,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<ButtonGroup {api}>
<ButtonGroupItem>
<WithShortcut shortcut="F7" let:createShortcut let:shortcutLabel>
<WithShortcut shortcut={[['F7']]} let:createShortcut let:shortcutLabel>
<IconButton
class="forecolor"
tooltip={appendInParentheses(tr.editingSetForegroundColor(), shortcutLabel)}
@ -48,7 +48,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</ButtonGroupItem>
<ButtonGroupItem>
<WithShortcut shortcut="F8" let:createShortcut let:shortcutLabel>
<WithShortcut shortcut={[['F8']]} let:createShortcut let:shortcutLabel>
<ColorPicker
tooltip={appendInParentheses(tr.editingChangeColor(), shortcutLabel)}
on:change={setWithCurrentColor}

27
ts/editor/FormatInlineButtons.svelte
View file

@ -26,7 +26,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<ButtonGroup {api}>
<ButtonGroupItem>
<WithShortcut shortcut="Control+KeyB" let:createShortcut let:shortcutLabel>
<WithShortcut
shortcut={[['Control', 'b']]}
let:createShortcut
let:shortcutLabel>
<WithState
key="bold"
update={() => document.queryCommandState('bold')}
@ -47,7 +50,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</ButtonGroupItem>
<ButtonGroupItem>
<WithShortcut shortcut="Control+KeyI" let:createShortcut let:shortcutLabel>
<WithShortcut
shortcut={[['Control', 'i']]}
let:createShortcut
let:shortcutLabel>
<WithState
key="italic"
update={() => document.queryCommandState('italic')}
@ -68,7 +74,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</ButtonGroupItem>
<ButtonGroupItem>
<WithShortcut shortcut="Control+KeyU" let:createShortcut let:shortcutLabel>
<WithShortcut
shortcut={[['Control', 'u']]}
let:createShortcut
let:shortcutLabel>
<WithState
key="underline"
update={() => document.queryCommandState('underline')}
@ -90,7 +99,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<ButtonGroupItem>
<WithShortcut
shortcut="Control+Shift+Equal"
shortcut={[['Control', '+']]}
let:createShortcut
let:shortcutLabel>
<WithState
@ -113,7 +122,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</ButtonGroupItem>
<ButtonGroupItem>
<WithShortcut shortcut="Control+Equal" let:createShortcut let:shortcutLabel>
<WithShortcut
shortcut={[['Control', '=']]}
let:createShortcut
let:shortcutLabel>
<WithState
key="subscript"
update={() => document.queryCommandState('subscript')}
@ -134,7 +146,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</ButtonGroupItem>
<ButtonGroupItem>
<WithShortcut shortcut="Control+KeyR" let:createShortcut let:shortcutLabel>
<WithShortcut
shortcut={[['Control', 'r']]}
let:createShortcut
let:shortcutLabel>
<IconButton
tooltip={appendInParentheses(tr.editingRemoveFormatting(), shortcutLabel)}
on:click={() => {

5
ts/editor/NoteTypeButtons.svelte
View file

@ -25,7 +25,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</ButtonGroupItem>
<ButtonGroupItem>
<WithShortcut shortcut="Control+KeyL" let:createShortcut let:shortcutLabel>
<WithShortcut
shortcut={[['Control', 'l']]}
let:createShortcut
let:shortcutLabel>
<LabelButton
disables={false}
tooltip={`${tr.editingCustomizeCardTemplates()} (${shortcutLabel})`}

5
ts/editor/PreviewButton.svelte
View file

@ -10,7 +10,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import LabelButton from "components/LabelButton.svelte";
</script>
<WithShortcut shortcut="Control+Shift+KeyP" let:createShortcut let:shortcutLabel>
<WithShortcut
shortcut={[['Control', 'Shift', 'P']]}
let:createShortcut
let:shortcutLabel>
<LabelButton
tooltip={tr.browsingPreviewSelectedCard({ val: shortcutLabel })}
disables={false}

18
ts/editor/TemplateButtons.svelte
View file

@ -36,7 +36,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<ButtonGroup {api}>
<ButtonGroupItem>
<WithShortcut shortcut="F3" let:createShortcut let:shortcutLabel>
<WithShortcut shortcut={[['F3']]} let:createShortcut let:shortcutLabel>
<IconButton
tooltip={appendInParentheses(tr.editingAttachPicturesaudiovideo(), shortcutLabel)}
on:click={onAttachment}
@ -47,7 +47,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</ButtonGroupItem>
<ButtonGroupItem>
<WithShortcut shortcut="F5" let:createShortcut let:shortcutLabel>
<WithShortcut shortcut={[['F5']]} let:createShortcut let:shortcutLabel>
<IconButton
tooltip={appendInParentheses(tr.editingRecordAudio(), shortcutLabel)}
on:click={onRecord}
@ -69,7 +69,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<DropdownMenu id={menuId}>
<WithShortcut
shortcut="Control+KeyM, KeyM"
shortcut={[['Control', 'm'], ['m']]}
let:createShortcut
let:shortcutLabel>
<DropdownItem
@ -81,7 +81,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</WithShortcut>
<WithShortcut
shortcut="Control+KeyM, KeyE"
shortcut={[['Control', 'm'], ['e']]}
let:createShortcut
let:shortcutLabel>
<DropdownItem
@ -93,7 +93,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</WithShortcut>
<WithShortcut
shortcut="Control+KeyM, KeyC"
shortcut={[['Control', 'm'], ['c']]}
let:createShortcut
let:shortcutLabel>
<DropdownItem
@ -105,7 +105,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</WithShortcut>
<WithShortcut
shortcut="Control+KeyT, KeyT"
shortcut={[['Control', 't'], ['t']]}
let:createShortcut
let:shortcutLabel>
<DropdownItem
@ -117,7 +117,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</WithShortcut>
<WithShortcut
shortcut="Control+KeyT, KeyE"
shortcut={[['Control', 't'], ['e']]}
let:createShortcut
let:shortcutLabel>
<DropdownItem
@ -129,7 +129,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</WithShortcut>
<WithShortcut
shortcut="Control+KeyT, KeyM"
shortcut={[['Control', 't'], ['m']]}
let:createShortcut
let:shortcutLabel>
<DropdownItem
@ -145,7 +145,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<ButtonGroupItem>
<WithShortcut
shortcut="Control+Shift+KeyX"
shortcut={[['Control', 'Shift', 'X']]}
let:createShortcut
let:shortcutLabel>
<IconButton

2
ts/editor/inputHandlers.ts
View file

@ -66,7 +66,7 @@ function updateFocus(evt: FocusEvent) {
registerShortcut(
() => document.addEventListener("focusin", updateFocus, { once: true }),
"Tab",
[["Tab"]],
["Shift"]
);

15
ts/lib/shortcuts.ts
View file

@ -18,10 +18,6 @@ const platformModifiers = isApplePlatform()
? ["Meta", "Alt", "Shift", "Control"]
: ["Control", "Alt", "Shift", "OS"];
function splitKeyCombinationString(keyCombinationString: string): string[][] {
return keyCombinationString.split(", ").map((segment) => segment.split("+"));
}
function modifiersToPlatformString(modifiers: string[]): string {
const displayModifiers = isApplePlatform()
? ["^", "⌥", "⇧", "⌘"]
@ -70,14 +66,12 @@ function toPlatformString(modifiersAndKey: string[]): string {
)}${keyToPlatformString(modifiersAndKey[modifiersAndKey.length - 1])}`;
}
export function getPlatformString(keyCombinationString: string): string {
return splitKeyCombinationString(keyCombinationString)
.map(toPlatformString)
.join(", ");
export function getPlatformString(keyCombination: string[][]): string {
return keyCombination.map(toPlatformString).join(", ");
}
function checkKey(event: KeyboardEvent, key: string): boolean {
return event.code === key;
return event.key === key;
}
function checkModifiers(
@ -139,10 +133,9 @@ function innerShortcut(
export function registerShortcut(
callback: (event: KeyboardEvent) => void,
keyCombinationString: string,
keyCombination: string[][],
optionalModifiers: Modifier[] = []
): () => void {
const keyCombination = splitKeyCombinationString(keyCombinationString);
const [firstKey, ...restKeys] = keyCombination;
const handler = (event: KeyboardEvent): void => {