yetangitu/epub.js
1
0
Fork 0
mirror of https://github.com/futurepress/epub.js.git synced 2025-10-03 14:59:18 +02:00
Code Issues Releases Wiki Activity

Updated expanding, and resize

Browse source
This commit is contained in:
Fred Chasen 2015-05-19 00:02:18 -04:00
parent a574c68975
commit 1f7a4a2ccf
9 changed files with 362 additions and 256 deletions
Download patch file Download diff file Expand all files Collapse all files

275
dist/epub.js vendored
View file

@ -2691,6 +2691,30 @@ EPUBJS.core.bounds = function(el) {
width: width width: width
} }
};
EPUBJS.core.borders = function(el) {
var style = window.getComputedStyle(el);
var widthProps = ["paddingRight", "paddingLeft", "marginRight", "marginLeft", "borderRightWidth", "borderLeftWidth"];
var heightProps = ["paddingTop", "paddingBottom", "marginTop", "marginBottom", "borderTopWidth", "borderBottomWidth"];
var width = 0;
var height = 0;
widthProps.forEach(function(prop){
width += parseFloat(style[prop]) || 0;
})
heightProps.forEach(function(prop){
height += parseFloat(style[prop]) || 0;
})
return {
height: height,
width: width
}
}; };
EPUBJS.Queue = function(_context){ EPUBJS.Queue = function(_context){
this._q = []; this._q = [];
@ -4264,7 +4288,7 @@ RSVP.configure('instrument', true); //-- true | will logging out all RSVP reject
RSVP.on('rejected', function(event){ RSVP.on('rejected', function(event){
console.error(event.detail.message, event.detail.stack); console.error(event.detail.message, event.detail.stack);
}); });
EPUBJS.View = function(section) { EPUBJS.View = function(section, horz) {
this.id = "epubjs-view:" + EPUBJS.core.uuid(); this.id = "epubjs-view:" + EPUBJS.core.uuid();
this.displaying = new RSVP.defer(); this.displaying = new RSVP.defer();
this.displayed = this.displaying.promise; this.displayed = this.displaying.promise;
@ -4274,6 +4298,7 @@ EPUBJS.View = function(section) {
this.element = document.createElement('div'); this.element = document.createElement('div');
this.element.classList.add("epub-view"); this.element.classList.add("epub-view");
this.element.style.display = "inline-block"; this.element.style.display = "inline-block";
// this.element.style.minHeight = "100px"; // this.element.style.minHeight = "100px";
this.element.style.height = "0px"; this.element.style.height = "0px";
this.element.style.width = "0px"; this.element.style.width = "0px";
@ -4320,70 +4345,99 @@ EPUBJS.View.prototype.create = function(width, height) {
this.resizing = true; this.resizing = true;
// this.iframe.style.display = "none"; // this.iframe.style.display = "none";
this.element.style.visibility = "hidden";
this.iframe.style.visibility = "hidden"; this.iframe.style.visibility = "hidden";
this.element.appendChild(this.iframe); this.element.appendChild(this.iframe);
this.rendered = true; this.rendered = true;
if(width || height){ // if(width || height){
this.resize(width, height); // this.resize(width, height);
} else if(this.width && this.height){ // } else if(this.width && this.height){
this.resize(this.width, this.height); // this.resize(this.width, this.height);
// } else {
// this.iframeBounds = EPUBJS.core.bounds(this.iframe);
// }
if(!!("srcdoc" in this.iframe)) {
this.supportsSrcdoc = true;
} else { } else {
this.iframeBounds = EPUBJS.core.bounds(this.iframe); this.supportsSrcdoc = false;
} }
return this.iframe; return this.iframe;
}; };
// TODO: minimize resizes
EPUBJS.View.prototype.lock = function(width, height) {
var borders = EPUBJS.core.borders(this.element);
if(EPUBJS.core.isNumber(width)){
this.lockedWidth = width - borders.width;
}
if(EPUBJS.core.isNumber(height)){
this.lockedHeight = height - borders.height;
}
if(this.shown) {
this.resize(this.lockedWidth, this.lockedHeight);
if (this.iframe && !this.resizing) {
//this.expand();
}
}
};
EPUBJS.View.prototype.resize = function(width, height) { EPUBJS.View.prototype.resize = function(width, height) {
if(width){ if(!this.shown) return;
if(this.iframe) { if(EPUBJS.core.isNumber(width)){
this.iframe.style.width = width + "px"; this.element.style.width = width + "px";
this.iframeBounds = EPUBJS.core.bounds(this.iframe);
}
if(this.shown) {
this.element.style.width = this.iframeBounds.width + "px";
this.elementBounds = EPUBJS.core.bounds(this.element);
}
} }
if(height){ if(EPUBJS.core.isNumber(height)){
if(this.iframe) { this.element.style.height = height + "px";
this.iframe.style.height = height + "px";
this.iframeBounds = EPUBJS.core.bounds(this.iframe);
}
if(this.shown) {
this.element.style.height = this.iframeBounds.height + "px";
this.elementBounds = EPUBJS.core.bounds(this.element);
}
} }
if (!this.resizing) { this.elementBounds = EPUBJS.core.bounds(this.element);
this.resizing = true;
if(this.iframe) { };
this.expand();
} EPUBJS.View.prototype.reframe = function(width, height) {
if(!this.iframe) return;
if(EPUBJS.core.isNumber(width)){
this.iframe.style.width = width + "px";
} }
if(EPUBJS.core.isNumber(height)){
this.iframe.style.height = height + "px";
}
this.iframeBounds = EPUBJS.core.bounds(this.iframe);
this.resize(this.iframeBounds.width, this.iframeBounds.height);
}; };
EPUBJS.View.prototype.resized = function(e) { EPUBJS.View.prototype.resized = function(e) {
/*
if (!this.resizing) { if (!this.resizing) {
if(this.iframe) { if(this.iframe) {
// this.expand(); // this.expand();
} }
} else { } else {
this.resizing = false; this.resizing = false;
} }*/
}; };
@ -4416,11 +4470,14 @@ EPUBJS.View.prototype.load = function(contents) {
}.bind(this)); }.bind(this));
if(this.supportsSrcdoc){
this.iframe.srcdoc = contents;
} else {
this.document.open();
this.document.write(contents);
this.document.close();
}
// this.iframe.srcdoc = contents;
this.document.open();
this.document.write(contents);
this.document.close();
return loaded; return loaded;
}; };
@ -4481,18 +4538,16 @@ EPUBJS.View.prototype.expand = function(_defer, _count, _func) {
return expanded; return expanded;
} }
height = this.lockedHeight || bounds.height; //this.document.documentElement.scrollHeight; //window.getComputedStyle?
height = bounds.height; //this.document.documentElement.scrollHeight; //window.getComputedStyle? width = this.lockedWidth || this.document.documentElement.scrollWidth;
width = this.document.documentElement.scrollWidth;
if(count <= MAX && (this.width != width || this.height != height)) { if(count <= MAX && (this.width != width || this.height != height) && !this.stopExpanding) {
// this.iframe.style.height = height + "px";
// this.iframe.style.width = width + "px";
this.resize(width, height);
setTimeout(function(){ this.reframe(width, height);
this.expandTimeout = setTimeout(function(){
count += 1; count += 1;
if(_func){ if(_func){
_func(this); _func(this);
@ -4501,13 +4556,16 @@ EPUBJS.View.prototype.expand = function(_defer, _count, _func) {
}.bind(this), TIMEOUT); }.bind(this), TIMEOUT);
} else { } else {
this.resizing = false;
if(this.stopExpanding){
this.stopExpanding = null;
}
expanding.resolve(); expanding.resolve();
} }
this.width = width; this.width = width;
this.height = height; this.height = height;
// expanding.resolve();
return expanded; return expanded;
}; };
@ -4542,28 +4600,27 @@ EPUBJS.View.prototype.observe = function(target) {
// }; // };
EPUBJS.View.prototype.show = function() { EPUBJS.View.prototype.show = function() {
// this.iframe.style.display = "block";
//var borders = this.borders();
this.iframeBounds = EPUBJS.core.bounds(this.iframe);
this.element.style.width = this.iframeBounds.width + "px";
this.element.style.height = this.iframeBounds.height + "px";
this.elementBounds = EPUBJS.core.bounds(this.element);
// this.iframe.style.display = "inline-block";
this.iframe.style.visibility = "visible";
this.shown = true; this.shown = true;
// Reframe, incase the iframe was recreated
// Also resizes element.
this.reframe(this.width, this.height)
// this.iframe.style.display = "inline-block";
this.element.style.visibility = "visible";
this.iframe.style.visibility = "visible";
this.onShown(this); this.onShown(this);
this.trigger("shown", this); this.trigger("shown", this);
}; };
EPUBJS.View.prototype.hide = function() { EPUBJS.View.prototype.hide = function() {
// this.iframe.style.display = "none"; // this.iframe.style.display = "none";
// this.iframe.style.visibility = "hidden"; this.element.style.visibility = "hidden";
this.iframe.style.visibility = "hidden";
this.stopExpanding = true;
this.trigger("hidden"); this.trigger("hidden");
}; };
@ -4587,6 +4644,7 @@ EPUBJS.View.prototype.destroy = function() {
// this.observer.disconnect(); // this.observer.disconnect();
if(this.iframe){ if(this.iframe){
this.stopExpanding = true;
this.element.removeChild(this.iframe); this.element.removeChild(this.iframe);
this.shown = false; this.shown = false;
this.iframe = null; this.iframe = null;
@ -4836,20 +4894,21 @@ EPUBJS.Rendition.prototype.initialize = function(_options){
// Style Element // Style Element
container.style.fontSize = "0"; container.style.fontSize = "0";
container.style.wordSpacing = "0";
container.style.lineHeight = "0";
container.style.verticalAlign = "top";
if(this.settings.axis === "horizontal") { if(this.settings.axis === "horizontal") {
// this.container.style.display = "flex";
// this.container.style.flexWrap = "nowrap";
container.style.whiteSpace = "nowrap"; container.style.whiteSpace = "nowrap";
} }
if(options.width){ //if(options.width){
container.style.width = width; container.style.width = width;
} //}
if(options.height){ //if(options.height){
container.style.height = height; container.style.height = height;
} //}
container.style.overflow = this.settings.overflow; container.style.overflow = this.settings.overflow;
@ -4889,17 +4948,6 @@ EPUBJS.Rendition.prototype.attachTo = function(_element){
return; return;
} }
// If width or height are set to "100%", inherit them from containing element
// if(this.settings.height === "100%") {
// bounds = this.element.getBoundingClientRect();
// this.container.style.height = bounds.height + "px";
// }
// if(this.settings.width === "100%") {
// bounds = bounds || this.element.getBoundingClientRect();
// this.container.style.width = bounds.width + "px";
// }
this.element.appendChild(this.container); this.element.appendChild(this.container);
// Attach Listeners // Attach Listeners
@ -4934,7 +4982,8 @@ EPUBJS.Rendition.prototype.attachTo = function(_element){
EPUBJS.Rendition.prototype.attachListeners = function(){ EPUBJS.Rendition.prototype.attachListeners = function(){
// Listen to window for resize event if width or height is set to 100% // Listen to window for resize event if width or height is set to 100%
if(this.settings.width === "100%" || this.settings.height === "100%") { if(!EPUBJS.core.isNumber(this.settings.width) ||
!EPUBJS.core.isNumber(this.settings.height) ) {
window.addEventListener("resize", this.onResized.bind(this), false); window.addEventListener("resize", this.onResized.bind(this), false);
} }
@ -4986,7 +5035,7 @@ EPUBJS.Rendition.prototype.render = function(view) {
view.create(); view.create();
// Fit to size of the container, apply padding // Fit to size of the container, apply padding
// this.resizeView(view); this.resizeView(view);
// Render Chain // Render Chain
return view.display(this.book.request) return view.display(this.book.request)
@ -5052,48 +5101,54 @@ EPUBJS.Rendition.prototype.remove = function(view) {
}; };
// EPUBJS.Rendition.prototype.resizeView = function(view) { 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") { if(this.settings.axis === "horizontal") {
// view.resize(this.stage.width, 0); view.lock(null, this.stage.height);
// } else { } else {
// view.resize(0, this.stage.height); view.lock(this.stage.width, null);
// } }
// console.log("resize view")
// }; };
EPUBJS.Rendition.prototype.stageSize = function(_width, _height){ EPUBJS.Rendition.prototype.stageSize = function(_width, _height){
var bounds; var bounds;
var width = _width || this.settings.width; var width = _width || this.settings.width;
var height = _height || this.settings.height; var height = _height || this.settings.height;
if(width === "100%") { // If width or height are set to "100%", inherit them from containing element
if(width === false) {
bounds = this.element.getBoundingClientRect(); bounds = this.element.getBoundingClientRect();
width = bounds.width;
height = bounds.height;
this.container.style.height = bounds.height + "px"; if(bounds.width) {
width = bounds.width;
this.container.style.width = bounds.width + "px";
}
} }
if(height === "100%") { if(height === false) {
bounds = bounds || this.element.getBoundingClientRect(); bounds = bounds || this.element.getBoundingClientRect();
width = bounds.width;
height = bounds.height;
this.container.style.width = bounds.width + "px"; if(bounds.height) {
height = bounds.height;
this.container.style.height = bounds.height + "px";
}
} }
if(width && !EPUBJS.core.isNumber(width)) {
bounds = this.container.getBoundingClientRect();
width = bounds.width;
//height = bounds.height;
}
if(height && !EPUBJS.core.isNumber(height)) {
bounds = bounds || this.container.getBoundingClientRect();
//width = bounds.width;
height = bounds.height;
}
this.containerStyles = window.getComputedStyle(this.container); this.containerStyles = window.getComputedStyle(this.container);
this.containerPadding = { this.containerPadding = {
left: parseFloat(this.containerStyles["padding-left"]) || 0, left: parseFloat(this.containerStyles["padding-left"]) || 0,
@ -5121,9 +5176,9 @@ EPUBJS.Rendition.prototype.resize = function(width, height){
this.views.forEach(function(view){ this.views.forEach(function(view){
if(this.settings.axis === "vertical") { if(this.settings.axis === "vertical") {
view.resize(this.stage.width, 0); view.lock(this.stage.width, null);
} else { } else {
view.resize(0, this.stage.height); view.lock(null, this.stage.height);
} }
}.bind(this)); }.bind(this));
@ -5209,8 +5264,9 @@ EPUBJS.Continuous.prototype.constructor = EPUBJS.Continuous;
EPUBJS.Continuous.prototype.attachListeners = function(){ EPUBJS.Continuous.prototype.attachListeners = function(){
// Listen to window for resize event if width or height is set to 100% // Listen to window for resize event if width or height is set to a percent
if(this.settings.width === "100%" || this.settings.height === "100%") { if(!EPUBJS.core.isNumber(this.settings.width) ||
!EPUBJS.core.isNumber(this.settings.height) ) {
window.addEventListener("resize", this.onResized.bind(this), false); window.addEventListener("resize", this.onResized.bind(this), false);
} }
@ -5823,6 +5879,7 @@ EPUBJS.Paginate.prototype.registerLayoutMethod = function(view) {
this.layoutMethod = this.determineLayout({}); this.layoutMethod = this.determineLayout({});
this.layout = new EPUBJS.Layout[this.layoutMethod](view); this.layout = new EPUBJS.Layout[this.layoutMethod](view);
// TODO: handle 100% width
this.formated = this.layout.format(this.settings.width, this.settings.height, this.settings.gap); this.formated = this.layout.format(this.settings.width, this.settings.height, this.settings.gap);
// Add extra padding for the gap between this and the next view // Add extra padding for the gap between this and the next view

4
dist/epub.min.js vendored
View file

File diff suppressed because one or more lines are too long

13
examples/continuous.html
View file

@ -12,8 +12,9 @@
background: #fafafa; background: #fafafa;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #333; color: #333;
height: 100%; /* height: 100%;
height: 100%; width: 100%;
overflow: hidden;*/
/* position: absolute; */ /* position: absolute; */
} }
@ -29,7 +30,7 @@
} }
#viewer > div { #viewer > div {
/*padding: 0 25% 0 25%;*/ padding: 0 20% 0 20%;
} }
@ -38,11 +39,11 @@
box-shadow: 0 0 4px #ccc; box-shadow: 0 0 4px #ccc;
margin: 10px; margin: 10px;
padding: 20px; padding: 20px;
width: 50% !important; /*width: 50% !important;*/
} }
#viewer .epub-view iframe { #viewer .epub-view iframe {
width: 100% !important; /*width: 100% !important;*/
} }
@ -90,7 +91,7 @@
var currentSectionIndex = 8; var currentSectionIndex = 8;
// Load the opf // Load the opf
var book = ePub("../books/moby-dick/OPS/package.opf"); var book = ePub("../books/moby-dick/OPS/package.opf");
var rendition = book.renderTo("viewer", { method: "continuous", width: "100%", height: "100%" }); var rendition = book.renderTo("viewer", { method: "continuous", width: "60%", height: "100%" });
var displayed = rendition.display(currentSectionIndex); var displayed = rendition.display(currentSectionIndex);

17
examples/single.html
View file

@ -8,21 +8,17 @@
<style type="text/css"> <style type="text/css">
body { body {
margin: 20px; margin: 0;
background: #fafafa; background: #fafafa;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #333; color: #333;
height: 100%;
height: 100%;
/* position: absolute; */
} }
#viewer { #viewer {
text-align: center;
}
#viewer > div { overflow: hidden;
/*padding: 0 25% 0 25%;*/ width: 800px;
margin: 0 auto;
} }
@ -31,11 +27,6 @@
box-shadow: 0 0 4px #ccc; box-shadow: 0 0 4px #ccc;
margin: 10px; margin: 10px;
padding: 20px; padding: 20px;
width: 50% !important;
}
#viewer .epub-view iframe {
width: 100% !important;
} }
.arrow { .arrow {

5
lib/epubjs/continuous.js
View file

@ -27,8 +27,9 @@ EPUBJS.Continuous.prototype.constructor = EPUBJS.Continuous;
EPUBJS.Continuous.prototype.attachListeners = function(){ EPUBJS.Continuous.prototype.attachListeners = function(){
// Listen to window for resize event if width or height is set to 100% // Listen to window for resize event if width or height is set to a percent
if(this.settings.width === "100%" || this.settings.height === "100%") { if(!EPUBJS.core.isNumber(this.settings.width) ||
!EPUBJS.core.isNumber(this.settings.height) ) {
window.addEventListener("resize", this.onResized.bind(this), false); window.addEventListener("resize", this.onResized.bind(this), false);
} }

24
lib/epubjs/core.js
View file

@ -460,3 +460,27 @@ EPUBJS.core.bounds = function(el) {
} }
}; };
EPUBJS.core.borders = function(el) {
var style = window.getComputedStyle(el);
var widthProps = ["paddingRight", "paddingLeft", "marginRight", "marginLeft", "borderRightWidth", "borderLeftWidth"];
var heightProps = ["paddingTop", "paddingBottom", "marginTop", "marginBottom", "borderTopWidth", "borderBottomWidth"];
var width = 0;
var height = 0;
widthProps.forEach(function(prop){
width += parseFloat(style[prop]) || 0;
})
heightProps.forEach(function(prop){
height += parseFloat(style[prop]) || 0;
})
return {
height: height,
width: width
}
};

1
lib/epubjs/paginate.js
View file

@ -126,6 +126,7 @@ EPUBJS.Paginate.prototype.registerLayoutMethod = function(view) {
this.layoutMethod = this.determineLayout({}); this.layoutMethod = this.determineLayout({});
this.layout = new EPUBJS.Layout[this.layoutMethod](view); this.layout = new EPUBJS.Layout[this.layoutMethod](view);
// TODO: handle 100% width
this.formated = this.layout.format(this.settings.width, this.settings.height, this.settings.gap); this.formated = this.layout.format(this.settings.width, this.settings.height, this.settings.gap);
// Add extra padding for the gap between this and the next view // Add extra padding for the gap between this and the next view

91
lib/epubjs/rendition.js
View file

@ -56,20 +56,21 @@ EPUBJS.Rendition.prototype.initialize = function(_options){
// Style Element // Style Element
container.style.fontSize = "0"; container.style.fontSize = "0";
container.style.wordSpacing = "0";
container.style.lineHeight = "0";
container.style.verticalAlign = "top";
if(this.settings.axis === "horizontal") { if(this.settings.axis === "horizontal") {
// this.container.style.display = "flex";
// this.container.style.flexWrap = "nowrap";
container.style.whiteSpace = "nowrap"; container.style.whiteSpace = "nowrap";
} }
if(options.width){ //if(options.width){
container.style.width = width; container.style.width = width;
} //}
if(options.height){ //if(options.height){
container.style.height = height; container.style.height = height;
} //}
container.style.overflow = this.settings.overflow; container.style.overflow = this.settings.overflow;
@ -109,17 +110,6 @@ EPUBJS.Rendition.prototype.attachTo = function(_element){
return; return;
} }
// If width or height are set to "100%", inherit them from containing element
// if(this.settings.height === "100%") {
// bounds = this.element.getBoundingClientRect();
// this.container.style.height = bounds.height + "px";
// }
// if(this.settings.width === "100%") {
// bounds = bounds || this.element.getBoundingClientRect();
// this.container.style.width = bounds.width + "px";
// }
this.element.appendChild(this.container); this.element.appendChild(this.container);
// Attach Listeners // Attach Listeners
@ -154,7 +144,8 @@ EPUBJS.Rendition.prototype.attachTo = function(_element){
EPUBJS.Rendition.prototype.attachListeners = function(){ EPUBJS.Rendition.prototype.attachListeners = function(){
// Listen to window for resize event if width or height is set to 100% // Listen to window for resize event if width or height is set to 100%
if(this.settings.width === "100%" || this.settings.height === "100%") { if(!EPUBJS.core.isNumber(this.settings.width) ||
!EPUBJS.core.isNumber(this.settings.height) ) {
window.addEventListener("resize", this.onResized.bind(this), false); window.addEventListener("resize", this.onResized.bind(this), false);
} }
@ -206,7 +197,7 @@ EPUBJS.Rendition.prototype.render = function(view) {
view.create(); view.create();
// Fit to size of the container, apply padding // Fit to size of the container, apply padding
// this.resizeView(view); this.resizeView(view);
// Render Chain // Render Chain
return view.display(this.book.request) return view.display(this.book.request)
@ -272,48 +263,54 @@ EPUBJS.Rendition.prototype.remove = function(view) {
}; };
// EPUBJS.Rendition.prototype.resizeView = function(view) { 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") { if(this.settings.axis === "horizontal") {
// view.resize(this.stage.width, 0); view.lock(null, this.stage.height);
// } else { } else {
// view.resize(0, this.stage.height); view.lock(this.stage.width, null);
// } }
// console.log("resize view")
// }; };
EPUBJS.Rendition.prototype.stageSize = function(_width, _height){ EPUBJS.Rendition.prototype.stageSize = function(_width, _height){
var bounds; var bounds;
var width = _width || this.settings.width; var width = _width || this.settings.width;
var height = _height || this.settings.height; var height = _height || this.settings.height;
if(width === "100%") { // If width or height are set to "100%", inherit them from containing element
if(width === false) {
bounds = this.element.getBoundingClientRect(); bounds = this.element.getBoundingClientRect();
width = bounds.width;
height = bounds.height;
this.container.style.height = bounds.height + "px"; if(bounds.width) {
width = bounds.width;
this.container.style.width = bounds.width + "px";
}
} }
if(height === "100%") { if(height === false) {
bounds = bounds || this.element.getBoundingClientRect(); bounds = bounds || this.element.getBoundingClientRect();
width = bounds.width;
height = bounds.height;
this.container.style.width = bounds.width + "px"; if(bounds.height) {
height = bounds.height;
this.container.style.height = bounds.height + "px";
}
} }
if(width && !EPUBJS.core.isNumber(width)) {
bounds = this.container.getBoundingClientRect();
width = bounds.width;
//height = bounds.height;
}
if(height && !EPUBJS.core.isNumber(height)) {
bounds = bounds || this.container.getBoundingClientRect();
//width = bounds.width;
height = bounds.height;
}
this.containerStyles = window.getComputedStyle(this.container); this.containerStyles = window.getComputedStyle(this.container);
this.containerPadding = { this.containerPadding = {
left: parseFloat(this.containerStyles["padding-left"]) || 0, left: parseFloat(this.containerStyles["padding-left"]) || 0,
@ -341,9 +338,9 @@ EPUBJS.Rendition.prototype.resize = function(width, height){
this.views.forEach(function(view){ this.views.forEach(function(view){
if(this.settings.axis === "vertical") { if(this.settings.axis === "vertical") {
view.resize(this.stage.width, 0); view.lock(this.stage.width, null);
} else { } else {
view.resize(0, this.stage.height); view.lock(null, this.stage.height);
} }
}.bind(this)); }.bind(this));

154
lib/epubjs/view.js
View file

@ -1,4 +1,4 @@
EPUBJS.View = function(section) { EPUBJS.View = function(section, horz) {
this.id = "epubjs-view:" + EPUBJS.core.uuid(); this.id = "epubjs-view:" + EPUBJS.core.uuid();
this.displaying = new RSVP.defer(); this.displaying = new RSVP.defer();
this.displayed = this.displaying.promise; this.displayed = this.displaying.promise;
@ -8,6 +8,7 @@ EPUBJS.View = function(section) {
this.element = document.createElement('div'); this.element = document.createElement('div');
this.element.classList.add("epub-view"); this.element.classList.add("epub-view");
this.element.style.display = "inline-block"; this.element.style.display = "inline-block";
// this.element.style.minHeight = "100px"; // this.element.style.minHeight = "100px";
this.element.style.height = "0px"; this.element.style.height = "0px";
this.element.style.width = "0px"; this.element.style.width = "0px";
@ -54,70 +55,99 @@ EPUBJS.View.prototype.create = function(width, height) {
this.resizing = true; this.resizing = true;
// this.iframe.style.display = "none"; // this.iframe.style.display = "none";
this.element.style.visibility = "hidden";
this.iframe.style.visibility = "hidden"; this.iframe.style.visibility = "hidden";
this.element.appendChild(this.iframe); this.element.appendChild(this.iframe);
this.rendered = true; this.rendered = true;
if(width || height){ // if(width || height){
this.resize(width, height); // this.resize(width, height);
} else if(this.width && this.height){ // } else if(this.width && this.height){
this.resize(this.width, this.height); // this.resize(this.width, this.height);
// } else {
// this.iframeBounds = EPUBJS.core.bounds(this.iframe);
// }
if(!!("srcdoc" in this.iframe)) {
this.supportsSrcdoc = true;
} else { } else {
this.iframeBounds = EPUBJS.core.bounds(this.iframe); this.supportsSrcdoc = false;
} }
return this.iframe; return this.iframe;
}; };
// TODO: minimize resizes
EPUBJS.View.prototype.lock = function(width, height) {
var borders = EPUBJS.core.borders(this.element);
if(EPUBJS.core.isNumber(width)){
this.lockedWidth = width - borders.width;
}
if(EPUBJS.core.isNumber(height)){
this.lockedHeight = height - borders.height;
}
if(this.shown) {
this.resize(this.lockedWidth, this.lockedHeight);
if (this.iframe && !this.resizing) {
//this.expand();
}
}
};
EPUBJS.View.prototype.resize = function(width, height) { EPUBJS.View.prototype.resize = function(width, height) {
if(width){ if(!this.shown) return;
if(this.iframe) { if(EPUBJS.core.isNumber(width)){
this.iframe.style.width = width + "px"; this.element.style.width = width + "px";
this.iframeBounds = EPUBJS.core.bounds(this.iframe);
}
if(this.shown) {
this.element.style.width = this.iframeBounds.width + "px";
this.elementBounds = EPUBJS.core.bounds(this.element);
}
} }
if(height){ if(EPUBJS.core.isNumber(height)){
if(this.iframe) { this.element.style.height = height + "px";
this.iframe.style.height = height + "px";
this.iframeBounds = EPUBJS.core.bounds(this.iframe);
}
if(this.shown) {
this.element.style.height = this.iframeBounds.height + "px";
this.elementBounds = EPUBJS.core.bounds(this.element);
}
} }
if (!this.resizing) { this.elementBounds = EPUBJS.core.bounds(this.element);
this.resizing = true;
if(this.iframe) { };
this.expand();
} EPUBJS.View.prototype.reframe = function(width, height) {
if(!this.iframe) return;
if(EPUBJS.core.isNumber(width)){
this.iframe.style.width = width + "px";
} }
if(EPUBJS.core.isNumber(height)){
this.iframe.style.height = height + "px";
}
this.iframeBounds = EPUBJS.core.bounds(this.iframe);
this.resize(this.iframeBounds.width, this.iframeBounds.height);
}; };
EPUBJS.View.prototype.resized = function(e) { EPUBJS.View.prototype.resized = function(e) {
/*
if (!this.resizing) { if (!this.resizing) {
if(this.iframe) { if(this.iframe) {
// this.expand(); // this.expand();
} }
} else { } else {
this.resizing = false; this.resizing = false;
} }*/
}; };
@ -150,11 +180,14 @@ EPUBJS.View.prototype.load = function(contents) {
}.bind(this)); }.bind(this));
if(this.supportsSrcdoc){
this.iframe.srcdoc = contents;
} else {
this.document.open();
this.document.write(contents);
this.document.close();
}
// this.iframe.srcdoc = contents;
this.document.open();
this.document.write(contents);
this.document.close();
return loaded; return loaded;
}; };
@ -215,18 +248,16 @@ EPUBJS.View.prototype.expand = function(_defer, _count, _func) {
return expanded; return expanded;
} }
height = this.lockedHeight || bounds.height; //this.document.documentElement.scrollHeight; //window.getComputedStyle?
height = bounds.height; //this.document.documentElement.scrollHeight; //window.getComputedStyle? width = this.lockedWidth || this.document.documentElement.scrollWidth;
width = this.document.documentElement.scrollWidth;
if(count <= MAX && (this.width != width || this.height != height)) { if(count <= MAX && (this.width != width || this.height != height) && !this.stopExpanding) {
// this.iframe.style.height = height + "px";
// this.iframe.style.width = width + "px";
this.resize(width, height);
setTimeout(function(){ this.reframe(width, height);
this.expandTimeout = setTimeout(function(){
count += 1; count += 1;
if(_func){ if(_func){
_func(this); _func(this);
@ -235,13 +266,16 @@ EPUBJS.View.prototype.expand = function(_defer, _count, _func) {
}.bind(this), TIMEOUT); }.bind(this), TIMEOUT);
} else { } else {
this.resizing = false;
if(this.stopExpanding){
this.stopExpanding = null;
}
expanding.resolve(); expanding.resolve();
} }
this.width = width; this.width = width;
this.height = height; this.height = height;
// expanding.resolve();
return expanded; return expanded;
}; };
@ -276,28 +310,27 @@ EPUBJS.View.prototype.observe = function(target) {
// }; // };
EPUBJS.View.prototype.show = function() { EPUBJS.View.prototype.show = function() {
// this.iframe.style.display = "block";
//var borders = this.borders();
this.iframeBounds = EPUBJS.core.bounds(this.iframe);
this.element.style.width = this.iframeBounds.width + "px";
this.element.style.height = this.iframeBounds.height + "px";
this.elementBounds = EPUBJS.core.bounds(this.element);
// this.iframe.style.display = "inline-block";
this.iframe.style.visibility = "visible";
this.shown = true; this.shown = true;
// Reframe, incase the iframe was recreated
// Also resizes element.
this.reframe(this.width, this.height)
// this.iframe.style.display = "inline-block";
this.element.style.visibility = "visible";
this.iframe.style.visibility = "visible";
this.onShown(this); this.onShown(this);
this.trigger("shown", this); this.trigger("shown", this);
}; };
EPUBJS.View.prototype.hide = function() { EPUBJS.View.prototype.hide = function() {
// this.iframe.style.display = "none"; // this.iframe.style.display = "none";
// this.iframe.style.visibility = "hidden"; this.element.style.visibility = "hidden";
this.iframe.style.visibility = "hidden";
this.stopExpanding = true;
this.trigger("hidden"); this.trigger("hidden");
}; };
@ -321,6 +354,7 @@ EPUBJS.View.prototype.destroy = function() {
// this.observer.disconnect(); // this.observer.disconnect();
if(this.iframe){ if(this.iframe){
this.stopExpanding = true;
this.element.removeChild(this.iframe); this.element.removeChild(this.iframe);
this.shown = false; this.shown = false;
this.iframe = null; this.iframe = null;