Added capture keystroke to the popover (#229)

Resolves #228

src/components/popover/tab/keypress/keypress-tab.component.html

@@ -7,7 +7,7 @@
             [width]="200"
             [options]="options"
     ></select2>
-    <capture-keystroke-button></capture-keystroke-button>
+    <capture-keystroke-button (capture)="onKeysCapture($event)"></capture-keystroke-button>
 </div>
 <div class="modifier-options">
     <b class="setting-label">Modifiers:</b>

src/components/popover/tab/keypress/keypress-tab.component.ts

@@ -66,6 +66,17 @@ export class KeypressTabComponent implements OnChanges, Tab {
         return keystrokeAction.scancode > 0 || keystrokeAction.modifierMask > 0;
     }
 
+    onKeysCapture(event: {code: number, left: boolean[], right: boolean[]}) {
+        if (event.code) {
+            this.scanCode = event.code;
+        } else {
+            this.scanCode = 0;
+        }
+
+        this.leftModifierSelects = event.left;
+        this.rightModifierSelects = event.right;
+    }
+
     fromKeyAction(keyAction: KeyAction): boolean {
         if (!(keyAction instanceof KeystrokeAction)) {
             return false;
@@ -139,17 +150,11 @@ export class KeypressTabComponent implements OnChanges, Tab {
         modifierSelects[index] = !modifierSelects[index];
     }
 
-    // TODO: change to the correct type when the wrapper has added it.
-    /* tslint:disable:no-unused-variable: It is used in the template. */
-    private onLongpressChange(event: any) {
-        /* tslint:enable:no-unused-variable: */
+    onLongpressChange(event: {value: string}) {
         this.selectedLongPressIndex = +event.value;
     }
 
-    // TODO: change to the correct type when the wrapper has added it.
-    /* tslint:disable:no-unused-variable: It is used in the template. */
-    private onScancodeChange(event: any) {
-        /* tslint:enable:no-unused-variable */
+    onScancodeChange(event: {value: string}) {
         this.scanCode = +event.value;
     }
 

src/components/popover/widgets/capture-keystroke/capture-keystroke-button.component.html

@@ -1,11 +1,12 @@
 <button type="button" class="btn btn-sm btn--capture-keystroke"
             [ngClass]="{'btn-default': !record, 'btn-info': record}"
-            (click)="record ? stop() : start()">
-    <i class="fa" [ngClass]=" { 'fa-circle' : !record, 'fa-square': record }"></i>
+            (click)="start()"
+>
+    <i class="fa fa-circle"></i>
     <template [ngIf]="!record">
         Capture keystroke
     </template>
     <template [ngIf]="record">
-        Stop capturing
+        Capturing ...
     </template>
  </button>

src/components/popover/widgets/capture-keystroke/capture-keystroke-button.component.ts

@@ -1,23 +1,76 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, EventEmitter, HostListener, Output } from '@angular/core';
+import { CaptureService } from '../../../../services/capture.service';
 
 @Component({
     selector: 'capture-keystroke-button',
     template: require('./capture-keystroke-button.component.html'),
     styles: [require('./capture-keystroke-button.component.scss')]
 })
-export class CaptureKeystrokeButtonComponent implements OnInit {
+export class CaptureKeystrokeButtonComponent {
+    @Output() capture = new EventEmitter<any>();
+
     private record: boolean;
+    private first: boolean; // enable usage of Enter to start capturing
 
-    constructor() { }
+    constructor(private captureService: CaptureService) {
+        this.record = false;
+        this.captureService.initModifiers();
+        this.captureService.populateMapping();
+    }
 
-    ngOnInit() { }
+    @HostListener('keyup')
+    onKeyUp() {
+        if (this.record && !this.first) {
+            this.saveScanCode();
+        }
+    }
+
+    @HostListener('keydown', ['$event'])
+    onKeyDown(e: KeyboardEvent) {
+        const code: number = e.keyCode;
+        const enter = 13;
+
+        if (this.record) {
+            e.preventDefault();
+            this.first = false;
+
+            if (this.captureService.hasMap(code)) {
+                this.saveScanCode(this.captureService.getMap(code));
+            } else {
+                this.captureService.setModifier((e.location === 1), code);
+            }
+        } else if (code === enter) {
+            this.record = true;
+            this.first = true;
+        }
+    }
+
+    @HostListener('focusout')
+    onFocusOut() {
+        this.record = false;
+        this.reset();
+    }
 
     start(): void {
         this.record = true;
     }
 
-    stop(): void {
+    private saveScanCode(code?: number) {
         this.record = false;
+        const left: boolean[] = this.captureService.getModifiers(true);
+        const right: boolean[] = this.captureService.getModifiers(false);
+
+        this.capture.emit({
+            code,
+            left,
+            right
+        });
+
+        this.reset();
     }
 
+    private reset() {
+        this.first = false;
+        this.captureService.initModifiers();
+    }
 }