updated pagination example

build/epub.js

@@ -1850,6 +1850,8 @@ EPUBJS.Book = function(options){
 		this.ready.cover.promise,
 		this.ready.toc.promise
 	];
+	
+	this.pagination = new EPUBJS.Pagination();
 	this.pageListReady = this.ready.pageList.promise;
 	
 	this.ready.all = RSVP.all(this.readyPromises);
@@ -2024,7 +2026,6 @@ EPUBJS.Book.prototype.unpack = function(packageXml){
 				return parse.pageList(navHtml, book.spineIndexByURL, book.spine);
 			}).then(function(pageList){
 				book.pageList = book.contents.pageList = pageList;
-				book.pagination = new EPUBJS.Pagination();
 				if(pageList.length) {
 					book.pagination.process(book.pageList);
 					book.ready.pageList.resolve(book.pageList);
@@ -2138,11 +2139,15 @@ EPUBJS.Book.prototype.generatePagination = function(width, height) {
 
 // Process the pagination from a JSON array containing the pagelist
 EPUBJS.Book.prototype.loadPagination = function(pagelistJSON) {
-	var pageList = JSON.parse(jsonArray);
+	var pageList = JSON.parse(pagelistJSON);
+
 	if(pageList && pageList.length) {
-		this.pageList = this.contents.pageList = pageList;
+		this.pageList = pageList;
 		this.pagination.process(this.pageList);
-		this.ready.pageList.resolve(this.pageList);
+		// Wait for book contents to load before resolving
+		this.ready.all.then(function(){
+			this.ready.pageList.resolve(this.pageList);
+		}.bind(this));
 	}
 	return this.pageList;
 };
@@ -3833,6 +3838,11 @@ EPUBJS.Pagination.prototype.pageFromCfi = function(cfi){
 
 EPUBJS.Pagination.prototype.cfiFromPage = function(pg){
 	var cfi;
+	// check that pg is an int
+	if(typeof pg != "number"){
+		pg = parseInt(pg);
+	}
+
 	// check if the cfi is in the page list
 	var index = this.pages.indexOf(pg);
 	if(index != -1) {

build/epub_no_underscore.js

@@ -1849,6 +1849,8 @@ EPUBJS.Book = function(options){
 		this.ready.cover.promise,
 		this.ready.toc.promise
 	];
+	
+	this.pagination = new EPUBJS.Pagination();
 	this.pageListReady = this.ready.pageList.promise;
 	
 	this.ready.all = RSVP.all(this.readyPromises);
@@ -2023,7 +2025,6 @@ EPUBJS.Book.prototype.unpack = function(packageXml){
 				return parse.pageList(navHtml, book.spineIndexByURL, book.spine);
 			}).then(function(pageList){
 				book.pageList = book.contents.pageList = pageList;
-				book.pagination = new EPUBJS.Pagination();
 				if(pageList.length) {
 					book.pagination.process(book.pageList);
 					book.ready.pageList.resolve(book.pageList);
@@ -2137,11 +2138,15 @@ EPUBJS.Book.prototype.generatePagination = function(width, height) {
 
 // Process the pagination from a JSON array containing the pagelist
 EPUBJS.Book.prototype.loadPagination = function(pagelistJSON) {
-	var pageList = JSON.parse(jsonArray);
+	var pageList = JSON.parse(pagelistJSON);
+
 	if(pageList && pageList.length) {
-		this.pageList = this.contents.pageList = pageList;
+		this.pageList = pageList;
 		this.pagination.process(this.pageList);
-		this.ready.pageList.resolve(this.pageList);
+		// Wait for book contents to load before resolving
+		this.ready.all.then(function(){
+			this.ready.pageList.resolve(this.pageList);
+		}.bind(this));
 	}
 	return this.pageList;
 };
@@ -3832,6 +3837,11 @@ EPUBJS.Pagination.prototype.pageFromCfi = function(cfi){
 
 EPUBJS.Pagination.prototype.cfiFromPage = function(pg){
 	var cfi;
+	// check that pg is an int
+	if(typeof pg != "number"){
+		pg = parseInt(pg);
+	}
+
 	// check if the cfi is in the page list
 	var index = this.pages.indexOf(pg);
 	if(index != -1) {

examples/pagination.html

@@ -118,7 +118,7 @@
          <script>
             "use strict";
             
-            var book = ePub("../demo/moby-dick/", {restore: false, reload: true });
+            var book = ePub("../demo/moby-dick/");
 
         </script>
     </head>
@@ -133,31 +133,47 @@
         <script>            
             var controls = document.getElementById("controls");
             var slider = document.createElement("input");
+            var pageList;
+             
+            var rendered = book.renderTo("area");
             
-            book.renderTo("area");
+            // Load in stored pageList from json or local storage
+            /*
+            EPUBJS.core.request("page_list.json").then(function(storedPageList){
+                pageList = storedPageList;
+                book.loadPagination(pageList);
+            });
+            */
+            
+            // Or generate the pageList on the fly
             book.ready.all.then(function(){
                 book.generatePagination();
             });
-                 
+            
+            // Wait for the pageList to be ready and then show slider
             book.pageListReady.then(function(pageList){
-                // console.log(pageList);
+                // console.log(JSON.stringify(pageList)); // Save the result
-                
                 slider.setAttribute("type", "range");
                 slider.setAttribute("min", book.pagination.firstPage);
                 slider.setAttribute("max", book.pagination.lastPage);
-                slider.setAttribute("value", 1);
                 slider.setAttribute("step", 1);
+                
                 slider.addEventListener("change", function(value){
-                    console.log(slider.value);
+                    book.gotoPage(slider.value);
                 }, false);
+                
+                // Wait for book to be rendered to get current page
+                rendered.then(function(){
+                    var currentLocation = book.getCurrentLocationCfi();
+                    var currentPage = book.pagination.pageFromCfi(currentLocation);
+                    slider.value = currentPage;
+                });
+                
                 controls.appendChild(slider);
             });
             
             book.on('book:pageChanged', function(location){
-                if(slider){
+                slider.value = location.page;
-                console.log("page", location.page, location.percentage);
-                    slider.setAttribute("value", location.page);
-                }
             });
         </script>
     </body>

src/book.js

@@ -74,6 +74,8 @@ EPUBJS.Book = function(options){
 		this.ready.cover.promise,
 		this.ready.toc.promise
 	];
+	
+	this.pagination = new EPUBJS.Pagination();
 	this.pageListReady = this.ready.pageList.promise;
 	
 	this.ready.all = RSVP.all(this.readyPromises);
@@ -248,7 +250,6 @@ EPUBJS.Book.prototype.unpack = function(packageXml){
 				return parse.pageList(navHtml, book.spineIndexByURL, book.spine);
 			}).then(function(pageList){
 				book.pageList = book.contents.pageList = pageList;
-				book.pagination = new EPUBJS.Pagination();
 				if(pageList.length) {
 					book.pagination.process(book.pageList);
 					book.ready.pageList.resolve(book.pageList);
@@ -362,11 +363,15 @@ EPUBJS.Book.prototype.generatePagination = function(width, height) {
 
 // Process the pagination from a JSON array containing the pagelist
 EPUBJS.Book.prototype.loadPagination = function(pagelistJSON) {
-	var pageList = JSON.parse(jsonArray);
+	var pageList = JSON.parse(pagelistJSON);
+
 	if(pageList && pageList.length) {
-		this.pageList = this.contents.pageList = pageList;
+		this.pageList = pageList;
 		this.pagination.process(this.pageList);
-		this.ready.pageList.resolve(this.pageList);
+		// Wait for book contents to load before resolving
+		this.ready.all.then(function(){
+			this.ready.pageList.resolve(this.pageList);
+		}.bind(this));
 	}
 	return this.pageList;
 };

src/pagination.js

@@ -38,6 +38,11 @@ EPUBJS.Pagination.prototype.pageFromCfi = function(cfi){
 
 EPUBJS.Pagination.prototype.cfiFromPage = function(pg){
 	var cfi;
+	// check that pg is an int
+	if(typeof pg != "number"){
+		pg = parseInt(pg);
+	}
+
 	// check if the cfi is in the page list
 	var index = this.pages.indexOf(pg);
 	if(index != -1) {