Skip to content
Snippets Groups Projects
Commit 16628f2b authored by Silvio Giebl's avatar Silvio Giebl
Browse files

Improved search responsiveness for many results

parent 0421ab7f
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
assets/js/just-the-docs.js
+ 155
− 136
View file @ 16628f2b
...@@ -118,6 +118,7 @@ function searchLoaded(index, docs) { ...@@ -118,6 +118,7 @@ function searchLoaded(index, docs) {
var searchResults = document.getElementById('search-results'); var searchResults = document.getElementById('search-results');
var mainHeader = document.getElementById('main-header'); var mainHeader = document.getElementById('main-header');
var currentInput; var currentInput;
var currentSearchIndex = 0;
function showSearch() { function showSearch() {
document.documentElement.classList.add('search-active'); document.documentElement.classList.add('search-active');
...@@ -128,6 +129,8 @@ function searchLoaded(index, docs) { ...@@ -128,6 +129,8 @@ function searchLoaded(index, docs) {
} }
function update() { function update() {
currentSearchIndex++;
var input = searchInput.value; var input = searchInput.value;
if (input === '') { if (input === '') {
hideSearch(); hideSearch();
...@@ -180,161 +183,177 @@ function searchLoaded(index, docs) { ...@@ -180,161 +183,177 @@ function searchLoaded(index, docs) {
resultsList.classList.add('search-results-list'); resultsList.classList.add('search-results-list');
searchResults.appendChild(resultsList); searchResults.appendChild(resultsList);
for (var i in results) { addResults(resultsList, results, 0, 10, 100, currentSearchIndex);
var result = results[i]; }
var doc = docs[result.ref];
function addResults(resultsList, results, start, batchSize, batchMillis, searchIndex) {
var resultsListItem = document.createElement('li'); if (searchIndex != currentSearchIndex) {
resultsListItem.classList.add('search-results-list-item'); return;
resultsList.appendChild(resultsListItem); }
for (var i = start; i < (start + batchSize); i++) {
var resultLink = document.createElement('a'); if (i == results.length) {
resultLink.classList.add('search-result'); return;
resultLink.setAttribute('href', doc.url);
resultsListItem.appendChild(resultLink);
var resultTitle = document.createElement('div');
resultTitle.classList.add('search-result-title');
resultLink.appendChild(resultTitle);
var resultDoc = document.createElement('div');
resultDoc.classList.add('search-result-doc');
resultDoc.innerHTML = '<svg viewBox="0 0 24 24" class="search-result-icon"><use xlink:href="#svg-doc"></use></svg>';
resultTitle.appendChild(resultDoc);
var resultDocTitle = document.createElement('div');
resultDocTitle.classList.add('search-result-doc-title');
resultDocTitle.innerHTML = doc.doc;
resultDoc.appendChild(resultDocTitle);
var resultDocOrSection = resultDocTitle;
if (doc.doc != doc.title) {
resultDoc.classList.add('search-result-doc-parent');
var resultSection = document.createElement('div');
resultSection.classList.add('search-result-section');
resultSection.innerHTML = doc.title;
resultTitle.appendChild(resultSection);
resultDocOrSection = resultSection;
} }
addResult(resultsList, results[i]);
}
setTimeout(function() {
addResults(resultsList, results, start + batchSize, batchSize, batchMillis, searchIndex);
}, batchMillis);
}
var metadata = result.matchData.metadata; function addResult(resultsList, result) {
var titlePositions = []; var doc = docs[result.ref];
var contentPositions = [];
for (var j in metadata) { var resultsListItem = document.createElement('li');
var meta = metadata[j]; resultsListItem.classList.add('search-results-list-item');
if (meta.title) { resultsList.appendChild(resultsListItem);
var positions = meta.title.position;
for (var k in positions) { var resultLink = document.createElement('a');
titlePositions.push(positions[k]); resultLink.classList.add('search-result');
} resultLink.setAttribute('href', doc.url);
resultsListItem.appendChild(resultLink);
var resultTitle = document.createElement('div');
resultTitle.classList.add('search-result-title');
resultLink.appendChild(resultTitle);
var resultDoc = document.createElement('div');
resultDoc.classList.add('search-result-doc');
resultDoc.innerHTML = '<svg viewBox="0 0 24 24" class="search-result-icon"><use xlink:href="#svg-doc"></use></svg>';
resultTitle.appendChild(resultDoc);
var resultDocTitle = document.createElement('div');
resultDocTitle.classList.add('search-result-doc-title');
resultDocTitle.innerHTML = doc.doc;
resultDoc.appendChild(resultDocTitle);
var resultDocOrSection = resultDocTitle;
if (doc.doc != doc.title) {
resultDoc.classList.add('search-result-doc-parent');
var resultSection = document.createElement('div');
resultSection.classList.add('search-result-section');
resultSection.innerHTML = doc.title;
resultTitle.appendChild(resultSection);
resultDocOrSection = resultSection;
}
var metadata = result.matchData.metadata;
var titlePositions = [];
var contentPositions = [];
for (var j in metadata) {
var meta = metadata[j];
if (meta.title) {
var positions = meta.title.position;
for (var k in positions) {
titlePositions.push(positions[k]);
} }
if (meta.content) { }
var positions = meta.content.position; if (meta.content) {
for (var k in positions) { var positions = meta.content.position;
var position = positions[k]; for (var k in positions) {
var previewStart = position[0]; var position = positions[k];
var previewEnd = position[0] + position[1]; var previewStart = position[0];
var ellipsesBefore = true; var previewEnd = position[0] + position[1];
var ellipsesAfter = true; var ellipsesBefore = true;
for (var k = 0; k < {{ site.search.preview_words_before | default: 5 }}; k++) { var ellipsesAfter = true;
var nextSpace = doc.content.lastIndexOf(' ', previewStart - 2); for (var k = 0; k < {{ site.search.preview_words_before | default: 5 }}; k++) {
var nextDot = doc.content.lastIndexOf('. ', previewStart - 2); var nextSpace = doc.content.lastIndexOf(' ', previewStart - 2);
if ((nextDot >= 0) && (nextDot > nextSpace)) { var nextDot = doc.content.lastIndexOf('. ', previewStart - 2);
previewStart = nextDot + 1; if ((nextDot >= 0) && (nextDot > nextSpace)) {
ellipsesBefore = false; previewStart = nextDot + 1;
break; ellipsesBefore = false;
} break;
if (nextSpace < 0) { }
previewStart = 0; if (nextSpace < 0) {
ellipsesBefore = false; previewStart = 0;
break; ellipsesBefore = false;
} break;
previewStart = nextSpace + 1; }
previewStart = nextSpace + 1;
}
for (var k = 0; k < {{ site.search.preview_words_after | default: 10 }}; k++) {
var nextSpace = doc.content.indexOf(' ', previewEnd + 1);
var nextDot = doc.content.indexOf('. ', previewEnd + 1);
if ((nextDot >= 0) && (nextDot < nextSpace)) {
previewEnd = nextDot;
ellipsesAfter = false;
break;
} }
for (var k = 0; k < {{ site.search.preview_words_after | default: 10 }}; k++) { if (nextSpace < 0) {
var nextSpace = doc.content.indexOf(' ', previewEnd + 1); previewEnd = doc.content.length;
var nextDot = doc.content.indexOf('. ', previewEnd + 1); ellipsesAfter = false;
if ((nextDot >= 0) && (nextDot < nextSpace)) { break;
previewEnd = nextDot;
ellipsesAfter = false;
break;
}
if (nextSpace < 0) {
previewEnd = doc.content.length;
ellipsesAfter = false;
break;
}
previewEnd = nextSpace;
} }
contentPositions.push({ previewEnd = nextSpace;
highlight: position,
previewStart: previewStart, previewEnd: previewEnd,
ellipsesBefore: ellipsesBefore, ellipsesAfter: ellipsesAfter
});
} }
contentPositions.push({
highlight: position,
previewStart: previewStart, previewEnd: previewEnd,
ellipsesBefore: ellipsesBefore, ellipsesAfter: ellipsesAfter
});
} }
} }
}
if (titlePositions.length > 0) { if (titlePositions.length > 0) {
titlePositions.sort(function(p1, p2){ return p1[0] - p2[0] }); titlePositions.sort(function(p1, p2){ return p1[0] - p2[0] });
resultDocOrSection.innerHTML = ''; resultDocOrSection.innerHTML = '';
addHighlightedText(resultDocOrSection, doc.title, 0, doc.title.length, titlePositions); addHighlightedText(resultDocOrSection, doc.title, 0, doc.title.length, titlePositions);
} }
if (contentPositions.length > 0) { if (contentPositions.length > 0) {
contentPositions.sort(function(p1, p2){ return p1.highlight[0] - p2.highlight[0] }); contentPositions.sort(function(p1, p2){ return p1.highlight[0] - p2.highlight[0] });
var contentPosition = contentPositions[0]; var contentPosition = contentPositions[0];
var previewPosition = { var previewPosition = {
highlight: [contentPosition.highlight], highlight: [contentPosition.highlight],
previewStart: contentPosition.previewStart, previewEnd: contentPosition.previewEnd, previewStart: contentPosition.previewStart, previewEnd: contentPosition.previewEnd,
ellipsesBefore: contentPosition.ellipsesBefore, ellipsesAfter: contentPosition.ellipsesAfter ellipsesBefore: contentPosition.ellipsesBefore, ellipsesAfter: contentPosition.ellipsesAfter
}; };
var previewPositions = [previewPosition]; var previewPositions = [previewPosition];
for (var j = 1; j < contentPositions.length; j++) { for (var j = 1; j < contentPositions.length; j++) {
contentPosition = contentPositions[j]; contentPosition = contentPositions[j];
if (previewPosition.previewEnd < contentPosition.previewStart) { if (previewPosition.previewEnd < contentPosition.previewStart) {
previewPosition = { previewPosition = {
highlight: [contentPosition.highlight], highlight: [contentPosition.highlight],
previewStart: contentPosition.previewStart, previewEnd: contentPosition.previewEnd, previewStart: contentPosition.previewStart, previewEnd: contentPosition.previewEnd,
ellipsesBefore: contentPosition.ellipsesBefore, ellipsesAfter: contentPosition.ellipsesAfter ellipsesBefore: contentPosition.ellipsesBefore, ellipsesAfter: contentPosition.ellipsesAfter
}
previewPositions.push(previewPosition);
} else {
previewPosition.highlight.push(contentPosition.highlight);
previewPosition.previewEnd = contentPosition.previewEnd;
previewPosition.ellipsesAfter = contentPosition.ellipsesAfter;
} }
previewPositions.push(previewPosition);
} else {
previewPosition.highlight.push(contentPosition.highlight);
previewPosition.previewEnd = contentPosition.previewEnd;
previewPosition.ellipsesAfter = contentPosition.ellipsesAfter;
} }
}
var resultPreviews = document.createElement('div'); var resultPreviews = document.createElement('div');
resultPreviews.classList.add('search-result-previews'); resultPreviews.classList.add('search-result-previews');
resultLink.appendChild(resultPreviews); resultLink.appendChild(resultPreviews);
var content = doc.content; var content = doc.content;
for (var j = 0; j < Math.min(previewPositions.length, {{ site.search.previews | default: 3 }}); j++) { for (var j = 0; j < Math.min(previewPositions.length, {{ site.search.previews | default: 3 }}); j++) {
var position = previewPositions[j]; var position = previewPositions[j];
var resultPreview = document.createElement('div'); var resultPreview = document.createElement('div');
resultPreview.classList.add('search-result-preview'); resultPreview.classList.add('search-result-preview');
resultPreviews.appendChild(resultPreview); resultPreviews.appendChild(resultPreview);
if (position.ellipsesBefore) { if (position.ellipsesBefore) {
resultPreview.appendChild(document.createTextNode('... ')); resultPreview.appendChild(document.createTextNode('... '));
} }
addHighlightedText(resultPreview, content, position.previewStart, position.previewEnd, position.highlight); addHighlightedText(resultPreview, content, position.previewStart, position.previewEnd, position.highlight);
if (position.ellipsesAfter) { if (position.ellipsesAfter) {
resultPreview.appendChild(document.createTextNode(' ...')); resultPreview.appendChild(document.createTextNode(' ...'));
}
} }
} }
{%- if site.search.rel_url != false %}
var resultRelUrl = document.createElement('span');
resultRelUrl.classList.add('search-result-rel-url');
resultRelUrl.innerText = doc.relUrl;
resultTitle.appendChild(resultRelUrl);
{%- endif %}
} }
{%- if site.search.rel_url != false %}
var resultRelUrl = document.createElement('span');
resultRelUrl.classList.add('search-result-rel-url');
resultRelUrl.innerText = doc.relUrl;
resultTitle.appendChild(resultRelUrl);
{%- endif %}
} }
function addHighlightedText(parent, text, start, end, positions) { function addHighlightedText(parent, text, start, end, positions) {
......
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