From 4cb46f333943062491aa5eb4db718830260fa800 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Farkas=20J=C3=B3zsef?= <fjozsef001@gmail.com>
Date: Sat, 26 Nov 2016 22:49:06 +0100
Subject: [PATCH] Make inputs cancelable

Closes #179
---
 src/app.module.ts                             |  5 ++++-
 .../header/keymap-header.component.html       | 14 +++++++------
 .../macro/header/macro-header.component.html  |  7 ++++---
 .../cancelable/cancelable.directive.ts        | 21 +++++++++++++++++++
 src/directives/cancelable/index.ts            |  1 +
 src/directives/index.ts                       |  1 +
 6 files changed, 39 insertions(+), 10 deletions(-)
 create mode 100644 src/directives/cancelable/cancelable.directive.ts
 create mode 100644 src/directives/cancelable/index.ts
 create mode 100644 src/directives/index.ts

diff --git a/src/app.module.ts b/src/app.module.ts
index b4795fe0..67e6df69 100644
--- a/src/app.module.ts
+++ b/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,
diff --git a/src/components/keymap/header/keymap-header.component.html b/src/components/keymap/header/keymap-header.component.html
index 724fbf02..be8f3de9 100644
--- a/src/components/keymap/header/keymap-header.component.html
+++ b/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)"
diff --git a/src/components/macro/header/macro-header.component.html b/src/components/macro/header/macro-header.component.html
index 87fa68b1..aec88669 100644
--- a/src/components/macro/header/macro-header.component.html
+++ b/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()"
         />
diff --git a/src/directives/cancelable/cancelable.directive.ts b/src/directives/cancelable/cancelable.directive.ts
new file mode 100644
index 00000000..13c2e131
--- /dev/null
+++ b/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');
+    }
+
+}
diff --git a/src/directives/cancelable/index.ts b/src/directives/cancelable/index.ts
new file mode 100644
index 00000000..a64c3c34
--- /dev/null
+++ b/src/directives/cancelable/index.ts
@@ -0,0 +1 @@
+export { CancelableDirective } from './cancelable.directive';
diff --git a/src/directives/index.ts b/src/directives/index.ts
new file mode 100644
index 00000000..a6e0c1b6
--- /dev/null
+++ b/src/directives/index.ts
@@ -0,0 +1 @@
+export * from './cancelable';