mirror of
https://github.com/john-okeefe/foliate-js.git
synced 2026-10-21 14:49:51 -04:00
feat(paginator): manual touch scrolling in scrolled layouts — kill the native fling
Scrolled (webtoon) layouts now scroll single-finger drags manually, the same path paginated layouts always used: the browser's native touch scrolling — and its fling momentum — is suppressed so the full gesture stream stays observable to hosts. The reader's chrome UX (bookhoard handoff item 7) classifies vertical flicks from that stream: flick-down reveals, down/up dismisses. Side-swipes in paginated layouts and drags in scrolled ones both page/scroll exactly as before, minus momentum. Release behavior in scrolled layouts is stop-where-released — no snap, deliberately: webtoon panels don't align to screen boundaries and a snap would fight zoomed panning. Long jumps stay the position UI's job. Pinch zoom, multi-touch, and active touch selection keep their native behavior via the existing guards (they return before the preventDefault). Desktop wheel scrolling is untouched. Version 0.5.4.
This commit is contained in:
1 parent
7796b05582
commit
f622841e29
2 files changed
+13
-3
No files matched your search
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "foliate-js",
|
||||
"version": "0.5.3",
|
||||
"version": "0.5.4",
|
||||
"description": "Render e-books in the browser",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
||||
+12
-2
@@ -986,7 +986,14 @@ export class Paginator extends HTMLElement {
|
||||
const state = this.#touchState
|
||||
if (state.pinched) return
|
||||
state.pinched = globalThis.visualViewport.scale > 1
|
||||
if (this.scrolled || state.pinched) return
|
||||
// Scrolled layouts (webtoon) scroll MANUALLY, like paginated ones:
|
||||
// the browser's native touch scrolling — and its fling momentum —
|
||||
// is suppressed so the full gesture stream stays observable to
|
||||
// hosts (the reader classifies vertical flicks as chrome-reveal).
|
||||
// Momentum is deliberately absent: drags are 1:1 and stop dead on
|
||||
// release (no snap — webtoon panels don't align to screen
|
||||
// boundaries); long jumps go through the reader's position UI.
|
||||
if (state.pinched) return
|
||||
if (this.#touchSelActive) return
|
||||
if (e.touches.length > 1) {
|
||||
if (this.#touchScrolled) e.preventDefault()
|
||||
@@ -1008,11 +1015,14 @@ export class Paginator extends HTMLElement {
|
||||
#onTouchEnd() {
|
||||
const wasScrolled = this.#touchScrolled
|
||||
this.#touchScrolled = false
|
||||
if (this.scrolled || this.#touchSelActive) return
|
||||
if (this.#touchSelActive) return
|
||||
// A touch that never panned (a tap) is already page-aligned;
|
||||
// snapping anyway emits a no-op relocate, which readers treat
|
||||
// as a page turn (e.g. dismissing a just-opened popover).
|
||||
if (!wasScrolled) return
|
||||
// No velocity paging in scrolled layouts: content stays exactly
|
||||
// where released.
|
||||
if (this.scrolled) return
|
||||
|
||||
// XXX: Firefox seems to report scale as 1... sometimes...?
|
||||
// at this point I'm basically throwing `requestAnimationFrame` at
|
||||
|
||||
Reference in new issue
Block a user