mirror of
https://github.com/futurepress/epub.js.git
synced 2025-10-03 14:59:18 +02:00
New queue flush, handle cfi for display, re-display on resize
This commit is contained in:
Fred Chasen
parent
42efc34517
commit
ac926479cf
12 changed files with 941 additions and 399 deletions
|
|
@ -7,7 +7,7 @@ EPUBJS.Continuous = function(book, options) {
|
|||
overflow: "auto",
|
||||
axis: "vertical",
|
||||
offset: 500,
|
||||
offsetDelta: 100
|
||||
offsetDelta: 250
|
||||
});
|
||||
|
||||
EPUBJS.core.extend(this.settings, options);
|
||||
|
|
@ -39,53 +39,77 @@ EPUBJS.Continuous.prototype.attachListeners = function(){
|
|||
|
||||
};
|
||||
|
||||
EPUBJS.Continuous.prototype.display = function(what){
|
||||
|
||||
return this.q.enqueue(function(what){
|
||||
EPUBJS.Continuous.prototype._display = function(target){
|
||||
|
||||
var displaying = new RSVP.defer();
|
||||
var displayed = displaying.promise;
|
||||
|
||||
var section;
|
||||
var view;
|
||||
var cfi, spinePos;
|
||||
|
||||
if(target.indexOf("epubcfi(") === 0) {
|
||||
cfi = new EPUBJS.EpubCFI(target);
|
||||
spinePos = cfi.spinePos;
|
||||
section = this.book.spine.get(spinePos);
|
||||
} else {
|
||||
section = this.book.spine.get(target);
|
||||
}
|
||||
|
||||
this.displaying = true;
|
||||
this.hide();
|
||||
|
||||
if(section){
|
||||
view = new EPUBJS.View(section, this.viewSettings);
|
||||
|
||||
var displaying = new RSVP.defer();
|
||||
var displayed = displaying.promise;
|
||||
|
||||
var section = this.book.spine.get(what);
|
||||
var view;
|
||||
|
||||
this.displaying = true;
|
||||
|
||||
if(section){
|
||||
view = new EPUBJS.View(section, this.viewSettings);
|
||||
|
||||
// This will clear all previous views
|
||||
this.q.enqueue(this.fill, view);
|
||||
// This will clear all previous views
|
||||
this.q.enqueue(this.fill, view).then(function(){
|
||||
|
||||
//this.q.enqueue(function(){
|
||||
// Move to correct place within the section, if needed
|
||||
// return this.moveTo(what)
|
||||
//});
|
||||
|
||||
this.q.enqueue(this.check);
|
||||
|
||||
this.hooks.display.trigger(view);
|
||||
// Move to correct place within the section, if needed
|
||||
this.q.enqueue(function(){
|
||||
|
||||
// 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"));
|
||||
}
|
||||
|
||||
return displayed;
|
||||
}, what);
|
||||
var offset = view.locationOf(target);
|
||||
|
||||
return this.moveTo(offset);
|
||||
|
||||
});
|
||||
|
||||
this.q.enqueue(this.check);
|
||||
|
||||
this.q.enqueue(this.show);
|
||||
|
||||
this.hooks.display.trigger(view);
|
||||
|
||||
}.bind(this));
|
||||
|
||||
// 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"));
|
||||
}
|
||||
|
||||
return displayed;
|
||||
};
|
||||
|
||||
|
||||
// Takes a cfi, fragment or page?
|
||||
EPUBJS.Continuous.prototype.moveTo = function(what){
|
||||
|
||||
EPUBJS.Continuous.prototype.moveTo = function(offset){
|
||||
var bounds = this.bounds();
|
||||
var dist = Math.floor(offset.top / bounds.height) * bounds.height;
|
||||
|
||||
return this.check(0, dist+this.settings.offset).then(function(){
|
||||
|
||||
if(this.settings.axis === "vertical") {
|
||||
this.scrollBy(0, dist);
|
||||
} else {
|
||||
this.scrollBy(dist, 0);
|
||||
}
|
||||
|
||||
}.bind(this));
|
||||
};
|
||||
|
||||
EPUBJS.Continuous.prototype.afterDisplayed = function(currView){
|
||||
|
|
@ -106,7 +130,7 @@ EPUBJS.Continuous.prototype.afterDisplayed = function(currView){
|
|||
}
|
||||
|
||||
// this.removeShownListeners(currView);
|
||||
currView.onShown = this.afterDisplayed.bind(this);
|
||||
// currView.onShown = this.afterDisplayed.bind(this);
|
||||
|
||||
this.trigger("displayed", currView.section);
|
||||
|
||||
|
|
@ -118,7 +142,7 @@ EPUBJS.Continuous.prototype.removeShownListeners = function(view){
|
|||
|
||||
// view.off("shown", this.afterDisplayed);
|
||||
// view.off("shown", this.afterDisplayedAbove);
|
||||
view.onShown = function(){};
|
||||
view.onDisplayed = function(){};
|
||||
|
||||
};
|
||||
|
||||
|
|
@ -127,7 +151,7 @@ EPUBJS.Continuous.prototype.append = function(view){
|
|||
this.container.appendChild(view.element);
|
||||
|
||||
// view.on("shown", this.afterDisplayed.bind(this));
|
||||
view.onShown = this.afterDisplayed.bind(this);
|
||||
view.onDisplayed = this.afterDisplayed.bind(this);
|
||||
|
||||
//this.q.enqueue(this.check);
|
||||
return this.check();
|
||||
|
|
@ -138,7 +162,7 @@ EPUBJS.Continuous.prototype.prepend = function(view){
|
|||
this.container.insertBefore(view.element, this.container.firstChild);
|
||||
|
||||
// view.on("shown", this.afterDisplayedAbove.bind(this));
|
||||
view.onShown = this.afterDisplayed.bind(this);
|
||||
view.onDisplayed = this.afterDisplayed.bind(this);
|
||||
|
||||
view.on("resized", this.counter.bind(this));
|
||||
|
||||
|
|
@ -167,9 +191,12 @@ EPUBJS.Continuous.prototype.fill = function(view){
|
|||
this.container.appendChild(view.element);
|
||||
|
||||
// view.on("shown", this.afterDisplayed.bind(this));
|
||||
view.onShown = this.afterDisplayed.bind(this);
|
||||
view.onDisplayed = this.afterDisplayed.bind(this);
|
||||
|
||||
return this.render(view);
|
||||
return this.render(view)
|
||||
.then(function(){
|
||||
return this.check();
|
||||
}.bind(this));
|
||||
};
|
||||
|
||||
EPUBJS.Continuous.prototype.insert = function(view, index) {
|
||||
|
|
@ -185,32 +212,24 @@ EPUBJS.Continuous.prototype.insert = function(view, index) {
|
|||
return this.check();
|
||||
};
|
||||
|
||||
// Remove the render element and clean up listeners
|
||||
EPUBJS.Continuous.prototype.remove = function(view) {
|
||||
var index = this.views.indexOf(view);
|
||||
if(index > -1) {
|
||||
this.views.splice(index, 1);
|
||||
}
|
||||
// // Remove the render element and clean up listeners
|
||||
// EPUBJS.Continuous.prototype.remove = function(view) {
|
||||
// var index = this.views.indexOf(view);
|
||||
// if(index > -1) {
|
||||
// this.views.splice(index, 1);
|
||||
// }
|
||||
|
||||
this.container.removeChild(view.element);
|
||||
// this.container.removeChild(view.element);
|
||||
|
||||
view.off("resized");
|
||||
// view.off("resized");
|
||||
|
||||
if(view.shown){
|
||||
view.destroy();
|
||||
}
|
||||
// if(view.displayed){
|
||||
// view.destroy();
|
||||
// }
|
||||
|
||||
view = null;
|
||||
// view = null;
|
||||
|
||||
};
|
||||
|
||||
EPUBJS.Continuous.prototype.clear = function(){
|
||||
this.views.forEach(function(view){
|
||||
view.destroy();
|
||||
});
|
||||
|
||||
this.views = [];
|
||||
};
|
||||
// };
|
||||
|
||||
EPUBJS.Continuous.prototype.first = function() {
|
||||
return this.views[0];
|
||||
|
|
@ -224,44 +243,40 @@ EPUBJS.Continuous.prototype.each = function(func) {
|
|||
return this.views.forEach(func);
|
||||
};
|
||||
|
||||
|
||||
EPUBJS.Continuous.prototype.check = function(){
|
||||
EPUBJS.Continuous.prototype.check = function(_offset){
|
||||
var checking = new RSVP.defer();
|
||||
var container;//this.container.getBoundingClientRect();
|
||||
var container = this.bounds();
|
||||
var promises = [];
|
||||
var offset = _offset || this.settings.offset;
|
||||
|
||||
if(!this.settings.height) {
|
||||
container = EPUBJS.core.windowBounds();
|
||||
} else {
|
||||
container = this.container.getBoundingClientRect();
|
||||
}
|
||||
|
||||
this.views.forEach(function(view){
|
||||
var visible = this.isVisible(view, this.settings.offset, container);
|
||||
|
||||
var visible = this.isVisible(view, offset, offset, container);
|
||||
|
||||
if(visible) {
|
||||
|
||||
if(!view.shown && !view.rendering) {
|
||||
if(!view.displayed && !view.rendering) {
|
||||
// console.log("render",view.section.index)
|
||||
promises.push(this.render(view));
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
if(view.shown) {
|
||||
if(view.displayed) {
|
||||
// console.log("destroy", view.section.index)
|
||||
view.destroy();
|
||||
this.q.enqueue(this.trim);
|
||||
this.q.enqueue(view.destroy.bind(view));
|
||||
// view.destroy();
|
||||
//this.q.enqueue(this.trim);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}.bind(this));
|
||||
|
||||
// clearTimeout(this.trimTimeout);
|
||||
// this.trimTimeout = setTimeout(function(){
|
||||
// this.q.enqueue(this.trim);
|
||||
// }.bind(this), 250);
|
||||
clearTimeout(this.trimTimeout);
|
||||
this.trimTimeout = setTimeout(function(){
|
||||
this.q.enqueue(this.trim);
|
||||
}.bind(this), 250);
|
||||
|
||||
if(promises.length){
|
||||
|
||||
|
|
@ -279,25 +294,47 @@ EPUBJS.Continuous.prototype.check = function(){
|
|||
|
||||
};
|
||||
|
||||
// EPUBJS.Continuous.prototype.trim = function(){
|
||||
// var task = new RSVP.defer();
|
||||
// var above = true;
|
||||
|
||||
// this.views.forEach(function(view, i){
|
||||
// // var view = this.views[i];
|
||||
// var prevShown = i > 0 ? this.views[i-1].displayed : false;
|
||||
// var nextShown = (i+1 < this.views.length) ? this.views[i+1].displayed : false;
|
||||
// if(!view.displayed && !prevShown && !nextShown) {
|
||||
// // Remove
|
||||
// this.erase(view, above);
|
||||
// }
|
||||
// if(nextShown) {
|
||||
// above = false;
|
||||
// }
|
||||
// }.bind(this));
|
||||
|
||||
// task.resolve();
|
||||
// return task.promise;
|
||||
// };
|
||||
|
||||
EPUBJS.Continuous.prototype.trim = function(){
|
||||
var task = new RSVP.defer();
|
||||
var above = true;
|
||||
var task = new RSVP.defer();
|
||||
var displayed = this.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);
|
||||
|
||||
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.erase(view, above);
|
||||
}
|
||||
if(nextShown) {
|
||||
above = false;
|
||||
}
|
||||
}.bind(this));
|
||||
for (var i = 0; i < above.length-1; i++) {
|
||||
this.erase(above[i], above);
|
||||
};
|
||||
|
||||
task.resolve();
|
||||
return task.promise;
|
||||
for (var i = 1; i < below.length; i++) {
|
||||
this.erase(below[i]);
|
||||
};
|
||||
|
||||
task.resolve();
|
||||
return task.promise;
|
||||
};
|
||||
|
||||
EPUBJS.Continuous.prototype.erase = function(view, above){ //Trim
|
||||
|
|
@ -476,6 +513,7 @@ EPUBJS.Continuous.prototype.scrollBy = function(x, y, silent){
|
|||
} else {
|
||||
window.scrollBy(x,y);
|
||||
}
|
||||
// console.log("scrollBy", x, y);
|
||||
this.scrolled = true;
|
||||
};
|
||||
|
||||
|
|
@ -490,7 +528,7 @@ EPUBJS.Continuous.prototype.scrollTo = function(x, y, silent){
|
|||
} else {
|
||||
window.scrollTo(x,y);
|
||||
}
|
||||
|
||||
// console.log("scrollTo", x, y);
|
||||
this.scrolled = true;
|
||||
// if(this.container.scrollLeft != x){
|
||||
// setTimeout(function() {
|
||||
|
|
@ -510,11 +548,26 @@ EPUBJS.Continuous.prototype.scrollTo = function(x, y, silent){
|
|||
|
||||
};
|
||||
|
||||
EPUBJS.Continuous.prototype.destroy = function() {
|
||||
|
||||
this.clear();
|
||||
EPUBJS.Continuous.prototype.currentLocation = function(){
|
||||
var visible = this.visible();
|
||||
var startPage, endPage;
|
||||
|
||||
this.element.removeChild(this.container);
|
||||
var container = this.container.getBoundingClientRect()
|
||||
|
||||
if(visible.length === 1) {
|
||||
return this.map.page(visible[0]);
|
||||
}
|
||||
|
||||
if(visible.length > 1) {
|
||||
|
||||
startPage = this.map.page(visible[0]);
|
||||
endPage = this.map.page(visible[visible.length-1]);
|
||||
|
||||
return {
|
||||
start: startPage.start,
|
||||
end: endPage.end
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue