diff --git a/news-app/src/main.js b/news-app/src/main.js index ee90b8f..744dd8c 100644 --- a/news-app/src/main.js +++ b/news-app/src/main.js @@ -256,10 +256,18 @@ function renderCarModeCard(group, index, total) {
+ +
+ ${group.articles.slice(0, 5).map((article, i) => ` + + Link ${i + 1} + + `).join('')} +
-
+
${Array.from({ length: total }, (_, i) => ` -
+
`).join('')}
` @@ -321,20 +329,6 @@ function renderCarMode() {
${renderCarModeCard(currentGroup, state.carModeIndex, state.groups.length)} - - -
- - -
` @@ -721,6 +715,42 @@ document.addEventListener('keydown', (e) => { } }) +// Touch/swipe support for car mode +let touchStartX = 0 +let touchStartY = 0 +let touchEndX = 0 +let touchEndY = 0 + +document.addEventListener('touchstart', (e) => { + if (!state.carMode) return + touchStartX = e.changedTouches[0].screenX + touchStartY = e.changedTouches[0].screenY +}, { passive: true }) + +document.addEventListener('touchend', (e) => { + if (!state.carMode) return + touchEndX = e.changedTouches[0].screenX + touchEndY = e.changedTouches[0].screenY + handleSwipe() +}, { passive: true }) + +function handleSwipe() { + const deltaX = touchEndX - touchStartX + const deltaY = touchEndY - touchStartY + const minSwipeDistance = 50 + + // Only register as horizontal swipe if horizontal movement is greater than vertical + if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > minSwipeDistance) { + if (deltaX < 0) { + // Swiped left - go to next card + window.carModeNext() + } else { + // Swiped right - go to previous card + window.carModePrev() + } + } +} + // Initialize: either start car mode or fetch regular news if (isCarModeUrl) { // On dedicated car mode URL, directly enter car mode