fixed rendering loop

README.md

@@ -0,0 +1,3 @@
+npm install
+bower install
+

dist/epub.js

@@ -4083,8 +4083,8 @@ EPUBJS.Renderer.prototype.initialize = function(_options){
   this.container = document.createElement("div");
   this.infinite = new EPUBJS.Infinite(this.container, this);
 
-  this.container.style.width = height;
+  this.container.style.width = width;
-  this.container.style.height = width;
+  this.container.style.height = height;
   this.container.style.overflow = "scroll";
 
   if(options.hidden) {
@@ -4160,12 +4160,21 @@ EPUBJS.Renderer.prototype.attachTo = function(_element){
 
 };
 
+EPUBJS.Renderer.prototype.clear = function(){
+  this.views.forEach(function(view){
+    view.destroy();
+  });
+  
+  this.views = [];
+};
 
 EPUBJS.Renderer.prototype.display = function(what){
   var displaying = new RSVP.defer();
   var displayed = displaying.promise;
-  var view = new EPUBJS.View();
+  
-
+  // Clear views
+  this.clear();
+  
   this.book.opened.then(function(){
     var section = this.book.spine.get(what);
     var rendered = this.render(section);
@@ -4261,9 +4270,11 @@ EPUBJS.Renderer.prototype.backwards = function(view){
 
 // -- this might want to be in infinite
 EPUBJS.Renderer.prototype.fill = function() {
-  console.log("filling")
   var filling = this.backwards();
   var height = this.container.getBoundingClientRect().height;
+  
+  if(!filling) return;
+  
   filling.then(function(){
     var bottom = this.last().bounds().bottom;
     while (height && bottom && bottom < height) {
@@ -4456,7 +4467,10 @@ EPUBJS.View.prototype.load = function(contents) {
     this.document.body.style.display = "inline-block";    
 
     this.layout();
-
+    
+    // This needs to run twice to get to the correct size sometimes?
+    this.layout();
+    
     this.iframe.style.visibility = "visible";
 
     loading.resolve(this);
@@ -4500,35 +4514,39 @@ EPUBJS.View.prototype.resized = function() {
 EPUBJS.View.prototype.layout = function() {
   var bounds = {}, content, width = 0, height = 0;
 
-  // This needs to run twice to get to the correct size
+  this.resizing = true;
-  while(bounds.height != height || bounds.width != width) {
+  // Check bounds
-      this.resizing = true;
+  bounds = this.document.body.getBoundingClientRect();
 
-      // Check bounds
+  // Apply Changes
-      bounds = this.document.body.getBoundingClientRect();
+  this.iframe.style.height = bounds.height + "px";
+  this.iframe.style.width = bounds.width + "px";
 
-      // Apply Changes
+  // Check again
-      this.iframe.style.height = bounds.height + "px";
+  content = this.document.body.getBoundingClientRect();
-      this.iframe.style.width = bounds.width + "px";
 
-      // Check again
+  height = content.height;
-      content = this.document.body.getBoundingClientRect();
+  width = content.width;
 
-      height = content.height;
+  this.width = width;
-      width = content.width;
+  this.height = height;
-
+  
-      this.width = width;
+  
-      this.height = height;
+  // if(bounds.height != content.height || bounds.width != content.width) {
-  }
+  //   // this.layout();
+  //   console.log(bounds, content)
+  // }
   
 
 };
 
 EPUBJS.View.prototype.appendTo = function(element) {
-  element.appendChild(this.iframe);
+  this.element = element;
+  this.element.appendChild(this.iframe);
 };
 
 EPUBJS.View.prototype.prependTo = function(element) {
+  this.element = element;
   element.insertBefore(this.iframe, element.firstChild);
 };
 
@@ -4537,6 +4555,6 @@ EPUBJS.View.prototype.bounds = function() {
 };
 
 EPUBJS.View.prototype.destroy = function() {
-
+  this.element.removeChild(this.iframe);
 };
 

examples/basic-render.html

@@ -12,11 +12,14 @@
     }
 
     #viewer {
-      position: absolute;
+      /* position: absolute;
       left: 10%;
       width: 80%;
       height: 100%;
-      overflow: hidden;
+      overflow: hidden; */
+      display: block;
+      margin: 50px auto;
+      width: 600px;
     }
 
     #prev {
@@ -63,7 +66,7 @@
     var currentSectionIndex = 10;
     // Load the opf
     var book = ePub("../books/moby-dick/OPS/package.opf");
-    var rendition = book.renderTo("viewer");
+    var rendition = book.renderTo("viewer", {width: 600, height: 400});
     var displayed = rendition.display(currentSectionIndex);
     
 

examples/toc.html

@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>EPUB.js Basic Example</title>
+
+	<script src="../dist/epub.js"></script>
+
+
+	<style type="text/css">
+		body {
+			margin: 0;
+			height: 100%;
+		}
+
+		#viewer { 
+			display: block;
+			margin: 50px auto;
+			width: 600px;
+		}
+
+		#prev {
+			left: 40px;
+		}
+
+		#next {  
+			right: 40px;
+		}
+
+		.arrow {
+			position: absolute;
+			top: 50%;
+			margin-top: -32px;
+			font-size: 64px;
+			color: #E2E2E2;
+			font-family: arial, sans-serif;
+			font-weight: bold;
+			cursor: pointer;
+			-webkit-user-select: none;
+			-moz-user-select: none;
+			user-select: none;
+		}
+
+		.arrow:hover {
+			color: #777;
+		}
+
+		.arrow:active {
+			color: #000;
+		}
+
+		#toc {
+			display: block;
+			margin: 10px auto;
+		}
+
+	</style>
+</head>
+<body>
+	<select id="toc"></select>
+	<div id="viewer"></div>
+
+	<script>
+		var $viewer = document.getElementById("viewer");
+		var $next = document.getElementById("next");
+		var $prev = document.getElementById("prev");
+		var currentSectionIndex = 10;
+		// Load the opf
+		var book = ePub("../books/moby-dick/OPS/package.opf");
+		var rendition = book.renderTo("viewer", {width: 600, height: 400});
+		var displayed = rendition.display(currentSectionIndex);
+		
+		book.loaded.navigation.then(function(toc){
+			var $select = document.getElementById("toc"),
+					docfrag = document.createDocumentFragment();
+
+			toc.forEach(function(chapter) {
+				var option = document.createElement("option");
+				option.textContent = chapter.label;
+				option.ref = chapter.href;
+
+				docfrag.appendChild(option);
+			});
+
+			$select.appendChild(docfrag);
+
+			$select.onchange = function(){
+					var index = $select.selectedIndex,
+							url = $select.options[index].ref;
+					rendition.display(url);
+					return false;
+			};
+
+
+		});
+	</script>
+
+</body>
+</html>

gulpfile.js

@@ -24,7 +24,7 @@ gulp.task('minify', function(){
 
 // Watch Our Files
 gulp.task('watch', function() {
-  gulp.watch('lib/*/*.js', ['lint', 'minify']);
+  gulp.watch('lib/*/*.js', ['minify']);
 });
 
 // Default

lib/epubjs/renderer.js

@@ -55,8 +55,8 @@ EPUBJS.Renderer.prototype.initialize = function(_options){
   this.container = document.createElement("div");
   this.infinite = new EPUBJS.Infinite(this.container, this);
 
-  this.container.style.width = height;
+  this.container.style.width = width;
-  this.container.style.height = width;
+  this.container.style.height = height;
   this.container.style.overflow = "scroll";
 
   if(options.hidden) {
@@ -132,12 +132,21 @@ EPUBJS.Renderer.prototype.attachTo = function(_element){
 
 };
 
+EPUBJS.Renderer.prototype.clear = function(){
+  this.views.forEach(function(view){
+    view.destroy();
+  });
+  
+  this.views = [];
+};
 
 EPUBJS.Renderer.prototype.display = function(what){
   var displaying = new RSVP.defer();
   var displayed = displaying.promise;
-  var view = new EPUBJS.View();
+  
-
+  // Clear views
+  this.clear();
+  
   this.book.opened.then(function(){
     var section = this.book.spine.get(what);
     var rendered = this.render(section);
@@ -233,9 +242,11 @@ EPUBJS.Renderer.prototype.backwards = function(view){
 
 // -- this might want to be in infinite
 EPUBJS.Renderer.prototype.fill = function() {
-  console.log("filling")
   var filling = this.backwards();
   var height = this.container.getBoundingClientRect().height;
+  
+  if(!filling) return;
+  
   filling.then(function(){
     var bottom = this.last().bounds().bottom;
     while (height && bottom && bottom < height) {

lib/epubjs/view.js

@@ -30,7 +30,10 @@ EPUBJS.View.prototype.load = function(contents) {
     this.document.body.style.display = "inline-block";    
 
     this.layout();
-
+    
+    // This needs to run twice to get to the correct size sometimes?
+    this.layout();
+    
     this.iframe.style.visibility = "visible";
 
     loading.resolve(this);
@@ -74,35 +77,39 @@ EPUBJS.View.prototype.resized = function() {
 EPUBJS.View.prototype.layout = function() {
   var bounds = {}, content, width = 0, height = 0;
 
-  // This needs to run twice to get to the correct size
+  this.resizing = true;
-  while(bounds.height != height || bounds.width != width) {
+  // Check bounds
-      this.resizing = true;
+  bounds = this.document.body.getBoundingClientRect();
 
-      // Check bounds
+  // Apply Changes
-      bounds = this.document.body.getBoundingClientRect();
+  this.iframe.style.height = bounds.height + "px";
+  this.iframe.style.width = bounds.width + "px";
 
-      // Apply Changes
+  // Check again
-      this.iframe.style.height = bounds.height + "px";
+  content = this.document.body.getBoundingClientRect();
-      this.iframe.style.width = bounds.width + "px";
 
-      // Check again
+  height = content.height;
-      content = this.document.body.getBoundingClientRect();
+  width = content.width;
 
-      height = content.height;
+  this.width = width;
-      width = content.width;
+  this.height = height;
-
+  
-      this.width = width;
+  
-      this.height = height;
+  // if(bounds.height != content.height || bounds.width != content.width) {
-  }
+  //   // this.layout();
+  //   console.log(bounds, content)
+  // }
   
 
 };
 
 EPUBJS.View.prototype.appendTo = function(element) {
-  element.appendChild(this.iframe);
+  this.element = element;
+  this.element.appendChild(this.iframe);
 };
 
 EPUBJS.View.prototype.prependTo = function(element) {
+  this.element = element;
   element.insertBefore(this.iframe, element.firstChild);
 };
 
@@ -111,6 +118,6 @@ EPUBJS.View.prototype.bounds = function() {
 };
 
 EPUBJS.View.prototype.destroy = function() {
-
+  this.element.removeChild(this.iframe);
 };
 

package.json

@@ -24,6 +24,8 @@
     "optimist": "^0.6.1",
     "portfinder": "^0.2.1",
     "qunitjs": "^1.14.0",
-    "serve-static": "^1.3.1"
+    "serve-static": "^1.3.1",
+    "gulp-util": "~3.0.0",
+    "gulp-connect": "~2.0.6"
   }
 }