Add render changes to queue, fix view bounds

examples/single.html

@@ -71,7 +71,8 @@
     // Load the opf
     var book = ePub("../books/moby-dick/OPS/package.opf");
     var rendition = book.renderTo("viewer");
-    var displayed = rendition.display(currentSectionIndex);
+    
+    rendition.display("chapter_008.xhtml");
 
 
     var next = document.getElementById("next");

gulpfile.js

@@ -32,7 +32,6 @@ gulp.task('minify', function(){
       'lib/epubjs/book.js',
       'lib/epubjs/view.js',
       'lib/epubjs/layout.js',
-      'lib/epubjs/infinite.js',
       'lib/epubjs/rendition.js',
       'lib/epubjs/continuous.js',
       'lib/epubjs/paginate.js'

lib/epubjs/continuous.js

@@ -27,12 +27,15 @@ EPUBJS.Continuous.prototype.constructor = EPUBJS.Continuous;
 
 EPUBJS.Continuous.prototype.attachListeners = function(){
 
-	// Listen to window for resize event
+	// Listen to window for resize event if width or height is set to 100%
+	if(this.settings.width === "100%" || this.settings.height === "100%") {
 		window.addEventListener("resize", this.onResized.bind(this), false);
+	}
 
 	if(this.settings.infinite) {
-		this.infinite = new EPUBJS.Infinite(this.container);
+		//this.infinite = new EPUBJS.Infinite(this.container);
-		this.infinite.on("scroll", this.check.bind(this));
+		//this.infinite.on("scroll", this.check.bind(this));
+		this.start();
 	}
 
 };
@@ -53,18 +56,21 @@ EPUBJS.Continuous.prototype.display = function(what){
 			view = new EPUBJS.View(section);
 			
 			// This will clear all previous views
-			this.fill(view);
+			this.q.enqueue(this.fill, view);
 
+			//this.q.enqueue(function(){
 				// Move to correct place within the section, if needed
-			// this.moveTo(what)
+				// return this.moveTo(what)
+			//});
 			
-			this.check();
+			this.q.enqueue(this.check);
 			
-			view.displayed.then(function(){
+			// view.displayed.then(function(){
-				this.trigger("displayed", section);
+			// 	this.trigger("displayed", section);
-				this.displaying = false;
+			// 	this.displaying = false;
+			// displaying.resolve(this);
+			//}.bind(this));
 			displaying.resolve(this);
-			}.bind(this));
 	
 		} else {
 			displaying.reject(new Error("No Section Found"));
@@ -92,17 +98,18 @@ EPUBJS.Continuous.prototype.afterDisplayed = function(currView){
 
 	if(index + 1 === this.views.length && next) {
 		nextView = new EPUBJS.View(next);
-		this.append(nextView);
+		this.q.enqueue(this.append, nextView);
 	}
 
 	if(index === 0 && prev) {
 		prevView = new EPUBJS.View(prev);
-		this.prepend(prevView);
+		this.q.enqueue(this.prepend, prevView);
 	}
 
 	// this.removeShownListeners(currView);
 	currView.onShown = this.afterDisplayed.bind(this);
 
+	this.trigger("displayed", currView.section);
 
 };
 
@@ -117,11 +124,11 @@ EPUBJS.Continuous.prototype.afterDisplayedAbove = function(currView){
 		return;
 	}
 	// bounds = currView.bounds();
-	
+	console.log("afterDisplayedAbove")
 	if(this.settings.axis === "vertical") {
-		this.infinite.scrollBy(0, bounds.height, true);
+		this.scrollBy(0, bounds.height, true);
 	} else {
-		this.infinite.scrollBy(bounds.width, 0, true);
+		this.scrollBy(bounds.width, 0, true);
 	}
 	
 	// if(this.settings.axis === "vertical") {
@@ -159,6 +166,8 @@ EPUBJS.Continuous.prototype.append = function(view){
 	// view.on("shown", this.afterDisplayed.bind(this));
 	view.onShown = this.afterDisplayed.bind(this);
 	// this.resizeView(view);
+
+	return this.check();
 };
 
 EPUBJS.Continuous.prototype.prepend = function(view){
@@ -170,7 +179,7 @@ EPUBJS.Continuous.prototype.prepend = function(view){
 	// view.on("shown", this.afterDisplayedAbove.bind(this));
 
 	// this.resizeView(view);
-	
+	return this.check();
 };
 
 EPUBJS.Continuous.prototype.fill = function(view){
@@ -186,6 +195,7 @@ EPUBJS.Continuous.prototype.fill = function(view){
 	// view.on("shown", this.afterDisplayed.bind(this));
 	view.onShown = this.afterDisplayed.bind(this);
 
+	return this.render(view);
 };
 
 EPUBJS.Continuous.prototype.insert = function(view, index) {
@@ -197,6 +207,7 @@ EPUBJS.Continuous.prototype.insert = function(view, index) {
 		this.container.appendChild(view.element);
 	}
 
+	return this.check();
 };
 
 // Remove the render element and clean up listeners
@@ -241,19 +252,37 @@ EPUBJS.Continuous.prototype.isVisible = function(view, _container){
 	var container = _container || this.container.getBoundingClientRect();
 
 	if((position.bottom >= container.top - this.settings.offset) &&
-		!(position.top > container.bottom) &&
+		!(position.top >= container.bottom + this.settings.offset) &&
-		(position.right >= container.left) &&
+		(position.right >= container.left - this.settings.offset) &&
-		!(position.left > container.right + this.settings.offset)) {
+		!(position.left >= container.right + this.settings.offset)) {
-		// Visible
+
+		return true;
+		
+	} else {
+		return false;
+	}
+};
+
+EPUBJS.Continuous.prototype.check = function(){
+	var checking = new RSVP.defer();
+	var container = this.container.getBoundingClientRect();
+
+	this.views.forEach(function(view){
+		var visible = this.isVisible(view, container);
+		
+		if(visible) {
 			
-		// Fit to size of the container, apply padding
-		// this.resizeView(view);
 			if(!view.shown && !this.rendering) {
-			// console.log("render", view.index);
+				this.q.enqueue(function(){
-			this.render(view).then(function(){
+
+						return this.render(view)
+							.then(function(){
+							
 								// Check to see if anything new is on screen after rendering
-				this.check();
+								return this.check();
+
 							}.bind(this));
+				});
 
 			}
 
@@ -261,15 +290,10 @@ EPUBJS.Continuous.prototype.isVisible = function(view, _container){
 			
 			if(view.shown) {
 				view.destroy();
-			// console.log("destroy:", view.section.index)
 			}
-	}
-};
 
-EPUBJS.Continuous.prototype.check = function(){
+		}
-	var container = this.container.getBoundingClientRect();
+
-	this.views.forEach(function(view){
-		this.isVisible(view, container);
 	}.bind(this));
 	
 	clearTimeout(this.trimTimeout);
@@ -277,26 +301,30 @@ EPUBJS.Continuous.prototype.check = function(){
 		this.trim();
 	}.bind(this), 250);
 
+	checking.resolve();
+	return checking.promise;
+
 };
 
 EPUBJS.Continuous.prototype.trim = function(){
 	var above = true;
-	for (var i = 0; i < this.views.length; i++) {
+
-		var view = this.views[i];
+	this.views.forEach(function(view, i){
+		// var view = this.views[i];
 		var prevShown = i > 0 ? this.views[i-1].shown : false;
 		var nextShown = (i+1 < this.views.length) ? this.views[i+1].shown : false;
 		if(!view.shown && !prevShown && !nextShown) {
 			// Remove
+			//this.q.enqueue(this.erase, view, above);
 			this.erase(view, above);
 		}
 		if(nextShown) {
 			above = false;
 		}
-	}
+	}.bind(this));
 };
 
 EPUBJS.Continuous.prototype.erase = function(view, above){ //Trim
-
 	// remove from dom
 	var prevTop = this.container.scrollTop;
 	var prevLeft = this.container.scrollLeft;
@@ -305,35 +333,38 @@ EPUBJS.Continuous.prototype.erase = function(view, above){ //Trim
 	this.remove(view);
 	
 	if(above) {
+		console.log("erase")
 		if(this.settings.axis === "vertical") {
-			this.infinite.scrollTo(0, prevTop - bounds.height, true);
+			this.scrollTo(0, prevTop - bounds.height, true);
 		} else {
-			this.infinite.scrollTo(prevLeft - bounds.width, 0, true);
+			this.scrollTo(prevLeft -bounds.width, 0, true);
 		}
 	}
 
+	// task.resolve();
+	// return task.promise;
+	
 };
 
 
-EPUBJS.Continuous.prototype.resizeView = function(view) {
+// EPUBJS.Continuous.prototype.resizeView = function(view) {
-	var bounds = this.container.getBoundingClientRect();
+// 	var bounds = this.container.getBoundingClientRect();
-	var styles = window.getComputedStyle(this.container);
+// 	var styles = window.getComputedStyle(this.container);
-	var padding = {
+// 	var padding = {
-		left: parseFloat(styles["padding-left"]) || 0,
+// 		left: parseFloat(styles["padding-left"]) || 0,
-		right: parseFloat(styles["padding-right"]) || 0,
+// 		right: parseFloat(styles["padding-right"]) || 0,
-		top: parseFloat(styles["padding-top"]) || 0,
+// 		top: parseFloat(styles["padding-top"]) || 0,
-		bottom: parseFloat(styles["padding-bottom"]) || 0
+// 		bottom: parseFloat(styles["padding-bottom"]) || 0
-	};
+// 	};
-	var width = bounds.width - padding.left - padding.right;
+// 	var width = bounds.width - padding.left - padding.right;
-	var height = bounds.height - padding.top - padding.bottom;
+// 	var height = bounds.height - padding.top - padding.bottom;
 
-	if(this.settings.axis === "vertical") {
+// 	if(this.settings.axis === "vertical") {
-		view.resize(width, 0);
+// 		view.resize(width, 0);
-	} else {
+// 	} else {
-		view.resize(0, height);
+// 		view.resize(0, height);
-	}
+// 	}
-
+// };
-};
 
 // EPUBJS.Continuous.prototype.paginate = function(options) {
 //   this.pagination = new EPUBJS.Paginate(this, {
@@ -374,3 +405,82 @@ EPUBJS.Continuous.prototype.checkCurrent = function(position) {
   }
 
 };
+
+EPUBJS.Continuous.prototype.start = function() {
+  
+  this.tick = EPUBJS.core.requestAnimationFrame;
+
+  this.container.addEventListener("scroll", function(e){
+    if(!this.ignore) {
+      this.scrolled = true;
+    } else {
+      this.ignore = false;
+    }
+  }.bind(this));
+  
+  window.addEventListener('unload', function(e){
+    this.ignore = true;
+  });
+
+  this.tick.call(window, this.onScroll.bind(this));
+
+  this.scrolled = false;
+
+};
+
+EPUBJS.Continuous.prototype.onScroll = function(){
+
+  if(this.scrolled && !this.ignore) {
+  	
+    scrollTop = this.container.scrollTop;
+    scrollLeft = this.container.scrollLeft;
+
+    this.trigger("scroll", {
+      top: scrollTop,
+      left: scrollLeft
+    });
+
+    this.q.enqueue(this.check);
+
+    //this.prevScrollTop = scrollTop;
+    //this.prevScrollLeft = scrollLeft;
+
+    this.scrolled = false;
+  } else {
+    this.ignore = false;
+    this.scrolled = false;
+  }
+
+  this.tick.call(window, this.onScroll.bind(this));
+
+};
+
+EPUBJS.Continuous.prototype.scrollBy = function(x, y, silent){
+  if(silent) {
+    this.ignore = true;
+  }
+  this.container.scrollLeft += x;
+  this.container.scrollTop += y;
+
+  this.scrolled = true;
+  //this.check();
+};
+
+EPUBJS.Continuous.prototype.scrollTo = function(x, y, silent){
+  if(silent) {
+    this.ignore = true;
+  }
+  this.container.scrollLeft = x;
+  this.container.scrollTop = y;
+  
+  this.scrolled = true;
+
+  // if(this.container.scrollLeft != x){
+  //   setTimeout(function() {
+  //     this.scrollTo(x, y, silent);
+  //   }.bind(this), 10);
+  //   return;
+  // };
+  
+  //this.check();
+};

lib/epubjs/core.js

@@ -436,3 +436,27 @@ EPUBJS.core.indexOfSorted = function(item, array, compareFunction, _start, _end)
 };
 
 EPUBJS.core.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
+
+EPUBJS.core.bounds = function(el) {
+
+  var style = window.getComputedStyle(el);
+  var widthProps = ["width", "paddingRight", "paddingLeft", "marginRight", "marginLeft", "borderRightWidth", "borderLeftWidth"];
+  var heightProps = ["height", "paddingTop", "paddingBottom", "marginTop", "marginBottom", "borderTopWidth", "borderBottomWidth"];
+
+  var width = 0;
+  var height = 0;
+
+  widthProps.forEach(function(prop){
+    width += parseFloat(style[prop]) || 0;
+  })
+
+  heightProps.forEach(function(prop){
+    height += parseFloat(style[prop]) || 0;
+  })
+
+  return {
+    height: height,
+    width: width
+  }
+
+};

lib/epubjs/infinite.js

@@ -1,129 +0,0 @@
-EPUBJS.Infinite = function(container, limit){
-  this.container = container;
-  this.windowHeight = window.innerHeight;
-  this.tick = EPUBJS.core.requestAnimationFrame;
-  this.scrolled = false;
-  this.ignore = false;
-
-  this.tolerance = 100;
-  this.prevScrollTop = 0;
-  this.prevScrollLeft = 0;
-
-  if(container) {
-    this.start();
-  }
-
-  // TODO: add rate limit if performance suffers
-
-};
-
-EPUBJS.Infinite.prototype.start = function() {
-  
-  var firstScroll = true;
-
-  this.container.addEventListener("scroll", function(e){
-    
-    // this.top = this.container.scrollTop;
-    // this.left = this.container.scrollLeft;
-    
-    if(!this.ignore) {
-      this.scrolled = true;
-    } else {
-      this.ignore = false;
-    }
-  }.bind(this));
-  
-  // Reset to prevent jump
-  window.addEventListener('unload', function(e){
-    this.ignore = true;
-    // window.scroll(0,0);
-  });
-
-  this.tick.call(window, this.check.bind(this));
-
-  this.scrolled = false;
-
-};
-
-EPUBJS.Infinite.prototype.forwards = function() {
-  this.trigger("forwards");
-};
-
-EPUBJS.Infinite.prototype.backwards = function() {
-  this.trigger("backwards");
-};
-
-
-EPUBJS.Infinite.prototype.check = function(){
-
-  if(this.scrolled && !this.ignore) {
-    scrollTop = this.container.scrollTop;
-    scrollLeft = this.container.scrollLeft;
-
-    this.trigger("scroll", {
-      top: scrollTop,
-      left: scrollLeft
-    });
-
-    // For snap scrolling
-    if(scrollTop - this.prevScrollTop > this.tolerance) {
-      this.forwards();
-    }
-
-    if(scrollTop - this.prevScrollTop < -this.tolerance) {
-      this.backwards();
-    }
-
-    if(scrollLeft - this.prevScrollLeft > this.tolerance) {
-      this.forwards();
-    }
-
-    if(scrollLeft - this.prevScrollLeft < -this.tolerance) {
-      this.backwards();
-    }
-
-    this.prevScrollTop = scrollTop;
-    this.prevScrollLeft = scrollLeft;
-
-    this.scrolled = false;
-  } else {
-    this.ignore = false;
-    this.scrolled = false;
-  }
-
-  this.tick.call(window, this.check.bind(this));
-  // setTimeout(this.check.bind(this), 100);
-};
-
-
-EPUBJS.Infinite.prototype.scrollBy = function(x, y, silent){
-  if(silent) {
-    this.ignore = true;
-  }
-  this.container.scrollLeft += x;
-  this.container.scrollTop += y;
-
-  this.scrolled = true;
-  this.check();
-};
-
-EPUBJS.Infinite.prototype.scrollTo = function(x, y, silent){
-  if(silent) {
-    this.ignore = true;
-  }
-  this.container.scrollLeft = x;
-  this.container.scrollTop = y;
-  
-  this.scrolled = true;
-
-  // if(this.container.scrollLeft != x){
-  //   setTimeout(function() {
-  //     this.scrollTo(x, y, silent);
-  //   }.bind(this), 10);
-  //   return;
-  // };
-  
-  this.check();
-};
-
-RSVP.EventTarget.mixin(EPUBJS.Infinite.prototype);

lib/epubjs/paginate.js

@@ -10,7 +10,8 @@ EPUBJS.Paginate = function(book, options) {
     minSpreadWidth: 800, //-- overridden by spread: none (never) / both (always)
     gap: "auto", //-- "auto" or int
     layoutOveride : null, // Default: { spread: 'reflowable', layout: 'auto', orientation: 'auto'},
-    overflow: "hidden"
+    overflow: "hidden",
+    infinite: false
   });
 
   EPUBJS.core.extend(this.settings, options);
@@ -146,14 +147,21 @@ EPUBJS.Paginate.prototype.page = function(pg){
 };
 
 EPUBJS.Paginate.prototype.next = function(){
-  this.infinite.scrollBy(this.formated.pageWidth, 0);
+
-  this.check();
+  this.q.enqueue(function(){
+    this.scrollBy(this.formated.pageWidth, 0);
+    return this.check();
+  });
+
   // return this.page(this.currentPage + 1);
 };
 
 EPUBJS.Paginate.prototype.prev = function(){
-  this.infinite.scrollBy(-this.formated.pageWidth, 0);
+
-  this.check();
+  this.q.enqueue(function(){
+    this.scrollBy(-this.formated.pageWidth, 0);
+    return this.check();
+  });
   // return this.page(this.currentPage - 1);
 };
 

lib/epubjs/queue.js

@@ -6,14 +6,16 @@ EPUBJS.Queue = function(_context){
 };
 
 // Add an item to the queue
-EPUBJS.Queue.prototype.enqueue = function(task, args, context) {
+EPUBJS.Queue.prototype.enqueue = function() {
   var deferred, promise;
   var queued;
+  var task = [].shift.call(arguments);
+  var args = arguments
   
   // Handle single args without context
-  if(args && !args.length) {
+  // if(args && !Array.isArray(args)) {
-    args = [args];
+  //   args = [args];
-  }
+  // }
   
   if(typeof task === "function"){
     
@@ -23,7 +25,7 @@ EPUBJS.Queue.prototype.enqueue = function(task, args, context) {
     queued = {
       "task" : task,
       "args"     : args,
-      "context"  : context,
+      //"context"  : context,
       "deferred" : deferred,
       "promise" : promise
     };
@@ -51,8 +53,9 @@ EPUBJS.Queue.prototype.dequeue = function(){
     task = inwait.task;
 
     if(task){
+
       // Task is a function that returns a promise
-      return task.apply(inwait.context || this.context, inwait.args).then(function(){
+      return task.apply(this.context, inwait.args).then(function(){
         inwait.deferred.resolve.apply(inwait.context || this.context, arguments);
       }.bind(this));
       
@@ -97,7 +100,7 @@ EPUBJS.Queue.prototype.length = function(){
   return this._q.length;
 };
 
-// Create a new tast from a callback
+// Create a new task from a callback
 EPUBJS.Task = function(task, args, context){
 
   return function(){

lib/epubjs/rendition.js

@@ -55,6 +55,8 @@ EPUBJS.Rendition.prototype.initialize = function(_options){
 	container = document.createElement("div");
 	
 	// Style Element
+	container.style.fontSize = "0";
+
 	if(this.settings.axis === "horizontal") {
 		// this.container.style.display = "flex";
 		// this.container.style.flexWrap = "nowrap";
@@ -108,21 +110,40 @@ EPUBJS.Rendition.prototype.attachTo = function(_element){
 	}
 
 	// If width or height are set to "100%", inherit them from containing element
-	if(this.settings.height === "100%") {
+	// if(this.settings.height === "100%") {
-		bounds = this.element.getBoundingClientRect();
+	// 	bounds = this.element.getBoundingClientRect();
-		this.container.style.height = bounds.height + "px";
+	// 	this.container.style.height = bounds.height + "px";
-	}
+	// }
 		
-	if(this.settings.width === "100%") {
+	// if(this.settings.width === "100%") {
-		bounds = bounds || this.element.getBoundingClientRect();
+	// 	bounds = bounds || this.element.getBoundingClientRect();
-		this.container.style.width = bounds.width + "px";
+	// 	this.container.style.width = bounds.width + "px";
-	}
+	// }
 	
 	this.element.appendChild(this.container);
 	
 	// Attach Listeners
 	this.attachListeners();
 
+	// Calculate Stage Size
+	// this.containerStyles = window.getComputedStyle(this.container);
+	// this.containerPadding = {
+	// 	left: parseFloat(this.containerStyles["padding-left"]) || 0,
+	// 	right: parseFloat(this.containerStyles["padding-right"]) || 0,
+	// 	top: parseFloat(this.containerStyles["padding-top"]) || 0,
+	// 	bottom: parseFloat(this.containerStyles["padding-bottom"]) || 0
+	// }; 
+
+	// this.stage = {
+	// 	width: parseFloat(this.containerStyles.width) - 
+	// 					this.containerPadding.left - 
+	// 					this.containerPadding.right,
+	// 	height: parseFloat(this.containerStyles.height) - 
+	// 										this.containerPadding.top - 
+	// 										this.containerPadding.bottom
+	// };
+	this.stageSize();
+	
 	// Trigger Attached
 
 	// Start processing queue
@@ -132,9 +153,10 @@ EPUBJS.Rendition.prototype.attachTo = function(_element){
 
 EPUBJS.Rendition.prototype.attachListeners = function(){
 
-	// Listen to window for resize event
+	// Listen to window for resize event if width or height is set to 100%
+	if(this.settings.width === "100%" || this.settings.height === "100%") {
 		window.addEventListener("resize", this.onResized.bind(this), false);
-
+	}
 
 };
 
@@ -158,17 +180,12 @@ EPUBJS.Rendition.prototype.display = function(what){
 			view = new EPUBJS.View(section);
 
 			// Show view
-			this.append(view);
+			this.q.enqueue(this.append, view);
 
 			// Move to correct place within the section, if needed
 			// this.moveTo(what)
 
-	
-			view.displayed.then(function(){
-				this.trigger("displayed", section);
-				this.displaying = false;
 			displaying.resolve(this);
-			}.bind(this));
 	
 		} else {
 			displaying.reject(new Error("No Section Found"));
@@ -185,14 +202,6 @@ EPUBJS.Rendition.prototype.moveTo = function(what){
 };
 
 EPUBJS.Rendition.prototype.render = function(view) {
-	// var view = new EPUBJS.View(section);
-	// 
-	// if(!section) {
-	// 	rendered = new RSVP.defer();
-	// 	rendered.reject(new Error("No Section Provided"));
-	// 	return rendered.promise;
-	// }
-	this.rendering = true;
 
 	view.create();
 		
@@ -213,8 +222,6 @@ EPUBJS.Rendition.prototype.render = function(view) {
 		.then(function(){
 			view.show();
 			this.trigger("rendered", view.section);
-			this.rendering = false;
-			//this.check(); // Check to see if anything new is on screen after rendering
 			return view;
 		}.bind(this))
 		.catch(function(e){
@@ -224,7 +231,7 @@ EPUBJS.Rendition.prototype.render = function(view) {
 };
 
 EPUBJS.Rendition.prototype.afterDisplayed = function(view){
-	
+	this.trigger("displayed", view.section);
 };
 
 EPUBJS.Rendition.prototype.append = function(view){
@@ -235,10 +242,11 @@ EPUBJS.Rendition.prototype.append = function(view){
 	// view.appendTo(this.container);
 	this.container.appendChild(view.element);
 
-	this.render(view);
 	// view.on("shown", this.afterDisplayed.bind(this));
 	view.onShown = this.afterDisplayed.bind(this);
 	// this.resizeView(view);
+
+	return this.render(view);
 };
 
 EPUBJS.Rendition.prototype.clear = function(){
@@ -264,95 +272,129 @@ EPUBJS.Rendition.prototype.remove = function(view) {
 };
 
 
-EPUBJS.Rendition.prototype.resizeView = function(view) {
+// EPUBJS.Rendition.prototype.resizeView = function(view) {
-	var bounds = this.container.getBoundingClientRect();
+// 	// var bounds = this.container.getBoundingClientRect();
-	var styles = window.getComputedStyle(this.container);
+// 	// var styles = window.getComputedStyle(this.container);
-	var padding = {
+// 	// var padding = {
-		left: parseFloat(styles["padding-left"]) || 0,
+// 	// 	left: parseFloat(styles["padding-left"]) || 0,
-		right: parseFloat(styles["padding-right"]) || 0,
+// 	// 	right: parseFloat(styles["padding-right"]) || 0,
-		top: parseFloat(styles["padding-top"]) || 0,
+// 	// 	top: parseFloat(styles["padding-top"]) || 0,
-		bottom: parseFloat(styles["padding-bottom"]) || 0
+// 	// 	bottom: parseFloat(styles["padding-bottom"]) || 0
-	};
+// 	// };
-	var width = bounds.width - padding.left - padding.right;
+// 	// var width = bounds.width - padding.left - padding.right;
-	var height = bounds.height - padding.top - padding.bottom;
+// 	// var height = bounds.height - padding.top - padding.bottom;
 
-	if(this.settings.axis === "vertical") {
+// 	if(this.settings.axis === "vertical") {
-		view.resize(width, 0);
+// 		view.resize(this.stage.width, 0);
-	} else {
+// 	} else {
-		view.resize(0, height);
+// 		view.resize(0, this.stage.height);
+// 	}
+// 	console.log("resize view")
+
+// };
+
+EPUBJS.Rendition.prototype.stageSize = function(_width, _height){
+	var bounds;
+	var width = _width || this.settings.width;
+	var height = _height || this.settings.height;
+
+	if(width === "100%") {
+		bounds = this.element.getBoundingClientRect();
+		width = bounds.width;
+		height = bounds.height;
+
+		this.container.style.height = bounds.height + "px";
 	}
 		
+	if(height === "100%") {
+		bounds = bounds || this.element.getBoundingClientRect();
+		width = bounds.width;
+		height = bounds.height;
+
+		this.container.style.width = bounds.width + "px";
+	}
+
+	this.containerStyles = window.getComputedStyle(this.container);
+	this.containerPadding = {
+		left: parseFloat(this.containerStyles["padding-left"]) || 0,
+		right: parseFloat(this.containerStyles["padding-right"]) || 0,
+		top: parseFloat(this.containerStyles["padding-top"]) || 0,
+		bottom: parseFloat(this.containerStyles["padding-bottom"]) || 0
+	};
+	
+	this.stage = {
+		width: width - 
+						this.containerPadding.left - 
+						this.containerPadding.right,
+		height: height - 
+						this.containerPadding.top - 
+						this.containerPadding.bottom
+	};
+
+	return this.stage;
+
 };
 
-EPUBJS.Rendition.prototype.resize = function(_width, _height){
+EPUBJS.Rendition.prototype.resize = function(width, height){
-	var width = _width;
-	var height = _height;
-
-	var styles = window.getComputedStyle(this.container);
-	var padding = {
-		left: parseFloat(styles["padding-left"]) || 0,
-		right: parseFloat(styles["padding-right"]) || 0,
-		top: parseFloat(styles["padding-top"]) || 0,
-		bottom: parseFloat(styles["padding-bottom"]) || 0
-	}; 
-
-	var stagewidth = width - padding.left - padding.right;
-	var stageheight = height - padding.top - padding.bottom;
-
-	if(!_width) {
-		width = window.innerWidth;
-	}
-	if(!_height) {
-		height = window.innerHeight;
-	}
-
-	// this.container.style.width = width + "px";
-	// this.container.style.height = height + "px";
-
-	this.trigger("resized", {
-		width: this.width,
-		height: this.height
-	});
 
+	this.stageSize(width, height);
 	
 	this.views.forEach(function(view){
 		if(this.settings.axis === "vertical") {
-			view.resize(stagewidth, 0);
+			view.resize(this.stage.width, 0);
 		} else {
-			view.resize(0, stageheight);
+			view.resize(0, this.stage.height);
 		}
 	}.bind(this));
 
+	this.trigger("resized", {
+		width: this.stage.width,
+		height: this.stage.height
+	});
+
 };
 
 EPUBJS.Rendition.prototype.onResized = function(e) {
-	var bounds = this.element.getBoundingClientRect();
+	this.resize();
-
-
-	this.resize(bounds.width, bounds.height);
 };
 
 EPUBJS.Rendition.prototype.next = function(){
-	var next = this.views[0].section.next();
+
+	return this.q.enqueue(function(){
+
+		var next;
 		var view;
 
+		if(!this.views.length) return;
+
+		next = this.views[0].section.next();
 
 		if(next) {
 			view = new EPUBJS.View(next);
-		this.append(view);
+			return this.append(view);
 		}
 
+	});
+
 };
 
 EPUBJS.Rendition.prototype.prev = function(){
-	var prev = this.views[0].section.prev();
+
+	return this.q.enqueue(function(){
+
+		var prev;
 		var view;
 
+		if(!this.views.length) return;
+
+		prev = this.views[0].section.prev();
 		if(prev) {
 			view = new EPUBJS.View(prev);
-		this.append(view);
+			return this.append(view);
 		}
 
+	});
+
 };
 
 //-- Enable binding events to Renderer

lib/epubjs/view.js

@@ -13,7 +13,6 @@ EPUBJS.View = function(section) {
   this.element.style.width = "0px";
   this.element.style.overflow = "hidden";
 
-  
   this.shown = false;
   this.rendered = false;
 
@@ -22,19 +21,21 @@ EPUBJS.View = function(section) {
   this.width  = 0;
   this.height = 0;
 
-  this.paddingTopBottom = 0;
-  this.paddingLeftRight = 0;
-  this.marginTopBottom = 0;
-  this.marginLeftRight = 0;
-  this.borderTopBottom = 0;
-  this.borderLeftRight = 0;
 
-  this.elpaddingTopBottom = 0;
+
-  this.elpaddingLeftRight = 0;
+  // this.paddingTopBottom = 0;
-  this.elmarginTopBottom  = 0;
+  // this.paddingLeftRight = 0;
-  this.elmarginLeftRight  = 0;
+  // this.marginTopBottom = 0;
-  this.elborderTopBottom  = 0;
+  // this.marginLeftRight = 0;
-  this.elborderLeftRight  = 0;
+  // this.borderTopBottom = 0;
+  // this.borderLeftRight = 0;
+
+  // this.elpaddingTopBottom = 0;
+  // this.elpaddingLeftRight = 0;
+  // this.elmarginTopBottom  = 0;
+  // this.elmarginLeftRight  = 0;
+  // this.elborderTopBottom  = 0;
+  // this.elborderLeftRight  = 0;
   
 };
 
@@ -61,12 +62,13 @@ EPUBJS.View.prototype.create = function(width, height) {
   this.element.appendChild(this.iframe);
   this.rendered = true;
   
+
   if(width || height){
     this.resize(width, height);
-  }
+  } else if(this.width && this.height){
-  
-  if(this.width && this.height){
     this.resize(this.width, this.height);
+  } else {
+    this.iframeBounds = EPUBJS.core.bounds(this.iframe);
   }
   
   return this.iframe;
@@ -74,24 +76,27 @@ EPUBJS.View.prototype.create = function(width, height) {
 
 // TODO: minimize resizes
 EPUBJS.View.prototype.resize = function(width, height) {
-  var borders = this.borders();
   
   if(width){
     
     if(this.iframe) {
       this.iframe.style.width = width + "px";
+      this.iframeBounds = EPUBJS.core.bounds(this.iframe);
     }
     if(this.shown) {
-      this.element.style.width = width + borders.width + "px";
+      this.element.style.width = this.iframeBounds.width + "px";
+      this.elementBounds = EPUBJS.core.bounds(this.element);
     }
   }
 
   if(height){
     if(this.iframe) {
       this.iframe.style.height = height + "px";
+      this.iframeBounds = EPUBJS.core.bounds(this.iframe);
     }
     if(this.shown) {
-      this.element.style.height = height + borders.height + "px";
+      this.element.style.height = this.iframeBounds.height + "px";
+      this.elementBounds = EPUBJS.core.bounds(this.element);
     }
   }
 
@@ -158,7 +163,7 @@ EPUBJS.View.prototype.load = function(contents) {
 EPUBJS.View.prototype.afterLoad = function() {
 
   // this.iframe.style.display = "block";
-  this.iframe.style.display = "inline-block";
+  this.iframe.style.display = "block";
 
 
   // Reset Body Styles
@@ -273,10 +278,14 @@ EPUBJS.View.prototype.observe = function(target) {
 EPUBJS.View.prototype.show = function() {
   // this.iframe.style.display = "block";
   
-  var borders = this.borders();
+  //var borders = this.borders();
+  this.iframeBounds = EPUBJS.core.bounds(this.iframe);
+
+  this.element.style.width = this.iframeBounds.width + "px";
+  this.element.style.height = this.iframeBounds.height + "px";
+
+  this.elementBounds = EPUBJS.core.bounds(this.element);
 
-  this.element.style.width = this.width + borders.width + "px";
-  this.element.style.height = this.height + borders.height + "px";
   // this.iframe.style.display = "inline-block";
   this.iframe.style.visibility = "visible";
 
@@ -300,48 +309,11 @@ EPUBJS.View.prototype.onShown = function(view) {
   // Stub, override with a custom functions
 };
 
-EPUBJS.View.prototype.borders = function() {
-  
-  if(this.iframe && !this.iframeStyle) {
-    this.iframeStyle = window.getComputedStyle(this.iframe);
-    
-    this.paddingTopBottom = (parseInt(this.iframeStyle.paddingTop) +  parseInt(this.iframeStyle.paddingBottom)) || 0;
-    this.paddingLeftRight = (parseInt(this.iframeStyle.paddingLeft) +  parseInt(this.iframeStyle.paddingRight)) || 0;
-    this.marginTopBottom = (parseInt(this.iframeStyle.marginTop) +  parseInt(this.iframeStyle.marginBottom)) || 0;
-    this.marginLeftRight = (parseInt(this.iframeStyle.marginLeft) +  parseInt(this.iframeStyle.marginRight)) || 0;
-    this.borderTopBottom = (parseInt(this.iframeStyle.borderTop) + parseInt(this.iframeStyle.borderBottom)) || 0;
-    this.borderLeftRight = (parseInt(this.iframeStyle.borderLeft) + parseInt(this.iframeStyle.borderRight)) || 0;
-  }
-  
-  if(this.element && !this.elementStyle) {
-
-    this.elementStyle = window.getComputedStyle(this.element);
-    
-    this.elpaddingTopBottom = (parseInt(this.elementStyle.paddingTop)  +  parseInt(this.elementStyle.paddingBottom)) || 0;
-    this.elpaddingLeftRight = (parseInt(this.elementStyle.paddingLeft) +  parseInt(this.elementStyle.paddingRight)) || 0;
-    this.elmarginTopBottom  = (parseInt(this.elementStyle.marginTop)   +  parseInt(this.elementStyle.marginBottom)) || 0;
-    this.elmarginLeftRight  = (parseInt(this.elementStyle.marginLeft)  +  parseInt(this.elementStyle.marginRight)) || 0;
-    this.elborderTopBottom  = (parseInt(this.elementStyle.borderTop)   +  parseInt(this.elementStyle.borderBottom)) || 0;
-    this.elborderLeftRight  = (parseInt(this.elementStyle.borderLeft)  +  parseInt(this.elementStyle.borderRight)) || 0;
-  }
-
-  return {
-    height: this.paddingTopBottom + this.marginTopBottom + this.borderTopBottom,
-    width: this.paddingLeftRight + this.marginLeftRight + this.borderLeftRight
-  }
-};
-
 EPUBJS.View.prototype.bounds = function() {  
-  // var bounds = this.element.getBoundingClientRect();
+  if(!this.elementBounds) {
-  // var bounds = {
+    this.elementBounds = EPUBJS.core.bounds(this.element);
-  //   width: this.element.offsetWidth,
-  //   height: this.element.offsetHeight
-  // };
-
-  return {
-    height: this.height + this.paddingTopBottom + this.marginTopBottom + this.borderTopBottom + this.elpaddingTopBottom + this.elmarginTopBottom + this.elborderTopBottom,
-    width: this.width + this.paddingLeftRight + this.marginLeftRight + this.borderLeftRight + this.elpaddingLeftRight + this.elmarginLeftRight + this.elborderLeftRight
   }
+  return this.elementBounds;
 };
 
 EPUBJS.View.prototype.destroy = function() {