shcizo/pdga-rating
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: redesign expanded row with detail-grid + history chart (#7)

Browse Source
This commit is contained in:
Samuel Enocsson
2026-05-21 14:03:52 +02:00
parent e5f16e624e
commit b75e60da65
5 changed files with 308 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/players.js
+43 -7
View File
@@ -1,5 +1,6 @@
let cachedDebugInfo = {};
let pendingPlayerData = null;
var cachedDebugInfo = {};
var pendingPlayerData = null;
var openPdgaNumber = null;
function setupTooltipsAfterSwap() {
document.body.addEventListener('htmx:afterSwap', function(event) {
@@ -9,7 +10,7 @@ function setupTooltipsAfterSwap() {
// After player history partial loads, render the chart
const target = event.detail.target;
if (target.id && target.id.startsWith('history-content-')) {
const container = target.querySelector('.chart-container');
const container = target.querySelector('.player-chart, .chart-container');
if (container && container.dataset.history) {
try {
const history = JSON.parse(container.dataset.history);
@@ -48,21 +49,46 @@ function initRatingsTooltips() {
}
function togglePlayerHistory(pdgaNumber) {
const historyRow = document.getElementById(`history-${pdgaNumber}`);
const contentDiv = document.getElementById(`history-content-${pdgaNumber}`);
var historyRow = document.getElementById('history-' + pdgaNumber);
var contentDiv = document.getElementById('history-content-' + pdgaNumber);
var expandableRow = document.getElementById('row-' + pdgaNumber);
if (historyRow.style.display === 'table-row') {
var isOpen = historyRow.style.display === 'table-row';
// Close any previously-open row
if (openPdgaNumber !== null && openPdgaNumber !== pdgaNumber) {
var prevHistory = document.getElementById('history-' + openPdgaNumber);
var prevRow = document.getElementById('row-' + openPdgaNumber);
if (prevHistory) {
prevHistory.style.display = 'none';
prevHistory.classList.remove('is-open');
}
if (prevRow) prevRow.classList.remove('row-open');
openPdgaNumber = null;
}
if (isOpen) {
historyRow.style.display = 'none';
historyRow.classList.remove('is-open');
expandableRow.classList.remove('row-open');
openPdgaNumber = null;
return;
}
historyRow.style.display = 'table-row';
// Force reflow so animation plays each open
historyRow.classList.remove('is-open');
void historyRow.offsetWidth;
historyRow.classList.add('is-open');
expandableRow.classList.add('row-open');
openPdgaNumber = pdgaNumber;
if (contentDiv.dataset.loaded === 'true') {
return;
}
htmx.ajax('GET', `/partials/player-history/${pdgaNumber}`, {target: `#history-content-${pdgaNumber}`, swap: 'innerHTML'});
htmx.ajax('GET', '/partials/player-history/' + pdgaNumber, {target: '#history-content-' + pdgaNumber, swap: 'innerHTML'});
contentDiv.dataset.loaded = 'true';
}
@@ -497,3 +523,13 @@ document.addEventListener('DOMContentLoaded', function() {
localStorage.setItem('ratingtracker.sparklines', next);
});
});
// ── Expandable row keyboard support ───────────────
document.addEventListener('keydown', function(e) {
if (e.key !== 'Enter' && e.key !== ' ') return;
var row = e.target;
if (!row.classList || !row.classList.contains('expandable-row')) return;
e.preventDefault();
var pdgaNumber = row.id.replace('row-', '');
togglePlayerHistory(parseInt(pdgaNumber, 10));
});