angular2-hotkeys

Angular 2.4.x Compatible (v1.x.x) Angular 4.0.0-beta.x Compatible (v2.x.x)

Installation

To install this library, run:

$ npm install angular2-hotkeys --save

Examples

First, import the HotkeyModule into your root AppModule

import {HotkeyModule} from 'angular2-hotkeys';

Then, add HotkeyModule.forRoot() to your AppModule's import array

@NgModule({
    imports : [CommonModule, HotkeyModule.forRoot(), ...],
})
export class AppModule {}

If you have any sub/feature modules that also use hotkeys, import the HotkeyModule (but NOT .forRoot())

@NgModule({
    imports : [CommonModule, HotkeyModule, ...],
})
export class SharedModule {}

Then inject the service into your constructor and add a new hotkey

constructor(private _hotkeysService: HotkeysService) {
    this._hotkeysService.add(new Hotkey('meta+shift+g', (event: KeyboardEvent): boolean => {
        console.log('Typed hotkey');
        return false; // Prevent bubbling
    }));
}

It also handles passing an array of hotkey combinations for a single callback

this._hotkeysService.add(new Hotkey(['meta+shift+g', 'alt+shift+s'], (event: KeyboardEvent, combo: string): ExtendedKeyboardEvent => {
    console.log('Combo: ' + combo); // 'Combo: meta+shift+g' or 'Combo: alt+shift+s'
    let e: ExtendedKeyboardEvent = event;
    e.returnValue = false; // Prevent bubbling
    return e;
}));

Your callback must return either a boolean or an "ExtendedKeyboardEvent".

For more information on what hotkeys can be used, check out https://craig.is/killing/mice

This library is a work in progress and any issues/pull-requests are welcomed! Based off of the angular-hotkeys library

Cheat Sheet

To enable the cheat sheet, simply add <hotkeys-cheatsheet></hotkeys-cheatsheet> to your top level component template. The HotkeysService will automatically register the ? key combo to toggle the cheat sheet.

Cheat Sheet Customization

You can now pass in custom options in HotkeysModule.forRoot(options: IHotkeyOptions).

export interface IHotkeyOptions {
  /**
   * Disable the cheat sheet popover dialog? Default: false
   */
  disableCheatSheet?: boolean;
  /**
   * Key combination to trigger the cheat sheet. Default: '?'
   */
  cheatSheetHotkey?: string;
  /**
   * Description for the cheat sheet hot key in the cheat sheet. Default: 'Show / hide this help menu'
   */
  cheatSheetDescription?: string;
};

You can also customize the title of the cheat sheet component.

<hotkeys-cheatsheet title="Hotkeys Rock!"></hotkeys-cheatsheet>
<!-- Default: 'Keyboard Shortcuts:' -->

TODO

Create unit and E2E tests

Development

To generate all * }.js, *.js.map and *.d.ts files:

$ npm run tsc

linux-nerd / angular2-hotkeys Goto Github PK