Switched to Gulp, Basic Scrolling Renderer

lib/epubjs/renderer.js

@@ -1,6 +1,6 @@
 EPUBJS.Renderer = function(book, _options) {
   var options = _options || {};
-  var settings = {
+  this.settings = {
     hidden: options.hidden || false,
     viewLimit: 3,
     width: options.width || false, 
@@ -14,7 +14,6 @@ EPUBJS.Renderer = function(book, _options) {
 
   // Blank Cfi for Parsing
   this.epubcfi = new EPUBJS.EpubCFI();
-  // this.resized = _.debounce(this.onResized.bind(this), 100);
 
   this.layoutSettings = {};
 
@@ -31,12 +30,12 @@ EPUBJS.Renderer = function(book, _options) {
   this.position = 1;
 
   this.initialize({
-    "width"  : settings.width,
-    "height" : settings.height,
+    "width"  : this.settings.width,
+    "height" : this.settings.height,
     "hidden" : true
   });
 
-  this.displaying = false;
+  this.rendering = false;
   this.views = [];
   this.positions = [];
 
@@ -48,8 +47,8 @@ EPUBJS.Renderer = function(book, _options) {
 */
 EPUBJS.Renderer.prototype.initialize = function(_options){
   var options = _options || {};
-  var height  = options.height || "100%";
-  var width   = options.width || "100%";
+  var height  = options.height ? options.height + "px" : "100%";
+  var width   = options.width ? options.width + "px" : "100%";
   var hidden  = options.hidden || false;
 
 
@@ -74,28 +73,63 @@ EPUBJS.Renderer.prototype.initialize = function(_options){
   return this.container;
 };
 
+EPUBJS.Renderer.prototype.resize = function(_width, _height){
+  var width = _width;
+  var height = _height;
+
+  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
+  });
+
+};
+
+EPUBJS.Renderer.prototype.onResized = function(e) {
+  var bounds = this.element.getBoundingClientRect();
+
+
+  this.resize(bounds.width, bounds.height);
+};
 
 EPUBJS.Renderer.prototype.attachTo = function(_element){
-  var element;
+  var bounds;
 
   if(EPUBJS.core.isElement(_element)) {
-    element = _element;
+    this.element = _element;
   } else if (typeof _element === "string") {
-    element = document.getElementById(_element);
+    this.element = document.getElementById(_element);
   } 
 
-  if(!element){
+  if(!this.element){
     console.error("Not an Element");
     return;
   }
 
-  element.appendChild(this.container);
+  this.element.appendChild(this.container);
+
+  if(!this.settings.height && !this.settings.width) {
+    bounds = this.element.getBoundingClientRect();
+    
+    this.resize(bounds.width, bounds.height);
+  }
 
   this.infinite.start();
 
   this.infinite.on("forwards", this.forwards.bind(this));
   this.infinite.on("backwards", this.backwards.bind(this));
 
+  window.addEventListener("resize", this.onResized.bind(this), false);
+
 };
 
 
@@ -106,37 +140,47 @@ EPUBJS.Renderer.prototype.display = function(what){
 
   this.book.opened.then(function(){
     var section = this.book.spine.get(what);
-    var rendered;
+    var rendered = this.render(section);
 
-    if(!section) {
-      displaying.reject();
-      return;
-    };
-
-    rendered = section.render();
-
-    view.index = section.index;
-
-    rendered.then(function(contents){
-      return view.load(contents);
-    }).then(function(){
+    rendered.then(function(){
+      this.fill();
       displaying.resolve(this);
     }.bind(this));
-
-    // Place view in correct position
-    this.insert(view, section.index);
-
+  
   }.bind(this));
 
   return displayed;
 };
 
+EPUBJS.Renderer.prototype.render = function(section){
+  var rendered;
+  var view = new EPUBJS.View();
+
+  if(!section) {
+    rendered.reject();
+    return;
+  };
+
+  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);
+  });
+
+};
+
 
 EPUBJS.Renderer.prototype.forwards = function(){
   var next;
-  var displayed;
+  var rendered;
+  var section;
 
-  if(this.displaying) return;
+  if(this.rendering) return;
+  console.log("going forwards")
 
   next = this.last().index + 1;
 
@@ -144,40 +188,62 @@ EPUBJS.Renderer.prototype.forwards = function(){
     return;
   }
 
-  displayed = this.display(next);
-  this.displaying = true;
+  section = this.book.spine.get(next);
+  rendered = this.render(section);
+  this.rendering = true;
 
-  displayed.then(function(){
-    this.displaying = false;
+  rendered.then(function(){
+    console.log("last:", this.last().height)
+
+    this.rendering = false;
   }.bind(this));
   
-  return displayed;
+  return rendered;
 };
 
 EPUBJS.Renderer.prototype.backwards = function(view){
   var prev;
-  var displayed;
+  var rendered;
+  var section;
 
-  if(this.displaying) return;
+  if(this.rendering) return;
+  console.log("going backwards")
 
   prev = this.first().index - 1;
   if(prev < 0){
-    return;
+    return; //TODO: should reject
   }
 
-  displayed = this.display(prev);
-  this.displaying = 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;
 
-  displayed.then(function(){
-    this.displaying = false;
-    window.scrollBy(0, this.first().height + 20); 
   }.bind(this));
 
-  return displayed;
+  return rendered;
 };
 
 
 // Manage Views
+
+// -- 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;
+  filling.then(function(){
+    var bottom = this.last().bounds().bottom;
+    while (height && bottom && bottom < height) {
+      this.forwards();
+    };
+  }.bind(this));
+};
+
 EPUBJS.Renderer.prototype.jump = function(view){
   this.views.push(view);
 };
@@ -217,4 +283,7 @@ EPUBJS.Renderer.prototype.first = function() {
 
 EPUBJS.Renderer.prototype.last = function() {
   return this.views[this.views.length-1];
-};
+};
+
+//-- Enable binding events to Renderer
+RSVP.EventTarget.mixin(EPUBJS.Renderer.prototype);