fixes for react

gulpfile.js

@@ -113,6 +113,8 @@ function bundle(file, watch) {
   // must be loaded to use Unarchive or `require` will throw an error
   b.external('jszip');
 
+  // b.external('xmldom');
+
   // Ignore optional URI libraries
   var urijsPath = URI(require.resolve('urijs'));
   ['./punycode.js', './IPv6.js'].forEach(function(lib) {

src/contents.js

@@ -44,7 +44,7 @@ Contents.prototype.height = function(h) {
 
 };
 
-Contents.prototype.textWidth = function(w) {
+Contents.prototype.textWidth = function() {
   var width;
   var range = this.document.createRange();
 
@@ -57,7 +57,7 @@ Contents.prototype.textWidth = function(w) {
 
 };
 
-Contents.prototype.textHeight = function(h) {
+Contents.prototype.textHeight = function() {
   var height;
   var range = this.document.createRange();
 

src/core.js

@@ -193,7 +193,7 @@ function prefixed(unprefixed) {
     upper = unprefixed[0].toUpperCase() + unprefixed.slice(1),
     length = vendors.length;
 
-  if (typeof(document.body.style[unprefixed]) != 'undefined') {
+  if (typeof(document) === 'undefined' || typeof(document.body.style[unprefixed]) != 'undefined') {
     return unprefixed;
   }
 
@@ -411,6 +411,67 @@ function type(obj){
   return Object.prototype.toString.call(obj).slice(8, -1);
 }
 
+function parse(markup, mime) {
+  var doc;
+  // console.log("parse", markup);
+
+  if (typeof DOMParser === "undefined") {
+    DOMParser = require('xmldom').DOMParser;
+  }
+
+
+  doc = new DOMParser().parseFromString(markup, mime);
+
+  return doc;
+}
+
+function qs(el, sel) {
+  var elements;
+
+  if (typeof el.querySelector != "undefined") {
+    return el.querySelector(sel);
+  } else {
+    elements = el.getElementsByTagName(sel);
+    if (elements.length) {
+      return elements[0];
+    }
+  }
+}
+
+function qsa(el, sel) {
+  if (typeof el.querySelector != "undefined") {
+    return el.querySelectorAll(sel);
+  } else {
+    return el.getElementsByTagName(sel);
+  }
+}
+
+function qsp(el, sel, props) {
+  var q, filtered;
+  if (typeof el.querySelector != "undefined") {
+    sel += '[';
+    for (var prop in props) {
+      sel += prop + "='" + props[prop] + "'";
+    }
+    sel += ']';
+    return el.querySelector(sel);
+  } else {
+    q = el.getElementsByTagName(sel);
+    filtered = Array.prototype.slice.call(q, 0).filter(function(el) {
+      for (var prop in props) {
+        if(el.getAttribute(prop) === props[prop]){
+          return true;
+        }
+      }
+      return false;
+    });
+
+    if (filtered) {
+      return filtered[0];
+    }
+  }
+}
+
 module.exports = {
   // 'uri': uri,
   // 'folder': folder,
@@ -435,5 +496,9 @@ module.exports = {
   'indexOfTextNode': indexOfTextNode,
   'isXml': isXml,
   'createBlobUrl': createBlobUrl,
-  'type': type
+  'type': type,
+  'parse' : parse,
+  'qs' : qs,
+  'qsa' : qsa,
+  'qsp' : qsp
 };

src/epub.js

@@ -1,5 +1,8 @@
 var Book = require('./book');
 var EpubCFI = require('./epubcfi');
+var Rendition = require('./rendition');
+var Contents = require('./contents');
+var RSVP = require('rsvp');
 
 function ePub(_url) {
 	return new Book(_url);
@@ -8,6 +11,9 @@ function ePub(_url) {
 ePub.VERSION = "0.3.0";
 
 ePub.CFI = EpubCFI;
+ePub.Rendition = Rendition;
+ePub.Contents = Contents;
+ePub.RSVP = RSVP;
 
 ePub.ViewManagers = {};
 ePub.Views = {};

src/layout.js

@@ -22,11 +22,12 @@ Reflowable.prototype.calculate = function(_width, _height, _gap, _devisor){
 
   //-- Check the width and create even width columns
   var fullWidth = Math.floor(_width);
-  var width = (fullWidth % 2 === 0) ? fullWidth : fullWidth - 1;
+  var width = _width; //(fullWidth % 2 === 0) ? fullWidth : fullWidth - 1;
 
   var section = Math.floor(width / 8);
   var gap = (_gap >= 0) ? _gap : ((section % 2 === 0) ? section : section - 1);
 
+
   var colWidth;
   var spreadWidth;
   var delta;
@@ -77,6 +78,8 @@ Reflowable.prototype.format = function(contents){
   // $body.style.height = this.height + "px";
   contents.height(this.height);
 
+  contents.css("margin", "0");
+
   //-- Add columns
   // $body.style[this.columnAxis] = "horizontal";
   contents.css(this.columnAxis, "horizontal");

src/managers/continuous.js

@@ -76,7 +76,7 @@ ContinuousViewManager.prototype.append = function(view){
 
 	// view.on("shown", this.afterDisplayed.bind(this));
 	view.onDisplayed = this.afterDisplayed.bind(this);
-	console.log(this);
+
 	this.views.append(view);
 
   //this.q.enqueue(this.check);

src/parser.js

@@ -2,6 +2,7 @@ var URI = require('urijs');
 var core = require('./core');
 var EpubCFI = require('./epubcfi');
 
+
 function Parser(){};
 
 Parser.prototype.container = function(containerXml){
@@ -13,7 +14,7 @@ Parser.prototype.container = function(containerXml){
       return;
     }
 
-    rootfile = containerXml.querySelector("rootfile");
+    rootfile = core.qs(containerXml, "rootfile");
 
     if(!rootfile) {
       console.error("No RootFile Found");
@@ -40,7 +41,7 @@ Parser.prototype.identifier = function(packageXml){
     return;
   }
 
-  metadataNode = packageXml.querySelector("metadata");
+  metadataNode = core.qs(packageXml, "metadata");
 
   if(!metadataNode) {
     console.error("No Metadata Found");
@@ -64,19 +65,19 @@ Parser.prototype.packageContents = function(packageXml){
     return;
   }
 
-  metadataNode = packageXml.querySelector("metadata");
+  metadataNode = core.qs(packageXml, "metadata");
   if(!metadataNode) {
     console.error("No Metadata Found");
     return;
   }
 
-  manifestNode = packageXml.querySelector("manifest");
+  manifestNode = core.qs(packageXml, "manifest");
   if(!manifestNode) {
     console.error("No Manifest Found");
     return;
   }
 
-  spineNode = packageXml.querySelector("spine");
+  spineNode = core.qs(packageXml, "spine");
   if(!spineNode) {
     console.error("No Spine Found");
     return;
@@ -110,13 +111,15 @@ Parser.prototype.packageContents = function(packageXml){
 Parser.prototype.findNavPath = function(manifestNode){
 	// Find item with property 'nav'
 	// Should catch nav irregardless of order
-  var node = manifestNode.querySelector("item[properties$='nav'], item[properties^='nav '], item[properties*=' nav ']");
+  // var node = manifestNode.querySelector("item[properties$='nav'], item[properties^='nav '], item[properties*=' nav ']");
+  var node = core.qsp(manifestNode, "item", {"properties":"nav"});
   return node ? node.getAttribute('href') : false;
 };
 
 //-- Find TOC NCX: media-type="application/x-dtbncx+xml" href="toc.ncx"
 Parser.prototype.findNcxPath = function(manifestNode, spineNode){
-	var node = manifestNode.querySelector("item[media-type='application/x-dtbncx+xml']");
+	// var node = manifestNode.querySelector("item[media-type='application/x-dtbncx+xml']");
+  var node = core.qsp(manifestNode, "item", {"media-type":"application/x-dtbncx+xml"});
 	var tocId;
 
 	// If we can't find the toc by media-type then try to look for id of the item in the spine attributes as
@@ -125,7 +128,8 @@ Parser.prototype.findNcxPath = function(manifestNode, spineNode){
 	if (!node) {
 		tocId = spineNode.getAttribute("toc");
 		if(tocId) {
-			node = manifestNode.querySelector("item[id='" + tocId + "']");
+			// node = manifestNode.querySelector("item[id='" + tocId + "']");
+      node = manifestNode.getElementById(tocId);
 		}
 	}
 
@@ -149,10 +153,10 @@ Parser.prototype.metadata = function(xml){
   metadata.language = p.getElementText(xml, "language");
   metadata.rights = p.getElementText(xml, "rights");
 
-  metadata.modified_date = p.querySelectorText(xml, "meta[property='dcterms:modified']");
+  metadata.modified_date = p.getPropertyText(xml, 'dcterms:modified');
-  metadata.layout = p.querySelectorText(xml, "meta[property='rendition:layout']");
+  metadata.layout = p.getPropertyText(xml, "rendition:layout");
-  metadata.orientation = p.querySelectorText(xml, "meta[property='rendition:orientation']");
+  metadata.orientation = p.getPropertyText(xml, 'rendition:orientation');
-  metadata.spread = p.querySelectorText(xml, "meta[property='rendition:spread']");
+  metadata.spread = p.getPropertyText(xml, 'rendition:spread');
   // metadata.page_prog_dir = packageXml.querySelector("spine").getAttribute("page-progression-direction");
 
   return metadata;
@@ -161,14 +165,15 @@ Parser.prototype.metadata = function(xml){
 //-- Find Cover: <item properties="cover-image" id="ci" href="cover.svg" media-type="image/svg+xml" />
 //-- Fallback for Epub 2.0
 Parser.prototype.findCoverPath = function(packageXml){
-
+  var pkg = core.qs(packageXml, "package");
-	var epubVersion = packageXml.querySelector('package').getAttribute('version');
+	var epubVersion = pkg.getAttribute('version');
 
 	if (epubVersion === '2.0') {
-		var metaCover = packageXml.querySelector('meta[name="cover"]');
+		var metaCover = core.qsp(packageXml, 'meta', {'name':'cover'});
 		if (metaCover) {
 			var coverId = metaCover.getAttribute('content');
-			var cover = packageXml.querySelector("item[id='" + coverId + "']");
+			// var cover = packageXml.querySelector("item[id='" + coverId + "']");
+      var cover = packageXml.getElementById(coverId);
 			return cover ? cover.getAttribute('href') : false;
 		}
 		else {
@@ -176,7 +181,8 @@ Parser.prototype.findCoverPath = function(packageXml){
 		}
 	}
 	else {
-		var node = packageXml.querySelector("item[properties='cover-image']");
+    // var node = packageXml.querySelector("item[properties='cover-image']");
+    var node = core.qsp(packageXml, 'item', {'properties':'cover-image'});
 		return node ? node.getAttribute('href') : false;
 	}
 };
@@ -197,6 +203,16 @@ Parser.prototype.getElementText = function(xml, tag){
 
 };
 
+Parser.prototype.getPropertyText = function(xml, property){
+  var el = core.qsp(xml, "meta", {"property":property});
+
+  if(el && el.childNodes.length){
+    return el.childNodes[0].nodeValue;
+  }
+
+  return '';
+};
+
 Parser.prototype.querySelectorText = function(xml, q){
   var el = xml.querySelector(q);
 
@@ -211,8 +227,9 @@ Parser.prototype.manifest = function(manifestXml){
   var manifest = {};
 
   //-- Turn items into an array
-  var selected = manifestXml.querySelectorAll("item"),
+  // var selected = manifestXml.querySelectorAll("item");
-    items = Array.prototype.slice.call(selected);
+  var selected = core.qsa(manifestXml, "item");
+  var items = Array.prototype.slice.call(selected);
 
   //-- Create an object with the id as key
   items.forEach(function(item){
@@ -267,10 +284,13 @@ Parser.prototype.spine = function(spineXml, manifest){
 };
 
 Parser.prototype.querySelectorByType = function(html, element, type){
-	var query = html.querySelector(element+'[*|type="'+type+'"]');
+  var query;
+  if (typeof html.querySelector != "undefined") {
+    query = html.querySelector(element+'[*|type="'+type+'"]');
+  }
 	// Handle IE not supporting namespaced epub:type in querySelector
-	if(query === null || query.length === 0) {
+	if(!query || query.length === 0) {
-		query = html.querySelectorAll(element);
+		query = core.qsa(html, element);
 		for (var i = 0; i < query.length; i++) {
 			if(query[i].getAttributeNS("http://www.idpf.org/2007/ops", "type") === type) {
 				return query[i];
@@ -283,7 +303,8 @@ Parser.prototype.querySelectorByType = function(html, element, type){
 
 Parser.prototype.nav = function(navHtml, spineIndexByURL, bookSpine){
 	var navElement = this.querySelectorByType(navHtml, "nav", "toc");
-	var navItems = navElement ? navElement.querySelectorAll("ol li") : [];
+  // var navItems = navElement ? navElement.querySelectorAll("ol li") : [];
+	var navItems = navElement ? core.qsa(navElement, "li") : [];
 	var length = navItems.length;
 	var i;
 	var toc = {};
@@ -308,7 +329,8 @@ Parser.prototype.nav = function(navHtml, spineIndexByURL, bookSpine){
 
 Parser.prototype.navItem = function(item, spineIndexByURL, bookSpine){
 	var id = item.getAttribute('id') || false,
-			content = item.querySelector("a, span"),
+			// content = item.querySelector("a, span"),
+      content = core.qs(item, "a"),
 			src = content.getAttribute('href') || '',
 			text = content.textContent || "",
 			// split = src.split("#"),
@@ -346,8 +368,9 @@ Parser.prototype.navItem = function(item, spineIndexByURL, bookSpine){
 	};
 };
 
-Parser.prototype.toc = function(tocXml, spineIndexByURL, bookSpine){
+Parser.prototype.ncx = function(tocXml, spineIndexByURL, bookSpine){
-	var navPoints = tocXml.querySelectorAll("navMap navPoint");
+	// var navPoints = tocXml.querySelectorAll("navMap navPoint");
+  var navPoints = core.qsa("navPoint");
 	var length = navPoints.length;
 	var i;
 	var toc = {};
@@ -357,7 +380,7 @@ Parser.prototype.toc = function(tocXml, spineIndexByURL, bookSpine){
 	if(!navPoints || length === 0) return list;
 
 	for (i = 0; i < length; ++i) {
-		item = this.tocItem(navPoints[i], spineIndexByURL, bookSpine);
+		item = this.ncxItem(navPoints[i], spineIndexByURL, bookSpine);
 		toc[item.id] = item;
 		if(!item.parent) {
 			list.push(item);
@@ -370,11 +393,13 @@ Parser.prototype.toc = function(tocXml, spineIndexByURL, bookSpine){
 	return list;
 };
 
-Parser.prototype.tocItem = function(item, spineIndexByURL, bookSpine){
+Parser.prototype.ncxItem = function(item, spineIndexByURL, bookSpine){
 	var id = item.getAttribute('id') || false,
-			content = item.querySelector("content"),
+			// content = item.querySelector("content"),
+			content = core.qs("content"),
 			src = content.getAttribute('src'),
-			navLabel = item.querySelector("navLabel"),
+      // navLabel = item.querySelector("navLabel"),
+      navLabel = core.qs(item, "navLabel"),
 			text = navLabel.textContent ? navLabel.textContent : "",
 			// split = src.split("#"),
 			// baseUrl = split[0],
@@ -413,7 +438,8 @@ Parser.prototype.tocItem = function(item, spineIndexByURL, bookSpine){
 
 Parser.prototype.pageList = function(navHtml, spineIndexByURL, bookSpine){
 	var navElement = this.querySelectorByType(navHtml, "nav", "page-list");
-	var navItems = navElement ? navElement.querySelectorAll("ol li") : [];
+  // var navItems = navElement ? navElement.querySelectorAll("ol li") : [];
+	var navItems = navElement ? core.qsa(navElement, "li") : [];
 	var length = navItems.length;
 	var i;
 	var toc = {};
@@ -432,7 +458,8 @@ Parser.prototype.pageList = function(navHtml, spineIndexByURL, bookSpine){
 
 Parser.prototype.pageListItem = function(item, spineIndexByURL, bookSpine){
 	var id = item.getAttribute('id') || false,
-		content = item.querySelector("a"),
+		// content = item.querySelector("a"),
+    content = core.qs(item, "a"),
 		href = content.getAttribute('href') || '',
 		text = content.textContent || "",
 		page = parseInt(text),

src/rendition.js

@@ -69,13 +69,18 @@ function Rendition(book, options) {
 
 };
 
+Rendition.prototype.setManager = function(manager) {
+	this.manager = manager;
+};
+
 Rendition.prototype.requireManager = function(manager) {
 	var viewManager;
 
 	// If manager is a string, try to load from register managers,
 	// or require included managers directly
-	if (typeof manager == "string") {
+	if (typeof manager === "string") {
-		viewManager =  ePub.ViewManagers[manager] || require('./managers/'+manager);
+		// Use global or require
+		viewManager =  typeof ePub != "undefined" ? ePub.ViewManagers[manager] : require('./managers/'+manager);
 	} else {
 		// otherwise, assume we were passed a function
 		viewManager = manager
@@ -90,7 +95,7 @@ Rendition.prototype.requireView = function(view) {
 	// If view is a string, try to load from register managers,
 	// or require included managers directly
 	if (typeof view == "string") {
-		View =  ePub.Views[view] || require('./views/'+view);
+		View = typeof ePub != "undefined" ? ePub.Views[view] : require('./views/'+view);
 	} else {
 		// otherwise, assume we were passed a function
 		View = view
@@ -100,16 +105,20 @@ Rendition.prototype.requireView = function(view) {
 };
 
 Rendition.prototype.start = function(stage){
-	var ViewManager = this.requireManager(this.settings.manager);
+	var ViewManager, View;
-	var View = this.requireView(this.settings.view);
 
 	// Add view manager
+	if (!this.manager) {
+		ViewManager = this.requireManager(this.settings.manager);
+		View = this.requireView(this.settings.view);
+
 		this.manager = new ViewManager({
 			view: View,
 			renderer: this.render.bind(this),
 			queue: this.q,
 			settings: this.settings
 		});
+	}
 
 	// Listen for displayed views
 	this.manager.on("added", this.afterDisplayed.bind(this))
@@ -246,8 +255,8 @@ Rendition.prototype.applyLayoutMethod = function() {
 };
 
 Rendition.prototype.calculateLayout = function() {
-	var bounds = this.manager.stage.bounds();
+	// TODO: should this be a function to get the live bounds? It is cached and updated on resize for now.
-
+	var bounds = this.manager.bounds;
 	this.layout.calculate(bounds.width, bounds.height);
 };
 

src/replacements.js

@@ -9,8 +9,10 @@ function base(doc, section){
     return;
   }
 
-  head = doc.querySelector("head");
+  // head = doc.querySelector("head");
-  base = head.querySelector("base");
+  // base = head.querySelector("base");
+  head = core.qs(doc, "head");
+  base = core.qs(head, "base");
 
   if(!base) {
     base = doc.createElement("base");

src/request.js

@@ -52,16 +52,16 @@ function request(url, type, withCredentials, headers) {
 
 
   if(core.isXml(type)) {
-		xhr.responseType = "document";
+		// xhr.responseType = "document";
 		xhr.overrideMimeType('text/xml'); // for OPF parsing
 	}
 
 	if(type == 'xhtml') {
-		xhr.responseType = "document";
+		// xhr.responseType = "document";
 	}
 
 	if(type == 'html' || type == 'htm') {
-		xhr.responseType = "document";
+		// xhr.responseType = "document";
  	}
 
   if(type == "binary") {
@@ -97,14 +97,13 @@ function request(url, type, withCredentials, headers) {
         if(core.isXml(type)){
           // xhr.overrideMimeType('text/xml'); // for OPF parsing
           // If this.responseXML wasn't set, try to parse using a DOMParser from text
-          r = new DOMParser().parseFromString(this.response, "text/xml");
+          r = core.parse(this.response, "text/xml");
         }else
         if(type == 'xhtml'){
-          console.log(this.response);
+          r = core.parse(this.response, "application/xhtml+xml");
-          r = new DOMParser().parseFromString(this.response, "application/xhtml+xml");
         }else
         if(type == 'html' || type == 'htm'){
-          r = new DOMParser().parseFromString(this.response, "text/html");
+          r = core.parse(this.response, "text/html");
         }else
         if(type == 'json'){
           r = JSON.parse(this.response);

src/section.js

@@ -88,7 +88,12 @@ Section.prototype.render = function(_request){
 
   this.load(_request).
     then(function(contents){
-      var serializer = new XMLSerializer();
+      var serializer;
+
+      if (typeof XMLSerializer === "undefined") {
+        XMLSerializer = require('xmldom').XMLSerializer;
+      }
+      serializer = new XMLSerializer();
       this.output = serializer.serializeToString(contents);
       return this.output;
     }.bind(this)).

src/view.js

@@ -280,7 +280,7 @@ View.prototype.reframe = function(width, height) {
     width: this.elementBounds.width,
     height: this.elementBounds.height,
     widthDelta: this.elementBounds.width - this.prevBounds.width,
-    heightDelta: this.elementBounds.height - this.prevBounds.height,
+    heightDelta: this.elementBounds.height - this.prevBounds.height
   });
 
 };