view removal updates

examples/basic.html

@@ -29,7 +29,8 @@
     }
     
     #viewer > div {
-      padding: 0 25% 0 25%;
+      /*padding: 0 25% 0 25%;*/
+
     }
 
     #viewer .epub-view {
@@ -37,6 +38,11 @@
         box-shadow: 0 0 4px #ccc;
         margin: 10px;
         padding: 20px;
+        width: 50% !important;
+    }
+
+    #viewer .epub-view iframe {
+      width: 100% !important;
     }
 
 
@@ -84,7 +90,7 @@
     var currentSectionIndex = 8;
     // Load the opf
     var book = ePub("../books/moby-dick/OPS/package.opf");
-    var rendition = book.renderTo("viewer", { width: "50%" });
+    var rendition = book.renderTo("viewer", { width: "100%" });
     var displayed = rendition.display(currentSectionIndex);
     
 

lib/epubjs/rendition.js

@@ -51,13 +51,13 @@ EPUBJS.Rendition = function(book, options) {
 
 EPUBJS.Rendition.prototype.handleScroll = function(){
 
-	if(this.scrolled && !this.displaying) {
+	if(this.scrolled && !this.silentScroll) {
 
 		this.check();
 		
 		this.scrolled = false;
 	} else {
-		this.displaying = false;
+		this.silentScroll = false;
 		this.scrolled = false;
 	}
 
@@ -216,6 +216,8 @@ EPUBJS.Rendition.prototype.render = function(view) {
 	// 	rendered.reject(new Error("No Section Provided"));
 	// 	return rendered.promise;
 	// }
+	this.rendering = true;
+
 	view.create();
 	
 	// Fit to size of the container, apply padding
@@ -233,9 +235,9 @@ EPUBJS.Rendition.prototype.render = function(view) {
 			return view.expand();
 		}.bind(this))
 		.then(function(){
-			this.rendering = false;
 			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))
@@ -288,22 +290,25 @@ EPUBJS.Rendition.prototype.prepend = function(view){
 		var bounds, style, marginTopBottom, marginLeftRight;
 		var prevTop = this.container.scrollTop;
 		var prevLeft = this.container.scrollLeft;
-		
+
 		this.afterDisplayed(currView);
 
+		if(view.countered) return;
+
 		bounds = currView.bounds();
 		style = window.getComputedStyle(currView.element);
 		marginTopBottom = parseInt(style.marginTop) +  parseInt(style.marginBottom) || 0;
 		marginLeftRight = parseInt(style.marginLeft) +  parseInt(style.marginLeft) || 0;
-		
 
 		if(this.settings.axis === "vertical") {
+			console.log("scroll TO", prevTop, bounds.height + marginTopBottom)
 			this.scrollTo(0, prevTop + bounds.height + marginTopBottom, true)
-			// this.scrollTo(0, prevTop + bounds.height - marginTopBottom, true);
 		} else {
-			this.scrollTo(prevLeft + bounds.width - marginLeftRight, 0, true);
+			this.scrollTo(prevLeft + bounds.width + marginLeftRight, 0, true);
 		}
 
+		view.countered = true;
+
 	}.bind(this);
 	
 	// this.resizeView(view);
@@ -377,6 +382,7 @@ EPUBJS.Rendition.prototype.check = function(){
 	var container = this.container.getBoundingClientRect();
 	var isVisible = function(view){
 		var bounds = view.bounds();
+
 		if((bounds.bottom >= container.top - this.settings.offset) &&
 			!(bounds.top > container.bottom) &&
 			(bounds.right >= container.left) &&
@@ -385,7 +391,7 @@ EPUBJS.Rendition.prototype.check = function(){
 
 			// Fit to size of the container, apply padding
 			// this.resizeView(view);
-			if(!view.shown) {
+			if(!view.shown && !this.rendering) {
 				console.log("render", view.index);
 				this.render(view);
 			}
@@ -410,24 +416,26 @@ EPUBJS.Rendition.prototype.check = function(){
 	clearTimeout(this.trimTimeout);
 	this.trimTimeout = setTimeout(function(){
 		this.trim();
-		console.log("TRIM")
 	}.bind(this), 250);
 };
 
 EPUBJS.Rendition.prototype.trim = function(){
-	
+	var above = true;
 	for (var i = 0; i < this.views.length; 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.erase(view);
+			this.erase(view, above);
+		}
+		if(nextShown) {
+			above = false;
 		}
 	}
 };
 
-EPUBJS.Rendition.prototype.erase = function(view){ //Trim
+EPUBJS.Rendition.prototype.erase = function(view, above){ //Trim
 
 	// remove from dom
 	var prevTop = this.container.scrollTop;
@@ -439,20 +447,19 @@ EPUBJS.Rendition.prototype.erase = function(view){ //Trim
 	
 	this.remove(view);
 	
-	if(view === this.first()){
+	if(above) {
-		console.log("comp")
 		if(this.settings.axis === "vertical") {
 			this.scrollTo(0, prevTop - bounds.height - marginTopBottom, true);
 		} else {
 			this.scrollTo(prevLeft - bounds.width - marginLeftRight, 0, true);
 		}
 	}
-
+	
 };
 
 EPUBJS.Rendition.prototype.scrollBy = function(x, y, silent){
 	if(silent) {
-		this.displaying = true;
+		this.silentScroll = true;
 	}
 	this.container.scrollLeft += x;
 	this.container.scrollTop += y;
@@ -463,7 +470,7 @@ EPUBJS.Rendition.prototype.scrollBy = function(x, y, silent){
 
 EPUBJS.Rendition.prototype.scrollTo = function(x, y, silent){
 	if(silent) {
-		this.displaying = true;
+		this.silentScroll = true;
 	}
 	this.container.scrollLeft = x;
 	this.container.scrollTop = y;

lib/epubjs/view.js

@@ -11,13 +11,18 @@ EPUBJS.View = function(section) {
   // this.element.style.minHeight = "100px";
   this.element.style.height = 0;
   this.element.style.width = 0;
-  
+  this.element.style.overflow = "hidden";
+
   this.shown = false;
   this.rendered = false;
 };
 
 EPUBJS.View.prototype.create = function(width, height) {
 
+  if(this.iframe) {
+    return this.iframe;
+  }
+
   this.iframe = document.createElement('iframe');
   this.iframe.id = this.id;
   this.iframe.scrolling = "no";
@@ -46,14 +51,14 @@ EPUBJS.View.prototype.resize = function(width, height) {
     if(this.iframe) {
       this.iframe.style.width = width + "px";
     }
-    this.element.style.width = width + "px";
+    // this.element.style.width = width + "px";
   }
 
   if(height){
     if(this.iframe) {
       this.iframe.style.height = height + "px";
     }
-    this.element.style.height = height + "px";
+    // this.element.style.height = height + "px";
   }
 
   if (!this.resizing) {
@@ -232,6 +237,9 @@ EPUBJS.View.prototype.onShown = function() {
 
 EPUBJS.View.prototype.show = function() {
   // this.iframe.style.display = "block";
+  this.element.style.width = this.width + "px";
+  this.element.style.height = this.height + "px";
+
   this.iframe.style.display = "inline-block";
   this.iframe.style.visibility = "visible";
   
@@ -259,5 +267,7 @@ EPUBJS.View.prototype.destroy = function() {
     this.shown = false;
     this.iframe = null;
   }
+  this.element.style.height = 0;
+  this.element.style.width = 0;
 };