Bläddra i källkod

Follow selected item on enter

Daoud Clarke 3 år sedan
förälder
incheckning
30a00425ae
2 ändrade filer med 33 tillägg och 9 borttagningar
  1. 1 1
      static/index.html
  2. 32 8
      static/index.js

+ 1 - 1
static/index.html

@@ -10,7 +10,7 @@
 </head>
 <body>
 <div id="container">
-  <form autocomplete="off">
+  <form autocomplete="off" id="search-form">
     <input type="search" id="search" name="s" value="" autofocus/>
   </form>
 

+ 32 - 8
static/index.js

@@ -1,6 +1,7 @@
 
 ts = {
-    selected: null
+    selected: null,
+    numItems: 0
 };
 
 window.onload = (event) => {
@@ -24,25 +25,36 @@ window.onload = (event) => {
                         addResult(element.title, element.extract, element.url, i);
                     };
                     ts.selected = null;
+                    ts.numItems = content.length;
                 });
             });
         }
     });
-    
-    document.addEventListener('keyup', (e) => {
+
+    // Handle moving the selected item up and down
+    document.addEventListener('keydown', (e) => {
+        console.log("Key press", e);
         if (e.key == 'ArrowDown') {
             selectNextItem();
         } else if (e.key == 'ArrowUp') {
             selectPreviousItem();
         }
     });
+
+    // Handle pressing enter
+    const form = document.getElementById('search-form');
+
+    form.addEventListener( "submit", event => {
+        event.preventDefault();
+        clickSelected();
+    });
 };
 
 
 function selectNextItem() {
     if (ts.selected === null) {
         ts.selected = 0;
-    } else {
+    } else if (ts.selected < ts.numItems -1) {
         ts.selected++;
     }
 
@@ -50,11 +62,21 @@ function selectNextItem() {
 }
 
 
+function clickSelected() {
+    if (ts.selected !== null) {
+        const selectedResult = document.getElementById(ts.selected.toString());
+        selectedResult.click();
+    }
+}
+
+
 function selectPreviousItem() {
     if (ts.selected === null) {
-        ts.selected = 0;
-    } else {
+        return;
+    } else if (ts.selected > 0) {
         ts.selected--;
+    } else if (ts.selected == 0) {
+        ts.selected = null;
     }
 
     updateSelected();
@@ -67,8 +89,10 @@ function updateSelected() {
         child.classList.remove('selected');
     });
 
-    const selectedResult = document.getElementById(ts.selected.toString());
-    selectedResult.classList.add('selected');
+    if (ts.selected !== null) {
+        const selectedResult = document.getElementById(ts.selected.toString());
+        selectedResult.classList.add('selected');
+    }
 }