Basic keyboard navigation for search input

rowanhogan · May 17, 2018 · f40b410 · f40b410
1 parent 6d20ffc
commit f40b410
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 99 deletions.
diff --git a/app/scripts/components/eventHandlers.js b/app/scripts/components/eventHandlers.js
@@ -6,6 +6,54 @@ var handleFont = require('./handleFont');
 var debounce = require('./debounce');
 var lastScrollTop = 55;
 
+var searchForm = debounce(function(e) {
+  e.preventDefault();
+  var query = $('.search-form').find('input').val();
+  handleSearch(query, 'en');
+}, 300);
+
+$(document).on('keyup', '.search-form', function(e) {
+  var keyPressed = e.which,
+      $form = $('.search-form');
+
+  if (keyPressed === 27) {
+    e.preventDefault();
+    $form.find('.search-results').remove();
+  }
+
+  if (keyPressed === 38 || keyPressed === 40) {
+    e.preventDefault();
+
+    var $activeLi = $form.find('.search-results li.active');
+
+    if ($activeLi.length) {
+      $activeLi.removeClass('active');
+
+      if (keyPressed === 38) {
+        $activeLi.prev().addClass('active');
+      } else {
+        $activeLi.next().addClass('active');
+      }
+    } else {
+      $form.find('.search-results li:first-child').addClass('active');
+    }
+  } else {
+    searchForm(e);
+  }
+});
+
+$(document).on('submit', '.search-form', function(e) {
+  e.preventDefault();
+
+  var $activeLi = $('.search-form .search-results li.active');
+
+  if ($activeLi.length) {
+    window.location.assign($activeLi.find('a').attr('href'));
+  } else {
+    window.location.search = $(this).find('input').val().replace(/ /g, "_")
+  }
+});
+
 $(document).on('scroll', function(e) {
   var st = $(window).scrollTop();
 
@@ -24,7 +72,6 @@ $(document).on('scroll', function(e) {
   }
 });
 
-
 $(document).on('click', '.page-title', function(e) {
   e.preventDefault();
 
@@ -54,26 +101,6 @@ $(document).on('keyup', '#custom-styles-input', function(e) {
   localStorage.setItem('customStyles', styles);
 });
 
-$(document).on('submit', '.search-form', function(e) {
-  e.preventDefault();
-
-  if (false) {
-    // Do nothing
-  } else {
-    window.location.search = $(this).find('input').val().replace(/ /g, "_")
-  }
-});
-
-var searchForm = debounce(function(e) {
-  e.preventDefault();
-
-  var query = $('.search-form').find('input').val();
-  handleSearch(query, 'en');
-}, 300)
-
-$(document).on('keyup', '.search-form', searchForm);
-
-
 $(document).on('change', '#theme-changer input', function(e) {
   e.preventDefault();
 

diff --git a/app/styles/_app.scss b/app/styles/_app.scss
@@ -106,12 +106,12 @@ body {
             text-indent: 0;
             line-height: 3em;
             height: auto;
+          }
 
-            &:hover, &.active {
-              background: #ddd;
-              color: black;
-              text-decoration: none;
-            }
+          &:hover a, &.active a {
+            background: #ddd;
+            color: black;
+            text-decoration: none;
           }
         }
       }

diff --git a/app/styles/_default.scss b/app/styles/_default.scss
@@ -162,7 +162,10 @@ div.columns dd dd {
 .hlist dd:after,
 .hlist li:after {
   content: " \2022 ";
+  font-size: 10px;
+  font-family: monospace;
   font-weight: bold;
+  margin-left: 6px;
 }
 
 .hlist dd:last-child:after,

diff --git a/app/styles/_main.scss b/app/styles/_main.scss
@@ -26,8 +26,11 @@
 
   #content {
     font-size: 1em;
-    max-width: 800px;
-    margin: auto;
+
+    #mp-right {
+      margin: auto !important;
+      max-width: 800px;
+    }
 
     .mw-headline {
       margin: 0;
@@ -68,90 +71,81 @@
     padding: 2em $padding !important;
     box-sizing: border-box;
 
-    @media (min-width: 769px) {
-      #mp-tfa-img {
-        margin-right: 3em !important;
-      }
-    }
-
-    @media (max-width: 768px) {
+    &.has-bg-image {
+      color: white !important;
+      background: #334 !important;
 
-      &.has-bg-image {
+      a {
         color: white !important;
-        background: #334 !important;
+      }
 
-        a {
-          color: white !important;
+      > p {
+        max-height: 300px;
+        max-width: 480px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin-bottom: 3em;
+        line-height: 1.667em;
+        text-align: justify;
+        -webkit-text-fill-color: transparent;
+        background: -webkit-linear-gradient(white, transparent 60%);
+        -webkit-background-clip: text;
+        // max-width: 600px;
+        margin: 1em auto;
+      }
+
+      > #mp-tfa-img {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        bottom: 0;
+        margin: 0 !important;
+        z-index: 0;
+        overflow: hidden;
+        background-size: cover;
+        background-position: center;
+        opacity: .6;
+
+        .thumbcaption {
+          display: none;
         }
 
-        > p {
-          max-height: 300px;
-          max-width: 480px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          margin-bottom: 3em;
-          line-height: 1.667em;
-          text-align: justify;
-          -webkit-text-fill-color: transparent;
-          background: -webkit-linear-gradient(white, transparent 60%);
-          -webkit-background-clip: text;
-          // max-width: 600px;
-          margin: 1em auto;
+        a {
+          display: none;
+          pointer-events: none;
         }
 
-        > #mp-tfa-img {
+        img {
+          display: block;
+          height: 100vh;
+          width: auto !important;
+          max-width: 10000000px;
           position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          bottom: 0;
-          margin: 0 !important;
-          z-index: 0;
-          overflow: hidden;
-          background-size: cover;
-          background-position: center;
-          opacity: .6;
-
-          .thumbcaption {
-            display: none;
-          }
-
-          a {
-            display: none;
-            pointer-events: none;
-          }
-
-          img {
-            display: block;
-            height: 100vh;
-            width: auto !important;
-            max-width: 10000000px;
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            opacity: .5;
-          }
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          opacity: .5;
         }
       }
+    }
 
-      > * {
-        position: relative;
-        z-index: 10;
-      }
+    > * {
+      position: relative;
+      z-index: 10;
+    }
 
-      > ul {
-        text-align: center !important;
-        position: absolute;
-        bottom: 2em;
-        left: 0;
-        right: 0;
-        padding: 0 2em;
+    > ul {
+      text-align: center !important;
+      position: absolute;
+      bottom: 2em;
+      left: 0;
+      right: 0;
+      padding: 0 2em;
 
-        .hlist {
-          display: block;
-          font-size: 14px;
-        }
+      .hlist {
+        display: block;
+        font-size: 14px;
       }
     }