changes for mobile sized screens

css/main.css

@@ -1,5 +1,6 @@
 body {
   background: #4e4e4e;
+  overflow: hidden;
 }
 
 #main {
@@ -173,7 +174,7 @@ input:-moz-placeholder {
 #toc {
   overflow-x: hidden;
   overflow-y: hidden;
-  width: 100%;
+  width: 300px;
   height: 100%;
   visibility: hidden;
   -webkit-transition: visibility 0 ease .5s;
@@ -256,8 +257,20 @@ input:-moz-placeholder {
   #area{
     width: 80%;
   }
+  
+  #prev {
+    left: 0;
+  }
+  
+  #next {  
+    right: 0;
+  }
+  
   .arrow {
-    display: none;
+    height: 100%;
+    top: 45px;
+    width: 10%;
+    text-indent: -10000px;
   }
   
   #main {
@@ -265,6 +278,11 @@ input:-moz-placeholder {
     -moz-transform: translate(0, 0);
   }
   
+  #main.closed {
+    -webkit-transform: translate(260px, 0);
+    -moz-transform: translate(260px, 0);
+  }
+  
   #titlebar {
     font-size: 10px;
     margin: 0 50px 0 50px;
@@ -282,9 +300,20 @@ input:-moz-placeholder {
   }
   
   #sidebar.open #open {
-    -webkit-transform: translate(300px, 0);
+    -webkit-transform: translate(260px, 0);
-    -moz-transform: translate(300px, 0);
+    -moz-transform: translate(260px, 0);
   }
   
+  #toc {
+    width: 260px;
+  }
+  
+  #toc li {
+    font-size: 12px;
+  }
+  
+  #toc > ul{
+    padding-left: 10px;
+  }
 }
 

fpjs/libs/jquery.touchy.min.js

@@ -0,0 +1,20 @@
+(function(e){e.touchyOptions={useDelegation:!1,longpress:{requiredTouches:1,msThresh:800,triggerStartPhase:!1,data:{startDate:null},proxyEvents:["TouchStart","TouchEnd"]},drag:{requiredTouches:1,msHoldThresh:100,data:{startPoint:null,startDate:null,movePoint:null,moveDate:null,held:!1},proxyEvents:["TouchStart","TouchMove","TouchEnd"]},pinch:{pxThresh:0,data:{startPoint:null,startDate:null,movePoint:null,moveDate:null},proxyEvents:["TouchStart","TouchMove","GestureChange","TouchEnd"]},rotate:{requiredTouches:1,
+data:{},proxyEvents:["TouchStart","TouchMove","GestureChange","TouchEnd"]},swipe:{requiredTouches:1,velocityThresh:1,triggerOn:"touchmove",data:{startPoint:null,startDate:null,movePoint:null,moveDate:null},proxyEvents:["TouchStart","TouchMove","TouchEnd"]}};var t={handleTouchStart:function(a){var b=l(a,this.context);if(b){var d=a.originalEvent,c=d.targetTouches;d.preventDefault();switch(this.context){case "drag":d=b.data("touchyDrag");c.length===d.settings.requiredTouches&&(o(d,c,a.timeStamp),a=d.startPoint,
+b.trigger("touchy-drag",["start",b,{movePoint:a,lastMovePoint:a,startPoint:a,velocity:0}]));break;case "swipe":d=b.data("touchySwipe");c.length===d.settings.requiredTouches&&p(d,c,a.timeStamp);break;case "pinch":d=b.data("touchyPinch");if(c=m(a))d.startPoint={x:c.centerX,y:c.centerY},d.startDistance=Math.sqrt(Math.pow(c.x2-c.x1,2)+Math.pow(c.y2-c.y1,2));break;case "longpress":d=b.data("touchyLongpress");c.length===d.settings.requiredTouches&&(d.startPoint={x:c[0].pageX,y:c[0].pageY},d.startDate=a.timeStamp,
+d.settings.triggerStartPhase&&b.trigger("touchy-longpress",["start",b]),d.timer=setTimeout(e.proxy(function(){b.trigger("touchy-longpress",["end",b])},this),d.settings.msThresh));break;case "rotate":d=b.data("touchyRotate"),c.length===d.settings.requiredTouches&&(1===c.length?n(d,c,a.timeStamp):(c=m(a),d.startPoint={x:c.centerX,y:c.centerY},d.startDate=a.timeStamp),a=d.startPoint,b.trigger("touchy-rotate",["start",b,{startPoint:a,movePoint:a,lastMovePoint:a,velocity:0,degrees:0}]))}}},handleTouchMove:function(a){var b=
+this.context,d=l(a,b);if(d){var c=a.originalEvent,f=c.targetTouches;c.preventDefault();switch(b){case "drag":b=d.data("touchyDrag");if(f.length===b.settings.requiredTouches){o(b,f,a.timeStamp);var c=b.movePoint,g=b.lastMovePoint,e=c.x===g.x&&c.y===g.y?0:Math.sqrt(Math.pow(c.x-g.x,2)+Math.pow(c.y-g.y,2)),h=b.moveDate-b.lastMoveDate;b.held&&d.trigger("touchy-drag",["move",d,{movePoint:c,lastMovePoint:g,startPoint:b.startPoint,velocity:0===h?0:e/h}])}break;case "swipe":b=d.data("touchySwipe");f.length===
+b.settings.requiredTouches&&(p(b,f,a.timeStamp),!b.swipeExecuted&&(b.swiped&&"touchmove"===b.settings.triggerOn)&&(b.swipeExecuted=!0,q(b,d)));break;case "pinch":b=d.data("touchyPinch");if(a=m(a))b.currentPoint={x:a.centerX,y:a.centerY},"object"!=typeof window.ongesturechange&&(h=Math.sqrt(Math.pow(a.x2-a.x1,2)+Math.pow(a.y2-a.y1,2)),c=b.previousScale=b.scale||1,g=b.startDistance,h=b.scale=h/g,h*g>b.settings.pxThresh&&d.trigger("touchy-pinch",[d,{scale:h,previousScale:c,currentPoint:b.currentPoint,
+startPoint:b.startPoint,startDistance:g}]));break;case "rotate":if(b=d.data("touchyRotate"),f.length===b.settings.requiredTouches){var i,g=b.lastMovePoint=b.movePoint||b.startPoint,h=b.lastMoveDate=b.moveDate||b.startDate,c=b.movePoint={x:f[0].pageX,y:f[0].pageY},e=b.moveDate=a.timeStamp;if(1===f.length)a=b.targetPageCoords=b.targetPageCoords||s(a.target),a=b.centerCoords=b.centerCoords||{x:a.x+0.5*d.width(),y:a.y+0.5*d.height()};else if(a=m(a),a=b.centerCoords={x:a.centerX,y:a.centerY},"object"==
+typeof window.ongesturechange)break;f=Math.atan2(c.y-a.y,c.x-a.x);i=b.lastDegrees=b.degrees;f=b.degrees=f*(180/Math.PI);i=i?f-i:0;h=e-h;h=b.velocity=0===h?0:i/h;d.trigger("touchy-rotate",["move",d,{startPoint:b.startPoint,startDate:b.startDate,movePoint:c,lastMovePoint:g,centerCoords:a,degrees:f,degreeDelta:i,velocity:h}])}}}},handleGestureChange:function(a){var b=this.context,d=l(a,b);if(d){var d=e(a.target),c=a.originalEvent;c.preventDefault();switch(b){case "pinch":var b=d.data("touchyPinch"),
+a=b.previousScale=b.scale||1,c=b.scale=c.scale,f=b.startPoint,g=b.currentPoint||f,k=b.startDistance;c*k>b.settings.pxThresh&&d.trigger("touchy-pinch",[d,{scale:c,previousScale:a,currentPoint:g,startPoint:f,startDistance:k}]);break;case "rotate":b=d.data("touchyRotate"),f=b.lastDegrees=b.degrees,a=b.degrees=c.rotation,c=f?a-f:0,f=b.moveDate-b.lastMoveDate,f=b.velocity=0===f?0:c/f,d.trigger("touchy-rotate",["move",d,{startPoint:b.startPoint,startDate:b.startDate,movePoint:b.movePoint,lastMovePoint:b.lastMovePoint,
+centerCoords:b.centerCoords,degrees:a,degreeDelta:c,velocity:f}])}}},handleTouchEnd:function(a){var b=this.context,d=l(a,b);if(d)switch(a.originalEvent.preventDefault(),b){case "drag":a=d.data("touchyDrag");if(a.held){var b=a.movePoint||a.startPoint,c=a.lastMovePoint||a.startPoint,f=b.x===c.x&&b.y===c.y?0:Math.sqrt(Math.pow(b.x-c.x,2)+Math.pow(b.y-c.y,2)),g=a.moveDate-a.lastMoveDate;d.trigger("touchy-drag",["end",d,{movePoint:b,lastMovePoint:c,startPoint:a.startPoint,velocity:0===g?0:f/g}])}e.extend(a,
+{startPoint:null,startDate:null,movePoint:null,moveDate:null,lastMovePoint:null,lastMoveDate:null,held:!1});break;case "swipe":a=d.data("touchySwipe");a.swiped&&"touchend"===a.settings.triggerOn&&q(a,d);e.extend(a,{startPoint:null,startDate:null,movePoint:null,moveDate:null,lastMovePoint:null,lastMoveDate:null,swiped:!1,swipeExecuted:!1});break;case "pinch":a=d.data("touchyPinch");e.extend(a,{startPoint:null,startDistance:0,currentPoint:null,pinched:!1,scale:1,previousScale:null});break;case "longpress":a=
+d.data("touchyLongpress");clearTimeout(a.timer);e.extend(a,{startDate:null});break;case "rotate":a=d.data("touchyRotate"),d.trigger("touchy-rotate",["end",d,{startPoint:a.startPoint,startDate:a.startDate,movePoint:a.movePoint,lastMovePoint:a.lastMovePoint,degrees:a.degrees,degreeDelta:a.lastDegrees?a.degrees-a.lastDegrees:0,velocity:a.velocity}]),e.extend(a,{startPoint:null,startDate:null,movePoint:null,moveDate:null,lastMovePoint:null,lastMoveDate:null,targetPageCoords:null,centerCoords:null,degrees:null,
+lastDegrees:null,velocity:null})}}},o=function(a,b,d){n(a,b,d);var c=a.moveDate||a.startDate;a.held||d-c>a.settings.msHoldThresh?e.extend(a,{held:!0,lastMoveDate:c,lastMovePoint:a.movePoint&&a.movePoint.x?a.movePoint:a.startPoint,moveDate:d,movePoint:{x:b[0].pageX,y:b[0].pageY}}):e.extend(a,{held:!1,lastMoveDate:0,lastMovePoint:a.startPoint,moveDate:0,movePoint:a.startPoint})},p=function(a,b,d){n(a,b,d);var c=a.startPoint,f=a.moveDate||a.startDate,b={x:b[0].pageX,y:b[0].pageY},g=b.x-c.x,c=b.y-c.y,
+k=d-f;e.extend(a,{lastMoveDate:f,lastMovePoint:a.movePoint&&a.movePoint.x?a.movePoint:a.startPoint,moveDate:d,movePoint:b,hDistance:g,vDistance:c});if(!a.swiped&&(Math.abs(g)/k>a.settings.velocityThresh||Math.abs(c)/k>a.settings.velocityThresh))a.swiped=!0},q=function(a,b){var d=a.movePoint,c=a.lastMovePoint,f=d.x===c.x&&d.y===c.y?0:Math.sqrt(Math.pow(d.x-c.x,2)+Math.pow(d.y-c.y,2)),g=a.moveDate-a.lastMoveDate,f=0===g?0:f/g,g=a.hDistance,e=a.vDistance;f>a.settings.velocityThresh&&(g=Math.abs(g)>Math.abs(e)?
+0<g?"right":"left":0<e?"down":"up",b.trigger("touchy-swipe",[b,{direction:g,movePoint:d,lastMovePoint:c,startPoint:a.startPoint,velocity:f}]))},n=function(a,b,d){a.startPoint||(a.startPoint={x:b[0].pageX,y:b[0].pageY});a.startDate||(a.startDate=d)},m=function(a){var b=!1,a=a.originalEvent.touches;2===a.length&&(b={x1:a[0].pageX,y1:a[0].pageY,x2:a[1].pageX,y2:a[1].pageY},b.centerX=(b.x1+b.x2)/2,b.centerY=(b.y1+b.y2)/2);return b},l=function(a,b){var d,c=!1,f=0,g=j[b].length;if(e.touchyOptions.useDelegation)for(;f<
+g;f+=1){if(d=e(j[b][f]).has(a.target),0<d.length){c=d;break}}else j[b]&&j[b].index(a.target)!=-1&&(c=e(a.target));return c},s=function(a,b){function d(a,c,e){var h=a.offsetParent;c.x+=a.offsetLeft-(h?h.scrollLeft:0);c.y+=a.offsetTop-(h?h.scrollTop:0);if(h){if(1==h.nodeType){var i=e.getComputedStyle(h,"");"static"!=i.position?(c.x+=parseInt(i.borderLeftWidth),c.y+=parseInt(i.borderTopWidth),"TABLE"==h.localName?(c.x+=parseInt(i.paddingLeft),c.y+=parseInt(i.paddingTop)):"BODY"==h.localName&&(i=e.getComputedStyle(a,
+""),c.x+=parseInt(i.marginLeft),c.y+=parseInt(i.marginTop))):"BODY"==h.localName&&(c.x+=parseInt(i.borderLeftWidth),c.y+=parseInt(i.borderTopWidth));for(a=a.parentNode;h!=a;)c.x-=a.scrollLeft,c.y-=a.scrollTop,a=a.parentNode;d(h,c,e)}}else"BODY"==a.localName&&(i=e.getComputedStyle(a,""),c.x+=parseInt(i.borderLeftWidth),c.y+=parseInt(i.borderTopWidth),e=e.getComputedStyle(a.parentNode,""),c.x-=parseInt(e.paddingLeft),c.y-=parseInt(e.paddingTop)),a.scrollLeft&&(c.x+=a.scrollLeft),a.scrollTop&&(c.y+=
+a.scrollTop),(a=a.ownerDocument.defaultView)&&(!b&&a.frameElement)&&d(a.frameElement,c,a)}var c={x:0,y:0};a&&d(a,c,a.ownerDocument.defaultView);return c},j={},r={};e.each(e.touchyOptions,function(a){if("useDelegation"!==a){var b=a.charAt(0).toUpperCase()+a.slice(1);j[a]=e([]);r[a]=new function(){this.context=a};e.event.special["touchy-"+a]={setup:function(){j[a]=j[a].add(this);e(this).data("touchy"+b,e.extend({},e.touchyOptions[a].data));e(this).data("touchy"+b).settings=e.extend({},e.touchyOptions[a]);
+delete e(this).data("touchy"+b).settings.data;1===j[a].length&&e.each(e.touchyOptions[a].proxyEvents,function(b,c){e(document).bind(c.toLowerCase()+".touchy."+a,e.proxy(t["handle"+c],r[a]))})},teardown:function(){j[a]=j[a].not(this);e(this).removeData("touchy"+b);0===j[a].length&&e.each(e.touchyOptions[a].proxyEvents,function(b,c){e(document).unbind(c.toLowerCase()+".touchy."+a)})},add:function(a){e.extend(e(this).data("touchy"+b).settings,a.data);var c=a.handler;a.handler=function(a){return c.apply(this,
+arguments)}}}}})})(jQuery);

fpjs/reader/app.js

@@ -185,13 +185,27 @@ FPR.app.init = (function($){
 		  }
 	  });
 
-	  $next.on("click", function(){
+	  $next.on("click swipeleft", function(){
 	  	Book.nextPage();
 	  });
 
-	  $prev.on("click", function(){
+	  $prev.on("click swiperight", function(){
 	  	Book.prevPage();
 	  });
+	  
+	  
+	  $window.bind("touchy-swipe", function(event, phase, $target, data){
+		  
+		  if(data.direction = "left"){
+			  Book.nextPage();
+		  }
+		  
+		  if(data.direction = "right"){
+		  	  Book.prevPage();
+		  }
+	   	
+	  });
+	  
 
 	  var lock = false;
 	   	$(document).keydown(function(e){

fpjs/render/book.js

@@ -72,6 +72,9 @@ FP.Book.prototype.listeners = function(){
 
 
 FP.Book.prototype.start = function(bookUrl){
+	var pathname = window.location.pathname,
+		folder = (pathname[pathname.length - 1] == "/") ? pathname : "/";
+	
 	this.bookUrl = bookUrl;
 	
 	if(this.bookUrl.search(window.location.origin) == -1){
@@ -106,10 +109,12 @@ FP.Book.prototype.start = function(bookUrl){
 
 FP.Book.prototype.isSaved = function(force) {
 
-	if (localStorage.getItem("bookUrl") === null || 
+	if (localStorage.getItem("bookUrl") != this.bookUrl ||
-		localStorage.getItem("bookUrl") != this.bookUrl ||
+		localStorage.getItem("fpjs-version") != FP.VERSION ||
 		force == true) {
-
+		
+		localStorage.setItem("fpjs-version", FP.VERSION);
+		
 		localStorage.setItem("bookUrl", this.bookUrl);
 		localStorage.setItem("spinePos", 0);
 		localStorage.setItem("stored", 0);
@@ -131,6 +136,7 @@ FP.Book.prototype.isSaved = function(force) {
 		this.metadata = JSON.parse(localStorage.getItem("metadata"));
 		this.assets = JSON.parse(localStorage.getItem("assets"));
 		this.spine = JSON.parse(localStorage.getItem("spine"));
+		this.spineIndexByURL = JSON.parse(localStorage.getItem("spineIndexByURL"));
 		this.toc = JSON.parse(localStorage.getItem("toc"));
 		
 		if(!this.assets || !this.spine){
@@ -286,6 +292,7 @@ FP.Book.prototype.parseSpine = function(spine){
 	});
 	
 	localStorage.setItem("spine", JSON.stringify(this.spine));
+	localStorage.setItem("spineIndexByURL", JSON.stringify(this.spineIndexByURL));
 	
 	this.tell("book:spineReady");
 }
@@ -406,7 +413,7 @@ FP.Book.prototype.show = function(url){
 		chapter = split[0],
 		section = split[1] || false,
 		absoluteURL = this.basePath + chapter,
-		spinePos = this.spineIndexByURL[absoluteURL];
+		spinePos = this.spineIndexByURL[absoluteURL] || false;
 	
 	if(!chapter){
 		spinePos = this.spinePos;

index.html

@@ -6,7 +6,7 @@
         <title></title>
         <meta name="description" content="">
         <meta name="viewport" content="width=device-width">
-
+        <meta name="apple-mobile-web-app-capable" content="yes">
 
         <link rel="stylesheet" href="css/normalize.css">
         <link rel="stylesheet" href="css/main.css">
@@ -18,6 +18,8 @@
             "use strict";
             
             var FP = FP || {}; 
+            FP.VERSION = 0.1;
+            
             document.onreadystatechange = function () {  
               if (document.readyState == "complete") {
                 FPR.app.init();
@@ -26,6 +28,8 @@
         
           </script>
         
+        <script async src="fpjs/libs/jquery.touchy.min.js"></script>
+
         <script async src="fpjs/reader/utils.js"></script>
         <script async src="fpjs/render/core.js"></script>
         <script async src="fpjs/render/queue.js"></script>