mirror of
https://github.com/futurepress/epub.js.git
synced 2025-10-05 15:32:55 +02:00
Continuous manager fixes
This commit is contained in:
Fred Chasen
parent
03e7ca085c
commit
ced1bf89ff
4 changed files with 72 additions and 190 deletions
|
|
@ -5,7 +5,6 @@ import debounce from 'lodash/debounce'
|
|||
class ContinuousViewManager extends DefaultViewManager {
|
||||
constructor(options) {
|
||||
super(options);
|
||||
// DefaultViewManager.apply(this, arguments); // call super constructor.
|
||||
|
||||
this.name = "continuous";
|
||||
|
||||
|
|
@ -21,12 +20,11 @@ class ContinuousViewManager extends DefaultViewManager {
|
|||
|
||||
extend(this.settings, options.settings || {});
|
||||
|
||||
// Gap can be 0, byt defaults doesn't handle that
|
||||
// Gap can be 0, but defaults doesn't handle that
|
||||
if (options.settings.gap != "undefined" && options.settings.gap === 0) {
|
||||
this.settings.gap = options.settings.gap;
|
||||
}
|
||||
|
||||
// this.viewSettings.axis = this.settings.axis;
|
||||
this.viewSettings = {
|
||||
ignoreClass: this.settings.ignoreClass,
|
||||
axis: this.settings.axis,
|
||||
|
|
@ -112,37 +110,6 @@ class ContinuousViewManager extends DefaultViewManager {
|
|||
}
|
||||
*/
|
||||
|
||||
// resize(width, height){
|
||||
//
|
||||
// // Clear the queue
|
||||
// this.q.clear();
|
||||
//
|
||||
// this._stageSize = this.stage.size(width, height);
|
||||
// console.log("resize says", this._stageSize, width, height);
|
||||
// this._bounds = this.bounds();
|
||||
//
|
||||
// // Update for new views
|
||||
// this.viewSettings.width = this._stageSize.width;
|
||||
// this.viewSettings.height = this._stageSize.height;
|
||||
//
|
||||
// // Update for existing views
|
||||
// this.views.each(function(view) {
|
||||
// view.size(this._stageSize.width, this._stageSize.height);
|
||||
// }.bind(this));
|
||||
//
|
||||
// this.updateLayout();
|
||||
//
|
||||
// // if(this.location) {
|
||||
// // this.rendition.display(this.location.start);
|
||||
// // }
|
||||
//
|
||||
// this.emit("resized", {
|
||||
// width: this._stageSize.width,
|
||||
// height: this._stageSize.height
|
||||
// });
|
||||
//
|
||||
// }
|
||||
|
||||
onResized(e) {
|
||||
|
||||
// this.views.clear();
|
||||
|
|
@ -250,7 +217,6 @@ class ContinuousViewManager extends DefaultViewManager {
|
|||
|
||||
var updating = new defer();
|
||||
var promises = [];
|
||||
|
||||
for (var i = 0; i < viewsLength; i++) {
|
||||
view = views[i];
|
||||
|
||||
|
|
@ -336,17 +302,14 @@ class ContinuousViewManager extends DefaultViewManager {
|
|||
if(newViews.length){
|
||||
return Promise.all(promises)
|
||||
.then(() => {
|
||||
// Check to see if anything new is on screen after rendering
|
||||
return this.update(delta);
|
||||
});
|
||||
// Check to see if anything new is on screen after rendering
|
||||
// return this.q.enqueue(function(){
|
||||
// this.update(delta);
|
||||
// }.bind(this));
|
||||
|
||||
|
||||
// }.bind(this));
|
||||
|
||||
} else {
|
||||
this.q.enqueue(function(){
|
||||
this.update();
|
||||
}.bind(this));
|
||||
checking.resolve(false);
|
||||
return checking.promise;
|
||||
}
|
||||
|
|
@ -468,8 +431,6 @@ class ContinuousViewManager extends DefaultViewManager {
|
|||
let scrollTop;
|
||||
let scrollLeft;
|
||||
|
||||
// if(!this.ignore) {
|
||||
|
||||
if(this.settings.height) {
|
||||
scrollTop = this.container.scrollTop;
|
||||
scrollLeft = this.container.scrollLeft;
|
||||
|
|
@ -484,36 +445,6 @@ class ContinuousViewManager extends DefaultViewManager {
|
|||
if(!this.ignore) {
|
||||
|
||||
this._scrolled();
|
||||
// if((this.scrollDeltaVert === 0 &&
|
||||
// this.scrollDeltaHorz === 0) ||
|
||||
// this.scrollDeltaVert > this.settings.offsetDelta ||
|
||||
// this.scrollDeltaHorz > this.settings.offsetDelta) {
|
||||
if(this.scrollDeltaVert > this.settings.offsetDelta ||
|
||||
this.scrollDeltaHorz > this.settings.offsetDelta) {
|
||||
// console.log("scroll", this.scrollDeltaHorz);
|
||||
//
|
||||
// this.q.enqueue(function() {
|
||||
// this.check();
|
||||
// }.bind(this));
|
||||
// // this.check();
|
||||
//
|
||||
// this.scrollDeltaVert = 0;
|
||||
// this.scrollDeltaHorz = 0;
|
||||
//
|
||||
// this.emit("scroll", {
|
||||
// top: scrollTop,
|
||||
// left: scrollLeft
|
||||
// });
|
||||
//
|
||||
// clearTimeout(this.afterScrolled);
|
||||
// this.afterScrolled = setTimeout(function () {
|
||||
// this.emit("scrolled", {
|
||||
// top: this.scrollTop,
|
||||
// left: this.scrollLeft
|
||||
// });
|
||||
// }.bind(this));
|
||||
|
||||
}
|
||||
|
||||
} else {
|
||||
this.ignore = false;
|
||||
|
|
@ -533,9 +464,6 @@ class ContinuousViewManager extends DefaultViewManager {
|
|||
|
||||
|
||||
this.scrolled = false;
|
||||
// }
|
||||
|
||||
// this.tick.call(window, this.onScroll.bind(this));
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -558,36 +486,6 @@ class ContinuousViewManager extends DefaultViewManager {
|
|||
}.bind(this));
|
||||
}
|
||||
|
||||
// updateLayout() {
|
||||
//
|
||||
// if (!this.stage) {
|
||||
// return;
|
||||
// }
|
||||
//
|
||||
// if(this.settings.axis === "vertical") {
|
||||
// this.layout.calculate(this._stageSize.width, this._stageSize.height);
|
||||
// } else {
|
||||
// this.layout.calculate(
|
||||
// this._stageSize.width,
|
||||
// this._stageSize.height,
|
||||
// this.settings.gap
|
||||
// );
|
||||
//
|
||||
// // Set the look ahead offset for what is visible
|
||||
// this.settings.offset = this.layout.delta;
|
||||
//
|
||||
// // this.stage.addStyleRules("iframe", [{"padding" : "0 " + (this.layout.gap / 2) + "px"}]);
|
||||
//
|
||||
// }
|
||||
//
|
||||
// // Set the dimensions for views
|
||||
// this.viewSettings.width = this.layout.width;
|
||||
// this.viewSettings.height = this.layout.height;
|
||||
//
|
||||
// this.setLayout(this.layout);
|
||||
//
|
||||
// }
|
||||
|
||||
next(){
|
||||
|
||||
if(this.settings.axis === "horizontal") {
|
||||
|
|
|
|||
|
|
@ -207,18 +207,27 @@ class DefaultViewManager {
|
|||
var displaying = new defer();
|
||||
var displayed = displaying.promise;
|
||||
|
||||
/* TODO: this needs more testing, always re-render for now
|
||||
// Check if moving to target is needed
|
||||
if (target === section.href || parseInt(target)) {
|
||||
target = undefined;
|
||||
}
|
||||
|
||||
// Check to make sure the section we want isn't already shown
|
||||
var visible = this.views.find(section);
|
||||
|
||||
// View is already shown, just move to correct location
|
||||
if(visible && target) {
|
||||
let offset = visible.locationOf(target);
|
||||
this.moveTo(offset);
|
||||
// View is already shown, just move to correct location in view
|
||||
if(visible && section) {
|
||||
let offset = visible.offset();
|
||||
this.scrollTo(offset.left, offset.top, true);
|
||||
|
||||
if(target) {
|
||||
let offset = visible.locationOf(target);
|
||||
this.moveTo(offset);
|
||||
}
|
||||
|
||||
displaying.resolve();
|
||||
return displayed;
|
||||
}
|
||||
*/
|
||||
|
||||
// Hide all current views
|
||||
this.clear();
|
||||
|
|
@ -433,6 +442,8 @@ class DefaultViewManager {
|
|||
}
|
||||
|
||||
clear () {
|
||||
this.q.clear();
|
||||
|
||||
if (this.views) {
|
||||
this.views.hide();
|
||||
this.scrollTo(0,0, true);
|
||||
|
|
@ -449,62 +460,14 @@ class DefaultViewManager {
|
|||
}
|
||||
return this.location;
|
||||
}
|
||||
/*
|
||||
scrolledLocation(){
|
||||
|
||||
var visible = this.visible();
|
||||
var startPage, endPage;
|
||||
var startA, startB, endA, endB;
|
||||
var last;
|
||||
var container = this.container.getBoundingClientRect();
|
||||
var pageHeight = (container.height < window.innerHeight) ? container.height : window.innerHeight;
|
||||
var offset = 0;
|
||||
|
||||
if(!this.settings.height) {
|
||||
offset = window.scrollY;
|
||||
}
|
||||
|
||||
if(visible.length === 1) {
|
||||
startA = (container.top - visible[0].position().top) + offset;
|
||||
endA = startA + pageHeight;
|
||||
startPage = this.mapping.page(visible[0].contents, visible[0].section.cfiBase, startA, endA)
|
||||
|
||||
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;
|
||||
|
||||
startA = (container.top - visible[0].position().top) + offset;
|
||||
endA = startA + (container.top - visible[0].position().bottom);
|
||||
|
||||
startB = (container.top - visible[last].position().top) + offset;
|
||||
endB = pageHeight - startB;
|
||||
|
||||
startPage = this.mapping.page(visible[0].contents, visible[0].section.cfiBase, startA, endA)
|
||||
endPage = this.mapping.page(visible[last].contents, visible[last].section.cfiBase, startB, endB);
|
||||
|
||||
return {
|
||||
index : visible[last].section.index,
|
||||
href : visible[last].section.href,
|
||||
start: startPage.start,
|
||||
end: endPage.end
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
*/
|
||||
scrolledLocation() {
|
||||
let visible = this.visible();
|
||||
var container = this.container.getBoundingClientRect();
|
||||
var pageHeight = (container.height < window.innerHeight) ? container.height : window.innerHeight;
|
||||
let container = this.container.getBoundingClientRect();
|
||||
let pageHeight = (container.height < window.innerHeight) ? container.height : window.innerHeight;
|
||||
|
||||
var offset = 0;
|
||||
let offset = 0;
|
||||
let used = 0;
|
||||
|
||||
if(this.fullsize) {
|
||||
offset = window.scrollY;
|
||||
|
|
@ -513,18 +476,21 @@ class DefaultViewManager {
|
|||
let sections = visible.map((view) => {
|
||||
let {index, href} = view.section;
|
||||
let position = view.position();
|
||||
let startPos = position.top - container.top + offset;
|
||||
let endPos = startPos + pageHeight;
|
||||
let startPos = position.top - container.top + offset + used;
|
||||
let endPos = startPos + pageHeight - used;
|
||||
if (endPos > position.bottom - container.top + offset) {
|
||||
endPos = position.bottom - container.top + offset;
|
||||
used = (endPos - startPos);
|
||||
}
|
||||
|
||||
let totalPages = this.layout.count(view._height, pageHeight).pages;
|
||||
let currPage = Math.round(startPos / pageHeight);
|
||||
let currPage = Math.ceil(startPos / pageHeight);
|
||||
let pages = [];
|
||||
let numPages = (endPos - startPos) / pageHeight;
|
||||
for (var i = 1; i <= numPages; i++) {
|
||||
let pg = currPage + i;
|
||||
let endPage = Math.ceil(endPos / pageHeight);
|
||||
|
||||
pages = [currPage];
|
||||
for (var i = currPage; i <= endPage; i++) {
|
||||
let pg = i;
|
||||
pages.push(pg);
|
||||
}
|
||||
|
||||
|
|
@ -544,9 +510,9 @@ class DefaultViewManager {
|
|||
|
||||
paginatedLocation(){
|
||||
let visible = this.visible();
|
||||
var container = this.container.getBoundingClientRect();
|
||||
let container = this.container.getBoundingClientRect();
|
||||
|
||||
var left = 0;
|
||||
let left = 0;
|
||||
let used = 0;
|
||||
|
||||
if(this.fullsize) {
|
||||
|
|
@ -574,12 +540,13 @@ class DefaultViewManager {
|
|||
}
|
||||
|
||||
let totalPages = this.layout.count(width).pages;
|
||||
let currPage = Math.floor((startPos - offset) / this.layout.pageWidth);
|
||||
let currPage = Math.ceil((startPos + (this.layout.gap) - offset) / this.layout.pageWidth);
|
||||
let pages = [];
|
||||
let numPages = Math.floor((endPos - startPos) / this.layout.pageWidth);
|
||||
let endPage = Math.ceil((endPos - (this.layout.gap) - offset) / this.layout.pageWidth);
|
||||
|
||||
for (var i = 1; i <= numPages; i++) {
|
||||
let pg = currPage + i;
|
||||
pages = [currPage];
|
||||
for (var i = currPage; i <= endPage; i++) {
|
||||
let pg = i;
|
||||
pages.push(pg);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue