reese/add-search #1
@@ -36,6 +36,47 @@ var Search = (function() {
|
|||||||
'Enter image prompt'
|
'Enter image prompt'
|
||||||
];
|
];
|
||||||
|
|
||||||
|
function assignAnchors() {
|
||||||
|
var defCards = document.querySelectorAll('.def-card');
|
||||||
|
defCards.forEach(function(card) {
|
||||||
|
var h3 = card.querySelector('h3');
|
||||||
|
if (h3) {
|
||||||
|
var id = slugify(h3.textContent.trim());
|
||||||
|
if (id) card.setAttribute('id', id);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var tables = document.querySelectorAll('.glossary-table tbody tr');
|
||||||
|
tables.forEach(function(row) {
|
||||||
|
var firstTd = row.querySelector('td');
|
||||||
|
if (firstTd) {
|
||||||
|
var id = slugify(firstTd.textContent.trim());
|
||||||
|
if (id) row.setAttribute('id', id);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var useGrid = document.querySelector('.use-grid');
|
||||||
|
if (useGrid) {
|
||||||
|
var useCards = useGrid.querySelectorAll('.use-card');
|
||||||
|
useCards.forEach(function(card) {
|
||||||
|
var h3 = card.querySelector('h3');
|
||||||
|
if (h3) {
|
||||||
|
var id = slugify(h3.textContent.trim());
|
||||||
|
if (id) card.setAttribute('id', id);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var promptBlocks = document.querySelectorAll('.prompt-block');
|
||||||
|
promptBlocks.forEach(function(block) {
|
||||||
|
var h3 = block.querySelector('h3');
|
||||||
|
if (h3) {
|
||||||
|
var id = slugify(h3.textContent.trim());
|
||||||
|
if (id) block.setAttribute('id', id);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
function init() {
|
function init() {
|
||||||
var navInner = document.querySelector('.nav-inner');
|
var navInner = document.querySelector('.nav-inner');
|
||||||
if (!navInner) return;
|
if (!navInner) return;
|
||||||
@@ -43,6 +84,8 @@ var Search = (function() {
|
|||||||
var brand = navInner.querySelector('.nav-brand');
|
var brand = navInner.querySelector('.nav-brand');
|
||||||
if (!brand) return;
|
if (!brand) return;
|
||||||
|
|
||||||
|
assignAnchors();
|
||||||
|
|
||||||
// Create search wrapper
|
// Create search wrapper
|
||||||
var searchWrapper = document.createElement('div');
|
var searchWrapper = document.createElement('div');
|
||||||
searchWrapper.className = 'sidebar-search';
|
searchWrapper.className = 'sidebar-search';
|
||||||
@@ -175,7 +218,8 @@ var Search = (function() {
|
|||||||
heading: headingText,
|
heading: headingText,
|
||||||
category: catText,
|
category: catText,
|
||||||
snippet: defText,
|
snippet: defText,
|
||||||
fullText: fullText.toLowerCase()
|
fullText: fullText.toLowerCase(),
|
||||||
|
anchor: slugify(headingText)
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -194,7 +238,8 @@ var Search = (function() {
|
|||||||
heading: acronym,
|
heading: acronym,
|
||||||
category: 'Acronym',
|
category: 'Acronym',
|
||||||
snippet: meaning,
|
snippet: meaning,
|
||||||
fullText: (acronym + ' ' + meaning).toLowerCase()
|
fullText: (acronym + ' ' + meaning).toLowerCase(),
|
||||||
|
anchor: slugify(acronym)
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -229,7 +274,8 @@ var Search = (function() {
|
|||||||
heading: headingText,
|
heading: headingText,
|
||||||
category: sectionName,
|
category: sectionName,
|
||||||
snippet: cardText,
|
snippet: cardText,
|
||||||
fullText: (sectionName + ' ' + headingText + ' ' + cardText).toLowerCase()
|
fullText: (sectionName + ' ' + headingText + ' ' + cardText).toLowerCase(),
|
||||||
|
anchor: slugify(headingText)
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@@ -251,7 +297,8 @@ var Search = (function() {
|
|||||||
heading: headingText,
|
heading: headingText,
|
||||||
category: 'Use Case',
|
category: 'Use Case',
|
||||||
snippet: cardText,
|
snippet: cardText,
|
||||||
fullText: (headingText + ' ' + cardText).toLowerCase()
|
fullText: (headingText + ' ' + cardText).toLowerCase(),
|
||||||
|
anchor: slugify(headingText)
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -275,7 +322,8 @@ var Search = (function() {
|
|||||||
heading: headingText,
|
heading: headingText,
|
||||||
category: labelText || 'Prompt',
|
category: labelText || 'Prompt',
|
||||||
snippet: cardText,
|
snippet: cardText,
|
||||||
fullText: (headingText + ' ' + labelText + ' ' + cardText).toLowerCase()
|
fullText: (headingText + ' ' + labelText + ' ' + cardText).toLowerCase(),
|
||||||
|
anchor: slugify(headingText)
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -301,7 +349,8 @@ var Search = (function() {
|
|||||||
heading: tds[0] ? tds[0].textContent.trim() : 'Table Entry',
|
heading: tds[0] ? tds[0].textContent.trim() : 'Table Entry',
|
||||||
category: 'Comparison',
|
category: 'Comparison',
|
||||||
snippet: rowText.trim(),
|
snippet: rowText.trim(),
|
||||||
fullText: rowText.toLowerCase()
|
fullText: rowText.toLowerCase(),
|
||||||
|
anchor: slugify(tds[0] ? tds[0].textContent.trim() : 'Table Entry')
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@@ -404,6 +453,14 @@ var Search = (function() {
|
|||||||
return div.innerHTML;
|
return div.innerHTML;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function slugify(text) {
|
||||||
|
return text
|
||||||
|
.toLowerCase()
|
||||||
|
.replace(/\(.*?\)/g, function(match) { return match.replace(/[()]/g, ''); })
|
||||||
|
.replace(/[^a-z0-9]+/g, '-')
|
||||||
|
.replace(/^-+|-+$/g, '');
|
||||||
|
}
|
||||||
|
|
||||||
function displayResults(foundResults, query) {
|
function displayResults(foundResults, query) {
|
||||||
results = foundResults;
|
results = foundResults;
|
||||||
selectedIndex = -1;
|
selectedIndex = -1;
|
||||||
@@ -424,7 +481,7 @@ var Search = (function() {
|
|||||||
var categoryLabel = r.category ? '<span class="search-result-category">' + escapeHTML(r.category) + '</span>' : '';
|
var categoryLabel = r.category ? '<span class="search-result-category">' + escapeHTML(r.category) + '</span>' : '';
|
||||||
var highlightedSnippet = highlightText(r.snippet, query);
|
var highlightedSnippet = highlightText(r.snippet, query);
|
||||||
|
|
||||||
html += '<div class="search-result-item" data-index="' + i + '" data-url="' + escapeHTML(r.url) + '">';
|
html += '<div class="search-result-item" data-index="' + i + '" data-url="' + escapeHTML(r.url) + '" data-anchor="' + escapeHTML(r.anchor || '') + '">';
|
||||||
html += '<div class="search-result-title">';
|
html += '<div class="search-result-title">';
|
||||||
html += '<span class="search-result-page">' + escapeHTML(r.page) + '</span>';
|
html += '<span class="search-result-page">' + escapeHTML(r.page) + '</span>';
|
||||||
html += categoryLabel;
|
html += categoryLabel;
|
||||||
@@ -441,7 +498,8 @@ var Search = (function() {
|
|||||||
for (var j = 0; j < items.length; j++) {
|
for (var j = 0; j < items.length; j++) {
|
||||||
items[j].addEventListener('click', function() {
|
items[j].addEventListener('click', function() {
|
||||||
var url = this.getAttribute('data-url');
|
var url = this.getAttribute('data-url');
|
||||||
navigateToResult({ url: url });
|
var anchor = this.getAttribute('data-anchor');
|
||||||
|
navigateToResult({ url: url, anchor: anchor });
|
||||||
});
|
});
|
||||||
items[j].addEventListener('mouseenter', function() {
|
items[j].addEventListener('mouseenter', function() {
|
||||||
var idx = parseInt(this.getAttribute('data-index'), 10);
|
var idx = parseInt(this.getAttribute('data-index'), 10);
|
||||||
@@ -495,7 +553,11 @@ var Search = (function() {
|
|||||||
function navigateToResult(result) {
|
function navigateToResult(result) {
|
||||||
hideDropdown();
|
hideDropdown();
|
||||||
if (currentInput) currentInput.blur();
|
if (currentInput) currentInput.blur();
|
||||||
window.location.href = result.url;
|
var target = result.url;
|
||||||
|
if (result.anchor) {
|
||||||
|
target = result.url + '#' + result.anchor;
|
||||||
|
}
|
||||||
|
window.location.href = target;
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
|||||||
Reference in New Issue
Block a user