Fixed isElementVisible to check for width and height of 0, added search view, added sidebar view

Gruntfile.js

@@ -9,11 +9,11 @@ module.exports = function(grunt) {
 		},
 		concat : {
 		'build/epub.js': ['<banner>', 'libs/rsvp/rsvp.js', 'src/*.js'],
-		'build/reader.js': ['<banner>', 'reader/*.js'],
+		'build/reader.js': ['<banner>', 'reader/reader.js'],
 		'build/hooks.js': ['<banner>', 'hooks/default/*.js'],
 		'demo/js/libs/fileStorage.min.js': 'libs/fileStorage/fileStorage.min.js',
 		'demo/js/libs/loader_filesystem.min.js': 'libs/fileStorage/workers/loader_filesystem.min.js',
-		'demo/js/libs/jquery-1.9.0.min.js': 'libs/jquery/jquery-1.9.0.min.js',
+		'demo/js/libs/jquery-2.0.3.min.js': 'libs/jquery/jquery-2.0.3.min.js',
 		'demo/js/libs/inflate.js': 'libs/zip/inflate.js',
 		'demo/js/libs/screenfull.min.js': 'libs/screenfull.min.js'
 		},

build/epub.js

@@ -2138,8 +2138,8 @@ EPUBJS.Book.prototype.removeSavedSettings = function() {
 };
 		
 EPUBJS.Book.prototype.applySavedSettings = function() {
-		var bookKey = this.settings.bookPath + ":" + this.settings.version;
+		var bookKey = this.settings.bookPath + ":" + this.settings.version,
-			stored = JSON.parse(localStorage.getItem(bookKey));
+				stored = JSON.parse(localStorage.getItem(bookKey));
 
 		if(EPUBJS.VERSION != stored.EPUBJSVERSION) return false;
 		this.settings = _.defaults(this.settings, stored);
@@ -2500,7 +2500,7 @@ EPUBJS.Book.prototype._enqueue = function(command, args) {
 	
 	this._q.push({
 		'command': command,
-		'arguments': args
+		'args': args
 	});
 
 };
@@ -2518,7 +2518,7 @@ EPUBJS.Book.prototype._rendered = function(err) {
 	this.trigger("book:rendered");
 
 	this._q.forEach(function(item){
-		book[item.command].apply(book, item.arguments);
+		book[item.command].apply(book, item.args);
 	});
 
 };
@@ -2528,7 +2528,7 @@ EPUBJS.Book.prototype.getHooks = function(){
 	var book = this,
 		plugs;
 	
-	plugTypes = _.values(this.hooks);
+	var plugTypes = _.values(this.hooks); //-- unused
 
 	for (var plugType in this.hooks) {
 		plugs = _.values(EPUBJS.Hooks[plugType]);
@@ -2590,17 +2590,16 @@ RSVP.EventTarget.mixin(EPUBJS.Book.prototype);
 
 //-- Handle RSVP Errors
 RSVP.on('error', function(event) {
-	console.error(event, event.detail);
+	//console.error(event, event.detail);
 });
 
-var listener = function(event){
+RSVP.configure('instrument', true); //-- true | will logging out all RSVP rejections
-	console.log(event);
+// RSVP.on('created', listener);
-}
+// RSVP.on('chained', listener);
-RSVP.configure('instrument', false);
+// RSVP.on('fulfilled', listener);
-RSVP.on('created', listener);
+RSVP.on('rejected', function(event){
-RSVP.on('chained', listener);
+	console.error(event.detail, event.detail.message);
-RSVP.on('fulfilled', listener);
+});
-RSVP.on('rejected', listener);
 
 EPUBJS.Chapter = function(spineObject){
 	this.href = spineObject.href;
@@ -2932,7 +2931,7 @@ EPUBJS.EpubCFI.prototype.pathTo = function(node) {
 	var stack = [],
 			children;
 
-	while(node && node.parentNode !== null ) {
+	while(node && node.parentNode !== null && node.parentNode.nodeType != 9) {
 		children = node.parentNode.children;
 
 		stack.unshift({
@@ -2942,11 +2941,7 @@ EPUBJS.EpubCFI.prototype.pathTo = function(node) {
 			'index' : children ? Array.prototype.indexOf.call(children, node) : 0
 		});
 		
-		if(node.parentNode.nodeName != "html") {
+		node = node.parentNode;
-			node = node.parentNode;
-		} else {
-			node = false;
-		}
 	}
 	
 	return stack;
@@ -4113,14 +4108,15 @@ EPUBJS.Renderer.prototype.findFirstVisible = function(startEl){
 };
 
 EPUBJS.Renderer.prototype.isElementVisible = function(el){
-	var left;
+	var rect;
 	
 	if(el && typeof el.getBoundingClientRect === 'function'){
+		rect = el.getBoundingClientRect();
 
-		left = el.getBoundingClientRect().left;
+		if( rect.width != 0 && 
-		
+				rect.height != 0 &&
-		if( left >= 0 &&
+				rect.left >= 0 &&
-			left < this.spreadWidth ) {
+				rect.left < this.spreadWidth ) {
 			return true;
 		}
 	}
@@ -4224,11 +4220,11 @@ EPUBJS.replace.cssUrls = function(_store, base, text){
 
 	matches.forEach(function(str){
 		var full = EPUBJS.core.resolveUrl(base, str.replace(/url\(|[|\)|\'|\"]/g, ''));
-		replaced = _store.getUrl(full).then(function(url){
+		var replaced = _store.getUrl(full).then(function(url){
-			text = text.replace(str, 'url("'+url+'")');
+				text = text.replace(str, 'url("'+url+'")');
-		}, function(e) {
+			}, function(e) {
-			console.error(e);
+				console.error(e);
-		});
+			});
 		
 		promises.push(replaced);
 	});

build/reader.js

@@ -1,388 +1,3 @@
-var EPUBJSR = EPUBJSR || {};
-
-EPUBJSR.app = {};
-
-EPUBJSR.app.init = (function($){
-  "use strict";
-  var Book,
-  	  offline = false,
-  	  sidebarWidth = 0,
-  	  windowWidth;
-
-  function init(bookURL){
-	var search = window.location.search.match(/book=(.*)/),
-		bookURL = bookURL || (search ? search[1] : "moby-dick");
-
-	//-- Setup the browser prefixes 
-	// EPUBJS.core.crossBrowserColumnCss();
-
-	//-- Set up our sidebar
-	windowWidth = $(window).width();
-	if(windowWidth > 550){
-		$("#main").width(windowWidth-sidebarWidth);
-	}else{
-		$("#main").width(windowWidth);
-	}
-	
-	//-- Create a new book object, 
-	//	 this will create an iframe in the el with the ID provided
-	Book = new EPUBJS.Book({ bookPath: bookURL, restore : true });
-	
-	
-	//Book.single = true;
-	
-	//-- Add listeners to handle book events
-	//-- Full list of event are at start of book.js
-	
-	
-	// Book.listen("book:metadataReady", meta);
-	// Book.listen("book:tocReady", toc);
-	// Book.listen("book:bookReady", bookReady);
-	// Book.listen("book:chapterReady", chapterChange);
-	Book.on("book:online", goOnline);
-	Book.on("book:offline", goOffline);
-	
-	Book.getMetadata().then(meta);
-	Book.getToc().then(toc);
-		
-	Book.ready.all.then(bookReady);
-	
-	Book.renderTo("area");
-
-	
-	
-	//Book.registerHook("beforeChapterDisplay", EPUBJS.Hooks.transculsions.insert);
-	
-	//-- Start loading / parsing of the book.
-	//	 This must be done AFTER adding listeners or hooks
-	//Book.renderTo("area");
-	
-	//-- Wait for Dom ready to handle jquery
-	$(function() {
-		controls();
-	});
-
-	return Book;
-
-  }
-
-  function meta(meta){
-	  var title = meta.bookTitle,//Book.getTitle(),
-		  author = meta.creator, //Book.getCreator(),
-		  $title = $("#book-title"),
-		  $author = $("#chapter-title"),
-		  $dash = $("#title-seperator");
-
-	  document.title = title+" – "+author;
-	  $title.html(title);
-	  $author.html(author);
-	  $dash.show();
-
-  }
-
-  function toc(contents){
-	  var $toc = $("#toc"),
-		  $links,
-		  $items;
-
-  	  $toc.empty();
-  	  //-- Recursively generate TOC levels
-  	  $items = generateTocItems(contents, 1);
-	 
-		
-	  $toc.append($items);
-	  
-	  $links = $(".toc_link");
-	  
-	  $links.on("click", function(e){
-	  	var $this = $(this),
-	  		url = $this.data("url");
-	  	
-
-	 	$(".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
-
-		Book.goto(url);
-		e.preventDefault();
-	  	
-
-	  });
-
-   }
-
-  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='xsmall'>Extra Small</span><br>" +
-  				"<input type='radio' name='fontSize' value='small'><span class='small'>Small</span><br>" +
-  				"<input type='radio' name='fontSize' value='medium'><span class='medium'>Medium</span><br>" +
-  				"<input type='radio' name='fontSize' value='large'><span class='large'>Large</span><br>" +
-  				"<input type='radio' name='fontSize' value='x-large'><span class='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"));
-			//reload the page after selecting a new font
-			Book.iframe.contentDocument.location.reload(true);
-
-		});
-	});
-	//Single or double column
-  	/*
-  	var userLayout = "";
-  	if (!localStorage.getItem("layout")) {
-  	 	userLayout = "medium";
-  		localStorage.setItem("layout", userLayout);
-  	} else {
-  		userLayout = localStorage.getItem("layout");
-  	}
-
-  	var $settings = $("#settingsPanel");
-  	$settings.append("<ul></ul>");
-
-  	var $settingsItem = $("<li><h3></h3></li>");
-		
-  	var $layout = $("<input type='radio' name='layout' value='singleColumn'><span class=''>Single Column</span><br>" +
-  				"<input type='radio' name='layout' value='doubleColumn'><span class=''>Double Column</span><br>");
-
-  	$settingsItem.find("h3").text('Font Size').after($layout);
-	$settings.find("ul").append($settingsItem);
-
-	var $layoutButtons = $('input[name="layout"]');
-
-	$layoutButtons.each(function() {
-
-		if ($(this).attr("value") == userLayout) {
-			$(this).attr("checked", "checked");
-		}
-
-		$(this).on("click", function() {
-			localStorage.setItem("layout", $(this).attr("value"));
-			//reload the page after selecting a new font
-			Book.iframe.contentDocument.location.reload(true);
-
-		});
-	});
-
-  	//LineSpacing
-  	var userLineSpacing = "";
-  	//Contrast
-  	var userContrast = "";
-  	//Font Type
-  	var userFontType = "";
-	*/
-  }
-
-
-  
-  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 " + type + "' href='#/"+item.href+"' data-url='"+item.href+"'>"+item.label+"</a>");
-
-			$wrapper.append($item);
-			if(item.subitems && item.subitems.length){
-				level++;
-				$subitems = generateTocItems(item.subitems, level);
-				$wrapper.append($subitems);
-			}
-			
-			$container.append($wrapper);
-	  });
-	  return $container;
-  }
-	
-   function bookReady(){
-	  var $divider = $("#divider"),
-		  $loader = $("#loader");
-	  
-	  $loader.hide();
-	  
-	  if(!Book.single) {
-	  	$divider.addClass("show");
-	  }
-	  
-  }
-  
-  function goOnline(){
-  	  var $icon = $("#store");
-  	  offline = false;
-  	  $icon.attr("src", $icon.data("save"));
-  
-  }
-  
-  function goOffline(){
-  	  var $icon = $("#store");
-  	  offline = true;
-  	  $icon.attr("src", $icon.data("saved"));
-  
-  }
-  
-  function chapterChange(e) {
-	  var id = e.msg,
-	  	  $item = $("#toc-"+id),
-	  	  $current = $(".currentChapter");
-	  	  
-	  if($item.length){
-		  $current.removeClass("currentChapter");
-		  $item.addClass("currentChapter");
-	  }	  
-	  
-  }
-
-  function controls(){
-	  var $next = $("#next"),
-	  	  $prev = $("#prev"),
-	  	  $main = $("#main"),
-	  	  $book = $("#area"),
-	  	  $sidebar = $("#sidebar"),
-	  	  $open = $("#open"),
-	  	  $icon = $open.find("img"),
-	  	  $network = $("#network"),
-	  	  $settingLink = $("#setting"),
-	  	  $settings = $("#settingsPanel"),
-	  	  $toc = $("#toc"),
-	  	  $fullscreen = $("#fullscreen"),
-	  	  $fullscreenicon = $("#fullscreenicon"),
-          $cancelfullscreenicon = $("#cancelfullscreenicon"),
-	  	  $window = $(window);
-
-
-	  $window.on("resize", function(){
-		  windowWidth = $(window).width();
-		  if(windowWidth > 550){
-		  	$main.width(windowWidth-sidebarWidth);
-		  }else{
-		  	$main.width(windowWidth);
-		  }
-	  });
-
-	  $next.on("click", function(){
-	  	Book.nextPage();
-	  });
-
-	  $prev.on("click", function(){
-	  	Book.prevPage();
-	  });
-
-	  $settingLink.on("click", function() {
-	  	if (!$settings.is(":visible")) {
-	  		showSettings();
-	  	} else {
-	  		hideSettings();
-	  	}
-
-	  });
-	 
-	  $fullscreen.on("click", function () {
-        screenfull.toggle($('#container')[0]);
-        $fullscreenicon.toggle();
-        $cancelfullscreenicon.toggle();
-      });
-
-	  var lock = false;
-	   	$(document).keydown(function(e){
-	  	 	if(lock) return;
-
-	   		if (e.keyCode == 37) { 
-	  	 	   $prev.trigger("click");
-
-	  	 	   lock = true;
-	  	 	   setTimeout(function(){
-	  		 	   lock = false;
-	  	 	   }, 100);
-	   		   return false;
-	   		}
-	   		if (e.keyCode == 39) { 
-	   		   $next.trigger("click");
-	   		   lock = true;
-	   		   setTimeout(function(){
-	   		   	lock = false;
-	   		   }, 100);
-
-	   		   return false;
-	   		}
-	   	});
-		
-		function showSidebar(){
-			//$book.css("pointer-events", "none"); //-- Avoid capture by ifrmae
-			$sidebar.addClass("open");
-			$main.addClass("closed");
-			$icon.attr("src", $icon.data("close"));
-		}
-		
-		function hideSidebar(){
-			$book.css("pointer-events", "visible");
-			$sidebar.removeClass("open");
-			$main.removeClass("closed");
-			$icon.attr("src",$icon.data("open"));
-		}
-		
-		function showSettings(){
-			$toc.hide();
-	  		$settings.show();
-		}
-
-		function hideSettings(){
-			$settings.hide();
-			$toc.show();
-		}
-		
-	   	$open.on("click", function(){
-		   if($sidebar.hasClass("open")){
-			   hideSidebar();
-		   }else{
-			   showSidebar();
-			   
-			   // $open.clickOutside(function(){
-			   //   hideSidebar();
-			   // });
-		   }
-	   	});
-	   		
-	   	   	
-	   	$network.on("click", function(){
-		   offline = !offline;
-	   	   Book.fromStorage(offline);
-	   	});
-
-		
-  }
-  	
-  return  init;
-
-})(jQuery);
 EPUBJS.reader = {};
 EPUBJS.reader.plugins = {}; //-- Attach extra view as plugins (like search?)
 
@@ -426,14 +41,15 @@ EPUBJS.Reader = function(path, options) {
 	
 	reader.SettingsView = EPUBJS.reader.SettingsView.call(reader, book);
 	reader.ControlsView = EPUBJS.reader.ControlsView.call(reader, book);
+	reader.SidebarView = EPUBJS.reader.SidebarView.call(reader, book);
 	
 	book.ready.all.then(function() {
 		reader.ReaderView = EPUBJS.reader.ReaderView.call(reader, book);
 		
 		// Call Plugins
 		for(var plugin in EPUBJS.reader.plugins) {
-			if(obj.hasOwnProperty(prop)) {
+			if(EPUBJS.reader.plugins.hasOwnProperty(plugin)) {
-				plugin.call(reader, book);
+				reader[plugin] = EPUBJS.reader.plugins[plugin].call(reader, book);
 			}
 		}
 		
@@ -555,6 +171,51 @@ EPUBJS.reader.ReaderView = function(book) {
 	};
 };
 
+EPUBJS.reader.SidebarView = function(book) {
+	var reader = this;
+
+	var $sidebar = $("#sidebar"),
+			$panels = $("#panels");
+	
+	var activePanel = "TocView";
+	
+	var changePanelTo = function(viewName) {
+		if(activePanel == viewName || typeof reader[viewName] === 'undefined' ) return;
+		reader[activePanel].hide();
+		reader[viewName].show();
+		activePanel = viewName;
+
+		$panels.find('.active').removeClass("active");
+		$panels.find("#show-" + viewName ).addClass("active");
+	};
+	
+	var show = function() {
+		reader.sidebarOpen = true;
+		reader.ReaderView.slideOut();
+		$sidebar.addClass("open");
+	}
+	
+	var hide = function() {
+		reader.sidebarOpen = false;
+		reader.ReaderView.slideIn();
+		$sidebar.removeClass("open");
+	}
+	
+	$panels.find(".show_view").on("click", function(event) {
+		var view = $(this).data("view");
+		
+		changePanelTo(view);
+		event.preventDefault();
+	});
+	
+	return {
+		'show' : show,
+		'hide' : hide,
+		'activePanel' : activePanel,
+		'changePanelTo' : changePanelTo
+	};
+};
+
 EPUBJS.reader.ControlsView = function(book) {
 	var reader = this;
 
@@ -568,7 +229,6 @@ EPUBJS.reader.ControlsView = function(book) {
 			$settings = $("#settings"),
 			$bookmark = $("#bookmark");
 
-	
 	var goOnline = function() {
 		reader.offline = false;
 		// $store.attr("src", $icon.data("save"));
@@ -579,30 +239,18 @@ EPUBJS.reader.ControlsView = function(book) {
 		// $store.attr("src", $icon.data("saved"));
 	};
 
-	var showSidebar = function() {
-		reader.sidebarOpen = true;
-		reader.ReaderView.slideOut();
-		$sidebar.addClass("open");
-		$slider.addClass("icon-right");
-		$slider.removeClass("icon-menu");
-	}
-	
-	var hideSidebar = function() {
-		reader.sidebarOpen = false;
-		reader.ReaderView.slideIn();
-		$sidebar.removeClass("open");
-		$slider.addClass("icon-menu");
-		$slider.removeClass("icon-right");
-	}
-	
 	book.on("book:online", goOnline);
 	book.on("book:offline", goOffline);
 
 	$slider.on("click", function () {
 		if(reader.sidebarOpen) {
-			hideSidebar();
+			reader.SidebarView.hide();
+			$slider.addClass("icon-menu");
+			$slider.removeClass("icon-right");
 		} else {
-			showSidebar();
+			reader.SidebarView.show();
+			$slider.addClass("icon-right");
+			$slider.removeClass("icon-menu");
 		}
 	});
 	
@@ -622,6 +270,13 @@ EPUBJS.reader.ControlsView = function(book) {
 		console.log(reader.book.getCurrentLocationCfi());
 	});
 
+	book.on('renderer:pageChanged', function(cfi){
+		//-- TODO: Check if bookmarked
+		$bookmark
+			.removeClass("icon-bookmark")
+			.addClass("icon-bookmark-empty"); 
+	});
+
 	return {
 		
 	};
@@ -757,124 +412,3 @@ EPUBJS.reader.SettingsView = function() {
 		"hide" : onHide
 	};
 };
-EPUBJSR.search = {};
-
-// Search Server -- https://github.com/futurepress/epubjs-search
-EPUBJSR.search.SERVER = "http://localhost:5000";
-
-EPUBJSR.search.request = function(q, callback) {
-  var fetch = $.ajax({
-    dataType: "json",
-    url: EPUBJSR.search.SERVER + "/search?q=" + encodeURIComponent(q) 
-  });
-
-  fetch.fail(function(err) {
-    console.error(err);
-  });
-
-  fetch.done(function(results) {
-    callback(results);
-  });
-};
-
-EPUBJSR.search.View = function(Book) {
-
-  var $searchBox = $("#searchBox"),
-      $searchResults = $("#searchResults"),
-      $tocView = $("#toc"),
-      $searchView = $("#searchView"),
-      iframeDoc;
-  
-  
-  $searchBox.on("search", function(e) {
-    var q = $searchBox.val();
-
-    e.preventDefault();
-    //-- SearchBox is empty or cleared
-    if(q == '') {
-      $searchResults.empty();
-      $searchView.removeClass("shown");
-      $tocView.removeClass("hidden");
-      $(iframeDoc).find('body').unhighlight();
-      iframeDoc = false;
-      return;
-    }
-
-    if(!$searchView.hasClass("shown")) {
-      $searchView.addClass("shown");
-      $tocView.addClass("hidden");
-    }
-    
-    $searchResults.empty();
-    $searchResults.append("<li><p>Searching...</p></li>");
-    
-    
-    
-    EPUBJSR.search.request(q, function(data) {
-      var results = data.results;
-      
-      $searchResults.empty();
-      
-      if(iframeDoc) { 
-        $(iframeDoc).find('body').unhighlight();
-      }
-      
-      if(results.length == 0) {
-        $searchResults.append("<li><p>No Results Found</p></li>");
-        return;
-      }
-      
-      iframeDoc = $("#area iframe")[0].contentDocument;
-      $(iframeDoc).find('body').highlight(q, { element: 'span' });
-      
-      results.forEach(function(result) {
-        var $li = $("<li></li>");
-        var $item = $("<a href='"+result.href+"' data-cfi='"+result.cfi+"'><span>"+result.title+"</span><p>"+result.highlight+"</p></a>");
-
-        $item.on("click", function(e) {
-          var $this = $(this),
-              cfi = $this.data("cfi");
-          
-          e.preventDefault();
-          
-          Book.gotoCfi(cfi);
-          
-          Book.on("renderer:chapterDisplayed", function() {
-            iframeDoc = $("#area iframe")[0].contentDocument;
-            $(iframeDoc).find('body').highlight(q, { element: 'span' });
-          })
-          
-          
-          
-        });
-        $li.append($item);
-        $searchResults.append($li);
-      });
-
-    });
-
-  });
-
-};
-
-//-- http://stackoverflow.com/questions/2124684/jquery-how-click-anywhere-outside-of-the-div-the-div-fades-out
-
-jQuery.fn.extend({
-  // Calls the handler function if the user has clicked outside the object (and not on any of the exceptions)
-  clickOutside: function(handler, exceptions) {
-	  var $this = this;
-
-	  jQuery(document).on("click.offer", function(event) {
-		  if (exceptions && jQuery.inArray(event.target, exceptions) > -1) {
-			  return;
-		  } else if (jQuery.contains($this[0], event.target)) {
-			  return;
-		  } else {
-			  jQuery(document).off("click.offer");
-			  handler(event, $this);
-		  }
-	  });
-
-	  return this;
-  }
-});

demo/css/main.css

@@ -153,7 +153,7 @@ body {
   -moz-transform: translate(300px, 0);
 }
 
-#controls {
+#panels {
   background: #4e4e4e;
   position: absolute;
   left: 0;
@@ -182,7 +182,7 @@ body {
   float: right;
 }
 
-#controls a {
+#panels a {
   visibility: hidden;
   width: 18px;
   height: 20px;
@@ -192,21 +192,21 @@ body {
   margin-left: 6px;
 }
 
-#controls a::before {
+#panels a::before {
   visibility: visible;
 }
 
-#controls a:hover {
+#panels a:hover {
   color: #AAA;
 }
 
-#controls a:active {
+#panels a:active {
   color: #AAA;
   margin: 1px 0 -1px 6px;
 }
 
-#controls a.active,
+#panels a.active,
-#controls a.active:hover {
+#panels a.active:hover {
   color: #AAA;
 }
 

demo/dev.html

@@ -27,7 +27,7 @@
                 EPUBJS.cssPath = "css/";
                 // fileStorage.filePath = EPUBJS.filePath;
 
-                var reader = ePubReader("moby-dick/", { reload: true });
+                window.Reader = ePubReader("moby-dick/", { reload: true });
               }  
             };
         
@@ -76,51 +76,49 @@
         
     </head>
     <body>
-        <div id="sidebar">
+      <div id="sidebar">
-          <div id="controls">
+        <div id="panels">
-            <input id="searchBox" placeholder="search" type="search">
+          <input id="searchBox" placeholder="search" type="search">
           
-            
+          <a id="show-SearchView" class="show_view icon-search" data-view="SearchView">Search</a>
-            <a id="searcher" class="icon-search">Search</a>
+          <a id="show-TocView" class="show_view icon-list-1 active" data-view="TocView">TOC</a>
-            <a id="network" class="icon-list-1 active">TOC</a>
+          <a id="show-BookmarksView" class="show_view icon-bookmark" data-view="BookmarksView">Bookmarks</a>
-            <a id="bookmarks" class="icon-bookmark">Bookmarks</a>
+          <a id="show-NotesView" class="show_view icon-edit" data-view="NotesView">Notes</a>
-            <a id="notes" class="icon-edit">Notes</a>
-           
-          </div>
-          <div id="tocView">
-          </div>
-          <div id="searchView">
-            <ul id="searchResults"></ul>
-          </div>
-          <div id="settingsPanel">
-          </div>
          
         </div>
-        <div id="main">
+        <div id="tocView">
+        </div>
+        <div id="searchView">
+          <ul id="searchResults"></ul>
+        </div>
+        <div id="settingsPanel">
+        </div>
           
-          <div id="titlebar">
-            <div id="opener">
-              <a id="slider" class="icon-menu">Menu</a>
-            </div>
-            <div id="metainfo">
-              <span id="book-title"></span>
-              <span id="title-seperator">&nbsp;&nbsp;–&nbsp;&nbsp;</span>
-              <span id="chapter-title"></span>
-            </div>
-            <div id="title-controls">
-              <a id="bookmark" class="icon-bookmark-empty">Bookmark</a>
-              <a id="setting" class="icon-cog">Settings</a>
-              <a id="fullscreen" class="icon-resize-full">Fullscreen</a>
-            </div>
-          </div>
-          
-          <div id="divider"></div>
-          <div id="prev" class="arrow">‹</div>
-          <div id="viewer"></div>
-          <div id="next" class="arrow">›</div>
-          
-          <div id="loader"><img src="../demo/img/loader.gif"></div>
       </div>
+      <div id="main">
         
+        <div id="titlebar">
+          <div id="opener">
+            <a id="slider" class="icon-menu">Menu</a>
+          </div>
+          <div id="metainfo">
+            <span id="book-title"></span>
+            <span id="title-seperator">&nbsp;&nbsp;–&nbsp;&nbsp;</span>
+            <span id="chapter-title"></span>
+          </div>
+          <div id="title-controls">
+            <a id="bookmark" class="icon-bookmark-empty">Bookmark</a>
+            <a id="setting" class="icon-cog">Settings</a>
+            <a id="fullscreen" class="icon-resize-full">Fullscreen</a>
+          </div>
+        </div>
+        
+        <div id="divider"></div>
+        <div id="prev" class="arrow">‹</div>
+        <div id="viewer"></div>
+        <div id="next" class="arrow">›</div>
+        
+        <div id="loader"><img src="../demo/img/loader.gif"></div>
+      </div>
     </body>
 </html>

demo/index.html

@@ -12,7 +12,7 @@
         <link rel="stylesheet" href="css/main.css">
         <link rel="stylesheet" href="css/popup.css">
 
-        <script src="js/libs/jquery-1.9.0.min.js"></script>
+        <script src="js/libs/jquery-2.0.3.min.js"></script>
 
         <script src="js/libs/zip.min.js"></script>        
 
@@ -50,50 +50,49 @@
         
     </head>
     <body>
-        <div id="sidebar">
+      <div id="sidebar">
-            <div id="controls">
+        <div id="panels">
-              <input id="searchBox" placeholder="search" type="search">
+          <input id="searchBox" placeholder="search" type="search">
           
+          <a id="show-SearchView" class="show_view icon-search" data-view="SearchView">Search</a>
+          <a id="show-TocView" class="show_view icon-list-1 active" data-view="TocView">TOC</a>
+          <a id="show-BookmarksView" class="show_view icon-bookmark" data-view="BookmarksView">Bookmarks</a>
+          <a id="show-NotesView" class="show_view icon-edit" data-view="NotesView">Notes</a>
          
-              <a id="searcher" class="icon-search">Search</a>
-              <a id="network" class="icon-list-1 active">TOC</a>
-              <a id="bookmarks" class="icon-bookmark">Bookmarks</a>
-              <a id="notes" class="icon-edit">Notes</a>
-             
-            </div>
-            <div id="tocView">
-            </div>
-            <div id="searchView">
-              <ul id="searchResults"></ul>
-            </div>
-            <div id="settingsPanel">
-            </div>
-              
-          </div>
-          <div id="main">
-            
-            <div id="titlebar">
-              <div id="opener">
-                <a id="slider" class="icon-menu">Menu</a>
-              </div>
-              <div id="metainfo">
-                <span id="book-title"></span>
-                <span id="title-seperator">&nbsp;&nbsp;–&nbsp;&nbsp;</span>
-                <span id="chapter-title"></span>
-              </div>
-              <div id="title-controls">
-                <a id="bookmark" class="icon-bookmark-empty">Bookmark</a>
-                <a id="setting" class="icon-cog">Settings</a>
-                <a id="fullscreen" class="icon-resize-full">Fullscreen</a>
-              </div>
-            </div>
-            
-            <div id="divider"></div>
-            <div id="prev" class="arrow">‹</div>
-            <div id="viewer"></div>
-            <div id="next" class="arrow">›</div>
-            
-            <div id="loader"><img src="../demo/img/loader.gif"></div>
         </div>
+        <div id="tocView">
+        </div>
+        <div id="searchView">
+          <ul id="searchResults"></ul>
+        </div>
+        <div id="settingsPanel">
+        </div>
+          
+      </div>
+      <div id="main">
+        
+        <div id="titlebar">
+          <div id="opener">
+            <a id="slider" class="icon-menu">Menu</a>
+          </div>
+          <div id="metainfo">
+            <span id="book-title"></span>
+            <span id="title-seperator">&nbsp;&nbsp;–&nbsp;&nbsp;</span>
+            <span id="chapter-title"></span>
+          </div>
+          <div id="title-controls">
+            <a id="bookmark" class="icon-bookmark-empty">Bookmark</a>
+            <a id="setting" class="icon-cog">Settings</a>
+            <a id="fullscreen" class="icon-resize-full">Fullscreen</a>
+          </div>
+        </div>
+        
+        <div id="divider"></div>
+        <div id="prev" class="arrow">‹</div>
+        <div id="viewer"></div>
+        <div id="next" class="arrow">›</div>
+        
+        <div id="loader"><img src="../demo/img/loader.gif"></div>
+      </div>
     </body>
 </html>

examples/search.html

@@ -14,11 +14,10 @@
         <!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
         <script>window.jQuery || document.write('<script src="epubjs/libs/jquery-1.9.0.min.js"><\/script>')</script>
         -->
-        <script src="../libs/jquery/jquery-1.9.0.js"></script>
+        <script src="../libs/jquery/jquery-2.0.3.js"></script>
 
         <script>
             "use strict";
-            var Book;
 
             document.onreadystatechange = function () {  
               if (document.readyState == "complete") {
@@ -28,23 +27,47 @@
                 EPUBJS.cssPath = "css/";
                 // fileStorage.filePath = EPUBJS.filePath;
 
-                Book = EPUBJSR.app.init("moby-dick/");
+                window.Reader = ePubReader("../demo/moby-dick/", { reload: true });
-                
-                $(function() {
-                  EPUBJSR.search.View(Book);
-                });
-
               }  
             };
 
-                        
           </script>
 
-        <script src="../build/epub.min.js"></script>
+        <!--<script async src="epubjs/libs/jquery.touchy.min.js"></script>-->
+
+        <!-- zip -->
+        <script src="../libs/zip/zip.js"></script>
+        <script src="../libs/zip/zip-fs.js"></script>
+        <script src="../libs/zip/zip-ext.js"></script>
+        <script src="../libs/zip/inflate.js"></script>
+        <script src="../libs/zip/mime-types.js"></script>
+
+
+        <!-- Render -->
+        <script src="../libs/underscore/underscore.js"></script>
+        <script src="../libs/rsvp/rsvp.js"></script>
+        <script src="../libs/fileStorage/fileStorage.min.js"></script>
+
+        <script src="../src/base.js"></script>
+        <script src="../src/core.js"></script>
+        <script src="../src/unarchiver.js"></script>
+        <script src="../src/parser.js"></script>
+        <script src="../src/hooks.js"></script>
+        <script src="../src/book.js"></script>
+        <script src="../src/chapter.js"></script>
+        <script src="../src/renderer.js"></script>
+        <script src="../src/epubcfi.js"></script>
+
+        <!-- Hooks -->
+        <script async src="../hooks/default/transculsions.js"></script>
+        <script async src="../hooks/default/endnotes.js"></script>
+        <script async src="../hooks/default/smartimages.js"></script>
+        <script async src="../hooks/default/pageturns.js"></script>
 
         <!-- Reader -->
-        <script src="../reader/utils.js"></script>
+        <script src="../reader/reader.js"></script>
-        <script src="../reader/app.js"></script>
+        
+        <!-- Plugins -->
         <script src="../reader/search.js"></script>
 
         <!-- Full Screen -->
@@ -52,44 +75,53 @@
 
         <!-- Highlights -->
         <script src="../demo/js/libs/jquery.highlight.js"></script>
-        <script src="../hooks/extensions/highlight.js"></script>
+        <script async src="../hooks/extensions/highlight.js"></script>
 
     </head>
     <body>
-        <div id="sidebar">
+      <div id="sidebar">
-          <div id="controls">
+        <div id="panels">
-            <input id="searchBox" placeholder="search" type="search">
+          <input id="searchBox" placeholder="search" type="search">
-            <a id="network"><img id="store" src="../demo/img/save.png" save="../demo/img/save.png" data-saved="../demo/img/saved.png"></a>
+          
-            <a id="setting"><img id="settings" src="../demo/img/settings.png"></a>
+          <a id="show-SearchView" class="show_view icon-search" data-view="SearchView">Search</a>
-            <a id="fullscreen">
+          <a id="show-TocView" class="show_view icon-list-1 active" data-view="TocView">TOC</a>
-              <img id="fullscreenicon" src="../demo/img/fullscreen.png">
+          <a id="show-BookmarksView" class="show_view icon-bookmark" data-view="BookmarksView">Bookmarks</a>
-              <img id="cancelfullscreenicon" src="../demo/img/cancelfullscreen.png" style="display: none">
+          <a id="show-NotesView" class="show_view icon-edit" data-view="NotesView">Notes</a>
-            </a>
-          </div>
-          <div id="toc">
-          </div>
-          <div id="searchView">
-            <ul id="searchResults"></ul>
-          </div>
-          <div id="settingsPanel">
-          </div>
          
         </div>
-        <div id="main">
+        <div id="tocView">
+        </div>
+        <div id="searchView">
+          <ul id="searchResults"></ul>
+        </div>
+        <div id="settingsPanel">
+        </div>
+          
+      </div>
+      <div id="main">
+        
+        <div id="titlebar">
           <div id="opener">
-            <a id="open"><img src="../demo/img/menu-icon.png" data-close="../demo/img/close.png" data-open="../demo/img/menu-icon.png"></a>
+            <a id="slider" class="icon-menu">Menu</a>
           </div>
-          <div id="titlebar">
+          <div id="metainfo">
             <span id="book-title"></span>
             <span id="title-seperator">&nbsp;&nbsp;–&nbsp;&nbsp;</span>
-            <span id="chapter-title"> </span>
+            <span id="chapter-title"></span>
+          </div>
+          <div id="title-controls">
+            <a id="bookmark" class="icon-bookmark-empty">Bookmark</a>
+            <a id="setting" class="icon-cog">Settings</a>
+            <a id="fullscreen" class="icon-resize-full">Fullscreen</a>
           </div>
-          <div id="divider"></div>
-          <div id="prev" class="arrow">‹</div>
-          <div id="area"></div>
-          <div id="next" class="arrow">›</div>
-          
-          <div id="loader"><img src="../demo/img/loader.gif"></div>
         </div>
+        
+        <div id="divider"></div>
+        <div id="prev" class="arrow">‹</div>
+        <div id="viewer"></div>
+        <div id="next" class="arrow">›</div>
+        
+        <div id="loader"><img src="../demo/img/loader.gif"></div>
+      </div>
     </body>
 </html>

reader/reader.js

@@ -41,14 +41,15 @@ EPUBJS.Reader = function(path, options) {
 	
 	reader.SettingsView = EPUBJS.reader.SettingsView.call(reader, book);
 	reader.ControlsView = EPUBJS.reader.ControlsView.call(reader, book);
+	reader.SidebarView = EPUBJS.reader.SidebarView.call(reader, book);
 	
 	book.ready.all.then(function() {
 		reader.ReaderView = EPUBJS.reader.ReaderView.call(reader, book);
 		
 		// Call Plugins
 		for(var plugin in EPUBJS.reader.plugins) {
-			if(obj.hasOwnProperty(prop)) {
+			if(EPUBJS.reader.plugins.hasOwnProperty(plugin)) {
-				plugin.call(reader, book);
+				reader[plugin] = EPUBJS.reader.plugins[plugin].call(reader, book);
 			}
 		}
 		
@@ -170,6 +171,51 @@ EPUBJS.reader.ReaderView = function(book) {
 	};
 };
 
+EPUBJS.reader.SidebarView = function(book) {
+	var reader = this;
+
+	var $sidebar = $("#sidebar"),
+			$panels = $("#panels");
+	
+	var activePanel = "TocView";
+	
+	var changePanelTo = function(viewName) {
+		if(activePanel == viewName || typeof reader[viewName] === 'undefined' ) return;
+		reader[activePanel].hide();
+		reader[viewName].show();
+		activePanel = viewName;
+
+		$panels.find('.active').removeClass("active");
+		$panels.find("#show-" + viewName ).addClass("active");
+	};
+	
+	var show = function() {
+		reader.sidebarOpen = true;
+		reader.ReaderView.slideOut();
+		$sidebar.addClass("open");
+	}
+	
+	var hide = function() {
+		reader.sidebarOpen = false;
+		reader.ReaderView.slideIn();
+		$sidebar.removeClass("open");
+	}
+	
+	$panels.find(".show_view").on("click", function(event) {
+		var view = $(this).data("view");
+		
+		changePanelTo(view);
+		event.preventDefault();
+	});
+	
+	return {
+		'show' : show,
+		'hide' : hide,
+		'activePanel' : activePanel,
+		'changePanelTo' : changePanelTo
+	};
+};
+
 EPUBJS.reader.ControlsView = function(book) {
 	var reader = this;
 
@@ -183,7 +229,6 @@ EPUBJS.reader.ControlsView = function(book) {
 			$settings = $("#settings"),
 			$bookmark = $("#bookmark");
 
-	
 	var goOnline = function() {
 		reader.offline = false;
 		// $store.attr("src", $icon.data("save"));
@@ -194,30 +239,18 @@ EPUBJS.reader.ControlsView = function(book) {
 		// $store.attr("src", $icon.data("saved"));
 	};
 
-	var showSidebar = function() {
-		reader.sidebarOpen = true;
-		reader.ReaderView.slideOut();
-		$sidebar.addClass("open");
-		$slider.addClass("icon-right");
-		$slider.removeClass("icon-menu");
-	}
-	
-	var hideSidebar = function() {
-		reader.sidebarOpen = false;
-		reader.ReaderView.slideIn();
-		$sidebar.removeClass("open");
-		$slider.addClass("icon-menu");
-		$slider.removeClass("icon-right");
-	}
-	
 	book.on("book:online", goOnline);
 	book.on("book:offline", goOffline);
 
 	$slider.on("click", function () {
 		if(reader.sidebarOpen) {
-			hideSidebar();
+			reader.SidebarView.hide();
+			$slider.addClass("icon-menu");
+			$slider.removeClass("icon-right");
 		} else {
-			showSidebar();
+			reader.SidebarView.show();
+			$slider.addClass("icon-right");
+			$slider.removeClass("icon-menu");
 		}
 	});
 	
@@ -237,6 +270,13 @@ EPUBJS.reader.ControlsView = function(book) {
 		console.log(reader.book.getCurrentLocationCfi());
 	});
 
+	book.on('renderer:pageChanged', function(cfi){
+		//-- TODO: Check if bookmarked
+		$bookmark
+			.removeClass("icon-bookmark")
+			.addClass("icon-bookmark-empty"); 
+	});
+
 	return {
 		
 	};

reader/search.js

@@ -1,99 +1,129 @@
-EPUBJSR.search = {};
+EPUBJS.reader.search = {};
 
 // Search Server -- https://github.com/futurepress/epubjs-search
-EPUBJSR.search.SERVER = "http://localhost:5000";
+EPUBJS.reader.search.SERVER = "http://localhost:5000";
 
-EPUBJSR.search.request = function(q, callback) {
+EPUBJS.reader.search.request = function(q, callback) {
-  var fetch = $.ajax({
+	var fetch = $.ajax({
-    dataType: "json",
+		dataType: "json",
-    url: EPUBJSR.search.SERVER + "/search?q=" + encodeURIComponent(q) 
+		url: EPUBJS.reader.search.SERVER + "/search?q=" + encodeURIComponent(q) 
-  });
+	});
 
-  fetch.fail(function(err) {
+	fetch.fail(function(err) {
-    console.error(err);
+		console.error(err);
-  });
+	});
 
-  fetch.done(function(results) {
+	fetch.done(function(results) {
-    callback(results);
+		callback(results);
-  });
+	});
 };
 
-EPUBJSR.search.View = function(Book) {
+EPUBJS.reader.plugins.SearchView = function(Book) {
+	var reader = this;
 	
-  var $searchBox = $("#searchBox"),
+	var $searchBox = $("#searchBox"),
-      $searchResults = $("#searchResults"),
+			$searchResults = $("#searchResults"),
-      $tocView = $("#toc"),
+			$tocView = $("#tocView"),
-      $searchView = $("#searchView"),
+			$searchView = $("#searchView"),
-      iframeDoc;
+			iframeDoc;
 	
+	var searchShown = false;
 	
-  $searchBox.on("search", function(e) {
+	var onShow = function() {
-    var q = $searchBox.val();
+		query();
+		searchShown = true;
+		$searchView.addClass("shown");
+	};
 	
-    e.preventDefault();
+	var onHide = function() {
-    //-- SearchBox is empty or cleared
+		searchShown = false;
-    if(q == '') {
+		$searchView.removeClass("shown");
-      $searchResults.empty();
+	};
-      $searchView.removeClass("shown");
-      $tocView.removeClass("hidden");
-      $(iframeDoc).find('body').unhighlight();
-      iframeDoc = false;
-      return;
-    }
 	
-    if(!$searchView.hasClass("shown")) {
+	var query = function() {
-      $searchView.addClass("shown");
+		var q = $searchBox.val();
-      $tocView.addClass("hidden");
-    }
 		
-    $searchResults.empty();
+		if(q == '') {
-    $searchResults.append("<li><p>Searching...</p></li>");
+			return;
+		}
+		
+		$searchResults.empty();
+		$searchResults.append("<li><p>Searching...</p></li>");
 		
 		
 		
-    EPUBJSR.search.request(q, function(data) {
+		EPUBJS.reader.search.request(q, function(data) {
-      var results = data.results;
+			var results = data.results;
 			
-      $searchResults.empty();
+			$searchResults.empty();
 			
-      if(iframeDoc) { 
+			if(iframeDoc) { 
-        $(iframeDoc).find('body').unhighlight();
+				$(iframeDoc).find('body').unhighlight();
-      }
+			}
 			
-      if(results.length == 0) {
+			if(results.length == 0) {
-        $searchResults.append("<li><p>No Results Found</p></li>");
+				$searchResults.append("<li><p>No Results Found</p></li>");
-        return;
+				return;
-      }
+			}
 			
-      iframeDoc = $("#area iframe")[0].contentDocument;
+			iframeDoc = $("#viewer iframe")[0].contentDocument;
-      $(iframeDoc).find('body').highlight(q, { element: 'span' });
+			$(iframeDoc).find('body').highlight(q, { element: 'span' });
 			
-      results.forEach(function(result) {
+			results.forEach(function(result) {
-        var $li = $("<li></li>");
+				var $li = $("<li></li>");
-        var $item = $("<a href='"+result.href+"' data-cfi='"+result.cfi+"'><span>"+result.title+"</span><p>"+result.highlight+"</p></a>");
+				var $item = $("<a href='"+result.href+"' data-cfi='"+result.cfi+"'><span>"+result.title+"</span><p>"+result.highlight+"</p></a>");
 	
-        $item.on("click", function(e) {
+				$item.on("click", function(e) {
-          var $this = $(this),
+					var $this = $(this),
-              cfi = $this.data("cfi");
+							cfi = $this.data("cfi");
 					
-          e.preventDefault();
+					e.preventDefault();
 					
-          Book.gotoCfi(cfi);
+					Book.gotoCfi(cfi);
 					
-          Book.on("renderer:chapterDisplayed", function() {
+					Book.on("renderer:chapterDisplayed", function() {
-            iframeDoc = $("#area iframe")[0].contentDocument;
+						iframeDoc = $("#viewer iframe")[0].contentDocument;
-            $(iframeDoc).find('body').highlight(q, { element: 'span' });
+						$(iframeDoc).find('body').highlight(q, { element: 'span' });
-          })
+					})
 					
 					
 					
-        });
+				});
-        $li.append($item);
+				$li.append($item);
-        $searchResults.append($li);
+				$searchResults.append($li);
-      });
+			});
 	
-    });
+		});
 	
-  });
+	};
 	
+	$searchBox.on("search", function(e) {
+		var q = $searchBox.val();
+		
+		//-- SearchBox is empty or cleared
+		if(q == '') {
+			$searchResults.empty();
+			
+			if(reader.SidebarView.activePanel != "SearchView") {
+				reader.SidebarView.changePanelTo("TocView");
+			}
+			
+			$(iframeDoc).find('body').unhighlight();
+			iframeDoc = false;
+			return;
+		}
+		
+		if(reader.SidebarView.activePanel != "SearchView") {
+			reader.SidebarView.changePanelTo("SearchView");
+		}
+		
+		e.preventDefault();
+	});
+	
+	
+	
+	return {
+		"show" : onShow,
+		"hide" : onHide
+	};
 };

src/book.js

@@ -365,8 +365,8 @@ EPUBJS.Book.prototype.removeSavedSettings = function() {
 };
 		
 EPUBJS.Book.prototype.applySavedSettings = function() {
-		var bookKey = this.settings.bookPath + ":" + this.settings.version;
+		var bookKey = this.settings.bookPath + ":" + this.settings.version,
-			stored = JSON.parse(localStorage.getItem(bookKey));
+				stored = JSON.parse(localStorage.getItem(bookKey));
 
 		if(EPUBJS.VERSION != stored.EPUBJSVERSION) return false;
 		this.settings = _.defaults(this.settings, stored);
@@ -727,7 +727,7 @@ EPUBJS.Book.prototype._enqueue = function(command, args) {
 	
 	this._q.push({
 		'command': command,
-		'arguments': args
+		'args': args
 	});
 
 };
@@ -745,7 +745,7 @@ EPUBJS.Book.prototype._rendered = function(err) {
 	this.trigger("book:rendered");
 
 	this._q.forEach(function(item){
-		book[item.command].apply(book, item.arguments);
+		book[item.command].apply(book, item.args);
 	});
 
 };
@@ -755,7 +755,7 @@ EPUBJS.Book.prototype.getHooks = function(){
 	var book = this,
 		plugs;
 	
-	plugTypes = _.values(this.hooks);
+	var plugTypes = _.values(this.hooks); //-- unused
 
 	for (var plugType in this.hooks) {
 		plugs = _.values(EPUBJS.Hooks[plugType]);
@@ -817,14 +817,13 @@ RSVP.EventTarget.mixin(EPUBJS.Book.prototype);
 
 //-- Handle RSVP Errors
 RSVP.on('error', function(event) {
-	console.error(event, event.detail);
+	//console.error(event, event.detail);
 });
 
-var listener = function(event){
+RSVP.configure('instrument', true); //-- true | will logging out all RSVP rejections
-	console.log(event);
+// RSVP.on('created', listener);
-}
+// RSVP.on('chained', listener);
-RSVP.configure('instrument', false);
+// RSVP.on('fulfilled', listener);
-RSVP.on('created', listener);
+RSVP.on('rejected', function(event){
-RSVP.on('chained', listener);
+	console.error(event.detail, event.detail.message);
-RSVP.on('fulfilled', listener);
+});
-RSVP.on('rejected', listener);

src/epubcfi.js

@@ -45,7 +45,7 @@ EPUBJS.EpubCFI.prototype.pathTo = function(node) {
 	var stack = [],
 			children;
 
-	while(node && node.parentNode !== null ) {
+	while(node && node.parentNode !== null && node.parentNode.nodeType != 9) {
 		children = node.parentNode.children;
 
 		stack.unshift({
@@ -55,11 +55,7 @@ EPUBJS.EpubCFI.prototype.pathTo = function(node) {
 			'index' : children ? Array.prototype.indexOf.call(children, node) : 0
 		});
 		
-		if(node.parentNode.nodeName != "html") {
+		node = node.parentNode;
-			node = node.parentNode;
-		} else {
-			node = false;
-		}
 	}
 	
 	return stack;

src/renderer.js

@@ -652,14 +652,15 @@ EPUBJS.Renderer.prototype.findFirstVisible = function(startEl){
 };
 
 EPUBJS.Renderer.prototype.isElementVisible = function(el){
-	var left;
+	var rect;
 	
 	if(el && typeof el.getBoundingClientRect === 'function'){
+		rect = el.getBoundingClientRect();
 
-		left = el.getBoundingClientRect().left;
+		if( rect.width != 0 && 
-		
+				rect.height != 0 &&
-		if( left >= 0 &&
+				rect.left >= 0 &&
-			left < this.spreadWidth ) {
+				rect.left < this.spreadWidth ) {
 			return true;
 		}
 	}

src/replace.js

@@ -80,11 +80,11 @@ EPUBJS.replace.cssUrls = function(_store, base, text){
 
 	matches.forEach(function(str){
 		var full = EPUBJS.core.resolveUrl(base, str.replace(/url\(|[|\)|\'|\"]/g, ''));
-		replaced = _store.getUrl(full).then(function(url){
+		var replaced = _store.getUrl(full).then(function(url){
-			text = text.replace(str, 'url("'+url+'")');
+				text = text.replace(str, 'url("'+url+'")');
-		}, function(e) {
+			}, function(e) {
-			console.error(e);
+				console.error(e);
-		});
+			});
 		
 		promises.push(replaced);
 	});