Update axis to support vertical writing mode

src/contents.js

@@ -779,7 +779,15 @@ class Contents {
 		var COLUMN_WIDTH = prefixed("column-width");
 		var COLUMN_FILL = prefixed("column-fill");
 
+		var isVertical = this.writingMode().indexOf("vertical") === 0;
+
+		if (isVertical) {
+			this.width(width);
+		} else {
 			this.width("100%");
+		}
+
+		// this.width("100%");
 		this.height(height);
 
 		// Deal with Mobile trying to scale to viewport
@@ -850,6 +858,16 @@ class Contents {
 		});
 	}
 
+	writingMode(mode) {
+		let WRITING_MODE = prefixed("writing-mode");
+
+		if (mode && this.documentElement) {
+			this.documentElement.style[WRITING_MODE] = mode;
+		}
+
+		return this.window.getComputedStyle(this.documentElement)[WRITING_MODE] || '';
+	}
+
 	destroy() {
 		// Stop observing
 		if(this.observer) {

src/managers/continuous/index.js

@@ -12,6 +12,7 @@ class ContinuousViewManager extends DefaultViewManager {
 			infinite: true,
 			overflow: undefined,
 			axis: "vertical",
+			flow: "scrolled",
 			offset: 500,
 			offsetDelta: 250,
 			width: undefined,
@@ -28,6 +29,7 @@ class ContinuousViewManager extends DefaultViewManager {
 		this.viewSettings = {
 			ignoreClass: this.settings.ignoreClass,
 			axis: this.settings.axis,
+			flow: this.settings.flow,
 			layout: this.layout,
 			width: 0,
 			height: 0
@@ -69,7 +71,7 @@ class ContinuousViewManager extends DefaultViewManager {
 		var offsetX = 0,
 				offsetY = 0;
 
-		if(this.settings.axis === "vertical") {
+		if(!this.isPaginated) {
 			distY = offset.top;
 			offsetY = offset.top+this.settings.offset;
 		} else {
@@ -157,6 +159,10 @@ class ContinuousViewManager extends DefaultViewManager {
 			view.expanded = true;
 		});
 
+		view.on("axis", (axis) => {
+			this.updateAxis(axis);
+		});
+
 		// view.on("shown", this.afterDisplayed.bind(this));
 		view.onDisplayed = this.afterDisplayed.bind(this);
 		view.onResize = this.afterResized.bind(this);
@@ -171,6 +177,10 @@ class ContinuousViewManager extends DefaultViewManager {
 			view.expanded = true;
 		});
 
+		view.on("axis", (axis) => {
+			this.updateAxis(axis);
+		});
+
 		this.views.append(view);
 
 		view.onDisplayed = this.afterDisplayed.bind(this);
@@ -186,6 +196,10 @@ class ContinuousViewManager extends DefaultViewManager {
 			view.expanded = true;
 		});
 
+		view.on("axis", (axis) => {
+			this.updateAxis(axis);
+		});
+
 		this.views.prepend(view);
 
 		view.onDisplayed = this.afterDisplayed.bind(this);
@@ -269,7 +283,9 @@ class ContinuousViewManager extends DefaultViewManager {
 
 		var bounds = this._bounds; // bounds saved this until resize
 
-		var offset = horizontal ? this.scrollLeft : this.scrollTop;
+		let dir = this.settings.direction === "rtl" ? -1 : 1; //RTL reverses scrollTop
+
+		var offset = horizontal ? this.scrollLeft : this.scrollTop * dir;
 		var visibleLength = horizontal ? bounds.width : bounds.height;
 		var contentLength = horizontal ? this.container.scrollWidth : this.container.scrollHeight;
 
@@ -404,7 +420,7 @@ class ContinuousViewManager extends DefaultViewManager {
 		}
 
 		scroller.addEventListener("scroll", this.onScroll.bind(this));
-		this._scrolled = debounce(this.scrolled.bind(this), 60);
+		this._scrolled = debounce(this.scrolled.bind(this), 30);
 		// this.tick.call(window, this.onScroll.bind(this));
 
 		this.didScroll = false;
@@ -518,8 +534,12 @@ class ContinuousViewManager extends DefaultViewManager {
 		}.bind(this));
 	}
 
-	updateFlow(flow){
+
-		var axis = (flow === "paginated") ? "horizontal" : "vertical";
+	updateAxis(axis){
+
+		if (!this.isPaginated) {
+			axis = "vertical";
+		}
 
 		this.settings.axis = axis;
 
@@ -527,25 +547,13 @@ class ContinuousViewManager extends DefaultViewManager {
 
 		this.viewSettings.axis = axis;
 
-		if (!this.settings.overflow) {
+		if (axis === "vertical") {
-			this.overflow = (flow === "paginated") ? "hidden" : "auto";
-		} else {
-			this.overflow = this.settings.overflow;
-		}
-
-		// this.views.forEach(function(view){
-		// 	view.setAxis(axis);
-		// });
-
-		if (this.settings.axis === "vertical") {
 			this.settings.infinite = true;
 		} else {
 			this.settings.infinite = false;
 		}
-
-		this.updateLayout();
-
 	}
+
 }
 
 export default ContinuousViewManager;

src/managers/default/index.js

@@ -19,9 +19,8 @@ class DefaultViewManager {
 			hidden: false,
 			width: undefined,
 			height: undefined,
-			// globalLayoutProperties : { layout: "reflowable", spread: "auto", orientation: "auto"},
-			// layout: null,
 			axis: "vertical",
+			flow: "scrolled",
 			ignoreClass: ""
 		});
 
@@ -30,6 +29,7 @@ class DefaultViewManager {
 		this.viewSettings = {
 			ignoreClass: this.settings.ignoreClass,
 			axis: this.settings.axis,
+			flow: this.settings.flow,
 			layout: this.layout,
 			method: this.settings.method, // srcdoc, blobUrl, write
 			width: 0,
@@ -303,7 +303,7 @@ class DefaultViewManager {
 		var distX = 0,
 			  distY = 0;
 
-		if(this.settings.axis === "vertical") {
+		if(!this.isPaginated) {
 			distY = offset.top;
 		} else {
 			distX = Math.floor(offset.left / this.layout.delta) * this.layout.delta;
@@ -324,6 +324,10 @@ class DefaultViewManager {
 		view.onDisplayed = this.afterDisplayed.bind(this);
 		view.onResize = this.afterResized.bind(this);
 
+		view.on("axis", (axis) => {
+			this.updateAxis(axis);
+		});
+
 		return view.display(this.request);
 
 	}
@@ -335,6 +339,10 @@ class DefaultViewManager {
 		view.onDisplayed = this.afterDisplayed.bind(this);
 		view.onResize = this.afterResized.bind(this);
 
+		view.on("axis", (axis) => {
+			this.updateAxis(axis);
+		});
+
 		return view.display(this.request);
 	}
 
@@ -350,6 +358,10 @@ class DefaultViewManager {
 		view.onDisplayed = this.afterDisplayed.bind(this);
 		view.onResize = this.afterResized.bind(this);
 
+		view.on("axis", (axis) => {
+			this.updateAxis(axis);
+		});
+
 		return view.display(this.request);
 	}
 
@@ -380,11 +392,11 @@ class DefaultViewManager {
 
 		if(!this.views.length) return;
 
-		if(this.settings.axis === "horizontal" && (!dir || dir === "ltr")) {
+		if(this.isPaginated && this.settings.axis === "horizontal" && (!dir || dir === "ltr")) {
 
 			this.scrollLeft = this.container.scrollLeft;
 
-			left = this.container.scrollLeft + this.container.offsetWidth + this.layout.delta; // 450 off
+			left = this.container.scrollLeft + this.container.offsetWidth + this.layout.delta;
 
 			if(left <= this.container.scrollWidth) {
 				this.scrollBy(this.layout.delta, 0, true);
@@ -393,7 +405,7 @@ class DefaultViewManager {
 			} else {
 				next = this.views.last().section.next();
 			}
-		} else if (this.settings.axis === "horizontal" && dir === "rtl") {
+		} else if (this.isPaginated && this.settings.axis === "horizontal" && dir === "rtl") {
 
 			this.scrollLeft = this.container.scrollLeft;
 
@@ -405,6 +417,20 @@ class DefaultViewManager {
 				next = this.views.last().section.next();
 			}
 
+		} else if (this.isPaginated && this.settings.axis === "vertical") {
+
+			this.scrollTop = this.container.scrollTop;
+
+			let top  = this.container.scrollTop + this.container.offsetHeight + this.layout.delta;
+
+			if(top <= this.container.scrollHeight) {
+				this.scrollBy(0, this.layout.height + this.layout.gap / 2, true);
+			} else if ((left - this.layout.pageWidth) === this.container.scrollWidth) {
+				this.scrollTo(this.container.scrollWidth - this.layout.delta, 0, true);
+			} else {
+				next = this.views.last().section.next();
+			}
+
 		} else {
 			next = this.views.last().section.next();
 		}
@@ -437,7 +463,7 @@ class DefaultViewManager {
 
 		if(!this.views.length) return;
 
-		if(this.settings.axis === "horizontal" && (!dir || dir === "ltr")) {
+		if(this.isPaginated && this.settings.axis === "horizontal" && (!dir || dir === "ltr")) {
 
 			this.scrollLeft = this.container.scrollLeft;
 
@@ -449,7 +475,7 @@ class DefaultViewManager {
 				prev = this.views.first().section.prev();
 			}
 
-		} else if (this.settings.axis === "horizontal" && dir === "rtl") {
+		} else if (this.isPaginated && this.settings.axis === "horizontal" && dir === "rtl") {
 
 			this.scrollLeft = this.container.scrollLeft;
 
@@ -463,6 +489,18 @@ class DefaultViewManager {
 				prev = this.views.first().section.prev();
 			}
 
+		} else if (this.isPaginated && this.settings.axis === "vertical") {
+
+			this.scrollTop = this.container.scrollTop;
+
+			let top = this.container.scrollTop;
+
+			if(top > 0) {
+				this.scrollBy(0, -(this.layout.height + this.layout.gap / 2), true);
+			} else {
+				prev = this.views.first().section.prev();
+			}
+
 		} else {
 
 			prev = this.views.first().section.prev();
@@ -483,7 +521,7 @@ class DefaultViewManager {
 					}
 				}.bind(this))
 				.then(function(){
-					if(this.settings.axis === "horizontal") {
+					if(this.isPaginated) {
 						if (this.settings.direction === "rtl") {
 							this.scrollTo(0, 0, true);
 						} else {
@@ -517,7 +555,7 @@ class DefaultViewManager {
 
 	currentLocation(){
 
-		if (this.settings.axis === "vertical") {
+		if (!this.isPaginated) {
 			this.location = this.scrolledLocation();
 		} else {
 			this.location = this.paginatedLocation();
@@ -774,7 +812,7 @@ class DefaultViewManager {
 
 		this._stageSize = this.stage.size();
 
-		if(this.settings.axis === "vertical") {
+		if(!this.isPaginated) {
 			this.layout.calculate(this._stageSize.width, this._stageSize.height);
 		} else {
 			this.layout.calculate(
@@ -813,17 +851,32 @@ class DefaultViewManager {
 
 	}
 
-	updateFlow(flow){
+	updateAxis(axis){
-		var axis = (flow === "paginated") ? "horizontal" : "vertical";
-
 		this.settings.axis = axis;
 
 		this.stage && this.stage.axis(axis);
 
 		this.viewSettings.axis = axis;
+	}
+
+	updateFlow(flow){
+		// var axis = (flow === "paginated") ? "horizontal" : "vertical";
+		let isPaginated = (flow === "paginated" || flow === "auto");
+
+		this.isPaginated = isPaginated;
+
+		if (isPaginated) {
+			// this.updateAxis("horizontal");
+		} else {
+			// this.updateAxis("vertical");
+		}
+
+		// this.stage && this.stage.axis(flow);
+
+		this.viewSettings.flow = flow;
 
 		if (!this.settings.overflow) {
-			this.overflow = (flow === "paginated") ? "hidden" : "auto";
+			this.overflow = isPaginated ? "hidden" : "auto";
 		} else {
 			this.overflow = this.settings.overflow;
 		}

src/managers/views/iframe.js

@@ -150,6 +150,13 @@ class IframeView {
 				// apply the layout function to the contents
 				this.settings.layout.format(this.contents);
 
+				// find and report the writingMode axis
+				let writingMode = this.contents.writingMode();
+				let axis = (writingMode.indexOf("vertical") === 0) ? "vertical" : "horizontal";
+				this.setAxis(axis);
+				this.emit("axis", axis);
+
+
 				// Listen for events that require an expansion of the iframe
 				this.addListeners();
 
@@ -195,6 +202,9 @@ class IframeView {
 		} else {
 			this.lock("width", width, height);
 		}
+
+		this.settings.width = width;
+		this.settings.height = height;
 	}
 
 	// Lock an axis to element dimensions, taking borders into account
@@ -405,6 +415,7 @@ class IframeView {
 
 	setAxis(axis) {
 		this.settings.axis = axis;
+		this.size();
 	}
 
 	addListeners() {

src/rendition.js

@@ -431,7 +431,7 @@ class Rendition {
 
 		if ((this.settings.width === 0 || this.settings.width > 0) &&
 				(this.settings.height === 0 || this.settings.height > 0)) {
-			viewport = "width="+this.settings.width+", height="+this.settings.height+"";
+			// viewport = "width="+this.settings.width+", height="+this.settings.height+"";
 		}
 
 		properties = {