my-key-config

My UI written with Web Components for key config for me.

Installation

$ npm install my-key-config

Usage

Use the key config component

In your HTML:

<kc-keyconfig label="Press a new shortcut key."></kc-keyconfig>

Then initialize the component:

import {
  register,
  LocalStorageStore,
  ChromeStorageStore,
} from 'my-key-config';

// Register the custom elements defined by key-config.
register();

// Initialize a store to save key config.
const store = new LocalStorageStore('prefix');
// const store = new ChromeStorageStore('prefix');

// Define keyboard shortcuts.
const spec = [
  {
    id: 'save',
    name: 'Save to File',
    // Default config (optional; no shortcut if not specified)
    default: {
      key: 'S',
      shiftKey: false,
      ctrlKey: true,
      altKey: false,
      metaKey: false,
    },
  },
  {
    id: 'quit',
    name: 'Quit',
    default: {
      key: 'Q',
      shiftKey: false,
      ctrlKey: true,
      altKey: false,
      metaKey: false,
    },
  },
];

const kc = document.querySelector('kc-keyconfig');

kc.connect(store, spec);

Listen to key shortcuts

import {
  LocalStorageStore,
  KeyListener,
} from 'my-key-config';

// Initialize the store.
const store = new LocalStorageStore('prefix');

// Also spec.
const spec = [
  {
    id: 'save',
    name: 'Save to File',
    // Default config (optional; no shortcut if not specified)
    default: {
      key: 'S',
      shiftKey: false,
      ctrlKey: true,
      altKey: false,
      metaKey: false,
    },
  },
  {
    id: 'quit',
    name: 'Quit',
    default: {
      key: 'Q',
      shiftKey: false,
      ctrlKey: true,
      altKey: false,
      metaKey: false,
    },
  },
];

// Initialize KeyListener with store and spec.
const listener = new KeyListener(store, spec);

// Start listening to the 'keydown' event.
listener.listen();

// KeyListener implements the EventTarget API.
listener.addEventListener('key', (event)=> {
  if (event.detail === 'save') {
    console.log('Perform save command');
  }
});
// `onkey` property can also be used
// listener.onkey = (event)=> console.log('hi');

License

MIT © uhyo