From 007b8264450b694be57d2b1f0c8d301acbe826b8 Mon Sep 17 00:00:00 2001
From: Frans de Jonge <fransdejonge@gmail.com>
Date: Fri, 3 Feb 2017 15:32:01 +0100
Subject: [PATCH] Improved keyboard usability

* Enter immediately loads the first result
* Down arrow immediately looks up results and focuses the first entry of the result list
* Escape clears input

* Up and down arrows focus links in the result list
* Right arrow loads the currently focused result and focuses on article
* Escape clears and focuses input

* Enter focuses input (without clearing)
* Left arrow focuses the current article's entry in the result list if left scrolling is no longer an option
* Escape clears and focuses input
---
 src/script.js | 167 +++++++++++++++++++++++++++++++++++++++++++++++---
 src/style.css |   2 +-
 2 files changed, 161 insertions(+), 8 deletions(-)

diff --git a/src/script.js b/src/script.js
index 5310340..9323c37 100644
--- a/src/script.js
+++ b/src/script.js
@@ -1,6 +1,8 @@
 $(
   function() {
 
+    var dontClearContent = false;
+    var previousLookup = '';
     var scheduledLookupID;
 
     var $word = $('#word');
@@ -13,6 +15,7 @@ $(
 
     var defaultStyle = 'Default';
     $content.on('load', function(){
+      $content.contents().on('keydown', onContentKeyDown);
       try {
         var contentLocation = $content.contents().attr('location');
         if (contentLocation.href === 'about:blank') {
@@ -85,6 +88,7 @@ $(
     });
 
     var doLookup = function(dontClearContent) {
+      var deferred = $.Deferred();
       var word = $word.val();
       console.log(word);
       $lookupResult.empty();
@@ -93,12 +97,14 @@ $(
       }
 
       if (!word) {
-        return;
+        return deferred.reject();
       }
+      previousLookup = word;
       $.getJSON('/find/?key='+encodeURIComponent(word), function(data) {
-        if (!data || data.length == 0) {
+        if (!data || data.length === 0) {
           var $div = $('<div>').attr('align', 'center').text('Nothing found');
           $lookupResult.append($div);
+          deferred.reject();
           return;
         }
         var $ul = $('<ul>');
@@ -110,20 +116,167 @@ $(
                 .append($label)
                 .append($dictLabel)
                 .attr('href', item.url)
-                .attr('target', 'content');
+                .attr('target', 'content')
+                // make sure last clicked element is remembered
+                .on('click', function() {
+                  $lookupResult.data('selected', this);
+                })
+                .on('keydown', onLinkKeyDown);
           $li.append($a);
           $ul.append($li);
           return true;
         });
         $lookupResult.append($ul);
+        deferred.resolve();
       });
+      return deferred.promise();
     };
 
-    var onInputChange = function() {
-      if (scheduledLookupID) {
-        clearTimeout(scheduledLookupID);
+    var previousLookupCheck = function() {
+      return (previousLookup === $word.val());
+    };
+
+    var onContentKeyDown = function(e) {
+      console.log(e);
+      var el = this;
+      var key = e.which;
+      switch (key) {
+        // 37 is 'ArrowLeft'
+        // go back to last selected element in results list
+        case 37:
+          console.log('left');
+          // only shift focus if we can't scroll left
+          console.log(el.body.scrollLeft);
+          if (el.body && el.body.scrollLeft === 0)
+          {
+            e.preventDefault();
+            $lookupResult.data('selected').focus();
+          }
+          break;
+        // 13 is 'Enter'
+        // focus on #word
+        case 13:
+          $word.focus();
+          break;
+        // 27 is 'Escape'
+        // empty #word and focus on it
+        case 27:
+          // prevent bubbling to #word
+          e.preventDefault();
+          if (!dontClearContent)
+          {
+            $content.attr('src', '');
+          }
+          $lookupResult.empty();
+          $word.val('');
+          $word.focus();
+          break;
+        default:
+          break;
+      }
+    };
+
+    var onLinkKeyDown = function(e) {
+      var el = this;
+      var key = e.which;
+      switch (key) {
+        // 27 is 'Escape'
+        case 27:
+          e.preventDefault();
+          if (!dontClearContent)
+          {
+            $content.attr('src', '');
+          }
+          $lookupResult.empty();
+          $word.val('');
+          $word.focus();
+          break;
+        // 40 is 'ArrowDown'
+        case 40:
+          console.log('down');
+          e.preventDefault();
+          $(el.parentNode).nextAll().first().find('a').focus();
+          break;
+        // 38 is 'ArrowUp'
+        case 38:
+          console.log('up');
+          e.preventDefault();
+          var $elPrevAll = $(el.parentNode).prevAll();
+          // if there are multiple previous entries, focus on the first
+          if ($elPrevAll.length > 0)
+          {
+            $elPrevAll.first().find('a').focus();
+          }
+          // else we're at the top: focus #word input
+          else {
+            $word.focus();
+          }
+          break;
+        // 39 is 'ArrowRight'
+        case 39:
+          console.log('right');
+          e.preventDefault();
+          el.click();
+          $content.focus();
+          break;
+        default:
+          break;
+      }
+    };
+
+    var onInputChange = function(e) {
+      var key = e.which;
+      switch (key) {
+        // 27 is 'Escape'
+        case 27:
+          $lookupResult.empty();
+          $word.val('');
+          break;
+        // 40 is 'ArrowDown'
+        case 40:
+          console.log('down');
+          if (previousLookupCheck()) {
+            var $firstLink = $($lookupResult).find('a:first-of-type');
+            // only take action if there actually are results
+            if ($firstLink.length > 0) {
+              $firstLink[0].focus();
+            }
+          }
+          else {
+            if (scheduledLookupID) {
+              clearTimeout(scheduledLookupID);
+            }
+            doLookup(true).done(function(){
+              var $firstLink = $($lookupResult).find('a:first-of-type');
+              // only take action if there actually are results
+              if ($firstLink.length > 0) {
+                $firstLink[0].focus();
+              }
+            });
+          }
+          break;
+        // 13 is 'Enter'
+        case 13:
+          if (previousLookupCheck()) {
+            $($lookupResult).find('a:first-of-type')[0].click();
+          }
+          else {
+            if (scheduledLookupID) {
+              clearTimeout(scheduledLookupID);
+            }
+            doLookup(dontClearContent).done(function(){
+              $($lookupResult).find('a:first-of-type')[0].click();
+            });
+          }
+          break;
+        default:
+          if (scheduledLookupID) {
+            clearTimeout(scheduledLookupID);
+          }
+          scheduledLookupID = setTimeout(function() {
+            doLookup(dontClearContent);
+          }, 250);
       }
-      scheduledLookupID = setTimeout(doLookup, 500);
     };
 
     $word.on('keyup', onInputChange);
diff --git a/src/style.css b/src/style.css
index d2d52b9..ed7903b 100644
--- a/src/style.css
+++ b/src/style.css
@@ -128,7 +128,7 @@ li a {
     vertical-align: middle;
 }
 
-li a:hover {
+li a:focus, li a:hover {
     background: darkgray;
 }