Skip to content

N
node-slate
Commit 324da17b authored by Robert Lord's avatar Robert Lord
Browse files
Options

Fix bugs with toc not highlighting, begin search overhaul

parent 719061a6
Hide whitespace changes
Inline Side-by-side
Showing with 168 additions and 217 deletions
source/javascripts/app/search.js
View file @ 324da17b
(function (global) { (function (global) {
var $global = $(global); var $global = $(global);
var content, darkBox, searchInfo; var content, darkBox, searchResults;
var highlightOpts = { element: 'span', className: 'search-highlight' }; var highlightOpts = { element: 'span', className: 'search-highlight' };
var index = new lunr.Index(); var index = new lunr.Index();
...@@ -18,11 +18,6 @@ ...@@ -18,11 +18,6 @@
$('h1').each(function() { $('h1').each(function() {
var title = $(this); var title = $(this);
var body = title.nextUntil('h1'); var body = title.nextUntil('h1');
var wrapper = $('<section id="section-' + title.prop('id') + '"></section>');
title.after(wrapper.append(body));
wrapper.prepend(title);
index.add({ index.add({
id: title.prop('id'), id: title.prop('id'),
title: title.text(), title: title.text(),
...@@ -34,89 +29,42 @@ ...@@ -34,89 +29,42 @@
function bind() { function bind() {
content = $('.content'); content = $('.content');
darkBox = $('.dark-box'); 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) { function search(event) {
var sections = $('section, #toc .tocify-header');
searchInfo.hide();
unhighlight(); unhighlight();
searchResults.addClass('visible');
// ESC clears the field // ESC clears the field
if (event.keyCode === 27) this.value = ''; if (event.keyCode === 27) this.value = '';
if (this.value) { if (this.value) {
sections.hide();
// results are sorted by score in descending order
var results = index.search(this.value); var results = index.search(this.value);
if (results.length) { 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); highlight.call(this);
} else { } 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() { function inactive() {
unhighlight(); unhighlight();
searchInfo.hide(); searchResults.removeClass('visible');
} }
function highlight() { function highlight() {
......
source/javascripts/app/toc.js
View file @ 324da17b
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
hideEffectSpeed: 180, hideEffectSpeed: 180,
ignoreSelector: '.toc-ignore', ignoreSelector: '.toc-ignore',
highlightOffset: 60, highlightOffset: 60,
scrollTo: -2, scrollTo: -1,
scrollHistory: true, scrollHistory: true,
hashGenerator: function (text, element) { hashGenerator: function (text, element) {
return element.prop('id'); return element.prop('id');
......
source/layouts/layout.erb
View file @ 324da17b
...@@ -64,7 +64,7 @@ under the License. ...@@ -64,7 +64,7 @@ under the License.
<div class="search"> <div class="search">
<input type="text" class="search" id="input-search"> <input type="text" class="search" id="input-search">
</div> </div>
<div class="search-info"></div> <div class="search-results"></div>
<% end %> <% end %>
<div id="toc"> <div id="toc">
</div> </div>
......
source/stylesheets/screen.css.scss
View file @ 324da17b
...@@ -41,6 +41,13 @@ html, body { ...@@ -41,6 +41,13 @@ html, body {
// TABLE OF CONTENTS // TABLE OF CONTENTS
//////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////
#toc > ul > li > a > span {
float: right;
background-color: #2484FF;
border-radius: 40px;
width: 20px;
}
.tocify-wrapper { .tocify-wrapper {
@include transition(left ease-in-out 0.3s); @include transition(left ease-in-out 0.3s);
overflow-y: auto; overflow-y: auto;
...@@ -98,7 +105,7 @@ html, body { ...@@ -98,7 +105,7 @@ html, body {
margin-top: $logo-margin; margin-top: $logo-margin;
} }
.search-info { .search-results {
margin-top: 0; margin-top: 0;
padding: 1em $nav-padding; padding: 1em $nav-padding;
font-size: 0.9em; font-size: 0.9em;
...@@ -303,187 +310,183 @@ html, body { ...@@ -303,187 +310,183 @@ html, body {
position: relative; position: relative;
z-index: 30; 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 { &>h1, &>h2, &>h3, &>h4, &>h5, &>h6, &>p, &>table, &>ul, &>ol, &>aside, &>dl {
margin-right: $examples-width; margin-right: $examples-width;
padding: 0 $main-padding; padding: 0 $main-padding;
@include box-sizing(border-box); @include box-sizing(border-box);
display: block; display: block;
@include text-shadow($main-embossed-text-shadow); @include text-shadow($main-embossed-text-shadow);
@extend %left-col; @extend %left-col;
} }
&>ul, &>ol { &>ul, &>ol {
padding-left: $main-padding + 15px; padding-left: $main-padding + 15px;
} }
// the div is the tocify hidden div for placeholding stuff // the div is the tocify hidden div for placeholding stuff
&>h1, &>h2, &>div { &>h1, &>h2, &>div {
clear:both; clear:both;
} }
h1 { h1 {
@extend %header-font; @extend %header-font;
font-size: 30px; font-size: 30px;
padding-top: 0.5em; padding-top: 0.5em;
padding-bottom: 0.5em; padding-bottom: 0.5em;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
margin-bottom: $h1-margin-bottom; margin-bottom: $h1-margin-bottom;
margin-top: 0; margin-top: 2em;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
@include background-image( @include background-image(
linear-gradient(top, #fff, #f9f9f9) linear-gradient(top, #fff, #f9f9f9)
); );
} }
&:first-child { h1:first-child, div:first-child + h1 {
h1:first-child, div:first-child + h1 { border-top-width: 0;
border-top-width: 0; margin-top: 0;
} }
}
h2 { h2 {
@extend %header-font; @extend %header-font;
font-size: 20px; font-size: 20px;
margin-top: 4em; margin-top: 4em;
margin-bottom: 0; margin-bottom: 0;
border-top: 1px solid #ccc; border-top: 1px solid #ccc;
padding-top: 1.2em; padding-top: 1.2em;
padding-bottom: 1.2em; padding-bottom: 1.2em;
@include background-image( @include background-image(
linear-gradient(top, rgba(#fff,0.4), rgba(#fff, 0)) linear-gradient(top, rgba(#fff,0.4), rgba(#fff, 0))
); );
} }
// h2s right after h1s should bump right up // h2s right after h1s should bump right up
// against the h1s. // against the h1s.
h1 + h2, h1 + div + h2 { h1 + h2, h1 + div + h2 {
margin-top: $h1-margin-bottom * -1; margin-top: $h1-margin-bottom * -1;
border-top: none; border-top: none;
} }
h3, h4, h5, h6 { h3, h4, h5, h6 {
@extend %header-font; @extend %header-font;
font-size: 12px; font-size: 12px;
margin-top: 2.5em; margin-top: 2.5em;
margin-bottom: 0.8em; margin-bottom: 0.8em;
text-transform: uppercase; text-transform: uppercase;
} }
h4, h5, h6 { h4, h5, h6 {
font-size: 10px; font-size: 10px;
} }
hr { hr {
margin: 2em 0; margin: 2em 0;
border-top: 2px solid $examples-bg; border-top: 2px solid $examples-bg;
border-bottom: 2px solid $main-bg; border-bottom: 2px solid $main-bg;
} }
table { table {
margin-bottom: 1em; margin-bottom: 1em;
overflow: auto; overflow: auto;
th,td { th,td {
text-align: left; text-align: left;
vertical-align: top; vertical-align: top;
line-height: 1.6; line-height: 1.6;
}
th {
padding: 5px 10px;
border-bottom: 1px solid #ccc;
vertical-align: bottom;
}
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 { th {
font-weight: bold; padding: 5px 10px;
border-bottom: 1px solid #ccc;
vertical-align: bottom;
} }
dd { td {
margin-left: 15px; padding: 10px;
} }
p, li, dt, dd { tr:last-child {
line-height: 1.6; border-bottom: 1px solid #ccc;
margin-top: 0;
} }
img { tr:nth-child(odd)>td {
max-width: 100%; background-color: lighten($main-bg,4.2%);
} }
code { tr:nth-child(even)>td {
background-color: rgba(0,0,0,0.05); background-color: lighten($main-bg,2.4%);
padding: 3px;
border-radius: 3px;
@extend %break-words;
@extend %code-font;
} }
}
aside { dt {
padding-top: 1em; font-weight: bold;
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 { dd {
background-color: $aside-warning-bg; margin-left: 15px;
text-shadow: 0 1px 0 lighten($aside-warning-bg, 15%); }
}
&.success { p, li, dt, dd {
background-color: $aside-success-bg; line-height: 1.6;
text-shadow: 0 1px 0 lighten($aside-success-bg, 15%); margin-top: 0;
} }
}
aside:before { img {
vertical-align: middle; max-width: 100%;
padding-right: 0.5em; }
font-size: 14px;
}
aside.notice:before { code {
@extend %icon-info-sign; 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;
aside.warning:before { &.warning {
@extend %icon-exclamation-sign; background-color: $aside-warning-bg;
text-shadow: 0 1px 0 lighten($aside-warning-bg, 15%);
} }
aside.success:before { &.success {
@extend %icon-ok-sign; 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 { .search-highlight {
padding: 2px; padding: 2px;
margin: -2px; margin: -2px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment