Page navigation with n pages

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "epubjs",
-  "version": "0.3.88",
+  "name": "epubjs-myh",
+  "version": "0.3.111",
   "description": "Parse and Render Epubs",
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -16,15 +16,15 @@
     "docs:md": "documentation build src/epub.js -f md -o documentation/md/API.md",
     "lint": "eslint -c .eslintrc.js src; exit 0",
     "start": "webpack-dev-server --inline --d",
-    "build": "NODE_ENV=production webpack --progress",
-    "minify": "NODE_ENV=production MINIMIZE=true webpack --progress",
-    "legacy": "NODE_ENV=production LEGACY=true webpack --progress",
-    "productionLegacy": "NODE_ENV=production MINIMIZE=true LEGACY=true webpack --progress",
+    "build": "set NODE_ENV=production && webpack --progress",
+    "minify": "set NODE_ENV=production && set MINIMIZE=true && webpack --progress",
+    "legacy": "set NODE_ENV=production && set LEGACY=true && webpack --progress",
+    "productionLegacy": "set NODE_ENV=production && set MINIMIZE=true && set LEGACY=true && webpack --progress",
     "compile": "babel -d lib/ src/",
     "watch": "babel --watch -d lib/ src/",
     "prepare": "npm run compile && npm run build && npm run minify && npm run legacy && npm run productionLegacy"
   },
-  "author": "fchasen@gmail.com",
+  "author": "myh@live.com",
   "license": "BSD-2-Clause",
   "devDependencies": {
     "@babel/cli": "^7.10.1",

src/contents.js

@@ -655,7 +655,9 @@ class Contents {
 							console.error(e, e.stack);
 						}
 					} else {
-						position = range.getBoundingClientRect();
+						// range.toString() might be an empty string and range.getBoundingClientRect() returns a all-zeros position.
+						// Thus, we use the parent element containing the range to get a valid bounding rect.
+						position = range.startContainer.parentElement.getBoundingClientRect();
 					}
 				}
 			}
@@ -1025,7 +1027,7 @@ class Contents {
 		if (width >= 0) {
 			this.width(width);
 			viewport.width = width;
-			this.css("padding", "0 "+(width/12)+"px");
+			//this.css("padding", "0 "+(width/12)+"px");
 		}
 
 		if (height >= 0) {

src/index.js

@@ -4,12 +4,14 @@ import Rendition from "./rendition";
 import Contents from "./contents";
 import Layout from "./layout";
 import ePub from "./epub";
+import { EVENTS } from "./utils/constants";
 
 export default ePub;
 export {
 	Book,
 	EpubCFI,
 	Rendition,
 	Contents,
-	Layout
+	Layout,
+	EVENTS,
 };

src/layout.js

@@ -103,18 +103,21 @@ class Layout {
 	calculate(_width, _height, _gap){
 
 		var divisor = 1;
-		var gap = _gap || 0;
+		var gap = _gap || 20;
 
 		//-- 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 section = Math.floor(width / 12);
 
 		var columnWidth;
+		var columnHeight;
 		var spreadWidth;
+		var spreadHeight;
 		var pageWidth;
+		var pageHeight;
 		var delta;
 
 		if (this._spread && width >= this._minSpreadWidth) {
@@ -123,9 +126,11 @@ class Layout {
 			divisor = 1;
 		}
 
+		/*
 		if (this.name === "reflowable" && this._flow === "paginated" && !(_gap >= 0)) {
 			gap = ((section % 2 === 0) ? section : section - 1);
 		}
+		*/
 
 		if (this.name === "pre-paginated" ) {
 			gap = 0;
@@ -138,26 +143,35 @@ class Layout {
 			// gap = gap / divisor;
 			columnWidth = (width / divisor) - gap;
 			pageWidth = columnWidth + gap;
+			columnHeight = (height / divisor) - gap;
+			pageHeight = columnHeight + gap;
 		} else {
 			columnWidth = width;
 			pageWidth = width;
+			columnHeight = height;
+			pageHeight = height;
 		}
 
 		if (this.name === "pre-paginated" && divisor > 1) {
 			width = columnWidth;
+			height = columnHeight;
 		}
 
 		spreadWidth = (columnWidth * divisor) + gap;
+		spreadHeight = (columnHeight * divisor) + gap;
 
 		delta = width;
 
 		this.width = width;
 		this.height = height;
 		this.spreadWidth = spreadWidth;
 		this.pageWidth = pageWidth;
+		this.spreadHeight = spreadHeight;
+		this.pageHeight = pageHeight;
 		this.delta = delta;
 
 		this.columnWidth = columnWidth;
+		this.columnHeight = columnHeight;
 		this.gap = gap;
 		this.divisor = divisor;
 
@@ -175,9 +189,12 @@ class Layout {
 			width,
 			height,
 			spreadWidth,
+			spreadHeight,
 			pageWidth,
+			pageHeight,
 			delta,
 			columnWidth,
+			columnHeight,
 			gap,
 			divisor
 		});