mirror of
https://github.com/futurepress/epub.js.git
synced 2025-10-03 14:59:18 +02:00
586 lines
13 KiB
JavaScript
586 lines
13 KiB
JavaScript
EPUBJS.Rendition = function(book, options) {
|
|
this.settings = EPUBJS.core.defaults(options || {}, {
|
|
infinite: true,
|
|
hidden: false,
|
|
width: false,
|
|
height: false,
|
|
overflow: "auto",
|
|
axis: "vertical",
|
|
offset: 500
|
|
});
|
|
|
|
this.book = book;
|
|
|
|
this.container = this.initialize({
|
|
"width" : this.settings.width,
|
|
"height" : this.settings.height
|
|
});
|
|
|
|
if(this.settings.hidden) {
|
|
this.wrapper = this.wrap(this.container);
|
|
}
|
|
|
|
this.views = [];
|
|
|
|
|
|
//-- Adds Hook methods to the Renderer prototype
|
|
this.hooks = {};
|
|
this.hooks.display = new EPUBJS.Hook(this);
|
|
this.hooks.replacements = new EPUBJS.Hook(this);
|
|
|
|
this.hooks.replacements.register(EPUBJS.replace.links.bind(this));
|
|
// this.hooks.display.register(this.afterDisplay.bind(this));
|
|
|
|
if(this.settings.infinite) {
|
|
this.infinite = new EPUBJS.Infinite(this.container);
|
|
this.infinite.on("scroll", this.check.bind(this));
|
|
}
|
|
|
|
this.q = new EPUBJS.Queue(this);
|
|
|
|
this.q.enqueue(this.book.opened);
|
|
|
|
};
|
|
|
|
/**
|
|
* Creates an element to render to.
|
|
* Resizes to passed width and height or to the elements size
|
|
*/
|
|
EPUBJS.Rendition.prototype.initialize = function(_options){
|
|
var options = _options || {};
|
|
var height = options.height !== false ? options.height : "100%";
|
|
var width = options.width !== false ? options.width : "100%";
|
|
var hidden = options.hidden || false;
|
|
var container;
|
|
var wrapper;
|
|
|
|
if(options.height && EPUBJS.core.isNumber(options.height)) {
|
|
height = options.height + "px";
|
|
}
|
|
|
|
if(options.width && EPUBJS.core.isNumber(options.width)) {
|
|
width = options.width + "px";
|
|
}
|
|
|
|
// Create new container element
|
|
container = document.createElement("div");
|
|
|
|
// Style Element
|
|
if(this.settings.axis === "horizontal") {
|
|
// this.container.style.display = "flex";
|
|
// this.container.style.flexWrap = "nowrap";
|
|
container.style.whiteSpace = "nowrap";
|
|
}
|
|
|
|
container.style.width = width;
|
|
container.style.height = height;
|
|
container.style.overflow = this.settings.overflow;
|
|
|
|
return container;
|
|
};
|
|
|
|
EPUBJS.Rendition.wrap = function(container) {
|
|
var wrapper = document.createElement("div");
|
|
|
|
wrapper.style.visibility = "hidden";
|
|
wrapper.style.overflow = "hidden";
|
|
wrapper.style.width = "0";
|
|
wrapper.style.height = "0";
|
|
|
|
wrapper.appendChild(container);
|
|
return wrapper;
|
|
};
|
|
|
|
// Call to attach the container to an element in the dom
|
|
// Container must be attached before rendering can begin
|
|
EPUBJS.Rendition.prototype.attachTo = function(_element){
|
|
var bounds;
|
|
|
|
if(EPUBJS.core.isElement(_element)) {
|
|
this.element = _element;
|
|
} else if (typeof _element === "string") {
|
|
this.element = document.getElementById(_element);
|
|
}
|
|
|
|
if(!this.element){
|
|
console.error("Not an Element");
|
|
return;
|
|
}
|
|
|
|
// If width or height are not set, inherit them from containing element
|
|
if(this.settings.height === false) {
|
|
bounds = this.element.getBoundingClientRect();
|
|
this.container.style.height = bounds.height + "px";
|
|
}
|
|
|
|
if(this.settings.width === false) {
|
|
bounds = bounds || this.element.getBoundingClientRect();
|
|
this.container.style.width = bounds.width + "px";
|
|
}
|
|
|
|
this.element.appendChild(this.container);
|
|
|
|
// Attach Listeners
|
|
this.attachListeners();
|
|
|
|
// Trigger Attached
|
|
|
|
// Start processing queue
|
|
this.q.run();
|
|
|
|
};
|
|
|
|
EPUBJS.Rendition.prototype.attachListeners = function(){
|
|
|
|
// Listen to window for resize event
|
|
window.addEventListener("resize", this.onResized.bind(this), false);
|
|
|
|
|
|
};
|
|
|
|
EPUBJS.Rendition.prototype.bounds = function() {
|
|
return this.container.getBoundingClientRect();
|
|
};
|
|
|
|
EPUBJS.Rendition.prototype.display = function(what){
|
|
|
|
return this.q.enqueue(function(what){
|
|
|
|
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 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));
|
|
|
|
} else {
|
|
displaying.reject(new Error("No Section Found"));
|
|
}
|
|
|
|
return displayed;
|
|
}, what);
|
|
|
|
};
|
|
/*
|
|
EPUBJS.Rendition.prototype.load = function(what){
|
|
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 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));
|
|
|
|
} else {
|
|
displaying.reject(new Error("No Section Found"));
|
|
}
|
|
|
|
return displayed;
|
|
};
|
|
*/
|
|
// Takes a cfi, fragment or page?
|
|
EPUBJS.Rendition.prototype.moveTo = function(what){
|
|
|
|
};
|
|
|
|
EPUBJS.Rendition.prototype.render = function(view) {
|
|
// var view = new EPUBJS.View(section);
|
|
//
|
|
// if(!section) {
|
|
// rendered = new RSVP.defer();
|
|
// rendered.reject(new Error("No Section Provided"));
|
|
// return rendered.promise;
|
|
// }
|
|
this.rendering = true;
|
|
|
|
view.create();
|
|
|
|
// Fit to size of the container, apply padding
|
|
this.resizeView(view);
|
|
|
|
// Render Chain
|
|
return view.display(this.book.request)
|
|
.then(function(){
|
|
return this.hooks.display.trigger(view);
|
|
}.bind(this))
|
|
.then(function(){
|
|
return this.hooks.replacements.trigger(view, this);
|
|
}.bind(this))
|
|
.then(function(){
|
|
return view.expand();
|
|
}.bind(this))
|
|
.then(function(){
|
|
view.show();
|
|
this.trigger("rendered", view.section);
|
|
this.rendering = false;
|
|
this.check(); // Check to see if anything new is on screen after rendering
|
|
return view;
|
|
}.bind(this))
|
|
.catch(function(e){
|
|
this.trigger("loaderror", e);
|
|
}.bind(this));
|
|
|
|
};
|
|
|
|
EPUBJS.Rendition.prototype.afterDisplayed = function(currView){
|
|
var next = currView.section.next();
|
|
var prev = currView.section.prev();
|
|
var index = this.views.indexOf(currView);
|
|
|
|
var prevView, nextView;
|
|
|
|
this.resizeView(currView);
|
|
|
|
if(index + 1 === this.views.length && next) {
|
|
nextView = new EPUBJS.View(next);
|
|
this.append(nextView);
|
|
}
|
|
|
|
if(index === 0 && prev) {
|
|
prevView = new EPUBJS.View(prev);
|
|
this.prepend(prevView);
|
|
}
|
|
|
|
this.removeShownListeners(currView);
|
|
|
|
};
|
|
|
|
EPUBJS.Rendition.prototype.afterDisplayedAbove = function(currView){
|
|
|
|
var bounds, style, marginTopBottom, marginLeftRight;
|
|
var prevTop = this.container.scrollTop;
|
|
var prevLeft = this.container.scrollLeft;
|
|
|
|
this.afterDisplayed(currView);
|
|
|
|
if(currView.countered) return;
|
|
|
|
bounds = currView.bounds();
|
|
|
|
if(this.settings.axis === "vertical") {
|
|
this.infinite.scrollTo(0, prevTop + bounds.height, true)
|
|
} else {
|
|
this.infinite.scrollTo(prevLeft + bounds.width, 0, true);
|
|
}
|
|
|
|
currView.countered = true;
|
|
|
|
this.removeShownListeners(currView);
|
|
|
|
if(this.afterDisplayedAboveHook) this.afterDisplayedAboveHook(currView);
|
|
|
|
};
|
|
|
|
// Remove Previous Listeners if present
|
|
EPUBJS.Rendition.prototype.removeShownListeners = function(view){
|
|
|
|
view.off("shown", this.afterDisplayed);
|
|
view.off("shown", this.afterDisplayedAbove);
|
|
|
|
};
|
|
|
|
EPUBJS.Rendition.prototype.append = function(view){
|
|
this.views.push(view);
|
|
// view.appendTo(this.container);
|
|
this.container.appendChild(view.element);
|
|
|
|
|
|
view.on("shown", this.afterDisplayed.bind(this));
|
|
// this.resizeView(view);
|
|
};
|
|
|
|
EPUBJS.Rendition.prototype.prepend = function(view){
|
|
this.views.unshift(view);
|
|
// view.prependTo(this.container);
|
|
this.container.insertBefore(view.element, this.container.firstChild);
|
|
|
|
view.on("shown", this.afterDisplayedAbove.bind(this));
|
|
|
|
// this.resizeView(view);
|
|
|
|
};
|
|
|
|
EPUBJS.Rendition.prototype.fill = function(view){
|
|
|
|
if(this.views.length){
|
|
this.clear();
|
|
}
|
|
|
|
this.views.push(view);
|
|
|
|
this.container.appendChild(view.element);
|
|
|
|
view.on("shown", this.afterDisplayed.bind(this));
|
|
|
|
};
|
|
|
|
EPUBJS.Rendition.prototype.insert = function(view, index) {
|
|
this.views.splice(index, 0, view);
|
|
|
|
if(index < this.cotainer.children.length){
|
|
this.container.insertBefore(view.element, this.container.children[index]);
|
|
} else {
|
|
this.container.appendChild(view.element);
|
|
}
|
|
|
|
};
|
|
|
|
// Remove the render element and clean up listeners
|
|
EPUBJS.Rendition.prototype.remove = function(view) {
|
|
var index = this.views.indexOf(view);
|
|
if(index > -1) {
|
|
this.views.splice(index, 1);
|
|
}
|
|
|
|
this.container.removeChild(view.element);
|
|
|
|
if(view.shown){
|
|
view.destroy();
|
|
}
|
|
|
|
view = null;
|
|
|
|
};
|
|
|
|
EPUBJS.Rendition.prototype.clear = function(){
|
|
this.views.forEach(function(view){
|
|
view.destroy();
|
|
});
|
|
|
|
this.views = [];
|
|
};
|
|
|
|
EPUBJS.Rendition.prototype.first = function() {
|
|
return this.views[0];
|
|
};
|
|
|
|
EPUBJS.Rendition.prototype.last = function() {
|
|
return this.views[this.views.length-1];
|
|
};
|
|
|
|
EPUBJS.Rendition.prototype.each = function(func) {
|
|
return this.views.forEach(func);
|
|
};
|
|
|
|
EPUBJS.Rendition.prototype.isVisible = function(view, _container){
|
|
var position = view.position();
|
|
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
|
|
|
|
// Fit to size of the container, apply padding
|
|
// this.resizeView(view);
|
|
if(!view.shown && !this.rendering) {
|
|
console.log("render", view.index);
|
|
this.render(view);
|
|
}
|
|
|
|
} else {
|
|
|
|
if(view.shown) {
|
|
// console.log("off screen", view.index);
|
|
view.destroy();
|
|
console.log("destroy:", view.section.index)
|
|
}
|
|
}
|
|
};
|
|
|
|
EPUBJS.Rendition.prototype.check = function(){
|
|
var container = this.container.getBoundingClientRect();
|
|
this.views.forEach(function(view){
|
|
this.isVisible(view, container);
|
|
}.bind(this));
|
|
|
|
clearTimeout(this.trimTimeout);
|
|
this.trimTimeout = setTimeout(function(){
|
|
this.trim();
|
|
}.bind(this), 250);
|
|
|
|
};
|
|
|
|
EPUBJS.Rendition.prototype.trim = function(){
|
|
var above = true;
|
|
for (var i = 0; i < this.views.length; 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;
|
|
}
|
|
}
|
|
};
|
|
|
|
EPUBJS.Rendition.prototype.erase = function(view, above){ //Trim
|
|
|
|
// remove from dom
|
|
var prevTop = this.container.scrollTop;
|
|
var prevLeft = this.container.scrollLeft;
|
|
var bounds = view.bounds();
|
|
|
|
this.remove(view);
|
|
|
|
if(above) {
|
|
if(this.settings.axis === "vertical") {
|
|
this.infinite.scrollTo(0, prevTop - bounds.height, true);
|
|
} else {
|
|
console.log("remove left:", view.section.index)
|
|
this.infinite.scrollTo(prevLeft - bounds.width, 0, true);
|
|
}
|
|
}
|
|
|
|
};
|
|
|
|
|
|
EPUBJS.Rendition.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);
|
|
}
|
|
|
|
};
|
|
|
|
EPUBJS.Rendition.prototype.resize = function(_width, _height){
|
|
var width = _width;
|
|
var height = _height;
|
|
|
|
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 stagewidth = width - padding.left - padding.right;
|
|
var stageheight = height - padding.top - padding.bottom;
|
|
|
|
if(!_width) {
|
|
width = window.innerWidth;
|
|
}
|
|
if(!_height) {
|
|
height = window.innerHeight;
|
|
}
|
|
|
|
// this.container.style.width = width + "px";
|
|
// this.container.style.height = height + "px";
|
|
|
|
this.trigger("resized", {
|
|
width: this.width,
|
|
height: this.height
|
|
});
|
|
|
|
|
|
this.views.forEach(function(view){
|
|
if(this.settings.axis === "vertical") {
|
|
view.resize(stagewidth, 0);
|
|
} else {
|
|
view.resize(0, stageheight);
|
|
}
|
|
}.bind(this));
|
|
|
|
};
|
|
|
|
EPUBJS.Rendition.prototype.onResized = function(e) {
|
|
var bounds = this.element.getBoundingClientRect();
|
|
|
|
|
|
this.resize(bounds.width, bounds.height);
|
|
};
|
|
|
|
EPUBJS.Rendition.prototype.paginate = function(options) {
|
|
this.pagination = new EPUBJS.Paginate(this, {
|
|
width: this.settings.width,
|
|
height: this.settings.height
|
|
});
|
|
return this.pagination;
|
|
};
|
|
|
|
EPUBJS.Renderer.prototype.checkCurrent = function(position) {
|
|
var view, top;
|
|
var container = this.container.getBoundingClientRect();
|
|
var length = this.views.length - 1;
|
|
|
|
if(this.rendering) {
|
|
return;
|
|
}
|
|
|
|
if(this.settings.axis === "horizontal") {
|
|
// TODO: Check for current horizontal
|
|
} else {
|
|
|
|
for (var i = length; i >= 0; i--) {
|
|
view = this.views[i];
|
|
top = view.bounds().top;
|
|
if(top < container.bottom) {
|
|
|
|
if(this.current == view.section) {
|
|
break;
|
|
}
|
|
|
|
this.current = view.section;
|
|
this.trigger("current", this.current);
|
|
break;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
//-- Enable binding events to Renderer
|
|
RSVP.EventTarget.mixin(EPUBJS.Rendition.prototype);
|