Updated offset location on display

dist/epub.js

@@ -4383,6 +4383,8 @@ EPUBJS.View.prototype.root = function() {
 };
 
 EPUBJS.View.prototype.locationOf = function(target) {
+  var parentPos = this.iframe.getBoundingClientRect();
+  var targetPos = {"left": 0, "top": 0};
 
   if(!this.document) return;
 
@@ -4395,26 +4397,29 @@ EPUBJS.View.prototype.locationOf = function(target) {
         // Must Clean up Marker before going to page
         this.epubcfi.removeMarker(marker, this.document);
 
-        return marker.getBoundingClientRect();
+        targetPos = marker.getBoundingClientRect();
       }
     } else {
       range = this.epubcfi.generateRangeFromCfi(cfi, this.document);
       if(range) {
-        return range.getBoundingClientRect();
+        targetPos = range.getBoundingClientRect();
       }
     }
   } else if(typeof target === "string" &&
     target.indexOf("#") > -1) {
 
-    id = target.substring(target.indexOf("#"));
+    id = target.substring(target.indexOf("#")+1);
     el = this.document.getElementById(id);
 
     if(el) {
-      return el.getBoundingClientRect();
+      targetPos = el.getBoundingClientRect();
     }
   }
 
-  return {"left": 0, "top": 0};
+  return {
+    "left": window.scrollX + parentPos.left + targetPos.left,
+    "top": window.scrollY + parentPos.top + targetPos.top
+  };
 };
 
 EPUBJS.View.prototype.addCss = function(src) {
@@ -4477,6 +4482,7 @@ EPUBJS.View.prototype.addStylesheetRules = function(rules) {
 };
 
 RSVP.EventTarget.mixin(EPUBJS.View.prototype);
+
 EPUBJS.Layout = EPUBJS.Layout || {};
 
 EPUBJS.Layout.Reflowable = function(){
@@ -4829,7 +4835,15 @@ EPUBJS.Rendition.prototype._display = function(target){
 		this.q.enqueue(this.append, view);
 
 		// Move to correct place within the section, if needed
-		// this.moveTo(what)
+		this.q.enqueue(function(){
+
+			var offset = view.locationOf(target);
+
+			if(offset.top > 250 || offset.left > 250){ // Terrible temp fix to prevent unneeded jumps
+				return this.moveTo(offset);
+			}
+
+		});
 
 		// Show views
 		this.show();
@@ -4850,8 +4864,8 @@ EPUBJS.Rendition.prototype._display = function(target){
 
 };
 // Takes a cfi, fragment or page?
-EPUBJS.Rendition.prototype.moveTo = function(what){
+EPUBJS.Rendition.prototype.moveTo = function(offset){
-	
+	this.scrollBy(offset.left, offset.top);
 };
 
 EPUBJS.Rendition.prototype.render = function(view, show) {
@@ -5239,6 +5253,44 @@ EPUBJS.Rendition.prototype.currentLocation = function(){
 
 };
 
+EPUBJS.Rendition.prototype.scrollBy = function(x, y, silent){
+  if(silent) {
+    this.ignore = true;
+  }
+
+  if(this.settings.height) {
+
+    if(x) this.container.scrollLeft += x;
+  	if(y) this.container.scrollTop += y;
+
+  } else {
+  	window.scrollBy(x,y);
+  }
+  // console.log("scrollBy", x, y);
+  this.scrolled = true;
+};
+
+EPUBJS.Rendition.prototype.scrollTo = function(x, y, silent){
+  if(silent) {
+    this.ignore = true;
+  }
+
+  if(this.settings.height) {
+  	this.container.scrollLeft = x;
+  	this.container.scrollTop = y;
+  } else {
+  	window.scrollTo(x,y);
+  }
+  // console.log("scrollTo", x, y);
+  this.scrolled = true;
+  // if(this.container.scrollLeft != x){
+  //   setTimeout(function() {
+  //     this.scrollTo(x, y, silent);
+  //   }.bind(this), 10);
+  //   return;
+  // };
+ };
+
 //-- Enable binding events to Renderer
 RSVP.EventTarget.mixin(EPUBJS.Rendition.prototype);
 
@@ -5292,6 +5344,8 @@ EPUBJS.Continuous.prototype._display = function(target){
   var view;
   var cfi, spinePos;
 
+  var visible;
+
   if(this.epubcfi.isCfiString(target)) {
     cfi = this.epubcfi.parse(target);
     spinePos = cfi.spinePos;
@@ -5300,10 +5354,46 @@ EPUBJS.Continuous.prototype._display = function(target){
     section = this.book.spine.get(target);
   }
 
-	this.displaying = true;
+
-  this.hide();
+
+
 
 	if(section){
+
+    this.displaying = true;
+
+    // Check to make sure the section we want isn't already shown
+    visible = this.visible();
+    for (var i = 0; i < visible.length; i++) {
+      if(visible.length &&
+          section.index === visible[i].section.index){
+        // Section already has a visible view
+        view = visible[i];
+        // Move to target location
+        this.q.enqueue(function(){
+
+          var offset = view.locationOf(target);
+
+          return this.moveTo(offset);
+
+        });
+
+        this.q.enqueue(this.check);
+        // Trigger display hooks
+        this.hooks.display.trigger(view)
+        .then(function(){
+          this.trigger("displayed", section);
+          displaying.resolve(this);
+        }.bind(this));
+
+        // Finished, no need to fill
+        return displayed;
+
+      }
+    }
+
+    this.hide();
+
 		view = new EPUBJS.View(section, this.viewSettings);
 
 		// This will clear all previous views
@@ -5322,13 +5412,13 @@ EPUBJS.Continuous.prototype._display = function(target){
 
       this.q.enqueue(this.show);
 
-      // This hook doesn't prevent showing, but waits to resolve until
+      // // This hook doesn't prevent showing, but waits to resolve until
-      // all the hooks have finished. Might want to block showing.
+      // // all the hooks have finished. Might want to block showing.
-      this.hooks.display.trigger(view)
+      // this.hooks.display.trigger(view)
-      .then(function(){
+      // .then(function(){
-        this.trigger("displayed", section);
+      //   this.trigger("displayed", section);
-        displaying.resolve(this);
+      //   // displaying.resolve(this);
-      }.bind(this));          
+      // }.bind(this));
 
     }.bind(this));
 
@@ -5337,7 +5427,14 @@ EPUBJS.Continuous.prototype._display = function(target){
     //  this.displaying = false;
     // displaying.resolve(this);
     //}.bind(this));
+
+    // This hook doesn't prevent showing, but waits to resolve until
+    // all the hooks have finished. Might want to block showing.
+    this.hooks.display.trigger(view)
+    .then(function(){
+      this.trigger("displayed", section);
       displaying.resolve(this);
+    }.bind(this));
 
 	} else {
 		displaying.reject(new Error("No Section Found"));
@@ -5348,15 +5445,17 @@ EPUBJS.Continuous.prototype._display = function(target){
 
 
 EPUBJS.Continuous.prototype.moveTo = function(offset){
-  var bounds = this.bounds();
+  // var bounds = this.bounds();
-  var dist = Math.floor(offset.top / bounds.height) * bounds.height;
+  // var dist = Math.floor(offset.top / bounds.height) * bounds.height;
-
+  return this.check(
-  return this.check(0, dist+this.settings.offset).then(function(){
+		offset.left+this.settings.offset,
+		offset.top+this.settings.offset)
+		.then(function(){
 
 	    if(this.settings.axis === "vertical") {
-      this.scrollBy(0, dist);
+	      this.scrollBy(0, offset.top);
 	    } else {
-      this.scrollBy(dist, 0);
+	      this.scrollBy(offset.left, 0);
 	    }
 
 	  }.bind(this));
@@ -5753,43 +5852,6 @@ EPUBJS.Continuous.prototype.onScroll = function(){
 
 };
 
-EPUBJS.Continuous.prototype.scrollBy = function(x, y, silent){
-  if(silent) {
-    this.ignore = true;
-  }
-
-  if(this.settings.height) {
-
-    if(x) this.container.scrollLeft += x;
-  	if(y) this.container.scrollTop += y;
-
-  } else {
-  	window.scrollBy(x,y);
-  }
-  // console.log("scrollBy", x, y);
-  this.scrolled = true;
-};
-
-EPUBJS.Continuous.prototype.scrollTo = function(x, y, silent){
-  if(silent) {
-    this.ignore = true;
-  }
-
-  if(this.settings.height) {
-  	this.container.scrollLeft = x;
-  	this.container.scrollTop = y;
-  } else {
-  	window.scrollTo(x,y);
-  }
-  // console.log("scrollTo", x, y);
-  this.scrolled = true;
-  // if(this.container.scrollLeft != x){
-  //   setTimeout(function() {
-  //     this.scrollTo(x, y, silent);
-  //   }.bind(this), 10);
-  //   return;
-  // };
- };
 
  EPUBJS.Continuous.prototype.resizeView = function(view) {
 
@@ -5869,6 +5931,7 @@ EPUBJS.Continuous.prototype.current = function(what){
   return this._current;
 };
 */
+
 EPUBJS.Paginate = function(book, options) {
 
   EPUBJS.Continuous.apply(this, arguments);

examples/single.html

@@ -61,7 +61,7 @@
   <script>
     var currentSectionIndex = 8;
     // Load the opf
-    var book = ePub("../books/moby-dick/OPS/package.opf");
+    var book = ePub("../books/alice/OPS/package.opf");
     var rendition = book.renderTo("viewer");
 
     rendition.display("chapter_008.xhtml");

examples/spreads.html

@@ -24,8 +24,8 @@
     }
 
     #viewer {
-      /*width: 900px;*/
+      width: 900px;
-      width: 80%;
+      /*width: 80%;*/
       height: 600px;
       background: white;
       box-shadow: 0 0 4px #ccc;
@@ -119,7 +119,7 @@
   <script>
     // Load the opf
     // var book = ePub("https://s3.amazonaws.com/moby-dick/OPS/package.opf");
-    var book = ePub("../books/moby-dick/OPS/package.opf");
+    var book = ePub("../books/alice/OPS/package.opf");
     var rendition = book.renderTo("viewer", {
       method: "paginate",
       width: "100%",

src/continuous.js

@@ -48,6 +48,8 @@ EPUBJS.Continuous.prototype._display = function(target){
   var view;
   var cfi, spinePos;
 
+  var visible;
+
   if(this.epubcfi.isCfiString(target)) {
     cfi = this.epubcfi.parse(target);
     spinePos = cfi.spinePos;
@@ -56,10 +58,46 @@ EPUBJS.Continuous.prototype._display = function(target){
     section = this.book.spine.get(target);
   }
 
-	this.displaying = true;
+
-  this.hide();
+
+
 
 	if(section){
+
+    this.displaying = true;
+
+    // Check to make sure the section we want isn't already shown
+    visible = this.visible();
+    for (var i = 0; i < visible.length; i++) {
+      if(visible.length &&
+          section.index === visible[i].section.index){
+        // Section already has a visible view
+        view = visible[i];
+        // Move to target location
+        this.q.enqueue(function(){
+
+          var offset = view.locationOf(target);
+
+          return this.moveTo(offset);
+
+        });
+
+        this.q.enqueue(this.check);
+        // Trigger display hooks
+        this.hooks.display.trigger(view)
+        .then(function(){
+          this.trigger("displayed", section);
+          displaying.resolve(this);
+        }.bind(this));
+
+        // Finished, no need to fill
+        return displayed;
+
+      }
+    }
+
+    this.hide();
+
 		view = new EPUBJS.View(section, this.viewSettings);
 
 		// This will clear all previous views
@@ -78,13 +116,13 @@ EPUBJS.Continuous.prototype._display = function(target){
 
       this.q.enqueue(this.show);
 
-      // This hook doesn't prevent showing, but waits to resolve until
+      // // This hook doesn't prevent showing, but waits to resolve until
-      // all the hooks have finished. Might want to block showing.
+      // // all the hooks have finished. Might want to block showing.
-      this.hooks.display.trigger(view)
+      // this.hooks.display.trigger(view)
-      .then(function(){
+      // .then(function(){
-        this.trigger("displayed", section);
+      //   this.trigger("displayed", section);
-        displaying.resolve(this);
+      //   // displaying.resolve(this);
-      }.bind(this));          
+      // }.bind(this));
 
     }.bind(this));
 
@@ -93,7 +131,14 @@ EPUBJS.Continuous.prototype._display = function(target){
     //  this.displaying = false;
     // displaying.resolve(this);
     //}.bind(this));
+
+    // This hook doesn't prevent showing, but waits to resolve until
+    // all the hooks have finished. Might want to block showing.
+    this.hooks.display.trigger(view)
+    .then(function(){
+      this.trigger("displayed", section);
       displaying.resolve(this);
+    }.bind(this));
 
 	} else {
 		displaying.reject(new Error("No Section Found"));
@@ -104,15 +149,17 @@ EPUBJS.Continuous.prototype._display = function(target){
 
 
 EPUBJS.Continuous.prototype.moveTo = function(offset){
-  var bounds = this.bounds();
+  // var bounds = this.bounds();
-  var dist = Math.floor(offset.top / bounds.height) * bounds.height;
+  // var dist = Math.floor(offset.top / bounds.height) * bounds.height;
-
+  return this.check(
-  return this.check(0, dist+this.settings.offset).then(function(){
+		offset.left+this.settings.offset,
+		offset.top+this.settings.offset)
+		.then(function(){
 
 	    if(this.settings.axis === "vertical") {
-      this.scrollBy(0, dist);
+	      this.scrollBy(0, offset.top);
 	    } else {
-      this.scrollBy(dist, 0);
+	      this.scrollBy(offset.left, 0);
 	    }
 
 	  }.bind(this));
@@ -509,43 +556,6 @@ EPUBJS.Continuous.prototype.onScroll = function(){
 
 };
 
-EPUBJS.Continuous.prototype.scrollBy = function(x, y, silent){
-  if(silent) {
-    this.ignore = true;
-  }
-
-  if(this.settings.height) {
-
-    if(x) this.container.scrollLeft += x;
-  	if(y) this.container.scrollTop += y;
-
-  } else {
-  	window.scrollBy(x,y);
-  }
-  // console.log("scrollBy", x, y);
-  this.scrolled = true;
-};
-
-EPUBJS.Continuous.prototype.scrollTo = function(x, y, silent){
-  if(silent) {
-    this.ignore = true;
-  }
-
-  if(this.settings.height) {
-  	this.container.scrollLeft = x;
-  	this.container.scrollTop = y;
-  } else {
-  	window.scrollTo(x,y);
-  }
-  // console.log("scrollTo", x, y);
-  this.scrolled = true;
-  // if(this.container.scrollLeft != x){
-  //   setTimeout(function() {
-  //     this.scrollTo(x, y, silent);
-  //   }.bind(this), 10);
-  //   return;
-  // };
- };
 
  EPUBJS.Continuous.prototype.resizeView = function(view) {
 

src/rendition.js

@@ -194,7 +194,15 @@ EPUBJS.Rendition.prototype._display = function(target){
 		this.q.enqueue(this.append, view);
 
 		// Move to correct place within the section, if needed
-		// this.moveTo(what)
+		this.q.enqueue(function(){
+
+			var offset = view.locationOf(target);
+
+			if(offset.top > 250 || offset.left > 250){ // Terrible temp fix to prevent unneeded jumps
+				return this.moveTo(offset);
+			}
+
+		});
 
 		// Show views
 		this.show();
@@ -215,8 +223,8 @@ EPUBJS.Rendition.prototype._display = function(target){
 
 };
 // Takes a cfi, fragment or page?
-EPUBJS.Rendition.prototype.moveTo = function(what){
+EPUBJS.Rendition.prototype.moveTo = function(offset){
-	
+	this.scrollBy(offset.left, offset.top);
 };
 
 EPUBJS.Rendition.prototype.render = function(view, show) {
@@ -604,5 +612,43 @@ EPUBJS.Rendition.prototype.currentLocation = function(){
 
 };
 
+EPUBJS.Rendition.prototype.scrollBy = function(x, y, silent){
+  if(silent) {
+    this.ignore = true;
+  }
+
+  if(this.settings.height) {
+
+    if(x) this.container.scrollLeft += x;
+  	if(y) this.container.scrollTop += y;
+
+  } else {
+  	window.scrollBy(x,y);
+  }
+  // console.log("scrollBy", x, y);
+  this.scrolled = true;
+};
+
+EPUBJS.Rendition.prototype.scrollTo = function(x, y, silent){
+  if(silent) {
+    this.ignore = true;
+  }
+
+  if(this.settings.height) {
+  	this.container.scrollLeft = x;
+  	this.container.scrollTop = y;
+  } else {
+  	window.scrollTo(x,y);
+  }
+  // console.log("scrollTo", x, y);
+  this.scrolled = true;
+  // if(this.container.scrollLeft != x){
+  //   setTimeout(function() {
+  //     this.scrollTo(x, y, silent);
+  //   }.bind(this), 10);
+  //   return;
+  // };
+ };
+
 //-- Enable binding events to Renderer
 RSVP.EventTarget.mixin(EPUBJS.Rendition.prototype);

src/view.js

@@ -551,6 +551,8 @@ EPUBJS.View.prototype.root = function() {
 };
 
 EPUBJS.View.prototype.locationOf = function(target) {
+  var parentPos = this.iframe.getBoundingClientRect();
+  var targetPos = {"left": 0, "top": 0};
 
   if(!this.document) return;
 
@@ -563,26 +565,29 @@ EPUBJS.View.prototype.locationOf = function(target) {
         // Must Clean up Marker before going to page
         this.epubcfi.removeMarker(marker, this.document);
 
-        return marker.getBoundingClientRect();
+        targetPos = marker.getBoundingClientRect();
       }
     } else {
       range = this.epubcfi.generateRangeFromCfi(cfi, this.document);
       if(range) {
-        return range.getBoundingClientRect();
+        targetPos = range.getBoundingClientRect();
       }
     }
   } else if(typeof target === "string" &&
     target.indexOf("#") > -1) {
 
-    id = target.substring(target.indexOf("#"));
+    id = target.substring(target.indexOf("#")+1);
     el = this.document.getElementById(id);
 
     if(el) {
-      return el.getBoundingClientRect();
+      targetPos = el.getBoundingClientRect();
     }
   }
 
-  return {"left": 0, "top": 0};
+  return {
+    "left": window.scrollX + parentPos.left + targetPos.left,
+    "top": window.scrollY + parentPos.top + targetPos.top
+  };
 };
 
 EPUBJS.View.prototype.addCss = function(src) {