hugo-theme-next/assets/js/third-party/search/algolia.js

/* global instantsearch, algoliasearch, CONFIG, pjax */

document.addEventListener('DOMContentLoaded', () => {

  const algoiajs = NexT.utils.getCDNResource(NexT.CONFIG.algolia.js);
  const instantschjs = NexT.utils.getCDNResource(NexT.CONFIG.algolia.instantjs);

  NexT.utils.getScript(algoiajs, {});
  NexT.utils.getScript(instantschjs, {}).then(() => {
    
    const { indexname, appid, apikey, hits } = NexT.CONFIG.algolia.cfg;
    const indexName = indexname;

    const search = instantsearch({
      indexName,
      searchClient: algoliasearch(appid, apikey),
      searchFunction: helper => {
        if (document.querySelector('.search-input').value) {
          helper.search();
        }
      }
    });

    if (typeof pjax === 'object') {
      search.on('render', () => {
        pjax.refresh(document.querySelector('.algolia-hits'));
      });
    }

    // Registering Widgets
    search.addWidgets([
      instantsearch.widgets.configure({
        hitsPerPage: hits.perpage || 10
      }),

      instantsearch.widgets.searchBox({
        container: '.search-input-container',
        placeholder: NexT.CONFIG.i18n.placeholder,
        // Hide default icons of algolia search
        showReset: false,
        showSubmit: false,
        showLoadingIndicator: false,
        cssClasses: {
          input: 'search-input'
        }
      }),

      instantsearch.widgets.stats({
        container: '.algolia-stats',
        templates: {
          text: data => {
            const stats = NexT.CONFIG.i18n.hits_time
              .replace('${hits}', data.nbHits)
              .replace('${time}', data.processingTimeMS);
            return `<span>${stats}</span><img src="/imgs/algolia-logo.svg" alt="Algolia">`;
          }
        },
        cssClasses: {
          text: 'search-stats'
        }
      }),

      instantsearch.widgets.hits({
        container: '.algolia-hits',
        escapeHTML: false,
        templates: {
          item: data => {
            const { title, excerpt, excerptStrip, contentStripTruncate } = data._highlightResult;
            let result = `<a href="${data.permalink}" class="search-result-title">${title.value}</a>`;
            const content = excerpt || excerptStrip || contentStripTruncate;
            if (content && content.value) {
              const div = document.createElement('div');
              div.innerHTML = content.value;
              result += `<a href="${data.permalink}"><p class="search-result">${div.textContent.substring(0, 100)}...</p></a>`;
            }
            return result;
          },
          empty: data => {
            return `<div class="algolia-hits-empty">
              ${NexT.CONFIG.i18n.empty.replace('${query}', data.query)}
            </div>`;
          }
        },
        cssClasses: {
          list: 'search-result-list'
        }
      }),

      instantsearch.widgets.pagination({
        container: '.algolia-pagination',
        scrollTo: false,
        showFirst: false,
        showLast: false,
        templates: {
          first: '<i class="fa fa-angle-double-left"></i>',
          last: '<i class="fa fa-angle-double-right"></i>',
          previous: '<i class="fa fa-angle-left"></i>',
          next: '<i class="fa fa-angle-right"></i>'
        },
        cssClasses: {
          list: ['pagination', 'algolia-pagination'],
          item: 'pagination-item',
          link: 'page-number',
          selectedItem: 'current',
          disabledItem: 'disabled-item'
        }
      })
    ]);

    search.start();

    // Handle and trigger popup window
    document.querySelectorAll('.popup-trigger').forEach(element => {
      element.addEventListener('click', () => {
        document.body.classList.add('search-active');
        setTimeout(() => document.querySelector('.search-input').focus(), 500);
      });
    });

    // Monitor main search box
    const onPopupClose = () => {
      document.body.classList.remove('search-active');
    };

    document.querySelector('.search-pop-overlay').addEventListener('click', event => {
      if (event.target === document.querySelector('.search-pop-overlay')) {
        onPopupClose();
      }
    });
    document.querySelector('.popup-btn-close').addEventListener('click', onPopupClose);
    document.addEventListener('pjax:success', onPopupClose);
    window.addEventListener('keyup', event => {
      if (event.key === 'Escape') {
        onPopupClose();
      }
    });
  });;


});