From 5e7c5a905e3a1b1c0d79b633a03c75cddfb8e5da Mon Sep 17 00:00:00 2001
From: Daoud Clarke <daoud.clarke@gmail.com>
Date: Mon, 20 Dec 2021 21:28:01 +0000
Subject: [PATCH] Select item with arrow keys

---
 static/index.css |  4 ++++
 static/index.js  | 56 ++++++++++++++++++++++++++++++++++++++++++------
 2 files changed, 53 insertions(+), 7 deletions(-)

diff --git a/static/index.css b/static/index.css
index 65a7196..bceaa9d 100644
--- a/static/index.css
+++ b/static/index.css
@@ -55,6 +55,10 @@ div .result:hover {
     background: #f0f0ff;
 }
 
+div .selected {
+    background: #f0f0ff;
+}
+
 div .result {
     padding: 10px;
 }
diff --git a/static/index.js b/static/index.js
index 1ceedaf..915b630 100644
--- a/static/index.js
+++ b/static/index.js
@@ -1,4 +1,7 @@
 
+ts = {
+    selected: null
+};
 
 window.onload = (event) => {
     const searchInput = document.getElementById('search');
@@ -17,27 +20,65 @@ window.onload = (event) => {
                 console.log(response);
                 response.json().then(content => {
                     console.log(content);
-                    content.forEach(element => {
-                        addResult(element.title, element.extract, element.url);
-                    })
+                    for (const [i, element] of content.entries()) {
+                        addResult(element.title, element.extract, element.url, i);
+                    };
+                    ts.selected = null;
                 });
             });
-        } else if (e.key == 'ArrowDown') {
-
+        }
+    });
+    
+    document.addEventListener('keyup', (e) => {
+        if (e.key == 'ArrowDown') {
+            selectNextItem();
         } else if (e.key == 'ArrowUp') {
-
+            selectPreviousItem();
         }
     });
 };
 
 
+function selectNextItem() {
+    if (ts.selected === null) {
+        ts.selected = 0;
+    } else {
+        ts.selected++;
+    }
+
+    updateSelected();
+}
+
+
+function selectPreviousItem() {
+    if (ts.selected === null) {
+        ts.selected = 0;
+    } else {
+        ts.selected--;
+    }
+
+    updateSelected();
+}
+
+
+function updateSelected() {
+    const results = document.querySelectorAll('.result');
+    results.forEach(child => {
+        child.classList.remove('selected');
+    });
+
+    const selectedResult = document.getElementById(ts.selected.toString());
+    selectedResult.classList.add('selected');
+}
+
+
 function clearResults() {
   const results = document.getElementById('results');
   results.innerHTML = '';
 }
 
 
-function addResult(title, extract, url) {
+function addResult(title, extract, url, id) {
    const par = document.createElement("p");
 
    const titleText = createBoldedSpan(title);
@@ -53,6 +94,7 @@ function addResult(title, extract, url) {
 
    const div = document.createElement("div");
    div.classList.add('result');
+   div.id = id.toString();
 
    const urlPar = document.createElement("p");
    const urlText = document.createTextNode(url);