Marcos Paulo
9ca3f48def
- Change ReadingProgress and RouteTable to use transform (scaleX/scaleY) instead of width/height - Convert existing easing functions to 200ms cubic-bezier(.2,0,0,1) - Document animation purpose with CSS comments - Add guide panel swap, review desk detail swap, and tally pop animations - Implement prefers-reduced-motion for all new states
54 lines
3.4 KiB
JavaScript
54 lines
3.4 KiB
JavaScript
// Reader vote widget: "which draft would you ship?" per reviewed skill.
|
|
// The page itself is static (Gitea Pages), so this talks to a small
|
|
// separate API — see /vote-service in the repository root. One vote per
|
|
// source is enforced server-side by IP, not here; this module only renders
|
|
// state and remembers the local choice so a returning visitor sees it
|
|
// without re-voting.
|
|
const API_BASE = (window.SKILLS_REVIEW_VOTE_API || '').replace(/\/$/, '');
|
|
const escape = (value) => value.replace(/[&<>"']/g, (character) => ({ '&':'&', '<':'<', '>':'>', '"':'"', "'":''' })[character]);
|
|
|
|
function voterId() {
|
|
let id = localStorage.getItem('skills-review-voter-id');
|
|
if (!id) { id = crypto.randomUUID(); localStorage.setItem('skills-review-voter-id', id); }
|
|
return id;
|
|
}
|
|
|
|
async function api(path, options = {}) {
|
|
const response = await fetch(`${API_BASE}${path}`, { ...options, headers: { 'Content-Type': 'application/json', 'X-Voter-Id': voterId(), ...options.headers } });
|
|
if (!response.ok) throw new Error(`vote API ${response.status}`);
|
|
return response.json();
|
|
}
|
|
|
|
function widgetMarkup(skillId, tally, you, unavailable, isUpdate = false) {
|
|
const total = (tally.original || 0) + (tally.improved || 0);
|
|
const share = (count) => total ? Math.round((count / total) * 100) : 0;
|
|
if (unavailable) return `<section class="vote-widget" aria-label="Vote unavailable"><span>READER VOTE</span><p>Voting is offline right now — the vote service is not configured or unreachable.</p></section>`;
|
|
return `<section class="vote-widget" aria-label="Vote on this review" data-skill="${escape(skillId)}">
|
|
<span>WHICH DRAFT WOULD YOU SHIP?</span>
|
|
<div class="vote-buttons" role="group" aria-label="Cast your vote">
|
|
<button data-vote="original" aria-pressed="${you === 'original'}">Original<b${isUpdate ? ' class="is-updating"' : ''}>${tally.original || 0} · ${share(tally.original || 0)}%</b></button>
|
|
<button data-vote="improved" aria-pressed="${you === 'improved'}">Improved draft<b${isUpdate ? ' class="is-updating"' : ''}>${tally.improved || 0} · ${share(tally.improved || 0)}%</b></button>
|
|
</div>
|
|
<p class="vote-note">${you ? `You voted ${you === 'original' ? 'original' : 'improved draft'}. Pick the other option to change it.` : 'One vote per visitor, tracked by network source.'}</p>
|
|
</section>`;
|
|
}
|
|
|
|
export async function renderVoteWidget(container, skillId) {
|
|
if (!API_BASE) { container.innerHTML = widgetMarkup(skillId, {}, null, true); return; }
|
|
container.innerHTML = widgetMarkup(skillId, {}, null, false);
|
|
const cast = async (choice) => {
|
|
container.innerHTML = widgetMarkup(skillId, {}, null, false);
|
|
try {
|
|
const result = await api('/api/votes', { method: 'POST', body: JSON.stringify({ skillId, choice }) });
|
|
container.innerHTML = widgetMarkup(skillId, { original: result.original, improved: result.improved }, result.you, false, true);
|
|
bind();
|
|
} catch { container.innerHTML = widgetMarkup(skillId, {}, null, true); }
|
|
};
|
|
function bind() { container.querySelectorAll('[data-vote]').forEach((button) => button.addEventListener('click', () => cast(button.dataset.vote))); }
|
|
try {
|
|
const result = await api(`/api/votes?skillId=${encodeURIComponent(skillId)}`);
|
|
container.innerHTML = widgetMarkup(skillId, result.tallies?.[skillId] || {}, result.you, false);
|
|
} catch { container.innerHTML = widgetMarkup(skillId, {}, null, true); }
|
|
bind();
|
|
}
|