jared/news-feed-car-mode
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add clickable navigation dots to car mode

Browse Source 
Users can now click on any dot in the card counter to jump directly
to that news card, making navigation more convenient.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
jared
2026-01-29 00:30:58 +00:00
parent 4224064f83
commit cd06b8f25c
1 changed files with 9 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
news-app/src/main.js
View File

@@ -267,7 +267,7 @@ function renderCarModeCard(group, index, total) {
<!-- Card counter -->
<div class="absolute bottom-6 sm:bottom-8 left-1/2 -translate-x-1/2 flex items-center justify-center z-30 max-w-[90vw] px-4">
${Array.from({ length: total }, (_, i) => `
<div class="shrink-0 rounded-full transition-all duration-300 ${i === index ? 'bg-white' : 'bg-white/40'}" style="width: ${i === index ? Math.max(12, Math.min(24, 200 / total)) : Math.max(6, Math.min(8, 120 / total))}px; height: ${Math.max(6, Math.min(8, 120 / total))}px; margin: 0 ${Math.max(2, Math.min(4, 60 / total))}px;"></div>
<div onclick="carModeGoTo(${i})" class="shrink-0 rounded-full transition-all duration-300 cursor-pointer hover:bg-white/70 ${i === index ? 'bg-white' : 'bg-white/40'}" style="width: ${i === index ? Math.max(12, Math.min(24, 200 / total)) : Math.max(6, Math.min(8, 120 / total))}px; height: ${Math.max(6, Math.min(8, 120 / total))}px; margin: 0 ${Math.max(2, Math.min(4, 60 / total))}px;"></div>
`).join('')}
</div>
`
@@ -624,6 +624,14 @@ window.carModePrev = function() {
transitionCard((state.carModeIndex - 1 + state.groups.length) % state.groups.length)
}
window.carModeGoTo = function(index) {
if (state.groups.length === 0 || state.isTransitioning) return
if (index < 0 || index >= state.groups.length) return
if (index === state.carModeIndex) return // Already on this card
stopCarModeCycle()
transitionCard(index)
}
function transitionCard(newIndex) {
state.isTransitioning = true
render() // This adds 'fading-out' class