diff --git a/src/contents.js b/src/contents.js index 01ee61e..384030d 100644 --- a/src/contents.js +++ b/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") { - this.direction(dir); + if (dir === "rtl") { + this.direction(dir); } this.width(width); diff --git a/src/managers/default/index.js b/src/managers/default/index.js index fd145c5..edf3344 100644 --- a/src/managers/default/index.js +++ b/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({ @@ -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"){ - left = this.container.scrollLeft; + if (this.settings.rtlScrollType === "default"){ + left = this.container.scrollLeft; - if (left > 0) { - this.scrollBy(this.layout.delta, 0, true); - } else { - next = this.views.last().section.next(); - } + if (left > 0) { + this.scrollBy(this.layout.delta, 0, true); + } else { + next = this.views.last().section.next(); } - else{ - 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(); + } else { + 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(); } + } } 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"){ - left = this.container.scrollLeft + this.container.offsetWidth + this.layout.delta; + if (this.settings.rtlScrollType === "default"){ + left = this.container.scrollLeft + this.container.offsetWidth + this.layout.delta; - if (left <= this.container.scrollWidth) { - this.scrollBy(-this.layout.delta, 0, true); - } else { - prev = this.views.first().section.prev(); - } + if (left <= this.container.scrollWidth) { + this.scrollBy(-this.layout.delta, 0, true); + } else { + prev = this.views.first().section.prev(); } - else{ - left = this.container.scrollLeft; - - if (left < 0) { - this.scrollBy(-this.layout.delta, 0, true); - } else { - prev = this.views.first().section.prev(); - } + } + else{ + left = this.container.scrollLeft; + 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{ diff --git a/src/packaging.js b/src/packaging.js index 3b6970a..d5af2dc 100644 --- a/src/packaging.js +++ b/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, diff --git a/src/rendition.js b/src/rendition.js index 4a65779..70a7450 100644 --- a/src/rendition.js +++ b/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); diff --git a/src/utils/scrolltype.js b/src/utils/scrolltype.js new file mode 100644 index 0000000..7d2e47b --- /dev/null +++ b/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; +}