Add scrollType detection util, remove lang rtl guess

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
-        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;
+		this.settings.rtlScrollType = scrollType();
 
 		// Save the stage
 		this.stage = new Stage({
@@ -465,15 +445,13 @@ class DefaultViewManager {
 				} else {
 					next = this.views.last().section.next();
 				}
-				}
-				else{
+			} else {
 				left = this.container.scrollLeft + ( this.layout.delta * -1 );
+
 				if (left > this.container.scrollWidth * -1){
 					this.scrollBy(this.layout.delta, 0, true);
-					}
-					else{
+				} else {
 					next = this.views.last().section.next();
-
 				}
 			}
 
@@ -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")) {
@@ -555,7 +533,6 @@ class DefaultViewManager {
 				} else {
 					prev = this.views.first().section.prev();
 				}
-
 			}
 
 		} else if (this.isPaginated && this.settings.axis === "vertical") {

src/packaging.js

@@ -59,22 +59,7 @@ class Packaging {
 		this.uniqueIdentifier = this.findUniqueIdentifier(packageDocument);
 		this.metadata = this.parseMetadata(metadataNode);
 
-        // Detect book direction - default ltr
-        //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))();
-
+		this.metadata.direction = spineNode.getAttribute("page-progression-direction");
 
 		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;
+}