BibTest.js: Difference between revisions

Revision as of 23:32, 11 May 2026

let BIB_DATA = [];
let ACTIVE_TAGS = new Set();

/* =========================
   INIT
========================= */

document.addEventListener("DOMContentLoaded", async () => {
    await loadData();
    render();
});


/* =========================
   LOAD DATA FROM WIKI
========================= */

async function loadData() {
    const res = await fetch("BibliographyData");
    BIB_DATA = await res.json();

    console.log("📚 Loaded entries:", BIB_DATA.length);
}


/* =========================
   TAG EXTRACTION
========================= */

function getAllTags(data) {
    const tagSet = new Set();

    data.forEach(item => {
        (item.tags || []).forEach(t => tagSet.add(t));
    });

    return [...tagSet].sort((a, b) => a.localeCompare(b));
}


/* =========================
   RENDER TAG BAR
========================= */

function renderTags() {
    const container = document.getElementById("tagBar");
    container.innerHTML = "";

    const tags = getAllTags(BIB_DATA);

    tags.forEach(tag => {
        const el = document.createElement("span");
        el.className = "tag" + (ACTIVE_TAGS.has(tag) ? " active" : "");
        el.textContent = tag;

        el.onclick = () => {
            if (ACTIVE_TAGS.has(tag)) {
                ACTIVE_TAGS.delete(tag);
            } else {
                ACTIVE_TAGS.add(tag);
            }
            render();
        };

        container.appendChild(el);
    });
}


/* =========================
   FILTER LOGIC
========================= */

function filterData(data) {
    if (ACTIVE_TAGS.size === 0) return data;

    return data.filter(item =>
        (item.tags || []).some(t => ACTIVE_TAGS.has(t))
    );
}


/* =========================
   SORT (ALPHABETICAL)
========================= */

function sortData(data) {
    return [...data].sort((a, b) =>
        (a.authors?.[0]?.family || "Unknown")
            .localeCompare(b.authors?.[0]?.family || "Unknown")
    );
}


/* =========================
   RENDER LIST VIEW
========================= */

function renderList(data) {
    const container = document.getElementById("listView");
    container.innerHTML = "";

    data.forEach(item => {

        const author = item.authors?.[0]
            ? `${item.authors[0].family}, ${item.authors[0].given || ""}`
            : "Unknown Author";

        const tagsHTML = (item.tags || []).map(tag =>
            `<span class="tag small ${ACTIVE_TAGS.has(tag) ? "active" : ""}"
                   onclick="toggleTag('${tag}')">${tag}</span>`
        ).join(" ");

        const div = document.createElement("div");
        div.className = "bib-entry";
        div.innerHTML = `
            <h3>${author}. <i>${item.title}</i>. ${item.year || ""}</h3>

            <div class="bib-tags">${tagsHTML}</div>

            <p class="short-abstract">${item.abstract || ""}</p>

            ${item.url ? `<a href="${item.url}" target="_blank">Source</a>` : ""}
        `;

        container.appendChild(div);
    });
}


/* =========================
   TAG TOGGLE FROM LIST
========================= */

function toggleTag(tag) {
    if (ACTIVE_TAGS.has(tag)) {
        ACTIVE_TAGS.delete(tag);
    } else {
        ACTIVE_TAGS.add(tag);
    }
    render();
}


/* =========================
   MAIN RENDER PIPELINE
========================= */

function render() {
    const filtered = filterData(BIB_DATA);
    const sorted = sortData(filtered);

    renderTags();
    renderList(sorted);
}