Remote hypothes.is example, ncx fixes

dist/epub.js

@@ -183,6 +183,9 @@ var currentQueue;
 var queueIndex = -1;
 
 function cleanUpNextTick() {
+    if (!draining || !currentQueue) {
+        return;
+    }
     draining = false;
     if (currentQueue.length) {
         queue = currentQueue.concat(queue);
@@ -1873,7 +1876,7 @@ process.umask = function() { return 0; };
  * URI.js - Mutating URLs
  * Second Level Domain (SLD) Support
  *
- * Version: 1.17.1
+ * Version: 1.18.0
  *
  * Author: Rodney Rehm
  * Web: http://medialize.github.io/URI.js/
@@ -2114,7 +2117,7 @@ process.umask = function() { return 0; };
 /*!
  * URI.js - Mutating URLs
  *
- * Version: 1.17.1
+ * Version: 1.18.0
  *
  * Author: Rodney Rehm
  * Web: http://medialize.github.io/URI.js/
@@ -2184,7 +2187,7 @@ process.umask = function() { return 0; };
     return this;
   }
 
-  URI.version = '1.17.1';
+  URI.version = '1.18.0';
 
   var p = URI.prototype;
   var hasOwn = Object.prototype.hasOwnProperty;
@@ -2798,11 +2801,13 @@ process.umask = function() { return 0; };
 
     if (parts.username) {
       t += URI.encode(parts.username);
+    }
 
     if (parts.password) {
       t += ':' + URI.encode(parts.password);
     }
 
+    if (t) {
       t += '@';
     }
 
@@ -2991,6 +2996,39 @@ process.umask = function() { return 0; };
   };
 
 
+  URI.joinPaths = function() {
+    var input = [];
+    var segments = [];
+    var nonEmptySegments = 0;
+
+    for (var i = 0; i < arguments.length; i++) {
+      var url = new URI(arguments[i]);
+      input.push(url);
+      var _segments = url.segment();
+      for (var s = 0; s < _segments.length; s++) {
+        if (typeof _segments[s] === 'string') {
+          segments.push(_segments[s]);
+        }
+
+        if (_segments[s]) {
+          nonEmptySegments++;
+        }
+      }
+    }
+
+    if (!segments.length || !nonEmptySegments) {
+      return new URI('');
+    }
+
+    var uri = new URI('').segment(segments);
+
+    if (input[0].path() === '' || input[0].path().slice(0, 1) === '/') {
+      uri.path('/' + uri.path());
+    }
+
+    return uri.normalize();
+  };
+
   URI.commonPath = function(one, two) {
     var length = Math.min(one.length, two.length);
     var pos;
@@ -3414,12 +3452,8 @@ process.umask = function() { return 0; };
     }
 
     if (v === undefined) {
-      if (!this._parts.username) {
-        return '';
-      }
-
       var t = URI.buildUserinfo(this._parts);
-      return t.substring(0, t.length -1);
+      return t ? t.substring(0, t.length -1) : t;
     } else {
       if (v[v.length-1] !== '@') {
         v += '@';
@@ -6628,6 +6662,7 @@ Contents.prototype.width = function(w) {
 
   if (w) {
     this.documentElement.style.width = w;
+    this.content.style.width = w;
   }
 
   return this.window.getComputedStyle(this.documentElement)['width'];
@@ -6643,6 +6678,7 @@ Contents.prototype.height = function(h) {
 
   if (h) {
     this.documentElement.style.height = h;
+    this.content.style.height = h;
   }
 
   return this.window.getComputedStyle(this.documentElement)['height'];
@@ -6688,7 +6724,7 @@ Contents.prototype.scrollHeight = function() {
 
 Contents.prototype.overflow = function(overflow) {
 
-  if (h) {
+  if (overflow) {
     this.documentElement.style.overflow = overflow;
   }
 
@@ -6851,9 +6887,14 @@ Contents.prototype.locationOf = function(target, ignoreClass) {
 
   if(this.epubcfi.isCfiString(target)) {
     range = new EpubCFI(cfi).toRange(this.document, ignoreClass);
+
     if(range) {
+      if (range.startContainer.nodeType === Node.ELEMENT_NODE) {
+        targetPos = range.startContainer.getBoundingClientRect();
+      } else {
         targetPos = range.getBoundingClientRect();
       }
+    }
 
   } else if(typeof target === "string" &&
     target.indexOf("#") > -1) {
@@ -7488,6 +7529,7 @@ function qs(el, sel) {
 }
 
 function qsa(el, sel) {
+  
   if (typeof el.querySelector != "undefined") {
     return el.querySelectorAll(sel);
   } else {
@@ -7622,7 +7664,7 @@ EpubCFI.prototype.checkType = function(cfi) {
   // Is a range object
   } else if (typeof cfi === 'object' && core.type(cfi) === "Range"){
     return 'range';
-  } else if (typeof cfi === 'object' && cfi instanceof window.Node ){ // || typeof cfi === 'function'
+  } else if (typeof cfi === 'object' && typeof(cfi.nodeType) != "undefined" ){ // || typeof cfi === 'function'
     return 'node';
   } else if (typeof cfi === 'object' && cfi instanceof EpubCFI){
     return 'EpubCFI';
@@ -8597,8 +8639,6 @@ Reflowable.prototype.calculate = function(_width, _height, _gap, _devisor){
 
   delta = (colWidth + gap) * divisor;
 
-
-
   this.columnAxis = core.prefixed('columnAxis');
   this.columnGap = core.prefixed('columnGap');
   this.columnWidth = core.prefixed('columnWidth');
@@ -8998,8 +9038,8 @@ function ContinuousViewManager(options) {
 		offsetDelta: 250
 	});
 
-	core.extend(this.settings, options.settings);
+	core.defaults(this.settings, options.settings || {});
-
+	// core.extend(this.settings, options.settings || {});
 };
 
 // subclass extends superclass
@@ -9066,7 +9106,7 @@ ContinuousViewManager.prototype.append = function(section){
 
 		this.views.append(view);
 
-		return this.update();
+		// return this.update();
 
 	}.bind(this));
 };
@@ -9080,7 +9120,7 @@ ContinuousViewManager.prototype.prepend = function(section){
 
 		this.views.prepend(view);
 
-		return this.update();
+		// return this.update();
 
 	}.bind(this));
 
@@ -9149,10 +9189,11 @@ ContinuousViewManager.prototype.check = function(_offset){
 */
 
 ContinuousViewManager.prototype.update = function(_offset){
-	var container = this.stage.bounds();
+	var container = this.bounds();
-	var views = this.views;
+	var views = this.views.all();
 	var viewsLength = views.length;
 	var visible = [];
+	var offset = _offset || this.settings.offset || 0;
 	var isVisible;
 	var view;
 
@@ -9161,10 +9202,11 @@ ContinuousViewManager.prototype.update = function(_offset){
 
 	for (var i = 0; i < viewsLength; i++) {
     view = views[i];
-    isVisible = this.isVisible(view, 0, 0, container);
+
+    isVisible = this.isVisible(view, offset, offset, container);
 
     if(isVisible === true) {
-			promises.push(view.display());
+			promises.push(view.display(this.request));
       visible.push(view);
     } else {
 			this.q.enqueue(view.destroy.bind(view));
@@ -9199,9 +9241,9 @@ ContinuousViewManager.prototype.check = function(_offsetLeft, _offsetTop){
 		delta = _offsetTop;
 	}
 
-	var bounds = this.stage.bounds(); // TODO: save this until resize
+	var bounds = this._bounds; //this.bounds(); // bounds saved this until resize
 
-	var offset = horizontal ? this.container.scrollLeft : this.container.scrollTop;
+	var offset = horizontal ? this.scrollLeft : this.scrollTop;
 	var visibleLength = horizontal ? bounds.width : bounds.height;
 	var contentLength = horizontal ? this.container.scrollWidth : this.container.scrollHeight;
 
@@ -9223,12 +9265,11 @@ ContinuousViewManager.prototype.check = function(_offsetLeft, _offsetTop){
   }
 
   if(promises.length){
-
     return RSVP.all(promises)
       .then(function(posts) {
         // Check to see if anything new is on screen after rendering
         this.q.enqueue(this.update.bind(this));
-
+				// this.update(offset);
       }.bind(this));
 
   } else {
@@ -9313,24 +9354,22 @@ ContinuousViewManager.prototype.addScrollListeners = function() {
 
   if(this.settings.height) {
   	scroller = this.container;
+		this.scrollTop = this.container.scrollTop;
+		this.scrollLeft = this.container.scrollLeft;
   } else {
   	scroller = window;
+		this.scrollTop = window.scrollY;
+		this.scrollLeft = window.scrollX;
   }
 
-  scroller.addEventListener("scroll", function(e){
+  scroller.addEventListener("scroll", this.onScroll.bind(this));
-    if(!this.ignore) {
-      this.scrolled = true;
-    } else {
-      this.ignore = false;
-    }
-  }.bind(this));
 
   window.addEventListener('unload', function(e){
     this.ignore = true;
     this.destroy();
   }.bind(this));
 
-  this.tick.call(window, this.onScroll.bind(this));
+  // this.tick.call(window, this.onScroll.bind(this));
 
   this.scrolled = false;
 
@@ -9338,7 +9377,7 @@ ContinuousViewManager.prototype.addScrollListeners = function() {
 
 ContinuousViewManager.prototype.onScroll = function(){
 
-  if(this.scrolled) {
+  // if(!this.ignore) {
 
     if(this.settings.height) {
 	  	scrollTop = this.container.scrollTop;
@@ -9348,6 +9387,9 @@ ContinuousViewManager.prototype.onScroll = function(){
 			scrollLeft = window.scrollX;
 	  }
 
+		this.scrollTop = scrollTop;
+		this.scrollLeft = scrollLeft;
+
     if(!this.ignore) {
 
 	    if((this.scrollDeltaVert === 0 &&
@@ -9355,7 +9397,8 @@ ContinuousViewManager.prototype.onScroll = function(){
 	    	 this.scrollDeltaVert > this.settings.offsetDelta ||
 	    	 this.scrollDeltaHorz > this.settings.offsetDelta) {
 
-				this.q.enqueue(this.check.bind(this));
+				// this.q.enqueue(this.check.bind(this));
+				this.check();
 
 				this.scrollDeltaVert = 0;
 	    	this.scrollDeltaHorz = 0;
@@ -9385,9 +9428,9 @@ ContinuousViewManager.prototype.onScroll = function(){
 
 
     this.scrolled = false;
-  }
+  // }
 
-  this.tick.call(window, this.onScroll.bind(this));
+  // this.tick.call(window, this.onScroll.bind(this));
 
 };
 
@@ -9403,19 +9446,20 @@ ContinuousViewManager.prototype.onScroll = function(){
 // };
 
 ContinuousViewManager.prototype.currentLocation = function(){
+
   var visible = this.visible();
   var startPage, endPage;
 
   var container = this.container.getBoundingClientRect();
 
   if(visible.length === 1) {
-    return this.map.page(visible[0]);
+    return this.mapping.page(visible[0]);
   }
 
   if(visible.length > 1) {
 
-    startPage = this.map.page(visible[0]);
+    startPage = this.mapping.page(visible[0]);
-    endPage = this.map.page(visible[visible.length-1]);
+    endPage = this.mapping.page(visible[visible.length-1]);
 
     return {
       start: startPage.start,
@@ -9480,9 +9524,9 @@ var ContinuousViewManager = require('./continuous');
 var Map = require('../map');
 var Layout = require('../layout');
 
-function PaginatedViewManager(book, options) {
+function PaginatedViewManager(options) {
 
-  ContinuousViewManager.apply(arguments);
+  ContinuousViewManager.apply(this, arguments); // call super constructor.
 
   this.settings = core.extend(this.settings || {}, {
     width: 600,
@@ -9495,7 +9539,7 @@ function PaginatedViewManager(book, options) {
     infinite: false
   });
 
-  core.extend(this.settings, options.settings);
+  core.defaults(this.settings, options.settings || {});
 
   this.isForcedSingle = this.settings.forceSingle;
 
@@ -9558,9 +9602,14 @@ PaginatedViewManager.prototype.applyLayoutMethod = function() {
 
   this.updateLayout();
 
-  // Set the look ahead offset for what is visible
+  this.setLayout(this.layout);
 
-  // this.map = new Map(this.layout);
+  this.stage.addStyleRules("iframe", [{"margin-right" : this.layout.gap + "px"}]);
+
+  // Set the look ahead offset for what is visible
+  this.settings.offeset = this.layout.delta;
+
+  this.mapping = new Map(this.layout);
 
   // this.hooks.layout.register(this.layout.format.bind(this));
 
@@ -9574,14 +9623,13 @@ PaginatedViewManager.prototype.updateLayout = function() {
   this.spreads = this.determineSpreads(this.settings.minSpreadWidth);
 
   this.layout.calculate(
-    this.stage.width,
+    this._stageSize.width,
-    this.stage.height,
+    this._stageSize.height,
     this.settings.gap,
     this.spreads
   );
 
   this.settings.offset = this.layout.delta;
-
 };
 
 PaginatedViewManager.prototype.moveTo = function(offset){
@@ -9600,25 +9648,26 @@ PaginatedViewManager.prototype.page = function(pg){
 };
 
 PaginatedViewManager.prototype.next = function(){
+    this.scrollLeft = this.container.scrollLeft;
 
-    // console.log(this.container.scrollWidth, this.container.scrollLeft + this.container.offsetWidth + this.layout.delta)
     if(this.container.scrollLeft +
        this.container.offsetWidth +
        this.layout.delta < this.container.scrollWidth) {
       this.scrollBy(this.layout.delta, 0);
     } else {
+      // this.scrollTo(this.container.scrollWidth, 0);
       this.scrollTo(this.container.scrollWidth - this.layout.delta, 0);
     }
-    this.reportLocation();
+    // this.reportLocation();
-    return this.check();
+    this.check();
 
 };
 
 PaginatedViewManager.prototype.prev = function(){
 
     this.scrollBy(-this.layout.delta, 0);
-    this.reportLocation();
+    // this.reportLocation();
-    return this.check();
+    this.check();
 
 };
 
@@ -9639,7 +9688,7 @@ PaginatedViewManager.prototype.currentLocation = function(){
     startA = container.left - visible[0].position().left;
     endA = startA + this.layout.spread;
 
-    return this.map.page(visible[0], startA, endA);
+    return this.mapping.page(visible[0], startA, endA);
   }
 
   if(visible.length > 1) {
@@ -9652,8 +9701,8 @@ PaginatedViewManager.prototype.currentLocation = function(){
     startB = container.left + this.layout.spread - visible[visible.length-1].position().left;
     endB = startB + this.layout.column;
 
-    pageLeft = this.map.page(visible[0], startA, endA);
+    pageLeft = this.mapping.page(visible[0], startA, endA);
-    pageRight = this.map.page(visible[visible.length-1], startB, endB);
+    pageRight = this.mapping.page(visible[visible.length-1], startB, endB);
 
     return {
       start: pageLeft.start,
@@ -9705,11 +9754,12 @@ var Stage = require('../stage');
 var Views = require('../views');
 var EpubCFI = require('../epubcfi');
 var Layout = require('../layout');
+var Mapping = require('../map');
 
 function SingleViewManager(options) {
 
 	this.View = options.view;
-	this.renderer = options.renderer;
+	this.request = options.request;
 	this.q = options.queue;
 
 	this.settings = core.extend(this.settings || {}, {
@@ -9723,8 +9773,7 @@ function SingleViewManager(options) {
 		ignoreClass: ''
 	});
 
-	core.extend(this.settings, options.settings);
+	core.defaults(this.settings, options.settings || {});
-
 
 	this.viewSettings = {
 		ignoreClass: this.settings.ignoreClass,
@@ -9743,7 +9792,9 @@ SingleViewManager.prototype.render = function(element, size){
 	this.stage = new Stage({
 		width: size.width,
 		height: size.height,
-		hidden: this.settings.hidden
+		overflow: this.settings.overflow,
+		hidden: this.settings.hidden,
+		axis: this.settings.axis
 	});
 
 	this.stage.attachTo(element);
@@ -9755,11 +9806,12 @@ SingleViewManager.prototype.render = function(element, size){
 	this.views = new Views(this.container);
 
 	// Calculate Stage Size
-	this.bounds = this.stage.bounds();
+	this._bounds = this.bounds();
+	this._stageSize = this.stage.size();
 
 	// Set the dimensions for views
-	this.viewSettings.width = this.bounds.width;
+	this.viewSettings.width = this._stageSize.width;
-	this.viewSettings.height = this.bounds.height;
+	this.viewSettings.height = this._stageSize.height;
 
 	// Function to handle a resize event.
 	// Will only attach if width and height are both fixed.
@@ -9782,20 +9834,21 @@ SingleViewManager.prototype.onResized = function(e) {
 
 SingleViewManager.prototype.resize = function(width, height){
 
-	this.bounds = this.stage.bounds(width, height);
+	this._stageSize = this.stage.size(width, height);
+	this._bounds = this.bounds();
 
 	// Update for new views
-	this.viewSettings.width = this.bounds.width;
+	this.viewSettings.width = this._stageSize.width;
-	this.viewSettings.height = this.bounds.height;
+	this.viewSettings.height = this._stageSize.height;
 
 	// Update for existing views
 	this.views.each(function(view) {
-		view.size(this.bounds.width, this.bounds.height);
+		view.size(this._stageSize.width, this._stageSize.height);
 	}.bind(this));
 
 	this.trigger("resized", {
-		width: this.stage.width,
+		width: this._stageSize.width,
-		height: this.stage.height
+		height: this._stageSize.height
 	});
 
 };
@@ -9828,7 +9881,8 @@ SingleViewManager.prototype.display = function(section, target){
 	if(visible && target) {
 		offset = visible.locationOf(target);
 		this.moveTo(offset);
-		return displaying.resolve();
+		displaying.resolve();
+		return displayed;
 	}
 
 	// Hide all current views
@@ -9845,7 +9899,7 @@ SingleViewManager.prototype.display = function(section, target){
 			// Move to correct place within the section, if needed
 			if(target) {
 				offset = view.locationOf(target);
-				return this.moveTo(offset);
+				this.moveTo(offset);
 			}
 
 		}.bind(this))
@@ -9878,7 +9932,7 @@ SingleViewManager.prototype.add = function(view){
 	view.onDisplayed = this.afterDisplayed.bind(this);
 	view.onResize = this.afterResized.bind(this);
 
-	return view.display();
+	return view.display(this.request);
 	// return this.renderer(view, this.views.hidden);
 };
 
@@ -9944,17 +9998,17 @@ SingleViewManager.prototype.currentLocation = function(){
 
   if(this.views.length) {
   	view = this.views.first();
-    // start = container.left - view.position().left;
+    start = container.left - view.position().left;
-    // end = start + this.layout.spread;
+    end = start + this.layout.spread;
-		console.log("visibile currentLocation", view);
+
-    // return this.map.page(view);
+    return this.mapping.page(view);
   }
 
 };
 
 SingleViewManager.prototype.isVisible = function(view, offsetPrev, offsetNext, _container){
 	var position = view.position();
-	var container = _container || this.container.getBoundingClientRect();
+	var container = _container || this.bounds();
 
 	if(this.settings.axis === "horizontal" &&
 		position.right > container.left - offsetPrev &&
@@ -10011,6 +10065,7 @@ SingleViewManager.prototype.scrollBy = function(x, y, silent){
   }
   // console.log("scrollBy", x, y);
   this.scrolled = true;
+	this.onScroll();
 };
 
 SingleViewManager.prototype.scrollTo = function(x, y, silent){
@@ -10026,6 +10081,7 @@ SingleViewManager.prototype.scrollTo = function(x, y, silent){
   }
   // console.log("scrollTo", x, y);
   this.scrolled = true;
+	this.onScroll();
   // if(this.container.scrollLeft != x){
   //   setTimeout(function() {
   //     this.scrollTo(x, y, silent);
@@ -10034,13 +10090,17 @@ SingleViewManager.prototype.scrollTo = function(x, y, silent){
   // };
  };
 
+ SingleViewManager.prototype.onScroll = function(){
+
+};
+
  SingleViewManager.prototype.bounds = function() {
    var bounds;
 
    if(!this.settings.height || !this.container) {
      bounds = core.windowBounds();
    } else {
-     bounds = this.container.getBoundingClientRect();
+     bounds = this.stage.bounds();
    }
 
    return bounds;
@@ -10053,7 +10113,7 @@ SingleViewManager.prototype.scrollTo = function(x, y, silent){
 
 	this.setLayout(this.layout);
 
- 	// this.map = new Map(this.layout);
+ 	this.mapping = new Mapping(this.layout);
  	// this.manager.layout(this.layout.format);
  };
 
@@ -10073,7 +10133,7 @@ SingleViewManager.prototype.scrollTo = function(x, y, silent){
 
  module.exports = SingleViewManager;
 
-},{"../core":12,"../epubcfi":13,"../layout":15,"../stage":29,"../views":32,"rsvp":4}],20:[function(require,module,exports){
+},{"../core":12,"../epubcfi":13,"../layout":15,"../map":20,"../stage":29,"../views":32,"rsvp":4}],20:[function(require,module,exports){
 function Map(layout){
   this.layout = layout;
 };
@@ -10086,7 +10146,7 @@ Map.prototype.section = function(view) {
 };
 
 Map.prototype.page = function(view, start, end) {
-  var root = view.document.body;
+  var root = view.contents.document.body;
   return this.rangePairToCfiPair(view.section, {
     start: this.findStart(root, start, end),
     end: this.findEnd(root, start, end)
@@ -10841,7 +10901,7 @@ Parser.prototype.navItem = function(item, spineIndexByURL, bookSpine){
 
 Parser.prototype.ncx = function(tocXml, spineIndexByURL, bookSpine){
 	// var navPoints = tocXml.querySelectorAll("navMap navPoint");
-  var navPoints = core.qsa("navPoint");
+  var navPoints = core.qsa(tocXml, "navPoint");
 	var length = navPoints.length;
 	var i;
 	var toc = {};
@@ -10867,7 +10927,7 @@ Parser.prototype.ncx = function(tocXml, spineIndexByURL, bookSpine){
 Parser.prototype.ncxItem = function(item, spineIndexByURL, bookSpine){
 	var id = item.getAttribute('id') || false,
 			// content = item.querySelector("content"),
-			content = core.qs("content"),
+			content = core.qs(item, "content"),
 			src = content.getAttribute('src'),
       // navLabel = item.querySelector("navLabel"),
       navLabel = core.qs(item, "navLabel"),
@@ -11170,12 +11230,12 @@ var Map = require('./map');
 function Rendition(book, options) {
 
 	this.settings = core.extend(this.settings || {}, {
-		infinite: true,
+		// infinite: true,
-		hidden: false,
+		// hidden: false,
 		width: null,
 		height: null,
-		layoutOveride : null, // Default: { spread: 'reflowable', layout: 'auto', orientation: 'auto', flow: 'auto', viewport: ''},
+		// layoutOveride : null, // Default: { spread: 'reflowable', layout: 'auto', orientation: 'auto', flow: 'auto', viewport: ''},
-		axis: "vertical",
+		// axis: "vertical",
 		ignoreClass: '',
 		manager: "single",
 		view: "iframe"
@@ -11229,6 +11289,7 @@ function Rendition(book, options) {
 	this.manager = new this.ViewManager({
 		view: this.View,
 		queue: this.q,
+		request: this.book.request,
 		settings: this.settings
 	});
 
@@ -11417,11 +11478,13 @@ Rendition.prototype.moveTo = function(offset){
 };
 
 Rendition.prototype.next = function(){
-	return this.q.enqueue(this.manager.next.bind(this.manager));
+	return this.q.enqueue(this.manager.next.bind(this.manager))
+		.then(this.reportLocation.bind(this));
 };
 
 Rendition.prototype.prev = function(){
-	return this.q.enqueue(this.manager.prev.bind(this.manager));
+	return this.q.enqueue(this.manager.prev.bind(this.manager))
+		.then(this.reportLocation.bind(this));
 };
 
 //-- http://www.idpf.org/epub/fxl/
@@ -11679,11 +11742,38 @@ function base(doc, section){
   base.setAttribute("href", section.url);
 }
 
+function canonical(doc, section){
+  var head;
+  var link;
+  var url = section.url; // window.location.origin +  window.location.pathname + "?loc=" + encodeURIComponent(section.url);
+
+  if(!doc){
+    return;
+  }
+
+  head = core.qs(doc, "head");
+  link = core.qs(head, "link[rel='canonical']");
+
+  if (link) {
+    link.setAttribute("href", url);
+  } else {
+    link = doc.createElement("link");
+    link.setAttribute("rel", "canonical");
+    link.setAttribute("href", url);
+    head.appendChild(link);
+  }
+}
+
 function links(view, renderer) {
 
   var links = view.document.querySelectorAll("a[href]");
   var replaceLinks = function(link){
     var href = link.getAttribute("href");
+
+    if(href.indexOf("mailto:") === 0){
+      return;
+    }
+
     var linkUri = URI(href);
     var absolute = linkUri.absoluteTo(view.section.url);
     var relative = absolute.relativeTo(this.book.baseUrl).toString();
@@ -11738,6 +11828,7 @@ function substitute(content, urls, replacements) {
 }
 module.exports = {
   'base': base,
+  'canonical' : canonical,
   'links': links,
   'substitute': substitute
 };
@@ -12062,6 +12153,7 @@ function Spine(_request){
 
   // Register replacements
   this.hooks.content.register(replacements.base);
+  this.hooks.content.register(replacements.canonical);
 
   this.epubcfi = new EpubCFI();
 
@@ -12184,6 +12276,7 @@ var core = require('./core');
 
 function Stage(_options) {
 	this.settings = _options || {};
+	this.id = "epubjs-container-" + core.uuid();
 
 	this.container = this.create(this.settings);
 
@@ -12201,6 +12294,7 @@ Stage.prototype.create = function(options){
 	var height  = options.height;// !== false ? options.height : "100%";
 	var width   = options.width;// !== false ? options.width : "100%";
 	var overflow  = options.overflow || false;
+ 	var axis = options.axis || "vertical";
 
 	if(options.height && core.isNumber(options.height)) {
 		height = options.height + "px";
@@ -12213,7 +12307,7 @@ Stage.prototype.create = function(options){
 	// Create new container element
 	container = document.createElement("div");
 
-	container.id = "epubjs-container:" + core.uuid();
+	container.id = this.id;
 	container.classList.add("epub-container");
 
 	// Style Element
@@ -12222,7 +12316,7 @@ Stage.prototype.create = function(options){
 	container.style.lineHeight = "0";
 	container.style.verticalAlign = "top";
 
-	if(this.settings.axis === "horizontal") {
+	if(axis === "horizontal") {
 		container.style.whiteSpace = "nowrap";
 	}
 
@@ -12308,7 +12402,7 @@ Stage.prototype.onResize = function(func){
 
 };
 
-Stage.prototype.bounds = function(_width, _height){
+Stage.prototype.size = function(_width, _height){
 	var bounds;
 	var width = _width || this.settings.width;
 	var height = _height || this.settings.height;
@@ -12365,6 +12459,42 @@ Stage.prototype.bounds = function(_width, _height){
 
 };
 
+Stage.prototype.bounds = function(){
+	return this.element.getBoundingClientRect();
+}
+
+Stage.prototype.getSheet = function(){
+	var style = document.createElement("style");
+
+	// WebKit hack --> https://davidwalsh.name/add-rules-stylesheets
+	style.appendChild(document.createTextNode(""));
+
+	document.head.appendChild(style);
+
+	return style.sheet;
+}
+
+Stage.prototype.addStyleRules = function(selector, rulesArray){
+	var scope = "#" + this.id + " ";
+	var rules = "";
+
+	if(!this.sheet){
+		this.sheet = this.getSheet();
+	}
+
+	rulesArray.forEach(function(set) {
+		for (var prop in set) {
+			if(set.hasOwnProperty(prop)) {
+				rules += prop + ":" + set[prop] + ";";
+			}
+		}
+	})
+
+  this.sheet.insertRule(scope + selector + " {" + rules + "}", 0);
+}
+
+
+
 module.exports = Stage;
 
 },{"./core":12}],30:[function(require,module,exports){
@@ -13290,6 +13420,10 @@ function Views(container) {
   this.hidden = false;
 };
 
+Views.prototype.all = function() {
+	return this._views;
+};
+
 Views.prototype.first = function() {
 	return this._views[0];
 };
@@ -13462,7 +13596,7 @@ function IframeView(section, options) {
     globalLayoutProperties: {},
   }, options || {});
 
-  this.id = "epubjs-view:" + core.uuid();
+  this.id = "epubjs-view-" + core.uuid();
   this.section = section;
   this.index = section.index;
 
@@ -13484,7 +13618,6 @@ function IframeView(section, options) {
   this.layout = this.settings.layout;
   // Dom events to listen for
   // this.listenedEvents = ["keydown", "keyup", "keypressed", "mouseup", "mousedown", "click", "touchend", "touchstart"];
-
 };
 
 IframeView.prototype.container = function(axis) {
@@ -13568,8 +13701,12 @@ IframeView.prototype.render = function(request, show) {
 	// Fit to size of the container, apply padding
   this.size();
 
+  if(!this.sectionRender) {
+    this.sectionRender = this.section.render(request);
+  }
+
 	// Render Chain
-	return this.section.render(request)
+	return this.sectionRender
 		.then(function(contents){
 			return this.load(contents);
 		}.bind(this))
@@ -13849,6 +13986,16 @@ IframeView.prototype.onLoad = function(event, promise) {
 
     this.rendering = false;
 
+    var link = this.document.querySelector("link[rel='canonical']");
+    if (link) {
+      link.setAttribute("href", this.section.url);
+    } else {
+      link = this.document.createElement("link");
+      link.setAttribute("rel", "canonical");
+      link.setAttribute("href", this.section.url);
+      this.document.querySelector("head").appendChild(link);
+    }
+
     promise.resolve(this.contents);
 };
 
@@ -14298,16 +14445,6 @@ InlineView.prototype.load = function(contents) {
 
   this.contents = new Contents(this.document, this.frame);
 
-  // <link rel="canonical" href="https://blog.example.com/dresses/green-dresses-are-awesome" />
-  var link = this.document.querySelector("link[rel='canonical']");
-  if (link) {
-    link.setAttribute("href", this.section.url);
-  } else {
-    link = this.document.createElement("link");
-    link.setAttribute("rel", "canonical");
-    link.setAttribute("href", this.section.url);
-    this.document.querySelector("head").appendChild(link);
-  }
   this.rendering = false;
 
   loading.resolve(this.contents);

examples/hypothesis.html

@@ -3,11 +3,20 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>EPUB.js Basic Example</title>
+  <title>EPUB.js + Hypothes.is Example</title>
 
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
   <script src="../dist/epub.js"></script>
 
-  <script src="//hypothes.is/embed.js"></script>
+  <script>
+  window.hypothesisConfig = function () {
+    return {
+      constructor: this.Annotator.Sidebar,
+      app: 'http://45.55.144.135:5000/app.html',
+    };
+  };
+  </script>
+  <script src="http://45.55.144.135:5000/embed.js"></script>
 
   <style type="text/css">
     body {
@@ -15,17 +24,22 @@
       background: #fafafa;
       font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
       color: #333;
-
     }
 
     #navigation {
-      width: 200px;
+      width: 300px;
-      margin-top: 60px;
+      position: absolute;
-      float: left;
+      overflow: auto;
-      padding: 0 0 0 100px;
+      top: 60px;
+      left: 1000px
+    }
+
+    #navigation.fixed {
+      position: fixed;
     }
 
     #navigation h1 {
+      width: 200px;
       font-size: 16px;
       font-weight: normal;
       color: #777;
@@ -40,7 +54,7 @@
     }
 
     #navigation ul {
-      padding-left: 0;
+      padding-left: 18px;
       margin-left: 0;
     }
 
@@ -80,12 +94,20 @@
         background: white;
         box-shadow: 0 0 4px #ccc;
         margin: 10px;
-        padding: 20px;
+        padding: 40px 80px;
     }
 
     #main {
-      margin-left: 300px;
+      position: absolute;
+      top: 50px;
+      left: 100px;
       width: 800px;
+      z-index: 2;
+      transition: left .15s cubic-bezier(.55, 0, .2, .8) .08s;
+    }
+
+    #main.open {
+      left: 0;
     }
 
     #pagination {
@@ -139,36 +161,12 @@
       height: 100%;
     }
 
-    /*#annotation-controls {
-      position: absolute;
-      top: -7px;
-      left: 0px;
-    }
-
-    #annotation-controls ul {
-      list-style-type: none;
-    }
-
-    #annotation-controls ul li button {
-      font-size: 1.5em;
-      margin-bottom: 10px;
-      background: #fff;
-      border: none;
-      opacity: .5;
-    }
-
-    #annotation-controls ul li button:hover {
-      opacity: .8;
-    }
-
-    #annotation-controls ul li button:focus {
-      border: none !important;
-    }*/
   </style>
 </head>
 <body>
   <div id="navigation">
     <h1 id="title">...</h1>
+    <image id="cover" width="150px"/>
     <h2 id="author">...</h2>
     <ul id="toc"></ul>
   </div>
@@ -179,34 +177,36 @@
       <a id="next" href="#next" class="arrow">...</a>
     </div>
   </div>
-  <!-- <div id="annotation-controls"></div> -->
+
-  <!-- <div id="hypothesis">
-    <iframe src="//hypothes.is/app.html" seamless></iframe>
-  </div> -->
   <script>
     var currentSectionIndex = 8;
     // Load the opf
-    var book = ePub("../books/alice/");
+    var book = ePub("../books/11-3-117-1-10-20141029.epub");
     var rendition = book.renderTo("viewer");
 
-    var hash = window.location.hash.slice(2);
+    // var hash = window.location.hash.slice(2);
+    var loc = window.location.href.indexOf("?loc=");
+    if (loc > -1) {
+      var href =  window.location.href.slice(loc + 5);
+      var hash = decodeURIComponent(href);
+    }
     rendition.display(hash || 1);
 
 
     var next = document.getElementById("next");
     next.addEventListener("click", function(e){
+      window.scrollTo(0,0);
       rendition.next();
       e.preventDefault();
     }, false);
 
     var prev = document.getElementById("prev");
     prev.addEventListener("click", function(e){
+      window.scrollTo(0,0);
       rendition.prev();
       e.preventDefault();
     }, false);
 
-
-
     rendition.on("rendered", function(section){
       var nextSection = section.next();
       var prevSection = section.prev();
@@ -239,8 +239,17 @@
         prev.textContent = "";
       }
 
+      var old = document.querySelectorAll('.active');
+      Array.prototype.slice.call(old, 0).forEach(function (link) {
+        link.classList.remove("active");
+      })
+
+      var active = document.querySelector('a[href="'+section.href+'"]');
+      if (active) {
+        active.classList.add("active");
+      }
       // Add CFI fragment to the history
-      // history.pushState({}, '', section.href);
+      history.pushState({}, '', "?loc=" + encodeURIComponent(section.href));
       // window.location.hash = "#/"+section.href
     });
 
@@ -248,9 +257,10 @@
       var $nav = document.getElementById("toc"),
           docfrag = document.createDocumentFragment();
 
-      toc.forEach(function(chapter) {
+      toc.forEach(function(chapter, index) {
         var item = document.createElement("li");
         var link = document.createElement("a");
+        link.id = "chap-" + chapter.id;
         link.textContent = chapter.label;
         link.href = chapter.href;
         item.appendChild(link);
@@ -273,73 +283,94 @@
     book.loaded.metadata.then(function(meta){
       var $title = document.getElementById("title");
       var $author = document.getElementById("author");
+      var $cover = document.getElementById("cover");
+      var $nav = document.getElementById('navigation');
+
       $title.textContent = meta.title;
       $author.textContent = meta.creator;
+      if (book.archive) {
+        book.archive.createUrl(book.cover)
+          .then(function (url) {
+            $cover.src = url;
+          })
+      } else {
+        $cover.src = book.cover;
+      }
+
+      if ($nav.offsetHeight + 60 < window.innerHeight) {
+        $nav.classList.add("fixed");
+      }
+
     });
 
+    function checkForAnnotator(cb, w) {
+     if (!w) {
+       w = window;
+     }
+     setTimeout(function () {
+        if (w && w.annotator) {
+          cb();
+        } else {
+          checkForAnnotator(cb, w);
+        }
+      }, 100);
+    }
+
     book.rendition.hooks.content.register(function(view) {
-      view.addScript("//hypothes.is/embed.js").then(function() {
+
       view.window.hypothesisConfig = function () {
 
     		return {
     			constructor: this.Annotator.Guest,
-            app: 'https://hypothes.is/app.html'
+          app: 'http://45.55.144.135:5000/app.html'
     		};
     	};
-      })
+
+      view.contents.addScript("http://45.55.144.135:5000/embed.js").then(function() {
+
+        checkForAnnotator(function () {
+
+          var annotator = view.window.annotator;
+
+          annotator.on("scrollToAnnotation", function (node) {
+            var cfi = view.section.cfiFromElement(node);
+            // var selectors = ev.target[0].selector;
+            // var range = selectors[0];
+            console.log("scrollToAnnotation", cfi);
+            book.rendition.display(cfi);
           });
+
+          annotator.on("highlightClick", function (annotation) {
+            console.log(annotation);
+            window.annotator.show();
+          })
+
+          annotator.on("beforeAnnotationCreated", function (annotation) {
+            console.log(annotation);
+            window.annotator.show();
+          })
+
+        }, view.window);
+
+      });
+
+    });
+
+    checkForAnnotator(function () {
+      var main = document.querySelector('#main');
+
+      if(window.innerWidth < 1400) {
+        window.annotator.on("show", function () {
+          main.classList.add("open");
+        });
+
+        window.annotator.on("hide", function () {
+          main.classList.remove("open");
+        });
+      }
+    });
+
   </script>
-  <script>
+
-  // //  Hypothesis Customized embedding
-  // //  This hypothesis config function returns a new constructor which modifies
-  // //  annotator for a better integration. Below we create our own EpubAnnotationSidebar
-  // //  Constructor, customizing the show and hide function to take acount for the reader UI.
-  //
-  // window.hypothesisConfig = function() {
-  //   var Annotator = window.Annotator;
-  //   var $main = $("#main");
-  //
-  //   function EpubAnnotationSidebar(elem, options) {
-  //     options = {
-  //       server: true,
-  //       origin: true,
-  //       showHighlights: true,
-  //       Toolbar: {container: '#annotation-controls'}
-  //     }
-  //
-  //     Annotator.Host.call(this, elem, options);
-  //   }
-  //
-  //   EpubAnnotationSidebar.prototype = Object.create(Annotator.Host.prototype);
-  //
-  //   // EpubAnnotationSidebar.prototype.show = function() {
-  //   //   this.frame.css({
-  //   //     'margin-left': (-1 * this.frame.width()) + "px"
-  //   //   });
-  //   //   this.frame.removeClass('annotator-collapsed');
-  //   //   if (!$main.hasClass('single')) {
-  //   //     $main.addClass("single");
-  //   //     this.toolbar.find('[name=sidebar-toggle]').removeClass('h-icon-chevron-left').addClass('h-icon-chevron-right');
-  //   //     this.setVisibleHighlights(true);
-  //   //   }
-  //   // };
-  //   //
-  //   // EpubAnnotationSidebar.prototype.hide = function() {
-  //   //   this.frame.css({
-  //   //     'margin-left': ''
-  //   //   });
-  //   //   this.frame.addClass('annotator-collapsed');
-  //   //   if ($main.hasClass('single')) {
-  //   //     $main.removeClass("single");
-  //   //     this.toolbar.find('[name=sidebar-toggle]').removeClass('h-icon-chevron-right').addClass('h-icon-chevron-left');
-  //   //     this.setVisibleHighlights(false);
-  //   //   }
-  //   // };
-  //
-  //   return {
-  //     constructor: EpubAnnotationSidebar
-  //   }
-  // };
-  </script>
 </body>
 </html>

examples/spreads.html

@@ -121,7 +121,7 @@
     // var book = ePub("https://s3.amazonaws.com/moby-dick/OPS/package.opf");
     var book = ePub("../books/alice/OPS/package.opf");
     var rendition = book.renderTo("viewer", {
-      method: "paginate",
+      manager: "paginate",
       width: "100%",
       height: 600
     });

src/contents.js

@@ -23,6 +23,7 @@ Contents.prototype.width = function(w) {
 
   if (w) {
     this.documentElement.style.width = w;
+    this.content.style.width = w;
   }
 
   return this.window.getComputedStyle(this.documentElement)['width'];
@@ -38,6 +39,7 @@ Contents.prototype.height = function(h) {
 
   if (h) {
     this.documentElement.style.height = h;
+    this.content.style.height = h;
   }
 
   return this.window.getComputedStyle(this.documentElement)['height'];
@@ -83,7 +85,7 @@ Contents.prototype.scrollHeight = function() {
 
 Contents.prototype.overflow = function(overflow) {
 
-  if (h) {
+  if (overflow) {
     this.documentElement.style.overflow = overflow;
   }
 
@@ -246,9 +248,14 @@ Contents.prototype.locationOf = function(target, ignoreClass) {
 
   if(this.epubcfi.isCfiString(target)) {
     range = new EpubCFI(cfi).toRange(this.document, ignoreClass);
+
     if(range) {
+      if (range.startContainer.nodeType === Node.ELEMENT_NODE) {
+        targetPos = range.startContainer.getBoundingClientRect();
+      } else {
         targetPos = range.getBoundingClientRect();
       }
+    }
 
   } else if(typeof target === "string" &&
     target.indexOf("#") > -1) {

src/core.js

@@ -439,6 +439,7 @@ function qs(el, sel) {
 }
 
 function qsa(el, sel) {
+  
   if (typeof el.querySelector != "undefined") {
     return el.querySelectorAll(sel);
   } else {

src/epubcfi.js

@@ -67,7 +67,7 @@ EpubCFI.prototype.checkType = function(cfi) {
   // Is a range object
   } else if (typeof cfi === 'object' && core.type(cfi) === "Range"){
     return 'range';
-  } else if (typeof cfi === 'object' && cfi instanceof window.Node ){ // || typeof cfi === 'function'
+  } else if (typeof cfi === 'object' && typeof(cfi.nodeType) != "undefined" ){ // || typeof cfi === 'function'
     return 'node';
   } else if (typeof cfi === 'object' && cfi instanceof EpubCFI){
     return 'EpubCFI';

src/layout.js

@@ -45,8 +45,6 @@ Reflowable.prototype.calculate = function(_width, _height, _gap, _devisor){
 
   delta = (colWidth + gap) * divisor;
 
-
-
   this.columnAxis = core.prefixed('columnAxis');
   this.columnGap = core.prefixed('columnGap');
   this.columnWidth = core.prefixed('columnWidth');

src/managers/continuous.js

@@ -14,8 +14,8 @@ function ContinuousViewManager(options) {
 		offsetDelta: 250
 	});
 
-	core.extend(this.settings, options.settings);
+	core.defaults(this.settings, options.settings || {});
-
+	// core.extend(this.settings, options.settings || {});
 };
 
 // subclass extends superclass
@@ -82,7 +82,7 @@ ContinuousViewManager.prototype.append = function(section){
 
 		this.views.append(view);
 
-		return this.update();
+		// return this.update();
 
 	}.bind(this));
 };
@@ -96,7 +96,7 @@ ContinuousViewManager.prototype.prepend = function(section){
 
 		this.views.prepend(view);
 
-		return this.update();
+		// return this.update();
 
 	}.bind(this));
 
@@ -165,10 +165,11 @@ ContinuousViewManager.prototype.check = function(_offset){
 */
 
 ContinuousViewManager.prototype.update = function(_offset){
-	var container = this.stage.bounds();
+	var container = this.bounds();
-	var views = this.views;
+	var views = this.views.all();
 	var viewsLength = views.length;
 	var visible = [];
+	var offset = _offset || this.settings.offset || 0;
 	var isVisible;
 	var view;
 
@@ -177,10 +178,11 @@ ContinuousViewManager.prototype.update = function(_offset){
 
 	for (var i = 0; i < viewsLength; i++) {
     view = views[i];
-    isVisible = this.isVisible(view, 0, 0, container);
+
+    isVisible = this.isVisible(view, offset, offset, container);
 
     if(isVisible === true) {
-			promises.push(view.display());
+			promises.push(view.display(this.request));
       visible.push(view);
     } else {
 			this.q.enqueue(view.destroy.bind(view));
@@ -215,9 +217,9 @@ ContinuousViewManager.prototype.check = function(_offsetLeft, _offsetTop){
 		delta = _offsetTop;
 	}
 
-	var bounds = this.stage.bounds(); // TODO: save this until resize
+	var bounds = this._bounds; //this.bounds(); // bounds saved this until resize
 
-	var offset = horizontal ? this.container.scrollLeft : this.container.scrollTop;
+	var offset = horizontal ? this.scrollLeft : this.scrollTop;
 	var visibleLength = horizontal ? bounds.width : bounds.height;
 	var contentLength = horizontal ? this.container.scrollWidth : this.container.scrollHeight;
 
@@ -239,12 +241,11 @@ ContinuousViewManager.prototype.check = function(_offsetLeft, _offsetTop){
   }
 
   if(promises.length){
-
     return RSVP.all(promises)
       .then(function(posts) {
         // Check to see if anything new is on screen after rendering
         this.q.enqueue(this.update.bind(this));
-
+				// this.update(offset);
       }.bind(this));
 
   } else {
@@ -329,24 +330,22 @@ ContinuousViewManager.prototype.addScrollListeners = function() {
 
   if(this.settings.height) {
   	scroller = this.container;
+		this.scrollTop = this.container.scrollTop;
+		this.scrollLeft = this.container.scrollLeft;
   } else {
   	scroller = window;
+		this.scrollTop = window.scrollY;
+		this.scrollLeft = window.scrollX;
   }
 
-  scroller.addEventListener("scroll", function(e){
+  scroller.addEventListener("scroll", this.onScroll.bind(this));
-    if(!this.ignore) {
-      this.scrolled = true;
-    } else {
-      this.ignore = false;
-    }
-  }.bind(this));
 
   window.addEventListener('unload', function(e){
     this.ignore = true;
     this.destroy();
   }.bind(this));
 
-  this.tick.call(window, this.onScroll.bind(this));
+  // this.tick.call(window, this.onScroll.bind(this));
 
   this.scrolled = false;
 
@@ -354,7 +353,7 @@ ContinuousViewManager.prototype.addScrollListeners = function() {
 
 ContinuousViewManager.prototype.onScroll = function(){
 
-  if(this.scrolled) {
+  // if(!this.ignore) {
 
     if(this.settings.height) {
 	  	scrollTop = this.container.scrollTop;
@@ -364,6 +363,9 @@ ContinuousViewManager.prototype.onScroll = function(){
 			scrollLeft = window.scrollX;
 	  }
 
+		this.scrollTop = scrollTop;
+		this.scrollLeft = scrollLeft;
+
     if(!this.ignore) {
 
 	    if((this.scrollDeltaVert === 0 &&
@@ -371,7 +373,8 @@ ContinuousViewManager.prototype.onScroll = function(){
 	    	 this.scrollDeltaVert > this.settings.offsetDelta ||
 	    	 this.scrollDeltaHorz > this.settings.offsetDelta) {
 
-				this.q.enqueue(this.check.bind(this));
+				// this.q.enqueue(this.check.bind(this));
+				this.check();
 
 				this.scrollDeltaVert = 0;
 	    	this.scrollDeltaHorz = 0;
@@ -401,9 +404,9 @@ ContinuousViewManager.prototype.onScroll = function(){
 
 
     this.scrolled = false;
-  }
+  // }
 
-  this.tick.call(window, this.onScroll.bind(this));
+  // this.tick.call(window, this.onScroll.bind(this));
 
 };
 
@@ -419,19 +422,20 @@ ContinuousViewManager.prototype.onScroll = function(){
 // };
 
 ContinuousViewManager.prototype.currentLocation = function(){
+
   var visible = this.visible();
   var startPage, endPage;
 
   var container = this.container.getBoundingClientRect();
 
   if(visible.length === 1) {
-    return this.map.page(visible[0]);
+    return this.mapping.page(visible[0]);
   }
 
   if(visible.length > 1) {
 
-    startPage = this.map.page(visible[0]);
+    startPage = this.mapping.page(visible[0]);
-    endPage = this.map.page(visible[visible.length-1]);
+    endPage = this.mapping.page(visible[visible.length-1]);
 
     return {
       start: startPage.start,

src/managers/paginate.js

@@ -4,9 +4,9 @@ var ContinuousViewManager = require('./continuous');
 var Map = require('../map');
 var Layout = require('../layout');
 
-function PaginatedViewManager(book, options) {
+function PaginatedViewManager(options) {
 
-  ContinuousViewManager.apply(arguments);
+  ContinuousViewManager.apply(this, arguments); // call super constructor.
 
   this.settings = core.extend(this.settings || {}, {
     width: 600,
@@ -19,7 +19,7 @@ function PaginatedViewManager(book, options) {
     infinite: false
   });
 
-  core.extend(this.settings, options.settings);
+  core.defaults(this.settings, options.settings || {});
 
   this.isForcedSingle = this.settings.forceSingle;
 
@@ -82,9 +82,14 @@ PaginatedViewManager.prototype.applyLayoutMethod = function() {
 
   this.updateLayout();
 
-  // Set the look ahead offset for what is visible
+  this.setLayout(this.layout);
 
-  // this.map = new Map(this.layout);
+  this.stage.addStyleRules("iframe", [{"margin-right" : this.layout.gap + "px"}]);
+
+  // Set the look ahead offset for what is visible
+  this.settings.offeset = this.layout.delta;
+
+  this.mapping = new Map(this.layout);
 
   // this.hooks.layout.register(this.layout.format.bind(this));
 
@@ -98,14 +103,13 @@ PaginatedViewManager.prototype.updateLayout = function() {
   this.spreads = this.determineSpreads(this.settings.minSpreadWidth);
 
   this.layout.calculate(
-    this.stage.width,
+    this._stageSize.width,
-    this.stage.height,
+    this._stageSize.height,
     this.settings.gap,
     this.spreads
   );
 
   this.settings.offset = this.layout.delta;
-
 };
 
 PaginatedViewManager.prototype.moveTo = function(offset){
@@ -124,25 +128,26 @@ PaginatedViewManager.prototype.page = function(pg){
 };
 
 PaginatedViewManager.prototype.next = function(){
+    this.scrollLeft = this.container.scrollLeft;
 
-    // console.log(this.container.scrollWidth, this.container.scrollLeft + this.container.offsetWidth + this.layout.delta)
     if(this.container.scrollLeft +
        this.container.offsetWidth +
        this.layout.delta < this.container.scrollWidth) {
       this.scrollBy(this.layout.delta, 0);
     } else {
+      // this.scrollTo(this.container.scrollWidth, 0);
       this.scrollTo(this.container.scrollWidth - this.layout.delta, 0);
     }
-    this.reportLocation();
+    // this.reportLocation();
-    return this.check();
+    this.check();
 
 };
 
 PaginatedViewManager.prototype.prev = function(){
 
     this.scrollBy(-this.layout.delta, 0);
-    this.reportLocation();
+    // this.reportLocation();
-    return this.check();
+    this.check();
 
 };
 
@@ -163,7 +168,7 @@ PaginatedViewManager.prototype.currentLocation = function(){
     startA = container.left - visible[0].position().left;
     endA = startA + this.layout.spread;
 
-    return this.map.page(visible[0], startA, endA);
+    return this.mapping.page(visible[0], startA, endA);
   }
 
   if(visible.length > 1) {
@@ -176,8 +181,8 @@ PaginatedViewManager.prototype.currentLocation = function(){
     startB = container.left + this.layout.spread - visible[visible.length-1].position().left;
     endB = startB + this.layout.column;
 
-    pageLeft = this.map.page(visible[0], startA, endA);
+    pageLeft = this.mapping.page(visible[0], startA, endA);
-    pageRight = this.map.page(visible[visible.length-1], startB, endB);
+    pageRight = this.mapping.page(visible[visible.length-1], startB, endB);
 
     return {
       start: pageLeft.start,

src/managers/single.js

@@ -4,11 +4,12 @@ var Stage = require('../stage');
 var Views = require('../views');
 var EpubCFI = require('../epubcfi');
 var Layout = require('../layout');
+var Mapping = require('../map');
 
 function SingleViewManager(options) {
 
 	this.View = options.view;
-	this.renderer = options.renderer;
+	this.request = options.request;
 	this.q = options.queue;
 
 	this.settings = core.extend(this.settings || {}, {
@@ -22,8 +23,7 @@ function SingleViewManager(options) {
 		ignoreClass: ''
 	});
 
-	core.extend(this.settings, options.settings);
+	core.defaults(this.settings, options.settings || {});
-
 
 	this.viewSettings = {
 		ignoreClass: this.settings.ignoreClass,
@@ -42,7 +42,9 @@ SingleViewManager.prototype.render = function(element, size){
 	this.stage = new Stage({
 		width: size.width,
 		height: size.height,
-		hidden: this.settings.hidden
+		overflow: this.settings.overflow,
+		hidden: this.settings.hidden,
+		axis: this.settings.axis
 	});
 
 	this.stage.attachTo(element);
@@ -54,11 +56,12 @@ SingleViewManager.prototype.render = function(element, size){
 	this.views = new Views(this.container);
 
 	// Calculate Stage Size
-	this.bounds = this.stage.bounds();
+	this._bounds = this.bounds();
+	this._stageSize = this.stage.size();
 
 	// Set the dimensions for views
-	this.viewSettings.width = this.bounds.width;
+	this.viewSettings.width = this._stageSize.width;
-	this.viewSettings.height = this.bounds.height;
+	this.viewSettings.height = this._stageSize.height;
 
 	// Function to handle a resize event.
 	// Will only attach if width and height are both fixed.
@@ -81,20 +84,21 @@ SingleViewManager.prototype.onResized = function(e) {
 
 SingleViewManager.prototype.resize = function(width, height){
 
-	this.bounds = this.stage.bounds(width, height);
+	this._stageSize = this.stage.size(width, height);
+	this._bounds = this.bounds();
 
 	// Update for new views
-	this.viewSettings.width = this.bounds.width;
+	this.viewSettings.width = this._stageSize.width;
-	this.viewSettings.height = this.bounds.height;
+	this.viewSettings.height = this._stageSize.height;
 
 	// Update for existing views
 	this.views.each(function(view) {
-		view.size(this.bounds.width, this.bounds.height);
+		view.size(this._stageSize.width, this._stageSize.height);
 	}.bind(this));
 
 	this.trigger("resized", {
-		width: this.stage.width,
+		width: this._stageSize.width,
-		height: this.stage.height
+		height: this._stageSize.height
 	});
 
 };
@@ -127,7 +131,8 @@ SingleViewManager.prototype.display = function(section, target){
 	if(visible && target) {
 		offset = visible.locationOf(target);
 		this.moveTo(offset);
-		return displaying.resolve();
+		displaying.resolve();
+		return displayed;
 	}
 
 	// Hide all current views
@@ -144,7 +149,7 @@ SingleViewManager.prototype.display = function(section, target){
 			// Move to correct place within the section, if needed
 			if(target) {
 				offset = view.locationOf(target);
-				return this.moveTo(offset);
+				this.moveTo(offset);
 			}
 
 		}.bind(this))
@@ -177,7 +182,7 @@ SingleViewManager.prototype.add = function(view){
 	view.onDisplayed = this.afterDisplayed.bind(this);
 	view.onResize = this.afterResized.bind(this);
 
-	return view.display();
+	return view.display(this.request);
 	// return this.renderer(view, this.views.hidden);
 };
 
@@ -243,17 +248,17 @@ SingleViewManager.prototype.currentLocation = function(){
 
   if(this.views.length) {
   	view = this.views.first();
-    // start = container.left - view.position().left;
+    start = container.left - view.position().left;
-    // end = start + this.layout.spread;
+    end = start + this.layout.spread;
-		console.log("visibile currentLocation", view);
+
-    // return this.map.page(view);
+    return this.mapping.page(view);
   }
 
 };
 
 SingleViewManager.prototype.isVisible = function(view, offsetPrev, offsetNext, _container){
 	var position = view.position();
-	var container = _container || this.container.getBoundingClientRect();
+	var container = _container || this.bounds();
 
 	if(this.settings.axis === "horizontal" &&
 		position.right > container.left - offsetPrev &&
@@ -310,6 +315,7 @@ SingleViewManager.prototype.scrollBy = function(x, y, silent){
   }
   // console.log("scrollBy", x, y);
   this.scrolled = true;
+	this.onScroll();
 };
 
 SingleViewManager.prototype.scrollTo = function(x, y, silent){
@@ -325,6 +331,7 @@ SingleViewManager.prototype.scrollTo = function(x, y, silent){
   }
   // console.log("scrollTo", x, y);
   this.scrolled = true;
+	this.onScroll();
   // if(this.container.scrollLeft != x){
   //   setTimeout(function() {
   //     this.scrollTo(x, y, silent);
@@ -333,13 +340,17 @@ SingleViewManager.prototype.scrollTo = function(x, y, silent){
   // };
  };
 
+ SingleViewManager.prototype.onScroll = function(){
+
+};
+
  SingleViewManager.prototype.bounds = function() {
    var bounds;
 
    if(!this.settings.height || !this.container) {
      bounds = core.windowBounds();
    } else {
-     bounds = this.container.getBoundingClientRect();
+     bounds = this.stage.bounds();
    }
 
    return bounds;
@@ -352,7 +363,7 @@ SingleViewManager.prototype.scrollTo = function(x, y, silent){
 
 	this.setLayout(this.layout);
 
- 	// this.map = new Map(this.layout);
+ 	this.mapping = new Mapping(this.layout);
  	// this.manager.layout(this.layout.format);
  };
 

src/map.js

@@ -10,7 +10,7 @@ Map.prototype.section = function(view) {
 };
 
 Map.prototype.page = function(view, start, end) {
-  var root = view.document.body;
+  var root = view.contents.document.body;
   return this.rangePairToCfiPair(view.section, {
     start: this.findStart(root, start, end),
     end: this.findEnd(root, start, end)

src/parser.js

@@ -372,7 +372,7 @@ Parser.prototype.navItem = function(item, spineIndexByURL, bookSpine){
 
 Parser.prototype.ncx = function(tocXml, spineIndexByURL, bookSpine){
 	// var navPoints = tocXml.querySelectorAll("navMap navPoint");
-  var navPoints = core.qsa("navPoint");
+  var navPoints = core.qsa(tocXml, "navPoint");
 	var length = navPoints.length;
 	var i;
 	var toc = {};
@@ -398,7 +398,7 @@ Parser.prototype.ncx = function(tocXml, spineIndexByURL, bookSpine){
 Parser.prototype.ncxItem = function(item, spineIndexByURL, bookSpine){
 	var id = item.getAttribute('id') || false,
 			// content = item.querySelector("content"),
-			content = core.qs("content"),
+			content = core.qs(item, "content"),
 			src = content.getAttribute('src'),
       // navLabel = item.querySelector("navLabel"),
       navLabel = core.qs(item, "navLabel"),

src/rendition.js

@@ -13,12 +13,12 @@ var Map = require('./map');
 function Rendition(book, options) {
 
 	this.settings = core.extend(this.settings || {}, {
-		infinite: true,
+		// infinite: true,
-		hidden: false,
+		// hidden: false,
 		width: null,
 		height: null,
-		layoutOveride : null, // Default: { spread: 'reflowable', layout: 'auto', orientation: 'auto', flow: 'auto', viewport: ''},
+		// layoutOveride : null, // Default: { spread: 'reflowable', layout: 'auto', orientation: 'auto', flow: 'auto', viewport: ''},
-		axis: "vertical",
+		// axis: "vertical",
 		ignoreClass: '',
 		manager: "single",
 		view: "iframe"
@@ -72,6 +72,7 @@ function Rendition(book, options) {
 	this.manager = new this.ViewManager({
 		view: this.View,
 		queue: this.q,
+		request: this.book.request,
 		settings: this.settings
 	});
 
@@ -260,11 +261,13 @@ Rendition.prototype.moveTo = function(offset){
 };
 
 Rendition.prototype.next = function(){
-	return this.q.enqueue(this.manager.next.bind(this.manager));
+	return this.q.enqueue(this.manager.next.bind(this.manager))
+		.then(this.reportLocation.bind(this));
 };
 
 Rendition.prototype.prev = function(){
-	return this.q.enqueue(this.manager.prev.bind(this.manager));
+	return this.q.enqueue(this.manager.prev.bind(this.manager))
+		.then(this.reportLocation.bind(this));
 };
 
 //-- http://www.idpf.org/epub/fxl/

src/replacements.js

@@ -22,11 +22,38 @@ function base(doc, section){
   base.setAttribute("href", section.url);
 }
 
+function canonical(doc, section){
+  var head;
+  var link;
+  var url = section.url; // window.location.origin +  window.location.pathname + "?loc=" + encodeURIComponent(section.url);
+
+  if(!doc){
+    return;
+  }
+
+  head = core.qs(doc, "head");
+  link = core.qs(head, "link[rel='canonical']");
+
+  if (link) {
+    link.setAttribute("href", url);
+  } else {
+    link = doc.createElement("link");
+    link.setAttribute("rel", "canonical");
+    link.setAttribute("href", url);
+    head.appendChild(link);
+  }
+}
+
 function links(view, renderer) {
 
   var links = view.document.querySelectorAll("a[href]");
   var replaceLinks = function(link){
     var href = link.getAttribute("href");
+
+    if(href.indexOf("mailto:") === 0){
+      return;
+    }
+
     var linkUri = URI(href);
     var absolute = linkUri.absoluteTo(view.section.url);
     var relative = absolute.relativeTo(this.book.baseUrl).toString();
@@ -81,6 +108,7 @@ function substitute(content, urls, replacements) {
 }
 module.exports = {
   'base': base,
+  'canonical' : canonical,
   'links': links,
   'substitute': substitute
 };

src/spine.js

@@ -17,6 +17,7 @@ function Spine(_request){
 
   // Register replacements
   this.hooks.content.register(replacements.base);
+  this.hooks.content.register(replacements.canonical);
 
   this.epubcfi = new EpubCFI();
 

src/stage.js

@@ -2,6 +2,7 @@ var core = require('./core');
 
 function Stage(_options) {
 	this.settings = _options || {};
+	this.id = "epubjs-container-" + core.uuid();
 
 	this.container = this.create(this.settings);
 
@@ -19,6 +20,7 @@ Stage.prototype.create = function(options){
 	var height  = options.height;// !== false ? options.height : "100%";
 	var width   = options.width;// !== false ? options.width : "100%";
 	var overflow  = options.overflow || false;
+ 	var axis = options.axis || "vertical";
 
 	if(options.height && core.isNumber(options.height)) {
 		height = options.height + "px";
@@ -31,7 +33,7 @@ Stage.prototype.create = function(options){
 	// Create new container element
 	container = document.createElement("div");
 
-	container.id = "epubjs-container:" + core.uuid();
+	container.id = this.id;
 	container.classList.add("epub-container");
 
 	// Style Element
@@ -40,7 +42,7 @@ Stage.prototype.create = function(options){
 	container.style.lineHeight = "0";
 	container.style.verticalAlign = "top";
 
-	if(this.settings.axis === "horizontal") {
+	if(axis === "horizontal") {
 		container.style.whiteSpace = "nowrap";
 	}
 
@@ -126,7 +128,7 @@ Stage.prototype.onResize = function(func){
 
 };
 
-Stage.prototype.bounds = function(_width, _height){
+Stage.prototype.size = function(_width, _height){
 	var bounds;
 	var width = _width || this.settings.width;
 	var height = _height || this.settings.height;
@@ -183,4 +185,40 @@ Stage.prototype.bounds = function(_width, _height){
 
 };
 
+Stage.prototype.bounds = function(){
+	return this.element.getBoundingClientRect();
+}
+
+Stage.prototype.getSheet = function(){
+	var style = document.createElement("style");
+
+	// WebKit hack --> https://davidwalsh.name/add-rules-stylesheets
+	style.appendChild(document.createTextNode(""));
+
+	document.head.appendChild(style);
+
+	return style.sheet;
+}
+
+Stage.prototype.addStyleRules = function(selector, rulesArray){
+	var scope = "#" + this.id + " ";
+	var rules = "";
+
+	if(!this.sheet){
+		this.sheet = this.getSheet();
+	}
+
+	rulesArray.forEach(function(set) {
+		for (var prop in set) {
+			if(set.hasOwnProperty(prop)) {
+				rules += prop + ":" + set[prop] + ";";
+			}
+		}
+	})
+
+  this.sheet.insertRule(scope + selector + " {" + rules + "}", 0);
+}
+
+
+
 module.exports = Stage;

src/views.js

@@ -5,6 +5,10 @@ function Views(container) {
   this.hidden = false;
 };
 
+Views.prototype.all = function() {
+	return this._views;
+};
+
 Views.prototype.first = function() {
 	return this._views[0];
 };

src/views/iframe.js

@@ -13,7 +13,7 @@ function IframeView(section, options) {
     globalLayoutProperties: {},
   }, options || {});
 
-  this.id = "epubjs-view:" + core.uuid();
+  this.id = "epubjs-view-" + core.uuid();
   this.section = section;
   this.index = section.index;
 
@@ -35,7 +35,6 @@ function IframeView(section, options) {
   this.layout = this.settings.layout;
   // Dom events to listen for
   // this.listenedEvents = ["keydown", "keyup", "keypressed", "mouseup", "mousedown", "click", "touchend", "touchstart"];
-
 };
 
 IframeView.prototype.container = function(axis) {
@@ -119,8 +118,12 @@ IframeView.prototype.render = function(request, show) {
 	// Fit to size of the container, apply padding
   this.size();
 
+  if(!this.sectionRender) {
+    this.sectionRender = this.section.render(request);
+  }
+
 	// Render Chain
-	return this.section.render(request)
+	return this.sectionRender
 		.then(function(contents){
 			return this.load(contents);
 		}.bind(this))
@@ -400,6 +403,16 @@ IframeView.prototype.onLoad = function(event, promise) {
 
     this.rendering = false;
 
+    var link = this.document.querySelector("link[rel='canonical']");
+    if (link) {
+      link.setAttribute("href", this.section.url);
+    } else {
+      link = this.document.createElement("link");
+      link.setAttribute("rel", "canonical");
+      link.setAttribute("href", this.section.url);
+      this.document.querySelector("head").appendChild(link);
+    }
+
     promise.resolve(this.contents);
 };
 

src/views/inline.js

@@ -303,16 +303,6 @@ InlineView.prototype.load = function(contents) {
 
   this.contents = new Contents(this.document, this.frame);
 
-  // <link rel="canonical" href="https://blog.example.com/dresses/green-dresses-are-awesome" />
-  var link = this.document.querySelector("link[rel='canonical']");
-  if (link) {
-    link.setAttribute("href", this.section.url);
-  } else {
-    link = this.document.createElement("link");
-    link.setAttribute("rel", "canonical");
-    link.setAttribute("href", this.section.url);
-    this.document.querySelector("head").appendChild(link);
-  }
   this.rendering = false;
 
   loading.resolve(this.contents);