diff --git a/package.json b/package.json index cbb645e..4046115 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "epubjs", - "version": "0.3.45", + "version": "0.3.46", "description": "Parse and Render Epubs", "main": "lib/index.js", "module": "src/index.js", diff --git a/src/managers/continuous/index.js b/src/managers/continuous/index.js index 8dcbe33..dc5230f 100644 --- a/src/managers/continuous/index.js +++ b/src/managers/continuous/index.js @@ -5,7 +5,6 @@ import debounce from 'lodash/debounce' class ContinuousViewManager extends DefaultViewManager { constructor(options) { super(options); - // DefaultViewManager.apply(this, arguments); // call super constructor. this.name = "continuous"; @@ -21,12 +20,11 @@ class ContinuousViewManager extends DefaultViewManager { extend(this.settings, options.settings || {}); - // Gap can be 0, byt defaults doesn't handle that + // Gap can be 0, but defaults doesn't handle that if (options.settings.gap != "undefined" && options.settings.gap === 0) { this.settings.gap = options.settings.gap; } - // this.viewSettings.axis = this.settings.axis; this.viewSettings = { ignoreClass: this.settings.ignoreClass, axis: this.settings.axis, @@ -112,37 +110,6 @@ class ContinuousViewManager extends DefaultViewManager { } */ - // resize(width, height){ - // - // // Clear the queue - // this.q.clear(); - // - // this._stageSize = this.stage.size(width, height); - // console.log("resize says", this._stageSize, width, height); - // this._bounds = this.bounds(); - // - // // Update for new views - // this.viewSettings.width = this._stageSize.width; - // this.viewSettings.height = this._stageSize.height; - // - // // Update for existing views - // this.views.each(function(view) { - // view.size(this._stageSize.width, this._stageSize.height); - // }.bind(this)); - // - // this.updateLayout(); - // - // // if(this.location) { - // // this.rendition.display(this.location.start); - // // } - // - // this.emit("resized", { - // width: this._stageSize.width, - // height: this._stageSize.height - // }); - // - // } - onResized(e) { // this.views.clear(); @@ -250,7 +217,6 @@ class ContinuousViewManager extends DefaultViewManager { var updating = new defer(); var promises = []; - for (var i = 0; i < viewsLength; i++) { view = views[i]; @@ -336,17 +302,14 @@ class ContinuousViewManager extends DefaultViewManager { if(newViews.length){ return Promise.all(promises) .then(() => { + // Check to see if anything new is on screen after rendering return this.update(delta); }); - // Check to see if anything new is on screen after rendering - // return this.q.enqueue(function(){ - // this.update(delta); - // }.bind(this)); - - - // }.bind(this)); } else { + this.q.enqueue(function(){ + this.update(); + }.bind(this)); checking.resolve(false); return checking.promise; } @@ -468,8 +431,6 @@ class ContinuousViewManager extends DefaultViewManager { let scrollTop; let scrollLeft; - // if(!this.ignore) { - if(this.settings.height) { scrollTop = this.container.scrollTop; scrollLeft = this.container.scrollLeft; @@ -484,36 +445,6 @@ class ContinuousViewManager extends DefaultViewManager { if(!this.ignore) { this._scrolled(); - // if((this.scrollDeltaVert === 0 && - // this.scrollDeltaHorz === 0) || - // this.scrollDeltaVert > this.settings.offsetDelta || - // this.scrollDeltaHorz > this.settings.offsetDelta) { - if(this.scrollDeltaVert > this.settings.offsetDelta || - this.scrollDeltaHorz > this.settings.offsetDelta) { - // console.log("scroll", this.scrollDeltaHorz); - // - // this.q.enqueue(function() { - // this.check(); - // }.bind(this)); - // // this.check(); - // - // this.scrollDeltaVert = 0; - // this.scrollDeltaHorz = 0; - // - // this.emit("scroll", { - // top: scrollTop, - // left: scrollLeft - // }); - // - // clearTimeout(this.afterScrolled); - // this.afterScrolled = setTimeout(function () { - // this.emit("scrolled", { - // top: this.scrollTop, - // left: this.scrollLeft - // }); - // }.bind(this)); - - } } else { this.ignore = false; @@ -533,9 +464,6 @@ class ContinuousViewManager extends DefaultViewManager { this.scrolled = false; - // } - - // this.tick.call(window, this.onScroll.bind(this)); } @@ -558,36 +486,6 @@ class ContinuousViewManager extends DefaultViewManager { }.bind(this)); } - // updateLayout() { - // - // if (!this.stage) { - // return; - // } - // - // if(this.settings.axis === "vertical") { - // this.layout.calculate(this._stageSize.width, this._stageSize.height); - // } else { - // this.layout.calculate( - // this._stageSize.width, - // this._stageSize.height, - // this.settings.gap - // ); - // - // // Set the look ahead offset for what is visible - // this.settings.offset = this.layout.delta; - // - // // this.stage.addStyleRules("iframe", [{"padding" : "0 " + (this.layout.gap / 2) + "px"}]); - // - // } - // - // // Set the dimensions for views - // this.viewSettings.width = this.layout.width; - // this.viewSettings.height = this.layout.height; - // - // this.setLayout(this.layout); - // - // } - next(){ if(this.settings.axis === "horizontal") { diff --git a/src/managers/default/index.js b/src/managers/default/index.js index 5adac01..34739dc 100644 --- a/src/managers/default/index.js +++ b/src/managers/default/index.js @@ -207,18 +207,27 @@ class DefaultViewManager { var displaying = new defer(); var displayed = displaying.promise; - /* TODO: this needs more testing, always re-render for now + // Check if moving to target is needed + if (target === section.href || parseInt(target)) { + target = undefined; + } + // Check to make sure the section we want isn't already shown var visible = this.views.find(section); - // View is already shown, just move to correct location - if(visible && target) { - let offset = visible.locationOf(target); - this.moveTo(offset); + // View is already shown, just move to correct location in view + if(visible && section) { + let offset = visible.offset(); + this.scrollTo(offset.left, offset.top, true); + + if(target) { + let offset = visible.locationOf(target); + this.moveTo(offset); + } + displaying.resolve(); return displayed; } - */ // Hide all current views this.clear(); @@ -433,6 +442,8 @@ class DefaultViewManager { } clear () { + this.q.clear(); + if (this.views) { this.views.hide(); this.scrollTo(0,0, true); @@ -449,62 +460,14 @@ class DefaultViewManager { } return this.location; } - /* - scrolledLocation(){ - var visible = this.visible(); - var startPage, endPage; - var startA, startB, endA, endB; - var last; - var container = this.container.getBoundingClientRect(); - var pageHeight = (container.height < window.innerHeight) ? container.height : window.innerHeight; - var offset = 0; - - if(!this.settings.height) { - offset = window.scrollY; - } - - if(visible.length === 1) { - startA = (container.top - visible[0].position().top) + offset; - endA = startA + pageHeight; - startPage = this.mapping.page(visible[0].contents, visible[0].section.cfiBase, startA, endA) - - return { - index : visible[0].section.index, - href : visible[0].section.href, - start: startPage.start, - end: startPage.end - }; - } - - if(visible.length > 1) { - last = visible.length - 1; - - startA = (container.top - visible[0].position().top) + offset; - endA = startA + (container.top - visible[0].position().bottom); - - startB = (container.top - visible[last].position().top) + offset; - endB = pageHeight - startB; - - startPage = this.mapping.page(visible[0].contents, visible[0].section.cfiBase, startA, endA) - endPage = this.mapping.page(visible[last].contents, visible[last].section.cfiBase, startB, endB); - - return { - index : visible[last].section.index, - href : visible[last].section.href, - start: startPage.start, - end: endPage.end - }; - } - - } - */ scrolledLocation() { let visible = this.visible(); - var container = this.container.getBoundingClientRect(); - var pageHeight = (container.height < window.innerHeight) ? container.height : window.innerHeight; + let container = this.container.getBoundingClientRect(); + let pageHeight = (container.height < window.innerHeight) ? container.height : window.innerHeight; - var offset = 0; + let offset = 0; + let used = 0; if(this.fullsize) { offset = window.scrollY; @@ -513,18 +476,21 @@ class DefaultViewManager { let sections = visible.map((view) => { let {index, href} = view.section; let position = view.position(); - let startPos = position.top - container.top + offset; - let endPos = startPos + pageHeight; + let startPos = position.top - container.top + offset + used; + let endPos = startPos + pageHeight - used; if (endPos > position.bottom - container.top + offset) { endPos = position.bottom - container.top + offset; + used = (endPos - startPos); } let totalPages = this.layout.count(view._height, pageHeight).pages; - let currPage = Math.round(startPos / pageHeight); + let currPage = Math.ceil(startPos / pageHeight); let pages = []; - let numPages = (endPos - startPos) / pageHeight; - for (var i = 1; i <= numPages; i++) { - let pg = currPage + i; + let endPage = Math.ceil(endPos / pageHeight); + + pages = [currPage]; + for (var i = currPage; i <= endPage; i++) { + let pg = i; pages.push(pg); } @@ -544,9 +510,9 @@ class DefaultViewManager { paginatedLocation(){ let visible = this.visible(); - var container = this.container.getBoundingClientRect(); + let container = this.container.getBoundingClientRect(); - var left = 0; + let left = 0; let used = 0; if(this.fullsize) { @@ -574,12 +540,13 @@ class DefaultViewManager { } let totalPages = this.layout.count(width).pages; - let currPage = Math.floor((startPos - offset) / this.layout.pageWidth); + let currPage = Math.ceil((startPos + (this.layout.gap) - offset) / this.layout.pageWidth); let pages = []; - let numPages = Math.floor((endPos - startPos) / this.layout.pageWidth); + let endPage = Math.ceil((endPos - (this.layout.gap) - offset) / this.layout.pageWidth); - for (var i = 1; i <= numPages; i++) { - let pg = currPage + i; + pages = [currPage]; + for (var i = currPage; i <= endPage; i++) { + let pg = i; pages.push(pg); } diff --git a/src/rendition.js b/src/rendition.js index 79196f0..311472a 100644 --- a/src/rendition.js +++ b/src/rendition.js @@ -227,9 +227,10 @@ class Rendition { * @return {Promise} */ display(target){ - + if (this.displaying) { + this.displaying.resolve(); + } return this.q.enqueue(this._display, target); - } /** @@ -248,6 +249,8 @@ class Rendition { var section; var moveTo; + this.displaying = displaying; + // Check if this is a book percentage if (this.book.locations.length && (isFloat(target) || @@ -263,12 +266,16 @@ class Rendition { return displayed; } - return this.manager.display(section, target) - .then(function(){ + this.manager.display(section, target) + .then(() => { + displaying.resolve(section); + this.displaying = undefined; + this.emit("displayed", section); this.reportLocation(); - }.bind(this)); + }); + return displayed; } /* @@ -327,7 +334,6 @@ class Rendition { this.emit("rendered", view.section, view); }); } else { - console.log("no contents", view.index); this.emit("rendered", view.section, view); } @@ -351,7 +357,7 @@ class Rendition { */ onResized(size){ - if (this.location) { + if (this.location && this.location.start) { // this.manager.clear(); this.display(this.location.start.cfi); } @@ -518,12 +524,18 @@ class Rendition { * @private */ reportLocation(){ - return this.q.enqueue(function(){ + return this.q.enqueue(function reportedLocation(){ var location = this.manager.currentLocation(); if (location && location.then && typeof location.then === "function") { location.then(function(result) { let located = this.located(result); + + if (!located || !located.start || !located.end) { + return; + } + this.location = located; + this.emit("locationChanged", { index: this.location.start.index, href: this.location.start.href, @@ -536,6 +548,11 @@ class Rendition { }.bind(this)); } else if (location) { let located = this.located(location); + + if (!located || !located.start || !located.end) { + return; + } + this.location = located; this.emit("locationChanged", { @@ -582,7 +599,7 @@ class Rendition { href: start.href, cfi: start.mapping.start, displayed: { - page: start.pages[0], + page: start.pages[0] || 1, total: start.totalPages } }, @@ -591,8 +608,8 @@ class Rendition { href: end.href, cfi: end.mapping.end, displayed: { - page: end.pages[end.pages.length-1], - totalPages: end.totalPages + page: end.pages[end.pages.length-1] || 1, + total: end.totalPages } } }; @@ -620,7 +637,7 @@ class Rendition { } if (end.index === this.book.spine.last().index && - located.end.displayed.page >= located.end.displayed.totalPages) { + located.end.displayed.page >= located.end.displayed.total) { located.atEnd = true; }