Add Next album navigation button to album cards
- Add "Next" button to album cards for sequential navigation through rankings - Button shows "Next (#rank+1)" and uses existing jump-to-rank functionality - Button only appears on albums 1-499 (not on album #500) - Styled to match Wikipedia and Spotify links with theme-aware colors - Uses right arrow SVG icon and hover effects consistent with other links - Clicking Next button jumps to the next sequential album in the ranking Features: • Sequential navigation through the Top 500 albums • Smart button hiding on the last album (#500) • Theme-aware styling with CSS custom properties • Consistent visual design with existing link buttons • Smooth scroll navigation using existing jump functionality 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
a3bdd4b217
commit
2720eb1f4b
2 changed files with 52 additions and 0 deletions
21
script.js
21
script.js
|
|
@ -295,6 +295,14 @@ function createAlbumCard(album) {
|
|||
</svg>
|
||||
Listen on Spotify
|
||||
</a>
|
||||
${album.Rank < 500 ? `
|
||||
<button class="next-album-link" data-rank="${album.Rank}" title="Go to next album (#${album.Rank + 1})">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 0.5rem;">
|
||||
<polyline points="9,18 15,12 9,6"></polyline>
|
||||
</svg>
|
||||
Next (#${album.Rank + 1})
|
||||
</button>
|
||||
` : ''}
|
||||
</div>
|
||||
<button class="album-share" title="Share this album" data-rank="${album.Rank}">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
|
|
@ -315,6 +323,19 @@ function createAlbumCard(album) {
|
|||
handleAlbumShare(rank, this);
|
||||
});
|
||||
|
||||
// Add click handler for next button
|
||||
const nextBtn = card.querySelector('.next-album-link');
|
||||
if (nextBtn) {
|
||||
nextBtn.addEventListener('click', function(e) {
|
||||
e.stopPropagation(); // Prevent card click
|
||||
const currentRank = parseInt(this.getAttribute('data-rank'));
|
||||
const nextRank = currentRank + 1;
|
||||
if (nextRank <= 500) {
|
||||
jumpToRankNumber(nextRank);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return card;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue