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

fixed rendering loop

Browse source
This commit is contained in:
Fred Chasen 2014-08-06 12:22:37 -04:00
parent d73133e2c7
commit 5058ced1c4
9 changed files with 198 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

3
README.md Normal file
View file

@ -0,0 +1,3 @@
npm install
bower install

38
dist/epub.js vendored
View file

@ -4083,8 +4083,8 @@ EPUBJS.Renderer.prototype.initialize = function(_options){
this.container = document.createElement("div"); this.container = document.createElement("div");
this.infinite = new EPUBJS.Infinite(this.container, this); this.infinite = new EPUBJS.Infinite(this.container, this);
this.container.style.width = height; this.container.style.width = width;
this.container.style.height = width; this.container.style.height = height;
this.container.style.overflow = "scroll"; this.container.style.overflow = "scroll";
if(options.hidden) { if(options.hidden) {
@ -4160,11 +4160,20 @@ EPUBJS.Renderer.prototype.attachTo = function(_element){
}; };
EPUBJS.Renderer.prototype.clear = function(){
this.views.forEach(function(view){
view.destroy();
});
this.views = [];
};
EPUBJS.Renderer.prototype.display = function(what){ EPUBJS.Renderer.prototype.display = function(what){
var displaying = new RSVP.defer(); var displaying = new RSVP.defer();
var displayed = displaying.promise; var displayed = displaying.promise;
var view = new EPUBJS.View();
// Clear views
this.clear();
this.book.opened.then(function(){ this.book.opened.then(function(){
var section = this.book.spine.get(what); var section = this.book.spine.get(what);
@ -4261,9 +4270,11 @@ EPUBJS.Renderer.prototype.backwards = function(view){
// -- this might want to be in infinite // -- this might want to be in infinite
EPUBJS.Renderer.prototype.fill = function() { EPUBJS.Renderer.prototype.fill = function() {
console.log("filling")
var filling = this.backwards(); var filling = this.backwards();
var height = this.container.getBoundingClientRect().height; var height = this.container.getBoundingClientRect().height;
if(!filling) return;
filling.then(function(){ filling.then(function(){
var bottom = this.last().bounds().bottom; var bottom = this.last().bounds().bottom;
while (height && bottom && bottom < height) { while (height && bottom && bottom < height) {
@ -4457,6 +4468,9 @@ EPUBJS.View.prototype.load = function(contents) {
this.layout(); this.layout();
// This needs to run twice to get to the correct size sometimes?
this.layout();
this.iframe.style.visibility = "visible"; this.iframe.style.visibility = "visible";
loading.resolve(this); loading.resolve(this);
@ -4500,10 +4514,7 @@ EPUBJS.View.prototype.resized = function() {
EPUBJS.View.prototype.layout = function() { EPUBJS.View.prototype.layout = function() {
var bounds = {}, content, width = 0, height = 0; var bounds = {}, content, width = 0, height = 0;
// This needs to run twice to get to the correct size
while(bounds.height != height || bounds.width != width) {
this.resizing = true; this.resizing = true;
// Check bounds // Check bounds
bounds = this.document.body.getBoundingClientRect(); bounds = this.document.body.getBoundingClientRect();
@ -4519,16 +4530,23 @@ EPUBJS.View.prototype.layout = function() {
this.width = width; this.width = width;
this.height = height; this.height = height;
}
// if(bounds.height != content.height || bounds.width != content.width) {
// // this.layout();
// console.log(bounds, content)
// }
}; };
EPUBJS.View.prototype.appendTo = function(element) { EPUBJS.View.prototype.appendTo = function(element) {
element.appendChild(this.iframe); this.element = element;
this.element.appendChild(this.iframe);
}; };
EPUBJS.View.prototype.prependTo = function(element) { EPUBJS.View.prototype.prependTo = function(element) {
this.element = element;
element.insertBefore(this.iframe, element.firstChild); element.insertBefore(this.iframe, element.firstChild);
}; };
@ -4537,6 +4555,6 @@ EPUBJS.View.prototype.bounds = function() {
}; };
EPUBJS.View.prototype.destroy = function() { EPUBJS.View.prototype.destroy = function() {
this.element.removeChild(this.iframe);
}; };

4
dist/epub.min.js vendored
View file

File diff suppressed because one or more lines are too long

9
examples/basic-render.html
View file

@ -12,11 +12,14 @@
} }
#viewer { #viewer {
position: absolute; /* position: absolute;
left: 10%; left: 10%;
width: 80%; width: 80%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden; */
display: block;
margin: 50px auto;
width: 600px;
} }
#prev { #prev {
@ -63,7 +66,7 @@
var currentSectionIndex = 10; var currentSectionIndex = 10;
// 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"); var rendition = book.renderTo("viewer", {width: 600, height: 400});
var displayed = rendition.display(currentSectionIndex); var displayed = rendition.display(currentSectionIndex);

99
examples/toc.html Normal file
View file

@ -0,0 +1,99 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>EPUB.js Basic Example</title>
<script src="../dist/epub.js"></script>
<style type="text/css">
body {
margin: 0;
height: 100%;
}
#viewer {
display: block;
margin: 50px auto;
width: 600px;
}
#prev {
left: 40px;
}
#next {
right: 40px;
}
.arrow {
position: absolute;
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;
}
#toc {
display: block;
margin: 10px auto;
}
</style>
</head>
<body>
<select id="toc"></select>
<div id="viewer"></div>
<script>
var $viewer = document.getElementById("viewer");
var $next = document.getElementById("next");
var $prev = document.getElementById("prev");
var currentSectionIndex = 10;
// Load the opf
var book = ePub("../books/moby-dick/OPS/package.opf");
var rendition = book.renderTo("viewer", {width: 600, height: 400});
var displayed = rendition.display(currentSectionIndex);
book.loaded.navigation.then(function(toc){
var $select = document.getElementById("toc"),
docfrag = document.createDocumentFragment();
toc.forEach(function(chapter) {
var option = document.createElement("option");
option.textContent = chapter.label;
option.ref = chapter.href;
docfrag.appendChild(option);
});
$select.appendChild(docfrag);
$select.onchange = function(){
var index = $select.selectedIndex,
url = $select.options[index].ref;
rendition.display(url);
return false;
};
});
</script>
</body>
</html>

2
gulpfile.js
View file

@ -24,7 +24,7 @@ gulp.task('minify', function(){
// Watch Our Files // Watch Our Files
gulp.task('watch', function() { gulp.task('watch', function() {
gulp.watch('lib/*/*.js', ['lint', 'minify']); gulp.watch('lib/*/*.js', ['minify']);
}); });
// Default // Default

19
lib/epubjs/renderer.js
View file

@ -55,8 +55,8 @@ EPUBJS.Renderer.prototype.initialize = function(_options){
this.container = document.createElement("div"); this.container = document.createElement("div");
this.infinite = new EPUBJS.Infinite(this.container, this); this.infinite = new EPUBJS.Infinite(this.container, this);
this.container.style.width = height; this.container.style.width = width;
this.container.style.height = width; this.container.style.height = height;
this.container.style.overflow = "scroll"; this.container.style.overflow = "scroll";
if(options.hidden) { if(options.hidden) {
@ -132,11 +132,20 @@ EPUBJS.Renderer.prototype.attachTo = function(_element){
}; };
EPUBJS.Renderer.prototype.clear = function(){
this.views.forEach(function(view){
view.destroy();
});
this.views = [];
};
EPUBJS.Renderer.prototype.display = function(what){ EPUBJS.Renderer.prototype.display = function(what){
var displaying = new RSVP.defer(); var displaying = new RSVP.defer();
var displayed = displaying.promise; var displayed = displaying.promise;
var view = new EPUBJS.View();
// Clear views
this.clear();
this.book.opened.then(function(){ this.book.opened.then(function(){
var section = this.book.spine.get(what); var section = this.book.spine.get(what);
@ -233,9 +242,11 @@ EPUBJS.Renderer.prototype.backwards = function(view){
// -- this might want to be in infinite // -- this might want to be in infinite
EPUBJS.Renderer.prototype.fill = function() { EPUBJS.Renderer.prototype.fill = function() {
console.log("filling")
var filling = this.backwards(); var filling = this.backwards();
var height = this.container.getBoundingClientRect().height; var height = this.container.getBoundingClientRect().height;
if(!filling) return;
filling.then(function(){ filling.then(function(){
var bottom = this.last().bounds().bottom; var bottom = this.last().bounds().bottom;
while (height && bottom && bottom < height) { while (height && bottom && bottom < height) {

19
lib/epubjs/view.js
View file

@ -31,6 +31,9 @@ EPUBJS.View.prototype.load = function(contents) {
this.layout(); this.layout();
// This needs to run twice to get to the correct size sometimes?
this.layout();
this.iframe.style.visibility = "visible"; this.iframe.style.visibility = "visible";
loading.resolve(this); loading.resolve(this);
@ -74,10 +77,7 @@ EPUBJS.View.prototype.resized = function() {
EPUBJS.View.prototype.layout = function() { EPUBJS.View.prototype.layout = function() {
var bounds = {}, content, width = 0, height = 0; var bounds = {}, content, width = 0, height = 0;
// This needs to run twice to get to the correct size
while(bounds.height != height || bounds.width != width) {
this.resizing = true; this.resizing = true;
// Check bounds // Check bounds
bounds = this.document.body.getBoundingClientRect(); bounds = this.document.body.getBoundingClientRect();
@ -93,16 +93,23 @@ EPUBJS.View.prototype.layout = function() {
this.width = width; this.width = width;
this.height = height; this.height = height;
}
// if(bounds.height != content.height || bounds.width != content.width) {
// // this.layout();
// console.log(bounds, content)
// }
}; };
EPUBJS.View.prototype.appendTo = function(element) { EPUBJS.View.prototype.appendTo = function(element) {
element.appendChild(this.iframe); this.element = element;
this.element.appendChild(this.iframe);
}; };
EPUBJS.View.prototype.prependTo = function(element) { EPUBJS.View.prototype.prependTo = function(element) {
this.element = element;
element.insertBefore(this.iframe, element.firstChild); element.insertBefore(this.iframe, element.firstChild);
}; };
@ -111,6 +118,6 @@ EPUBJS.View.prototype.bounds = function() {
}; };
EPUBJS.View.prototype.destroy = function() { EPUBJS.View.prototype.destroy = function() {
this.element.removeChild(this.iframe);
}; };

4
package.json
View file

@ -24,6 +24,8 @@
"optimist": "^0.6.1", "optimist": "^0.6.1",
"portfinder": "^0.2.1", "portfinder": "^0.2.1",
"qunitjs": "^1.14.0", "qunitjs": "^1.14.0",
"serve-static": "^1.3.1" "serve-static": "^1.3.1",
"gulp-util": "~3.0.0",
"gulp-connect": "~2.0.6"
} }
} }