mirror of
https://github.com/futurepress/epub.js.git
synced 2025-10-03 14:59:18 +02:00
680 lines
14 KiB
JavaScript
680 lines
14 KiB
JavaScript
import {extend, defer, requestAnimationFrame} from "../../utils/core";
|
|
import DefaultViewManager from "../default";
|
|
|
|
class ContinuousViewManager extends DefaultViewManager {
|
|
constructor(options) {
|
|
super(options);
|
|
// DefaultViewManager.apply(this, arguments); // call super constructor.
|
|
|
|
this.name = "continuous";
|
|
|
|
this.settings = extend(this.settings || {}, {
|
|
infinite: true,
|
|
overflow: "auto",
|
|
axis: "vertical",
|
|
offset: 500,
|
|
offsetDelta: 250,
|
|
width: undefined,
|
|
height: undefined
|
|
});
|
|
|
|
extend(this.settings, options.settings || {});
|
|
|
|
// Gap can be 0, byt 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,
|
|
layout: this.layout,
|
|
width: 0,
|
|
height: 0
|
|
};
|
|
|
|
this.scrollTop = 0;
|
|
this.scrollLeft = 0;
|
|
}
|
|
|
|
display(section, target){
|
|
return DefaultViewManager.prototype.display.call(this, section, target)
|
|
.then(function () {
|
|
return this.fill();
|
|
}.bind(this));
|
|
}
|
|
|
|
fill(_full){
|
|
var full = _full || new defer();
|
|
|
|
this.check().then(function(result) {
|
|
if (result) {
|
|
this.fill(full);
|
|
} else {
|
|
full.resolve();
|
|
}
|
|
}.bind(this));
|
|
|
|
return full.promise;
|
|
}
|
|
|
|
moveTo(offset){
|
|
// var bounds = this.stage.bounds();
|
|
// var dist = Math.floor(offset.top / bounds.height) * bounds.height;
|
|
var distX = 0,
|
|
distY = 0;
|
|
|
|
var offsetX = 0,
|
|
offsetY = 0;
|
|
|
|
if(this.settings.axis === "vertical") {
|
|
distY = offset.top;
|
|
offsetY = offset.top+this.settings.offset;
|
|
} else {
|
|
distX = Math.floor(offset.left / this.layout.delta) * this.layout.delta;
|
|
offsetX = distX+this.settings.offset;
|
|
}
|
|
|
|
return this.check(offsetX, offsetY)
|
|
.then(function(){
|
|
this.scrollBy(distX, distY);
|
|
}.bind(this));
|
|
}
|
|
|
|
/*
|
|
afterDisplayed(currView){
|
|
var next = currView.section.next();
|
|
var prev = currView.section.prev();
|
|
var index = this.views.indexOf(currView);
|
|
var prevView, nextView;
|
|
|
|
if(index + 1 === this.views.length && next) {
|
|
nextView = this.createView(next);
|
|
this.q.enqueue(this.append.bind(this), nextView);
|
|
}
|
|
|
|
if(index === 0 && prev) {
|
|
prevView = this.createView(prev, this.viewSettings);
|
|
this.q.enqueue(this.prepend.bind(this), prevView);
|
|
}
|
|
|
|
// this.removeShownListeners(currView);
|
|
// currView.onShown = this.afterDisplayed.bind(this);
|
|
this.emit("added", currView.section);
|
|
|
|
}
|
|
*/
|
|
|
|
resize(width, height){
|
|
|
|
// Clear the queue
|
|
this.q.clear();
|
|
|
|
this._stageSize = this.stage.size(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.stage.width,
|
|
height: this.stage.height
|
|
});
|
|
|
|
}
|
|
|
|
onResized(e) {
|
|
|
|
// this.views.clear();
|
|
|
|
clearTimeout(this.resizeTimeout);
|
|
this.resizeTimeout = setTimeout(function(){
|
|
this.resize();
|
|
}.bind(this), 150);
|
|
}
|
|
|
|
afterResized(view){
|
|
this.emit("resize", view.section);
|
|
}
|
|
|
|
// Remove Previous Listeners if present
|
|
removeShownListeners(view){
|
|
|
|
// view.off("shown", this.afterDisplayed);
|
|
// view.off("shown", this.afterDisplayedAbove);
|
|
view.onDisplayed = function(){};
|
|
|
|
}
|
|
|
|
|
|
// append(section){
|
|
// return this.q.enqueue(function() {
|
|
//
|
|
// this._append(section);
|
|
//
|
|
//
|
|
// }.bind(this));
|
|
// };
|
|
//
|
|
// prepend(section){
|
|
// return this.q.enqueue(function() {
|
|
//
|
|
// this._prepend(section);
|
|
//
|
|
// }.bind(this));
|
|
//
|
|
// };
|
|
|
|
append(section){
|
|
var view = this.createView(section);
|
|
this.views.append(view);
|
|
return view;
|
|
}
|
|
|
|
prepend(section){
|
|
var view = this.createView(section);
|
|
|
|
view.on("resized", this.counter.bind(this));
|
|
|
|
this.views.prepend(view);
|
|
return view;
|
|
}
|
|
|
|
counter(bounds){
|
|
|
|
if(this.settings.axis === "vertical") {
|
|
this.scrollBy(0, bounds.heightDelta, true);
|
|
} else {
|
|
this.scrollBy(bounds.widthDelta, 0, true);
|
|
}
|
|
|
|
}
|
|
|
|
update(_offset){
|
|
var container = this.bounds();
|
|
var views = this.views.all();
|
|
var viewsLength = views.length;
|
|
var visible = [];
|
|
var offset = typeof _offset != "undefined" ? _offset : (this.settings.offset || 0);
|
|
var isVisible;
|
|
var view;
|
|
|
|
var updating = new defer();
|
|
var promises = [];
|
|
|
|
for (var i = 0; i < viewsLength; i++) {
|
|
view = views[i];
|
|
|
|
isVisible = this.isVisible(view, offset, offset, container);
|
|
|
|
if(isVisible === true) {
|
|
if (!view.displayed) {
|
|
promises.push(view.display(this.request).then(function (view) {
|
|
view.show();
|
|
}));
|
|
}
|
|
visible.push(view);
|
|
} else {
|
|
this.q.enqueue(view.destroy.bind(view));
|
|
|
|
clearTimeout(this.trimTimeout);
|
|
this.trimTimeout = setTimeout(function(){
|
|
this.q.enqueue(this.trim.bind(this));
|
|
}.bind(this), 250);
|
|
}
|
|
|
|
}
|
|
|
|
if(promises.length){
|
|
return Promise.all(promises);
|
|
} else {
|
|
updating.resolve();
|
|
return updating.promise;
|
|
}
|
|
|
|
}
|
|
|
|
check(_offsetLeft, _offsetTop){
|
|
var last, first, next, prev;
|
|
|
|
var checking = new defer();
|
|
var newViews = [];
|
|
|
|
var horizontal = (this.settings.axis === "horizontal");
|
|
var delta = this.settings.offset || 0;
|
|
|
|
if (_offsetLeft && horizontal) {
|
|
delta = _offsetLeft;
|
|
}
|
|
|
|
if (_offsetTop && !horizontal) {
|
|
delta = _offsetTop;
|
|
}
|
|
|
|
var bounds = this._bounds; // bounds saved this until resize
|
|
|
|
var offset = horizontal ? this.scrollLeft : this.scrollTop;
|
|
var visibleLength = horizontal ? bounds.width : bounds.height;
|
|
var contentLength = horizontal ? this.container.scrollWidth : this.container.scrollHeight;
|
|
|
|
if (offset + visibleLength + delta >= contentLength) {
|
|
last = this.views.last();
|
|
next = last && last.section.next();
|
|
if(next) {
|
|
newViews.push(this.append(next));
|
|
}
|
|
}
|
|
|
|
if (offset - delta < 0 ) {
|
|
first = this.views.first();
|
|
prev = first && first.section.prev();
|
|
if(prev) {
|
|
newViews.push(this.prepend(prev));
|
|
}
|
|
}
|
|
|
|
if(newViews.length){
|
|
// Promise.all(promises)
|
|
// .then(function() {
|
|
// Check to see if anything new is on screen after rendering
|
|
return this.q.enqueue(function(){
|
|
return this.update(delta);
|
|
}.bind(this));
|
|
|
|
|
|
// }.bind(this));
|
|
|
|
} else {
|
|
checking.resolve(false);
|
|
return checking.promise;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
trim(){
|
|
var task = new defer();
|
|
var displayed = this.views.displayed();
|
|
var first = displayed[0];
|
|
var last = displayed[displayed.length-1];
|
|
var firstIndex = this.views.indexOf(first);
|
|
var lastIndex = this.views.indexOf(last);
|
|
var above = this.views.slice(0, firstIndex);
|
|
var below = this.views.slice(lastIndex+1);
|
|
|
|
// Erase all but last above
|
|
for (var i = 0; i < above.length-1; i++) {
|
|
this.erase(above[i], above);
|
|
}
|
|
|
|
// Erase all except first below
|
|
for (var j = 1; j < below.length; j++) {
|
|
this.erase(below[j]);
|
|
}
|
|
|
|
task.resolve();
|
|
return task.promise;
|
|
}
|
|
|
|
erase(view, above){ //Trim
|
|
|
|
var prevTop;
|
|
var prevLeft;
|
|
|
|
if(this.settings.height) {
|
|
prevTop = this.container.scrollTop;
|
|
prevLeft = this.container.scrollLeft;
|
|
} else {
|
|
prevTop = window.scrollY;
|
|
prevLeft = window.scrollX;
|
|
}
|
|
|
|
var bounds = view.bounds();
|
|
|
|
this.views.remove(view);
|
|
|
|
if(above) {
|
|
|
|
if(this.settings.axis === "vertical") {
|
|
this.scrollTo(0, prevTop - bounds.height, true);
|
|
} else {
|
|
this.scrollTo(prevLeft - bounds.width, 0, true);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
addEventListeners(stage){
|
|
|
|
window.addEventListener("unload", function(e){
|
|
this.ignore = true;
|
|
// this.scrollTo(0,0);
|
|
this.destroy();
|
|
}.bind(this));
|
|
|
|
this.addScrollListeners();
|
|
}
|
|
|
|
addScrollListeners() {
|
|
var scroller;
|
|
|
|
this.tick = requestAnimationFrame;
|
|
|
|
if(this.settings.height) {
|
|
this.prevScrollTop = this.container.scrollTop;
|
|
this.prevScrollLeft = this.container.scrollLeft;
|
|
} else {
|
|
this.prevScrollTop = window.scrollY;
|
|
this.prevScrollLeft = window.scrollX;
|
|
}
|
|
|
|
this.scrollDeltaVert = 0;
|
|
this.scrollDeltaHorz = 0;
|
|
|
|
if(this.settings.height) {
|
|
scroller = this.container;
|
|
this.scrollTop = this.container.scrollTop;
|
|
this.scrollLeft = this.container.scrollLeft;
|
|
} else {
|
|
scroller = window;
|
|
this.scrollTop = window.scrollY;
|
|
this.scrollLeft = window.scrollX;
|
|
}
|
|
|
|
scroller.addEventListener("scroll", this.onScroll.bind(this));
|
|
|
|
// this.tick.call(window, this.onScroll.bind(this));
|
|
|
|
this.scrolled = false;
|
|
|
|
}
|
|
|
|
onScroll(){
|
|
let scrollTop;
|
|
let scrollLeft;
|
|
|
|
// if(!this.ignore) {
|
|
|
|
if(this.settings.height) {
|
|
scrollTop = this.container.scrollTop;
|
|
scrollLeft = this.container.scrollLeft;
|
|
} else {
|
|
scrollTop = window.scrollY;
|
|
scrollLeft = window.scrollX;
|
|
}
|
|
|
|
this.scrollTop = scrollTop;
|
|
this.scrollLeft = scrollLeft;
|
|
|
|
if(!this.ignore) {
|
|
|
|
if((this.scrollDeltaVert === 0 &&
|
|
this.scrollDeltaHorz === 0) ||
|
|
this.scrollDeltaVert > this.settings.offsetDelta ||
|
|
this.scrollDeltaHorz > this.settings.offsetDelta) {
|
|
|
|
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;
|
|
}
|
|
|
|
this.scrollDeltaVert += Math.abs(scrollTop-this.prevScrollTop);
|
|
this.scrollDeltaHorz += Math.abs(scrollLeft-this.prevScrollLeft);
|
|
|
|
this.prevScrollTop = scrollTop;
|
|
this.prevScrollLeft = scrollLeft;
|
|
|
|
clearTimeout(this.scrollTimeout);
|
|
this.scrollTimeout = setTimeout(function(){
|
|
this.scrollDeltaVert = 0;
|
|
this.scrollDeltaHorz = 0;
|
|
}.bind(this), 150);
|
|
|
|
|
|
this.scrolled = false;
|
|
// }
|
|
|
|
// this.tick.call(window, this.onScroll.bind(this));
|
|
|
|
}
|
|
|
|
|
|
// 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) {
|
|
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", [{"margin-right" : this.layout.gap + "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") {
|
|
|
|
this.scrollLeft = this.container.scrollLeft;
|
|
|
|
if(this.container.scrollLeft +
|
|
this.container.offsetWidth +
|
|
this.layout.delta < this.container.scrollWidth) {
|
|
this.scrollBy(this.layout.delta, 0);
|
|
} else {
|
|
this.scrollTo(this.container.scrollWidth - this.layout.delta, 0);
|
|
}
|
|
|
|
} else {
|
|
this.scrollBy(0, this.layout.height);
|
|
}
|
|
}
|
|
|
|
prev(){
|
|
if(this.settings.axis === "horizontal") {
|
|
this.scrollBy(-this.layout.delta, 0);
|
|
} else {
|
|
this.scrollBy(0, -this.layout.height);
|
|
}
|
|
}
|
|
|
|
updateFlow(flow){
|
|
var axis = (flow === "paginated") ? "horizontal" : "vertical";
|
|
|
|
this.settings.axis = axis;
|
|
|
|
this.viewSettings.axis = axis;
|
|
|
|
this.settings.overflow = (flow === "paginated") ? "hidden" : "auto";
|
|
|
|
// this.views.each(function(view){
|
|
// view.setAxis(axis);
|
|
// });
|
|
|
|
if (this.settings.axis === "vertical") {
|
|
this.settings.infinite = true;
|
|
} else {
|
|
this.settings.infinite = false;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
export default ContinuousViewManager;
|