Render pre-paginated spreads in single and continuous managers

dist/epub.js

@@ -8062,6 +8062,10 @@ Layout.prototype.calculate = function(_width, _height, _gap){
     colWidth = width;
   }
 
+  if (this.name === "pre-paginated" && divisor > 1) {
+    width = colWidth;
+  }
+
   spreadWidth = colWidth * divisor;
 
   delta = (colWidth + gap) * divisor;
@@ -8336,6 +8340,8 @@ function ContinuousViewManager(options) {
 
 	SingleViewManager.apply(this, arguments); // call super constructor.
 
+	this.name = "continuous";
+
 	this.settings = core.extend(this.settings || {}, {
 		infinite: true,
 		overflow: "auto",
@@ -8492,31 +8498,31 @@ ContinuousViewManager.prototype.removeShownListeners = function(view){
 };
 
 
+// ContinuousViewManager.prototype.append = function(section){
+// 	return this.q.enqueue(function() {
+//
+// 		this._append(section);
+//
+//
+// 	}.bind(this));
+// };
+//
+// ContinuousViewManager.prototype.prepend = function(section){
+// 	return this.q.enqueue(function() {
+//
+// 		this._prepend(section);
+//
+// 	}.bind(this));
+//
+// };
+
 ContinuousViewManager.prototype.append = function(section){
-	return this.q.enqueue(function() {
-
-		this._append(section);
-
-
-	}.bind(this));
-};
-
-ContinuousViewManager.prototype.prepend = function(section){
-	return this.q.enqueue(function() {
-
-		this._prepend(section);
-
-	}.bind(this));
-
-};
-
-ContinuousViewManager.prototype._append = function(section){
 	var view = this.createView(section);
 	this.views.append(view);
 	return view;
 };
 
-ContinuousViewManager.prototype._prepend = function(section){
+ContinuousViewManager.prototype.prepend = function(section){
 	var view = this.createView(section);
 
 	view.on("resized", this.counter.bind(this));
@@ -8554,7 +8560,9 @@ ContinuousViewManager.prototype.update = function(_offset){
 
     if(isVisible === true) {
 			if (!view.displayed) {
-				promises.push(view.display(this.request));
+				promises.push(view.display(this.request).then(function (view) {
+					view.show();
+				}));
 			}
       visible.push(view);
     } else {
@@ -8604,7 +8612,7 @@ ContinuousViewManager.prototype.check = function(_offsetLeft, _offsetTop){
 		last = this.views.last();
     next = last && last.section.next();
     if(next) {
-      newViews.push(this._append(next));
+      newViews.push(this.append(next));
     }
   }
 
@@ -8612,7 +8620,7 @@ ContinuousViewManager.prototype.check = function(_offsetLeft, _offsetTop){
 		first = this.views.first();
     prev = first && first.section.prev();
     if(prev) {
-      newViews.push(this._prepend(prev));
+      newViews.push(this.prepend(prev));
     }
   }
 
@@ -8948,6 +8956,10 @@ ContinuousViewManager.prototype.updateLayout = function() {
 
 	}
 
+	// Set the dimensions for views
+	this.viewSettings.width = this.layout.width;
+	this.viewSettings.height = this.layout.height;
+
   this.setLayout(this.layout);
 
 };
@@ -9013,6 +9025,7 @@ var Queue = require('../queue');
 
 function SingleViewManager(options) {
 
+	this.name = "single";
 	this.View = options.view;
 	this.request = options.request;
 	this.renditionQueue = options.queue;
@@ -9152,11 +9165,18 @@ SingleViewManager.prototype.display = function(section, target){
 
 	this.views.clear();
 
-	// Create a new view
+	this.add(section)
-	view = this.createView(section);
-
-	this.add(view)
 		.then(function(){
+			var next;
+			if (this.layout.name === "pre-paginated" &&
+					this.layout.divisor > 1) {
+				next = section.next();
+				if (next) {
+					return this.add(next);
+				}
+			}
+		}.bind(this))
+		.then(function(view){
 
 			// Move to correct place within the section, if needed
 			if(target) {
@@ -9207,7 +9227,8 @@ SingleViewManager.prototype.moveTo = function(offset){
   this.scrollTo(distX, distY);
 };
 
-SingleViewManager.prototype.add = function(view){
+SingleViewManager.prototype.add = function(section){
+	var view = this.createView(section);
 
 	this.views.append(view);
 
@@ -9219,6 +9240,18 @@ SingleViewManager.prototype.add = function(view){
 
 };
 
+SingleViewManager.prototype.append = function(section){
+	var view = this.createView(section);
+	this.views.append(view);
+	return view.display(this.request);
+};
+
+SingleViewManager.prototype.prepend = function(section){
+	var view = this.createView(section);
+
+	this.views.prepend(view);
+	return view.display(this.request);
+};
 // SingleViewManager.prototype.resizeView = function(view) {
 //
 // 	if(this.settings.globalLayoutProperties.layout === "pre-paginated") {
@@ -9260,11 +9293,19 @@ SingleViewManager.prototype.next = function(){
 	if(next) {
 		this.views.clear();
 
-		view = this.createView(next);
+		return this.append(next)
-		return this.add(view)
+			.then(function(){
-		.then(function(){
+				var right;
-			this.views.show();
+				if (this.layout.name && this.layout.divisor > 1) {
-		}.bind(this));
+					right = next.next();
+					if (right) {
+						return this.append(right);
+					}
+				}
+			}.bind(this))
+			.then(function(){
+				this.views.show();
+			}.bind(this));
 	}
 
 
@@ -9299,14 +9340,22 @@ SingleViewManager.prototype.prev = function(){
 	if(prev) {
 		this.views.clear();
 
-		view = this.createView(prev);
+		return this.prepend(prev)
-		return this.add(view)
+			.then(function(){
-		.then(function(){
+				var left;
-			if(this.settings.axis === "horizontal") {
+				if (this.layout.name && this.layout.divisor > 1) {
-				this.scrollTo(this.container.scrollWidth - this.layout.delta, 0);
+					left = prev.prev();
-			}
+					if (left) {
-			this.views.show();
+						return this.prepend(left);
-		}.bind(this));
+					}
+				}
+			}.bind(this))
+			.then(function(){
+				if(this.settings.axis === "horizontal") {
+					this.scrollTo(this.container.scrollWidth - this.layout.delta, 0);
+				}
+				this.views.show();
+			}.bind(this));
 	}
 };
 
@@ -9459,6 +9508,10 @@ SingleViewManager.prototype.updateLayout = function() {
 
 	}
 
+	// Set the dimensions for views
+	this.viewSettings.width = this.layout.width;
+	this.viewSettings.height = this.layout.height;
+
 	this.setLayout(this.layout);
 
 };
@@ -12480,7 +12533,7 @@ IframeView.prototype.render = function(request, show) {
 
 			if(show !== false) {
 				//this.q.enqueue(function(view){
-					this.show();
+					// this.show();
 				//}, view);
 			}
 			// this.map = new Map(view, this.layout);
@@ -12499,11 +12552,9 @@ IframeView.prototype.size = function(_width, _height) {
   var width = _width || this.settings.width;
   var height = _height || this.settings.height;
 
-  // if(this.layout.name === "pre-paginated") {
+  if(this.layout.name === "pre-paginated") {
-  //   // TODO: check if these are different than the size set in chapter
+    this.lock("both", width, height);
-  //   this.lock("both", width, height);
+  } else if(this.settings.axis === "horizontal") {
-  // } else
-  if(this.settings.axis === "horizontal") {
 		this.lock("height", width, height);
 	} else {
 		this.lock("width", width, height);
@@ -12579,6 +12630,7 @@ IframeView.prototype.expand = function(force) {
       columns = Math.ceil(width / (this.settings.layout.columnWidth + this.settings.layout.gap));
 
       if ( this.settings.layout.divisor > 1 &&
+           this.settings.layout.name === "reflowable" &&
           (columns % 2 > 0)) {
           // add a blank page
           width += this.settings.layout.gap + this.settings.layout.columnWidth;
@@ -12815,7 +12867,6 @@ IframeView.prototype.display = function(request) {
       this.onDisplayed(this);
 
       this.displayed = true;
-
       displayed.resolve(this);
 
     }.bind(this));

examples/spreads.html

@@ -22,7 +22,6 @@
     // Load the opf
     var book = ePub("https://s3.amazonaws.com/epubjs/books/alice/OPS/package.opf");
     var rendition = book.renderTo("viewer", {
-      // flow: "paginated",
       width: "100%",
       height: 600
     });

src/layout.js

@@ -76,6 +76,10 @@ Layout.prototype.calculate = function(_width, _height, _gap){
     colWidth = width;
   }
 
+  if (this.name === "pre-paginated" && divisor > 1) {
+    width = colWidth;
+  }
+
   spreadWidth = colWidth * divisor;
 
   delta = (colWidth + gap) * divisor;

src/managers/continuous.js

@@ -6,6 +6,8 @@ function ContinuousViewManager(options) {
 
 	SingleViewManager.apply(this, arguments); // call super constructor.
 
+	this.name = "continuous";
+
 	this.settings = core.extend(this.settings || {}, {
 		infinite: true,
 		overflow: "auto",
@@ -162,31 +164,31 @@ ContinuousViewManager.prototype.removeShownListeners = function(view){
 };
 
 
+// ContinuousViewManager.prototype.append = function(section){
+// 	return this.q.enqueue(function() {
+//
+// 		this._append(section);
+//
+//
+// 	}.bind(this));
+// };
+//
+// ContinuousViewManager.prototype.prepend = function(section){
+// 	return this.q.enqueue(function() {
+//
+// 		this._prepend(section);
+//
+// 	}.bind(this));
+//
+// };
+
 ContinuousViewManager.prototype.append = function(section){
-	return this.q.enqueue(function() {
-
-		this._append(section);
-
-
-	}.bind(this));
-};
-
-ContinuousViewManager.prototype.prepend = function(section){
-	return this.q.enqueue(function() {
-
-		this._prepend(section);
-
-	}.bind(this));
-
-};
-
-ContinuousViewManager.prototype._append = function(section){
 	var view = this.createView(section);
 	this.views.append(view);
 	return view;
 };
 
-ContinuousViewManager.prototype._prepend = function(section){
+ContinuousViewManager.prototype.prepend = function(section){
 	var view = this.createView(section);
 
 	view.on("resized", this.counter.bind(this));
@@ -224,7 +226,9 @@ ContinuousViewManager.prototype.update = function(_offset){
 
     if(isVisible === true) {
 			if (!view.displayed) {
-				promises.push(view.display(this.request));
+				promises.push(view.display(this.request).then(function (view) {
+					view.show();
+				}));
 			}
       visible.push(view);
     } else {
@@ -274,7 +278,7 @@ ContinuousViewManager.prototype.check = function(_offsetLeft, _offsetTop){
 		last = this.views.last();
     next = last && last.section.next();
     if(next) {
-      newViews.push(this._append(next));
+      newViews.push(this.append(next));
     }
   }
 
@@ -282,7 +286,7 @@ ContinuousViewManager.prototype.check = function(_offsetLeft, _offsetTop){
 		first = this.views.first();
     prev = first && first.section.prev();
     if(prev) {
-      newViews.push(this._prepend(prev));
+      newViews.push(this.prepend(prev));
     }
   }
 
@@ -618,6 +622,10 @@ ContinuousViewManager.prototype.updateLayout = function() {
 
 	}
 
+	// Set the dimensions for views
+	this.viewSettings.width = this.layout.width;
+	this.viewSettings.height = this.layout.height;
+
   this.setLayout(this.layout);
 
 };

src/managers/single.js

@@ -9,6 +9,7 @@ var Queue = require('../queue');
 
 function SingleViewManager(options) {
 
+	this.name = "single";
 	this.View = options.view;
 	this.request = options.request;
 	this.renditionQueue = options.queue;
@@ -148,11 +149,18 @@ SingleViewManager.prototype.display = function(section, target){
 
 	this.views.clear();
 
-	// Create a new view
+	this.add(section)
-	view = this.createView(section);
-
-	this.add(view)
 		.then(function(){
+			var next;
+			if (this.layout.name === "pre-paginated" &&
+					this.layout.divisor > 1) {
+				next = section.next();
+				if (next) {
+					return this.add(next);
+				}
+			}
+		}.bind(this))
+		.then(function(view){
 
 			// Move to correct place within the section, if needed
 			if(target) {
@@ -203,7 +211,8 @@ SingleViewManager.prototype.moveTo = function(offset){
   this.scrollTo(distX, distY);
 };
 
-SingleViewManager.prototype.add = function(view){
+SingleViewManager.prototype.add = function(section){
+	var view = this.createView(section);
 
 	this.views.append(view);
 
@@ -215,6 +224,18 @@ SingleViewManager.prototype.add = function(view){
 
 };
 
+SingleViewManager.prototype.append = function(section){
+	var view = this.createView(section);
+	this.views.append(view);
+	return view.display(this.request);
+};
+
+SingleViewManager.prototype.prepend = function(section){
+	var view = this.createView(section);
+
+	this.views.prepend(view);
+	return view.display(this.request);
+};
 // SingleViewManager.prototype.resizeView = function(view) {
 //
 // 	if(this.settings.globalLayoutProperties.layout === "pre-paginated") {
@@ -256,11 +277,19 @@ SingleViewManager.prototype.next = function(){
 	if(next) {
 		this.views.clear();
 
-		view = this.createView(next);
+		return this.append(next)
-		return this.add(view)
+			.then(function(){
-		.then(function(){
+				var right;
-			this.views.show();
+				if (this.layout.name && this.layout.divisor > 1) {
-		}.bind(this));
+					right = next.next();
+					if (right) {
+						return this.append(right);
+					}
+				}
+			}.bind(this))
+			.then(function(){
+				this.views.show();
+			}.bind(this));
 	}
 
 
@@ -295,14 +324,22 @@ SingleViewManager.prototype.prev = function(){
 	if(prev) {
 		this.views.clear();
 
-		view = this.createView(prev);
+		return this.prepend(prev)
-		return this.add(view)
+			.then(function(){
-		.then(function(){
+				var left;
-			if(this.settings.axis === "horizontal") {
+				if (this.layout.name && this.layout.divisor > 1) {
-				this.scrollTo(this.container.scrollWidth - this.layout.delta, 0);
+					left = prev.prev();
-			}
+					if (left) {
-			this.views.show();
+						return this.prepend(left);
-		}.bind(this));
+					}
+				}
+			}.bind(this))
+			.then(function(){
+				if(this.settings.axis === "horizontal") {
+					this.scrollTo(this.container.scrollWidth - this.layout.delta, 0);
+				}
+				this.views.show();
+			}.bind(this));
 	}
 };
 
@@ -455,6 +492,10 @@ SingleViewManager.prototype.updateLayout = function() {
 
 	}
 
+	// Set the dimensions for views
+	this.viewSettings.width = this.layout.width;
+	this.viewSettings.height = this.layout.height;
+
 	this.setLayout(this.layout);
 
 };

src/views/iframe.js

@@ -153,7 +153,7 @@ IframeView.prototype.render = function(request, show) {
 
 			if(show !== false) {
 				//this.q.enqueue(function(view){
-					this.show();
+					// this.show();
 				//}, view);
 			}
 			// this.map = new Map(view, this.layout);
@@ -172,11 +172,9 @@ IframeView.prototype.size = function(_width, _height) {
   var width = _width || this.settings.width;
   var height = _height || this.settings.height;
 
-  // if(this.layout.name === "pre-paginated") {
+  if(this.layout.name === "pre-paginated") {
-  //   // TODO: check if these are different than the size set in chapter
+    this.lock("both", width, height);
-  //   this.lock("both", width, height);
+  } else if(this.settings.axis === "horizontal") {
-  // } else
-  if(this.settings.axis === "horizontal") {
 		this.lock("height", width, height);
 	} else {
 		this.lock("width", width, height);
@@ -252,6 +250,7 @@ IframeView.prototype.expand = function(force) {
       columns = Math.ceil(width / (this.settings.layout.columnWidth + this.settings.layout.gap));
 
       if ( this.settings.layout.divisor > 1 &&
+           this.settings.layout.name === "reflowable" &&
           (columns % 2 > 0)) {
           // add a blank page
           width += this.settings.layout.gap + this.settings.layout.columnWidth;
@@ -488,7 +487,6 @@ IframeView.prototype.display = function(request) {
       this.onDisplayed(this);
 
       this.displayed = true;
-
       displayed.resolve(this);
 
     }.bind(this));

test/epubcfi.js

@@ -1,5 +1,8 @@
 var assert = require('assert');
 var fs = require('fs');
+if (typeof DOMParser === "undefined") {
+  global.DOMParser = require('xmldom').DOMParser;
+}
 
 describe('EpubCFI', function() {
   var EpubCFI = require('../src/epubcfi.js');