indieauth/docs/js/search.js

// Search module for phpDocumentor
//
// This module is a wrapper around fuse.js that will use a given index and attach itself to a
// search form and to a search results pane identified by the following data attributes:
//
// 1. data-search-form
// 2. data-search-results
//
// The data-search-form is expected to have a single input element of type 'search' that will trigger searching for
// a series of results, were the data-search-results pane is expected to have a direct UL child that will be populated
// with rendered results.
//
// The search has various stages, upon loading this stage the data-search-form receives the CSS class
// 'phpdocumentor-search--enabled'; this indicates that JS is allowed and indices are being loaded. It is recommended
// to hide the form by default and show it when it receives this class to achieve progressive enhancement for this
// feature.
//
// After loading this module, it is expected to load a search index asynchronously, for example:
//
//         <script defer src="js/searchIndex.js"></script>
//
// In this script the generated index should attach itself to the search module using the `appendIndex` function. By
// doing it like this the page will continue loading, unhindered by the loading of the search.
//
// After the page has fully loaded, and all these deferred indexes loaded, the initialization of the search module will
// be called and the form will receive the class 'phpdocumentor-search--active', indicating search is ready. At this
// point, the input field will also have it's 'disabled' attribute removed.
var Search = (function () {
    var fuse;
    var index = [];
    var options = {
        shouldSort: true,
        threshold: 0.6,
        location: 0,
        distance: 100,
        maxPatternLength: 32,
        minMatchCharLength: 1,
        keys: [
            "fqsen",
            "name",
            "summary",
            "url"
        ]
    };

    // Credit David Walsh (https://davidwalsh.name/javascript-debounce-function)
    // Returns a function, that, as long as it continues to be invoked, will not
    // be triggered. The function will be called after it stops being called for
    // N milliseconds. If `immediate` is passed, trigger the function on the
    // leading edge, instead of the trailing.
    function debounce(func, wait, immediate) {
        var timeout;

        return function executedFunction() {
            var context = this;
            var args = arguments;

            var later = function () {
                timeout = null;
                if (!immediate) func.apply(context, args);
            };

            var callNow = immediate && !timeout;
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
            if (callNow) func.apply(context, args);
        };
    }

    function close() {
        // Start scroll prevention: https://css-tricks.com/prevent-page-scrolling-when-a-modal-is-open/
        const scrollY = document.body.style.top;
        document.body.style.position = '';
        document.body.style.top = '';
        window.scrollTo(0, parseInt(scrollY || '0') * -1);
        // End scroll prevention

        var form = document.querySelector('[data-search-form]');
        var searchResults = document.querySelector('[data-search-results]');

        form.classList.toggle('phpdocumentor-search--has-results', false);
        searchResults.classList.add('phpdocumentor-search-results--hidden');
        var searchField = document.querySelector('[data-search-form] input[type="search"]');
        searchField.blur();
    }

    function search(event) {
        // Start scroll prevention: https://css-tricks.com/prevent-page-scrolling-when-a-modal-is-open/
        document.body.style.position = 'fixed';
        document.body.style.top = `-${window.scrollY}px`;
        // End scroll prevention

        // prevent enter's from autosubmitting
        event.stopPropagation();

        var form = document.querySelector('[data-search-form]');
        var searchResults = document.querySelector('[data-search-results]');
        var searchResultEntries = document.querySelector('[data-search-results] .phpdocumentor-search-results__entries');

        searchResultEntries.innerHTML = '';

        if (!event.target.value) {
            close();
            return;
        }

        form.classList.toggle('phpdocumentor-search--has-results', true);
        searchResults.classList.remove('phpdocumentor-search-results--hidden');
        var results = fuse.search(event.target.value, {limit: 25});

        results.forEach(function (result) {
            var entry = document.createElement("li");
            entry.classList.add("phpdocumentor-search-results__entry");
            entry.innerHTML += '<h3><a href="' + document.baseURI + result.url + '">' + result.name + "</h3>\n";
            entry.innerHTML += '<small>' + result.fqsen + "</small>\n";
            entry.innerHTML += '<div class="phpdocumentor-summary">' + result.summary + '</div>';
            searchResultEntries.appendChild(entry)
        });
    }

    function appendIndex(added) {
        index = index.concat(added);

        // re-initialize search engine when appending an index after initialisation
        if (typeof fuse !== 'undefined') {
            fuse = new Fuse(index, options);
        }
    }

    function init() {
        fuse = new Fuse(index, options);

        var form = document.querySelector('[data-search-form]');
        var searchField = document.querySelector('[data-search-form] input[type="search"]');

        var closeButton = document.querySelector('.phpdocumentor-search-results__close');
        closeButton.addEventListener('click', function() { close() }.bind(this));

        var searchResults = document.querySelector('[data-search-results]');
        searchResults.addEventListener('click', function() { close() }.bind(this));

        form.classList.add('phpdocumentor-search--active');

        searchField.setAttribute('placeholder', 'Search (Press "/" to focus)');
        searchField.removeAttribute('disabled');
        searchField.addEventListener('keyup', debounce(search, 300));

        window.addEventListener('keyup', function (event) {
            if (event.key === '/') {
                searchField.focus();
            }
            if (event.code === 'Escape') {
                close();
            }
        }.bind(this));
    }

    return {
        appendIndex,
        init
    }
})();

window.addEventListener('DOMContentLoaded', function () {
    var form = document.querySelector('[data-search-form]');

    // When JS is supported; show search box. Must be before including the search for it to take effect immediately
    form.classList.add('phpdocumentor-search--enabled');
});

window.addEventListener('load', function () {
    Search.init();
});