Svelte Keybinds

Functions:

import Keybinds, { binds, loadWithDefaults, condition } from './Keybinds.svelte'

<Keybinds let:prop={item} autosave={true} clickable={true}>

• clickable - runs functions when the user clicks the key in the UI
• condition - async callback function any time a keybind is ran, if it returns true the keybind is ran, if it returns false it isnt
• binds - store/writable, binds object
• autosave - automatically saves to localstorage when a user changes binds, requires id in binds object
• loadWithDefaults(defaults) - loads the stored keybinds from autosave, using specific defaults, if a new keybind was added it will be properly created

On browsers which support the keyboard API this module will respect the user's keyboard layout [dworak etc].

Usage:

Simple example:

<script>
    import Keybinds, { binds } from './Keybinds.svelte';

    $binds = {
        ArrowRight: {
            fn: console.log,
            label: '+2',
        },
        ArrowLeft: {
            fn: console.warn,
            label: '-2',
        },
        KeyA: {
            fn: console.error,
            label: '1'
        }
    };
</script>

<Keybinds let:prop={item}>
    <div class="font-size-24 flex-center">{item?.label || ''}</div>
</Keybinds>

<style>
    .font-size-24 {
        font-size: 24px;
    }
    .flex-center {
        display: flex;
        height: 100%;
        justify-content: center;
        align-items: center;
    }
</style>

Example with autosave:

<script>
    import Keybinds, { binds, loadWithDefaults } from './Keybinds.svelte';

    const defaults = {
        ArrowRight: {
            fn: console.log,
            id: '+2',
        },
        ArrowLeft: {
            fn: console.warn,
            id: '-2',
        },
        KeyA: {
            fn: console.error,
            id: '1'
        }
    };

    $: console.log($binds)

    loadWithDefaults(defaults)
</script>

<Keybinds let:prop={item} autosave={true} clickable={true}>
    <div class="font-size-24 flex-center">{item?.id || ''}</div>
</Keybinds>

<style>
    .font-size-24 {
        font-size: 24px;
    }
    .flex-center {
        display: flex;
        height: 100%;
        justify-content: center;
        align-items: center;
    }
</style>