mirror of
https://github.com/futurepress/epub.js.git
synced 2025-10-04 15:09:16 +02:00
default manager currentLocation maps all visible views, fix multiple reporting
This commit is contained in:
Fred Chasen
parent
72df566118
commit
9cd28e1144
4 changed files with 86 additions and 155 deletions
|
|
@ -20,7 +20,7 @@
|
|||
<script>
|
||||
var currentSectionIndex = 8;
|
||||
// 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", {
|
||||
width: "100%",
|
||||
height: 600
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@ class ContinuousViewManager extends DefaultViewManager {
|
|||
|
||||
return this.check(offsetX, offsetY)
|
||||
.then(function(){
|
||||
this.scrollBy(distX, distY);
|
||||
this.scrollBy(distX, distY, true);
|
||||
}.bind(this));
|
||||
}
|
||||
|
||||
|
|
@ -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() {
|
||||
|
||||
if (!this.stage) {
|
||||
|
|
@ -643,22 +518,30 @@ class ContinuousViewManager extends DefaultViewManager {
|
|||
if(this.container.scrollLeft +
|
||||
this.container.offsetWidth +
|
||||
this.layout.delta < this.container.scrollWidth) {
|
||||
this.scrollBy(this.layout.delta, 0);
|
||||
this.scrollBy(this.layout.delta, 0, true);
|
||||
} else {
|
||||
this.scrollTo(this.container.scrollWidth - this.layout.delta, 0);
|
||||
this.scrollTo(this.container.scrollWidth - this.layout.delta, 0, true);
|
||||
}
|
||||
|
||||
} else {
|
||||
this.scrollBy(0, this.layout.height);
|
||||
this.scrollBy(0, this.layout.height, true);
|
||||
}
|
||||
|
||||
this.q.enqueue(function() {
|
||||
this.check();
|
||||
}.bind(this));
|
||||
}
|
||||
|
||||
prev(){
|
||||
if(this.settings.axis === "horizontal") {
|
||||
this.scrollBy(-this.layout.delta, 0);
|
||||
this.scrollBy(-this.layout.delta, 0, true);
|
||||
} else {
|
||||
this.scrollBy(0, -this.layout.height);
|
||||
this.scrollBy(0, -this.layout.height, true);
|
||||
}
|
||||
|
||||
this.q.enqueue(function() {
|
||||
this.check();
|
||||
}.bind(this));
|
||||
}
|
||||
|
||||
updateFlow(flow){
|
||||
|
|
|
|||
|
|
@ -380,26 +380,79 @@ class DefaultViewManager {
|
|||
}
|
||||
|
||||
scrolledLocation(){
|
||||
var view;
|
||||
|
||||
if(this.views.length) {
|
||||
view = this.views.first();
|
||||
return this.mapping.page(view, view.section.cfiBase);
|
||||
var visible = this.visible();
|
||||
var startPage, endPage;
|
||||
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(){
|
||||
var view;
|
||||
var start, end;
|
||||
var visible = this.visible();
|
||||
var startA, startB, endA, endB;
|
||||
var pageLeft, pageRight;
|
||||
var container = this.container.getBoundingClientRect();
|
||||
var last;
|
||||
|
||||
if(this.views.length) {
|
||||
view = this.views.first();
|
||||
start = this._bounds.left - view.position().left;
|
||||
end = start + this.layout.spreadWidth;
|
||||
return this.mapping.page(view, view.section.cfiBase, start, end);
|
||||
if(visible.length === 1) {
|
||||
startA = container.left - visible[0].position().left;
|
||||
endA = startA + this.layout.spreadWidth;
|
||||
|
||||
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){
|
||||
|
|
@ -424,7 +477,6 @@ class DefaultViewManager {
|
|||
}
|
||||
|
||||
visible(){
|
||||
// return this.views.displayed();
|
||||
var container = this.bounds();
|
||||
var views = this.views.displayed();
|
||||
var viewsLength = views.length;
|
||||
|
|
@ -457,9 +509,7 @@ class DefaultViewManager {
|
|||
} else {
|
||||
window.scrollBy(x,y);
|
||||
}
|
||||
// console.log("scrollBy", x, y);
|
||||
this.scrolled = true;
|
||||
this.onScroll();
|
||||
}
|
||||
|
||||
scrollTo(x, y, silent){
|
||||
|
|
@ -473,9 +523,8 @@ class DefaultViewManager {
|
|||
} else {
|
||||
window.scrollTo(x,y);
|
||||
}
|
||||
// console.log("scrollTo", x, y);
|
||||
this.scrolled = true;
|
||||
this.onScroll();
|
||||
|
||||
// if(this.container.scrollLeft != x){
|
||||
// setTimeout(function() {
|
||||
// this.scrollTo(x, y, silent);
|
||||
|
|
|
|||
|
|
@ -177,9 +177,7 @@ class Rendition {
|
|||
|
||||
// Listen for scroll changes
|
||||
this.manager.on("scroll", this.reportLocation.bind(this));
|
||||
|
||||
|
||||
this.on("displayed", this.reportLocation.bind(this));
|
||||
this.manager.on("scroll", () => console.log("scrolled"));
|
||||
|
||||
// Trigger that rendering has started
|
||||
this.emit("started");
|
||||
|
|
@ -255,7 +253,8 @@ class Rendition {
|
|||
|
||||
return this.manager.display(section, target)
|
||||
.then(function(){
|
||||
// this.emit("displayed", section);
|
||||
this.emit("displayed", section);
|
||||
this.reportLocation();
|
||||
}.bind(this));
|
||||
|
||||
}
|
||||
|
|
@ -313,7 +312,7 @@ class Rendition {
|
|||
afterDisplayed(view){
|
||||
this.hooks.content.trigger(view.contents, this);
|
||||
this.emit("rendered", view.section);
|
||||
this.reportLocation();
|
||||
// this.reportLocation();
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -585,7 +584,7 @@ class Rendition {
|
|||
*/
|
||||
range(cfi, ignoreClass){
|
||||
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;
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue