yetangitu/epub.js
1
0
Fork 0
mirror of https://github.com/futurepress/epub.js.git synced 2025-10-04 15:09:16 +02:00
Code Issues Releases Wiki Activity

Updated Expands and Layout methods

Browse source
This commit is contained in:
Fred Chasen 2015-05-24 09:44:35 -04:00
parent 6b25126f00
commit b88aab25d9
14 changed files with 1116 additions and 766 deletions
Download patch file Download diff file Expand all files Collapse all files

797
dist/epub.js vendored
View file

File diff suppressed because it is too large Load diff

4
dist/epub.min.js vendored
View file

File diff suppressed because one or more lines are too long

BIN
examples/ajax-loader.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.5 KiB

36
examples/continuous.html
View file

@ -13,38 +13,32 @@
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%;
width: 100%; width: 100%;
overflow: hidden;*/
/* position: absolute; */ /* position: absolute; */
} }
#viewer { .epub-container {
display: block; /* display: block;
width: 100%; */ /*width: 100%;*/
height: 100%; /*height: 100%;*/
text-align: center; /* text-align: center;
position: absolute; */ /*position: absolute;
top: 0; top: 0;
left: 0; left: 0;*/
min-width: 320px;
margin: 0 auto;
} }
#viewer > div { /*.epub-container > div {
padding: 0 20% 0 20%; padding: 0 20% 0 20%;
}*/
} .epub-container .epub-view > iframe {
#viewer .epub-view {
background: white; background: white;
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;*/
} }
@ -92,8 +86,8 @@
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: "60%", height: "100%" }); var rendition = book.renderTo(document.body, { method: "continuous", width: "60%" });
var displayed = rendition.display(); var displayed = rendition.display("chapter_008.xhtml");
displayed.then(function(renderer){ displayed.then(function(renderer){

126
examples/spread.html Normal file
View file

@ -0,0 +1,126 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>EPUB.js Pagination Example</title>
<script src="../dist/epub.js"></script>
<style type="text/css">
body {
margin: 0;
background: #fafafa;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #333;
position: absolute;
height: 100%;
width: 100%;
display: flex;
-webkit-align-items: center;
-webkit-justify-content: center;
}
#viewer {
width: 300px;
height: 568px;
background: white;
box-shadow: 0 0 4px #ccc;
border-radius: 5px;
padding: 5px 10px;
background: white;
}
#prev {
left: 40px;
}
#next {
right: 40px;
}
.arrow {
position: fixed;
top: 50%;
margin-top: -32px;
font-size: 64px;
color: #E2E2E2;
font-family: arial, sans-serif;
font-weight: bold;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.arrow:hover {
color: #777;
}
.arrow:active {
color: #000;
}
</style>
</head>
<body>
<div id="viewer"></div>
<div id="prev" class="arrow">‹</div>
<div id="next" class="arrow">›</div>
<script>
var currentSectionIndex = 14;
// Load the opf
// var book = ePub("https://s3.amazonaws.com/moby-dick/OPS/package.opf");
var book = ePub("../books/moby-dick/OPS/package.opf");
var rendition = book.renderTo("viewer", {
method: "paginate",
width: 300,
height: 558
});
// var pagination = rendition.paginate();
var displayed = rendition.display(currentSectionIndex);
displayed.then(function(renderer){
// -- do stuff
});
// Navigation loaded
book.loaded.navigation.then(function(toc){
// console.log(toc);
});
var next = document.getElementById("next");
next.addEventListener("click", function(){
rendition.next();
}, false);
var prev = document.getElementById("prev");
prev.addEventListener("click", function(){
rendition.prev();
}, false);
document.addEventListener("keyup", function(e){
// Left Key
if ((e.keyCode || e.which) == 37) {
rendition.prev();
}
// Right Key
if ((e.keyCode || e.which) == 39) {
rendition.next();
}
}, false);
</script>
</body>
</html>

36
examples/pages.html → examples/spreads.html
View file

@ -24,7 +24,8 @@
} }
#viewer { #viewer {
width: 900px; /*width: 900px;*/
width: 80%;
height: 600px; height: 600px;
background: white; background: white;
box-shadow: 0 0 4px #ccc; box-shadow: 0 0 4px #ccc;
@ -38,19 +39,7 @@
margin: 40px auto; margin: 40px auto;
} }
#viewer:after {
position: absolute;
width: 1px;
border-right: 1px #000 solid;
height: 90%;
z-index: 1;
left: 50%;
margin-left: -1px;
top: 5%;
opacity: .15;
box-shadow: -2px 0 15px rgba(0, 0, 0, 1);
content: "";
}
/* /*
#viewer > iframe { #viewer > iframe {
@ -105,6 +94,22 @@
margin: 10px auto; margin: 10px auto;
} }
@media (min-width: 1000px) {
#viewer:after {
position: absolute;
width: 1px;
border-right: 1px #000 solid;
height: 90%;
z-index: 1;
left: 50%;
margin-left: -1px;
top: 5%;
opacity: .15;
box-shadow: -2px 0 15px rgba(0, 0, 0, 1);
content: "";
}
}
</style> </style>
</head> </head>
<body> <body>
@ -118,8 +123,7 @@
var book = ePub("../books/moby-dick/OPS/package.opf"); var book = ePub("../books/moby-dick/OPS/package.opf");
var rendition = book.renderTo("viewer", { var rendition = book.renderTo("viewer", {
method: "paginate", method: "paginate",
// overflow: "auto", width: "100%",
width: 900,
height: 600 height: 600
}); });
// var pagination = rendition.paginate(); // var pagination = rendition.paginate();

184
lib/epubjs/continuous.js
View file

@ -34,12 +34,12 @@ EPUBJS.Continuous.prototype.attachListeners = function(){
window.addEventListener("resize", this.onResized.bind(this), false); window.addEventListener("resize", this.onResized.bind(this), false);
} }
if(this.settings.infinite) { if(this.settings.infinite) {
//this.infinite = new EPUBJS.Infinite(this.container);
//this.infinite.on("scroll", this.check.bind(this));
this.start(); this.start();
} }
}; };
EPUBJS.Continuous.prototype.display = function(what){ EPUBJS.Continuous.prototype.display = function(what){
@ -55,7 +55,7 @@ EPUBJS.Continuous.prototype.display = function(what){
this.displaying = true; this.displaying = true;
if(section){ if(section){
view = new EPUBJS.View(section); view = new EPUBJS.View(section, this.viewSettings);
// This will clear all previous views // This will clear all previous views
this.q.enqueue(this.fill, view); this.q.enqueue(this.fill, view);
@ -95,16 +95,14 @@ EPUBJS.Continuous.prototype.afterDisplayed = function(currView){
var index = this.views.indexOf(currView); var index = this.views.indexOf(currView);
var prevView, nextView; var prevView, nextView;
// this.resizeView(currView);
if(index + 1 === this.views.length && next) { if(index + 1 === this.views.length && next) {
nextView = new EPUBJS.View(next); nextView = new EPUBJS.View(next, this.viewSettings);
this.q.enqueue(this.append, nextView); this.q.enqueue(this.append, nextView);
} }
if(index === 0 && prev) { if(index === 0 && prev) {
prevView = new EPUBJS.View(prev); prevView = new EPUBJS.View(prev, this.viewSettings);
this.q.enqueue(this.prepend, prevView); this.q.enqueue(this.prepend, prevView);
} }
@ -115,40 +113,6 @@ EPUBJS.Continuous.prototype.afterDisplayed = function(currView){
}; };
EPUBJS.Continuous.prototype.afterDisplayedAbove = function(currView){
var bounds = currView.bounds(); //, style, marginTopBottom, marginLeftRight;
// var prevTop = this.container.scrollTop;
// var prevLeft = this.container.scrollLeft;
if(currView.countered) {
this.afterDisplayed(currView);
return;
}
// bounds = currView.bounds();
if(this.settings.axis === "vertical") {
this.scrollBy(0, bounds.height, true);
} else {
this.scrollBy(bounds.width, 0, true);
}
// if(this.settings.axis === "vertical") {
// currView.countered = bounds.height - (currView.countered || 0);
// this.infinite.scrollTo(0, prevTop + bounds.height, true)
// } else {
// currView.countered = bounds.width - (currView.countered || 0);
// this.infinite.scrollTo(prevLeft + bounds.width, 0, true);
// }
currView.countered = true;
// this.removeShownListeners(currView);
this.afterDisplayed(currView);
if(this.afterDisplayedAboveHook) this.afterDisplayedAboveHook(currView);
};
// Remove Previous Listeners if present // Remove Previous Listeners if present
EPUBJS.Continuous.prototype.removeShownListeners = function(view){ EPUBJS.Continuous.prototype.removeShownListeners = function(view){
@ -161,29 +125,37 @@ EPUBJS.Continuous.prototype.removeShownListeners = function(view){
EPUBJS.Continuous.prototype.append = function(view){ EPUBJS.Continuous.prototype.append = function(view){
this.views.push(view); this.views.push(view);
// view.appendTo(this.container);
this.container.appendChild(view.element); this.container.appendChild(view.element);
// view.on("shown", this.afterDisplayed.bind(this)); // view.on("shown", this.afterDisplayed.bind(this));
view.onShown = this.afterDisplayed.bind(this); view.onShown = this.afterDisplayed.bind(this);
// this.resizeView(view);
return this.check(); return this.check();
}; };
EPUBJS.Continuous.prototype.prepend = function(view){ EPUBJS.Continuous.prototype.prepend = function(view){
this.views.unshift(view); this.views.unshift(view);
// view.prependTo(this.container);
this.container.insertBefore(view.element, this.container.firstChild); this.container.insertBefore(view.element, this.container.firstChild);
view.onShown = this.afterDisplayedAbove.bind(this);
// view.on("shown", this.afterDisplayedAbove.bind(this)); // view.on("shown", this.afterDisplayedAbove.bind(this));
view.onShown = this.afterDisplayed.bind(this);
//might need to enqueue
view.on("resized", this.counter.bind(this));
// this.resizeView(view);
return this.check(); return this.check();
}; };
EPUBJS.Continuous.prototype.counter = function(bounds){
if(this.settings.axis === "vertical") {
this.scrollBy(0, bounds.heightDelta, true);
} else {
this.scrollBy(bounds.widthDelta, 0, true);
}
};
EPUBJS.Continuous.prototype.fill = function(view){ EPUBJS.Continuous.prototype.fill = function(view){
if(this.views.length){ if(this.views.length){
@ -221,6 +193,8 @@ EPUBJS.Continuous.prototype.remove = function(view) {
this.container.removeChild(view.element); this.container.removeChild(view.element);
view.off("resized");
if(view.shown){ if(view.shown){
view.destroy(); view.destroy();
} }
@ -253,21 +227,42 @@ EPUBJS.Continuous.prototype.isVisible = function(view, _container){
var position = view.position(); var position = view.position();
var container = _container || this.container.getBoundingClientRect(); var container = _container || this.container.getBoundingClientRect();
if((position.bottom >= container.top - this.settings.offset) && if(this.settings.axis === "horizontal" &&
!(position.top >= container.bottom + this.settings.offset) &&
(position.right >= container.left - this.settings.offset) && (position.right >= container.left - this.settings.offset) &&
!(position.left >= container.right + this.settings.offset)) { !(position.left >= container.right + this.settings.offset)) {
return true; return true;
} else { } else if(this.settings.axis === "vertical" &&
return false; (position.bottom >= container.top - this.settings.offset) &&
!(position.top >= container.bottom + this.settings.offset)) {
return true;
} }
return false;
}; };
EPUBJS.Continuous.prototype.check = function(){ EPUBJS.Continuous.prototype.check = function(){
var checking = new RSVP.defer(); var checking = new RSVP.defer();
var container = this.container.getBoundingClientRect(); var container;//this.container.getBoundingClientRect();
// Temp
if(!this.settings.height) {
var width = window.innerWidth;
var height = window.innerHeight;
container = {
top: 0,
left: 0,
right: width,
bottom: height,
width: width,
height: height
}
} else {
container = this.container.getBoundingClientRect();
}
this.views.forEach(function(view){ this.views.forEach(function(view){
var visible = this.isVisible(view, container); var visible = this.isVisible(view, container);
@ -275,6 +270,7 @@ EPUBJS.Continuous.prototype.check = function(){
if(visible) { if(visible) {
if(!view.shown && !this.rendering) { if(!view.shown && !this.rendering) {
this.q.enqueue(function(){ this.q.enqueue(function(){
return this.render(view) return this.render(view)
@ -331,8 +327,17 @@ EPUBJS.Continuous.prototype.trim = function(){
EPUBJS.Continuous.prototype.erase = function(view, above){ //Trim EPUBJS.Continuous.prototype.erase = function(view, above){ //Trim
var prevTop = this.container.scrollTop; var prevTop;
var prevLeft = this.container.scrollLeft; var prevLeft;
if(this.settings.height) {
prevTop = this.container.scrollTop;
prevLeft = this.container.scrollLeft;
} else {
prevTop = window.scrollY;
prevLeft = window.scrollX;
}
var bounds = view.bounds(); var bounds = view.bounds();
this.remove(view); this.remove(view);
@ -349,33 +354,6 @@ EPUBJS.Continuous.prototype.erase = function(view, above){ //Trim
}; };
// 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);
// }
// };
// EPUBJS.Continuous.prototype.paginate = function(options) {
// this.pagination = new EPUBJS.Paginate(this, {
// width: this.settings.width,
// height: this.settings.height
// });
// return this.pagination;
// };
EPUBJS.Continuous.prototype.checkCurrent = function(position) { EPUBJS.Continuous.prototype.checkCurrent = function(position) {
var view, top; var view, top;
var container = this.container.getBoundingClientRect(); var container = this.container.getBoundingClientRect();
@ -409,15 +387,28 @@ EPUBJS.Continuous.prototype.checkCurrent = function(position) {
}; };
EPUBJS.Continuous.prototype.start = function() { EPUBJS.Continuous.prototype.start = function() {
var scroller;
this.tick = EPUBJS.core.requestAnimationFrame; this.tick = EPUBJS.core.requestAnimationFrame;
if(this.settings.height) {
this.prevScrollTop = this.container.scrollTop; this.prevScrollTop = this.container.scrollTop;
this.prevScrollLeft = this.container.scrollLeft; this.prevScrollLeft = this.container.scrollLeft;
} else {
this.prevScrollTop = window.scrollY;
this.prevScrollLeft = window.scrollX;
}
this.scrollDeltaVert = 0; this.scrollDeltaVert = 0;
this.scrollDeltaHorz = 0; this.scrollDeltaHorz = 0;
this.container.addEventListener("scroll", function(e){ if(this.settings.height) {
scroller = this.container;
} else {
scroller = window;
}
window.addEventListener("scroll", function(e){
if(!this.ignore) { if(!this.ignore) {
this.scrolled = true; this.scrolled = true;
} else { } else {
@ -439,8 +430,13 @@ EPUBJS.Continuous.prototype.onScroll = function(){
if(this.scrolled) { if(this.scrolled) {
if(this.settings.height) {
scrollTop = this.container.scrollTop; scrollTop = this.container.scrollTop;
scrollLeft = this.container.scrollLeft; scrollLeft = this.container.scrollLeft;
} else {
scrollTop = window.scrollY;
scrollLeft = window.scrollX;
}
if(!this.ignore) { if(!this.ignore) {
@ -468,8 +464,14 @@ EPUBJS.Continuous.prototype.onScroll = function(){
this.scrollDeltaVert += Math.abs(scrollTop-this.prevScrollTop); this.scrollDeltaVert += Math.abs(scrollTop-this.prevScrollTop);
this.scrollDeltaHorz += Math.abs(scrollLeft-this.prevScrollLeft); this.scrollDeltaHorz += Math.abs(scrollLeft-this.prevScrollLeft);
if(this.settings.height) {
this.prevScrollTop = this.container.scrollTop; this.prevScrollTop = this.container.scrollTop;
this.prevScrollLeft = this.container.scrollLeft; this.prevScrollLeft = this.container.scrollLeft;
} else {
this.prevScrollTop = window.scrollY;
this.prevScrollLeft = window.scrollX;
}
clearTimeout(this.scrollTimeout); clearTimeout(this.scrollTimeout);
this.scrollTimeout = setTimeout(function(){ this.scrollTimeout = setTimeout(function(){
@ -489,8 +491,13 @@ EPUBJS.Continuous.prototype.scrollBy = function(x, y, silent){
if(silent) { if(silent) {
this.ignore = true; this.ignore = true;
} }
if(this.settings.height) {
this.container.scrollLeft += x; this.container.scrollLeft += x;
this.container.scrollTop += y; this.container.scrollTop += y;
} else {
window.scrollBy(x,y);
}
this.scrolled = true; this.scrolled = true;
}; };
@ -499,8 +506,13 @@ EPUBJS.Continuous.prototype.scrollTo = function(x, y, silent){
if(silent) { if(silent) {
this.ignore = true; this.ignore = true;
} }
if(this.settings.height) {
this.container.scrollLeft = x; this.container.scrollLeft = x;
this.container.scrollTop = y; this.container.scrollTop = y;
} else {
window.scrollTo(x,y);
}
this.scrolled = true; this.scrolled = true;
@ -511,3 +523,13 @@ EPUBJS.Continuous.prototype.scrollTo = function(x, y, silent){
// return; // return;
// }; // };
}; };
EPUBJS.Continuous.prototype.resizeView = function(view) {
if(this.settings.axis === "horizontal") {
view.lock(null, this.stage.height);
} else {
view.lock(this.stage.width, null);
}
};

208
lib/epubjs/layout.js
View file

@ -1,76 +1,8 @@
EPUBJS.Layout = EPUBJS.Layout || {}; EPUBJS.Layout = EPUBJS.Layout || {};
EPUBJS.Layout.Reflowable = function(view){ EPUBJS.Layout.Reflowable = function(_width, _height, _gap, _devisor){
// this.documentElement = null;
this.view = view;
this.spreadWidth = null;
};
EPUBJS.Layout.Reflowable.prototype.format = function(documentElement, _width, _height, _gap){ var divisor = _devisor || 1;
// Get the prefixed CSS commands
var columnAxis = EPUBJS.core.prefixed('columnAxis');
var columnGap = EPUBJS.core.prefixed('columnGap');
var columnWidth = EPUBJS.core.prefixed('columnWidth');
var columnFill = EPUBJS.core.prefixed('columnFill');
//-- Check the width and create even width columns
var width = Math.floor(_width);
// var width = (fullWidth % 2 === 0) ? fullWidth : fullWidth - 0; // Not needed for single
var section = Math.floor(width / 8);
var gap = (_gap >= 0) ? _gap : ((section % 2 === 0) ? section : section - 1);
this.documentElement = documentElement;
//-- Single Page
this.spreadWidth = (width + gap);
documentElement.style.overflow = "hidden";
// Must be set to the new calculated width or the columns will be off
documentElement.style.width = width + "px";
//-- Adjust height
documentElement.style.height = _height + "px";
//-- Add columns
documentElement.style[columnAxis] = "horizontal";
documentElement.style[columnFill] = "auto";
documentElement.style[columnWidth] = width+"px";
documentElement.style[columnGap] = gap+"px";
this.colWidth = width;
this.gap = gap;
return {
pageWidth : this.spreadWidth,
pageHeight : _height
};
};
EPUBJS.Layout.Reflowable.prototype.calculatePages = function() {
var totalWidth, displayedPages;
this.documentElement.style.width = "auto"; //-- reset width for calculations
totalWidth = this.documentElement.scrollWidth;
displayedPages = Math.ceil(totalWidth / this.spreadWidth);
return {
displayedPages : displayedPages,
pageCount : displayedPages
};
};
EPUBJS.Layout.ReflowableSpreads = function(view){
this.view = view;
this.documentElement = view.document.documentElement;
this.spreadWidth = null;
};
EPUBJS.Layout.ReflowableSpreads.prototype.format = function(_width, _height, _gap){
var columnAxis = EPUBJS.core.prefixed('columnAxis');
var columnGap = EPUBJS.core.prefixed('columnGap');
var columnWidth = EPUBJS.core.prefixed('columnWidth');
var columnFill = EPUBJS.core.prefixed('columnFill');
var divisor = 2,
cutoff = 800;
//-- Check the width and create even width columns //-- Check the width and create even width columns
var fullWidth = Math.floor(_width); var fullWidth = Math.floor(_width);
@ -79,70 +11,86 @@ EPUBJS.Layout.ReflowableSpreads.prototype.format = function(_width, _height, _ga
var section = Math.floor(width / 8); var section = Math.floor(width / 8);
var gap = (_gap >= 0) ? _gap : ((section % 2 === 0) ? section : section - 1); var gap = (_gap >= 0) ? _gap : ((section % 2 === 0) ? section : section - 1);
var colWidth;
var spreadWidth;
//-- Double Page //-- Double Page
var colWidth = Math.floor((width - gap) / divisor); if(divisor > 1) {
colWidth = Math.floor((width - gap) / divisor);
} else {
colWidth = width;
}
this.spreadWidth = (colWidth + gap) * divisor; spreadWidth = (colWidth + gap) * divisor;
this.view.document.documentElement.style.overflow = "hidden";
this.columnAxis = EPUBJS.core.prefixed('columnAxis');
this.columnGap = EPUBJS.core.prefixed('columnGap');
this.columnWidth = EPUBJS.core.prefixed('columnWidth');
this.columnFill = EPUBJS.core.prefixed('columnFill');
this.width = width;
this.height = _height;
this.spread = spreadWidth;
this.column = colWidth;
this.gap = gap;
this.divisor = divisor;
return this;
};
EPUBJS.Layout.Reflowable.prototype.format = function(view){
var $doc = view.document.documentElement;
var $body = view.document.body;//view.document.querySelector("body");
$doc.style.overflow = "hidden";
// Must be set to the new calculated width or the columns will be off // Must be set to the new calculated width or the columns will be off
this.view.document.body.style.width = width + "px"; $body.style.width = this.width + "px";
//-- Adjust height //-- Adjust height
this.view.document.body.style.height = _height + "px"; $body.style.height = this.height + "px";
//-- Add columns //-- Add columns
this.view.document.body.style[columnAxis] = "horizontal"; $body.style[this.columnAxis] = "horizontal";
this.view.document.body.style[columnFill] = "auto"; $body.style[this.columnFill] = "auto";
this.view.document.body.style[columnGap] = gap+"px"; $body.style[this.columnGap] = this.gap+"px";
this.view.document.body.style[columnWidth] = colWidth+"px"; $body.style[this.columnWidth] = this.column+"px";
this.colWidth = colWidth; // Add extra padding for the gap between this and the next view
this.gap = gap; view.iframe.style.marginRight = this.gap+"px";
// this.view.document.body.style.paddingRight = gap + "px"; };
// view.iframe.style.width = this.spreadWidth+"px";
// this.view.element.style.paddingRight = gap+"px"; EPUBJS.Layout.Reflowable.prototype.count = function(view) {
// view.iframe.style.paddingLeft = gap+"px"; var totalWidth = view.documentElement.scrollWidth;
var spreads = Math.ceil(totalWidth / this.spreadWidth);
return { return {
pageWidth : this.spreadWidth, spreads : spreads,
pageHeight : _height pages : spreads * this.divisor
}; };
}; };
EPUBJS.Layout.ReflowableSpreads.prototype.calculatePages = function(view) { EPUBJS.Layout.Fixed = function(_width, _height){
var totalWidth = this.documentElement.scrollWidth;
var displayedPages = Math.ceil(totalWidth / this.spreadWidth);
//-- Add a page to the width of the document to account an for odd number of pages
// this.documentElement.style.width = totalWidth + this.spreadWidth + "px";
return {
displayedPages : displayedPages,
pageCount : displayedPages * 2
};
}; };
EPUBJS.Layout.Fixed = function(){ EPUBJS.Layout.Fixed.prototype.format = function(view){
this.documentElement = null;
};
EPUBJS.Layout.Fixed = function(documentElement, _width, _height, _gap){
var columnWidth = EPUBJS.core.prefixed('columnWidth');
var viewport = documentElement.querySelector("[name=viewport");
var content;
var contents;
var width, height; var width, height;
this.documentElement = documentElement; var $doc = view.document.documentElement;
var $viewport = documentElement.querySelector("[name=viewport");
/** /**
* check for the viewport size * check for the viewport size
* <meta name="viewport" content="width=1024,height=697" /> * <meta name="viewport" content="width=1024,height=697" />
*/ */
if(viewport && viewport.hasAttribute("content")) { if($viewport && $viewport.hasAttribute("content")) {
content = viewport.getAttribute("content"); content = $viewport.getAttribute("content");
contents = content.split(','); contents = content.split(',');
if(contents[0]){ if(contents[0]){
width = contents[0].replace("width=", ''); width = contents[0].replace("width=", '');
@ -153,28 +101,38 @@ EPUBJS.Layout.Fixed = function(documentElement, _width, _height, _gap){
} }
//-- Adjust width and height //-- Adjust width and height
documentElement.style.width = width + "px" || "auto"; // $doc.style.width = width + "px" || "auto";
documentElement.style.height = height + "px" || "auto"; // $doc.style.height = height + "px" || "auto";
view.resize(width, height);
//-- Remove columns
documentElement.style[columnWidth] = "auto";
//-- Scroll //-- Scroll
documentElement.style.overflow = "auto"; $doc.style.overflow = "auto";
this.colWidth = width;
this.gap = 0;
return {
pageWidth : width,
pageHeight : height
};
}; };
EPUBJS.Layout.Fixed.prototype.calculatePages = function(){ EPUBJS.Layout.Fixed.prototype.count = function(){
return { return {
displayedPages : 1, spreads : 1,
pageCount : 1 pages : 1
};
};
EPUBJS.Layout.Scroll = function(){
};
EPUBJS.Layout.Scroll.prototype.format = function(view){
var $doc = view.document.documentElement;
$doc.style.width = "auto";
$doc.style.height = "auto";
};
EPUBJS.Layout.Scroll.prototype.count = function(){
return {
spreads : 1,
pages : 1
}; };
}; };

83
lib/epubjs/paginate.js
View file

@ -9,7 +9,6 @@ EPUBJS.Paginate = function(book, options) {
forceSingle: false, forceSingle: false,
minSpreadWidth: 800, //-- overridden by spread: none (never) / both (always) minSpreadWidth: 800, //-- overridden by spread: none (never) / both (always)
gap: "auto", //-- "auto" or int gap: "auto", //-- "auto" or int
layoutOveride : null, // Default: { spread: 'reflowable', layout: 'auto', orientation: 'auto'},
overflow: "hidden", overflow: "hidden",
infinite: false infinite: false
}); });
@ -18,6 +17,10 @@ EPUBJS.Paginate = function(book, options) {
this.isForcedSingle = false; this.isForcedSingle = false;
this.viewSettings = {
axis: this.settings.axis
};
this.start(); this.start();
}; };
@ -26,10 +29,10 @@ EPUBJS.Paginate.prototype.constructor = EPUBJS.Paginate;
EPUBJS.Paginate.prototype.determineSpreads = function(cutoff){ EPUBJS.Paginate.prototype.determineSpreads = function(cutoff){
if(this.isForcedSingle || !cutoff || this.width < cutoff) { if(this.isForcedSingle || !cutoff || this.bounds().width < cutoff) {
return false; //-- Single Page return 1; //-- Single Page
}else{ }else{
return true; //-- Double Page return 2; //-- Double Page
} }
}; };
@ -52,6 +55,7 @@ EPUBJS.Paginate.prototype.forceSingle = function(bool){
EPUBJS.Paginate.prototype.determineLayout = function(settings){ EPUBJS.Paginate.prototype.determineLayout = function(settings){
// Default is layout: reflowable & spread: auto // Default is layout: reflowable & spread: auto
var spreads = this.determineSpreads(this.settings.minSpreadWidth); var spreads = this.determineSpreads(this.settings.minSpreadWidth);
console.log("spreads", spreads, this.settings.minSpreadWidth)
var layoutMethod = spreads ? "ReflowableSpreads" : "Reflowable"; var layoutMethod = spreads ? "ReflowableSpreads" : "Reflowable";
var scroll = false; var scroll = false;
@ -74,69 +78,48 @@ EPUBJS.Paginate.prototype.determineLayout = function(settings){
} }
this.spreads = spreads; this.spreads = spreads;
// this.render.scroll(scroll);
return layoutMethod; return layoutMethod;
}; };
/**
* Reconciles the current chapters layout properies with
* the global layout properities.
* Takes: global layout settings object, chapter properties string
* Returns: Object with layout properties
*/
EPUBJS.Paginate.prototype.reconcileLayoutSettings = function(global, chapter){
var settings = {};
//-- Get the global defaults
for (var attr in global) {
if (global.hasOwnProperty(attr)){
settings[attr] = global[attr];
}
}
//-- Get the chapter's display type
chapter.forEach(function(prop){
var rendition = prop.replace("rendition:", '');
var split = rendition.indexOf("-");
var property, value;
if(split != -1){
property = rendition.slice(0, split);
value = rendition.slice(split+1);
settings[property] = value;
}
});
return settings;
};
EPUBJS.Paginate.prototype.start = function(){ EPUBJS.Paginate.prototype.start = function(){
// On display // On display
// this.layoutSettings = this.reconcileLayoutSettings(globalLayout, chapter.properties); // this.layoutSettings = this.reconcileLayoutSettings(globalLayout, chapter.properties);
// this.layoutMethod = this.determineLayout(this.layoutSettings); // this.layoutMethod = this.determineLayout(this.layoutSettings);
// this.layout = new EPUBJS.Layout[this.layoutMethod](); // this.layout = new EPUBJS.Layout[this.layoutMethod]();
this.hooks.display.register(this.registerLayoutMethod.bind(this)); //this.hooks.display.register(this.registerLayoutMethod.bind(this));
this.currentPage = 0; this.currentPage = 0;
}; };
EPUBJS.Paginate.prototype.registerLayoutMethod = function(view) { // EPUBJS.Rendition.prototype.createView = function(section) {
var task = new RSVP.defer(); // var view = new EPUBJS.View(section, this.viewSettings);
this.layoutMethod = this.determineLayout({});
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);
// Add extra padding for the gap between this and the next view // return view;
view.iframe.style.marginRight = this.layout.gap+"px"; // };
EPUBJS.Paginate.prototype.layoutMethod = function() {
//var task = new RSVP.defer();
this.spreads = this.determineSpreads(this.settings.minSpreadWidth);
this.layout = new EPUBJS.Layout.Reflowable(
this.stage.width,
this.stage.height,
this.settings.gap,
this.spreads
);
// Set the look ahead offset for what is visible // Set the look ahead offset for what is visible
this.settings.offset = this.formated.pageWidth; this.settings.offset = this.layout.spread;
task.resolve(); // this.hooks.layout.register(this.layout.format.bind(this));
return task.promise;
//task.resolve();
//return task.promise;
// return layout;
}; };
EPUBJS.Paginate.prototype.page = function(pg){ EPUBJS.Paginate.prototype.page = function(pg){
@ -150,7 +133,7 @@ EPUBJS.Paginate.prototype.page = function(pg){
EPUBJS.Paginate.prototype.next = function(){ EPUBJS.Paginate.prototype.next = function(){
this.q.enqueue(function(){ this.q.enqueue(function(){
this.scrollBy(this.formated.pageWidth, 0); this.scrollBy(this.layout.spread, 0);
return this.check(); return this.check();
}); });
@ -160,7 +143,7 @@ EPUBJS.Paginate.prototype.next = function(){
EPUBJS.Paginate.prototype.prev = function(){ EPUBJS.Paginate.prototype.prev = function(){
this.q.enqueue(function(){ this.q.enqueue(function(){
this.scrollBy(-this.formated.pageWidth, 0); this.scrollBy(-this.layout.spread, 0);
return this.check(); return this.check();
}); });
// return this.page(this.currentPage - 1); // return this.page(this.currentPage - 1);

103
lib/epubjs/rendition.js
View file

@ -4,11 +4,14 @@ EPUBJS.Rendition = function(book, options) {
infinite: true, infinite: true,
hidden: false, hidden: false,
width: false, width: false,
height: false height: false,
layoutOveride : null, // Default: { spread: 'reflowable', layout: 'auto', orientation: 'auto'},
}); });
EPUBJS.core.extend(this.settings, options); EPUBJS.core.extend(this.settings, options);
this.viewSettings = {};
this.book = book; this.book = book;
if(this.settings.hidden) { if(this.settings.hidden) {
@ -19,7 +22,7 @@ EPUBJS.Rendition = function(book, options) {
//-- Adds Hook methods to the Rendition prototype //-- Adds Hook methods to the Rendition prototype
this.hooks = {}; this.hooks = {};
this.hooks.display = new EPUBJS.Hook(this); this.hooks.layout = new EPUBJS.Hook(this);
this.hooks.replacements = new EPUBJS.Hook(this); this.hooks.replacements = new EPUBJS.Hook(this);
this.hooks.replacements.register(EPUBJS.replace.links.bind(this)); this.hooks.replacements.register(EPUBJS.replace.links.bind(this));
@ -29,6 +32,10 @@ EPUBJS.Rendition = function(book, options) {
this.q.enqueue(this.book.opened); this.q.enqueue(this.book.opened);
this.book.opened.then(function(){
this.globalLayoutProperties = this.parseLayoutProperties(this.book.package.metadata);
}.bind(this));
}; };
/** /**
@ -37,8 +44,8 @@ EPUBJS.Rendition = function(book, options) {
*/ */
EPUBJS.Rendition.prototype.initialize = function(_options){ EPUBJS.Rendition.prototype.initialize = function(_options){
var options = _options || {}; var options = _options || {};
var height = options.height !== false ? options.height : "100%"; var height = options.height;// !== false ? options.height : "100%";
var width = options.width !== false ? options.width : "100%"; var width = options.width;// !== false ? options.width : "100%";
var hidden = options.hidden || false; var hidden = options.hidden || false;
var container; var container;
var wrapper; var wrapper;
@ -54,6 +61,9 @@ EPUBJS.Rendition.prototype.initialize = function(_options){
// Create new container element // Create new container element
container = document.createElement("div"); container = document.createElement("div");
container.id = "epubjs-container:" + EPUBJS.core.uuid();
container.classList.add("epub-container");
// Style Element // Style Element
container.style.fontSize = "0"; container.style.fontSize = "0";
container.style.wordSpacing = "0"; container.style.wordSpacing = "0";
@ -64,13 +74,13 @@ EPUBJS.Rendition.prototype.initialize = function(_options){
container.style.whiteSpace = "nowrap"; container.style.whiteSpace = "nowrap";
} }
//if(options.width){ if(width){
container.style.width = width; container.style.width = width;
//} }
//if(options.height){ if(height){
container.style.height = height; container.style.height = height;
//} }
container.style.overflow = this.settings.overflow; container.style.overflow = this.settings.overflow;
@ -116,25 +126,13 @@ EPUBJS.Rendition.prototype.attachTo = function(_element){
this.attachListeners(); this.attachListeners();
// Calculate Stage Size // Calculate Stage Size
// this.containerStyles = window.getComputedStyle(this.container);
// this.containerPadding = {
// left: parseFloat(this.containerStyles["padding-left"]) || 0,
// right: parseFloat(this.containerStyles["padding-right"]) || 0,
// top: parseFloat(this.containerStyles["padding-top"]) || 0,
// bottom: parseFloat(this.containerStyles["padding-bottom"]) || 0
// };
// this.stage = {
// width: parseFloat(this.containerStyles.width) -
// this.containerPadding.left -
// this.containerPadding.right,
// height: parseFloat(this.containerStyles.height) -
// this.containerPadding.top -
// this.containerPadding.bottom
// };
this.stageSize(); this.stageSize();
// Add Layout method
this.layoutMethod();
// Trigger Attached // Trigger Attached
this.trigger("attached");
// Start processing queue // Start processing queue
this.q.run(); this.q.run();
@ -168,7 +166,7 @@ EPUBJS.Rendition.prototype.display = function(what){
this.displaying = true; this.displaying = true;
if(section){ if(section){
view = new EPUBJS.View(section); view = this.createView(section);
// Show view // Show view
this.q.enqueue(this.append, view); this.q.enqueue(this.append, view);
@ -196,24 +194,24 @@ EPUBJS.Rendition.prototype.render = function(view) {
view.create(); view.create();
view.onLayout = this.layout.format.bind(this.layout);
// 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)
.then(function(){
return this.hooks.display.trigger(view);
}.bind(this))
.then(function(){ .then(function(){
return this.hooks.replacements.trigger(view, this); return this.hooks.replacements.trigger(view, this);
}.bind(this)) }.bind(this))
.then(function(){ .then(function(){
return view.expand(); return this.hooks.layout.trigger(view);
}.bind(this)) }.bind(this))
.then(function(){ .then(function(){
view.show(); return view.show()
}.bind(this))
.then(function(view){
this.trigger("rendered", view.section); this.trigger("rendered", view.section);
return view;
}.bind(this)) }.bind(this))
.catch(function(e){ .catch(function(e){
this.trigger("loaderror", e); this.trigger("loaderror", e);
@ -221,6 +219,7 @@ EPUBJS.Rendition.prototype.render = function(view) {
}; };
EPUBJS.Rendition.prototype.afterDisplayed = function(view){ EPUBJS.Rendition.prototype.afterDisplayed = function(view){
this.trigger("displayed", view.section); this.trigger("displayed", view.section);
}; };
@ -265,8 +264,8 @@ EPUBJS.Rendition.prototype.remove = function(view) {
EPUBJS.Rendition.prototype.resizeView = function(view) { EPUBJS.Rendition.prototype.resizeView = function(view) {
if(this.settings.axis === "horizontal") { if(this.globalLayoutProperties.layout === "pre-paginated") {
view.lock(null, this.stage.height); view.lock(this.stage.width, this.stage.height);
} else { } else {
view.lock(this.stage.width, null); view.lock(this.stage.width, null);
} }
@ -332,17 +331,19 @@ EPUBJS.Rendition.prototype.stageSize = function(_width, _height){
}; };
EPUBJS.Rendition.prototype.layoutMethod = function() {
this.layout = new EPUBJS.Layout.Scroll();
};
EPUBJS.Rendition.prototype.resize = function(width, height){ EPUBJS.Rendition.prototype.resize = function(width, height){
this.stageSize(width, height); this.stageSize(width, height);
this.views.forEach(function(view){ this.layoutMethod();
if(this.settings.axis === "vertical") {
view.lock(this.stage.width, null); this.views.forEach(this.resizeView.bind(this));
} else {
view.lock(null, this.stage.height);
}
}.bind(this));
this.trigger("resized", { this.trigger("resized", {
width: this.stage.width, width: this.stage.width,
@ -355,6 +356,10 @@ EPUBJS.Rendition.prototype.onResized = function(e) {
this.resize(); this.resize();
}; };
EPUBJS.Rendition.prototype.createView = function(section) {
return new EPUBJS.View(section, this.viewSettings);
};
EPUBJS.Rendition.prototype.next = function(){ EPUBJS.Rendition.prototype.next = function(){
return this.q.enqueue(function(){ return this.q.enqueue(function(){
@ -367,7 +372,7 @@ EPUBJS.Rendition.prototype.next = function(){
next = this.views[0].section.next(); next = this.views[0].section.next();
if(next) { if(next) {
view = new EPUBJS.View(next); view = this.createView(next);
return this.append(view); return this.append(view);
} }
@ -386,7 +391,7 @@ EPUBJS.Rendition.prototype.prev = function(){
prev = this.views[0].section.prev(); prev = this.views[0].section.prev();
if(prev) { if(prev) {
view = new EPUBJS.View(prev); view = this.createView(prev);
return this.append(view); return this.append(view);
} }
@ -394,5 +399,19 @@ EPUBJS.Rendition.prototype.prev = function(){
}; };
//-- http://www.idpf.org/epub/fxl/
EPUBJS.Rendition.prototype.parseLayoutProperties = function(metadata){
var layout = (this.layoutOveride && this.layoutOveride.layout) || metadata.layout || "reflowable";
var spread = (this.layoutOveride && this.layoutOveride.spread) || metadata.spread || "auto";
var orientation = (this.layoutOveride && this.layoutOveride.orientation) || metadata.orientation || "auto";
return {
layout : layout,
spread : spread,
orientation : orientation
};
};
//-- Enable binding events to Renderer //-- Enable binding events to Renderer
RSVP.EventTarget.mixin(EPUBJS.Rendition.prototype); RSVP.EventTarget.mixin(EPUBJS.Rendition.prototype);

30
lib/epubjs/section.js
View file

@ -89,3 +89,33 @@ EPUBJS.Section.prototype.render = function(_request){
EPUBJS.Section.prototype.find = function(_query){ EPUBJS.Section.prototype.find = function(_query){
}; };
/**
* Reconciles the current chapters layout properies with
* the global layout properities.
* Takes: global layout settings object, chapter properties string
* Returns: Object with layout properties
*/
EPUBJS.Section.prototype.reconcileLayoutSettings = function(global){
//-- Get the global defaults
var settings = {
layout : global.layout,
spread : global.spread,
orientation : global.orientation
};
//-- Get the chapter's display type
this.properties.forEach(function(prop){
var rendition = prop.replace("rendition:", '');
var split = rendition.indexOf("-");
var property, value;
if(split != -1){
property = rendition.slice(0, split);
value = rendition.slice(split+1);
settings[property] = value;
}
});
return settings;
};

189
lib/epubjs/view.js
View file

@ -1,4 +1,6 @@
EPUBJS.View = function(section, horz) { EPUBJS.View = function(section, options) {
this.settings = options || {};
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;
@ -7,7 +9,7 @@ EPUBJS.View = function(section, horz) {
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.minHeight = "100px"; // this.element.style.minHeight = "100px";
this.element.style.height = "0px"; this.element.style.height = "0px";
@ -17,12 +19,19 @@ EPUBJS.View = function(section, horz) {
this.shown = false; this.shown = false;
this.rendered = false; this.rendered = false;
this.width = 0; //this.width = 0;
this.height = 0; //this.height = 0;
if(this.settings.axis && this.settings.axis == "horizontal"){
this.element.style.display = "inline-block";
} else {
this.element.style.display = "block";
}
}; };
EPUBJS.View.prototype.create = function(width, height) { EPUBJS.View.prototype.create = function() {
if(this.iframe) { if(this.iframe) {
return this.iframe; return this.iframe;
@ -44,6 +53,7 @@ EPUBJS.View.prototype.create = function(width, height) {
this.element.appendChild(this.iframe); this.element.appendChild(this.iframe);
this.rendered = true; this.rendered = true;
this.elementBounds = EPUBJS.core.bounds(this.element);
// if(width || height){ // if(width || height){
// this.resize(width, height); // this.resize(width, height);
@ -65,21 +75,31 @@ EPUBJS.View.prototype.create = function(width, height) {
EPUBJS.View.prototype.lock = function(width, height) { EPUBJS.View.prototype.lock = function(width, height) {
var borders = EPUBJS.core.borders(this.element); var elBorders = EPUBJS.core.borders(this.element);
var iframeBorders;
if(this.iframe) {
iframeBorders = EPUBJS.core.borders(this.iframe);
} else {
iframeBorders = {width: 0, height: 0};
}
if(EPUBJS.core.isNumber(width)){ if(EPUBJS.core.isNumber(width)){
this.lockedWidth = width - borders.width; this.lockedWidth = width - elBorders.width - iframeBorders.width;
this.resize(this.lockedWidth, 0);
} }
if(EPUBJS.core.isNumber(height)){ if(EPUBJS.core.isNumber(height)){
this.lockedHeight = height - borders.height; this.lockedHeight = height - elBorders.height - iframeBorders.height;
this.resize(0, this.lockedHeight);
} }
if(this.shown) { if(this.shown) {
this.resize(this.lockedWidth, this.lockedHeight);
if (this.iframe && !this.resizing) { if (this.iframe && !this.resizing) {
//this.expand(); this.expand();
} }
} }
@ -90,22 +110,6 @@ EPUBJS.View.prototype.lock = function(width, height) {
EPUBJS.View.prototype.resize = function(width, height) { EPUBJS.View.prototype.resize = function(width, height) {
if(!this.shown) return;
if(EPUBJS.core.isNumber(width)){
this.element.style.width = width + "px";
}
if(EPUBJS.core.isNumber(height)){
this.element.style.height = height + "px";
}
this.elementBounds = EPUBJS.core.bounds(this.element);
};
EPUBJS.View.prototype.reframe = function(width, height) {
if(!this.iframe) return; if(!this.iframe) return;
if(EPUBJS.core.isNumber(width)){ if(EPUBJS.core.isNumber(width)){
@ -117,7 +121,33 @@ EPUBJS.View.prototype.reframe = function(width, height) {
} }
this.iframeBounds = EPUBJS.core.bounds(this.iframe); this.iframeBounds = EPUBJS.core.bounds(this.iframe);
this.resize(this.iframeBounds.width, this.iframeBounds.height); this.reframe(this.iframeBounds.width, this.iframeBounds.height);
};
EPUBJS.View.prototype.reframe = function(width, height) {
var prevBounds;
if(!this.shown) return;
if(EPUBJS.core.isNumber(width)){
this.element.style.width = width + "px";
}
if(EPUBJS.core.isNumber(height)){
this.element.style.height = height + "px";
}
prevBounds = this.elementBounds;
this.elementBounds = EPUBJS.core.bounds(this.element);
this.trigger("resized", {
width: this.elementBounds.width,
height: this.elementBounds.height,
widthDelta: this.elementBounds.width - prevBounds.width,
heightDelta: this.elementBounds.height - prevBounds.height,
});
}; };
@ -138,7 +168,6 @@ EPUBJS.View.prototype.display = function(_request) {
.then(function(contents){ .then(function(contents){
return this.load(contents); return this.load(contents);
}.bind(this)) }.bind(this))
.then(this.afterLoad.bind(this))
.then(this.displaying.resolve.call(this)); .then(this.displaying.resolve.call(this));
}; };
@ -170,41 +199,61 @@ EPUBJS.View.prototype.load = function(contents) {
this.document.close(); this.document.close();
} }
return loaded; return loaded;
}; };
EPUBJS.View.prototype.afterLoad = function() { EPUBJS.View.prototype.layout = function(layoutFunc) {
// this.iframe.style.display = "block"; this.iframe.style.display = "inline-block";
this.iframe.style.display = "block";
// Reset Body Styles // Reset Body Styles
this.document.body.style.margin = "0"; this.document.body.style.margin = "0";
this.document.body.style.display = "inline-block"; //this.document.body.style.display = "inline-block";
this.document.documentElement.style.width = "auto"; //this.document.documentElement.style.width = "auto";
if(layoutFunc){
layoutFunc(this);
}
this.onLayout(this);
};
EPUBJS.View.prototype.onLayout = function(view) {
// stub
};
EPUBJS.View.prototype.listeners = function() {
/*
setTimeout(function(){ setTimeout(function(){
this.window.addEventListener("resize", this.resized.bind(this), false); this.window.addEventListener("resize", this.resized.bind(this), false);
}.bind(this), 10); // Wait to listen for resize events }.bind(this), 10); // Wait to listen for resize events
*/
// Wait for fonts to load to finish // Wait for fonts to load to finish
// http://dev.w3.org/csswg/css-font-loading/
// Not implemented fully
/*
if(this.document.fonts && this.document.fonts.status === "loading") { if(this.document.fonts && this.document.fonts.status === "loading") {
this.document.fonts.onloading = function(){ console.log("fonts unloaded");
this.document.fonts.onloadingdone = function(){
console.log("loaded fonts");
this.expand(); this.expand();
}.bind(this); }.bind(this);
} }
*/
if(this.section.properties.indexOf("scripted") > -1){ if(this.section.properties.indexOf("scripted") > -1){
this.observer = this.observe(this.document.body); this.observer = this.observe(this.document.body);
} }
this.imageLoadListeners(); this.imageLoadListeners();
};
this.mediaQueryListeners();
};
/*
EPUBJS.View.prototype.expand = function(_defer, _count, _func) { EPUBJS.View.prototype.expand = function(_defer, _count, _func) {
var bounds; var bounds;
var width, height; var width, height;
@ -222,12 +271,14 @@ EPUBJS.View.prototype.expand = function(_defer, _count, _func) {
// Check bounds // Check bounds
bounds = this.document.body.getBoundingClientRect(); bounds = this.document.body.getBoundingClientRect();
if(!bounds || (bounds.height === 0 && bounds.width === 0)) { if(!bounds || (bounds.height === 0 && bounds.width === 0)) {
console.error("View not shown"); console.error("View not shown", this);
// setTimeout(function(){ // setTimeout(function(){
// this.expand(expanding, count); // this.expand(expanding, count);
// }.bind(this), TIMEOUT); // }.bind(this), TIMEOUT);
expanding.resolve();
return expanded; return expanded;
} }
@ -261,6 +312,50 @@ EPUBJS.View.prototype.expand = function(_defer, _count, _func) {
return expanded; return expanded;
}; };
*/
EPUBJS.View.prototype.expand = function() {
var width = this.lockedWidth;
var height = this.lockedHeight;
// Expand Vertically
if(width && !height) {
height = this.document.documentElement.scrollHeight;
}
// Expand Horizontally
if(height && !width) {
width = this.document.body.scrollWidth;
};
this.resize(width, height);
//this.width = width;
//this.height = height;
};
//https://github.com/tylergaw/media-query-events/blob/master/js/mq-events.js
EPUBJS.View.prototype.mediaQueryListeners = function() {
var sheets = this.document.styleSheets;
var mediaChangeHandler = function(m){
if(m.matches) {
this.expand();
}
}.bind(this);
for (var i = 0; i < sheets.length; i += 1) {
var rules = sheets[i].cssRules;
for (var j = 0; j < rules.length; j += 1) {
//if (rules[j].constructor === CSSMediaRule) {
if(rules[j].media){
var mql = this.window.matchMedia(rules[j].media.mediaText);
mql.addListener(mediaChangeHandler);
//mql.onchange = mediaChangeHandler;
}
}
}
};
EPUBJS.View.prototype.observe = function(target) { EPUBJS.View.prototype.observe = function(target) {
var renderer = this; var renderer = this;
@ -306,19 +401,25 @@ EPUBJS.View.prototype.imageLoadListeners = function(target) {
}; };
EPUBJS.View.prototype.show = function() { EPUBJS.View.prototype.show = function() {
var shown = new RSVP.defer();
this.shown = true; this.shown = true;
// Reframe, incase the iframe was recreated this.layout();
// Also resizes element.
this.reframe(this.width, this.height) this.listeners();
this.expand();
// this.iframe.style.display = "inline-block";
this.element.style.visibility = "visible"; this.element.style.visibility = "visible";
this.iframe.style.visibility = "visible"; this.iframe.style.visibility = "visible";
this.onShown(this);
this.trigger("shown", this); this.trigger("shown", this);
this.onShown(this);
shown.resolve(this);
return shown.promise;
}; };
EPUBJS.View.prototype.hide = function() { EPUBJS.View.prototype.hide = function() {

2
package.json
View file

@ -31,6 +31,6 @@
"serve-static": "^1.3.1" "serve-static": "^1.3.1"
}, },
"dependencies": { "dependencies": {
"rsvp": "^3.0.14" "rsvp": "^3.0.18"
} }
} }