Updated offset location on display

examples/single.html

@@ -15,12 +15,12 @@
       color: #333;
     }
 
-    #viewer { 
+    #viewer {
 
       overflow: hidden;
       width: 800px;
       margin: 0 auto;
-      
+
     }
 
     #viewer .epub-view {
@@ -41,7 +41,7 @@
     .arrow:hover {
       color: #777;
     }
-     
+
     .arrow:active {
       color: #000;
     }
@@ -61,9 +61,9 @@
   <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");
 
 
@@ -87,7 +87,7 @@
 
       if(nextSection) {
         nextNav = book.navigation.get(nextSection.href);
-        
+
         if(nextNav) {
           nextLabel = nextNav.label;
         } else {
@@ -101,7 +101,7 @@
 
       if(prevSection) {
         prevNav = book.navigation.get(prevSection.href);
-        
+
         if(prevNav) {
           prevLabel = prevNav.label;
         } else {

examples/spreads.html

@@ -23,9 +23,9 @@
       -webkit-justify-content: center;
     }
 
-    #viewer { 
+    #viewer {
-      /*width: 900px;*/
+      width: 900px;
-      width: 80%;
+      /*width: 80%;*/
       height: 600px;
       background: white;
       box-shadow: 0 0 4px #ccc;
@@ -39,13 +39,13 @@
       margin: 40px auto;
     }
 
-    
+
 
     /*
     #viewer > iframe {
       overflow: scroll;
       height: 400px;
-     
+
       -webkit-column-axis: horizontal;
       -webkit-column-fill: auto;
       -webkit-column-width: 400px;
@@ -63,7 +63,7 @@
       left: 40px;
     }
 
-    #next {  
+    #next {
       right: 40px;
     }
 
@@ -84,7 +84,7 @@
     .arrow:hover {
       color: #777;
     }
-     
+
     .arrow:active {
       color: #000;
     }
@@ -106,7 +106,7 @@
         top: 5%;
         opacity: .15;
         box-shadow: -2px 0 15px rgba(0, 0, 0, 1);
-        content:  ""; 
+        content:  "";
       }
     }
 
@@ -119,15 +119,15 @@
   <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", { 
+    var rendition = book.renderTo("viewer", {
-      method: "paginate", 
+      method: "paginate",
       width: "100%",
       height: 600
     });
 
     var displayed = rendition.display();
-    
+
 
     displayed.then(function(renderer){
       // -- do stuff
@@ -147,21 +147,21 @@
     prev.addEventListener("click", function(){
       rendition.prev();
     }, false);
-    
+
     document.addEventListener("keyup", function(e){
-      
+
       // Left Key
       if ((e.keyCode || e.which) == 37) {
         rendition.prev();
       }
-      
+
       // Right Key
       if ((e.keyCode || e.which) == 39) {
         rendition.next();
       }
-      
+
     }, false);
-    
+
 
   </script>
 

src/continuous.js

@@ -1,5 +1,5 @@
 EPUBJS.Continuous = function(book, options) {
-	
+
 	EPUBJS.Rendition.apply(this, arguments); // call super constructor.
 
 	this.settings = EPUBJS.core.extend(this.settings || {}, {
@@ -9,14 +9,14 @@ EPUBJS.Continuous = function(book, options) {
 		offset: 500,
 		offsetDelta: 250
 	});
-	
+
 	EPUBJS.core.extend(this.settings, options);
-	
+
 	if(this.settings.hidden) {
 		this.wrapper = this.wrap(this.container);
 	}
-		
+
-	
+
 };
 
 // subclass extends superclass
@@ -26,7 +26,7 @@ EPUBJS.Continuous.prototype.constructor = EPUBJS.Continuous;
 EPUBJS.Continuous.prototype.attachListeners = function(){
 
 	// Listen to window for resize event if width or height is set to a percent
-	if(!EPUBJS.core.isNumber(this.settings.width) || 
+	if(!EPUBJS.core.isNumber(this.settings.width) ||
 		 !EPUBJS.core.isNumber(this.settings.height) ) {
 		window.addEventListener("resize", this.onResized.bind(this), false);
 	}
@@ -40,14 +40,16 @@ EPUBJS.Continuous.prototype.attachListeners = function(){
 };
 
 EPUBJS.Continuous.prototype._display = function(target){
-			
+
 	var displaying = new RSVP.defer();
 	var displayed = displaying.promise;
- 
+
 	var section;
   var view;
   var cfi, spinePos;
 
+  var visible;
+
   if(this.epubcfi.isCfiString(target)) {
     cfi = this.epubcfi.parse(target);
     spinePos = cfi.spinePos;
@@ -56,12 +58,48 @@ 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
 		this.q.enqueue(this.fill, view).then(function(){
 
@@ -73,18 +111,18 @@ EPUBJS.Continuous.prototype._display = function(target){
         return this.moveTo(offset);
 
       });
-            
+
       this.q.enqueue(this.check);
 
       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));
-    displaying.resolve(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,18 +149,20 @@ 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(
+		offset.left+this.settings.offset,
+		offset.top+this.settings.offset)
+		.then(function(){
 
-  return this.check(0, dist+this.settings.offset).then(function(){
+	    if(this.settings.axis === "vertical") {
-    
+	      this.scrollBy(0, offset.top);
-    if(this.settings.axis === "vertical") {
+	    } else {
-      this.scrollBy(0, dist);
+	      this.scrollBy(offset.left, 0);
-    } else {
+	    }
-      this.scrollBy(dist, 0);
-    }
 
-  }.bind(this)); 
+	  }.bind(this));
 };
 
 EPUBJS.Continuous.prototype.afterDisplayed = function(currView){
@@ -166,7 +213,7 @@ EPUBJS.Continuous.prototype.append = function(view){
 EPUBJS.Continuous.prototype.prepend = function(view){
 	this.views.unshift(view);
 	this.container.insertBefore(view.element, this.container.firstChild);
-	
+
 	// view.on("shown", this.afterDisplayedAbove.bind(this));
 	view.onDisplayed = this.afterDisplayed.bind(this);
 
@@ -226,15 +273,15 @@ EPUBJS.Continuous.prototype.insert = function(view, index) {
 // 	}
 
 // 	this.container.removeChild(view.element);
-	
+
 // 	view.off("resized");
 
 // 	if(view.displayed){
 // 		view.destroy();
 // 	}
-	
+
 // 	view = null;
-	
+
 // };
 
 EPUBJS.Continuous.prototype.first = function() {
@@ -267,7 +314,7 @@ EPUBJS.Continuous.prototype.check = function(_offset){
 			}
 
 		} else {
-			
+
 			if(view.displayed) {
         // console.log("destroy", view.section.index)
         this.q.enqueue(view.destroy.bind(view));
@@ -283,7 +330,7 @@ EPUBJS.Continuous.prototype.check = function(_offset){
 
 	}.bind(this));
 
-  
+
   if(promises.length){
 
     return RSVP.all(promises)
@@ -331,12 +378,12 @@ EPUBJS.Continuous.prototype.trim = function(){
   var lastIndex = this.views.indexOf(last);
   var above = this.views.slice(0, firstIndex);
   var below = this.views.slice(lastIndex+1);
-  
+
   // Erase all but last above
   for (var i = 0; i < above.length-1; i++) {
     this.erase(above[i], above);
   }
-  
+
   // Erase all except first below
   for (var j = 1; j < below.length; j++) {
     this.erase(below[j]);
@@ -347,7 +394,7 @@ EPUBJS.Continuous.prototype.trim = function(){
 };
 
 EPUBJS.Continuous.prototype.erase = function(view, above){ //Trim
-	
+
 	var prevTop;
 	var prevLeft;
 
@@ -362,7 +409,7 @@ EPUBJS.Continuous.prototype.erase = function(view, above){ //Trim
 	var bounds = view.bounds();
 
 	this.remove(view);
-	
+
 	if(above) {
 
 		if(this.settings.axis === "vertical") {
@@ -371,7 +418,7 @@ EPUBJS.Continuous.prototype.erase = function(view, above){ //Trim
 			this.scrollTo(prevLeft - bounds.width, 0, true);
 		}
 	}
-	
+
 };
 
 
@@ -387,12 +434,12 @@ EPUBJS.Continuous.prototype.checkCurrent = function(position) {
   if(this.settings.axis === "horizontal") {
     // TODO: Check for current horizontal
   } else {
-    
+
     for (var i = length; i >= 0; i--) {
       view = this.views[i];
       top = view.bounds().top;
       if(top < container.bottom) {
-        
+
         if(this.current == view.section) {
           break;
         }
@@ -436,7 +483,7 @@ EPUBJS.Continuous.prototype.start = function() {
       this.ignore = false;
     }
   }.bind(this));
-  
+
   window.addEventListener('unload', function(e){
     this.ignore = true;
     this.destroy();
@@ -467,13 +514,13 @@ EPUBJS.Continuous.prototype.onScroll = function(){
 	    //   left: scrollLeft
 	    // });
 
-	    if((this.scrollDeltaVert === 0 && 
+	    if((this.scrollDeltaVert === 0 &&
 	    	 this.scrollDeltaHorz === 0) ||
 	    	 this.scrollDeltaVert > this.settings.offsetDelta ||
 	    	 this.scrollDeltaHorz > this.settings.offsetDelta) {
 
 				this.q.enqueue(this.check);
-				
+
 				this.scrollDeltaVert = 0;
 	    	this.scrollDeltaHorz = 0;
 
@@ -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) {
 
@@ -562,7 +572,7 @@ EPUBJS.Continuous.prototype.currentLocation = function(){
   var startPage, endPage;
 
   var container = this.container.getBoundingClientRect();
-  
+
   if(visible.length === 1) {
     return this.map.page(visible[0]);
   }
@@ -577,7 +587,7 @@ EPUBJS.Continuous.prototype.currentLocation = function(){
       end: endPage.end
     };
   }
-  
+
 };
 
 /*
@@ -587,13 +597,13 @@ EPUBJS.Continuous.prototype.current = function(what){
   var length = this.views.length - 1;
 
   if(this.settings.axis === "horizontal") {
-    
+
     for (var i = length; i >= 0; i--) {
       view = this.views[i];
       left = view.position().left;
 
       if(left < container.right) {
-        
+
         if(this._current == view) {
           break;
         }
@@ -604,12 +614,12 @@ EPUBJS.Continuous.prototype.current = function(what){
     }
 
   } else {
-    
+
     for (var i = length; i >= 0; i--) {
       view = this.views[i];
       top = view.bounds().top;
       if(top < container.bottom) {
-        
+
         if(this._current == view) {
           break;
         }
@@ -624,4 +634,4 @@ EPUBJS.Continuous.prototype.current = function(what){
 
   return this._current;
 };
-*/
+*/

src/rendition.js

@@ -1,5 +1,5 @@
 EPUBJS.Rendition = function(book, options) {
-	
+
 	this.settings = EPUBJS.core.extend(this.settings || {}, {
 		infinite: true,
 		hidden: false,
@@ -10,13 +10,13 @@ EPUBJS.Rendition = function(book, options) {
 	});
 
 	EPUBJS.core.extend(this.settings, options);
-	
+
 	this.viewSettings = {};
 
 	this.book = book;
-	
+
 	this.views = [];
-	
+
 	//-- Adds Hook methods to the Rendition prototype
 	this.hooks = {};
 	this.hooks.display = new EPUBJS.Hook(this);
@@ -50,7 +50,7 @@ EPUBJS.Rendition.prototype.initialize = function(_options){
 	var hidden  = options.hidden || false;
 	var container;
 	var wrapper;
-	
+
 	if(options.height && EPUBJS.core.isNumber(options.height)) {
 		height = options.height + "px";
 	}
@@ -58,10 +58,10 @@ EPUBJS.Rendition.prototype.initialize = function(_options){
 	if(options.width && EPUBJS.core.isNumber(options.width)) {
 		width = options.width + "px";
 	}
-	
+
 	// Create new container element
 	container = document.createElement("div");
-	
+
 	container.id = "epubjs-container:" + EPUBJS.core.uuid();
 	container.classList.add("epub-container");
 
@@ -78,7 +78,7 @@ EPUBJS.Rendition.prototype.initialize = function(_options){
 	if(width){
 		container.style.width = width;
 	}
-	
+
 	if(height){
 		container.style.height = height;
 	}
@@ -90,21 +90,21 @@ EPUBJS.Rendition.prototype.initialize = function(_options){
 
 EPUBJS.Rendition.wrap = function(container) {
 	var wrapper = document.createElement("div");
-	
+
 	wrapper.style.visibility = "hidden";
 	wrapper.style.overflow = "hidden";
 	wrapper.style.width = "0";
 	wrapper.style.height = "0";
-	
+
 	wrapper.appendChild(container);
 	return wrapper;
 };
-		
+
 // Call to attach the container to an element in the dom
 // Container must be attached before rendering can begin
 EPUBJS.Rendition.prototype.attachTo = function(_element){
 	var bounds;
-	
+
 	this.container = this.initialize({
 		"width"  : this.settings.width,
 		"height" : this.settings.height
@@ -114,7 +114,7 @@ EPUBJS.Rendition.prototype.attachTo = function(_element){
 		this.element = _element;
 	} else if (typeof _element === "string") {
 		this.element = document.getElementById(_element);
-	} 
+	}
 
 	if(!this.element){
 		console.error("Not an Element");
@@ -127,7 +127,7 @@ EPUBJS.Rendition.prototype.attachTo = function(_element){
 	} else {
 		this.element.appendChild(this.container);
 	}
-		
+
 	// Attach Listeners
 	this.attachListeners();
 
@@ -136,19 +136,19 @@ EPUBJS.Rendition.prototype.attachTo = function(_element){
 
 	// Add Layout method
 	this.applyLayoutMethod();
-	
+
 	// Trigger Attached
 	this.trigger("attached");
 
 	// Start processing queue
 	// this.q.run();
-	
+
 };
 
 EPUBJS.Rendition.prototype.attachListeners = function(){
 
 	// Listen to window for resize event if width or height is set to 100%
-	if(!EPUBJS.core.isNumber(this.settings.width) || 
+	if(!EPUBJS.core.isNumber(this.settings.width) ||
 		 !EPUBJS.core.isNumber(this.settings.height) ) {
 		window.addEventListener("resize", this.onResized.bind(this), false);
 	}
@@ -160,13 +160,13 @@ EPUBJS.Rendition.prototype.bounds = function() {
 };
 
 EPUBJS.Rendition.prototype.display = function(target){
-	
+
 	return this.q.enqueue(this._display, target);
 
 };
 
 EPUBJS.Rendition.prototype._display = function(target){
-			
+
 	var displaying = new RSVP.defer();
 	var displayed = displaying.promise;
 
@@ -183,7 +183,7 @@ EPUBJS.Rendition.prototype._display = function(target){
   }
 
 	this.displaying = true;
-	
+
 	// Hide current views
 	this.hide();
 
@@ -194,11 +194,19 @@ 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();
-		
+
 		// 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)
@@ -215,14 +223,14 @@ 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) {
 
 	view.create();
-	
+
 	view.onLayout = this.layout.format.bind(this.layout);
 
 	// Fit to size of the container, apply padding
@@ -243,13 +251,13 @@ EPUBJS.Rendition.prototype.render = function(view, show) {
 			return this.hooks.render.trigger(view, this);
 		}.bind(this))
 		.then(function(){
-			
+
 			if(show !== false && this.hidden === false) {
 				this.q.enqueue(function(view){
 					view.show();
 				}, view);
 			}
-			
+
 
 			// this.map = new EPUBJS.Map(view, this.layout);
 			this.trigger("rendered", view.section);
@@ -296,7 +304,7 @@ EPUBJS.Rendition.prototype.remove = function(view) {
 		this.views.splice(index, 1);
 	}
 
-	
+
 	this._remove(view);
 
 };
@@ -313,7 +321,7 @@ EPUBJS.Rendition.prototype._remove = function(view) {
 };
 
 EPUBJS.Rendition.prototype.resizeView = function(view) {
-	
+
 	if(this.globalLayoutProperties.layout === "pre-paginated") {
 		view.lock("both", this.stage.width, this.stage.height);
 	} else {
@@ -352,7 +360,7 @@ EPUBJS.Rendition.prototype.stageSize = function(_width, _height){
 		width = bounds.width;
 		//height = bounds.height;
 	}
-		
+
 	if(height && !EPUBJS.core.isNumber(height)) {
 		bounds = bounds || this.container.getBoundingClientRect();
 		//width = bounds.width;
@@ -369,11 +377,11 @@ EPUBJS.Rendition.prototype.stageSize = function(_width, _height){
 	};
 
 	this.stage = {
-		width: width - 
+		width: width -
-						this.containerPadding.left - 
+						this.containerPadding.left -
 						this.containerPadding.right,
-		height: height - 
+		height: height -
-						this.containerPadding.top - 
+						this.containerPadding.top -
 						this.containerPadding.bottom
 	};
 
@@ -382,7 +390,7 @@ EPUBJS.Rendition.prototype.stageSize = function(_width, _height){
 };
 
 EPUBJS.Rendition.prototype.applyLayoutMethod = function() {
-	
+
 	this.layout = new EPUBJS.Layout.Scroll();
 	this.updateLayout();
 
@@ -390,7 +398,7 @@ EPUBJS.Rendition.prototype.applyLayoutMethod = function() {
 };
 
 EPUBJS.Rendition.prototype.updateLayout = function() {
-	
+
 	this.layout.calculate(this.stage.width, this.stage.height);
 
 };
@@ -485,12 +493,12 @@ EPUBJS.Rendition.prototype.isVisible = function(view, offsetPrev, offsetNext, _c
 	var position = view.position();
 	var container = _container || this.container.getBoundingClientRect();
 
-	if(this.settings.axis === "horizontal" && 
+	if(this.settings.axis === "horizontal" &&
 		(position.right > container.left - offsetPrev) &&
 		!(position.left >= container.right + offsetNext)) {
 
 		return true;
-		
+
   } else if(this.settings.axis === "vertical" &&
   		(position.bottom > container.top - offsetPrev) &&
 		!(position.top >= container.bottom + offsetNext)) {
@@ -499,7 +507,7 @@ EPUBJS.Rendition.prototype.isVisible = function(view, offsetPrev, offsetNext, _c
   }
 
 	return false;
-	
+
 };
 
 EPUBJS.Rendition.prototype.visible = function(){
@@ -519,12 +527,12 @@ EPUBJS.Rendition.prototype.visible = function(){
   }
 
   return visible;
-  
+
 };
 
 EPUBJS.Rendition.prototype.bounds = function(func) {
   var bounds;
-  
+
   if(!this.settings.height) {
     bounds = EPUBJS.core.windowBounds();
   } else {
@@ -573,8 +581,8 @@ EPUBJS.Rendition.prototype.destroy = function(){
 	this.q.clear();
 
 	this.clear();
-	
+
-	clearTimeout(this.trimTimeout);	
+	clearTimeout(this.trimTimeout);
 	if(this.settings.hidden) {
 		this.element.removeChild(this.wrapper);
 	} else {
@@ -593,7 +601,7 @@ EPUBJS.Rendition.prototype.reportLocation = function(){
 EPUBJS.Rendition.prototype.currentLocation = function(){
   var view;
   var start, end;
-  
+
   if(this.views.length) {
   	view = this.views[0];
     // start = container.left - view.position().left;
@@ -601,8 +609,46 @@ EPUBJS.Rendition.prototype.currentLocation = function(){
 
     return this.map.page(view);
   }
-  
+
 };
 
+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

@@ -7,7 +7,7 @@ EPUBJS.View = function(section, options) {
 
   this.element = document.createElement('div');
   this.element.classList.add("epub-view");
-  
+
 
   // this.element.style.minHeight = "100px";
   this.element.style.height = "0px";
@@ -17,7 +17,7 @@ EPUBJS.View = function(section, options) {
   this.added = false;
   this.displayed = false;
   this.rendered = false;
-  
+
   //this.width  = 0;
   //this.height = 0;
 
@@ -29,7 +29,7 @@ EPUBJS.View = function(section, options) {
   } else {
     this.element.style.display = "block";
   }
-  
+
 };
 
 EPUBJS.View.prototype.create = function() {
@@ -45,13 +45,13 @@ EPUBJS.View.prototype.create = function() {
   this.iframe.seamless = "seamless";
   // Back up if seamless isn't supported
   this.iframe.style.border = "none";
-  
+
   this.resizing = true;
 
   // this.iframe.style.display = "none";
   this.element.style.visibility = "hidden";
   this.iframe.style.visibility = "hidden";
-  
+
   this.iframe.style.width = "0";
   this.iframe.style.height = "0";
   this._width = 0;
@@ -59,7 +59,7 @@ EPUBJS.View.prototype.create = function() {
 
   this.element.appendChild(this.iframe);
   this.added = true;
-  
+
   this.elementBounds = EPUBJS.core.bounds(this.element);
 
   // if(width || height){
@@ -69,7 +69,7 @@ EPUBJS.View.prototype.create = function() {
   // } else {
   //   this.iframeBounds = EPUBJS.core.bounds(this.iframe);
   // }
-  
+
   // Firefox has trouble with baseURI and srcdoc
   // Disabled for now
   /*
@@ -86,7 +86,7 @@ EPUBJS.View.prototype.create = function() {
 
 
 EPUBJS.View.prototype.lock = function(what, width, height) {
-  
+
   var elBorders = EPUBJS.core.borders(this.element);
   var iframeBorders;
 
@@ -106,10 +106,10 @@ EPUBJS.View.prototype.lock = function(what, width, height) {
     this.resize(width, this.lockedHeight);
   }
 
-  if(what === "both" && 
+  if(what === "both" &&
      EPUBJS.core.isNumber(width) &&
      EPUBJS.core.isNumber(height)){
-    
+
     this.lockedWidth = width - elBorders.width - iframeBorders.width;
     this.lockedHeight = height - elBorders.height - iframeBorders.height;
 
@@ -123,14 +123,14 @@ EPUBJS.View.prototype.lock = function(what, width, height) {
 
   }
 
-  
+
 
 };
 
 EPUBJS.View.prototype.expand = function(force) {
   var width = this.lockedWidth;
   var height = this.lockedHeight;
-  
+
   var textWidth, textHeight;
   // console.log("expanding a")
   if(!this.iframe || this._expanding) return;
@@ -155,7 +155,7 @@ EPUBJS.View.prototype.expand = function(force) {
       width = this._contentWidth;
     }
   }
-  
+
   // Expand Vertically
   if(width && !height) {
     textHeight = this.textHeight();
@@ -167,7 +167,7 @@ EPUBJS.View.prototype.expand = function(force) {
       height = this._contentHeight;
     }
   }
-  
+
   // Only Resize if dimensions have changed or
   // if Frame is still hidden, so needs reframing
   if(this._needsReframe || width != this._width || height != this._height){
@@ -180,7 +180,7 @@ EPUBJS.View.prototype.expand = function(force) {
 EPUBJS.View.prototype.contentWidth = function(min) {
   var prev;
   var width;
-  
+
   // Save previous width
   prev = this.iframe.style.width;
   // Set the iframe size to min, width will only ever be greater
@@ -207,10 +207,10 @@ EPUBJS.View.prototype.contentHeight = function(min) {
 EPUBJS.View.prototype.textWidth = function() {
   var width;
   var range = this.document.createRange();
-  
+
   // Select the contents of frame
   range.selectNodeContents(this.document.body);
-  
+
   // get the width of the text content
   width = range.getBoundingClientRect().width;
   return width;
@@ -220,15 +220,15 @@ EPUBJS.View.prototype.textWidth = function() {
 EPUBJS.View.prototype.textHeight = function() {
   var height;
   var range = this.document.createRange();
-  
+
   range.selectNodeContents(this.document.body);
-  
+
-  height = range.getBoundingClientRect().height;  
+  height = range.getBoundingClientRect().height;
   return height;
 };
 
 EPUBJS.View.prototype.resize = function(width, height) {
-  
+
   if(!this.iframe) return;
 
   if(EPUBJS.core.isNumber(width)){
@@ -254,7 +254,7 @@ EPUBJS.View.prototype.reframe = function(width, height) {
     this._needsReframe = true;
     return;
   }
-  
+
   if(EPUBJS.core.isNumber(width)){
     this.element.style.width = width + "px";
   }
@@ -314,29 +314,29 @@ EPUBJS.View.prototype.load = function(contents) {
   }
 
   this.iframe.onload = function(event) {
-    
+
     this.window = this.iframe.contentWindow;
     this.document = this.iframe.contentDocument;
     this.rendering = false;
     loading.resolve(this);
-    
+
   }.bind(this);
-  
+
   if(this.supportsSrcdoc){
     this.iframe.srcdoc = contents;
   } else {
-    
+
     this.document = this.iframe.contentDocument;
-    
+
     if(!this.document) {
       loading.reject(new Error("No Document Available"));
       return loaded;
     }
-    
+
     this.document.open();
     this.document.write(contents);
     this.document.close();
-    
+
   }
 
   return loaded;
@@ -351,7 +351,7 @@ EPUBJS.View.prototype.layout = function(layoutFunc) {
   this.document.body.style.margin = "0";
   //this.document.body.style.display = "inline-block";
   //this.document.documentElement.style.width = "auto";
-  
+
   if(layoutFunc){
     layoutFunc(this);
   }
@@ -374,7 +374,7 @@ EPUBJS.View.prototype.listeners = function() {
   // Wait for fonts to load to finish
   // http://dev.w3.org/csswg/css-font-loading/
   // Not implemented fully except in chrome
-  
+
   if(this.document.fonts && this.document.fonts.status === "loading") {
     // console.log("fonts unloaded");
     this.document.fonts.onloadingdone = function(){
@@ -390,15 +390,15 @@ EPUBJS.View.prototype.listeners = function() {
   this.imageLoadListeners();
 
   this.mediaQueryListeners();
-  
+
   this.resizeListenters();
-  
+
 };
 
 EPUBJS.View.prototype.resizeListenters = function() {
   // Test size again
   clearTimeout(this.expanding);
-  // this.expanding = setTimeout(this.expand.bind(this), 350);  
+  // this.expanding = setTimeout(this.expand.bind(this), 350);
 };
 
 //https://github.com/tylergaw/media-query-events/blob/master/js/mq-events.js
@@ -451,7 +451,7 @@ EPUBJS.View.prototype.observe = function(target) {
 //   this.element = element;
 //   this.element.appendChild(this.iframe);
 // };
-// 
+//
 // EPUBJS.View.prototype.prependTo = function(element) {
 //   this.element = element;
 //   element.insertBefore(this.iframe, element.firstChild);
@@ -517,7 +517,7 @@ EPUBJS.View.prototype.onDisplayed = function(view) {
   // Stub, override with a custom functions
 };
 
-EPUBJS.View.prototype.bounds = function() {  
+EPUBJS.View.prototype.bounds = function() {
   if(!this.elementBounds) {
     this.elementBounds = EPUBJS.core.bounds(this.element);
   }
@@ -535,7 +535,7 @@ EPUBJS.View.prototype.destroy = function() {
     this.element.removeChild(this.iframe);
     this.displayed = false;
     this.iframe = null;
-    
+
     this._textWidth = null;
     this._textHeight = null;
     this._width = null;
@@ -551,7 +551,9 @@ 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;
 
   if(this.epubcfi.isCfiString(target)) {
@@ -563,38 +565,41 @@ 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) {
   var $stylesheet = document.createElement('link');
   var ready = false;
- 
+
   return new RSVP.Promise(function(resolve, reject){
     if(!this.document) {
       resolve(false);
       return;
     }
-    
+
     $stylesheet.type = 'text/css';
     $stylesheet.rel = "stylesheet";
     $stylesheet.href = src;
@@ -607,7 +612,7 @@ EPUBJS.View.prototype.addCss = function(src) {
         }, 1);
       }
     };
-    
+
     this.document.head.appendChild($stylesheet);
 
   }.bind(this));
@@ -617,9 +622,9 @@ EPUBJS.View.prototype.addCss = function(src) {
 EPUBJS.View.prototype.addStylesheetRules = function(rules) {
   var styleEl = document.createElement('style'),
       styleSheet;
-  
+
   if(!this.document) return;
-  
+
   // Append style element to head
   this.document.head.appendChild(styleEl);
 
@@ -644,4 +649,4 @@ EPUBJS.View.prototype.addStylesheetRules = function(rules) {
   }
 };
 
-RSVP.EventTarget.mixin(EPUBJS.View.prototype);
+RSVP.EventTarget.mixin(EPUBJS.View.prototype);