diff --git a/client/components/readers/EpubReader.vue b/client/components/readers/EpubReader.vue index 339d73bf..bf4ba697 100644 --- a/client/components/readers/EpubReader.vue +++ b/client/components/readers/EpubReader.vue @@ -280,7 +280,10 @@ export default { reader.rendition = reader.book.renderTo('viewer', { width: this.readerWidth, height: this.readerHeight * 0.8, - spread: 'auto' + spread: 'auto', + snap: true, + manager: 'continuous', + flow: 'paginated' }) // load saved progress @@ -295,21 +298,11 @@ export default { reader.rendition.on('relocated', reader.relocated) reader.rendition.on('keydown', reader.keyUp) - let touchStart = 0 - let touchEnd = 0 reader.rendition.on('touchstart', (event) => { - touchStart = event.changedTouches[0].screenX + this.$emit('touchstart', event) }) - reader.rendition.on('touchend', (event) => { - touchEnd = event.changedTouches[0].screenX - const touchDistanceX = Math.abs(touchEnd - touchStart) - if (touchStart < touchEnd && touchDistanceX > 120) { - this.next() - } - if (touchStart > touchEnd && touchDistanceX > 120) { - this.prev() - } + this.$emit('touchend', event) }) // load ebook cfi locations diff --git a/client/components/readers/PdfReader.vue b/client/components/readers/PdfReader.vue index e6b83762..3100f907 100644 --- a/client/components/readers/PdfReader.vue +++ b/client/components/readers/PdfReader.vue @@ -11,10 +11,10 @@ -
+ -
+ diff --git a/client/components/readers/Reader.vue b/client/components/readers/Reader.vue index b9d92286..120bb400 100644 --- a/client/components/readers/Reader.vue +++ b/client/components/readers/Reader.vue @@ -10,10 +10,10 @@
-

+

{{ abTitle }} - – - {{ abAuthor }} + +

@@ -23,7 +23,7 @@
- +
@@ -58,7 +58,7 @@

{{ $strings.HeaderEreaderSettings }}

-
+

{{ $strings.LabelTheme }}:

@@ -92,6 +92,12 @@ export default { data() { return { + touchstartX: 0, + touchstartY: 0, + touchendX: 0, + touchendY: 0, + touchstartTime: 0, + touchIdentifier: null, chapters: [], tocOpen: false, showSettings: false, @@ -262,11 +268,61 @@ export default { prev() { if (this.$refs.readerComponent?.prev) this.$refs.readerComponent.prev() }, + handleGesture() { + // Touch must be less than 1s. Must be > 60px drag and X distance > Y distance + const touchTimeMs = Date.now() - this.touchstartTime + if (touchTimeMs >= 1000) { + console.log('Touch too long', touchTimeMs) + return + } + + const touchDistanceX = Math.abs(this.touchendX - this.touchstartX) + const touchDistanceY = Math.abs(this.touchendY - this.touchstartY) + const touchDistance = Math.sqrt(Math.pow(this.touchstartX - this.touchendX, 2) + Math.pow(this.touchstartY - this.touchendY, 2)) + if (touchDistance < 60) { + return + } + + if (touchDistanceX < 60 || touchDistanceY > touchDistanceX) { + return + } + + if (this.touchendX < this.touchstartX) { + this.next() + } + if (this.touchendX > this.touchstartX) { + this.prev() + } + }, + touchstart(e) { + // Ignore rapid touch + if (this.touchstartTime && Date.now() - this.touchstartTime < 250) { + return + } + + this.touchstartX = e.touches[0].screenX + this.touchstartY = e.touches[0].screenY + this.touchstartTime = Date.now() + this.touchIdentifier = e.touches[0].identifier + }, + touchend(e) { + if (this.touchIdentifier !== e.changedTouches[0].identifier) { + return + } + + this.touchendX = e.changedTouches[0].screenX + this.touchendY = e.changedTouches[0].screenY + this.handleGesture() + }, registerListeners() { this.$eventBus.$on('reader-hotkey', this.hotkey) + document.body.addEventListener('touchstart', this.touchstart) + document.body.addEventListener('touchend', this.touchend) }, unregisterListeners() { this.$eventBus.$off('reader-hotkey', this.hotkey) + document.body.removeEventListener('touchstart', this.touchstart) + document.body.removeEventListener('touchend', this.touchend) }, loadEreaderSettings() { try {