mirror of
https://github.com/futurepress/epub.js.git
synced 2025-10-04 15:09:16 +02:00
Add render changes to queue, fix view bounds
This commit is contained in:
Fred Chasen
parent
19eeab40e3
commit
83650961f8
11 changed files with 805 additions and 745 deletions
|
|
@ -27,12 +27,15 @@ EPUBJS.Continuous.prototype.constructor = EPUBJS.Continuous;
|
|||
|
||||
EPUBJS.Continuous.prototype.attachListeners = function(){
|
||||
|
||||
// Listen to window for resize event
|
||||
window.addEventListener("resize", this.onResized.bind(this), false);
|
||||
// Listen to window for resize event if width or height is set to 100%
|
||||
if(this.settings.width === "100%" || this.settings.height === "100%") {
|
||||
window.addEventListener("resize", this.onResized.bind(this), false);
|
||||
}
|
||||
|
||||
if(this.settings.infinite) {
|
||||
this.infinite = new EPUBJS.Infinite(this.container);
|
||||
this.infinite.on("scroll", this.check.bind(this));
|
||||
//this.infinite = new EPUBJS.Infinite(this.container);
|
||||
//this.infinite.on("scroll", this.check.bind(this));
|
||||
this.start();
|
||||
}
|
||||
|
||||
};
|
||||
|
|
@ -51,20 +54,23 @@ EPUBJS.Continuous.prototype.display = function(what){
|
|||
|
||||
if(section){
|
||||
view = new EPUBJS.View(section);
|
||||
|
||||
|
||||
// This will clear all previous views
|
||||
this.fill(view);
|
||||
|
||||
// Move to correct place within the section, if needed
|
||||
// this.moveTo(what)
|
||||
|
||||
this.check();
|
||||
|
||||
view.displayed.then(function(){
|
||||
this.trigger("displayed", section);
|
||||
this.displaying = false;
|
||||
displaying.resolve(this);
|
||||
}.bind(this));
|
||||
this.q.enqueue(this.fill, view);
|
||||
|
||||
//this.q.enqueue(function(){
|
||||
// Move to correct place within the section, if needed
|
||||
// return this.moveTo(what)
|
||||
//});
|
||||
|
||||
this.q.enqueue(this.check);
|
||||
|
||||
// view.displayed.then(function(){
|
||||
// this.trigger("displayed", section);
|
||||
// this.displaying = false;
|
||||
// displaying.resolve(this);
|
||||
//}.bind(this));
|
||||
displaying.resolve(this);
|
||||
|
||||
} else {
|
||||
displaying.reject(new Error("No Section Found"));
|
||||
|
|
@ -92,17 +98,18 @@ EPUBJS.Continuous.prototype.afterDisplayed = function(currView){
|
|||
|
||||
if(index + 1 === this.views.length && next) {
|
||||
nextView = new EPUBJS.View(next);
|
||||
this.append(nextView);
|
||||
this.q.enqueue(this.append, nextView);
|
||||
}
|
||||
|
||||
if(index === 0 && prev) {
|
||||
prevView = new EPUBJS.View(prev);
|
||||
this.prepend(prevView);
|
||||
this.q.enqueue(this.prepend, prevView);
|
||||
}
|
||||
|
||||
// this.removeShownListeners(currView);
|
||||
currView.onShown = this.afterDisplayed.bind(this);
|
||||
|
||||
this.trigger("displayed", currView.section);
|
||||
|
||||
};
|
||||
|
||||
|
|
@ -117,11 +124,11 @@ EPUBJS.Continuous.prototype.afterDisplayedAbove = function(currView){
|
|||
return;
|
||||
}
|
||||
// bounds = currView.bounds();
|
||||
|
||||
console.log("afterDisplayedAbove")
|
||||
if(this.settings.axis === "vertical") {
|
||||
this.infinite.scrollBy(0, bounds.height, true);
|
||||
this.scrollBy(0, bounds.height, true);
|
||||
} else {
|
||||
this.infinite.scrollBy(bounds.width, 0, true);
|
||||
this.scrollBy(bounds.width, 0, true);
|
||||
}
|
||||
|
||||
// if(this.settings.axis === "vertical") {
|
||||
|
|
@ -159,6 +166,8 @@ EPUBJS.Continuous.prototype.append = function(view){
|
|||
// view.on("shown", this.afterDisplayed.bind(this));
|
||||
view.onShown = this.afterDisplayed.bind(this);
|
||||
// this.resizeView(view);
|
||||
|
||||
return this.check();
|
||||
};
|
||||
|
||||
EPUBJS.Continuous.prototype.prepend = function(view){
|
||||
|
|
@ -170,7 +179,7 @@ EPUBJS.Continuous.prototype.prepend = function(view){
|
|||
// view.on("shown", this.afterDisplayedAbove.bind(this));
|
||||
|
||||
// this.resizeView(view);
|
||||
|
||||
return this.check();
|
||||
};
|
||||
|
||||
EPUBJS.Continuous.prototype.fill = function(view){
|
||||
|
|
@ -186,6 +195,7 @@ EPUBJS.Continuous.prototype.fill = function(view){
|
|||
// view.on("shown", this.afterDisplayed.bind(this));
|
||||
view.onShown = this.afterDisplayed.bind(this);
|
||||
|
||||
return this.render(view);
|
||||
};
|
||||
|
||||
EPUBJS.Continuous.prototype.insert = function(view, index) {
|
||||
|
|
@ -197,6 +207,7 @@ EPUBJS.Continuous.prototype.insert = function(view, index) {
|
|||
this.container.appendChild(view.element);
|
||||
}
|
||||
|
||||
return this.check();
|
||||
};
|
||||
|
||||
// Remove the render element and clean up listeners
|
||||
|
|
@ -241,35 +252,48 @@ EPUBJS.Continuous.prototype.isVisible = function(view, _container){
|
|||
var container = _container || this.container.getBoundingClientRect();
|
||||
|
||||
if((position.bottom >= container.top - this.settings.offset) &&
|
||||
!(position.top > container.bottom) &&
|
||||
(position.right >= container.left) &&
|
||||
!(position.left > container.right + this.settings.offset)) {
|
||||
// Visible
|
||||
!(position.top >= container.bottom + this.settings.offset) &&
|
||||
(position.right >= container.left - this.settings.offset) &&
|
||||
!(position.left >= container.right + this.settings.offset)) {
|
||||
|
||||
// Fit to size of the container, apply padding
|
||||
// this.resizeView(view);
|
||||
if(!view.shown && !this.rendering) {
|
||||
// console.log("render", view.index);
|
||||
this.render(view).then(function(){
|
||||
// Check to see if anything new is on screen after rendering
|
||||
this.check();
|
||||
}.bind(this));
|
||||
|
||||
}
|
||||
return true;
|
||||
|
||||
} else {
|
||||
|
||||
if(view.shown) {
|
||||
view.destroy();
|
||||
// console.log("destroy:", view.section.index)
|
||||
}
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
EPUBJS.Continuous.prototype.check = function(){
|
||||
var checking = new RSVP.defer();
|
||||
var container = this.container.getBoundingClientRect();
|
||||
|
||||
this.views.forEach(function(view){
|
||||
this.isVisible(view, container);
|
||||
var visible = this.isVisible(view, container);
|
||||
|
||||
if(visible) {
|
||||
|
||||
if(!view.shown && !this.rendering) {
|
||||
this.q.enqueue(function(){
|
||||
|
||||
return this.render(view)
|
||||
.then(function(){
|
||||
|
||||
// Check to see if anything new is on screen after rendering
|
||||
return this.check();
|
||||
|
||||
}.bind(this));
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
if(view.shown) {
|
||||
view.destroy();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}.bind(this));
|
||||
|
||||
clearTimeout(this.trimTimeout);
|
||||
|
|
@ -277,26 +301,30 @@ EPUBJS.Continuous.prototype.check = function(){
|
|||
this.trim();
|
||||
}.bind(this), 250);
|
||||
|
||||
checking.resolve();
|
||||
return checking.promise;
|
||||
|
||||
};
|
||||
|
||||
EPUBJS.Continuous.prototype.trim = function(){
|
||||
var above = true;
|
||||
for (var i = 0; i < this.views.length; i++) {
|
||||
var view = this.views[i];
|
||||
|
||||
this.views.forEach(function(view, i){
|
||||
// var view = this.views[i];
|
||||
var prevShown = i > 0 ? this.views[i-1].shown : false;
|
||||
var nextShown = (i+1 < this.views.length) ? this.views[i+1].shown : false;
|
||||
if(!view.shown && !prevShown && !nextShown) {
|
||||
// Remove
|
||||
//this.q.enqueue(this.erase, view, above);
|
||||
this.erase(view, above);
|
||||
}
|
||||
if(nextShown) {
|
||||
above = false;
|
||||
}
|
||||
}
|
||||
}.bind(this));
|
||||
};
|
||||
|
||||
EPUBJS.Continuous.prototype.erase = function(view, above){ //Trim
|
||||
|
||||
// remove from dom
|
||||
var prevTop = this.container.scrollTop;
|
||||
var prevLeft = this.container.scrollLeft;
|
||||
|
|
@ -305,35 +333,38 @@ EPUBJS.Continuous.prototype.erase = function(view, above){ //Trim
|
|||
this.remove(view);
|
||||
|
||||
if(above) {
|
||||
console.log("erase")
|
||||
if(this.settings.axis === "vertical") {
|
||||
this.infinite.scrollTo(0, prevTop - bounds.height, true);
|
||||
this.scrollTo(0, prevTop - bounds.height, true);
|
||||
} else {
|
||||
this.infinite.scrollTo(prevLeft - bounds.width, 0, true);
|
||||
this.scrollTo(prevLeft -bounds.width, 0, true);
|
||||
}
|
||||
}
|
||||
|
||||
// task.resolve();
|
||||
// return task.promise;
|
||||
|
||||
};
|
||||
|
||||
|
||||
EPUBJS.Continuous.prototype.resizeView = function(view) {
|
||||
var bounds = this.container.getBoundingClientRect();
|
||||
var styles = window.getComputedStyle(this.container);
|
||||
var padding = {
|
||||
left: parseFloat(styles["padding-left"]) || 0,
|
||||
right: parseFloat(styles["padding-right"]) || 0,
|
||||
top: parseFloat(styles["padding-top"]) || 0,
|
||||
bottom: parseFloat(styles["padding-bottom"]) || 0
|
||||
};
|
||||
var width = bounds.width - padding.left - padding.right;
|
||||
var height = bounds.height - padding.top - padding.bottom;
|
||||
// EPUBJS.Continuous.prototype.resizeView = function(view) {
|
||||
// var bounds = this.container.getBoundingClientRect();
|
||||
// var styles = window.getComputedStyle(this.container);
|
||||
// var padding = {
|
||||
// left: parseFloat(styles["padding-left"]) || 0,
|
||||
// right: parseFloat(styles["padding-right"]) || 0,
|
||||
// top: parseFloat(styles["padding-top"]) || 0,
|
||||
// bottom: parseFloat(styles["padding-bottom"]) || 0
|
||||
// };
|
||||
// var width = bounds.width - padding.left - padding.right;
|
||||
// var height = bounds.height - padding.top - padding.bottom;
|
||||
|
||||
if(this.settings.axis === "vertical") {
|
||||
view.resize(width, 0);
|
||||
} else {
|
||||
view.resize(0, height);
|
||||
}
|
||||
|
||||
};
|
||||
// if(this.settings.axis === "vertical") {
|
||||
// view.resize(width, 0);
|
||||
// } else {
|
||||
// view.resize(0, height);
|
||||
// }
|
||||
// };
|
||||
|
||||
// EPUBJS.Continuous.prototype.paginate = function(options) {
|
||||
// this.pagination = new EPUBJS.Paginate(this, {
|
||||
|
|
@ -374,3 +405,82 @@ EPUBJS.Continuous.prototype.checkCurrent = function(position) {
|
|||
}
|
||||
|
||||
};
|
||||
|
||||
EPUBJS.Continuous.prototype.start = function() {
|
||||
|
||||
this.tick = EPUBJS.core.requestAnimationFrame;
|
||||
|
||||
this.container.addEventListener("scroll", function(e){
|
||||
if(!this.ignore) {
|
||||
this.scrolled = true;
|
||||
} else {
|
||||
this.ignore = false;
|
||||
}
|
||||
}.bind(this));
|
||||
|
||||
window.addEventListener('unload', function(e){
|
||||
this.ignore = true;
|
||||
});
|
||||
|
||||
this.tick.call(window, this.onScroll.bind(this));
|
||||
|
||||
this.scrolled = false;
|
||||
|
||||
};
|
||||
|
||||
EPUBJS.Continuous.prototype.onScroll = function(){
|
||||
|
||||
if(this.scrolled && !this.ignore) {
|
||||
|
||||
scrollTop = this.container.scrollTop;
|
||||
scrollLeft = this.container.scrollLeft;
|
||||
|
||||
this.trigger("scroll", {
|
||||
top: scrollTop,
|
||||
left: scrollLeft
|
||||
});
|
||||
|
||||
this.q.enqueue(this.check);
|
||||
|
||||
//this.prevScrollTop = scrollTop;
|
||||
//this.prevScrollLeft = scrollLeft;
|
||||
|
||||
this.scrolled = false;
|
||||
} else {
|
||||
this.ignore = false;
|
||||
this.scrolled = false;
|
||||
}
|
||||
|
||||
this.tick.call(window, this.onScroll.bind(this));
|
||||
|
||||
};
|
||||
|
||||
EPUBJS.Continuous.prototype.scrollBy = function(x, y, silent){
|
||||
if(silent) {
|
||||
this.ignore = true;
|
||||
}
|
||||
this.container.scrollLeft += x;
|
||||
this.container.scrollTop += y;
|
||||
|
||||
this.scrolled = true;
|
||||
//this.check();
|
||||
};
|
||||
|
||||
EPUBJS.Continuous.prototype.scrollTo = function(x, y, silent){
|
||||
if(silent) {
|
||||
this.ignore = true;
|
||||
}
|
||||
this.container.scrollLeft = x;
|
||||
this.container.scrollTop = y;
|
||||
|
||||
this.scrolled = true;
|
||||
|
||||
// if(this.container.scrollLeft != x){
|
||||
// setTimeout(function() {
|
||||
// this.scrollTo(x, y, silent);
|
||||
// }.bind(this), 10);
|
||||
// return;
|
||||
// };
|
||||
|
||||
//this.check();
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue