From 324da17ba324fb5b2ca34fd244079e3b5ba42ca4 Mon Sep 17 00:00:00 2001 From: Robert Lord Date: Wed, 2 Jul 2014 22:34:58 -0700 Subject: [PATCH] Fix bugs with toc not highlighting, begin search overhaul --- source/javascripts/app/search.js | 82 ++------ source/javascripts/app/toc.js | 2 +- source/layouts/layout.erb | 2 +- source/stylesheets/screen.css.scss | 327 +++++++++++++++-------------- 4 files changed, 182 insertions(+), 231 deletions(-) diff --git a/source/javascripts/app/search.js b/source/javascripts/app/search.js index 16cbce0..55c222f 100644 --- a/source/javascripts/app/search.js +++ b/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 = $('
'); - - 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); - } - - 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")); + $('#input-search').on('keyup', function(e) { + if ($(this).val() === "") { + inactive(e); + } else { + search(e); + } }); } 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("" + result.score + ""); }); - - // 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() { diff --git a/source/javascripts/app/toc.js b/source/javascripts/app/toc.js index 8946f87..779e37e 100644 --- a/source/javascripts/app/toc.js +++ b/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'); diff --git a/source/layouts/layout.erb b/source/layouts/layout.erb index 1e8f395..296aadd 100644 --- a/source/layouts/layout.erb +++ b/source/layouts/layout.erb @@ -64,7 +64,7 @@ under the License.
-
+
<% end %>
diff --git a/source/stylesheets/screen.css.scss b/source/stylesheets/screen.css.scss index 23873d7..a8eef52 100644 --- a/source/stylesheets/screen.css.scss +++ b/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 { - padding-bottom: 6em; - &:after { - content: ''; - display: block; - clear: both; + &:after { + content: ''; + 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 { - 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; + th { + padding: 5px 10px; border-bottom: 1px solid #ccc; - margin-bottom: $h1-margin-bottom; - margin-top: 0; - border-top: 1px solid #ddd; - @include background-image( - linear-gradient(top, #fff, #f9f9f9) - ); + vertical-align: bottom; } - &:first-child { - h1:first-child, div:first-child + h1 { - border-top-width: 0; - } + td { + padding: 10px; } - 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)) - ); + tr:last-child { + border-bottom: 1px solid #ccc; } - // 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; + tr:nth-child(odd)>td { + background-color: lighten($main-bg,4.2%); } - h3, h4, h5, h6 { - @extend %header-font; - font-size: 12px; - margin-top: 2.5em; - margin-bottom: 0.8em; - text-transform: uppercase; + 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%); } - h4, h5, h6 { - font-size: 10px; + &.success { + background-color: $aside-success-bg; + text-shadow: 0 1px 0 lighten($aside-success-bg, 15%); } + } - hr { - margin: 2em 0; - border-top: 2px solid $examples-bg; - border-bottom: 2px solid $main-bg; - } + aside:before { + vertical-align: middle; + padding-right: 0.5em; + font-size: 14px; + } - table { - margin-bottom: 1em; - overflow: auto; - th,td { - text-align: left; - vertical-align: top; - line-height: 1.6; - } + aside.notice:before { + @extend %icon-info-sign; + } - th { - padding: 5px 10px; - border-bottom: 1px solid #ccc; - vertical-align: bottom; - } + aside.warning:before { + @extend %icon-exclamation-sign; + } - td { - padding: 10px; - } - - 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; - } + aside.success:before { + @extend %icon-ok-sign; } .search-highlight {