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

default manager currentLocation maps all visible views, fix multiple reporting

Browse source
This commit is contained in:
Fred Chasen 2017-03-10 14:05:20 -05:00
parent 72df566118
commit 9cd28e1144
4 changed files with 86 additions and 155 deletions
Download patch file Download diff file Expand all files Collapse all files

2
examples/spreads.html
View file

@ -20,7 +20,7 @@
<script> <script>
var currentSectionIndex = 8; var currentSectionIndex = 8;
// Load the opf // Load the opf
var book = ePub("http://localhost:8080/books/moby-dick.epub"); var book = ePub("https://s3.amazonaws.com/moby-dick/moby-dick.epub");
var rendition = book.renderTo("viewer", { var rendition = book.renderTo("viewer", {
width: "100%", width: "100%",
height: 600 height: 600

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

@ -78,7 +78,7 @@ class ContinuousViewManager extends DefaultViewManager {
return this.check(offsetX, offsetY) return this.check(offsetX, offsetY)
.then(function(){ .then(function(){
this.scrollBy(distX, distY); this.scrollBy(distX, distY, true);
}.bind(this)); }.bind(this));
} }
@ -195,7 +195,7 @@ class ContinuousViewManager extends DefaultViewManager {
this.views.prepend(view); this.views.prepend(view);
view.onDisplayed = this.afterDisplayed.bind(this); view.onDisplayed = this.afterDisplayed.bind(this);
return view; return view;
} }
@ -479,131 +479,6 @@ class ContinuousViewManager extends DefaultViewManager {
} }
// resizeView(view) {
//
// if(this.settings.axis === "horizontal") {
// view.lock("height", this.stage.width, this.stage.height);
// } else {
// view.lock("width", this.stage.width, this.stage.height);
// }
//
// };
currentLocation(){
if (this.settings.axis === "vertical") {
this.location = this.scrolledLocation();
} else {
this.location = this.paginatedLocation();
}
return this.location;
}
scrolledLocation(){
var visible = this.visible();
var startPage, endPage;
// var container = this.container.getBoundingClientRect();
if(visible.length === 1) {
return this.mapping.page(visible[0].contents, visible[0].section.cfiBase);
}
if(visible.length > 1) {
startPage = this.mapping.page(visible[0].contents, visible[0].section.cfiBase);
endPage = this.mapping.page(visible[visible.length-1].contents, visible[visible.length-1].section.cfiBase);
return {
start: startPage.start,
end: endPage.end
};
}
}
paginatedLocation(){
var visible = this.visible();
var startA, startB, endA, endB;
var pageLeft, pageRight;
var container = this.container.getBoundingClientRect();
if(visible.length === 1) {
startA = container.left - visible[0].position().left;
endA = startA + this.layout.spreadWidth;
return this.mapping.page(visible[0].contents, visible[0].section.cfiBase, startA, endA);
}
if(visible.length > 1) {
// Left Col
startA = container.left - visible[0].position().left;
endA = startA + this.layout.columnWidth;
// Right Col
startB = container.left + this.layout.spreadWidth - visible[visible.length-1].position().left;
endB = startB + this.layout.columnWidth;
pageLeft = this.mapping.page(visible[0].contents, visible[0].section.cfiBase, startA, endA);
pageRight = this.mapping.page(visible[visible.length-1].contents, visible[visible.length-1].section.cfiBase, startB, endB);
return {
start: pageLeft.start,
end: pageRight.end
};
}
}
/*
current(what){
var view, top;
var container = this.container.getBoundingClientRect();
var length = this.views.length - 1;
if(this.settings.axis === "horizontal") {
for (var i = length; i >= 0; i--) {
view = this.views[i];
left = view.position().left;
if(left < container.right) {
if(this._current == view) {
break;
}
this._current = view;
break;
}
}
} else {
for (var i = length; i >= 0; i--) {
view = this.views[i];
top = view.bounds().top;
if(top < container.bottom) {
if(this._current == view) {
break;
}
this._current = view;
break;
}
}
}
return this._current;
}
*/
updateLayout() { updateLayout() {
if (!this.stage) { if (!this.stage) {
@ -643,22 +518,30 @@ class ContinuousViewManager extends DefaultViewManager {
if(this.container.scrollLeft + if(this.container.scrollLeft +
this.container.offsetWidth + this.container.offsetWidth +
this.layout.delta < this.container.scrollWidth) { this.layout.delta < this.container.scrollWidth) {
this.scrollBy(this.layout.delta, 0); this.scrollBy(this.layout.delta, 0, true);
} else { } else {
this.scrollTo(this.container.scrollWidth - this.layout.delta, 0); this.scrollTo(this.container.scrollWidth - this.layout.delta, 0, true);
} }
} else { } else {
this.scrollBy(0, this.layout.height); this.scrollBy(0, this.layout.height, true);
} }
this.q.enqueue(function() {
this.check();
}.bind(this));
} }
prev(){ prev(){
if(this.settings.axis === "horizontal") { if(this.settings.axis === "horizontal") {
this.scrollBy(-this.layout.delta, 0); this.scrollBy(-this.layout.delta, 0, true);
} else { } else {
this.scrollBy(0, -this.layout.height); this.scrollBy(0, -this.layout.height, true);
} }
this.q.enqueue(function() {
this.check();
}.bind(this));
} }
updateFlow(flow){ updateFlow(flow){

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

@ -380,26 +380,79 @@ class DefaultViewManager {
} }
scrolledLocation(){ scrolledLocation(){
var view;
if(this.views.length) { var visible = this.visible();
view = this.views.first(); var startPage, endPage;
return this.mapping.page(view, view.section.cfiBase); var last;
// var container = this.container.getBoundingClientRect();
if(visible.length === 1) {
startPage = this.mapping.page(visible[0].contents, visible[0].section.cfiBase);
return {
index : visible[0].section.index,
href : visible[0].section.href,
start: startPage.start,
end: startPage.end
};
}
if(visible.length > 1) {
last = visible.length - 1;
startPage = this.mapping.page(visible[0].contents, visible[0].section.cfiBase);
endPage = this.mapping.page(visible[last].contents, visible[last].section.cfiBase);
return {
index : visible[last].section.index,
href : visible[last].section.href,
start: startPage.start,
end: endPage.end
};
} }
} }
paginatedLocation(){ paginatedLocation(){
var view; var visible = this.visible();
var start, end; var startA, startB, endA, endB;
var pageLeft, pageRight;
var container = this.container.getBoundingClientRect();
var last;
if(this.views.length) { if(visible.length === 1) {
view = this.views.first(); startA = container.left - visible[0].position().left;
start = this._bounds.left - view.position().left; endA = startA + this.layout.spreadWidth;
end = start + this.layout.spreadWidth;
return this.mapping.page(view, view.section.cfiBase, start, end); pageLeft = this.mapping.page(visible[0].contents, visible[0].section.cfiBase, startA, endA)
return {
index : visible[0].section.index,
href : visible[0].section.href,
start: pageLeft.start,
end: pageLeft.end
};
} }
if(visible.length > 1) {
last = visible.length - 1;
// Left Col
startA = container.left - visible[0].position().left;
endA = startA + this.layout.columnWidth;
// Right Col
startB = container.left + this.layout.spreadWidth - visible[visible.length-1].position().left;
endB = startB + this.layout.columnWidth;
pageLeft = this.mapping.page(visible[0].contents, visible[0].section.cfiBase, startA, endA);
pageRight = this.mapping.page(visible[last].contents, visible[last].section.cfiBase, startB, endB);
return {
index : visible[last].section.index,
href : visible[last].section.href,
start: pageLeft.start,
end: pageRight.end
};
}
} }
isVisible(view, offsetPrev, offsetNext, _container){ isVisible(view, offsetPrev, offsetNext, _container){
@ -424,7 +477,6 @@ class DefaultViewManager {
} }
visible(){ visible(){
// return this.views.displayed();
var container = this.bounds(); var container = this.bounds();
var views = this.views.displayed(); var views = this.views.displayed();
var viewsLength = views.length; var viewsLength = views.length;
@ -457,9 +509,7 @@ class DefaultViewManager {
} else { } else {
window.scrollBy(x,y); window.scrollBy(x,y);
} }
// console.log("scrollBy", x, y);
this.scrolled = true; this.scrolled = true;
this.onScroll();
} }
scrollTo(x, y, silent){ scrollTo(x, y, silent){
@ -473,9 +523,8 @@ class DefaultViewManager {
} else { } else {
window.scrollTo(x,y); window.scrollTo(x,y);
} }
// console.log("scrollTo", x, y);
this.scrolled = true; this.scrolled = true;
this.onScroll();
// if(this.container.scrollLeft != x){ // if(this.container.scrollLeft != x){
// setTimeout(function() { // setTimeout(function() {
// this.scrollTo(x, y, silent); // this.scrollTo(x, y, silent);

11
src/rendition.js
View file

@ -177,9 +177,7 @@ class Rendition {
// Listen for scroll changes // Listen for scroll changes
this.manager.on("scroll", this.reportLocation.bind(this)); this.manager.on("scroll", this.reportLocation.bind(this));
this.manager.on("scroll", () => console.log("scrolled"));
this.on("displayed", this.reportLocation.bind(this));
// Trigger that rendering has started // Trigger that rendering has started
this.emit("started"); this.emit("started");
@ -255,7 +253,8 @@ class Rendition {
return this.manager.display(section, target) return this.manager.display(section, target)
.then(function(){ .then(function(){
// this.emit("displayed", section); this.emit("displayed", section);
this.reportLocation();
}.bind(this)); }.bind(this));
} }
@ -313,7 +312,7 @@ class Rendition {
afterDisplayed(view){ afterDisplayed(view){
this.hooks.content.trigger(view.contents, this); this.hooks.content.trigger(view.contents, this);
this.emit("rendered", view.section); this.emit("rendered", view.section);
this.reportLocation(); // this.reportLocation();
} }
/** /**
@ -585,7 +584,7 @@ class Rendition {
*/ */
range(cfi, ignoreClass){ range(cfi, ignoreClass){
var _cfi = new EpubCFI(cfi); var _cfi = new EpubCFI(cfi);
var found = this.visible().filter(function (view) { var found = this.manager.visible().filter(function (view) {
if(_cfi.spinePos === view.index) return true; if(_cfi.spinePos === view.index) return true;
}); });