2 actions: prevent tab close and simple keyboard shortcuts

[dkzlv]

Hi!

I also use these two actions quite extensively.

The first one throws a browser alert when you close the tab. I put it on a root node that holds some important user's work (like a form tag).

export const preventTabClose: Action = () => {
  const handler = (e: BeforeUnloadEvent) => {
    e.preventDefault();
    e.returnValue = '';
  };

  window.addEventListener('beforeunload', handler);

  return {
    destroy: () => window.removeEventListener('beforeunload', handler),
  };
};

---

The second one is essentially a very stripped out version of keyboard shortcuts. It either calls a provided callback on a given keystroke, or clicks on the node. As simple as it is.

It is very opinionated. E.g. it does not recognize the difference between meta key and control key (the reason is that I wanted to have Ctrl + <key> for Windows and Cmd + <key> for Macs work the same).

It's also very simple. No queues, no namespaces, no stuff like collision control and so on, but its main benefit is that it is ~180 bytes. Works like charm in simple cases.

export type ShortcutSetting = {
  control?: boolean;
  shift?: boolean;
  alt?: boolean;

  code: string;

  callback?: () => void;
};

export const shortcut: Action<ShortcutSetting> = (node, params) => {
  let handler: ((e: KeyboardEvent) => void) | undefined;

  const removeHandler = () => window.removeEventListener('keydown', handler!),
    setHandler = () => {
      removeHandler();
      if (!params) return;

      handler = (e: KeyboardEvent) => {
        if (
          (params.alt && !e.altKey) ||
          (params.shift && !e.shiftKey) ||
          (params.control && !(e.ctrlKey || e.metaKey)) ||
          params.code != e.code
        )
          return;

        e.preventDefault();

        params.callback ? params.callback() : node.click();
      };
      window.addEventListener('keydown', handler);
    };

  setHandler();

  return {
    update: setHandler,
    destroy: removeHandler,
  };
};

Can make a PR if you find it suitable.

[swyxio]

i actually love these! happy to take a PR but will also leave it open for a few days to invite comment.

[kevmodrome]

I think these are great!

[dkzlv]

Closed via #11.