Fix search, barely

themes/academic/assets/js/academic-search.js

@@ -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);
       }
     });
   });

themes/academic/assets/scss/ansol.scss

@@ -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;
+}
+

themes/academic/layouts/_default/baseof.html

@@ -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>

themes/academic/layouts/partials/search.html

@@ -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>
-
-      <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>
+          <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>
 
-    </section>
-    <section class="section-search-results">
+          <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>
 
-      <div id="search-hits">
-        <!-- Search results will appear here -->
+        </section>
+        <section class="section-search-results">
+          <div id="search-hits">
+            <!-- Search results will appear here -->
+          </div>
+        </section>
       </div>
-
-    </section>
-  </div>
-</aside>
+    </aside>

themes/academic/layouts/partials/site_js.html

@@ -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" . }}