diff options
Diffstat (limited to 'assets/js/search.js')
-rw-r--r-- | assets/js/search.js | 94 |
1 files changed, 55 insertions, 39 deletions
diff --git a/assets/js/search.js b/assets/js/search.js index 2dd397a..2dc147e 100644 --- a/assets/js/search.js +++ b/assets/js/search.js @@ -12,54 +12,70 @@ let fuseOptions = { ], } -function getUrlParameter(name) { - const urlParams = new URLSearchParams(location.search) +function getUrlParameter(url, name) { + const urlParams = new URLSearchParams(url) return urlParams.get(name) } -let searchQuery = getUrlParameter("q") -if (searchQuery) { - document.getElementById("search-query").value = searchQuery - executeSearch(searchQuery) -} else { - document.getElementById("search-results").innerHTML = "" +function search(query, data){ + let fuse = new Fuse(data, fuseOptions) + return fuse.search(query) } +function unescapeText(input) { + // Lifted from https://stackoverflow.com/posts/3700369/revisions + var elem = document.createElement("textarea") + elem.innerHTML = input + return elem.value +} + +function resultEntry(data, key) { + // Pull template from hugo template definition + let frag = document + .getElementById("search-result-template") + .content.cloneNode(true) + + // Replace values + let { title, permalink, contents, date } = data + frag.querySelector(".search_summary").setAttribute("id", "summary-" + key) + frag.querySelector(".search_link").setAttribute("href", permalink) + frag.querySelector(".search_title").textContent = title + frag.querySelector(".search_snippet").textContent = unescapeText(contents) + frag.querySelector(".search_time").textContent = date + return frag +} + + function executeSearch(searchQuery) { // Look for "index.json" in the same directory where this script is called. - fetch("index.json") + return fetch("index.json") .then((response) => response.json()) - .then(function (data) { - let fuse = new Fuse(data, fuseOptions) - let result = fuse.search(searchQuery) - // console.log("Results: ", result) - if (result.length > 0) { - populateResults(result) - } else { - document.getElementById("search-results").innerHTML = - "<p class=\"bg-washed-red pa3 dark-red f4 fw6 tc br2 b--light-red ba\">No matches found</p>" - } - }) + .then((data) => search(searchQuery, data)) } -function populateResults(result) { - result.forEach(function (value, key) { - // Lifted from https://stackoverflow.com/posts/3700369/revisions - var elem = document.createElement("textarea") - elem.innerHTML = value.item.contents - var decoded = elem.value +function renderResults(results) { + let resultBox = document.getElementById("search-results") + resultBox.innerHTML = "" + + // console.log("Results: ", results) + if (results.length > 0) { + results.forEach((value, key) => { + resultBox.appendChild(resultEntry(value.item, key)) + }) + } else { + resultBox.innerHTML = + "<p class=\"bg-washed-red pa3 dark-red f4 fw6 tc br2 b--light-red ba\">No matches found</p>" + } +} - // Pull template from hugo template definition - let frag = document - .getElementById("search-result-template") - .content.cloneNode(true) - // Replace values - frag.querySelector(".search_summary").setAttribute("id", "summary-" + key) - frag.querySelector(".search_link") - .setAttribute("href", value.item.permalink) - frag.querySelector(".search_title").textContent = value.item.title - frag.querySelector(".search_snippet").textContent = decoded - frag.querySelector(".search_time").textContent = value.item.date - document.getElementById("search-results").appendChild(frag) - }) +addEventListener("load", function (){ + let searchQuery = getUrlParameter(location.search, "q") + if (searchQuery) { + document.getElementById("search-query").value = searchQuery + executeSearch(searchQuery).then(renderResults) + } else { + document.getElementById("search-results").innerHTML = + "<p class=\"pa3 f4 fw6 tc\">Please enter a word or phrase above</p>" + } } +) |