fix book path url to handle more options, add music hook

annotator.html

@@ -23,13 +23,16 @@
         <script>
             "use strict";
             
+            jQuery.migrateTrace = false;
+            
             document.onreadystatechange = function () {  
               if (document.readyState == "complete") {
+                FP.filePath = "/fpjs/";
                 FPR.app.init();
               }  
             };
             
-            jQuery.migrateTrace = false;
+            
         
           </script>
         

dev.html

@@ -20,6 +20,7 @@
             
             document.onreadystatechange = function () {  
               if (document.readyState == "complete") {
+                FP.filePath = "/fpjs/";
                 FPR.app.init();
               }  
             };
@@ -45,6 +46,7 @@
         
         <!-- Plugins -->
         <script async src="fpjs/hooks/transculsions.js"></script>
+        <script async src="fpjs/hooks/music.js"></script>
         
         <!-- Reader -->
         <script async src="fpjs/reader/utils.js"></script>

fpjs/hooks/music.js

@@ -0,0 +1,68 @@
+FP.Hooks.register("beforeChapterDisplay").music = function(callback, chapter){
+
+		var trans = chapter.doc.querySelectorAll('audio'),
+			items = Array.prototype.slice.call(trans),
+			playing = false;
+
+		items.forEach(function(item){
+			var onSpread = 0;
+
+
+			function getPage() {
+				left = item.getBoundingClientRect().left;
+				onSpread = Math.floor(left / chapter.spreadWidth) + 1; //-- pages start at 1
+				//console.log("left", left, onPage)
+				// width = orginal_width;
+				// height = orginal_height;
+				// 
+				// if(width > chapter.colWidth){
+				// 	ratio = chapter.colWidth / width; 
+				// 
+				// 	width = chapter.colWidth;
+				// 	height = height * ratio;
+				// }
+				// 
+				// iframe.width = width;
+				// iframe.height = height;
+			}
+			
+			function shouldPlay(e) {
+				page = 1;
+				if(e) page = e.msg;
+
+				if(page != onSpread) return;
+				
+				if(playing) playing.pause();
+				
+				item.play();
+				
+				playing = item;
+				
+				console.log("start", item.src)
+				
+			}
+			
+			
+			
+			
+			//-- resize event
+
+
+			chapter.book.listenUntil("book:resized", "book:chapterDestroy", getPage);
+			
+			chapter.book.listenUntil("book:pageChanged", "book:chapterDestroy", shouldPlay);
+
+			item.removeAttribute("controls");			
+	
+			getPage();
+			shouldPlay();
+			
+		});
+
+
+
+
+		if(callback) callback();
+
+
+}

fpjs/reader/app.js

@@ -28,7 +28,8 @@ FPR.app.init = (function($){
 	//-- Create a new book object, 
 	//	 this will create an iframe in the el with the ID provided
 	Book = new FP.Book("area");
-
+	
+	//Book.single = true;
 	//-- Add listeners to handle book events
 	//-- Full list of event are at start of book.js
 	Book.listen("book:metadataReady", meta);
@@ -174,7 +175,10 @@ FPR.app.init = (function($){
 		  $loader = $("#loader");
 	  
 	  $loader.hide();
-	  $divider.addClass("show");
+	  
+	  if(!Book.single) {
+	  	$divider.addClass("show");
+	  }
 	  
   }
   

fpjs/render/book.js

@@ -21,6 +21,7 @@ FP.Book = function(elem, bookPath){
 	this.createEvent("book:stored");
 	this.createEvent("book:online");
 	this.createEvent("book:offline");
+	this.createEvent("book:pageChanged");
 	
 	//-- All hooks to add functions (with a callback) to 
 	this.hooks = {
@@ -82,32 +83,61 @@ FP.Book.prototype.listeners = function(){
 }
 
 //-- Check bookUrl and start parsing book Assets or load them from storage 
+
 FP.Book.prototype.start = function(bookPath){
 	var location = window.location,
 		pathname = location.pathname,
-		folder = (pathname[pathname.length - 1] == "/") ? pathname : "/",
+		absolute = this.bookUrl.search("://") != -1,
-		origin;
+		fromRoot = pathname[0] == "/",
-	
+		cleaned = [],
-	this.bookPath = bookPath;
+		folder = "/",
+		origin,
+		split;
+		
+	//folder = (pathname[pathname.length - 1] == "/") ? pathname : "/",
 
 	
+	
 	//-- Checks if the url is a zip file and unpack
 	if(this.isContained(bookPath)){
+		this.bookPath = bookPath;
 		this.bookUrl = "";
 		this.contained = true;
 		this.tell("book:offline");
 		if(this.online) this.unarchive(bookPath);
 		return;
-	}else{
-		this.bookUrl = (bookPath[bookPath.length - 1] == "/") ? bookPath : bookPath + "/";
-
-		if(this.bookUrl.search("://") == -1){
-			//-- get full path
-			origin = location.origin || location.protocol + "//" + location.host;
-			this.bookUrl =  origin + folder + this.bookUrl;
-		}
 	}
 	
+	this.bookPath = bookPath;
+	
+	//-- Get URL orgin, try for native or combine 
+	origin = location.origin || location.protocol + "//" + location.host;
+	
+	//-- 1. Check if url is absolute
+	if(absolute){
+		this.bookUrl = bookPath;
+	}
+	
+	//-- 2. Check if url starts with /, add base url
+	if(!absolute && fromRoot){
+		this.bookUrl = origin + bookPath; 
+	}
+	
+	//-- 3. Or find full path to url and add that
+	if(!absolute && !fromRoot){
+		
+		pathname.split('/').forEach(function(part){
+			if(part.indexOf(".") == -1){
+				cleaned.push(part);
+			}
+		});
+		
+		folder = cleaned.join("/") + "/";
+		
+		this.bookUrl =  origin + folder + bookPath;
+	}
+	
+	
 	if(!this.isSaved()){
 		
 		if(!this.online) {

fpjs/render/chapter.js

@@ -90,7 +90,7 @@ FP.Chapter.prototype.formatSpread = function(){
 
 	this.gap = this.gap || Math.ceil(this.elWidth / 8);
 
-	if(this.elWidth < cutoff) {
+	if(this.elWidth < cutoff || this.book.single) {
 		this.spread = false; //-- Single Page
 
 		divisor = 1;
@@ -168,6 +168,7 @@ FP.Chapter.prototype.nextPage = function(){
 		this.setLeft(this.leftPos);
 		
 		localStorage.setItem("chapterPos", this.chapterPos);
+		this.book.tell("book:pageChanged", this.chapterPos);
 		
 		return this.chapterPos;
 	}else{
@@ -184,6 +185,7 @@ FP.Chapter.prototype.prevPage = function(){
 		this.setLeft(this.leftPos);
 		
 		localStorage.setItem("chapterPos", this.chapterPos);
+		this.book.tell("book:pageChanged", this.chapterPos);
 		
 		return this.chapterPos;
 	}else{
@@ -197,6 +199,17 @@ FP.Chapter.prototype.chapterEnd = function(){
 
 FP.Chapter.prototype.setLeft = function(leftPos){
 	this.bodyEl.style.marginLeft = -leftPos + "px";
+	
+	/*
+	var left = "transform: " + (-leftPos) + "px";
+	//-- Need to stardize this
+	
+	this.bodyEl.style.webkitTransform = left;   //Chrome and Safari
+	this.bodyEl.style.MozTransform = left;      //Firefox
+	this.bodyEl.style.msTransform = left;       //IE
+	this.bodyEl.style.OTransform = left;        //Opera
+	this.bodyEl.style.transform = left; 
+	*/
 }
 
 //-- Replaces the relative links within the book to use our internal page changer

fpjs/render/events.js

@@ -34,7 +34,6 @@ FP.Events.prototype.tell = function(evt, msg){
 	}
 
 	if(msg) e.msg = msg;
-
 	this.el.dispatchEvent(e);
 
 }

index.html

@@ -18,7 +18,7 @@
             
             document.onreadystatechange = function () {  
               if (document.readyState == "complete") {
-                FP.filePath = "/dist/"
+                FP.filePath = "/dist/";
                 FPR.app.init();
               }  
             };