Updated scrolled display to work on vertical and horizontal axis

examples/continuous-scrolled.html

@@ -37,16 +37,19 @@
   <div id="viewer"></div>
 
   <script>
-    var currentSectionIndex = 8;
+    var params = URLSearchParams && new URLSearchParams(document.location.search.substring(1));
+    var url = params && params.get("url") && decodeURIComponent(params.get("url"));
+    var currentSectionIndex = (params && params.get("loc")) ? params.get("loc") : undefined;
+
     // Load the opf
-    var book = ePub("https://s3.amazonaws.com/epubjs/books/moby-dick/OPS/package.opf");
+    var book = ePub(url || "https://s3.amazonaws.com/epubjs/books/moby-dick/OPS/package.opf");
     var rendition = book.renderTo("viewer", {
         manager: "continuous",
         flow: "scrolled",
         width: "100%",
         height: "100%"
       });
-    var displayed = rendition.display("epubcfi(/6/14[xchapter_001]!4/2/24/2[c001p0011]/1:799)");
+    var displayed = rendition.display(currentSectionIndex);
 
 
     displayed.then(function(renderer){

examples/examples.css

@@ -248,6 +248,7 @@ body {
   -webkit-transform: translate(-400px, 0);
   -moz-transform: translate(-400px, 0);
   -ms-transform: translate(-400px, 0);
+  transform: translate(-400px, 0);
 }
 
 svg {

examples/scrolled.html

@@ -16,15 +16,18 @@
   <a id="next" href="#next" class="navlink">...</a>
 
   <script>
-    var currentSectionIndex = 8;
     // Load the opf
-    var book = ePub("https://s3.amazonaws.com/epubjs/books/alice/OPS/package.opf");
+    var params = URLSearchParams && new URLSearchParams(document.location.search.substring(1));
+    var url = params && params.get("url") && decodeURIComponent(params.get("url"));
+    var currentSectionIndex = (params && params.get("loc")) ? params.get("loc") : undefined;
+
+    var book = ePub(url || "https://s3.amazonaws.com/epubjs/books/alice/OPS/package.opf");
     var rendition = book.renderTo("viewer", {
       flow: "scrolled-doc",
       width: "100%"
     });
 
-    rendition.display("chapter_008.xhtml");
+    rendition.display(currentSectionIndex);
 
 
     var next = document.getElementById("next");

src/layout.js

@@ -189,15 +189,17 @@ class Layout {
 	 * @param  {Contents} contents
 	 * @return {Promise}
 	 */
-	format(contents, section){
+	format(contents, section, axis){
 		var formating;
 
 		if (this.name === "pre-paginated") {
 			formating = contents.fit(this.columnWidth, this.height, section);
 		} else if (this._flow === "paginated") {
 			formating = contents.columns(this.width, this.height, this.columnWidth, this.gap, this.settings.direction);
-		} else { // scrolled
+		} else if (axis && axis === "horizontal") {
-			formating = contents.size(this.width, null);
+			formating = contents.size(null, this.height);
+		} else {
+			formating = contents.size(this.width, null);				
 		}
 
 		return formating; // might be a promise in some View Managers

src/managers/default/index.js

@@ -486,6 +486,15 @@ class DefaultViewManager {
 					return err;
 				})
 				.then(function(){
+
+					// Reset position to start for scrolled-doc vertical-rl in default mode
+					if (!this.isPaginated &&
+						this.settings.axis === "horizontal" &&
+						this.settings.direction === "rtl" &&
+						this.settings.rtlScrollType === "default") {
+						
+						this.scrollTo(this.container.scrollWidth, 0, true);
+					}
 					this.views.show();
 				}.bind(this));
 		}
@@ -612,11 +621,10 @@ class DefaultViewManager {
 	}
 
 	currentLocation(){
-
+		if (this.isPaginated && this.settings.axis === "horizontal") {
-		if (this.settings.axis === "vertical") {
-			this.location = this.scrolledLocation();
-		} else {
 			this.location = this.paginatedLocation();
+		} else {
+			this.location = this.scrolledLocation();
 		}
 		return this.location;
 	}
@@ -625,31 +633,55 @@ class DefaultViewManager {
 		let visible = this.visible();
 		let container = this.container.getBoundingClientRect();
 		let pageHeight = (container.height < window.innerHeight) ? container.height : window.innerHeight;
-
+		let pageWidth = (container.width < window.innerWidth) ? container.width : window.innerWidth;
+		let vertical = (this.settings.axis === "vertical");
+		let rtl =  (this.settings.direction === "rtl"); 
+			
 		let offset = 0;
 		let used = 0;
 
 		if(this.settings.fullsize) {
-			offset = window.scrollY;
+			offset = vertical ? window.scrollY : window.scrollX;
 		}
 
 		let sections = visible.map((view) => {
 			let {index, href} = view.section;
 			let position = view.position();
+			let width = view.width();
 			let height = view.height();
 
-			let startPos = offset + container.top - position.top + used;
+			let startPos;
-			let endPos = startPos + pageHeight - used;
+			let endPos;
-			if (endPos > height) {
+			let stopPos;
-				endPos = height;
+			let totalPages;
-				used = (endPos - startPos);
+
+			if (vertical) {
+				startPos = offset + container.top - position.top + used;
+				endPos = startPos + pageHeight - used;
+				totalPages = this.layout.count(height, pageHeight).pages;
+				stopPos = pageHeight;
+				// TODO: what was this doing? Seem to break things.
+				// if (endPos > stopPos) {
+				// 	endPos = stopPos;
+				// 	used = (endPos - startPos);
+				// }
+			} else {
+				startPos = offset + container.left - position.left + used;
+				endPos = startPos + pageWidth - used;
+				totalPages = this.layout.count(width, pageWidth).pages;
+				stopPos = pageWidth;
 			}
 
-			let totalPages = this.layout.count(height, pageHeight).pages;
+			let currPage = Math.ceil(startPos / stopPos);
-
-			let currPage = Math.ceil(startPos / pageHeight);
 			let pages = [];
-			let endPage = Math.ceil(endPos / pageHeight);
+			let endPage = Math.ceil(endPos / stopPos);
+
+			// Reverse page counts for horizontal rtl
+			if (this.settings.direction === "rtl" && !vertical) {
+				let tempStartPage = currPage;
+				currPage = totalPages - endPage;
+				endPage = totalPages - tempStartPage;
+			}
 
 			pages = [];
 			for (var i = currPage; i <= endPage; i++) {
@@ -691,6 +723,14 @@ class DefaultViewManager {
 			// Find mapping
 			let start = left + container.left - position + offset + used;
 			let end = start + this.layout.width - used;
+			if (this.settings.direction === "rtl") {
+				start = width - left - container.width + container.left - position + offset + used;
+				end = start + this.layout.width - used;
+			} else {
+				start = left + container.left - position + offset + used;
+				end = start + this.layout.width - used;
+			}
+
 
 			let mapping = this.mapping.page(view.contents, view.section.cfiBase, start, end);
 
@@ -698,7 +738,7 @@ class DefaultViewManager {
 			let startPage = Math.floor(start / this.layout.pageWidth);
 			let pages = [];
 			let endPage = Math.floor(end / this.layout.pageWidth);
-
+			
 			// start page should not be negative
 			if (startPage < 0) {
 				startPage = 0;
@@ -908,7 +948,7 @@ class DefaultViewManager {
 	updateAxis(axis, forceUpdate){
 
 		if (!this.isPaginated) {
-			axis = "vertical";
+			// axis = "vertical";
 		}
 
 		if (!forceUpdate && axis === this.settings.axis) {

src/managers/views/iframe.js

@@ -9,7 +9,7 @@ class IframeView {
 	constructor(section, options) {
 		this.settings = extend({
 			ignoreClass : "",
-			axis: options.layout && options.layout.props.flow === "scrolled" ? "vertical" : "horizontal",
+			axis: undefined, //options.layout && options.layout.props.flow === "scrolled" ? "vertical" : "horizontal",
 			direction: undefined,
 			width: 0,
 			height: 0,
@@ -148,24 +148,32 @@ class IframeView {
 			}.bind(this))
 			.then(function(){
 
-				// apply the layout function to the contents
-				this.layout.format(this.contents, this.section);
-
 				// find and report the writingMode axis
 				let writingMode = this.contents.writingMode();
-				let axis = (writingMode.indexOf("vertical") === 0) ? "vertical" : "horizontal";
 
+				// Set the axis based on the flow and writing mode
+				let axis;
+				if (this.settings.flow === "scrolled") {
+					axis = (writingMode.indexOf("vertical") === 0) ? "horizontal" : "vertical";
+				} else {
+					axis = (writingMode.indexOf("vertical") === 0) ? "vertical" : "horizontal";
+				}
+
+				// this.element.style.writingMode = writingMode;
 				this.setAxis(axis);
 				this.emit(EVENTS.VIEWS.AXIS, axis);
 
 
+				// apply the layout function to the contents
+				this.layout.format(this.contents, this.section, this.axis);
+
 				// Listen for events that require an expansion of the iframe
 				this.addListeners();
 
 				return new Promise((resolve, reject) => {
 					// Expand the iframe to the full size of the content
 					this.expand();
-					//
+
 					if (this.settings.forceRight) {
 						this.element.style.marginLeft = this.width() + "px";
 					}
@@ -207,7 +215,7 @@ class IframeView {
 			this.lock("both", width, height);
 		} else if(this.settings.axis === "horizontal") {
 			this.lock("height", width, height);
-		} else {
+		} else {			
 			this.lock("width", width, height);
 		}
 
@@ -453,11 +461,6 @@ class IframeView {
 
 	setAxis(axis) {
 
-		// Force vertical for scrolled
-		if (this.layout.props.flow === "scrolled") {
-			axis = "vertical";
-		}
-
 		this.settings.axis = axis;
 
 		if(axis == "horizontal"){