7
1
mirror of https://gitlab.com/ansol/web-ansol.org.git synced 2024-11-21 22:01:31 +00:00

Fix search, barely

This commit is contained in:
Hugo Peixoto 2021-11-01 04:10:20 +00:00
parent e886ef3014
commit 48123e21b1
8 changed files with 702 additions and 824 deletions

View File

@ -50,11 +50,11 @@ function updateURL(url) {
// Pre-process new search query.
function initSearch(force, fuse) {
let query = $("#search-query").val();
let query = document.querySelector("#search-query").value;
// If query deleted, clear results.
if ( query.length < 1) {
$('#search-hits').empty();
if (query.length < 1) {
document.querySelector('#search-hits').innerHTML = "";
}
// Check for timer event (enter key not pressed) and query less than minimum length required.
@ -62,7 +62,7 @@ function initSearch(force, fuse) {
return;
// Do search.
$('#search-hits').empty();
document.querySelector('#search-hits').innerHTML = "";
searchAcademic(query, fuse);
let newURL = window.location.protocol + "//" + window.location.host + window.location.pathname + '?q=' + encodeURIComponent(query) + window.location.hash;
updateURL(newURL);
@ -74,16 +74,17 @@ function searchAcademic(query, fuse) {
// console.log({"results": results});
if (results.length > 0) {
$('#search-hits').append('<h3 class="mt-0">' + results.length + ' ' + i18n.results + '</h3>');
document.querySelector('#search-hits').insertAdjacentHTML('beforeend', '<h3 class="mt-0">' + results.length + ' ' + i18n.results + '</h3>');
parseResults(query, results);
} else {
$('#search-hits').append('<div class="search-no-results">' + i18n.no_results + '</div>');
document.querySelector('#search-hits').insertAdjacentHTML('beforeend', '<div class="search-no-results">' + i18n.no_results + '</div>');
}
}
// Parse search results.
function parseResults(query, results) {
$.each( results, function(key, value) {
console.log(results);
results.forEach(function (value, key) {
let content_key = value.item.section;
let content = "";
let snippet = "";
@ -99,7 +100,7 @@ function parseResults(query, results) {
if ( fuseOptions.tokenize ) {
snippetHighlights.push(query);
} else {
$.each( value.matches, function(matchKey, matchValue) {
value.matches.forEach(function(matchValue, matchKey) {
if (matchValue.key == "content") {
let start = (matchValue.indices[0][0]-summaryLength>0) ? matchValue.indices[0][0]-summaryLength : 0;
let end = (matchValue.indices[0][1]+summaryLength<content.length) ? matchValue.indices[0][1]+summaryLength : content.length;
@ -114,7 +115,7 @@ function parseResults(query, results) {
}
// Load template.
let template = $('#search-hit-fuse-template').html();
let template = document.querySelector('#search-hit-fuse-template').innerHTML;
// Localize content types.
if (content_key in content_type) {
@ -127,16 +128,15 @@ function parseResults(query, results) {
title: value.item.title,
type: content_key,
relpermalink: value.item.relpermalink,
snippet: snippet
snippet: snippet,
};
let output = render(template, templateData);
$('#search-hits').append(output);
document.querySelector('#search-hits').insertAdjacentHTML('beforeend', output);
// Highlight search terms in result.
$.each( snippetHighlights, function(hlKey, hlValue){
$("#summary-"+key).mark(hlValue);
snippetHighlights.forEach(function (hlValue, hlKey) {
new Mark(document.querySelector("#summary-" + key)).mark(hlValue);
});
});
}
@ -158,27 +158,24 @@ function render(template, data) {
// If Academic's in-built search is enabled and Fuse loaded, then initialize it.
if (typeof Fuse === 'function') {
// Wait for Fuse to initialize.
$.getJSON(search_config.indexURI, function (search_index) {
fetch(search_config.indexURI).then((response) => response.json()).then(function (search_index) {
let fuse = new Fuse(search_index, fuseOptions);
// On page load, check for search query in URL.
if (query = getSearchQuery('q')) {
$("body").addClass('searching');
$('.search-results').css({opacity: 0, visibility: "visible"}).animate({opacity: 1},200);
$("#search-query").val(query);
$("#search-query").focus();
document.querySelector("body").classList.add('searching');
document.querySelector("#search-query").value = query;
document.querySelector("#search-query").focus();
initSearch(true, fuse);
}
// On search box key up, process query.
$('#search-query').keyup(function (e) {
clearTimeout($.data(this, 'searchTimer')); // Ensure only one timer runs!
document.querySelector('#search-query').addEventListener('keyup', function (e) {
clearTimeout(this.dataset.searchTimer);
if (e.keyCode == 13) {
initSearch(true, fuse);
} else {
$(this).data('searchTimer', setTimeout(function () {
initSearch(false, fuse);
}, 250));
this.dataset.searchTimer = setTimeout(function () { initSearch(false, fuse); }, 250);
}
});
});

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -327,3 +327,17 @@ article.article h1 {
font-weight: 300;
line-height: 2.5rem;
}
.searching .search-results { display: block; }
.search-results { display: none; }
.search-results {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: scroll;
background-color: white;
}

View File

@ -4,7 +4,7 @@
<body>
<nav class="main">
<div class="body-width">
<a class="menu" href="#" onclick="this.parentNode.parentNode.classList.toggle('menu--expanded')"><img src="{{ (resources.Get "images/menu.svg").Permalink }}"></a>
<a class="menu" href="#" onclick="this.parentNode.parentNode.classList.toggle('menu--expanded'); return false;"><img src="{{ (resources.Get "images/menu.svg").Permalink }}"></a>
<a href="{{ (site.GetPage "").Permalink }}"><img src="{{ (resources.Get "images/logo.svg").Permalink }}" alt="Associação Nacional para o Software Livre" /></a>
<ul class='sections'>
<li><a href="{{ (site.GetPage "Section" "noticias").Permalink }}">Notícias</a></li>
@ -13,13 +13,14 @@
<li><a href="{{ (site.GetPage "Section" "eventos").Permalink }}">Eventos</a></li>
<li><a href="{{ (site.GetPage "sobre").Permalink }}">Sobre</a></li>
</ul>
<a class='nav-search' href="#" class="js-search">Pesquisar</a>
<a class='nav-search' href="#" onclick="document.querySelector('body').classList.toggle('searching'); return false;">Pesquisar</a>
</div>
</nav>
<main>
{{ block "main" . }}{{ end }}
</main>
{{ partial "search" . }}
{{ partial "site_js" . }}
<footer>

View File

@ -1,32 +1,30 @@
<aside class="search-results" id="search">
<div class="container">
<section class="search-header">
<div class="container">
<section class="search-header">
<div class="row no-gutters justify-content-between mb-3">
<div class="col-6">
<h1>{{ i18n "search" }}</h1>
</div>
<div class="col-6 col-search-close">
<a class="js-search" href="#"><i class="fas fa-times-circle text-muted" aria-hidden="true"></i></a>
</div>
<div class="row no-gutters justify-content-between mb-3">
<div class="col-6">
<h1>{{ i18n "search" }}</h1>
</div>
<div class="col-6 col-search-close">
<a class="js-search" href="#" onclick="document.querySelector('body').classList.toggle('searching'); return false;">Fechar</a>
</div>
</div>
<div id="search-box">
{{ if eq site.Params.search.engine 1 }}
<input name="q" id="search-query" placeholder="{{i18n "search_placeholder"}}" autocapitalize="off"
autocomplete="off" autocorrect="off" spellcheck="false" type="search">
{{ else }}
<!-- Search box will appear here -->
{{ end }}
</div>
</section>
<section class="section-search-results">
<div id="search-hits">
<!-- Search results will appear here -->
</div>
</section>
</div>
<div id="search-box">
{{ if eq site.Params.search.engine 1 }}
<input name="q" id="search-query" placeholder="{{i18n "search_placeholder"}}" autocapitalize="off"
autocomplete="off" autocorrect="off" spellcheck="false" type="search">
{{ else }}
<!-- Search box will appear here -->
{{ end }}
</div>
</section>
<section class="section-search-results">
<div id="search-hits">
<!-- Search results will appear here -->
</div>
</section>
</div>
</aside>
</aside>

View File

@ -32,12 +32,11 @@
const search_config = {{ $search_config | jsonify | safeJS }};
const i18n = {{ $search_i18n | jsonify | safeJS }};
const content_type = {
'post': {{ i18n "posts" }},
'project': {{ i18n "projects" }},
'publication' : {{ i18n "publications" }},
'talk' : {{ i18n "talks" }},
'noticias': {{ i18n "noticias" }},
'eventos': {{ i18n "eventos" }},
'iniciativas' : {{ i18n "iniciativas" }},
'slides' : {{ i18n "slides" | default (i18n "btn_slides") }}
};
};
</script>
{{ end }}
@ -70,21 +69,10 @@
{{ printf "<script src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\"></script>" (printf $js.mark.url $js.mark.version) $js.mark.sri | safeHTML }}
{{ end }}
{{ $js_comment := printf "/* Source Themes Academic v%s | https://sourcethemes.com/academic/ */\n" site.Data.academic.version }}
{{ $js_bundle_head := $js_comment | resources.FromString "js/bundle-head.js" }}
{{ $js_linebreak := "\n" | resources.FromString "js/linebreak.js" }}{{/* Fix no line break after Bootstrap JS causing error. */}}
{{ $js_academic := resources.Get "js/academic.js" }}
{{ $js_academic_search := resources.Get "js/academic-search.js" }}
{{ $js_bootstrap := resources.Get "js/vendor/bootstrap.min.js" }}
{{ $js_bundle := slice $js_bootstrap $js_linebreak $js_academic }}
{{ if eq site.Params.search.engine 1 }}
{{ $js_bundle = $js_bundle | append $js_academic_search }}
{{ end }}
{{ range site.Params.plugins_js }}
{{ $js_bundle = $js_bundle | append (resources.Get (printf "js/%s.js" .)) }}
{{ end }}
{{ $js_bundle := $js_bundle | resources.Concat "js/academic-bundle-pre.js" | minify }}
{{ $js_bundle := slice $js_bundle_head $js_bundle | resources.Concat "js/academic.min.js" | fingerprint "md5" }}
{{ $js_fuse := resources.Get "js/vendor/fuse.min.js" }}
{{ $js_mark := resources.Get "js/vendor/mark.min.js" }}
{{ $js_bundle := slice $js_mark $js_fuse $js_academic_search | resources.Concat "js/academic.min.js" }}
<script src="{{ $js_bundle.RelPermalink }}"></script>
{{ partial "custom_js" . }}