⌨️ A Svelte action to add arrow key interaction to an element

nudgeable.ts

export default (element: HTMLElement, options: any = {}) => {
    // if added as action on non focusable element you should add tabindex=0 attribute

    const {
        direction = undefined,
        shiftMultiplier = 10,
        bubbles = false,
        stopKeydownPropagation = true,
    } = options;

    const isHorizontalDirection = direction === 'horizontal';
    const isVerticalDirection = direction === 'vertical';

    const handleKeydown = (e: KeyboardEvent) => {
        const { key } = e;

        const isShift = e.shiftKey;
        const isHorizontalAction = /up|down/i.test(key);
        const isVerticalAction = /left|right/i.test(key);

        // no directional key
        if (!isHorizontalAction && !isVerticalAction) return;

        // is horizontal but up or down pressed
        if (isHorizontalDirection && isVerticalAction) return;

        // is vertical but left or right pressed
        if (isVerticalDirection && isHorizontalAction) return;

        // if holding shift move by a factor 10
        const multiplier = isShift ? shiftMultiplier : 1;

        if (stopKeydownPropagation) e.stopPropagation();

        element.dispatchEvent(
            new CustomEvent('nudge', {
                bubbles,
                detail: {
                    x: (/left/i.test(key) ? -1 : /right/i.test(key) ? 1 : 0) * multiplier,
                    y: (/up/i.test(key) ? -1 : /down/i.test(key) ? 1 : 0) * multiplier
                },
            })
        );
    };

    element.addEventListener('keydown', handleKeydown);

    return () => {
        element.removeEventListener('keydown', handleKeydown);
    };
};

screenshot gif: https://twitter.com/rikschennink/status/1321837051462012930?s=20