mirror of
https://github.com/futurepress/epub.js.git
synced 2025-10-03 14:59:18 +02:00
361 lines
No EOL
9.6 KiB
JavaScript
361 lines
No EOL
9.6 KiB
JavaScript
EPUBJS.View = function(section) {
|
|
this.id = "epubjs-view:" + EPUBJS.core.uuid();
|
|
this.displaying = new RSVP.defer();
|
|
this.displayed = this.displaying.promise;
|
|
this.section = section;
|
|
this.index = section.index;
|
|
|
|
this.element = document.createElement('div');
|
|
this.element.classList.add("epub-view");
|
|
this.element.style.display = "inline-block";
|
|
// this.element.style.minHeight = "100px";
|
|
this.element.style.height = "0px";
|
|
this.element.style.width = "0px";
|
|
this.element.style.overflow = "hidden";
|
|
|
|
|
|
this.shown = false;
|
|
this.rendered = false;
|
|
|
|
this.observe = false;
|
|
|
|
this.width = 0;
|
|
this.height = 0;
|
|
|
|
this.paddingTopBottom = 0;
|
|
this.paddingLeftRight = 0;
|
|
this.marginTopBottom = 0;
|
|
this.marginLeftRight = 0;
|
|
this.borderTopBottom = 0;
|
|
this.borderLeftRight = 0;
|
|
|
|
this.elpaddingTopBottom = 0;
|
|
this.elpaddingLeftRight = 0;
|
|
this.elmarginTopBottom = 0;
|
|
this.elmarginLeftRight = 0;
|
|
this.elborderTopBottom = 0;
|
|
this.elborderLeftRight = 0;
|
|
|
|
};
|
|
|
|
EPUBJS.View.prototype.create = function(width, height) {
|
|
|
|
if(this.iframe) {
|
|
return this.iframe;
|
|
}
|
|
|
|
this.iframe = document.createElement('iframe');
|
|
this.iframe.id = this.id;
|
|
this.iframe.scrolling = "no";
|
|
this.iframe.seamless = "seamless";
|
|
// Back up if seamless isn't supported
|
|
this.iframe.style.border = "none";
|
|
|
|
this.resizing = true;
|
|
|
|
|
|
|
|
// this.iframe.style.display = "none";
|
|
this.iframe.style.visibility = "hidden";
|
|
|
|
this.element.appendChild(this.iframe);
|
|
this.rendered = true;
|
|
|
|
if(width || height){
|
|
this.resize(width, height);
|
|
}
|
|
|
|
if(this.width && this.height){
|
|
this.resize(this.width, this.height);
|
|
}
|
|
|
|
return this.iframe;
|
|
};
|
|
|
|
// TODO: minimize resizes
|
|
EPUBJS.View.prototype.resize = function(width, height) {
|
|
var borders = this.borders();
|
|
|
|
if(width){
|
|
|
|
if(this.iframe) {
|
|
this.iframe.style.width = width + "px";
|
|
}
|
|
if(this.shown) {
|
|
this.element.style.width = width + borders.width + "px";
|
|
}
|
|
}
|
|
|
|
if(height){
|
|
if(this.iframe) {
|
|
this.iframe.style.height = height + "px";
|
|
}
|
|
if(this.shown) {
|
|
this.element.style.height = height + borders.height + "px";
|
|
}
|
|
}
|
|
|
|
if (!this.resizing) {
|
|
this.resizing = true;
|
|
if(this.iframe) {
|
|
this.expand();
|
|
}
|
|
}
|
|
|
|
};
|
|
|
|
EPUBJS.View.prototype.resized = function(e) {
|
|
|
|
if (!this.resizing) {
|
|
if(this.iframe) {
|
|
// this.expand();
|
|
}
|
|
} else {
|
|
this.resizing = false;
|
|
}
|
|
|
|
};
|
|
|
|
EPUBJS.View.prototype.display = function(_request) {
|
|
return this.section.render(_request)
|
|
.then(function(contents){
|
|
return this.load(contents);
|
|
}.bind(this))
|
|
.then(this.afterLoad.bind(this))
|
|
.then(this.displaying.resolve.call(this));
|
|
};
|
|
|
|
EPUBJS.View.prototype.load = function(contents) {
|
|
var loading = new RSVP.defer();
|
|
var loaded = loading.promise;
|
|
|
|
this.document = this.iframe.contentDocument;
|
|
|
|
if(!this.document) {
|
|
loading.reject(new Error("No Document Available"));
|
|
return loaded;
|
|
}
|
|
|
|
this.iframe.addEventListener("load", function(event) {
|
|
|
|
this.window = this.iframe.contentWindow;
|
|
this.document = this.iframe.contentDocument;
|
|
|
|
loading.resolve(this);
|
|
|
|
}.bind(this));
|
|
|
|
|
|
// this.iframe.srcdoc = contents;
|
|
this.document.open();
|
|
this.document.write(contents);
|
|
this.document.close();
|
|
|
|
return loaded;
|
|
};
|
|
|
|
|
|
EPUBJS.View.prototype.afterLoad = function() {
|
|
|
|
// this.iframe.style.display = "block";
|
|
this.iframe.style.display = "inline-block";
|
|
|
|
|
|
// Reset Body Styles
|
|
this.document.body.style.margin = "0";
|
|
this.document.body.style.display = "inline-block";
|
|
this.document.documentElement.style.width = "auto";
|
|
|
|
setTimeout(function(){
|
|
this.window.addEventListener("resize", this.resized.bind(this), false);
|
|
}.bind(this), 10); // Wait to listen for resize events
|
|
|
|
|
|
// Wait for fonts to load to finish
|
|
if(this.document.fonts && this.document.fonts.status === "loading") {
|
|
this.document.fonts.onloading = function(){
|
|
this.expand();
|
|
}.bind(this);
|
|
}
|
|
|
|
if(this.observe) {
|
|
this.observer = this.observe(this.document.body);
|
|
}
|
|
|
|
};
|
|
|
|
EPUBJS.View.prototype.expand = function(_defer, _count, _func) {
|
|
var bounds;
|
|
var width, height;
|
|
var expanding = _defer || new RSVP.defer();
|
|
var expanded = expanding.promise;
|
|
// var fontsLoading = false;
|
|
// Stop checking for equal height after 10 tries
|
|
var MAX = 10;
|
|
var count = _count || 1;
|
|
var TIMEOUT = 10 * _count;
|
|
|
|
// Flag Changes
|
|
this.resizing = true;
|
|
|
|
// Check bounds
|
|
bounds = this.document.body.getBoundingClientRect();
|
|
if(!bounds || (bounds.height === 0 && bounds.width === 0)) {
|
|
console.error("View not shown");
|
|
|
|
// setTimeout(function(){
|
|
// this.expand(expanding, count);
|
|
// }.bind(this), TIMEOUT);
|
|
|
|
return expanded;
|
|
}
|
|
|
|
|
|
height = bounds.height; //this.document.documentElement.scrollHeight; //window.getComputedStyle?
|
|
|
|
width = this.document.documentElement.scrollWidth;
|
|
|
|
|
|
if(count <= MAX && (this.width != width || this.height != height)) {
|
|
// this.iframe.style.height = height + "px";
|
|
// this.iframe.style.width = width + "px";
|
|
this.resize(width, height);
|
|
|
|
setTimeout(function(){
|
|
count += 1;
|
|
if(_func){
|
|
_func(this);
|
|
}
|
|
this.expand(expanding, count, _func);
|
|
}.bind(this), TIMEOUT);
|
|
|
|
} else {
|
|
expanding.resolve();
|
|
}
|
|
|
|
this.width = width;
|
|
this.height = height;
|
|
|
|
// expanding.resolve();
|
|
return expanded;
|
|
};
|
|
|
|
EPUBJS.View.prototype.observe = function(target) {
|
|
var renderer = this;
|
|
|
|
// create an observer instance
|
|
var observer = new MutationObserver(function(mutations) {
|
|
renderer.expand();
|
|
// mutations.forEach(function(mutation) {
|
|
// console.log(mutation)
|
|
// });
|
|
});
|
|
|
|
// configuration of the observer:
|
|
var config = { attributes: true, childList: true, characterData: true, subtree: true };
|
|
|
|
// pass in the target node, as well as the observer options
|
|
observer.observe(target, config);
|
|
|
|
return observer;
|
|
};
|
|
|
|
// EPUBJS.View.prototype.appendTo = function(element) {
|
|
// this.element = element;
|
|
// this.element.appendChild(this.iframe);
|
|
// };
|
|
//
|
|
// EPUBJS.View.prototype.prependTo = function(element) {
|
|
// this.element = element;
|
|
// element.insertBefore(this.iframe, element.firstChild);
|
|
// };
|
|
|
|
EPUBJS.View.prototype.show = function() {
|
|
// this.iframe.style.display = "block";
|
|
|
|
var borders = this.borders();
|
|
|
|
this.element.style.width = this.width + borders.width + "px";
|
|
this.element.style.height = this.height + borders.height + "px";
|
|
// this.iframe.style.display = "inline-block";
|
|
this.iframe.style.visibility = "visible";
|
|
|
|
this.shown = true;
|
|
|
|
this.onShown(this);
|
|
this.trigger("shown", this);
|
|
};
|
|
|
|
EPUBJS.View.prototype.hide = function() {
|
|
// this.iframe.style.display = "none";
|
|
// this.iframe.style.visibility = "hidden";
|
|
this.trigger("hidden");
|
|
};
|
|
|
|
EPUBJS.View.prototype.position = function() {
|
|
return this.element.getBoundingClientRect();
|
|
};
|
|
|
|
EPUBJS.View.prototype.onShown = function(view) {
|
|
// Stub, override with a custom functions
|
|
};
|
|
|
|
EPUBJS.View.prototype.borders = function() {
|
|
|
|
if(this.iframe && !this.iframeStyle) {
|
|
this.iframeStyle = window.getComputedStyle(this.iframe);
|
|
|
|
this.paddingTopBottom = (parseInt(this.iframeStyle.paddingTop) + parseInt(this.iframeStyle.paddingBottom)) || 0;
|
|
this.paddingLeftRight = (parseInt(this.iframeStyle.paddingLeft) + parseInt(this.iframeStyle.paddingRight)) || 0;
|
|
this.marginTopBottom = (parseInt(this.iframeStyle.marginTop) + parseInt(this.iframeStyle.marginBottom)) || 0;
|
|
this.marginLeftRight = (parseInt(this.iframeStyle.marginLeft) + parseInt(this.iframeStyle.marginRight)) || 0;
|
|
this.borderTopBottom = (parseInt(this.iframeStyle.borderTop) + parseInt(this.iframeStyle.borderBottom)) || 0;
|
|
this.borderLeftRight = (parseInt(this.iframeStyle.borderLeft) + parseInt(this.iframeStyle.borderRight)) || 0;
|
|
}
|
|
|
|
if(this.element && !this.elementStyle) {
|
|
|
|
this.elementStyle = window.getComputedStyle(this.element);
|
|
|
|
this.elpaddingTopBottom = (parseInt(this.elementStyle.paddingTop) + parseInt(this.elementStyle.paddingBottom)) || 0;
|
|
this.elpaddingLeftRight = (parseInt(this.elementStyle.paddingLeft) + parseInt(this.elementStyle.paddingRight)) || 0;
|
|
this.elmarginTopBottom = (parseInt(this.elementStyle.marginTop) + parseInt(this.elementStyle.marginBottom)) || 0;
|
|
this.elmarginLeftRight = (parseInt(this.elementStyle.marginLeft) + parseInt(this.elementStyle.marginRight)) || 0;
|
|
this.elborderTopBottom = (parseInt(this.elementStyle.borderTop) + parseInt(this.elementStyle.borderBottom)) || 0;
|
|
this.elborderLeftRight = (parseInt(this.elementStyle.borderLeft) + parseInt(this.elementStyle.borderRight)) || 0;
|
|
}
|
|
|
|
return {
|
|
height: this.paddingTopBottom + this.marginTopBottom + this.borderTopBottom,
|
|
width: this.paddingLeftRight + this.marginLeftRight + this.borderLeftRight
|
|
}
|
|
};
|
|
|
|
EPUBJS.View.prototype.bounds = function() {
|
|
// var bounds = this.element.getBoundingClientRect();
|
|
// var bounds = {
|
|
// width: this.element.offsetWidth,
|
|
// height: this.element.offsetHeight
|
|
// };
|
|
|
|
return {
|
|
height: this.height + this.paddingTopBottom + this.marginTopBottom + this.borderTopBottom + this.elpaddingTopBottom + this.elmarginTopBottom + this.elborderTopBottom,
|
|
width: this.width + this.paddingLeftRight + this.marginLeftRight + this.borderLeftRight + this.elpaddingLeftRight + this.elmarginLeftRight + this.elborderLeftRight
|
|
}
|
|
};
|
|
|
|
EPUBJS.View.prototype.destroy = function() {
|
|
// Stop observing
|
|
// this.observer.disconnect();
|
|
|
|
if(this.iframe){
|
|
this.element.removeChild(this.iframe);
|
|
this.shown = false;
|
|
this.iframe = null;
|
|
}
|
|
|
|
// this.element.style.height = "0px";
|
|
// this.element.style.width = "0px";
|
|
};
|
|
|
|
RSVP.EventTarget.mixin(EPUBJS.View.prototype); |