Add scrollType detection util, remove lang rtl guess

src/contents.js

@@ -449,7 +449,7 @@ class Contents {
 		var width, height;
 		// Test size again
 		clearTimeout(this.expanding);
-    requestAnimationFrame(this.resizeCheck.bind(this));
+		requestAnimationFrame(this.resizeCheck.bind(this));
 	}
 
 	/**
@@ -698,7 +698,7 @@ class Contents {
 		key = "epubjs-inserted-css-" + (key || '');
 
 		if(!this.document) return false;
-		
+
 		// Check if link already exists
 		styleEl = this.document.getElementById(key);
 		if (!styleEl) {
@@ -712,7 +712,7 @@ class Contents {
 
 	/**
 	 * Append stylesheet css
-	 * @param {string} serializedCss 
+	 * @param {string} serializedCss
 	 * @param {string} key If the key is the same, the CSS will be replaced instead of inserted
 	 */
 	addStylesheetCss(serializedCss, key) {
@@ -721,7 +721,7 @@ class Contents {
 		var styleEl;
 		styleEl = this._getStylesheetNode(key);
 		styleEl.innerHTML = serializedCss;
-		
+
 		return true;
 	}
 
@@ -1026,8 +1026,8 @@ class Contents {
 
 		this.layoutStyle("paginated");
 
-        if (dir === "rtl") {
+		if (dir === "rtl") {
-		    this.direction(dir);
+			this.direction(dir);
 		}
 
 		this.width(width);

src/managers/default/index.js

@@ -1,5 +1,6 @@
 import EventEmitter from "event-emitter";
 import {extend, defer, windowBounds, isNumber} from "../../utils/core";
+import scrollType from "../../utils/scrolltype";
 import Mapping from "../../mapping";
 import Queue from "../../utils/queue";
 import Stage from "../helpers/stage";
@@ -60,28 +61,7 @@ class DefaultViewManager {
 
 		this.settings.size = size;
 
-        //Detect RTL scroll type
+		this.settings.rtlScrollType = scrollType();
-        var definer = document.createElement('div');
-        definer.style.position = "absolute";
-        definer.style.width = "1px";
-        definer.style.height = "1px";
-        definer.style.overflow = "scroll";
-        definer.dir="rtl";
-        definer.appendChild(document.createTextNode('A'));
-
-        document.body.appendChild(definer);
-        var type = 'reverse';
-
-        if (definer.scrollLeft > 0) {
-            type = 'default';
-        } else {
-            definer.scrollLeft = 1;
-            if (definer.scrollLeft === 0) {
-                type = 'negative';
-            }
-        }
-        document.body.removeChild(definer);
-        this.settings.rtlScrollType = type;
 
 		// Save the stage
 		this.stage = new Stage({
@@ -352,7 +332,7 @@ class DefaultViewManager {
 
 	moveTo(offset){
 		var distX = 0,
-			  distY = 0;
+				distY = 0;
 
 		if(!this.isPaginated) {
 			distY = offset.top;
@@ -457,25 +437,23 @@ class DefaultViewManager {
 
 			this.scrollLeft = this.container.scrollLeft;
 
-            if (this.settings.rtlScrollType === "default"){
+			if (this.settings.rtlScrollType === "default"){
-					left = this.container.scrollLeft;
+				left = this.container.scrollLeft;
 
-					if (left > 0) {
+				if (left > 0) {
-						this.scrollBy(this.layout.delta, 0, true);
+					this.scrollBy(this.layout.delta, 0, true);
-					} else {
+				} else {
-						next = this.views.last().section.next();
+					next = this.views.last().section.next();
-					}
 				}
-				else{
+			} else {
-					left = this.container.scrollLeft + ( this.layout.delta * -1 );
+				left = this.container.scrollLeft + ( this.layout.delta * -1 );
-					if (left > this.container.scrollWidth * -1){
-						this.scrollBy(this.layout.delta, 0, true);
-					}
-					else{
-						next = this.views.last().section.next();
 
-					}
+				if (left > this.container.scrollWidth * -1){
+					this.scrollBy(this.layout.delta, 0, true);
+				} else {
+					next = this.views.last().section.next();
 				}
+			}
 
 		} else if (this.isPaginated && this.settings.axis === "vertical") {
 
@@ -519,7 +497,7 @@ class DefaultViewManager {
 		var prev;
 		var left;
 		let dir = this.settings.direction;
-
+		console.log(dir);
 		if(!this.views.length) return;
 
 		if(this.isPaginated && this.settings.axis === "horizontal" && (!dir || dir === "ltr")) {
@@ -538,25 +516,24 @@ class DefaultViewManager {
 
 			this.scrollLeft = this.container.scrollLeft;
 
-            if (this.settings.rtlScrollType === "default"){
+			if (this.settings.rtlScrollType === "default"){
-					left = this.container.scrollLeft + this.container.offsetWidth + this.layout.delta;
+				left = this.container.scrollLeft + this.container.offsetWidth + this.layout.delta;
 
-					if (left <= this.container.scrollWidth) {
+				if (left <= this.container.scrollWidth) {
-						this.scrollBy(-this.layout.delta, 0, true);
+					this.scrollBy(-this.layout.delta, 0, true);
-					} else {
+				} else {
-						prev = this.views.first().section.prev();
+					prev = this.views.first().section.prev();
-					}
 				}
-				else{
+			}
-					left = this.container.scrollLeft;
+			else{
-
+				left = this.container.scrollLeft;
-					if (left < 0) {
-						this.scrollBy(-this.layout.delta, 0, true);
-					} else {
-						prev = this.views.first().section.prev();
-					}
 
+				if (left < 0) {
+					this.scrollBy(-this.layout.delta, 0, true);
+				} else {
+					prev = this.views.first().section.prev();
 				}
+			}
 
 		} else if (this.isPaginated && this.settings.axis === "vertical") {
 
@@ -588,7 +565,7 @@ class DefaultViewManager {
 				.then(function(){
 					var left;
 					if (this.layout.name === "pre-paginated" && this.layout.divisor > 1) {
-						left = prev.prev();	
+						left = prev.prev();
 						if (left) {
 							return this.prepend(left);
 						}
@@ -599,7 +576,7 @@ class DefaultViewManager {
 				.then(function(){
 					if(this.isPaginated && this.settings.axis === "horizontal") {
 						if (this.settings.direction === "rtl") {
-                            if (this.settings.rtlScrollType === "default"){
+							if (this.settings.rtlScrollType === "default"){
 								this.scrollTo(0, 0, true);
 							}
 							else{

src/packaging.js

@@ -59,22 +59,7 @@ class Packaging {
 		this.uniqueIdentifier = this.findUniqueIdentifier(packageDocument);
 		this.metadata = this.parseMetadata(metadataNode);
 
-        // Detect book direction - default ltr
+		this.metadata.direction = spineNode.getAttribute("page-progression-direction");
-        //RTL detection
-        //1. spineNode attributes page-progression-direction
-        //2. Language metadata field check against rtl languages
-        this.metadata.direction = ( function() {
-    		var defaultDirection = "ltr";
-    		var rtlLanguages =
-    		["ar", "arc", "dv", "fa", "ha", "he", "khw", "ku", "ps", "ur", "yi"];
-
-    		var isRTLLanguage = rtlLanguages.indexOf(this.metadata.language.toLowerCase()) > -1;
-
-    		return  spineNode.getAttribute("page-progression-direction") ||
-    				isRTLLanguage ? "rtl" : ""							 ||
-    				defaultDirection;
-			}.bind(this))();
-
 
 		return {
 			"metadata" : this.metadata,

src/rendition.js

@@ -53,7 +53,8 @@ class Rendition {
 			stylesheet: null,
 			resizeOnOrientationChange: true,
 			script: null,
-			snap: false
+			snap: false,
+			defaultDirection: "ltr"
 		});
 
 		extend(this.settings, options);
@@ -227,7 +228,7 @@ class Rendition {
 			});
 		}
 
-		this.direction(this.book.package.metadata.direction);
+		this.direction(this.book.package.metadata.direction || this.settings.defaultDirection);
 
 		// Parse metadata to get layout props
 		this.settings.globalLayoutProperties = this.determineLayoutProperties(this.book.package.metadata);

src/utils/scrolltype.js

@@ -0,0 +1,55 @@
+// Detect RTL scroll type
+// Based on https://github.com/othree/jquery.rtl-scroll-type/blob/master/src/jquery.rtl-scroll.js
+export default function scrollType() {
+	var type = "reverse";
+	var definer = createDefiner();
+	document.body.appendChild(definer);
+
+	if (definer.scrollLeft > 0) {
+		type = "default";
+	} else {
+		if (typeof Element !== 'undefined' && Element.prototype.scrollIntoView) {
+			definer.children[0].children[1].scrollIntoView();
+			if (definer.scrollLeft < 0) {
+				type = "negative";
+			}
+		} else {
+			definer.scrollLeft = 1;
+			if (definer.scrollLeft === 0) {
+				type = "negative";
+			}
+		}
+	}
+
+	document.body.removeChild(definer);
+	return type;
+}
+
+export function createDefiner() {
+	var definer = document.createElement('div');
+	definer.dir="rtl";
+
+	definer.style.position = "fixed";
+	definer.style.width = "1px";
+	definer.style.height = "1px";
+	definer.style.top = "0px";
+	definer.style.left = "0px";
+	definer.style.overflow = "hidden";
+
+	var innerDiv = document.createElement('div');
+	innerDiv.style.width = "2px";
+
+	var spanA = document.createElement('span');
+	spanA.style.width = "1px";
+	spanA.style.display = "inline-block";
+
+	var spanB = document.createElement('span');
+	spanB.style.width = "1px";
+	spanB.style.display = "inline-block";
+
+	innerDiv.appendChild(spanA);
+	innerDiv.appendChild(spanB);
+	definer.appendChild(innerDiv);
+
+	return definer;
+}