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')
+    $('#input-search').on('keyup', function(e) {
-      .on('keyup', search)
+      if ($(this).val() === "") {
-      .on('focus', active)
+        inactive(e);
-      .on('blur', inactive);
+      } 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();
+        $.each(results, function (index, result) {
-        var lastRef;
+          var header = $('.tocify-item[data-unique=' + result.ref + ']').closest('.tocify-header');
-        $.each(results, function (index, item) {
+          if (header.length > 0) header = header[0];
-          if (item.score <= 0.0001) return; // remove low-score results
+          if (header) $("#" + header.id + " li a").append("<span>" + result.score + "</span>");
-          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;
         });
-
-        // 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();
+        searchResults.text('No Results Found for "' + this.value + '"').show();
-        searchInfo.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,185 +310,181 @@ html, body {
   position: relative;
   z-index: 30;
 
-  &, section {
+  &:after {
-    padding-bottom: 6em;
+    content: '';
-    &:after {
+    display: block;
-      content: '';
+    clear: both;
-      display: block;
+  }
-      clear: both;
+
+  &>h1, &>h2, &>h3, &>h4, &>h5, &>h6, &>p, &>table, &>ul, &>ol, &>aside, &>dl {
+    margin-right: $examples-width;
+    padding: 0 $main-padding;
+    @include box-sizing(border-box);
+    display: block;
+    @include text-shadow($main-embossed-text-shadow);
+
+    @extend %left-col;
+  }
+
+  &>ul, &>ol {
+    padding-left: $main-padding + 15px;
+  }
+
+  // the div is the tocify hidden div for placeholding stuff
+  &>h1, &>h2, &>div {
+    clear:both;
+  }
+
+  h1 {
+    @extend %header-font;
+    font-size: 30px;
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+    border-bottom: 1px solid #ccc;
+    margin-bottom: $h1-margin-bottom;
+    margin-top: 2em;
+    border-top: 1px solid #ddd;
+    @include background-image(
+      linear-gradient(top, #fff, #f9f9f9)
+    );
+  }
+
+  h1:first-child, div:first-child + h1 {
+    border-top-width: 0;
+    margin-top: 0;
+  }
+
+  h2 {
+    @extend %header-font;
+    font-size: 20px;
+    margin-top: 4em;
+    margin-bottom: 0;
+    border-top: 1px solid #ccc;
+    padding-top: 1.2em;
+    padding-bottom: 1.2em;
+    @include background-image(
+      linear-gradient(top, rgba(#fff,0.4), rgba(#fff, 0))
+    );
+  }
+
+  // h2s right after h1s should bump right up
+  // against the h1s.
+  h1 + h2, h1 + div + h2 {
+    margin-top: $h1-margin-bottom * -1;
+    border-top: none;
+  }
+
+  h3, h4, h5, h6 {
+    @extend %header-font;
+    font-size: 12px;
+    margin-top: 2.5em;
+    margin-bottom: 0.8em;
+    text-transform: uppercase;
+  }
+
+  h4, h5, h6 {
+    font-size: 10px;
+  }
+
+  hr {
+    margin: 2em 0;
+    border-top: 2px solid $examples-bg;
+    border-bottom: 2px solid $main-bg;
+  }
+
+  table {
+    margin-bottom: 1em;
+    overflow: auto;
+    th,td {
+      text-align: left;
+      vertical-align: top;
+      line-height: 1.6;
     }
 
-    &>h1, &>h2, &>h3, &>h4, &>h5, &>h6, &>p, &>table, &>ul, &>ol, &>aside, &>dl {
+    th {
-      margin-right: $examples-width;
+      padding: 5px 10px;
-      padding: 0 $main-padding;
-      @include box-sizing(border-box);
-      display: block;
-      @include text-shadow($main-embossed-text-shadow);
-
-      @extend %left-col;
-    }
-
-    &>ul, &>ol {
-      padding-left: $main-padding + 15px;
-    }
-
-    // the div is the tocify hidden div for placeholding stuff
-    &>h1, &>h2, &>div {
-      clear:both;
-    }
-
-    h1 {
-      @extend %header-font;
-      font-size: 30px;
-      padding-top: 0.5em;
-      padding-bottom: 0.5em;
       border-bottom: 1px solid #ccc;
-      margin-bottom: $h1-margin-bottom;
+      vertical-align: bottom;
-      margin-top: 0;
-      border-top: 1px solid #ddd;
-      @include background-image(
-        linear-gradient(top, #fff, #f9f9f9)
-      );
     }
 
-    &:first-child {
+    td {
-      h1:first-child, div:first-child + h1 {
+      padding: 10px;
-        border-top-width: 0;
-      }
     }
 
-    h2 {
+    tr:last-child {
-      @extend %header-font;
+      border-bottom: 1px solid #ccc;
-      font-size: 20px;
-      margin-top: 4em;
-      margin-bottom: 0;
-      border-top: 1px solid #ccc;
-      padding-top: 1.2em;
-      padding-bottom: 1.2em;
-      @include background-image(
-        linear-gradient(top, rgba(#fff,0.4), rgba(#fff, 0))
-      );
     }
 
-    // h2s right after h1s should bump right up
+    tr:nth-child(odd)>td {
-    // against the h1s.
+      background-color: lighten($main-bg,4.2%);
-    h1 + h2, h1 + div + h2 {
-      margin-top: $h1-margin-bottom * -1;
-      border-top: none;
     }
 
-    h3, h4, h5, h6 {
+    tr:nth-child(even)>td {
-      @extend %header-font;
+      background-color: lighten($main-bg,2.4%);
-      font-size: 12px;
+    }
-      margin-top: 2.5em;
+  }
-      margin-bottom: 0.8em;
+
-      text-transform: uppercase;
+  dt {
+    font-weight: bold;
+  }
+
+  dd {
+    margin-left: 15px;
+  }
+
+  p, li, dt, dd {
+    line-height: 1.6;
+    margin-top: 0;
+  }
+
+  img {
+    max-width: 100%;
+  }
+
+  code {
+    background-color: rgba(0,0,0,0.05);
+    padding: 3px;
+    border-radius: 3px;
+    @extend %break-words;
+    @extend %code-font;
+  }
+
+  aside {
+    padding-top: 1em;
+    padding-bottom: 1em;
+    text-shadow: 0 1px 0 lighten($aside-notice-bg, 15%);
+    margin-top: 1.5em;
+    margin-bottom: 1.5em;
+    background: $aside-notice-bg;
+    line-height: 1.6;
+
+    &.warning {
+      background-color: $aside-warning-bg;
+      text-shadow: 0 1px 0 lighten($aside-warning-bg, 15%);
     }
 
-    h4, h5, h6 {
+    &.success {
-      font-size: 10px;
+      background-color: $aside-success-bg;
+      text-shadow: 0 1px 0 lighten($aside-success-bg, 15%);
     }
+  }
 
-    hr {
+  aside:before {
-      margin: 2em 0;
+    vertical-align: middle;
-      border-top: 2px solid $examples-bg;
+    padding-right: 0.5em;
-      border-bottom: 2px solid $main-bg;
+    font-size: 14px;
-    }
+  }
 
-    table {
+  aside.notice:before {
-      margin-bottom: 1em;
+    @extend %icon-info-sign;
-      overflow: auto;
+  }
-      th,td {
-        text-align: left;
-        vertical-align: top;
-        line-height: 1.6;
-      }
 
-      th {
+  aside.warning:before {
-        padding: 5px 10px;
+    @extend %icon-exclamation-sign;
-        border-bottom: 1px solid #ccc;
+  }
-        vertical-align: bottom;
-      }
 
-      td {
+  aside.success:before {
-        padding: 10px;
+    @extend %icon-ok-sign;
-      }
-
-      tr:last-child {
-        border-bottom: 1px solid #ccc;
-      }
-
-      tr:nth-child(odd)>td {
-        background-color: lighten($main-bg,4.2%);
-      }
-
-      tr:nth-child(even)>td {
-        background-color: lighten($main-bg,2.4%);
-      }
-    }
-
-    dt {
-      font-weight: bold;
-    }
-
-    dd {
-      margin-left: 15px;
-    }
-
-    p, li, dt, dd {
-      line-height: 1.6;
-      margin-top: 0;
-    }
-
-    img {
-      max-width: 100%;
-    }
-
-    code {
-      background-color: rgba(0,0,0,0.05);
-      padding: 3px;
-      border-radius: 3px;
-      @extend %break-words;
-      @extend %code-font;
-    }
-
-    aside {
-      padding-top: 1em;
-      padding-bottom: 1em;
-      text-shadow: 0 1px 0 lighten($aside-notice-bg, 15%);
-      margin-top: 1.5em;
-      margin-bottom: 1.5em;
-      background: $aside-notice-bg;
-      line-height: 1.6;
-
-      &.warning {
-        background-color: $aside-warning-bg;
-        text-shadow: 0 1px 0 lighten($aside-warning-bg, 15%);
-      }
-
-      &.success {
-        background-color: $aside-success-bg;
-        text-shadow: 0 1px 0 lighten($aside-success-bg, 15%);
-      }
-    }
-
-    aside:before {
-      vertical-align: middle;
-      padding-right: 0.5em;
-      font-size: 14px;
-    }
-
-    aside.notice:before {
-      @extend %icon-info-sign;
-    }
-
-    aside.warning:before {
-      @extend %icon-exclamation-sign;
-    }
-
-    aside.success:before {
-      @extend %icon-ok-sign;
-    }
   }
 
   .search-highlight {