dlibrary/dlibrary/static/index.js

const LCG_M = Math.pow(2, 32);
const LCG_A = 0xd9f5;
const LCG_C = 69;

function lcg(seed) {
    let value = seed % LCG_M;

    return (n) => {
        value = (LCG_A * value + LCG_C) % LCG_M;
        return Math.floor(n * value / LCG_M);
    };
}

function seedableShuffledCopy(list, seed) {
    const gen = lcg(seed);
    const l = [...list];

    for (let i = 0; i < l.length - 1; ++i) {
        j = i + gen(l.length - i);
        const tmp = l[i];
        l[i] = l[j];
        l[j] = tmp;
    }
    return l;
}

function newSeed() {
    return Math.floor(Math.random() * LCG_M);
}

let receivedStore = JSON.parse(localStorage.getItem('receivedStore')) || {};

const isFileUrl = (window.location.protocol === 'file:');

function isReading(work) {
    const key = `${work.id}-currentPage`;
    const value = isFileUrl ? receivedStore[key] : localStorage.getItem(key);
    return !!parseInt(value);
}

function setupIndex() {
    const shuffleButton = document.getElementById('shuffle');
    const sortButton = document.getElementById('sort');
    const readingButton = document.getElementById('reading');
    const searchBox = document.getElementById('search');
    const listContainer = document.getElementById('main-listing');

    let ordering = localStorage.getItem('indexOrdering') || 'dateDesc';
    let shuffleSeed = parseInt(localStorage.getItem('shuffleSeed')) || newSeed();

    let worksToDisplay;

    function scrollHandler() {
        while (worksToDisplay.length > 0 && listContainer.clientHeight - window.scrollY < 5000) {
            const work = worksToDisplay.shift();

            const card = document.createElement('div');
            card.className = 'card';
            if (isReading(work)) {
                card.classList.add('reading');
            }

            const link = document.createElement('a');
            link.href = `${ROOT}/works/${work.id}/${INDEX}`;
            card.appendChild(link);

            const thumb = document.createElement('img');
            thumb.src = `${ROOT}/${work.thumbnail_path}`;
            link.appendChild(thumb);

            const creators = document.createElement('div');
            creators.className = 'card-creators';
            let creatorsInfo = `[${work.circle || ''}`;
            if (work.authors.length > 0) {
                let authorList = work.authors[0];
                for (let i = 1; i < work.authors.length; ++i) {
                    authorList += `, ${work.authors[i]}`;
                }
                creatorsInfo += (work.circle ? ` (${authorList})` : `${authorList}`);
            }
            creatorsInfo += ']';
            creators.textContent = creatorsInfo;
            link.appendChild(creators);

            const title = document.createElement('div');
            title.className = 'card-title';
            title.textContent = work.title;
            link.appendChild(title);

            listContainer.appendChild(card);
        }
    }

    function applyView() {
        let orderedWorks;

        switch (ordering) {
        case 'shuffle':
            orderedWorks = seedableShuffledCopy(WORKS, shuffleSeed);
            break;
        case 'dateAsc':
            orderedWorks = WORKS.toReversed();
            break;
        case 'reading':
            orderedWorks = WORKS.toSorted((a, b) => {
                const aReading = isReading(a);
                const bReading = isReading(b);

                if (aReading && !bReading) {
                    return -1;
                }
                if (bReading && !aReading) {
                    return 1;
                }
                return 0;
            })
            break;
        default:
            orderedWorks = [...WORKS];
            break;
        }

        if (searchBox.value === "") {
            worksToDisplay = orderedWorks;
        } else {
            worksToDisplay = orderedWorks.filter((work) => {
                const query = searchBox.value.toLowerCase();

                if (work.title.toLowerCase().includes(query)) {
                    return true;
                }
                if (work.circle && work.circle.toLowerCase().includes(query)) {
                    return true;
                }
                if (work.authors.some((author) => author.toLowerCase().includes(query))) {
                    return true;
                }

                return false;
            });
        }

        listContainer.replaceChildren();
        scrollHandler();
    }

    applyView();

    window.addEventListener('scroll', scrollHandler);

    function updateOrdering(o) {
        ordering = o;
        localStorage.setItem('indexOrdering', ordering);
        applyView();
    }

    shuffleButton.onclick = () => {
        shuffleSeed = newSeed();
        localStorage.setItem('shuffleSeed', shuffleSeed);
        updateOrdering('shuffle');
    };
    sortButton.onclick = () => {
        if (ordering === 'dateDesc') {
            updateOrdering('dateAsc');
        } else {
            updateOrdering('dateDesc');
        }
    };
    readingButton.onclick = () => {
        updateOrdering('reading');
    };

    searchBox.oninput = applyView;
}

if (isFileUrl) {
    let initialized = false;
    window.addEventListener('message', (event) => {
        if (event.data.token !== TOKEN) {
            return;
        }

        receivedStore = event.data.store;
        localStorage.setItem('receivedStore', JSON.stringify(receivedStore));

        if (!initialized) {
            initialized = true;
            setupIndex();
        }
    });

    window.addEventListener('load', () => {
        document.getElementById('store-iframe').contentWindow.postMessage({
            token: TOKEN,
            operation: 'getAll',
        }, "*");
    });
} else {
    document.addEventListener('DOMContentLoaded', setupIndex);
}