Merge branch 'master' of github.com:fchasen/fpjs

css/main.css

@@ -208,12 +208,12 @@ input:-moz-placeholder {
 #toc > ul{
   margin-top: 50px;
   margin-bottom: 50px;
-  padding-left: 40px;
+  padding-left: 20px;
   display: block;
 }
 
 #toc li {
-  margin-bottom: 10px;
+  margin-bottom:10px;
   width: 225px;
   font-family: Georgia, "Times New Roman", Times, serif;
   list-style: none;
@@ -231,12 +231,27 @@ input:-moz-placeholder {
   text-decoration: none;
 }
 
+#toc a.chapter {
+  font-size: 1em;
+}
+
+#toc a.section {
+  font-size: .8em;
+}
+
 #toc li.currentChapter > a,
 #toc li a:hover {
   color: #f1f1f1
 }
 
+#toc li.openChapter > a,
+#toc li a:hover {
+  color: #E2E2E2;
+}
+
 #toc li ul {
+  padding-left:10px;
+  margin-top: 8px;
   display: none;
 }
 
@@ -246,6 +261,32 @@ input:-moz-placeholder {
   display: block;
 }
 
+#settingsPanel {
+  display:none;
+}
+
+#settingsPanel h3 {
+  color:#f1f1f1;
+  font-family:Georgia, "Times New Roman", Times, serif;
+  margin-bottom:10px;
+}
+
+#settingsPanel ul {
+  margin-top:60px;
+  list-style-type:none;
+}
+
+#settingsPanel li {
+  font-size:1em;
+  color:#f1f1f1;
+}
+
+#settingsPanel .xsmall {  font-size:x-small; }
+#settingsPanel .small {  font-size:small; }
+#settingsPanel .medium {  font-size:medium; }
+#settingsPanel .large {  font-size:large; }
+#settingsPanel .xlarge {  font-size:x-large; }
+
 @media only screen and (max-width: 1040px) {
   #area{
     width: 50%;
@@ -332,6 +373,7 @@ input:-moz-placeholder {
   
   #toc > ul{
     padding-left: 10px;
+    webkit-padding-start:;
   }
 }
 

fpjs/reader/app.js

@@ -24,7 +24,7 @@ FPR.app.init = (function($){
 		$("#main").width(windowWidth);
 	}
 	
-	
+	loadSettings();
 	//-- Create a new book object, 
 	//	 this will create an iframe in the el with the ID provided
 	Book = new FP.Book("area");
@@ -75,7 +75,7 @@ FPR.app.init = (function($){
   	  $toc.empty();
   	  
   	  //-- Recursively generate TOC levels
-  	  $items = generateTocItems(contents);
+  	  $items = generateTocItems(contents, 1);
 
 	  $toc.append($items);
 	  
@@ -85,8 +85,10 @@ FPR.app.init = (function($){
 	  	var $this = $(this),
 	  		url = $this.data("url");
 	  	
-	  	$(".openChapter").removeClass("openChapter");
-	  	$this.parent().addClass("openChapter");	
+
+	 	$(".openChapter").removeClass("openChapter");
+	  	$this.parents('li').addClass("openChapter");	
+
 	  	
 	  	//-- Provide the Book with the url to show
 	  	//	 The Url must be found in the books manifest
@@ -99,20 +101,62 @@ FPR.app.init = (function($){
 	  });
 
   }
+
+  function loadSettings() {
+
+  	var userFont = "";
+
+  	if (!localStorage.getItem("fontSize")) {
+  	 	userFont = "medium";
+  		localStorage.setItem("fontSize", userFont);
+  	} else {
+  		userFont = localStorage.getItem("fontSize");
+  	}
+
+  	var $settings = $("#settingsPanel");
+  	$settings.append("<ul></ul>");
+
+  	var $settingsItem = $("<li><h3></h3></li>");
+		
+  	var $fontSizes = $("<input type='radio' name='fontSize' value='x-small'><span class='font-size xsmall'>Extra Small</span><br>" +
+  				"<input type='radio' name='fontSize' value='small'><span class='font-size small'>Small</span><br>" +
+  				"<input type='radio' name='fontSize' value='medium'><span class='font-size medium'>Medium</span><br>" +
+  				"<input type='radio' name='fontSize' value='large'><span class='font-size large'>Large</span><br>" +
+  				"<input type='radio' name='fontSize' value='large'><span class='font-size xlarge'>Extra Large</span>");
+
+  	$settingsItem.find("h3").text('Font Size').after($fontSizes);
+	$settings.find("ul").append($settingsItem);
+
+	var $fontSizeButtons = $('input[name="fontSize"]');
+
+	$fontSizeButtons.each(function() {
+
+		if ($(this).attr("value") == userFont) {
+			$(this).attr("checked", "checked");
+		}
+		$(this).on("click", function() {
+			localStorage.setItem("fontSize", $(this).attr("value"));
+		});
+	});
+
+  }
+
+
   
-  function generateTocItems(contents){
+  function generateTocItems(contents, level){
 	  var $container = $("<ul>");
-	  	  
+	  var type = (level == 1) ? "chapter" : "section";
 	  	  
 	  contents.forEach(function(item){
 		  	var $subitems,
 		  		$wrapper = $("<li id='toc-"+item.id+"'>"),
-				$item = $("<a class='toc_link' href='#/"+item.href+"' data-url='"+item.href+"'>"+item.label+"</a>");
+				$item = $("<a class='toc_link " + type + "' href='#/"+item.href+"' data-url='"+item.href+"'>"+item.label+"</a>");
 
 			$wrapper.append($item);
 			
 			if(item.subitems && item.subitems.length){
-				$subitems = generateTocItems(item.subitems);
+				level++;
+				$subitems = generateTocItems(item.subitems, level);
 				$wrapper.append($subitems);
 			}
 			
@@ -165,6 +209,9 @@ FPR.app.init = (function($){
 	  	  $open = $("#open"),
 	  	  $icon = $open.find("img"),
 	  	  $network = $("#network"),
+	  	  $settingLink = $("#setting"),
+	  	  $settings = $("#settingsPanel"),
+	  	  $toc = $("#toc"),
 	  	  $window = $(window);
 
 
@@ -184,6 +231,15 @@ FPR.app.init = (function($){
 	  $prev.on("click", function(){
 	  	Book.prevPage();
 	  });
+
+	  $settingLink.on("click", function() {
+	  	if (!$settings.is(":visible")) {
+	  		showSettings();
+	  	} else {
+	  		hideSettings();
+	  	}
+
+	  });
 	  
 	  //-- TODO: This doesn't seem to work
 	  $window.bind("touchy-swipe", function(event, phase, $target, data){
@@ -237,6 +293,16 @@ FPR.app.init = (function($){
 			$icon.attr("src", "img/menu-icon.png");
 		}
 		
+		function showSettings(){
+			$toc.hide();
+	  		$settings.show();
+		}
+
+		function hideSettings(){
+			$settings.hide();
+			$toc.show();
+		}
+
 	   	$open.on("click", function(){
 		   if($sidebar.hasClass("open")){
 			   hideSidebar();

fpjs/render/chapter.js

@@ -69,6 +69,7 @@ FP.Chapter.prototype.error = function(err){
 }
 
 FP.Chapter.prototype.formatSpread = function(){
+
 	var divisor = 2,
 		cutoff = 800;
 
@@ -100,6 +101,7 @@ FP.Chapter.prototype.formatSpread = function(){
 
 	this.spreadWidth = (this.colWidth + this.gap) * divisor;
 
+	this.bodyEl.style.fontSize = localStorage.getItem("fontSize") || "medium";
 	//-- Clear Margins
 	this.bodyEl.style.visibility = "hidden";
 	this.bodyEl.style.margin = "0";

fpjs/render/core.js

@@ -11,6 +11,7 @@ FP.core.getEls = function(classes) {
   return document.getElementsByClassName(classes);
 }
 
+
 FP.core.loadXML = function(url, callback){
 	var xhr = new XMLHttpRequest();
 	xhr.open('GET', url, true);

index.html

@@ -61,6 +61,8 @@
           </div>
           <div id="toc">
           </div>
+          <div id="settingsPanel">
+          </div>
             
         </div>
         <div id="main">