update layout to use format and calculatePages, properties array

hooks/default/smartimages.js

@@ -4,7 +4,7 @@ EPUBJS.Hooks.register("beforeChapterDisplay").smartimages = function(callback, r
 			iheight = renderer.height,//chapter.bodyEl.clientHeight,//chapter.doc.body.getBoundingClientRect().height,
 			oheight;
 
-		if(renderer.settings.layout != "reflowable") {
+		if(renderer.layoutSettings.layout != "reflowable") {
 			callback();
 			return; //-- Only adjust images for reflowable text
 		}

src/book.js

@@ -759,16 +759,19 @@ EPUBJS.Book.prototype.addHeadTag = function(tag, attrs) {
 };
 
 EPUBJS.Book.prototype.useSpreads = function(use) {
-	if(use) {
+	console.warn("useSpreads is deprecated, use forceSingle or set a layoutOveride instead");
-		this.renderer.setMinSpreadWidth(this.settings.minSpreadWidth);
+	if(use === false) {
+		this.forceSingle(true);
 	} else {
-		this.renderer.setMinSpreadWidth(0);
+		this.forceSingle(false);
 	}
+};
 
+EPUBJS.Book.prototype.forceSingle = function(use) {
+	this.renderer.forceSingle(use);
 	if(this.isRendered) {
 		this.renderer.reformat();
 	}
-
 };
 
 EPUBJS.Book.prototype.unload = function(){

src/layout.js

@@ -1,6 +1,11 @@
 EPUBJS.Layout = EPUBJS.Layout || {};
 
-EPUBJS.Layout.Reflowable = function(documentElement, _width, _height){
+EPUBJS.Layout.Reflowable = function(){
+	this.documentElement = null;
+	this.spreadWidth = null;
+};
+
+EPUBJS.Layout.Reflowable.prototype.format = function(documentElement, _width, _height){
 	// Get the prefixed CSS commands
 	var columnAxis = EPUBJS.core.prefixed('columnAxis');
 	var columnGap = EPUBJS.core.prefixed('columnGap');
@@ -11,9 +16,9 @@ EPUBJS.Layout.Reflowable = function(documentElement, _width, _height){
 	var section = Math.ceil(width / 8);
 	var gap = (section % 2 === 0) ? section : section - 1;
 
+	this.documentElement = documentElement;
 	//-- Single Page
-	var spreadWidth = (width + gap);
+	this.spreadWidth = (width + gap);
-	var totalWidth, displayedPages;
 
 	documentElement.style.width = "auto"; //-- reset width for calculations
 
@@ -29,19 +34,30 @@ EPUBJS.Layout.Reflowable = function(documentElement, _width, _height){
 
 	documentElement.style.width = width + "px";
 
+	return {
+		pageWidth : this.spreadWidth,
+		pageHeight : _height
+	};
+};
 
-	totalWidth = documentElement.scrollWidth;
+EPUBJS.Layout.Reflowable.prototype.calculatePages = function() { 
-	displayedPages = Math.round(totalWidth / spreadWidth);
+	var totalWidth, displayedPages;
+	this.documentElement.style.width = "auto"; //-- reset width for calculations
+	totalWidth = this.documentElement.scrollWidth;
+	displayedPages = Math.round(totalWidth / this.spreadWidth);
 
 	return {
-		pageWidth : spreadWidth,
-		pageHeight : _height,
 		displayedPages : displayedPages,
 		pageCount : displayedPages
 	};
 };
 
-EPUBJS.Layout.ReflowableSpreads = function(documentElement, _width, _height){
+EPUBJS.Layout.ReflowableSpreads = function(){
+	this.documentElement = null;
+	this.spreadWidth = null;
+};
+
+EPUBJS.Layout.ReflowableSpreads.prototype.format = function(documentElement, _width, _height){
 	var columnAxis = EPUBJS.core.prefixed('columnAxis');
 	var columnGap = EPUBJS.core.prefixed('columnGap');
 	var columnWidth = EPUBJS.core.prefixed('columnWidth');
@@ -56,15 +72,16 @@ EPUBJS.Layout.ReflowableSpreads = function(documentElement, _width, _height){
 
 	//-- Double Page
 	var colWidth = Math.floor((width - gap) / divisor);
-	var spreadWidth = (colWidth + gap) * divisor;
 
-	var totalWidth, displayedPages;
+	this.documentElement = documentElement;
+	this.spreadWidth = (colWidth + gap) * divisor;
+
 	
 	documentElement.style.width = "auto"; //-- reset width for calculations
 	
 	documentElement.style.overflow = "hidden";
 
-	documentElement.style.width = width + "px";
+	//documentElement.style.width = width + "px";
 
 	//-- Adjust height
 	documentElement.style.height = _height + "px";
@@ -74,20 +91,29 @@ EPUBJS.Layout.ReflowableSpreads = function(documentElement, _width, _height){
 	documentElement.style[columnGap] = gap+"px";
 	documentElement.style[columnWidth] = colWidth+"px";
 
-	totalWidth = documentElement.scrollWidth;
+	return {
-	displayedPages = Math.ceil(totalWidth / spreadWidth);
+		pageWidth : this.spreadWidth,
+		pageHeight : _height
+	};
+};
+
+EPUBJS.Layout.ReflowableSpreads.prototype.calculatePages = function() { 
+	var totalWidth = this.documentElement.scrollWidth;
+	var displayedPages = Math.round(totalWidth / this.spreadWidth);
 
 	//-- Add a page to the width of the document to account an for odd number of pages
-	documentElement.style.width = totalWidth + spreadWidth + "px";
+	this.documentElement.style.width = totalWidth + this.spreadWidth + "px";
 
 	return {
-		pageWidth : spreadWidth,
-		pageHeight : _height,
 		displayedPages : displayedPages,
 		pageCount : displayedPages * 2
 	};
 };
 
+EPUBJS.Layout.Fixed = function(){
+	this.documentElement = null;
+};
+
 EPUBJS.Layout.Fixed = function(documentElement, _width, _height){
 	var columnWidth = EPUBJS.core.prefixed('columnWidth');
 	var viewport = documentElement.querySelector("[name=viewport");
@@ -95,6 +121,7 @@ EPUBJS.Layout.Fixed = function(documentElement, _width, _height){
 	var contents;
 	var width, height;
 	
+	this.documentElement = documentElement;
 	/**
 	* check for the viewport size
 	* <meta name="viewport" content="width=1024,height=697" />
@@ -123,9 +150,14 @@ EPUBJS.Layout.Fixed = function(documentElement, _width, _height){
 	
 	return {
 		pageWidth : width,
-		pageHeight : height,
+		pageHeight : height
-		displayedPages : 1,
-		pageCount : 1
 	};
 	
 };
+
+EPUBJS.Layout.Fixed.prototype.calculatePages = function(){
+	return {
+		displayedPages : 1,
+		pageCount : 1
+	};
+};

src/parser.js

@@ -219,11 +219,12 @@ EPUBJS.Parser.prototype.spine = function(spineXml, manifest){
 	items.forEach(function(item, index){
 		var Id = item.getAttribute('idref');
 		var cfiBase = epubcfi.generateChapter(spineNodeIndex, index, Id);
+		var props = item.getAttribute('properties') || '';
 		var vert = {
 			'id' : Id,
 			'linear' : item.getAttribute('linear') || '',
-			'properties' : item.getAttribute('properties') || '',
+			'properties' : props.split(' '),
-			'manifestProperties' : manifest[Id].properties || '',
+			'manifestProperties' : manifest[Id].properties.split(' '),
 			'href' : manifest[Id].href,
 			'url' :  manifest[Id].url,
 			'index' : index,

src/renderer.js

@@ -19,8 +19,11 @@ EPUBJS.Renderer = function(renderMethod) {
 	this.epubcfi = new EPUBJS.EpubCFI();
 	
 	this.spreads = true;
+	this.forceSingle = false;
 	this.resized = _.throttle(this.onResized.bind(this), 10);
 
+	this.layoutSettings = {};
+
 	//-- Adds Hook methods to the Book prototype
 	//   Hooks will all return before triggering the callback.
 	EPUBJS.Hooks.mixin(this);
@@ -91,7 +94,7 @@ EPUBJS.Renderer.prototype.displayChapter = function(chapter, globalLayout){
 
 	this.currentChapterCfiBase = chapter.cfiBase;
 
-	this.settings = this.reconcileLayoutSettings(globalLayout, chapter.properties);
+	this.layoutSettings = this.reconcileLayoutSettings(globalLayout, chapter.properties);
 
 	// Get the url string from the chapter (may be from storage)
 	return chapter.url().
@@ -111,16 +114,24 @@ EPUBJS.Renderer.prototype.load = function(url){
 	var deferred = new RSVP.defer();
 	var loaded;
 
-	this.layoutMethod = this.determineLayout(this.settings);
+	// Switch to the required layout method for the settings
+	this.layoutMethod = this.determineLayout(this.layoutSettings);
+	this.layout = new EPUBJS.Layout[this.layoutMethod];
 
 	this.visible(false);
 
 	loaded = this.render.load(url);
 
 	loaded.then(function(contents) {
+		var formated;
+		
 		this.contents = contents;
 		this.doc = this.render.document;
 
+		// Format the contents using the current layout method
+		formated = this.layout.format(contents, this.render.width, this.render.height);
+		this.render.setPageDimensions(formated.pageWidth, formated.pageHeight);
+
 		if(!this.initWidth && !this.initHeight){
 			this.render.window.addEventListener("resize", this.resized, false);
 		}
@@ -130,6 +141,7 @@ EPUBJS.Renderer.prototype.load = function(url){
 
 		//-- Trigger registered hooks before displaying
 		this.beforeDisplay(function(){
+			var pages = this.layout.calculatePages();
 			var msg = this.currentChapter;
 			
 			msg.cfi = this.currentLocationCfi = this.getPageCfi();
@@ -137,8 +149,7 @@ EPUBJS.Renderer.prototype.load = function(url){
 			this.trigger("renderer:chapterDisplayed", msg);
 			this.trigger("renderer:pageChanged", this.currentLocationCfi);
 
-			this.layout = this.layoutMethod(contents, this.render.width, this.render.height);
+			this.updatePages(pages);
-			this.updatePages(this.layout);
 
 			this.visible(true);
 
@@ -157,9 +168,7 @@ EPUBJS.Renderer.prototype.load = function(url){
 * Returns: Object with layout properties
 */
 EPUBJS.Renderer.prototype.reconcileLayoutSettings = function(global, chapter){
-	var properties = chapter.split(' ');
 	var settings = {};
-	var spreads = true;
 
 	//-- Get the global defaults
 	for (var attr in global) {
@@ -168,7 +177,7 @@ EPUBJS.Renderer.prototype.reconcileLayoutSettings = function(global, chapter){
 		}
 	}
 	//-- Get the chapter's display type
-	properties.forEach(function(prop){
+	chapter.forEach(function(prop){
 		var rendition = prop.replace("rendition:", '');
 		var split = rendition.indexOf("-");
 		var property, value;
@@ -216,7 +225,7 @@ EPUBJS.Renderer.prototype.determineLayout = function(settings){
 	this.spreads = spreads;
 	this.render.scroll(scroll);
 	this.trigger("renderer:spreads", spreads);
-	return EPUBJS.Layout[layoutMethod];
+	return layoutMethod;
 };
 
 // Shortcut to trigger the hook before displaying the chapter
@@ -227,25 +236,29 @@ EPUBJS.Renderer.prototype.beforeDisplay = function(callback, renderer){
 // Update the renderer with the information passed by the layout
 EPUBJS.Renderer.prototype.updatePages = function(layout){
 	this.displayedPages = layout.displayedPages;
-	this.currentChapter.pages = layout.displayedPages;
+	this.currentChapter.pages = layout.pageCount;
-	this.render.setPageDimensions(layout.pageWidth, layout.pageHeight);
 };
 
 // Apply the layout again and jump back to the previous cfi position
 EPUBJS.Renderer.prototype.reformat = function(){
 	var renderer = this;
+	var formated, pages;
 	if(!this.contents) return;
 	
-	this.layout = this.layoutMethod(this.contents, this.render.width, this.render.height);
+	formated = this.layout.format(this.contents, this.render.width, this.render.height);
-	this.updatePages(this.layout);
+	this.render.setPageDimensions(formated.pageWidth, formated.pageHeight);
 
-	setTimeout(function(){
+	pages = renderer.layout.calculatePages();
+	renderer.updatePages(pages);
 	
+	// Give the css styles time to update
+	clearTimeout(this.timeoutTillCfi);
+	this.timeoutTillCfi = setTimeout(function(){
 		//-- Go to current page after formating
 		if(renderer.currentLocationCfi){
 			renderer.gotoCfi(renderer.currentLocationCfi);
 		}
-
+		this.timeoutTillCfi = null;
 	}, 10);
 
 };
@@ -469,8 +482,9 @@ EPUBJS.Renderer.prototype.onResized = function(e){
 	// Only re-layout if the spreads have switched
 	if(spreads != this.spreads){
 		this.spreads = spreads;
-		this.layoutMethod = this.determineLayout(this.settings);
+		this.layoutMethod = this.determineLayout(this.layoutSettings);
-	}
+		this.layout = new EPUBJS.Layout[this.layoutMethod];	
+}
 
 	if(this.contents){
 		this.reformat();
@@ -537,13 +551,23 @@ EPUBJS.Renderer.prototype.setMinSpreadWidth = function(width){
 };
 
 EPUBJS.Renderer.prototype.determineSpreads = function(cutoff){
-	if(this.width < cutoff || !cutoff) {
+	if(this.forceSingle || !cutoff || this.width < cutoff) {
 		return false; //-- Single Page
 	}else{
 		return true; //-- Double Page
 	}
 };
 
+EPUBJS.Renderer.prototype.forceSingle = function(bool){
+	if(bool) {
+		this.forceSingle = true;
+		this.spreads = false;
+	} else {
+		this.forceSingle = false;
+		this.spreads = this.determineSpreads(width);
+	}
+};
+
 //-- Content Replacements
 
 EPUBJS.Renderer.prototype.replace = function(query, func, finished, progress){