Merge pull request #589 from futurepress/layout_props

Add Layout props

package.json

@@ -1,6 +1,6 @@
 {
   "name": "epubjs",
-  "version": "0.3.22",
+  "version": "0.3.24",
   "description": "Parse and Render Epubs",
   "main": "lib/index.js",
   "jsnext:main": "src/index.js",

src/contents.js

@@ -735,8 +735,8 @@ class Contents {
 		this.css("background-color", "transparent");
 	}
 
-	mapPage(cfiBase, start, end) {
-		var mapping = new Mapping();
+	mapPage(cfiBase, layout, start, end, dev) {
+		var mapping = new Mapping(layout, dev);
 
 		return mapping.page(this, cfiBase, start, end);
 	}

src/layout.js

@@ -9,6 +9,7 @@
  */
 class Layout {
 	constructor(settings) {
+		this.settings = settings;
 		this.name = settings.layout || "reflowable";
 		this._spread = (settings.spread === "none") ? false : true;
 		this._minSpreadWidth = settings.minSpreadWidth || 800;
@@ -30,6 +31,20 @@ class Layout {
 		this.columnWidth = 0;
 		this.gap = 0;
 		this.divisor = 1;
+
+		this.props = {
+			name: this.name,
+			spread: this._spread,
+			flow: this._flow,
+			width: 0,
+			height: 0,
+			spreadWidth: 0,
+			delta: 0,
+			columnWidth: 0,
+			gap: 0,
+			divisor: 1
+		};
+
 	}
 
 	/**
@@ -44,6 +59,7 @@ class Layout {
 			} else {
 				this._flow = "paginated";
 			}
+			this.props.flow = this._flow;
 		}
 		return this._flow;
 	}
@@ -56,11 +72,16 @@ class Layout {
 	 */
 	spread(spread, min) {
 
+		if (spread) {
 			this._spread = (spread === "none") ? false : true;
+			this.props.spread = this._spread;
+		}
 
 		if (min >= 0) {
 			this._minSpreadWidth = min;
 		}
+
+		return this._spread;
 	}
 
 	/**
@@ -121,6 +142,15 @@ class Layout {
 		this.columnWidth = colWidth;
 		this.gap = gap;
 		this.divisor = divisor;
+
+		this.props.width = width;
+		this.props.height = _height;
+		this.props.spreadWidth = spreadWidth;
+		this.props.delta = delta;
+
+		this.props.columnWidth = colWidth;
+		this.props.gap = gap;
+		this.props.divisor = divisor;
 	}
 
 	/**

src/managers/default/index.js

@@ -442,7 +442,7 @@ class DefaultViewManager {
 			endA = startA + (container.top - visible[0].position().bottom);
 
 			startB = (container.top - visible[last].position().top) + offset;
-			endB = startB + pageHeight;
+			endB = pageHeight - startB;
 
 			startPage = this.mapping.page(visible[0].contents, visible[0].section.cfiBase, startA, endA)
 			endPage = this.mapping.page(visible[last].contents, visible[last].section.cfiBase, startB, endB);
@@ -629,7 +629,7 @@ class DefaultViewManager {
 		this.layout = layout;
 		this.updateLayout();
 
-		this.mapping = new Mapping(this.layout);
+		this.mapping = new Mapping(this.layout.props);
 		 // this.manager.layout(this.layout.format);
 	}
 

src/mapping.js

@@ -3,7 +3,7 @@ import EpubCFI from "./epubcfi";
 class Mapping {
 	constructor(layout, dev) {
 		this.layout = layout;
-		this.horizontal = (this.layout.flow() === "paginated") ? true : false;
+		this.horizontal = (this.layout.flow === "paginated") ? true : false;
 		this._dev = dev;
 	}
 
@@ -67,14 +67,15 @@ class Mapping {
 	findRanges(view){
 		var columns = [];
 		var scrollWidth = view.contents.scrollWidth();
-		var count = this.layout.count(scrollWidth);
-		var column = this.layout.column;
+		var spreads = Math.ceil( scrollWidth / this.layout.spreadWidth);
+		var count = spreads * this.layout.divisor;
+		var columnWidth = this.layout.columnWidth;
 		var gap = this.layout.gap;
 		var start, end;
 
 		for (var i = 0; i < count.pages; i++) {
-			start = (column + gap) * i;
-			end = (column * (i+1)) + (gap * i);
+			start = (columnWidth + gap) * i;
+			end = (columnWidth * (i+1)) + (gap * i);
 			columns.push({
 				start: this.findStart(view.document.body, start, end),
 				end: this.findEnd(view.document.body, start, end)

src/rendition.js

@@ -431,7 +431,7 @@ class Rendition {
 			this._layout = new Layout(settings);
 			this._layout.spread(settings.spread, this.settings.minSpreadWidth);
 
-			this.mapping = new Mapping(this._layout);
+			this.mapping = new Mapping(this._layout.props);
 		}
 
 		if (this.manager && this._layout) {

src/utils/core.js

@@ -1,4 +1,8 @@
 export const requestAnimationFrame = (typeof window != "undefined") ? (window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame) : false;
+const ELEMENT_NODE = 1;
+const TEXT_NODE = 3;
+const COMMENT_NODE = 8;
+const DOCUMENT_NODE = 9;
 
 export function isElement(obj) {
 	return !!(obj && obj.nodeType == 1);
@@ -242,11 +246,11 @@ export function indexOfNode(node, typeId) {
 }
 
 export function indexOfTextNode(textNode) {
-	return indexOfNode(textNode, Node.TEXT_NODE);
+	return indexOfNode(textNode, TEXT_NODE);
 }
 
 export function indexOfElementNode(elementNode) {
-	return indexOfNode(elementNode, Node.ELEMENT_NODE);
+	return indexOfNode(elementNode, ELEMENT_NODE);
 }
 
 export function isXml(ext) {