votes.js

// Votes component: lists BKIND's on-chain governance votes (SPO + DRep) and
// shows each CIP-136 rationale inline. Data is static and same-origin:
// votes.json (the index) + the rationale JSON-LD files in governance/.
(function () {
    'use strict';

    const btn = document.getElementById('votesBtn');
    const modal = document.getElementById('votesModal');
    const closeBtn = document.getElementById('votesClose');
    const listEl = document.getElementById('votesList');
    if (!btn || !modal || !closeBtn || !listEl) return;

    let lastFocused = null;
    let loaded = false;
    const rationaleCache = new Map();
    const rows = [];
    let pendingKey = null;

    // Deep links: #votes opens the list, #votes/<key> opens one vote, where
    // <key> is the start of the governance action id (at least 8 characters).
    // When BKIND voted on the same action as SPO and as DRep, the key of each
    // row carries the role as well: <key>-drep, <key>-spo.
    function voteKeys(votes) {
        const prefix = votes.map(function (v, i) {
            return v.govActionId ? String(v.govActionId).slice(0, 8).toLowerCase() : String(i);
        });
        const count = {};
        prefix.forEach(function (k) { count[k] = (count[k] || 0) + 1; });
        return prefix.map(function (k, i) {
            if (count[k] > 1 && votes[i].role) return k + '-' + String(votes[i].role).toLowerCase();
            return k;
        });
    }

    function parseHash() {
        const m = /^#votes(?:\/([^\s]*))?$/.exec(location.hash || '');
        if (!m) return null;
        let key = '';
        try { key = decodeURIComponent(m[1] || ''); } catch (e) { key = m[1] || ''; }
        return { key: key.toLowerCase() };
    }

    function setHash(fragment) {
        const url = location.pathname + location.search + (fragment ? '#' + fragment : '');
        history.replaceState(null, '', url);
    }

    function findRow(key) {
        if (!key) return null;
        for (const r of rows) {
            if (r.key === key) return r;
            if (r.v.govActionId && key.length >= 8 &&
                String(r.v.govActionId).toLowerCase().indexOf(key) === 0) return r;
        }
        return null;
    }

    async function applyPending() {
        const key = pendingKey;
        pendingKey = null;
        const r = findRow(key);
        if (!r) return;
        if (r.head.getAttribute('aria-expanded') !== 'true') {
            await togglePanel(r.head, r.panel, r.v, r.key);
        }
        scrollToRow(r.head);
    }

    // Scroll the list so the row sits just below the sticky header.
    function scrollToRow(head) {
        const box = modal.querySelector('.modal-votes');
        const header = modal.querySelector('.votes-header');
        if (!box) {
            head.scrollIntoView({ block: 'start' });
            return;
        }
        const boxTop = box.getBoundingClientRect().top;
        const rowTop = head.getBoundingClientRect().top - boxTop + box.scrollTop;
        const stuck = header ? Math.max(0, header.getBoundingClientRect().height - 40) : 0;
        box.scrollTop = Math.max(0, rowTop - stuck - 8);
        // Second pass against the header as it actually sticks after scrolling.
        const edge = header ? header.getBoundingClientRect().bottom : boxTop;
        const delta = head.getBoundingClientRect().top - edge - 8;
        if (Math.abs(delta) > 1) box.scrollTop = Math.max(0, box.scrollTop + delta);
    }

    function openModal() {
        lastFocused = document.activeElement;
        modal.hidden = false;
        document.addEventListener('keydown', onKeydown);
        closeBtn.focus();
        if (!loaded) {
            loaded = true;
            loadVotes();
        }
    }

    function closeModal() {
        modal.hidden = true;
        document.removeEventListener('keydown', onKeydown);
        if (parseHash()) setHash('');
        if (lastFocused && typeof lastFocused.focus === 'function') {
            lastFocused.focus();
        }
    }

    function onKeydown(event) {
        if (event.key === 'Escape') {
            closeModal();
        }
    }

    async function loadVotes() {
        try {
            const res = await fetch('votes.json', { cache: 'no-cache' });
            if (!res.ok) throw new Error('votes.json ' + res.status);
            const votes = await res.json();
            listEl.textContent = '';
            if (!Array.isArray(votes) || votes.length === 0) {
                listEl.appendChild(emptyMessage('No votes recorded yet.'));
                return;
            }
            const keys = voteKeys(votes);
            votes.forEach(function (v, i) {
                listEl.appendChild(renderRow(v, i, keys[i]));
            });
            await applyPending();
        } catch (error) {
            listEl.textContent = '';
            listEl.appendChild(emptyMessage('Could not load votes.'));
        }
    }

    function emptyMessage(text) {
        const p = document.createElement('p');
        p.className = 'votes-empty';
        p.textContent = text;
        return p;
    }

    function renderRow(v, index, key) {
        const item = document.createElement('div');
        item.className = 'vote-item';

        const head = document.createElement('button');
        head.type = 'button';
        head.className = 'vote-head';
        head.setAttribute('aria-expanded', 'false');
        head.setAttribute('aria-controls', 'vote-panel-' + index);

        const role = String(v.role || '').toLowerCase();
        const badge = document.createElement('span');
        badge.className = 'vote-badge role-' + role;
        badge.textContent = v.role || '';

        const title = document.createElement('span');
        title.className = 'vote-title';
        title.textContent = v.title || v.action || '';

        const result = document.createElement('span');
        result.className = 'vote-result vote-' + String(v.vote || '').toLowerCase();
        result.textContent = v.vote || '';

        const epoch = document.createElement('span');
        epoch.className = 'vote-epoch';
        if (v.epoch != null) epoch.textContent = 'epoch ' + v.epoch;

        const chevron = document.createElement('span');
        chevron.className = 'vote-chevron';
        chevron.setAttribute('aria-hidden', 'true');

        head.append(badge, title, result, epoch, chevron);

        const panel = document.createElement('div');
        panel.className = 'vote-panel';
        panel.id = 'vote-panel-' + index;
        panel.hidden = true;

        head.addEventListener('click', function () {
            togglePanel(head, panel, v, key);
        });

        rows.push({ key: key, head: head, panel: panel, v: v });
        item.append(head, panel);
        return item;
    }

    async function togglePanel(head, panel, v, key) {
        const expanded = head.getAttribute('aria-expanded') === 'true';
        head.setAttribute('aria-expanded', String(!expanded));
        panel.hidden = expanded;
        setHash(expanded ? 'votes' : 'votes/' + key);
        if (!expanded && !panel.dataset.filled) {
            panel.dataset.filled = '1';
            panel.appendChild(await renderRationale(v, key));
        }
    }

    async function renderRationale(v, key) {
        const wrap = document.createElement('div');
        let doc;
        try {
            if (rationaleCache.has(v.rationale)) {
                doc = rationaleCache.get(v.rationale);
            } else {
                const res = await fetch(v.rationale, { cache: 'no-cache' });
                if (!res.ok) throw new Error(res.status);
                doc = await res.json();
                rationaleCache.set(v.rationale, doc);
            }
        } catch (error) {
            wrap.appendChild(emptyMessage('Could not load the rationale.'));
            return wrap;
        }

        const body = doc.body || {};
        const author = (Array.isArray(doc.authors) && doc.authors[0]) || {};

        if (body.summary) {
            const summary = document.createElement('p');
            summary.className = 'rationale-summary';
            summary.textContent = body.summary;
            wrap.appendChild(summary);
        }

        function appendSection(field, heading) {
            if (!field) return;
            if (heading) {
                const h = document.createElement('p');
                h.className = 'rationale-heading';
                h.textContent = heading;
                wrap.appendChild(h);
            }
            String(field).split('\n').forEach(function (paragraph) {
                const text = paragraph.trim();
                if (!text) return;
                const p = document.createElement('p');
                p.className = 'rationale-text';
                p.textContent = text;
                wrap.appendChild(p);
            });
        }

        appendSection(body.rationaleStatement, null);
        appendSection(body.precedentDiscussion, 'Precedent discussion');
        appendSection(body.counterargumentDiscussion, 'Counterargument discussion');
        appendSection(body.conclusion, 'Conclusion');

        const meta = document.createElement('div');
        meta.className = 'rationale-meta';
        if (author.witness && author.witness.signature) {
            const signed = document.createElement('span');
            signed.className = 'signed-badge';
            signed.textContent = 'signed ✓';
            signed.title = 'Rationale signed with the ' +
                (author.witness.witnessAlgorithm || 'ed25519') + ' key';
            meta.appendChild(signed);
        }
        if (v.govActionId) {
            const gid = document.createElement('span');
            gid.className = 'gov-id';
            gid.textContent = v.govActionId;
            meta.appendChild(gid);
        }
        const link = document.createElement('a');
        link.className = 'vote-link';
        link.href = '#votes/' + key;
        link.textContent = 'Link to this vote';
        meta.appendChild(link);
        if (meta.childElementCount > 0) wrap.appendChild(meta);

        if (Array.isArray(body.references) && body.references.length > 0) {
            const refs = document.createElement('div');
            refs.className = 'rationale-refs';
            body.references.forEach(function (ref) {
                if (!ref || !ref.uri || !/^https:\/\//i.test(ref.uri)) return;
                const a = document.createElement('a');
                a.href = ref.uri;
                a.target = '_blank';
                a.rel = 'noopener noreferrer';
                a.textContent = ref.label || ref.uri;
                refs.appendChild(a);
            });
            if (refs.childElementCount > 0) wrap.appendChild(refs);
        }

        return wrap;
    }

    btn.addEventListener('click', openModal);
    closeBtn.addEventListener('click', closeModal);
    modal.addEventListener('click', function (event) {
        if (event.target === modal) {
            closeModal();
        }
    });

    function onHash() {
        const h = parseHash();
        if (!h) {
            if (!modal.hidden) closeModal();
            return;
        }
        pendingKey = h.key || null;
        if (modal.hidden) openModal();
        if (loaded && rows.length > 0) applyPending();
    }
    window.addEventListener('hashchange', onHash);
    onHash();
})();