Make inputs cancelable

Closes #179

src/app.module.ts

@@ -58,6 +58,8 @@ import { SvgModuleComponent } from './components/svg/module';
 import { SvgKeyboardWrapComponent } from './components/svg/wrap';
 import { MainAppComponent, appRoutingProviders, routing }  from './main-app';
 
+import { CancelableDirective } from './directives';
+
 import { MapperService } from './services/mapper.service';
 
 import { KeymapEffects, MacroEffects } from './store/effects';
@@ -121,7 +123,8 @@ const storeConfig = {
         MacroMouseTabComponent,
         MacroTextTabComponent,
         AddOnComponent,
-        SettingsComponent
+        SettingsComponent,
+        CancelableDirective
     ],
     imports: [
         BrowserModule,

src/components/keymap/header/keymap-header.component.html

@@ -1,13 +1,15 @@
 <div class="row">
     <h1 class="col-xs-12 pane-title">
         <i class="fa fa-keyboard-o"></i>
-        <input #name class="keymap__name pane-title__name"
-               type="text"
-               value="{{ keymap.name }}"
-               (change)="editKeymapName($event.target.value)"
-               (keyup.enter)="name.blur()"
+        <input #name cancelable
+                class="keymap__name pane-title__name"
+                type="text"
+                value="{{ keymap.name }}"
+                (change)="editKeymapName($event.target.value)"
+                (keyup.enter)="name.blur()"
         /> keymap
-        (<input #abbr class="keymap__abbrev pane-title__abbrev"
+        (<input #abbr cancelable
+                class="keymap__abbrev pane-title__abbrev"
                 type="text"
                 value="{{ keymap.abbreviation }}"
                 (change)="editKeymapAbbr($event.target.value)"

src/components/macro/header/macro-header.component.html

@@ -1,9 +1,10 @@
 <div class="row">
     <h1 class="col-xs-12 pane-title">
         <i class="fa fa-play"></i>
-        <input #macroName class="pane-title__name"
-               type="text"
-               value="{{ macro.name }}"
+        <input #macroName cancelable
+                class="pane-title__name"
+                type="text"
+                value="{{ macro.name }}"
                (change)="editMacroName($event.target.value)"
                (keyup.enter)="macroName.blur()"
         />

src/directives/cancelable/cancelable.directive.ts

@@ -0,0 +1,21 @@
+import { Directive, ElementRef, HostListener, Renderer } from '@angular/core';
+
+@Directive({
+    selector: '[cancelable]'
+})
+export class CancelableDirective {
+
+    private originalValue: string;
+
+    constructor(private elementRef: ElementRef, private renderer: Renderer) { }
+
+    @HostListener('focus') onFocus(): void {
+        this.originalValue = this.elementRef.nativeElement.value;
+    }
+
+    @HostListener('keyup.escape') onEscape(): void {
+        this.renderer.setElementProperty(this.elementRef.nativeElement, 'value', this.originalValue);
+        this.renderer.invokeElementMethod(this.elementRef.nativeElement, 'blur');
+    }
+
+}

src/directives/cancelable/index.ts

@@ -0,0 +1 @@
+export { CancelableDirective } from './cancelable.directive';

src/directives/index.ts

@@ -0,0 +1 @@
+export * from './cancelable';