Continuous manager fixes

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",

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") {

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
+		// View is already shown, just move to correct location in view
-		if(visible && target) {
+		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();
+		let container = this.container.getBoundingClientRect();
-		var pageHeight = (container.height < window.innerHeight) ? container.height : window.innerHeight;
+		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 startPos = position.top - container.top + offset + used;
-			let endPos = startPos + pageHeight;
+			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;
+			let endPage = Math.ceil(endPos / pageHeight);
-			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);
 			}
 
@@ -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++) {
+			pages = [currPage];
-				let pg = currPage + i;
+			for (var i = currPage; i <= endPage; i++) {
+				let pg = i;
 				pages.push(pg);
 			}
 

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)
+		this.manager.display(section, target)
-			.then(function(){
+			.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],
+					page: end.pages[end.pages.length-1] || 1,
-					totalPages: end.totalPages
+					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;
 		}