diff --git a/src/plugins/bookPlayer/plugin.js b/src/plugins/bookPlayer/plugin.js index 8cde3f400f..0c3d6850aa 100644 --- a/src/plugins/bookPlayer/plugin.js +++ b/src/plugins/bookPlayer/plugin.js @@ -19,6 +19,8 @@ export class BookPlayer { this.onDialogClosed = this.onDialogClosed.bind(this); this.openTableOfContents = this.openTableOfContents.bind(this); + this.prevChapter = this.prevChapter.bind(this); + this.nextChapter = this.nextChapter.bind(this); this.onWindowKeyUp = this.onWindowKeyUp.bind(this); } @@ -123,26 +125,6 @@ export class BookPlayer { } } - onTouchStart(e) { - // TODO: depending on the event this can be the document or the rendition itself - const rendition = this._rendition || this; - const book = rendition.book; - - // check that the event is from the book or the document - if (!book || this._loaded === false) return; - - // epubjs stores pages off the screen or something for preloading - // get the modulus of the touch event to account for the increased width - if (!e.touches || e.touches.length === 0) return; - - const touch = e.touches[0].clientX % dom.getWindowSize().innerWidth; - if (touch < dom.getWindowSize().innerWidth / 2) { - book.package.metadata.direction === 'rtl' ? rendition.next() : rendition.prev(); - } else { - book.package.metadata.direction === 'rtl' ? rendition.prev() : rendition.next(); - } - } - onDialogClosed() { this.stop(); } @@ -151,27 +133,33 @@ export class BookPlayer { const elem = this._mediaElement; elem.addEventListener('close', this.onDialogClosed, {once: true}); - elem.querySelector('.btnBookplayerExit').addEventListener('click', this.onDialogClosed, {once: true}); - elem.querySelector('.btnBookplayerToc').addEventListener('click', this.openTableOfContents); + elem.querySelector('#btnBookplayerExit').addEventListener('click', this.onDialogClosed, {once: true}); + elem.querySelector('#btnBookplayerToc').addEventListener('click', this.openTableOfContents); + if (browser.mobile) { + elem.querySelector('#btnBookplayerPrev').addEventListener('click', this.prevChapter); + elem.querySelector('#btnBookplayerNext').addEventListener('click', this.nextChapter); + } } bindEvents() { this.bindMediaElementEvents(); document.addEventListener('keyup', this.onWindowKeyUp); - document.addEventListener('touchstart', this.onTouchStart); // FIXME: I don't really get why document keyup event is not triggered when epub is in focus this._rendition.on('keyup', this.onWindowKeyUp); - this._rendition.on('touchstart', this.onTouchStart); } unbindMediaElementEvents() { const elem = this._mediaElement; elem.removeEventListener('close', this.onDialogClosed); - elem.querySelector('.btnBookplayerExit').removeEventListener('click', this.onDialogClosed); - elem.querySelector('.btnBookplayerToc').removeEventListener('click', this.openTableOfContents); + elem.querySelector('#btnBookplayerExit').removeEventListener('click', this.onDialogClosed); + elem.querySelector('#btnBookplayerToc').removeEventListener('click', this.openTableOfContents); + if (browser.mobile) { + elem.querySelector('#btnBookplayerPrev').removeEventListener('click', this.prevChapter); + elem.querySelector('#btnBookplayerNext').removeEventListener('click', this.nextChapter); + } } unbindEvents() { @@ -180,11 +168,9 @@ export class BookPlayer { } document.removeEventListener('keyup', this.onWindowKeyUp); - document.removeEventListener('touchstart', this.onTouchStart); if (this._rendition) { this._rendition.off('keyup', this.onWindowKeyUp); - this._rendition.off('touchstart', this.onTouchStart); } } @@ -194,6 +180,16 @@ export class BookPlayer { } } + prevChapter(e) { + this._rendition.prev(); + e.preventDefault(); + } + + nextChapter(e) { + this._rendition.next(); + e.preventDefault(); + } + createMediaElement() { let elem = this._mediaElement; if (elem) { @@ -214,13 +210,22 @@ export class BookPlayer { elem.id = 'bookPlayer'; let html = ''; - html += '