yetangitu/epub.js
1
0
Fork 0
mirror of https://github.com/futurepress/epub.js.git synced 2025-10-03 14:59:18 +02:00
Code Issues Releases Wiki Activity

Major RTL fixes

Browse source
This commit is contained in:
Ali Dubaisi 2019-07-13 02:58:54 +03:00
parent be24ab8b39
commit e2c77d6f3a
5 changed files with 122 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/contents.js
View file

@ -995,7 +995,7 @@ class Contents {
* @param {number} columnWidth
* @param {number} gap
*/
columns(width, height, columnWidth, gap){
columns(width, height, columnWidth, gap, dir){
let COLUMN_AXIS = prefixed("column-axis");
let COLUMN_GAP = prefixed("column-gap");
let COLUMN_WIDTH = prefixed("column-width");
@ -1006,9 +1006,8 @@ class Contents {
this.layoutStyle("paginated");
// Fix body width issues if rtl is only set on body element
if (this.content.dir === "rtl") {
this.direction("rtl");
if (dir === "rtl") {
this.direction(dir);
}
this.width(width);

2
src/layout.js
View file

@ -195,7 +195,7 @@ class Layout {
if (this.name === "pre-paginated") {
formating = contents.fit(this.columnWidth, this.height);
} else if (this._flow === "paginated") {
formating = contents.columns(this.width, this.height, this.columnWidth, this.gap);
formating = contents.columns(this.width, this.height, this.columnWidth, this.gap, this.settings.direction);
} else { // scrolled
formating = contents.size(this.width, null);
}

26
src/managers/continuous/index.js
View file

@ -265,7 +265,20 @@ class ContinuousViewManager extends DefaultViewManager {
}
};
//Horizontal negative scrooling
if (horizontal && rtl && this.settings.rtlScrollType === "negative") {
if (offset - delta <= (-1 * contentLength)) {
append();
}
if (offset + delta > 0) {
prepend();
}
}
//default scrooling
else {
if (offset + visibleLength + delta >= contentLength) {
if (horizontal && rtl) {
prepend();
@ -274,13 +287,14 @@ class ContinuousViewManager extends DefaultViewManager {
}
}
if (offset - delta < 0 ) {
if (offset - delta < 0) {
if (horizontal && rtl) {
append();
} else {
prepend();
}
}
}
let promises = newViews.map((view) => {
return view.displayed;
@ -355,9 +369,19 @@ class ContinuousViewManager extends DefaultViewManager {
if(this.settings.axis === "vertical") {
this.scrollTo(0, prevTop - bounds.height, true);
} else {
if(this.settings.direction === 'rtl') {
if (this.settings.rtlScrollType === "default") {
this.scrollTo(prevLeft, 0, true);
}
else {
this.scrollTo(prevLeft + Math.floor(bounds.width), 0, true);
}
}
else {
this.scrollTo(prevLeft - Math.floor(bounds.width), 0, true);
}
}
}
}

56
src/managers/default/index.js
View file

@ -60,6 +60,29 @@ 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;
// Save the stage
this.stage = new Stage({
width: size.width,
@ -423,13 +446,25 @@ class DefaultViewManager {
this.scrollLeft = this.container.scrollLeft;
if (this.settings.rtlScrollType === "default"){
left = this.container.scrollLeft;
if(left > 0) {
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 if (this.isPaginated && this.settings.axis === "vertical") {
@ -493,13 +528,25 @@ class DefaultViewManager {
this.scrollLeft = this.container.scrollLeft;
if (this.settings.rtlScrollType === "default"){
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);
} 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") {
@ -537,7 +584,12 @@ class DefaultViewManager {
.then(function(){
if(this.isPaginated && this.settings.axis === "horizontal") {
if (this.settings.direction === "rtl") {
if (this.settings.rtlScrollType === "default"){
this.scrollTo(0, 0, true);
}
else{
this.scrollTo((this.container.scrollWidth * -1) + this.layout.delta, 0, true);
}
} else {
this.scrollTo(this.container.scrollWidth - this.layout.delta, 0, true);
}

16
src/packaging.js
View file

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