From 9c02b1ae2b16abd5ef43f41721a2657369fedc28 Mon Sep 17 00:00:00 2001
From: Baptiste Lemoine <contact@cipherbliss.com>
Date: Sat, 23 Nov 2019 16:05:44 +0100
Subject: [PATCH] :zap: enhance keyboard navigation with answers

---
 src/app/pages/answers/answers.component.html | 10 ++++---
 src/app/pages/answers/answers.component.ts   | 31 +++++++++++++++-----
 2 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/src/app/pages/answers/answers.component.html b/src/app/pages/answers/answers.component.html
index 9ea5719a..fa2027fa 100644
--- a/src/app/pages/answers/answers.component.html
+++ b/src/app/pages/answers/answers.component.html
@@ -1,7 +1,7 @@
 <div class="answers">
-	<h1 i18n>
-		Choisir les propositions
-	</h1>
+    <h1 i18n>
+        Choisir les propositions
+    </h1>
 
     <p class="subtitle" i18n>
         Vous pouvez utiliser la syntaxe markdown
@@ -14,9 +14,11 @@
                 type="text"
                 class="answer"
                 [(ngModel)]="answer.text"
+                (keyup.enter)="addAnswer()"
+                (keyup)="navigateOrDelete($event,i)"
                 placeholder="réponse"
             >
-            <button (click)="config.answers.splice(i,1)">X</button>
+            <button class="btn btn--alert" (click)="config.answers.splice(i,1)">X</button>
         </li>
     </ol>
 
diff --git a/src/app/pages/answers/answers.component.ts b/src/app/pages/answers/answers.component.ts
index 48116555..cf8b169a 100644
--- a/src/app/pages/answers/answers.component.ts
+++ b/src/app/pages/answers/answers.component.ts
@@ -1,4 +1,4 @@
-import {ChangeDetectorRef, Component, Inject, OnInit} from '@angular/core';
+import {AfterViewInit, ChangeDetectorRef, Component, Inject, OnInit} from '@angular/core';
 import {BaseComponent} from '../base-page/base.component';
 import {ConfigService} from '../../config.service';
 
@@ -9,7 +9,7 @@ import {DOCUMENT} from '@angular/common';
     templateUrl: './answers.component.html',
     styleUrls: ['./answers.component.scss']
 })
-export class AnswersComponent extends BaseComponent implements OnInit {
+export class AnswersComponent extends BaseComponent implements OnInit, AfterViewInit {
 
     private answerList = [];
 
@@ -24,6 +24,10 @@ export class AnswersComponent extends BaseComponent implements OnInit {
     ngOnInit() {
     }
 
+    ngAfterViewInit() {
+        this.focusOnAnswer(0)
+    }
+
     trackFunction(index: number, item: any): number {
         return item.id;
     }
@@ -35,19 +39,30 @@ export class AnswersComponent extends BaseComponent implements OnInit {
                 text: ''
             });
         this.cd.detectChanges(); // to refresh the view before focusing on the new input
+        this.focusOnAnswer(this.config.answers.length - 1)
+    }
+
+    focusOnAnswer(i) {
         const AnswersDomToFocus = this.document.querySelectorAll('.answers .answer');
-        const dom = AnswersDomToFocus[AnswersDomToFocus.length - 1];
+        const dom = AnswersDomToFocus[i];
         if (dom.focus) {
             dom.focus();
         }
+        if (dom.select) {
+            dom.select();
+        }
     }
 
-    // add a new answer on the press of ENTER in an input
-    addWhenEnterKey(event) {
+    navigateOrDelete(event: KeyboardEvent, i) {
         console.log('event', event);
-        if (event.keyCode === 13) {
-            this.addAnswer();
+        if (event.ctrlKey && event.key == "d") {
+            this.config.answers.splice(i, 1)
+        }
+        if (event.key == "ArrowUp" && i > 0) {
+            this.focusOnAnswer(i - 1);
+        }
+        if (event.key == "ArrowDown" && i < this.config.answers.length) {
+            this.focusOnAnswer(i + 1);
         }
-        return;
     }
 }