fix: improved keycommands

- when using keys with alt, focused inputs are ignored
entrecode · Jul 5, 2019 · 0890cd3 · 0890cd3
1 parent cdffb2b
commit 0890cd3
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 8 deletions.
diff --git a/packages/ui/src/lib/utility/keycommands/keycommands.service.ts b/packages/ui/src/lib/utility/keycommands/keycommands.service.ts
@@ -13,11 +13,20 @@ export interface KeyAction {
 export class KeycommandsService {
   keys: { [key: string]: KeyAction } = {};
   muted = false;
+  input;
   meta = false;
+  shift = false;
 
   constructor(public router: Router, public notificationsService: NotificationsService) {
+    window.addEventListener('keydown', (e) => {
+      if (e.altKey && this.keys[e.key]) {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        e.stopPropagation();
+      }
+    });
     window.addEventListener('keyup', (e) => {
-      if (!this.muted && this.keys[e.key]) {
+      if ((!this.muted || e.altKey) && this.keys[e.key]) {
         this.activate(this.keys[e.key], e);
       }
     });
@@ -28,25 +37,27 @@ export class KeycommandsService {
     document.addEventListener(
       'focus',
       (e) => {
-        this.mute();
+        this.mute(e);
       },
       true,
     );
 
     document.addEventListener(
       'blur',
       (e) => {
-        this.unmute();
+        this.unmute(e);
       },
       true,
     );
   }
 
-  mute() {
+  mute(e?) {
+    this.input = e.target;
     this.muted = true;
   }
 
-  unmute() {
+  unmute(e?) {
+    delete this.input;
     this.muted = false;
   }
 
@@ -56,7 +67,7 @@ export class KeycommandsService {
   }
 
   activate(keyconfig: KeyAction, e?) {
-    if (!keyconfig.canActivate()) {
+    if (!keyconfig.canActivate(e)) {
       return;
     }
     keyconfig.action(e);

diff --git a/src/app/keycommands/keycommands-demo.component.ts b/src/app/keycommands/keycommands-demo.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { KeycommandsService } from '@ec.components/ui';
+import { KeycommandsService, NotificationsService } from '@ec.components/ui';
 
 @Component({
   selector: 'ec-keycommands-demo',
@@ -10,7 +10,20 @@ import { KeycommandsService } from '@ec.components/ui';
   `,
 })
 export class KeycommandsDemoComponent implements OnInit {
-  constructor(public keycommands: KeycommandsService) {}
+  constructor(public keycommands: KeycommandsService, public notificationService: NotificationsService) {
+    this.keycommands.register({
+      key: 'π',
+      description: 'Press π',
+      canActivate: () => true,
+      action: (e) => {
+        console.log('boom',e);
+        this.notificationService.emit({
+          type: 'success',
+          title: 'PRESSED π!',
+        });
+      },
+    });
+  }
 
   ngOnInit() {}
 }