catch ctrl/cmd+enter to save settings

This commit is contained in:
Damien Elmes 2021-04-22 19:52:44 +10:00
parent dc46ece8f2
commit 1ddfd73da6
4 changed files with 37 additions and 6 deletions

View File

@ -26,6 +26,7 @@ compile_svelte(
name = "svelte",
srcs = svelte_files,
deps = [
"//ts/sveltelib",
"@npm//@types/bootstrap",
],
)
@ -94,6 +95,7 @@ esbuild(
":bootstrap-icons",
"@npm//bootstrap",
":base_css",
"//ts/sveltelib",
] + svelte_names,
)

View File

@ -6,8 +6,21 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import ConfigSelector from "./ConfigSelector.svelte";
import ConfigEditor from "./ConfigEditor.svelte";
import type { DeckConfigState } from "./lib";
import { primaryModifierForPlatform } from "sveltelib/shortcuts";
export let state: DeckConfigState;
function onKeyDown(evt: KeyboardEvent): void {
if (
evt.code === "Enter" &&
evt.getModifierState(primaryModifierForPlatform())
) {
state.save(false);
} else {
console.log(evt.getModifierState(primaryModifierForPlatform()));
console.log(primaryModifierForPlatform());
}
}
</script>
<style lang="scss">
@ -17,12 +30,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
}
</style>
<div id="modal">
<!-- filled in later-->
</div>
<div on:keydown={onKeyDown}>
<div id="modal">
<!-- filled in later-->
</div>
<ConfigSelector {state} />
<ConfigSelector {state} />
<div class="editor">
<ConfigEditor {state} />
<div class="editor">
<ConfigEditor {state} />
</div>
</div>

View File

@ -33,6 +33,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
function onKeyUp(evt: KeyboardEvent): void {
if (evt.code === "Enter") {
evt.stopPropagation();
onOkClicked();
}
}

13
ts/sveltelib/shortcuts.ts Normal file
View File

@ -0,0 +1,13 @@
// Copyright: Ankitects Pty Ltd and contributors
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
function isApplePlatform(): boolean {
return (
window.navigator.platform.startsWith("Mac") ||
window.navigator.platform.startsWith("iP")
);
}
export function primaryModifierForPlatform(): string {
return isApplePlatform() ? "Meta" : "Control";
}