Scrolling Renderer remove views when they leave the screen

lib/epubjs/renderer.js

@@ -2,7 +2,7 @@ EPUBJS.Renderer = function(book, _options) {
   var options = _options || {};
   this.settings = {
     hidden: options.hidden || false,
-    viewLimit: 3,
+    viewsLimit: 4,
     width: options.width || false, 
     height: options.height || false, 
   };
@@ -125,8 +125,13 @@ EPUBJS.Renderer.prototype.attachTo = function(_element){
 
   this.infinite.start();
 
-  this.infinite.on("forwards", this.forwards.bind(this));
-  this.infinite.on("backwards", this.backwards.bind(this));
+  this.infinite.on("forwards", function(){
+    if(!this.rendering) this.forwards();
+  }.bind(this));
+  
+  this.infinite.on("backwards", function(){
+    if(!this.rendering) this.backwards();
+  }.bind(this));
 
   window.addEventListener("resize", this.onResized.bind(this), false);
 
@@ -151,10 +156,11 @@ EPUBJS.Renderer.prototype.display = function(what){
     var section = this.book.spine.get(what);
     var rendered = this.render(section);
 
-    rendered.then(function(){
-      this.fill();
-      displaying.resolve(this);
-    }.bind(this));
+    rendered.
+      then(this.fill.bind(this)).
+      then(function(){
+        displaying.resolve(this);
+      }.bind(this));
   
   }.bind(this));
 
@@ -173,12 +179,19 @@ EPUBJS.Renderer.prototype.render = function(section){
   rendered = section.render();
   view.index = section.index;
 
-  // Place view in correct position
-  this.insert(view, section.index);
+  
 
-  return rendered.then(function(contents){
-    return view.load(contents);
-  });
+  return rendered.
+    then(function(contents){
+      // Place view in correct position
+      this.insert(view, section.index);
+
+      return view.load(contents);
+    }.bind(this))
+    .then(function(){
+      this.rendering = false;
+      return view;
+    }.bind(this));
 
 };
 
@@ -188,23 +201,36 @@ EPUBJS.Renderer.prototype.forwards = function(){
   var rendered;
   var section;
 
-  if(this.rendering) return;
-  console.log("going forwards")
-
   next = this.last().index + 1;
 
-  if(next === this.book.spine.length){
-    return;
+  if(this.rendering || next === this.book.spine.length){
+    rendered = new RSVP.defer();
+    rendered.reject({message: "reject forwards"});
+    return rendered.promise;
   }
+  console.log("going forwards")
+
+  this.rendering = true;
 
   section = this.book.spine.get(next);
   rendered = this.render(section);
-  this.rendering = true;
 
   rendered.then(function(){
-    console.log("last:", this.last().height)
+    // this.rendering = false;
+    var first = this.first();
+    var bounds = first.bounds();
+    var container = this.container.getBoundingClientRect();
+    var offset;
+    var prev = this.container.scrollTop;
+    if(this.views.length > this.settings.viewsLimit) {
+      
+      // Remove the item
+      this.remove(first);
 
-    this.rendering = false;
+      // Reset Position
+      this.infinite.scroll(0, prev - bounds.height, true)
+
+    }
   }.bind(this));
   
   return rendered;
@@ -215,23 +241,28 @@ EPUBJS.Renderer.prototype.backwards = function(view){
   var rendered;
   var section;
 
-  if(this.rendering) return;
-  console.log("going backwards")
 
   prev = this.first().index - 1;
-  if(prev < 0){
-    return; //TODO: should reject
+  if(this.rendering || prev < 0){
+    rendered = new RSVP.defer();
+    rendered.reject({message: "reject backwards"});
+    return rendered.promise;
   }
+  console.log("going backwards")
+
+  this.rendering = true;
 
   section = this.book.spine.get(prev);
   rendered = this.render(section);
-  this.rendering = true;
 
   rendered.then(function(){
-    this.rendering = false;
-    // -- this might want to be in infinite
-    this.container.scrollTop += this.first().height;
+    // this.container.scrollTop += this.first().height;
+    this.infinite.scrollBy(0, this.first().height, true);
 
+    if(this.views.length > this.settings.viewsLimit) {
+      last = this.last();
+      this.remove(last);
+    }
   }.bind(this));
 
   return rendered;
@@ -242,31 +273,45 @@ EPUBJS.Renderer.prototype.backwards = function(view){
 
 // -- this might want to be in infinite
 EPUBJS.Renderer.prototype.fill = function() {
-  var filling = this.backwards();
   var height = this.container.getBoundingClientRect().height;
-  
-  if(!filling) return;
-  
-  filling.then(function(){
+  var next = function(){
     var bottom = this.last().bounds().bottom;
-    while (height && bottom && bottom < height) {
-      this.forwards();
-    };
-  }.bind(this));
-};
+    var defer = new RSVP.defer();
+    var promise = defer.promise;
+
+    if (height && bottom && (bottom < height) && (this.last().index + 1 < this.book.spine.length)) {
+      return this.forwards().then(next);
+    } else {
+      this.rendering = false;
+      defer.resolve();
+      return promise;
+    }
+  }.bind(this);
+
+  
+  return next().
+    then(this.backwards.bind(this)).
+    then(function(){
+      this.rendering = false;
+    }.bind(this));
+
 
-EPUBJS.Renderer.prototype.jump = function(view){
-  this.views.push(view);
 };
 
 EPUBJS.Renderer.prototype.append = function(view){
+  var first, prevTop, prevHeight, offset;
+
   this.views.push(view);
   view.appendTo(this.container);
+
 };
 
 EPUBJS.Renderer.prototype.prepend = function(view){
+  var last;
+
   this.views.unshift(view);
   view.prependTo(this.container);
+
 };
 
 // Simple Insert
@@ -279,13 +324,17 @@ EPUBJS.Renderer.prototype.insert = function(view, index){
   } else if(index - this.last().index <= 0) {
     this.prepend(view);
   }
-
+  console.log("insert")
   // return position;
 };
 
 // Remove the render element and clean up listeners
-EPUBJS.Renderer.prototype.destroy = function() {
-  
+EPUBJS.Renderer.prototype.remove = function(view) {
+  var index = this.views.indexOf(view);
+  view.destroy();
+  if(index > -1) {
+    this.views.splice(index, 1);
+  }
 };
 
 EPUBJS.Renderer.prototype.first = function() {