durfdoen-2.0/content/search.html.erb
2020-09-14 22:10:54 +02:00

132 lines
4 KiB
Text

<div class="search">
<div class="search__main">
<form id="search_form">
<label>Wat zoek je? <input type="text"></label>
<button type="submit">Zoek!</button>
</form>
</div>
<div id="search_wrapper" class="search__result"></div>
</div>
<script src="https://unpkg.com/lunr/lunr.js"></script>
<script>
function clearDiv(element) {
while (element.lastElementChild) {
element.removeChild(element.lastElementChild);
}
}
function myFunction(event) {
doSearch(event.target[0].value);
event.preventDefault();
}
const wrapper = document.getElementById("search_wrapper");
const form = document.getElementById('search_form');
form.addEventListener('submit', myFunction);
var doSearch = (e) => {};
function parseUrlParams () {
const url = window.location.search;
if(!url) return {};
const paramsBuilder = {};
for(let currentVar of url.substring(1).split("&")) {
var pair = currentVar.split('=');
paramsBuilder[pair[0]] = decodeURIComponent(pair[1]);
}
return paramsBuilder;
};
function resetFromUrl() {
const urlParams = parseUrlParams();
if(urlParams["q"]) {
doSearch(urlParams["q"]);
form[0].value = urlParams["q"];
} else {
form[0].value = "";
clearDiv(wrapper);
}
}
function ready() {
Array.prototype.stableSort = function(cmp) {
cmp = !!cmp ? cmp : (a, b) => {
if (a < b) return -1;
if (a > b) return 1;
return 0;
};
let stabilizedThis = this.map((el, index) => [el, index]);
let stableCmp = (a, b) => {
let order = cmp(a[0], b[0]);
if (order != 0) return order;
return a[1] - b[1];
}
stabilizedThis.sort(stableCmp);
for (let i=0; i<this.length; i++) {
this[i] = stabilizedThis[i][0];
}
return this;
}
Array.prototype.sortByKey = function(key) {
return this.sort(function(a, b) {
var x = key(a); var y = key(b);
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
});
}
function render_results(div, partials) {
const create_wrapper= document.createElement('div');
for(let partial of partials) {
const html = `<div class="link" onclick="window.location.href = '${partial.url}'">
<div class="link__img">
<img src="https://dsa.ugent.be/api/verenigingen/${partial.abbrev}/logo?size=small" alt="${partial.titel}">
</div>
<div class="link__content">
<h3 class="link__title">
${partial.titel} (${partial.kind})
</h3>
<p class="link__text">
${partial.text}
</p>
</div>
</div>`;
if(html) {
create_wrapper.innerHTML = html;
div.appendChild(create_wrapper.firstChild);
}
}
}
const documents = <%= CreateFullTextIndex.new(@items.find_all("**/verenigingen/*") + @items.find_all("**/konventen/*")).call.to_json %>;
const partials = <%= Hash[(partial_konventen + partial_verenigingen).map { |x| [x[:url], x] }].to_json %>;
const index = lunr(function () {
this.field('id', {boost: 15});
this.field('title', {boost: 10});
this.field('verkort', {boost: 8});
this.field('konvent', {boost: 3});
this.field('body');
this.ref('url');
documents.forEach(function(i) { this.add(i); }, this);
});
doSearch = (query) => {
clearDiv(wrapper);
render_results(wrapper, index.search(query).sortByKey(i => partials[i.ref].titel).stableSort((a, b) => b.score - a.score).map(i => partials[i.ref]));
window.history.pushState("search state", "", window.location.pathname + "?q="+query);
};
resetFromUrl();
}
document.addEventListener("DOMContentLoaded", ready);
window.addEventListener("popstate", resetFromUrl);
</script>