Skip to content

Commit

Permalink
issue 42 support big n and normal n; add support for plus sign key as…
Browse files Browse the repository at this point in the history 
…signment using 'plus' keyword; issue 40 - use event.key if possible; issue 37 - do not use rxjs internal use operator map (#43)

#42
#40
#37
  • Loading branch information
Omri authored Dec 20, 2019
1 parent 1d368fe commit c9b9529
Show file tree
Hide file tree
Showing 5 changed files with 85 additions and 20 deletions.
7 changes: 7 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,8 @@ export class AppModule {

key combinations are used with meta keys like control, shift, command, etc... and are defined using plus(+) sign as a separator.
there can be multiple combinations for the same command, so either of the key combination will trigger the callback.
Since combinations uses the plus sign as a seperator, if you want to bind to the actual + charachater,
you will need to use "plus" instead.

#### Examples:

Expand All @@ -85,6 +87,11 @@ there can be multiple combinations for the same command, so either of the key co
preventDefault: true,
command: (output: ShortcutEventOutput) => console.log("control + a", output),

},
{
key: "ctrl + plus",
preventDefault: true,
command: (output: ShortcutEventOutput) => console.log("control + plus key", output),
}
]
```
Expand Down
9 changes: 6 additions & 3 deletions projects/ng-keyboard-shortcuts/src/lib/keys.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,17 @@ export const modifiers = {
'ctl': 'ctrlKey',
'control': 'ctrlKey',
};
export const _SPECIAL_CASES = {
"plus": "+"
};

export const symbols = {
'cmd': isMac ? '⌘' : 'Ctrl',
'command': isMac ? '⌘' : 'Ctrl',
'left command': isMac ? '⌘' : 'Ctrl',
'right command': isMac ? '⌘' : 'Ctrl',
'option': isMac ? '⌥' : 'Alt',
'plus': "+",
'left': '←',
'right': '→',
'up': '↑',
Expand Down Expand Up @@ -57,13 +61,12 @@ export const _MAP = {
};


/**
/*
* mapping for special characters so they can support
*
* this dictionary is only used incase you want to bind a
* keyup or keydown event to one of these keys
*
* @type
*/
export const _KEYCODE_MAP = {
106: '*',
Expand Down Expand Up @@ -132,4 +135,4 @@ for (let i = 0; i <= 9; ++i) {
// event will never fire for numpad 0 pressed as part of a keydown
// event.
_MAP[i + 96] = i.toString();
}
}
3 changes: 1 addition & 2 deletions projects/ng-keyboard-shortcuts/src/lib/ng-keyboard-shortcuts-help.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,8 @@ import { TemplatePortal } from "./portal";
import { KeyboardShortcutsService } from "./ng-keyboard-shortcuts.service";
import { KeyboardShortcutsHelpService } from "./ng-keyboard-shortcuts-help.service";
import { animate, style, transition, trigger } from "@angular/animations";
import { distinctUntilChanged } from "rxjs/operators";
import { distinctUntilChanged, map } from 'rxjs/operators';
import { groupBy } from "./utils";
import { map } from "rxjs/internal/operators";
import { SubscriptionLike } from "rxjs";

/**
Expand Down
34 changes: 24 additions & 10 deletions projects/ng-keyboard-shortcuts/src/lib/ng-keyboard-shortcuts.service.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Injectable, OnDestroy } from "@angular/core";
import { _KEYCODE_MAP, _MAP, _SHIFT_MAP, modifiers } from "./keys";
import { _KEYCODE_MAP, _MAP, _SHIFT_MAP, _SPECIAL_CASES, modifiers } from "./keys";
import {
BehaviorSubject,
fromEvent,
Expand Down Expand Up @@ -103,6 +103,7 @@ export class KeyboardShortcutsService implements OnDestroy {
*/
private mapEvent = event => {
return this._shortcuts
.filter(shortcut => !shortcut.isSequence)
.map(shortcut =>
Object.assign({}, shortcut, {
predicates: any(
Expand Down Expand Up @@ -177,8 +178,12 @@ export class KeyboardShortcutsService implements OnDestroy {
characters = Array.isArray(characters) ? characters : [characters];
const result = sequences
.map(sequence => {
const sequences = sequence.sequence.filter(
seque => characters.some((key) => seque[currentLength] === key)
const sequences = sequence.sequence.filter(seque =>
characters.some(
key =>
(_SPECIAL_CASES[seque[currentLength]] ||
seque[currentLength]) === key
)
);
const partialMatch = sequences.length > 0;
if (sequence.fullMatch) {
Expand All @@ -205,7 +210,7 @@ export class KeyboardShortcutsService implements OnDestroy {
* need to determine which one to trigger.
* if both match, we pick the longer one (? a) in this case.
*/
const guess = maxArrayProp('priority', result);
const guess = maxArrayProp("priority", result);
if (result.length > 1 && guess.fullMatch) {
return { events: [], command: guess, sequences: this._sequences };
}
Expand All @@ -230,11 +235,12 @@ export class KeyboardShortcutsService implements OnDestroy {
* This delay only occurs when single key sequence is the beginning of another sequence.
*/
return timer(500).pipe(
map(() => ({ command: command.filter(command => command.fullMatch)[0] })),
map(() => ({ command: command.filter(command => command.fullMatch)[0] }))
);
}
return of({ command });
}),
takeUntil(this.pressed$),
filter(({ command }) => command && command.fullMatch),
map(({ command }) => command),
filter((shortcut: ParsedShortcut) => isFunction(shortcut.command)),
Expand Down Expand Up @@ -283,20 +289,25 @@ export class KeyboardShortcutsService implements OnDestroy {
if (typeof event.which !== "number") {
event.which = event.keyCode;
}
// for non keypress events the special maps are needed
if (_SPECIAL_CASES[event.which]) {
return [_SPECIAL_CASES[event.which], event.shiftKey];
}
if (_MAP[event.which]) {
// for non keypress events the special maps are needed
return [_MAP[event.which], event.shiftKey];
}

if (_KEYCODE_MAP[event.which]) {
return [_KEYCODE_MAP[event.which], event.shiftKey];
}
return [event.key, event.shiftKey];
// if it is not in the special map

// keep this commented out for now, in case there are regression issues, it will
// probably be caused by this change!!!!!!!!
// with keydown and keyup events the character seems to always
// come in as an uppercase character whether you are pressing shift
// or not. we should make sure it is always lowercase for comparisons
return [String.fromCharCode(event.which).toLowerCase(), event.shiftKey];
// return [String.fromCharCode(event.which).toLowerCase(), event.shiftKey];
}

private characterFromEvent(event) {
Expand Down Expand Up @@ -384,8 +395,11 @@ export class KeyboardShortcutsService implements OnDestroy {
// for modifiers like control key
// look for event['ctrlKey']
// otherwise use the keyCode
key = _SPECIAL_CASES[key] || key;
if (modifiers.hasOwnProperty(key)) {
return event => !!event[modifiers[key]];
return event => {
return !!event[modifiers[key]];
};
}

return event => {
Expand All @@ -396,7 +410,7 @@ export class KeyboardShortcutsService implements OnDestroy {
return true;
}
return key === char;
})
});
};
});
};
Expand Down
52 changes: 47 additions & 5 deletions src/app/home/home.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,13 +29,55 @@ export class HomeComponent implements OnInit, AfterViewInit {

ngAfterViewInit(): void {
this.shortcuts.push(
// {
// key: "cmd + e",
// label: "help",
// description: "Controlling/Commanding + E",
// preventDefault: true,
// allowIn: [AllowIn.Textarea],
// command: e => console.log("clicked " , e.key)
// },
// {
// key: "N",
// label: "help",
// description: "n character",
// preventDefault: true,
// command: e => console.log("clicked BIG N" , e.key)
// },
{
key: "cmd + e",
key: "plus",
label: "help",
description: "Controlling/Commanding + E",
description: "clicking plus character",
preventDefault: true,
allowIn: [AllowIn.Textarea],
command: e => console.log("clicked " , e.key)
command: e => console.log("clicked plus" , e.key)
},
{
key: "control + plus",
label: "help",
description: "clicking control with plus character",
preventDefault: true,
command: e => console.log("clicked plus with control" , e.key)
},
{
key: "=",
label: "help",
description: "clicking = character",
preventDefault: true,
command: e => console.log("clicked: " , e.key)
},
{
key: "n",
label: "help",
description: "n character",
preventDefault: true,
command: e => console.log("clicked small n " , e.key)
},
{
key: "N",
label: "help",
description: "big N",
preventDefault: true,
command: e => console.log("clicked" , e.key)
},
{
key: "~",
Expand Down Expand Up @@ -123,7 +165,7 @@ export class HomeComponent implements OnInit, AfterViewInit {
preventDefault: true
},
{
key: "cmd + =",
key: "cmd + plus",
label: "help",
description: "zoom out",
command: (output: ShortcutEventOutput) => console.log(output),
Expand Down

0 comments on commit c9b9529

Please sign in to comment.