Skip to content

Commit 5a33971

Browse files
ajslaterclaude
andauthored
feat(reader): swipe to turn pages on touch devices (#766)
Override v-window's default touch handlers in the horizontal pager so left/right swipes route through ``routeToDirection`` instead of trying to flip between the (disabled) v-window items. Mirrors the keyboard arrow behavior, so RTL handling is automatic via ``normalizeDirection``. Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 parent 7536979 commit 5a33971

1 file changed

Lines changed: 16 additions & 0 deletions

File tree

frontend/src/components/reader/pager/pager-horizontal.vue

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
continuous
55
:model-value="windowIndex"
66
:reverse="isReadInReverse"
7+
:touch="swipeHandlers"
78
>
89
<template #prev>
910
<PageChangeLink direction="prev" />
@@ -87,6 +88,20 @@ export default {
8788
const val = this.activePage - this.pages[0];
8889
return Math.min(Math.max(0, val), this.book?.maxPage || 0);
8990
},
91+
swipeHandlers() {
92+
/*
93+
* Override v-window's built-in touch nav so swipes route
94+
* through the comic page URL like the keyboard arrows do.
95+
* The default handlers call v-window's internal prev/next,
96+
* which are no-ops here because all items are ``disabled``.
97+
* Matching ArrowRight → ``next`` and ArrowLeft → ``prev``
98+
* lets ``routeToDirection`` normalize for RTL the same way.
99+
*/
100+
return {
101+
left: () => this.routeToDirection("next"),
102+
right: () => this.routeToDirection("prev"),
103+
};
104+
},
90105
},
91106
watch: {
92107
twoPages() {
@@ -119,6 +134,7 @@ export default {
119134
methods: {
120135
...mapActions(useReaderStore, [
121136
"getBookSettings",
137+
"routeToDirection",
122138
"setBookChangeFlag",
123139
"setActivePage",
124140
]),

0 commit comments

Comments
 (0)