Directory

← Back

keyboard-shortcut-manager

A modern library for managing keyboard shortcuts in a Vaadin application.

Author

Rating

Popularity

<100

Note! For the latest version numbers, check https://www.npmjs.com/package/@vaadin-component-factory/keyboard-shortcut-manager

VCF Keyboard Shortcut Manager

npm version Published on Vaadin Directory

A modern library for managing keyboard shortcuts in a Vaadin application (or any framework).

  • Dispatch custom events from keyboard shortcuts.
  • Bind multiple keyboard commands to a single event listener.
  • Easily create simple keyboard shortcut help dialog/popup.
  • Compatible with web components and Shadow DOM.
  • Implemented in TypeScript.

This is a wrapper for the Tinykeys library.

DEMO ↗

API ↗

Install

npm i @vaadin-component-factory/vcf-keyboard-chortcut-manager

Usage

Create an array of KeyboardShortcut definitions:

const shortcuts: KeyboardShortcut = [
  {
    keyBinding: 'Control+Shift+?',
    handler: 'help-dialog',
    description: 'Opens the help dialog.'
  }
];

Then create a KeyboardShortcutManager instance and subscribe your shortcuts to activate them:

const ksm = new KeyboardShortcutManager({ shortcuts, helpDialog: true });

ksm.subscribe();

Keybinding Syntax

Refer to the following links for more information on the keybinding syntax:

License

Apache-2.0 License

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • @vaadin-component-factory/vcf-enhanced-dialog#23.0.0
  • @vaadin/grid#23.0.10
  • query-selector-shadow-dom#^1.0.0
  • tinykeys#^1.4.0
Released
2022-05-17
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Vaadin 10+
Browser
Browser Independent

keyboard-shortcut-manager - Vaadin Add-on Directory

A modern library for managing keyboard shortcuts in a Vaadin application. keyboard-shortcut-manager - Vaadin Add-on Directory
Note! For the latest version numbers, check https://www.npmjs.com/package/@vaadin-component-factory/keyboard-shortcut-manager # VCF Keyboard Shortcut Manager [![npm version](https://badgen.net/npm/v/@vaadin-component-factory/keyboard-shortcut-manager)](https://www.npmjs.com/package/@vaadin-component-factory/keyboard-shortcut-manager) [![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadin-component-factorykeyboard-shortcut-manager) A modern library for managing keyboard shortcuts in a [Vaadin](https://vaadin.com) application (or any framework). - Dispatch custom events from keyboard shortcuts. - Bind multiple keyboard commands to a single event listener. - Easily create simple keyboard shortcut help dialog/popup. - Compatible with web components and [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM). - Implemented in [TypeScript](https://www.typescriptlang.org/). This is a wrapper for the [Tinykeys](https://github.com/jamiebuilds/tinykeys) library. [DEMO ↗](https://keyboard-shortcut-manager.netlify.app/demo/index.html) [API ↗](https://keyboard-shortcut-manager.netlify.app) ## Install ```sh npm i @vaadin-component-factory/vcf-keyboard-chortcut-manager ``` ## Usage Create an array of `KeyboardShortcut` definitions: ```ts const shortcuts: KeyboardShortcut = [ { keyBinding: 'Control+Shift+?', handler: 'help-dialog', description: 'Opens the help dialog.' } ]; ``` Then create a `KeyboardShortcutManager` instance and `subscribe` your shortcuts to activate them: ```ts const ksm = new KeyboardShortcutManager({ shortcuts, helpDialog: true }); ksm.subscribe(); ``` ## Keybinding Syntax Refer to the following links for more information on the keybinding syntax: - [Keys and Codes](https://github.com/jamiebuilds/tinykeys#commonly-used-keys-and-codes) - [Keybinding Syntax](https://github.com/jamiebuilds/tinykeys#keybinding-syntax) ## License Apache-2.0 License
Online