www/scripts/fuzzy.js

(() => {
    let searchField = document.querySelector("#search");
    if (searchField === null)
        return;

    let client = new XMLHttpRequest();
    client.open("GET", "/pages.json");
    client.onreadystatechange = () => {
        if (client.readyState === 4)
            fuzzyInit(client.responseText);
    }
    client.send();
    searchField.focus();
})();

function fuzzyInit(pagesFileName) {
    if (pagesFileName == "")
        return;
    
    let searchField = document.querySelector("#search");
    let resultBlock = document.querySelector("#results");
    if (searchField === null || resultBlock === null)
        return;

    var pages;
    try {
        pages = JSON.parse(pagesFileName);
    } catch (e) {
        console.error(e);
        document.body.innerHTML = e.message;
        return;
    }

    pages.sort((x, y) => {return ('' + x.title).localeCompare(y.title)});

    searchField.addEventListener("keyup", (e) => {

        let searchValue = searchField.value ? searchField.value.toLowerCase() : "";

        if (e.code === "Enter") {
            if (resultBlock.childNodes === null 
                || resultBlock.childNodes[0] === null
                || resultBlock.childNodes[0].href === undefined)
                return;

            window.location = resultBlock.childNodes[0].href;
            return;
        }

        // help
        if (searchValue === "?" || searchValue === "help") {
            resultBlock.innerHTML = "<h2>Help</h2>Enter a page or directory name.<br>If do not know any, clear the search field to list everything.<br> Using the <code>Enter</code> key would take you to the first page in list, if the list is not empty.<br>Alternatively, use the <code>Up</code> and <code>Down</code> arrow keys to select the page you want and use the <code>Enter</code> key.<br>Use <code>Backspace</code> to go back to the search."
            return;
        }

        let results = [];
        for (const [i, page] of pages.entries()) {
            ret = fuzzySearch(page.title, searchValue);
            if (ret === null)
                continue;
            results.push({formatted: ret.formatted, link: page.link, score: ret.score});
        }

        results.sort((x, y) => {return x.score - y.score});

        resultBlock.innerHTML = "";
        for (const res of results) {
            linkBlock = document.createElement("a");
            linkBlock.classList.add("hyperlink");
            linkBlock.href = res.link;
            linkBlock.innerHTML = `<div class="name">${res.formatted}</div><div class="link">${res.link}</div>`;
            resultBlock.appendChild(linkBlock);
        }

        if (results.length <= 0)
            resultBlock.innerHTML = "Unknown command or no matching pages found."
    });

    document.body.addEventListener("keydown", (e) => {
        if (e.code === "Backspace") {
            searchField.focus();
        }

        if (e.code === "ArrowDown" || e.code === "ArrowUp") {
            if (resultBlock.childNodes === null)
                return;

            resultNodes = resultBlock.childNodes;
            
            if (resultNodes.length <= 1)
                return;

            let currNode = document.activeElement;
            
            if (searchField === currNode) {
                e.preventDefault();    
                if (e.code === "ArrowDown")
                    resultNodes[0].focus();
                else
                    resultNodes[resultNodes.length - 1].focus();
                return;
            }

            if (Array.from(resultNodes).indexOf(currNode) < 0)
                return;

            e.preventDefault();
            if (e.code === "ArrowDown")
                if (currNode.nextElementSibling === null)
                    searchField.focus();
                else
                    currNode.nextElementSibling.focus();
            else if (e.code === "ArrowUp")
                if (currNode.previousElementSibling === null)
                    searchField.focus();
                else
                    currNode.previousElementSibling.focus();
            return;
        }
    });
}

function fuzzySearch(findIn, find) {
    let search = find.replace(/\s/g, "");
    search = search.toLowerCase();
    let tokens = findIn.split('');
    let pc = 0;
    let score = 0;

    for (const [i, ch] of tokens.entries()) {
        if (ch.toLowerCase() === search[pc]) {
            score += i - pc;
            tokens[i] = `<span class="highlight">${ch}</span>`;
            pc++;
            if (search.length < pc)
                return null;
        }
    }

    if (search.length === pc)
        return {formatted: tokens.join(''), score: (score / search.length)};
    
    return null;
}