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();
+    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){
+    snippetHighlights.forEach(function (hlValue, hlKey) {
-      $("#summary-"+key).mark(hlValue);
+      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');
+      document.querySelector("body").classList.add('searching');
-      $('.search-results').css({opacity: 0, visibility: "visible"}).animate({opacity: 1},200);
+      document.querySelector("#search-query").value = query;
-      $("#search-query").val(query);
+      document.querySelector("#search-query").focus();
-      $("#search-query").focus();
       initSearch(true, fuse);
     }
 
     // On search box key up, process query.
-    $('#search-query').keyup(function (e) {
+    document.querySelector('#search-query').addEventListener('keyup', function (e) {
-      clearTimeout($.data(this, 'searchTimer')); // Ensure only one timer runs!
+      clearTimeout(this.dataset.searchTimer);
       if (e.keyCode == 13) {
         initSearch(true, fuse);
       } else {
-        $(this).data('searchTimer', setTimeout(function () {
+        this.dataset.searchTimer = setTimeout(function () { initSearch(false, fuse); }, 250);
-          initSearch(false, fuse);
-        }, 250));
       }
     });
   });

themes/academic/assets/js/academic.js

@@ -5,142 +5,6 @@
  *  Core JS functions and initialization.
  **************************************************/
 
-(function ($) {
-
-  /* ---------------------------------------------------------------------------
-   * Responsive scrolling for URL hashes.
-   * --------------------------------------------------------------------------- */
-
-  // Dynamically get responsive navigation bar height for offsetting Scrollspy.
-  function getNavBarHeight() {
-    let $navbar = $('#navbar-main');
-    let navbar_offset = $navbar.outerHeight();
-    console.debug('Navbar height: ' + navbar_offset);
-    return navbar_offset;
-  }
-
-  /**
-   * Responsive hash scrolling.
-   * Check for a URL hash as an anchor.
-   * If it exists on current page, scroll to it responsively.
-   * If `target` argument omitted (e.g. after event), assume it's the window's hash.
-   */
-  function scrollToAnchor(target) {
-    // If `target` is undefined or HashChangeEvent object, set it to window's hash.
-    // Decode the hash as browsers can encode non-ASCII characters (e.g. Chinese symbols).
-    target = (typeof target === 'undefined' || typeof target === 'object') ? decodeURIComponent(window.location.hash) : target;
-
-    // If target element exists, scroll to it taking into account fixed navigation bar offset.
-    if ($(target).length) {
-      // Escape special chars from IDs, such as colons found in Markdown footnote links.
-      target = '#' + $.escapeSelector(target.substring(1));  // Previously, `target = target.replace(/:/g, '\\:');`
-
-      let elementOffset = Math.ceil($(target).offset().top - getNavBarHeight());  // Round up to highlight right ID!
-      $('body').addClass('scrolling');
-      $('html, body').animate({
-        scrollTop: elementOffset
-      }, 600, function () {
-        $('body').removeClass('scrolling');
-      });
-    } else {
-      console.debug('Cannot scroll to target `#' + target + '`. ID not found!');
-    }
-  }
-
-  // Make Scrollspy responsive.
-  function fixScrollspy() {
-    let $body = $('body');
-    let data = $body.data('bs.scrollspy');
-    if (data) {
-      data._config.offset = getNavBarHeight();
-      $body.data('bs.scrollspy', data);
-      $body.scrollspy('refresh');
-    }
-  }
-
-  function removeQueryParamsFromUrl() {
-    if (window.history.replaceState) {
-      let urlWithoutSearchParams = window.location.protocol + "//" + window.location.host + window.location.pathname + window.location.hash;
-      window.history.replaceState({path: urlWithoutSearchParams}, '', urlWithoutSearchParams);
-    }
-  }
-
-  // Check for hash change event and fix responsive offset for hash links (e.g. Markdown footnotes).
-  window.addEventListener("hashchange", scrollToAnchor);
-
-  /* ---------------------------------------------------------------------------
-   * Add smooth scrolling to all links inside the main navbar.
-   * --------------------------------------------------------------------------- */
-
-  $('#navbar-main li.nav-item a.nav-link').on('click', function (event) {
-    // Store requested URL hash.
-    let hash = this.hash;
-
-    // If we are on a widget page and the navbar link is to a section on the same page.
-    if (this.pathname === window.location.pathname && hash && $(hash).length && ($(".js-widget-page").length > 0)) {
-      // Prevent default click behavior.
-      event.preventDefault();
-
-      // Use jQuery's animate() method for smooth page scrolling.
-      // The numerical parameter specifies the time (ms) taken to scroll to the specified hash.
-      let elementOffset = Math.ceil($(hash).offset().top - getNavBarHeight());  // Round up to highlight right ID!
-
-      // Uncomment to debug.
-      // let scrollTop = $(window).scrollTop();
-      // let scrollDelta = (elementOffset - scrollTop);
-      // console.debug('Scroll Delta: ' + scrollDelta);
-
-      $('html, body').animate({
-        scrollTop: elementOffset
-      }, 800);
-    }
-  });
-
-  /* ---------------------------------------------------------------------------
-   * Hide mobile collapsable menu on clicking a link.
-   * --------------------------------------------------------------------------- */
-
-  $(document).on('click', '.navbar-collapse.show', function (e) {
-    //get the <a> element that was clicked, even if the <span> element that is inside the <a> element is e.target
-    let targetElement = $(e.target).is('a') ? $(e.target) : $(e.target).parent();
-
-    if (targetElement.is('a') && targetElement.attr('class') != 'dropdown-toggle') {
-      $(this).collapse('hide');
-    }
-  });
-
-  /* ---------------------------------------------------------------------------
-   * Filter publications.
-   * --------------------------------------------------------------------------- */
-
-  // Active publication filters.
-  let pubFilters = {};
-
-  // Search term.
-  let searchRegex;
-
-  // Filter values (concatenated).
-  let filterValues;
-
-  // Publication container.
-  let $grid_pubs = $('#container-publications');
-
-  // Initialise Isotope.
-  $grid_pubs.isotope({
-    itemSelector: '.isotope-item',
-    percentPosition: true,
-    masonry: {
-      // Use Bootstrap compatible grid layout.
-      columnWidth: '.grid-sizer'
-    },
-    filter: function () {
-      let $this = $(this);
-      let searchResults = searchRegex ? $this.text().match(searchRegex) : true;
-      let filterResults = filterValues ? $this.is(filterValues) : true;
-      return searchResults && filterResults;
-    }
-  });
-
 // Filter by search term.
 let $quickSearch = $('.filter-search').keyup(debounce(function () {
   searchRegex = new RegExp($quickSearch.val(), 'gi');

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

@@ -7,7 +7,7 @@
               <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>
+              <a class="js-search" href="#" onclick="document.querySelector('body').classList.toggle('searching'); return false;">Fechar</a>
             </div>
           </div>
 
@@ -22,11 +22,9 @@
 
         </section>
         <section class="section-search-results">
-
           <div id="search-hits">
             <!-- Search results will appear here -->
           </div>
-
         </section>
       </div>
     </aside>

themes/academic/layouts/partials/site_js.html

@@ -32,10 +32,9 @@
       const search_config = {{ $search_config | jsonify | safeJS }};
       const i18n = {{ $search_i18n | jsonify | safeJS }};
       const content_type = {
-        'post': {{ i18n "posts" }},
+        'noticias': {{ i18n "noticias" }},
-        'project': {{ i18n "projects" }},
+        'eventos': {{ i18n "eventos" }},
-        'publication' : {{ i18n "publications" }},
+        'iniciativas' : {{ i18n "iniciativas" }},
-        'talk' : {{ i18n "talks" }},
         'slides' : {{ i18n "slides" | default (i18n "btn_slides") }}
       };
     </script>
@@ -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_fuse := resources.Get "js/vendor/fuse.min.js" }}
-    {{ $js_bundle := slice $js_bootstrap $js_linebreak $js_academic }}
+    {{ $js_mark := resources.Get "js/vendor/mark.min.js" }}
-    {{ if eq site.Params.search.engine 1 }}
+    {{ $js_bundle := slice $js_mark $js_fuse $js_academic_search | resources.Concat "js/academic.min.js" }}
-      {{ $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" }}
     <script src="{{ $js_bundle.RelPermalink }}"></script>
 
     {{ partial "custom_js" . }}