Fix bugs with toc not highlighting, begin search overhaul

source/javascripts/app/search.js

@@ -1,7 +1,7 @@
 (function (global) {
 
   var $global = $(global);
-  var content, darkBox, searchInfo;
+  var content, darkBox, searchResults;
   var highlightOpts = { element: 'span', className: 'search-highlight' };
 
   var index = new lunr.Index();
@@ -18,11 +18,6 @@
     $('h1').each(function() {
       var title = $(this);
       var body = title.nextUntil('h1');
-      var wrapper = $('<section id="section-' + title.prop('id') + '"></section>');
-
-      title.after(wrapper.append(body));
-      wrapper.prepend(title);
-
       index.add({
         id: title.prop('id'),
         title: title.text(),
@@ -34,89 +29,42 @@
   function bind() {
     content = $('.content');
     darkBox = $('.dark-box');
-    searchInfo = $('.search-info');
+    searchResults = $('.search-results');
 
-    $('#input-search')
-      .on('keyup', search)
-      .on('focus', active)
-      .on('blur', inactive);
+    $('#input-search').on('keyup', function(e) {
+      if ($(this).val() === "") {
+        inactive(e);
+      } else {
+        search(e);
       }
-
-  function refToHeader(itemRef) {
-    return $('.tocify-item[data-unique=' + itemRef + ']').closest('.tocify-header');
-  }
-
-  function sortDescending(obj2, obj1) {
-    var s1 = parseInt(obj1.id.replace(/[^\d]/g, ''), 10);
-    var s2 = parseInt(obj2.id.replace(/[^\d]/g, ''), 10);
-    return s1 === s2 ? 0 : s1 < s2 ? -1 : 1;
-  }
-
-  function resetHeaderLocations() {
-    var headers = $(".tocify-header").sort(sortDescending);
-    $.each(headers, function (index, item) {
-      $(item).insertBefore($("#toc ul:first-child"));
     });
   }
 
   function search(event) {
-    var sections = $('section, #toc .tocify-header');
-
-    searchInfo.hide();
     unhighlight();
+    searchResults.addClass('visible');
 
     // ESC clears the field
     if (event.keyCode === 27) this.value = '';
 
     if (this.value) {
-      sections.hide();
-      // results are sorted by score in descending order
       var results = index.search(this.value);
-
       if (results.length) {
-        resetHeaderLocations();
-        var lastRef;
-        $.each(results, function (index, item) {
-          if (item.score <= 0.0001) return; // remove low-score results
-          var itemRef = item.ref;
-          $('#section-' + itemRef).show();
-          // headers must be repositioned in the DOM
-          var closestHeader = refToHeader(itemRef);
-          if (lastRef) {
-            refToHeader(lastRef).insertBefore(closestHeader);
-          }
-          closestHeader.show();
-          lastRef = itemRef;
+        $.each(results, function (index, result) {
+          var header = $('.tocify-item[data-unique=' + result.ref + ']').closest('.tocify-header');
+          if (header.length > 0) header = header[0];
+          if (header) $("#" + header.id + " li a").append("<span>" + result.score + "</span>");
         });
-
-        // position first element. it wasn't positioned above if len > 1
-        if (results.length > 1) {
-          var firstRef = results[0].ref;
-          var secondRef = results[1].ref;
-          refToHeader(firstRef).insertBefore(refToHeader(secondRef));
-        }
-
         highlight.call(this);
       } else {
-        sections.show();
-        searchInfo.text('No Results Found for "' + this.value + '"').show();
+        searchResults.text('No Results Found for "' + this.value + '"').show();
       }
-    } else {
-      sections.show();
     }
-
-    // HACK trigger tocify height recalculation
-    $global.triggerHandler('scroll.tocify');
-    $global.triggerHandler('resize');
-  }
-
-  function active() {
-    search.call(this, {});
   }
 
   function inactive() {
     unhighlight();
-    searchInfo.hide();
+    searchResults.removeClass('visible');
   }
 
   function highlight() {

source/javascripts/app/toc.js

@@ -15,7 +15,7 @@
       hideEffectSpeed: 180,
       ignoreSelector: '.toc-ignore',
       highlightOffset: 60,
-      scrollTo: -2,
+      scrollTo: -1,
       scrollHistory: true,
       hashGenerator: function (text, element) {
         return element.prop('id');

source/layouts/layout.erb

@@ -64,7 +64,7 @@ under the License.
         <div class="search">
           <input type="text" class="search" id="input-search">
         </div>
-        <div class="search-info"></div>
+        <div class="search-results"></div>
       <% end %>
       <div id="toc">
       </div>

source/stylesheets/screen.css.scss

@@ -41,6 +41,13 @@ html, body {
 // TABLE OF CONTENTS
 ////////////////////////////////////////////////////////////////////////////////
 
+#toc > ul > li > a > span {
+  float: right;
+  background-color: #2484FF;
+  border-radius: 40px;
+  width: 20px;
+}
+
 .tocify-wrapper {
   @include transition(left ease-in-out 0.3s);
   overflow-y: auto;
@@ -98,7 +105,7 @@ html, body {
     margin-top: $logo-margin;
   }
 
-  .search-info {
+  .search-results {
     margin-top: 0;
     padding: 1em $nav-padding;
     font-size: 0.9em;
@@ -303,8 +310,6 @@ html, body {
   position: relative;
   z-index: 30;
 
-  &, section {
-    padding-bottom: 6em;
   &:after {
     content: '';
     display: block;
@@ -337,17 +342,16 @@ html, body {
     padding-bottom: 0.5em;
     border-bottom: 1px solid #ccc;
     margin-bottom: $h1-margin-bottom;
-      margin-top: 0;
+    margin-top: 2em;
     border-top: 1px solid #ddd;
     @include background-image(
       linear-gradient(top, #fff, #f9f9f9)
     );
   }
 
-    &:first-child {
   h1:first-child, div:first-child + h1 {
     border-top-width: 0;
-      }
+    margin-top: 0;
   }
 
   h2 {
@@ -482,7 +486,6 @@ html, body {
   aside.success:before {
     @extend %icon-ok-sign;
   }
-  }
 
   .search-highlight {
     padding: 2px;