Bookhoard/foliate-js
1
0
Fork 0
mirror of https://github.com/john-okeefe/foliate-js.git synced 2026-09-09 11:29:14 -04:00
Code Issues Packages Projects Releases Wiki Activity

Make scrollBy and snap accept both axes

Browse Source 
So that event handlers don't need to know the axis
This commit is contained in:
John Factotum
2023-05-27 01:45:49 +08:00
parent 81c595fcc3
commit 90a1706e82
1 changed files with 13 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
paginator.js
+13 -10
View File
@@ -596,7 +596,8 @@ export class Paginator extends HTMLElement {
get pages() { get pages() {
return Math.round(this.viewSize / this.size) return Math.round(this.viewSize / this.size)
} }
scrollBy(delta) { scrollBy(dx, dy) {
const delta = this.#vertical ? dy : dx
const element = this.#container const element = this.#container
const { scrollProp } = this const { scrollProp } = this
const [offset, a, b] = this.#scrollBounds const [offset, a, b] = this.#scrollBounds
@@ -606,7 +607,8 @@ export class Paginator extends HTMLElement {
element[scrollProp] = Math.max(min, Math.min(max, element[scrollProp] = Math.max(min, Math.min(max,
element[scrollProp] + delta)) element[scrollProp] + delta))
} }
snap(velocity) { snap(vx, vy) {
const velocity = this.#vertical ? vy : vx
const [offset, a, b] = this.#scrollBounds const [offset, a, b] = this.#scrollBounds
const { start, end, pages, size } = this const { start, end, pages, size } = this
const min = Math.abs(offset) - a const min = Math.abs(offset) - a
@@ -627,9 +629,9 @@ export class Paginator extends HTMLElement {
#onTouchStart(e) { #onTouchStart(e) {
const touch = e.changedTouches[0] const touch = e.changedTouches[0]
this.#touchState = { this.#touchState = {
x: this.#vertical ? touch?.screenY : touch?.screenX, x: touch?.screenX, y: touch?.screenY,
t: e.timeStamp, t: e.timeStamp,
v: 0, vx: 0, xy: 0,
} }
} }
#onTouchMove(e) { #onTouchMove(e) {
@@ -638,17 +640,18 @@ export class Paginator extends HTMLElement {
if (e.touches.length > 1) return if (e.touches.length > 1) return
const state = this.#touchState const state = this.#touchState
const touch = e.changedTouches[0] const touch = e.changedTouches[0]
const x = this.#vertical ? touch.screenY : touch.screenX const x = touch.screenX, y = touch.screenY
const deltaX = state.x - x const dx = state.x - x, dy = state.y - y
const deltaT = e.timeStamp - state.t const dt = e.timeStamp - state.t
state.x = x state.x = x
state.t = e.timeStamp state.t = e.timeStamp
state.v = deltaX / deltaT state.vx = dx / dt
this.scrollBy(deltaX) state.vy = dy / dt
this.scrollBy(dx, dy)
} }
#onTouchEnd() { #onTouchEnd() {
if (this.scrolled) return if (this.scrolled) return
this.snap(this.#touchState.v) this.snap(this.#touchState.vx, this.#touchState.vy)
} }
// allows one to process rects as if they were LTR and horizontal // allows one to process rects as if they were LTR and horizontal
#getRectMapper() { #getRectMapper() {