allow for passing book to app

css/main.css

@@ -7,12 +7,15 @@ body {
   position: fixed;
   width: 100%;
   height: 100%;
-  left: 40px; 
+  /* left: 40px; */ 
+  -webkit-transform: translate(40px, 0);
+  -moz-transform: translate(40px, 0);
+    
   border-radius: 5px 0px 0px 5px;
   background: #fff;
   overflow: hidden;
-  -webkit-transition: left .5s;
-  -moz-transition: left .5s;
+  -webkit-transition: -webkit-transform .5s;
+  -moz-transition: -moz-transform .5s;
   
   -moz-box-shadow:    inset 0 0 50px rgba(0,0,0,.1);
   -webkit-box-shadow: inset 0 0 50px rgba(0,0,0,.1);
@@ -45,6 +48,7 @@ body {
   width: 80%;
   height: 80%;
   margin: 0 auto;
+  max-width: 1250px;
 }
 
 #area iframe {
@@ -56,7 +60,7 @@ body {
 }
 
 #next {  
-  right: 80px;
+  right: 40px;
 }
 
 .arrow {
@@ -81,20 +85,26 @@ body {
 #sidebar {
   background: #6b6b6b;
   position: fixed;
-  left: -260px;
+  /* left: -260px; */
+  /* -webkit-transform: translate(-260px, 0);
+  -moz-transform: translate(-260px, 0); */
   top: 0;
   width: 300px;
   height: 100%;
-  -webkit-transition: left .5s;
-  -moz-transition: left .5s;
+  -webkit-transition: -webkit-transform .5s;
+  -moz-transition: transform .5s;
 }
 
 #sidebar.open {
-  left: 0;
+ /* left: 0; */
+ -webkit-transform: translate(0, 0);
+ -moz-transform: translate(0, 0);
 }
 
 #main.closed {
-  left: 300px;
+  /* left: 300px; */
+  -webkit-transform: translate(260px, 0);
+  -moz-transform: translate(260px, 0);
 }
 
 #controls {
@@ -107,9 +117,13 @@ body {
   padding: 10px 0;
 }
 
-#controls img {
-  float: right;
-  margin-right: 14px;
+#controls #open {
+  width: 25px;
+}
+
+#controls a {
+  float: left;
+  margin-left: 12px;
   opacity: .5;
 }
 
@@ -155,7 +169,7 @@ input:-moz-placeholder {
 
 #toc {
   margin-top: 50px;
-  padding-left: 25px;
+  padding-left: 40px;
   display: block;
   width: 100%;
   height: 100%;
@@ -183,3 +197,37 @@ input:-moz-placeholder {
   text-decoration: underline;
 }
 
+@media only screen and (max-width: 1040px) {
+  #area{
+    width: 50%;
+  }
+  
+  #divider {
+    display: none;
+  }
+}
+
+@media only screen and (max-width: 900px) {
+  #area{
+    width: 60%;
+  }
+
+  #prev {
+    left: 20px;
+  }
+  
+  #next {  
+    right: 20px;
+  }
+}
+
+@media only screen and (max-width: 550px) {
+  #area{
+    width: 80%;
+  }
+  .arrow {
+    display: none;
+  }
+  
+}
+

fpjs/reader/app.js

@@ -4,19 +4,27 @@ FP.app.init = (function($){
 
   var Book;
 
-  function init(){
+  function init(bookURL){
+	var search = window.location.search.match(/book=(.*)/),
+		bookURL = bookURL || (search ? search[1] : "moby-dick");
+
 	//-- Setup the browser prefixes 
 	FP.core.crossBrowserColumnCss();
 
 	//-- Temp set the previos position to section 6, 
 	//   since moby-dick has lots of crap before the test
 	//   Might want to make a way to skip to first chapter
-	if (localStorage.getItem("spinePos") === null) {
-		localStorage.setItem("spinePos", 6);
+	if (localStorage.getItem("bookURL") === null || 
+		localStorage.getItem("bookURL") != bookURL) {
+
+		localStorage.setItem("bookURL", bookURL);
+		localStorage.setItem("spinePos", 0);
 	}
 
+	//-- Set up our sidebar
+	$("#main").width($(window).width()-40);
 
-	Book = new FP.Book("area", "/moby-dick/");
+	Book = new FP.Book("area", bookURL + "/");
 	//Book = new FP.Book("area", "/the-hound-of-the-baskervilles/");
 
 	Book.listen("book:metadataReady", meta);
@@ -53,9 +61,20 @@ FP.app.init = (function($){
 
 	  	  $item = $("<a href='#"+item.href+"' data-spinepos='"+item.spinePos+"'>"+item.label+"</a>");
 
+	  	  //-- Handle sub items later
+	  	  /*
+	  	  if(item.subitems.length){
+		  	  $subitems = $("<ul>");
+		  	  item.subitems.forEach(function(subitem){
+			  	  $subitem = $("<li><a href='#"+subitem.href+"' data-spinepos='"+subitem.spinePos+"'>"+subitem.label+"</a></li>");
+			  	  $subitems.append($subitem);
+			  });
+			  $item.append($subitems);
+	  	  }
+	  	  */
+
 	  	  $item.on("click", function(e){
 		  	  $this = $(this);
-		  	  console.log(item.spinePos)
 		  	  Book.displayChapter($this.data("spinepos"));
 		  	  e.preventDefault();
 	  	  });
@@ -67,12 +86,22 @@ FP.app.init = (function($){
 
   }
 
+
+
   function controls(){
 	  var $next = $("#next"),
 	  	  $prev = $("#prev"),
 	  	  $main = $("#main"),
 	  	  $sidebar = $("#sidebar"),
-	  	  $open = $("#open");
+	  	  $open = $("#open"),
+	  	  $icon = $open.find("img"),
+	  	  $window = $(window),
+	  	  sidebarWidth = 40;
+
+
+	  $window.on("resize", function(){
+		  $main.width($window.width()-sidebarWidth);
+	  });
 
 	  $next.on("click", function(){
 	  	Book.nextPage();
@@ -110,11 +139,11 @@ FP.app.init = (function($){
 		   if($sidebar.hasClass("open")){
 			   $sidebar.removeClass("open");
 			   $main.removeClass("closed");
-			   $open.attr("src", "/img/menu-icon.png");
+			   $icon.attr("src", "img/menu-icon.png");
 		   }else{
 			   $sidebar.addClass("open");
 			   $main.addClass("closed");
-			   $open.attr("src", "/img/close.png");
+			   $icon.attr("src", "img/close.png");
 		   }
 	   	});
 

fpjs/render/book.js

@@ -148,14 +148,14 @@ FP.Book.prototype.parseContents = function(){
 }
 
 FP.Book.prototype.parseMetadata = function(metadata){
-	var that = this;
+	var that = this,
+		title = metadata.getElementsByTagNameNS("http://purl.org/dc/elements/1.1/","title")[0]
+		creator = metadata.getElementsByTagNameNS("http://purl.org/dc/elements/1.1/","creator")[0];
 
 	this.metadata = {};
 	
-	this.metadata["bookTitle"] = metadata.getElementsByTagNameNS("http://purl.org/dc/elements/1.1/","title")[0]
-											.childNodes[0].nodeValue;
-	this.metadata["creator"] = metadata.getElementsByTagNameNS("http://purl.org/dc/elements/1.1/","creator")[0]
-											.childNodes[0].nodeValue;
+	this.metadata["bookTitle"] = title ? title.childNodes[0].nodeValue : "";
+	this.metadata["creator"] = creator ? creator.childNodes[0].nodeValue : "";
 											
 	this.tell("book:metadataReady");
 }
@@ -165,7 +165,7 @@ FP.Book.prototype.parseManifest = function(manifest){
 	
 	this.assets = {};
 	//-- Turn items into an array
-	items = Array.prototype.slice.call(manifest.getElementsByTagName("item"));
+	items = Array.prototype.slice.call(manifest.querySelectorAll("item"));
 	//-- Create an object with the id as key
 	items.forEach(function(item){
 		var id = item.getAttribute('id'),
@@ -210,23 +210,46 @@ FP.Book.prototype.parseTOC = function(path){
 		var navMap = contents.getElementsByTagName("navMap")[0];
 
 		
+		
+		
+		function getTOC(nodes, parent){
+			var list = [];
+			
 			//-- Turn items into an array
-		items = Array.prototype.slice.call(contents.getElementsByTagName("navPoint"));
+			items = Array.prototype.slice.call(nodes);
 			
 			items.forEach(function(item){
 				var id = item.getAttribute('id'),
 					href = that.assets[id],
-				navLabel = item.getElementsByTagName("navLabel")[0].childNodes[0].childNodes[0].nodeValue;
+					navLabel = item.getElementsByTagName("navLabel")[0],
+					text = navLabel.textContent ? navLabel.textContent : "",
+					subitems = item.getElementsByTagName("navPoint") || false,
+					subs = false,
+					childof = (item.parentNode == parent);				
 				
-			that.toc.push({
+				
+				if(!childof) return; //-- Only get direct children, should xpath for this eventually?
+				
+				if(subitems){
+					subs = getTOC(subitems, item)
+				}
+				
+				list.push({
 							"id": id, 
 							"href": href, 
-						"label": navLabel, 
-						"spinePos": that.spineIndex[id]
+							"label": text, 
+							"spinePos": that.spineIndex[id],
+							"subitems" : subs
 				});
 				
 			});
 			
+			return list;
+		}
+
+		that.toc = getTOC(navMap.getElementsByTagName("navPoint"), navMap);
+		
+		
 		that.tell("book:tocReady");
 		/*
 		<navPoint class="chapter" id="xtitlepage" playOrder="1">
@@ -284,10 +307,15 @@ FP.Book.prototype.displayChapter = function(pos, end){
 	this.chapterPos = 1;
 	this.leftPos = 0;
 
+	if(this.bodyEl) this.bodyEl.style.visibility = "hidden";
 	this.iframe.src = this.spine[this.spinePos].href;
 	
 	this.iframe.onload = function() {
+		//that.bodyEl = that.iframe.contentDocument.documentElement.getElementsByTagName('body')[0];
+		//that.bodyEl = that.iframe.contentDocument.querySelector('body, html');
+		that.bodyEl = that.iframe.contentDocument.body;
 		
+		console.log(that.bodyEl);
 		//-- TODO: Choose between single and spread
 		that.formatSpread();
 		if(end) that.goToChapterEnd();
@@ -299,30 +327,42 @@ FP.Book.prototype.displayChapter = function(pos, end){
 }
 
 FP.Book.prototype.formatSpread = function(){
+	var divisor = 2,
+		cutoff = 800;
 		
-	this.bodyEl = this.iframe.contentDocument.documentElement.getElementsByTagName('body')[0];
+	if(this.colWidth){
+		this.OldcolWidth = this.colWidth;
+		this.OldspreadWidth = this.spreadWidth;
+	}
 	//this.bodyEl.setAttribute("style", "background: #777");
 	
 	//-- Check the width and decied on columns
 	//-- Todo: a better place for this?
 	this.elWidth = this.iframe.width;
 		
-	this.gap = this.gap || this.elWidth / 8;
+	this.gap = this.gap || Math.ceil(this.elWidth / 8);
 
-	this.colWidth = Math.ceil((this.elWidth - this.gap) / 2);
+	if(this.elWidth < cutoff) {
+		divisor = 1;
+		this.colWidth = Math.floor(this.elWidth / divisor);
+	}else{
+		this.colWidth = Math.floor((this.elWidth - this.gap) / divisor);
 		
 		//-- Must be even for firefox
 		if(this.colWidth % 2 != 0){
 			this.colWidth -= 1;
 		}
+	}
 	
-	this.spreadWidth = (this.colWidth + this.gap) * 2;
+	this.spreadWidth = (this.colWidth + this.gap) * divisor;
 	
 	//-- Clear Margins
 	this.bodyEl.style.visibility = "hidden";
 	this.bodyEl.style.margin = "0";
 	this.bodyEl.style.overflow = "hidden";
 	
+	this.bodyEl.style.width = this.elWidth;
+	
 	//-- Adjust height
 	this.bodyEl.style.height = this.el.clientHeight + "px";
 		
@@ -334,6 +374,11 @@ FP.Book.prototype.formatSpread = function(){
 
 	this.calcPages();
 	
+	//-- Go to current page after resize
+	if(this.OldcolWidth){		
+		this.leftPos = this.chapterPos * this.spreadWidth;
+		this.bodyEl.scrollLeft = this.leftPos;
+	}
 }
 
 FP.Book.prototype.goToChapterEnd = function(){
@@ -341,11 +386,17 @@ FP.Book.prototype.goToChapterEnd = function(){
 }
 
 FP.Book.prototype.calcPages = function(){
-	this.totalWidth = this.bodyEl.scrollWidth;
+	this.totalWidth = this.iframe.contentDocument.documentElement.scrollWidth; //this.bodyEl.scrollWidth;
+	
 	this.displayedPages = Math.ceil(this.totalWidth / this.spreadWidth);
 	this.bodyEl.style.visibility = "visible";
 	
-	console.log("pages: ", this.displayedPages);
+	//-- I work for Chrome
+	//this.iframe.contentDocument.body.scrollLeft = 200;
+	
+	//-- I work for Firefox
+	//this.iframe.contentDocument.documentElement.scrollLeft = 200;
+
 }
 
 
@@ -354,7 +405,8 @@ FP.Book.prototype.nextPage = function(){
 		this.chapterPos++;
 		
 		this.leftPos += this.spreadWidth;
-		this.bodyEl.scrollLeft = this.leftPos;
+		//this.bodyEl.scrollLeft = this.leftPos;
+		this.bodyEl.style.marginLeft = -this.leftPos + "px";
 	}else{
 		this.nextChapter();
 	}
@@ -365,7 +417,8 @@ FP.Book.prototype.prevPage = function(){
 		this.chapterPos--;
 		
 		this.leftPos -= this.spreadWidth;
-		this.bodyEl.scrollLeft = this.leftPos;
+		//this.bodyEl.scrollLeft = this.leftPos;
+		this.bodyEl.style.marginLeft = -this.leftPos + "px";
 	}else{
 		this.prevChapter();
 	}

index.html

@@ -3,7 +3,7 @@
     <head>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-        <title></title>
+        <title><?php wp_title( '|', true, 'right' ); ?></title>
         <meta name="description" content="">
         <meta name="viewport" content="width=device-width">
 
@@ -42,9 +42,9 @@
     <body>
         <div id="sidebar">
           <div id="controls">
+            <a id="open"><img src="img/menu-icon.png"></a>
             <input id="search" placeholder="search">
-            <img id="open" src="/img/menu-icon.png">
-            <img id="settings" src="/img/settings.png">
+            <a id="setting"><img id="settings" src="img/settings.png"></a>
             
           </div>
           <ul id="toc"></ul>