Add SimpleJekyllSearchInit function call

[eduardoboucas]

I've added a simple check for a window.SimpleJekyllSearchInit function — if it exists, the library calls it at load time.

Because the search functionality is not crucial for loading the page, it shouldn't block the rendering. As such, I prefer to include the script with the async attribute. However, initialising it becomes less trivial because window.SimpleJekyllSearch might not be available yet when the other scripts load.

This PR would solve this problem as such:

<!-- _includes/scripts.html -->
<script src="/js/main.js"></script>
<script async src="/js/jekyll-search.min.js"></script>

<!-- main.js -->
var initSearch = function () {
    SimpleJekyllSearch({
      searchInput: document.getElementById('search-input'),
      resultsContainer: document.getElementById('results-container'),
      json: '/search.json',
    });         
};

if (window.SimpleJekyllSearch) {
    // If the library is available, initialise it right away
    initSearch();
} else {
    // Otherwise queue it for when it becomes available
    window.SimpleJekyllSearchInit = initSearch;
}

[daviddarnes]

@eduardoboucas thanks for the addition! Will this be a breaking change for current users?

[eduardoboucas]

Not at all, @daviddarnes. The only consequence is that it adds SimpleJekyllSearchInit to the global scope, but you can chose to make use of it or simply carry on using it as per the current method.

[daviddarnes]

@eduardoboucas thanks for the clarification. Sorry, my js still aren't as strong as @christian-fei's. I'm just a keen user of the project :). Thanks for contributing.

[christian-fei]

Hey @eduardoboucas , @daviddarnes

Thanks for the contribution!

I do not quite understand how this would work.

Where you say you 'queue' the function call, you're just assigning it, but it would never be called by any other script, am I correct?

[eduardoboucas]

Hey @christian-fei!

When the library loads it checks whether window.SimpleJekyllSearchInit is defined — "has anyone set a callback that I need to run as soon as I'm ready to go?". If so, it will call the function. If not, ignore it completely.

This is unnecessary if you load this library synchronously, as soon as you load it before the script that initialises it. Example:

<!-- _includes/scripts.html -->
<script src="/js/jekyll-search.min.js"></script>
<script src="/js/main.js"></script>

<!-- main.js -->
// window.SimpleJekyllSearch exists at this point,
// because the script has already been loaded synchronously.
SimpleJekyllSearch({
  searchInput: document.getElementById('search-input'),
  resultsContainer: document.getElementById('results-container'),
  json: '/search.json',
});

However, as soon as I make the script call asynchronous:

<!-- _includes/scripts.html -->
<script async src="/js/jekyll-search.min.js"></script>
<script src="/js/main.js"></script>

<!-- main.js -->
// window.SimpleJekyllSearch may not exist at this point,
// because it was loaded asynchronously.
// This will throw an error.
SimpleJekyllSearch({
  searchInput: document.getElementById('search-input'),
  resultsContainer: document.getElementById('results-container'),
  json: '/search.json',
});

So the solution proposed by this PR is to queue the initialisation of the library to happen only when it's properly loaded and ready, and the function call to window.SimpleJekyllSearchInit is simply its way of announcing that to the global scope.

<!-- main.js -->
var initSearch = function () {
    SimpleJekyllSearch({
      searchInput: document.getElementById('search-input'),
      resultsContainer: document.getElementById('results-container'),
      json: '/search.json',
    });         
};

if (window.SimpleJekyllSearch) {
    // If the library is available, initialise it right away
    initSearch();
} else {
    // Define `initSearch` as the function that needs to be called
    // as soon as the library is loaded.
    window.SimpleJekyllSearchInit = initSearch;
}

I hope this makes more sense now.

[christian-fei]

Hey @eduardoboucas , sorry for the embarrassing delay..
and thanks a lot, very much appreciated!

[eduardoboucas]

My pleasure! 😄

In case you're interested, I'm using this approach on https://eduardoboucas.com.

[christian-fei]

👍 very, very interesting use! nice job!

will link to it in the readme