Add layout event and forceEvenPages for default manager

src/layout.js

@@ -1,3 +1,7 @@
+import { extend } from "./utils/core";
+import { EVENTS } from "./utils/constants";
+import EventEmitter from "event-emitter";
+
 /**
  * Figures out the CSS values to apply for a layout
  * @class
@@ -61,7 +65,8 @@ class Layout {
 			} else {
 				this._flow = "paginated";
 			}
-			this.props.flow = this._flow;
+			// this.props.flow = this._flow;
+			this.update({flow: this._flow});
 		}
 		return this._flow;
 	}
@@ -76,7 +81,8 @@ class Layout {
 
 		if (spread) {
 			this._spread = (spread === "none") ? false : true;
-			this.props.spread = this._spread;
+			// this.props.spread = this._spread;
+			this.update({spread: this._spread});
 		}
 
 		if (min >= 0) {
@@ -100,10 +106,11 @@ class Layout {
 		//-- Check the width and create even width columns
 		// var fullWidth = Math.floor(_width);
 		var width = _width;
+		var height = _height;
 
 		var section = Math.floor(width / 12);
 
-		var colWidth;
+		var columnWidth;
 		var spreadWidth;
 		var pageWidth;
 		var delta;
@@ -125,42 +132,54 @@ class Layout {
 		//-- Double Page
 		if(divisor > 1) {
 			// width = width - gap;
-			// colWidth = (width - gap) / divisor;
+			// columnWidth = (width - gap) / divisor;
 			// gap = gap / divisor;
-			colWidth = (width / divisor) - gap;
-			pageWidth = colWidth + gap;
+			columnWidth = (width / divisor) - gap;
+			pageWidth = columnWidth + gap;
 		} else {
-			colWidth = width;
+			columnWidth = width;
 			pageWidth = width;
 		}
 
 		if (this.name === "pre-paginated" && divisor > 1) {
-			width = colWidth;
+			width = columnWidth;
 		}
 
-		spreadWidth = (colWidth * divisor) + gap;
+		spreadWidth = (columnWidth * divisor) + gap;
 
 		delta = width;
 
 		this.width = width;
-		this.height = _height;
+		this.height = height;
 		this.spreadWidth = spreadWidth;
 		this.pageWidth = pageWidth;
 		this.delta = delta;
 
-		this.columnWidth = colWidth;
+		this.columnWidth = columnWidth;
 		this.gap = gap;
 		this.divisor = divisor;
 
-		this.props.width = width;
-		this.props.height = _height;
-		this.props.spreadWidth = spreadWidth;
-		this.props.pageWidth = pageWidth;
-		this.props.delta = delta;
+		// this.props.width = width;
+		// this.props.height = _height;
+		// this.props.spreadWidth = spreadWidth;
+		// this.props.pageWidth = pageWidth;
+		// this.props.delta = delta;
+		//
+		// this.props.columnWidth = colWidth;
+		// this.props.gap = gap;
+		// this.props.divisor = divisor;
+
+		this.update({
+			width,
+			height,
+			spreadWidth,
+			pageWidth,
+			delta,
+			columnWidth,
+			gap,
+			divisor
+		});
 
-		this.props.columnWidth = colWidth;
-		this.props.gap = gap;
-		this.props.divisor = divisor;
 	}
 
 	/**
@@ -211,6 +230,22 @@ class Layout {
 		};
 
 	}
+
+	update(props) {
+		// Remove props that haven't changed
+		Object.keys(props).forEach((propName) => {
+			if (this.props[propName] === props[propName]) {
+				delete props[propName];
+			}
+		});
+
+		if(Object.keys(props).length > 0) {
+			let newProps = extend(this.props, props);
+			this.emit(EVENTS.LAYOUT.UPDATED, newProps, props);
+		}
+	}
 }
 
+EventEmitter(Layout.prototype);
+
 export default Layout;

src/managers/continuous/index.js

@@ -33,7 +33,8 @@ class ContinuousViewManager extends DefaultViewManager {
 			flow: this.settings.flow,
 			layout: this.layout,
 			width: 0,
-			height: 0
+			height: 0,
+			forceEvenPages: false
 		};
 
 		this.scrollTop = 0;

src/managers/default/index.js

@@ -34,7 +34,8 @@ class DefaultViewManager {
 			layout: this.layout,
 			method: this.settings.method, // srcdoc, blobUrl, write
 			width: 0,
-			height: 0
+			height: 0,
+			forceEvenPages: true
 		};
 
 		this.rendered = false;
@@ -403,8 +404,6 @@ class DefaultViewManager {
 
 			if(left <= this.container.scrollWidth) {
 				this.scrollBy(this.layout.delta, 0, true);
-			} else if ((left - this.layout.pageWidth) === this.container.scrollWidth) {
-				this.scrollTo(this.container.scrollWidth - this.layout.delta, 0, true);
 			} else {
 				next = this.views.last().section.next();
 			}
@@ -486,8 +485,6 @@ class DefaultViewManager {
 
 			if(left <= this.container.scrollWidth) {
 				this.scrollBy(this.layout.delta, 0, true);
-			} else if ((left - this.layout.pageWidth) === this.container.scrollWidth) {
-				this.scrollTo(this.container.scrollWidth - this.layout.delta, 0, true);
 			} else {
 				prev = this.views.first().section.prev();
 			}

src/managers/views/iframe.js

@@ -149,7 +149,7 @@ class IframeView {
 			.then(function(){
 
 				// apply the layout function to the contents
-				this.settings.layout.format(this.contents);
+				this.layout.format(this.contents);
 
 				// find and report the writingMode axis
 				let writingMode = this.contents.writingMode();
@@ -275,15 +275,16 @@ class IframeView {
 				width = Math.ceil(width / this.layout.pageWidth) * this.layout.pageWidth;
 			}
 
-			/*
-			columns = Math.ceil(width / this.settings.layout.delta);
-			if ( this.settings.layout.divisor > 1 &&
-					 this.settings.layout.name === "reflowable" &&
+			if (this.settings.forceEvenPages) {
+				columns = (width / this.layout.delta);
+				if ( this.layout.divisor > 1 &&
+						 this.layout.name === "reflowable" &&
 						(columns % 2 > 0)) {
 					// add a blank page
-				width += this.settings.layout.gap + this.settings.layout.columnWidth;
+					width += this.layout.gap + this.layout.columnWidth;
 				}
-			*/
+			}
+
 		} // Expand Vertically
 		else if(this.settings.axis === "vertical") {
 			height = this.contents.textHeight();
@@ -395,7 +396,7 @@ class IframeView {
 			if(this.displayed && this.iframe) {
 				this.expand();
 				if (this.contents) {
-					this.settings.layout.format(this.contents);
+					this.layout.format(this.contents);
 				}
 			}
 		});
@@ -404,7 +405,7 @@ class IframeView {
 			if(this.displayed && this.iframe) {
 				this.expand();
 				if (this.contents) {
-					this.settings.layout.format(this.contents);
+					this.layout.format(this.contents);
 				}
 			}
 		});
@@ -414,6 +415,11 @@ class IframeView {
 
 	setLayout(layout) {
 		this.layout = layout;
+
+		if (this.contents) {
+			this.layout.format(this.contents);
+			this.expand();
+		}
 	}
 
 	setAxis(axis) {

src/rendition.js

@@ -478,6 +478,28 @@ class Rendition {
 		this.manager.moveTo(offset);
 	}
 
+	/**
+	 * Trigger a resize of the views
+	 * @param {number} [width]
+	 * @param {number} [height]
+	 */
+	resize(width, height){
+		if (width) {
+			this.settings.width = width;
+		}
+		if (height) {
+			this.settings.height = width;
+		}
+		this.manager.resize(width, height);
+	}
+
+	/**
+	 * Clear all rendered views
+	 */
+	clear(){
+		this.manager.clear();
+	}
+
 	/**
 	 * Go to the next "page" in the rendition
 	 * @return {Promise}
@@ -578,6 +600,11 @@ class Rendition {
 			this._layout.spread(settings.spread, this.settings.minSpreadWidth);
 
 			// this.mapping = new Mapping(this._layout.props);
+
+			this._layout.on(EVENTS.LAYOUT.UPDATED, (props, changed) => {
+				console.log("layout", props);
+				this.emit(EVENTS.RENDITION.LAYOUT, props);
+			})
 		}
 
 		if (this.manager && this._layout) {

src/utils/constants.js

@@ -45,6 +45,10 @@ export const EVENTS = {
     LOCATION_CHANGED : "locationChanged",
     RELOCATED : "relocated",
     MARK_CLICKED : "markClicked",
-    SELECTED : "selected"
+    SELECTED : "selected",
+    LAYOUT: "layout"
+  },
+  LAYOUT : {
+    UPDATED : "updated"
   }
 }

src/utils/core.js

@@ -113,7 +113,7 @@ export function defaults(obj) {
 }
 
 /**
- * Extend undefined properties of an object
+ * Extend properties of an object
  * @param {object} target
  * @returns {object}
  * @memberof Core