Take axis and writingModes into account when calculating when to add new views

Remove debugging logs

remove trim log

src/managers/continuous/index.js

@@ -14,6 +14,7 @@ class ContinuousViewManager extends DefaultViewManager {
 			infinite: true,
 			overflow: undefined,
 			axis: undefined,
+			writingMode: undefined,
 			flow: "scrolled",
 			offset: 500,
 			offsetDelta: 250,
@@ -115,6 +116,10 @@ class ContinuousViewManager extends DefaultViewManager {
 			this.updateAxis(axis);
 		});
 
+		view.on(EVENTS.VIEWS.WRITING_MODE, (mode) => {
+			this.updateWritingMode(mode);
+		});
+
 		// view.on(EVENTS.VIEWS.SHOWN, this.afterDisplayed.bind(this));
 		view.onDisplayed = this.afterDisplayed.bind(this);
 		view.onResize = this.afterResized.bind(this);
@@ -133,6 +138,10 @@ class ContinuousViewManager extends DefaultViewManager {
 			this.updateAxis(axis);
 		});
 
+		view.on(EVENTS.VIEWS.WRITING_MODE, (mode) => {
+			this.updateWritingMode(mode);
+		});
+
 		this.views.append(view);
 
 		view.onDisplayed = this.afterDisplayed.bind(this);
@@ -152,6 +161,10 @@ class ContinuousViewManager extends DefaultViewManager {
 			this.updateAxis(axis);
 		});
 
+		view.on(EVENTS.VIEWS.WRITING_MODE, (mode) => {
+			this.updateWritingMode(mode);
+		});
+
 		this.views.prepend(view);
 
 		view.onDisplayed = this.afterDisplayed.bind(this);
@@ -163,10 +176,8 @@ class ContinuousViewManager extends DefaultViewManager {
 		if(this.settings.axis === "vertical") {
 			this.scrollBy(0, bounds.heightDelta, true);
 		} else {
-			console.log("counter", bounds.widthDelta)
 			this.scrollBy(bounds.widthDelta, 0, true);
 		}
-
 	}
 
 	update(_offset){
@@ -186,7 +197,7 @@ class ContinuousViewManager extends DefaultViewManager {
 			isVisible = this.isVisible(view, offset, offset, container);
 
 			if(isVisible === true) {
-				// console.log("visible " + view.index);
+				// console.log("visible " + view.index, view.displayed);
 
 				if (!view.displayed) {
 					let displayed = view.display(this.request)
@@ -202,7 +213,7 @@ class ContinuousViewManager extends DefaultViewManager {
 				visible.push(view);
 			} else {
 				this.q.enqueue(view.destroy.bind(view));
-				// console.log("hidden " + view.index);
+				// console.log("hidden " + view.index, view.displayed);
 
 				clearTimeout(this.trimTimeout);
 				this.trimTimeout = setTimeout(function(){
@@ -241,12 +252,29 @@ class ContinuousViewManager extends DefaultViewManager {
 
 		var bounds = this._bounds; // bounds saved this until resize
 
+		let offset = horizontal ? this.scrollLeft : this.scrollTop;
+		let visibleLength = horizontal ? Math.floor(bounds.width) : bounds.height;
+		let contentLength = horizontal ? this.container.scrollWidth : this.container.scrollHeight;
+		let writingMode = (this.writingMode && this.writingMode.indexOf("vertical") === 0) ? "vertical" : "horizontal";
+		let rtlScrollType = this.settings.rtlScrollType;
 		let rtl = this.settings.direction === "rtl";
-		let dir = horizontal && rtl ? -1 : 1; //RTL reverses scrollTop
 
-		var offset = horizontal ? this.scrollLeft : this.scrollTop * dir;
+		if (!this.settings.fullsize) {
-		var visibleLength = horizontal ? Math.floor(bounds.width) : bounds.height;
+			// Scroll offset starts at width of element
-		var contentLength = horizontal ? this.container.scrollWidth : this.container.scrollHeight;
+			if (rtl && rtlScrollType === "default" && writingMode === "horizontal") {
+				offset = contentLength - visibleLength - offset;
+			}
+			// Scroll offset starts at 0 and goes negative
+			if (rtl && rtlScrollType === "negative" && writingMode === "horizontal") {
+				offset = offset * -1;
+			}
+		} else {
+			// Scroll offset starts at 0 and goes negative
+			if ((horizontal && rtl && rtlScrollType === "negative") ||
+				(!horizontal && rtl && rtlScrollType === "default")) {
+				offset = offset * -1;
+			}
+		}
 
 		let prepend = () => {
 			let first = this.views.first();
@@ -266,36 +294,18 @@ class ContinuousViewManager extends DefaultViewManager {
 			}
 
 		};
-		//Horizontal negative scrolling
-		if (horizontal  && rtl && this.settings.rtlScrollType === "negative") {
 
-			if (offset - delta <= (-1 * contentLength)) {
+		let end = offset + visibleLength + delta;
+		let start = offset - delta;
+
+		if (end >= contentLength) {
 			append();
 		}
 		
-			if (offset  + delta > 0) {
+		if (start < 0) {
 			prepend();
 		}
 		
-		}
-		//default scrolling
-		else {
-			if (offset + visibleLength + delta >= contentLength) {
-				if (horizontal && rtl) {
-					prepend();
-				} else {
-					append();
-				}
-			}
-
-			if (offset - delta < 0) {
-				if (horizontal && rtl) {
-					append();
-				} else {
-					prepend();
-				}
-			}
-		}
 
 		let promises = newViews.map((view) => {
 			return view.display(this.request);
@@ -365,16 +375,13 @@ class ContinuousViewManager extends DefaultViewManager {
 		this.views.remove(view);
 		
 		if(above) {
-			if(this.settings.axis === "vertical") {
+			if (this.settings.axis === "vertical") {
 				this.scrollTo(0, prevTop - bounds.height, true);
 			} else {
 				if(this.settings.direction === 'rtl') {
-					if (this.settings.rtlScrollType === "default") {
+					if (!this.settings.fullsize) {
-						console.log("erase 1", window.scrollX, prevLeft, bounds.width);
 						this.scrollTo(prevLeft, 0, true);					
-					}
+					} else {
-					else {
-						console.log("erase 2", prevLeft + Math.floor(bounds.width));
 						this.scrollTo(prevLeft + Math.floor(bounds.width), 0, true);
 					}
 				} else {
@@ -405,13 +412,7 @@ class ContinuousViewManager extends DefaultViewManager {
 
 		this.tick = requestAnimationFrame;
 
-		if(!this.settings.fullsize) {
+		let dir = this.settings.direction === "rtl" && this.settings.rtlScrollType === "default" ? -1 : 1;
-			this.prevScrollTop = this.container.scrollTop;
-			this.prevScrollLeft = this.container.scrollLeft;
-		} else {
-			this.prevScrollTop = window.scrollY;
-			this.prevScrollLeft = window.scrollX;
-		}
 
 		this.scrollDeltaVert = 0;
 		this.scrollDeltaHorz = 0;
@@ -422,8 +423,8 @@ class ContinuousViewManager extends DefaultViewManager {
 			this.scrollLeft = this.container.scrollLeft;
 		} else {
 			scroller = window;
-			this.scrollTop = window.scrollY;
+			this.scrollTop = window.scrollY * dir;
-			this.scrollLeft = window.scrollX;
+			this.scrollLeft = window.scrollX * dir;
 		}
 
 		this._onScroll = this.onScroll.bind(this);
@@ -451,7 +452,7 @@ class ContinuousViewManager extends DefaultViewManager {
 	onScroll(){
 		let scrollTop;
 		let scrollLeft;
-		let dir = this.settings.direction === "rtl" ? -1 : 1;
+		let dir = this.settings.direction === "rtl" && this.settings.rtlScrollType === "default" ? -1 : 1;
 
 		if(!this.settings.fullsize) {
 			scrollTop = this.container.scrollTop;
@@ -493,7 +494,7 @@ class ContinuousViewManager extends DefaultViewManager {
 	scrolled() {
 
 		this.q.enqueue(function() {
-			this.check();
+			return this.check();
 		}.bind(this));
 
 		this.emit(EVENTS.MANAGERS.SCROLL, {
@@ -519,7 +520,6 @@ class ContinuousViewManager extends DefaultViewManager {
 
 	next(){
 
-		let dir = this.settings.direction;
 		let delta = this.layout.props.name === "pre-paginated" &&
 								this.layout.props.spread ? this.layout.props.delta * 2 : this.layout.props.delta;
 
@@ -536,13 +536,12 @@ class ContinuousViewManager extends DefaultViewManager {
 		}
 
 		this.q.enqueue(function() {
-			this.check();
+			return this.check();
 		}.bind(this));
 	}
 
 	prev(){
 
-		let dir = this.settings.direction;
 		let delta = this.layout.props.name === "pre-paginated" &&
 								this.layout.props.spread ? this.layout.props.delta * 2 : this.layout.props.delta;
 
@@ -559,21 +558,10 @@ class ContinuousViewManager extends DefaultViewManager {
 		}
 
 		this.q.enqueue(function() {
-			this.check();
+			return this.check();
 		}.bind(this));
 	}
 
-	// updateAxis(axis, forceUpdate){
-	//
-	// 	super.updateAxis(axis, forceUpdate);
-	//
-	// 	if (axis === "vertical") {
-	// 		this.settings.infinite = true;
-	// 	} else {
-	// 		this.settings.infinite = false;
-	// 	}
-	// }
-
 	updateFlow(flow){
 		if (this.rendered && this.snapper) {
 			this.snapper.destroy();

src/managers/default/index.js

@@ -23,6 +23,7 @@ class DefaultViewManager {
 			width: undefined,
 			height: undefined,
 			axis: undefined,
+			writingMode: undefined,
 			flow: "scrolled",
 			ignoreClass: "",
 			fullsize: undefined
@@ -359,6 +360,10 @@ class DefaultViewManager {
 			this.updateAxis(axis);
 		});
 
+		view.on(EVENTS.VIEWS.WRITING_MODE, (mode) => {
+			this.updateWritingMode(mode);
+		});
+
 		return view.display(this.request);
 	}
 
@@ -373,6 +378,10 @@ class DefaultViewManager {
 			this.updateAxis(axis);
 		});
 
+		view.on(EVENTS.VIEWS.WRITING_MODE, (mode) => {
+			this.updateWritingMode(mode);
+		});
+
 		return view.display(this.request);
 	}
 
@@ -392,6 +401,10 @@ class DefaultViewManager {
 			this.updateAxis(axis);
 		});
 
+		view.on(EVENTS.VIEWS.WRITING_MODE, (mode) => {
+			this.updateWritingMode(mode);
+		});
+
 		return view.display(this.request);
 	}
 
@@ -916,7 +929,7 @@ class DefaultViewManager {
 			);
 
 			// Set the look ahead offset for what is visible
-			this.settings.offset = this.layout.delta;
+			this.settings.offset = this.layout.delta / this.layout.divisor;
 
 			// this.stage.addStyleRules("iframe", [{"margin-right" : this.layout.gap + "px"}]);
 
@@ -947,12 +960,12 @@ class DefaultViewManager {
 
 	}
 
-	updateAxis(axis, forceUpdate){
+	updateWritingMode(mode) {
-
+		this.writingMode = mode;
-		if (!this.isPaginated) {
-			// axis = "vertical";
 	}
 
+	updateAxis(axis, forceUpdate){
+
 		if (!forceUpdate && axis === this.settings.axis) {
 			return;
 		}

src/managers/views/iframe.js

@@ -159,10 +159,16 @@ class IframeView {
 					axis = (writingMode.indexOf("vertical") === 0) ? "vertical" : "horizontal";
 				}
 
-				// this.element.style.writingMode = writingMode;
+				if (writingMode.indexOf("vertical") === 0 && this.settings.flow === "paginated") {
+					this.layout.delta = this.layout.height;
+				}
+
 				this.setAxis(axis);
 				this.emit(EVENTS.VIEWS.AXIS, axis);
 
+				this.setWritingMode(writingMode);
+				this.emit(EVENTS.VIEWS.WRITING_MODE, writingMode);
+
 
 				// apply the layout function to the contents
 				this.layout.format(this.contents, this.section, this.axis);
@@ -477,6 +483,11 @@ class IframeView {
 
 	}
 
+	setWritingMode(mode) {
+		// this.element.style.writingMode = writingMode;
+		this.writingMode = mode;
+	}
+
 	addListeners() {
 		//TODO: Add content listeners for expanding
 	}

src/utils/constants.js

@@ -27,7 +27,8 @@ export const EVENTS = {
     REMOVED : "removed",
   },
   VIEWS : {
-    AXIS : "axis",
+    AXIS: "axis",
+    WRITING_MODE: "writingMode",
     LOAD_ERROR : "loaderror",
     RENDERED : "rendered",
     RESIZED : "resized",