MediaWiki

BibTest.js: Difference between revisions

From Illustrations in German Translations of Mark Twain's Works

← Older editNewer edit →
No edit summary
No edit summary
Line 8: Line 8:
   TAG FILTERING (GLOBAL)
   TAG FILTERING (GLOBAL)
========================= */
========================= */


document.querySelectorAll(".tag").forEach(tag => {
document.querySelectorAll(".tag").forEach(tag => {
Line 17: Line 18:
         if (activeTags.has(value)) {
         if (activeTags.has(value)) {
             activeTags.delete(value);
             activeTags.delete(value);
            tag.classList.remove("active");
         } else {
         } else {
             activeTags.add(value);
             activeTags.add(value);
            tag.classList.add("active");
         }
         }


         filterEntries();
         filterEntries();
        syncTagUI();  //


     });
     });
Line 102: Line 102:




/* =========================
  NETWORK VIEW
========================= */


function buildNetwork() {
function syncTagUI() {


     const container = document.getElementById("networkView");
     document.querySelectorAll(".tag").forEach(tagEl => {
    container.innerHTML = "";


    const entries = document.querySelectorAll(".bib-entry");
        const value = tagEl.dataset.tag;


    const tagNodes = new Map();
         if (activeTags.has(value)) {
    const entryNodes = [];
             tagEl.classList.add("active");
 
         } else {
    const centerX = container.clientWidth / 2;
             tagEl.classList.remove("active");
    const centerY = container.clientHeight / 2;
         }
 
    /* -------------------------
      ENTRY NODES
    ------------------------- */
 
    entries.forEach((entry, i) => {
 
         const node = document.createElement("div");
        node.className = "node entry";
        node.innerText = entry.querySelector("h3").innerText;
 
        const angle = (i / entries.length) * Math.PI * 2;
 
        const x = centerX + Math.cos(angle) * 250;
        const y = centerY + Math.sin(angle) * 250;
 
        node.style.left = x + "px";
        node.style.top = y + "px";
 
        container.appendChild(node);
 
        entryNodes.push({ node, entry, x, y });
 
        node.addEventListener("click", () => {
 
            document.querySelectorAll(".node")
                .forEach(n => n.classList.remove("highlight"));
 
             node.classList.add("highlight");
 
         });
 
        /* -------------------------
          TAG NODES
        ------------------------- */
 
        const tags = entry.dataset.tags.split(" ");
 
        tags.forEach(tag => {
 
             if (!tagNodes.has(tag)) {
 
                const tnode = document.createElement("div");
                tnode.className = "node tag";
                tnode.innerText = tag;
 
                const tx = Math.random() * (container.clientWidth - 100) + 50;
                const ty = Math.random() * (container.clientHeight - 100) + 50;
 
                tnode.style.left = tx + "px";
                tnode.style.top = ty + "px";
 
                container.appendChild(tnode);
 
                tagNodes.set(tag, { node: tnode, x: tx, y: ty });
 
            }
 
         });
 
    });
 
    /* -------------------------
      EDGES
    ------------------------- */
 
    entryNodes.forEach(e => {
 
        const tags = e.entry.dataset.tags.split(" ");
 
        tags.forEach(tag => {
 
            const t = tagNodes.get(tag);
            if (!t) return;
 
            const line = document.createElement("div");
            line.className = "edge";
 
            const dx = t.x - e.x;
            const dy = t.y - e.y;
 
            const length = Math.sqrt(dx * dx + dy * dy);
 
            line.style.width = length + "px";
            line.style.left = e.x + "px";
            line.style.top = e.y + "px";
            line.style.transform = `rotate(${Math.atan2(dy, dx)}rad)`;
 
            container.appendChild(line);
 
        });


     });
     });


}
}

Revision as of 22:11, 11 May 2026

/* =========================
   STATE
========================= */

const activeTags = new Set();

/* =========================
   TAG FILTERING (GLOBAL)
========================= */


document.querySelectorAll(".tag").forEach(tag => {

    tag.addEventListener("click", () => {

        const value = tag.dataset.tag;

        if (activeTags.has(value)) {
            activeTags.delete(value);
        } else {
            activeTags.add(value);
        }

        filterEntries();
        syncTagUI();   // 

    });

});


function filterEntries() {

    document.querySelectorAll(".bib-entry").forEach(entry => {

        const entryTags = entry.dataset.tags.split(" ");

        const matches =
            [...activeTags].every(t => entryTags.includes(t));

        if (activeTags.size === 0 || matches) {
            entry.style.display = "block";
        } else {
            entry.style.display = "none";
        }

    });

}


/* =========================
   VIEW SWITCH (LIST / NETWORK)
========================= */

document.querySelectorAll(".view-btn").forEach(btn => {

    btn.addEventListener("click", () => {

        document.querySelectorAll(".view-btn")
            .forEach(b => b.classList.remove("active"));

        btn.classList.add("active");

        const view = btn.dataset.view;

        const listView = document.getElementById("listView");
        const networkView = document.getElementById("networkView");

        listView.style.display = (view === "list") ? "block" : "none";
        networkView.classList.toggle("hidden", view !== "network");

        if (view === "network") {
            buildNetwork();
        }

    });

});


/* =========================
   EXPAND ABSTRACTS
========================= */

document.querySelectorAll(".expand-btn").forEach(btn => {

    btn.addEventListener("click", () => {

        const abstract = btn.nextElementSibling;

        abstract.classList.toggle("hidden");

        btn.textContent =
            abstract.classList.contains("hidden")
                ? "Show Abstract"
                : "Hide Abstract";

    });

});



function syncTagUI() {

    document.querySelectorAll(".tag").forEach(tagEl => {

        const value = tagEl.dataset.tag;

        if (activeTags.has(value)) {
            tagEl.classList.add("active");
        } else {
            tagEl.classList.remove("active");
        }

    });

}
Retrieved from "https://illus.twainframe.org/index.php?title=MediaWiki:BibTest.js&oldid=2820"