mirror of
https://github.com/danbulant/api_docs
synced 2026-05-19 04:08:40 +00:00
Fix bugs with toc not highlighting, begin search overhaul
This commit is contained in:
Robert Lord
parent
719061a638
commit
324da17ba3
4 changed files with 182 additions and 231 deletions
|
|
@ -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);
|
||||
}
|
||||
|
||||
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("<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() {
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in a new issue