mirror of
https://github.com/futurepress/epub.js.git
synced 2025-10-03 14:59:18 +02:00
Scrolling Renderer remove views when they leave the screen
This commit is contained in:
Fred Chasen
parent
87bd3a68ad
commit
c6465177c5
9 changed files with 371 additions and 175 deletions
249
dist/epub.js
vendored
249
dist/epub.js
vendored
|
|
@ -3371,19 +3371,18 @@ EPUBJS.Infinite.prototype.check = function(){
|
|||
|
||||
if(this.scrolled && !this.displaying) {
|
||||
|
||||
// var scrollTop = window.pageYOffset || document.documentElement.scrollTop
|
||||
// var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft
|
||||
var scrollTop = this.container.scrollTop;
|
||||
var scrollLeft = this.container.scrollLeft;
|
||||
|
||||
// var scrollTop = document.body.scrollTop;//TODO: make document.body a variable
|
||||
// var scrollHeight = document.documentElement.scrollHeight;
|
||||
var scrollHeight = this.container.scrollHeight;
|
||||
var scrollWidth = this.container.scrollWidth;
|
||||
|
||||
var direction = scrollTop - this.prevScrollTop;
|
||||
var height = this.container.getBoundingClientRect().height;
|
||||
|
||||
var up = height - (scrollHeight - scrollTop) > -this.offset;
|
||||
var up = scrollTop + this.offset > scrollHeight-height;
|
||||
var down = scrollTop < this.offset;
|
||||
|
||||
// console.debug("scroll", scrollTop)
|
||||
if(up && direction > 0) {
|
||||
this.forwards();
|
||||
}
|
||||
|
|
@ -3391,15 +3390,34 @@ EPUBJS.Infinite.prototype.check = function(){
|
|||
this.backwards();
|
||||
}
|
||||
|
||||
// console.log(document.body.scrollTop)
|
||||
// console.log(scrollTop)
|
||||
this.prevScrollTop = scrollTop;
|
||||
|
||||
this.scrolled = false;
|
||||
} else {
|
||||
this.displaying = false;
|
||||
this.scrolled = false;
|
||||
}
|
||||
|
||||
this.tick.call(window, this.check.bind(this));
|
||||
}
|
||||
|
||||
EPUBJS.Infinite.prototype.scrollBy = function(x, y, silent){
|
||||
if(silent) {
|
||||
this.displaying = true;
|
||||
}
|
||||
this.container.scrollLeft += x;
|
||||
this.container.scrollTop += y;
|
||||
};
|
||||
|
||||
EPUBJS.Infinite.prototype.scroll = function(x, y, silent){
|
||||
if(silent) {
|
||||
this.displaying = true;
|
||||
}
|
||||
this.container.scrollLeft = x;
|
||||
this.container.scrollTop = y;
|
||||
};
|
||||
|
||||
RSVP.EventTarget.mixin(EPUBJS.Infinite.prototype);
|
||||
EPUBJS.Layout = function(){};
|
||||
|
||||
|
|
@ -4030,7 +4048,7 @@ EPUBJS.Renderer = function(book, _options) {
|
|||
var options = _options || {};
|
||||
this.settings = {
|
||||
hidden: options.hidden || false,
|
||||
viewLimit: 3,
|
||||
viewsLimit: 4,
|
||||
width: options.width || false,
|
||||
height: options.height || false,
|
||||
};
|
||||
|
|
@ -4153,8 +4171,13 @@ EPUBJS.Renderer.prototype.attachTo = function(_element){
|
|||
|
||||
this.infinite.start();
|
||||
|
||||
this.infinite.on("forwards", this.forwards.bind(this));
|
||||
this.infinite.on("backwards", this.backwards.bind(this));
|
||||
this.infinite.on("forwards", function(){
|
||||
if(!this.rendering) this.forwards();
|
||||
}.bind(this));
|
||||
|
||||
this.infinite.on("backwards", function(){
|
||||
if(!this.rendering) this.backwards();
|
||||
}.bind(this));
|
||||
|
||||
window.addEventListener("resize", this.onResized.bind(this), false);
|
||||
|
||||
|
|
@ -4179,10 +4202,11 @@ EPUBJS.Renderer.prototype.display = function(what){
|
|||
var section = this.book.spine.get(what);
|
||||
var rendered = this.render(section);
|
||||
|
||||
rendered.then(function(){
|
||||
this.fill();
|
||||
displaying.resolve(this);
|
||||
}.bind(this));
|
||||
rendered.
|
||||
then(this.fill.bind(this)).
|
||||
then(function(){
|
||||
displaying.resolve(this);
|
||||
}.bind(this));
|
||||
|
||||
}.bind(this));
|
||||
|
||||
|
|
@ -4201,12 +4225,19 @@ EPUBJS.Renderer.prototype.render = function(section){
|
|||
rendered = section.render();
|
||||
view.index = section.index;
|
||||
|
||||
// Place view in correct position
|
||||
this.insert(view, section.index);
|
||||
|
||||
return rendered.then(function(contents){
|
||||
return view.load(contents);
|
||||
});
|
||||
|
||||
return rendered.
|
||||
then(function(contents){
|
||||
// Place view in correct position
|
||||
this.insert(view, section.index);
|
||||
|
||||
return view.load(contents);
|
||||
}.bind(this))
|
||||
.then(function(){
|
||||
this.rendering = false;
|
||||
return view;
|
||||
}.bind(this));
|
||||
|
||||
};
|
||||
|
||||
|
|
@ -4216,23 +4247,36 @@ EPUBJS.Renderer.prototype.forwards = function(){
|
|||
var rendered;
|
||||
var section;
|
||||
|
||||
if(this.rendering) return;
|
||||
console.log("going forwards")
|
||||
|
||||
next = this.last().index + 1;
|
||||
|
||||
if(next === this.book.spine.length){
|
||||
return;
|
||||
if(this.rendering || next === this.book.spine.length){
|
||||
rendered = new RSVP.defer();
|
||||
rendered.reject({message: "reject forwards"});
|
||||
return rendered.promise;
|
||||
}
|
||||
console.log("going forwards")
|
||||
|
||||
this.rendering = true;
|
||||
|
||||
section = this.book.spine.get(next);
|
||||
rendered = this.render(section);
|
||||
this.rendering = true;
|
||||
|
||||
rendered.then(function(){
|
||||
console.log("last:", this.last().height)
|
||||
// this.rendering = false;
|
||||
var first = this.first();
|
||||
var bounds = first.bounds();
|
||||
var container = this.container.getBoundingClientRect();
|
||||
var offset;
|
||||
var prev = this.container.scrollTop;
|
||||
if(this.views.length > this.settings.viewsLimit) {
|
||||
|
||||
this.rendering = false;
|
||||
// Remove the item
|
||||
this.remove(first);
|
||||
|
||||
// Reset Position
|
||||
this.infinite.scroll(0, prev - bounds.height, true)
|
||||
|
||||
}
|
||||
}.bind(this));
|
||||
|
||||
return rendered;
|
||||
|
|
@ -4243,23 +4287,28 @@ EPUBJS.Renderer.prototype.backwards = function(view){
|
|||
var rendered;
|
||||
var section;
|
||||
|
||||
if(this.rendering) return;
|
||||
console.log("going backwards")
|
||||
|
||||
prev = this.first().index - 1;
|
||||
if(prev < 0){
|
||||
return; //TODO: should reject
|
||||
if(this.rendering || prev < 0){
|
||||
rendered = new RSVP.defer();
|
||||
rendered.reject({message: "reject backwards"});
|
||||
return rendered.promise;
|
||||
}
|
||||
console.log("going backwards")
|
||||
|
||||
this.rendering = true;
|
||||
|
||||
section = this.book.spine.get(prev);
|
||||
rendered = this.render(section);
|
||||
this.rendering = true;
|
||||
|
||||
rendered.then(function(){
|
||||
this.rendering = false;
|
||||
// -- this might want to be in infinite
|
||||
this.container.scrollTop += this.first().height;
|
||||
// this.container.scrollTop += this.first().height;
|
||||
this.infinite.scrollBy(0, this.first().height, true);
|
||||
|
||||
if(this.views.length > this.settings.viewsLimit) {
|
||||
last = this.last();
|
||||
this.remove(last);
|
||||
}
|
||||
}.bind(this));
|
||||
|
||||
return rendered;
|
||||
|
|
@ -4270,31 +4319,45 @@ EPUBJS.Renderer.prototype.backwards = function(view){
|
|||
|
||||
// -- this might want to be in infinite
|
||||
EPUBJS.Renderer.prototype.fill = function() {
|
||||
var filling = this.backwards();
|
||||
var height = this.container.getBoundingClientRect().height;
|
||||
|
||||
if(!filling) return;
|
||||
|
||||
filling.then(function(){
|
||||
var next = function(){
|
||||
var bottom = this.last().bounds().bottom;
|
||||
while (height && bottom && bottom < height) {
|
||||
this.forwards();
|
||||
};
|
||||
}.bind(this));
|
||||
};
|
||||
var defer = new RSVP.defer();
|
||||
var promise = defer.promise;
|
||||
|
||||
if (height && bottom && (bottom < height) && (this.last().index + 1 < this.book.spine.length)) {
|
||||
return this.forwards().then(next);
|
||||
} else {
|
||||
this.rendering = false;
|
||||
defer.resolve();
|
||||
return promise;
|
||||
}
|
||||
}.bind(this);
|
||||
|
||||
|
||||
return next().
|
||||
then(this.backwards.bind(this)).
|
||||
then(function(){
|
||||
this.rendering = false;
|
||||
}.bind(this));
|
||||
|
||||
|
||||
EPUBJS.Renderer.prototype.jump = function(view){
|
||||
this.views.push(view);
|
||||
};
|
||||
|
||||
EPUBJS.Renderer.prototype.append = function(view){
|
||||
var first, prevTop, prevHeight, offset;
|
||||
|
||||
this.views.push(view);
|
||||
view.appendTo(this.container);
|
||||
|
||||
};
|
||||
|
||||
EPUBJS.Renderer.prototype.prepend = function(view){
|
||||
var last;
|
||||
|
||||
this.views.unshift(view);
|
||||
view.prependTo(this.container);
|
||||
|
||||
};
|
||||
|
||||
// Simple Insert
|
||||
|
|
@ -4307,13 +4370,17 @@ EPUBJS.Renderer.prototype.insert = function(view, index){
|
|||
} else if(index - this.last().index <= 0) {
|
||||
this.prepend(view);
|
||||
}
|
||||
|
||||
console.log("insert")
|
||||
// return position;
|
||||
};
|
||||
|
||||
// Remove the render element and clean up listeners
|
||||
EPUBJS.Renderer.prototype.destroy = function() {
|
||||
|
||||
EPUBJS.Renderer.prototype.remove = function(view) {
|
||||
var index = this.views.indexOf(view);
|
||||
view.destroy();
|
||||
if(index > -1) {
|
||||
this.views.splice(index, 1);
|
||||
}
|
||||
};
|
||||
|
||||
EPUBJS.Renderer.prototype.first = function() {
|
||||
|
|
@ -4436,7 +4503,7 @@ EPUBJS.SpineItem.prototype.render = function(){
|
|||
EPUBJS.SpineItem.prototype.find = function(_query){
|
||||
|
||||
};
|
||||
EPUBJS.View = function(options) {
|
||||
EPUBJS.View = function(width, height) {
|
||||
this.id = "epubjs-view:" + EPUBJS.core.uuid();
|
||||
this.loading = new RSVP.defer();
|
||||
this.loaded = this.loading.promise;
|
||||
|
|
@ -4451,9 +4518,10 @@ EPUBJS.View.prototype.load = function(contents) {
|
|||
|
||||
this.document = this.iframe.contentDocument;
|
||||
|
||||
this.iframe.onload = function(e) {
|
||||
this.iframe.addEventListener("load", function(event) {
|
||||
var layout;
|
||||
|
||||
this.window = this.iframe.contentWindow;
|
||||
this.window.addEventListener("resize", this.resized.bind(this), false);
|
||||
this.document = this.iframe.contentDocument;
|
||||
|
||||
this.iframe.style.display = "block";
|
||||
|
|
@ -4464,14 +4532,24 @@ EPUBJS.View.prototype.load = function(contents) {
|
|||
|
||||
this.layout();
|
||||
|
||||
// This needs to run twice to get to the correct size sometimes?
|
||||
this.layout();
|
||||
|
||||
this.iframe.style.visibility = "visible";
|
||||
|
||||
setTimeout(function(){
|
||||
this.window.addEventListener("resize", this.resized.bind(this), false);
|
||||
}.bind(this), 10); // Wait to listen for resize events
|
||||
|
||||
this.document.fonts.onloading = function(){
|
||||
console.log("loaded fonts");
|
||||
// this.layout();
|
||||
}.bind(this);
|
||||
|
||||
// this.observer = this.observe(this.document);
|
||||
|
||||
loading.resolve(this);
|
||||
this.loading.resolve(this);
|
||||
}.bind(this);
|
||||
|
||||
}.bind(this));
|
||||
|
||||
|
||||
// this.iframe.srcdoc = contents;
|
||||
this.document.open();
|
||||
|
|
@ -4481,11 +4559,6 @@ EPUBJS.View.prototype.load = function(contents) {
|
|||
return loaded;
|
||||
};
|
||||
|
||||
|
||||
EPUBJS.View.prototype.unload = function() {
|
||||
|
||||
};
|
||||
|
||||
EPUBJS.View.prototype.create = function() {
|
||||
this.iframe = document.createElement('iframe');
|
||||
this.iframe.id = this.id;
|
||||
|
|
@ -4493,16 +4566,19 @@ EPUBJS.View.prototype.create = function() {
|
|||
this.iframe.seamless = "seamless";
|
||||
// Back up if seamless isn't supported
|
||||
this.iframe.style.border = "none";
|
||||
|
||||
this.resizing = true;
|
||||
this.iframe.width = "100%";
|
||||
this.iframe.style.height = "0";
|
||||
this.iframe.style.height = "100%";
|
||||
|
||||
this.iframe.style.display = "none";
|
||||
this.iframe.style.visibility = "hidden";
|
||||
|
||||
|
||||
return this.iframe;
|
||||
};
|
||||
|
||||
EPUBJS.View.prototype.resized = function() {
|
||||
EPUBJS.View.prototype.resized = function(e) {
|
||||
|
||||
if (!this.resizing) {
|
||||
this.layout();
|
||||
|
|
@ -4513,32 +4589,48 @@ EPUBJS.View.prototype.resized = function() {
|
|||
};
|
||||
|
||||
EPUBJS.View.prototype.layout = function() {
|
||||
var bounds = {}, content, width = 0, height = 0;
|
||||
|
||||
this.resizing = true;
|
||||
var bounds;
|
||||
console.log("layout")
|
||||
// Check bounds
|
||||
bounds = this.document.body.getBoundingClientRect();
|
||||
|
||||
if(!bounds || (bounds.height == 0 && bounds.width == 0)) {
|
||||
console.error("View not shown");
|
||||
}
|
||||
|
||||
// Apply Changes
|
||||
this.resizing = true;
|
||||
this.iframe.style.height = bounds.height + "px";
|
||||
this.iframe.style.width = bounds.width + "px";
|
||||
// this.iframe.style.width = bounds.width + "px";
|
||||
|
||||
// Check again
|
||||
content = this.document.body.getBoundingClientRect();
|
||||
bounds = this.document.body.getBoundingClientRect();
|
||||
this.resizing = true;
|
||||
this.iframe.style.height = bounds.height + "px";
|
||||
// this.iframe.style.width = bounds.width + "px";
|
||||
|
||||
height = content.height;
|
||||
width = content.width;
|
||||
this.width = bounds.width;
|
||||
this.height = bounds.height;
|
||||
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
};
|
||||
|
||||
EPUBJS.View.prototype.observe = function(target) {
|
||||
var renderer = this;
|
||||
|
||||
// if(bounds.height != content.height || bounds.width != content.width) {
|
||||
// // this.layout();
|
||||
// console.log(bounds, content)
|
||||
// }
|
||||
// create an observer instance
|
||||
var observer = new MutationObserver(function(mutations) {
|
||||
mutations.forEach(function(mutation) {
|
||||
renderer.layout();
|
||||
});
|
||||
});
|
||||
|
||||
// configuration of the observer:
|
||||
var config = { attributes: true, childList: true, characterData: true, subtree: true };
|
||||
|
||||
// pass in the target node, as well as the observer options
|
||||
observer.observe(target, config);
|
||||
|
||||
return observer;
|
||||
};
|
||||
|
||||
EPUBJS.View.prototype.appendTo = function(element) {
|
||||
|
|
@ -4556,6 +4648,9 @@ EPUBJS.View.prototype.bounds = function() {
|
|||
};
|
||||
|
||||
EPUBJS.View.prototype.destroy = function() {
|
||||
// Stop observing
|
||||
// this.observer.disconnect();
|
||||
|
||||
this.element.removeChild(this.iframe);
|
||||
};
|
||||
|
||||
|
|
|
|||
4
dist/epub.min.js
vendored
4
dist/epub.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -12,14 +12,14 @@
|
|||
}
|
||||
|
||||
#viewer {
|
||||
/* position: absolute;
|
||||
position: absolute;
|
||||
left: 10%;
|
||||
width: 80%;
|
||||
height: 100%;
|
||||
overflow: hidden; */
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
/* display: block;
|
||||
margin: 50px auto;
|
||||
width: 600px;
|
||||
width: 600px;*/
|
||||
}
|
||||
|
||||
#prev {
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
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 rendition = book.renderTo("viewer");
|
||||
var displayed = rendition.display(currentSectionIndex);
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -64,9 +64,9 @@
|
|||
var $viewer = document.getElementById("viewer");
|
||||
var $next = document.getElementById("next");
|
||||
var $prev = document.getElementById("prev");
|
||||
var currentSectionIndex = 10;
|
||||
var currentSectionIndex = 9;
|
||||
// Load the opf
|
||||
var book = ePub("https://s3.amazonaws.com/moby-dick/OPS/package.opf");
|
||||
var book = ePub("../books/moby-dick/OPS/package.opf"); // https://s3.amazonaws.com/moby-dick/OPS/package.opf
|
||||
var rendition = book.renderTo("viewer", {width: 600, height: 400});
|
||||
var displayed = rendition.display(currentSectionIndex);
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,11 @@ var jshint = require('gulp-jshint');
|
|||
var concat = require('gulp-concat');
|
||||
var rename = require('gulp-rename');
|
||||
var uglify = require('gulp-uglify');
|
||||
|
||||
var gutil = require('gulp-util');
|
||||
var plumber = require('gulp-plumber');
|
||||
var onError = function (err) {
|
||||
gutil.log(gutil.colors.green(err));
|
||||
};
|
||||
|
||||
// Lint JS
|
||||
gulp.task('lint', function() {
|
||||
|
|
@ -15,6 +19,7 @@ gulp.task('lint', function() {
|
|||
// Concat & Minify JS
|
||||
gulp.task('minify', function(){
|
||||
return gulp.src(['lib/*.js', 'bower_components/rsvp/rsvp.js', 'lib/epubjs/*.js'])
|
||||
.pipe(plumber({ errorHandler: onError }))
|
||||
.pipe(concat('epub.js'))
|
||||
.pipe(gulp.dest('dist'))
|
||||
.pipe(rename('epub.min.js'))
|
||||
|
|
|
|||
|
|
@ -88,19 +88,18 @@ EPUBJS.Infinite.prototype.check = function(){
|
|||
|
||||
if(this.scrolled && !this.displaying) {
|
||||
|
||||
// var scrollTop = window.pageYOffset || document.documentElement.scrollTop
|
||||
// var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft
|
||||
var scrollTop = this.container.scrollTop;
|
||||
var scrollLeft = this.container.scrollLeft;
|
||||
|
||||
// var scrollTop = document.body.scrollTop;//TODO: make document.body a variable
|
||||
// var scrollHeight = document.documentElement.scrollHeight;
|
||||
var scrollHeight = this.container.scrollHeight;
|
||||
var scrollWidth = this.container.scrollWidth;
|
||||
|
||||
var direction = scrollTop - this.prevScrollTop;
|
||||
var height = this.container.getBoundingClientRect().height;
|
||||
|
||||
var up = height - (scrollHeight - scrollTop) > -this.offset;
|
||||
var up = scrollTop + this.offset > scrollHeight-height;
|
||||
var down = scrollTop < this.offset;
|
||||
|
||||
// console.debug("scroll", scrollTop)
|
||||
if(up && direction > 0) {
|
||||
this.forwards();
|
||||
}
|
||||
|
|
@ -108,13 +107,32 @@ EPUBJS.Infinite.prototype.check = function(){
|
|||
this.backwards();
|
||||
}
|
||||
|
||||
// console.log(document.body.scrollTop)
|
||||
// console.log(scrollTop)
|
||||
this.prevScrollTop = scrollTop;
|
||||
|
||||
this.scrolled = false;
|
||||
} else {
|
||||
this.displaying = false;
|
||||
this.scrolled = false;
|
||||
}
|
||||
|
||||
this.tick.call(window, this.check.bind(this));
|
||||
}
|
||||
|
||||
EPUBJS.Infinite.prototype.scrollBy = function(x, y, silent){
|
||||
if(silent) {
|
||||
this.displaying = true;
|
||||
}
|
||||
this.container.scrollLeft += x;
|
||||
this.container.scrollTop += y;
|
||||
};
|
||||
|
||||
EPUBJS.Infinite.prototype.scroll = function(x, y, silent){
|
||||
if(silent) {
|
||||
this.displaying = true;
|
||||
}
|
||||
this.container.scrollLeft = x;
|
||||
this.container.scrollTop = y;
|
||||
};
|
||||
|
||||
RSVP.EventTarget.mixin(EPUBJS.Infinite.prototype);
|
||||
|
|
@ -2,7 +2,7 @@ EPUBJS.Renderer = function(book, _options) {
|
|||
var options = _options || {};
|
||||
this.settings = {
|
||||
hidden: options.hidden || false,
|
||||
viewLimit: 3,
|
||||
viewsLimit: 4,
|
||||
width: options.width || false,
|
||||
height: options.height || false,
|
||||
};
|
||||
|
|
@ -125,8 +125,13 @@ EPUBJS.Renderer.prototype.attachTo = function(_element){
|
|||
|
||||
this.infinite.start();
|
||||
|
||||
this.infinite.on("forwards", this.forwards.bind(this));
|
||||
this.infinite.on("backwards", this.backwards.bind(this));
|
||||
this.infinite.on("forwards", function(){
|
||||
if(!this.rendering) this.forwards();
|
||||
}.bind(this));
|
||||
|
||||
this.infinite.on("backwards", function(){
|
||||
if(!this.rendering) this.backwards();
|
||||
}.bind(this));
|
||||
|
||||
window.addEventListener("resize", this.onResized.bind(this), false);
|
||||
|
||||
|
|
@ -151,10 +156,11 @@ EPUBJS.Renderer.prototype.display = function(what){
|
|||
var section = this.book.spine.get(what);
|
||||
var rendered = this.render(section);
|
||||
|
||||
rendered.then(function(){
|
||||
this.fill();
|
||||
displaying.resolve(this);
|
||||
}.bind(this));
|
||||
rendered.
|
||||
then(this.fill.bind(this)).
|
||||
then(function(){
|
||||
displaying.resolve(this);
|
||||
}.bind(this));
|
||||
|
||||
}.bind(this));
|
||||
|
||||
|
|
@ -173,12 +179,19 @@ EPUBJS.Renderer.prototype.render = function(section){
|
|||
rendered = section.render();
|
||||
view.index = section.index;
|
||||
|
||||
// Place view in correct position
|
||||
this.insert(view, section.index);
|
||||
|
||||
return rendered.then(function(contents){
|
||||
return view.load(contents);
|
||||
});
|
||||
|
||||
return rendered.
|
||||
then(function(contents){
|
||||
// Place view in correct position
|
||||
this.insert(view, section.index);
|
||||
|
||||
return view.load(contents);
|
||||
}.bind(this))
|
||||
.then(function(){
|
||||
this.rendering = false;
|
||||
return view;
|
||||
}.bind(this));
|
||||
|
||||
};
|
||||
|
||||
|
|
@ -188,23 +201,36 @@ EPUBJS.Renderer.prototype.forwards = function(){
|
|||
var rendered;
|
||||
var section;
|
||||
|
||||
if(this.rendering) return;
|
||||
console.log("going forwards")
|
||||
|
||||
next = this.last().index + 1;
|
||||
|
||||
if(next === this.book.spine.length){
|
||||
return;
|
||||
if(this.rendering || next === this.book.spine.length){
|
||||
rendered = new RSVP.defer();
|
||||
rendered.reject({message: "reject forwards"});
|
||||
return rendered.promise;
|
||||
}
|
||||
console.log("going forwards")
|
||||
|
||||
this.rendering = true;
|
||||
|
||||
section = this.book.spine.get(next);
|
||||
rendered = this.render(section);
|
||||
this.rendering = true;
|
||||
|
||||
rendered.then(function(){
|
||||
console.log("last:", this.last().height)
|
||||
// this.rendering = false;
|
||||
var first = this.first();
|
||||
var bounds = first.bounds();
|
||||
var container = this.container.getBoundingClientRect();
|
||||
var offset;
|
||||
var prev = this.container.scrollTop;
|
||||
if(this.views.length > this.settings.viewsLimit) {
|
||||
|
||||
this.rendering = false;
|
||||
// Remove the item
|
||||
this.remove(first);
|
||||
|
||||
// Reset Position
|
||||
this.infinite.scroll(0, prev - bounds.height, true)
|
||||
|
||||
}
|
||||
}.bind(this));
|
||||
|
||||
return rendered;
|
||||
|
|
@ -215,23 +241,28 @@ EPUBJS.Renderer.prototype.backwards = function(view){
|
|||
var rendered;
|
||||
var section;
|
||||
|
||||
if(this.rendering) return;
|
||||
console.log("going backwards")
|
||||
|
||||
prev = this.first().index - 1;
|
||||
if(prev < 0){
|
||||
return; //TODO: should reject
|
||||
if(this.rendering || prev < 0){
|
||||
rendered = new RSVP.defer();
|
||||
rendered.reject({message: "reject backwards"});
|
||||
return rendered.promise;
|
||||
}
|
||||
console.log("going backwards")
|
||||
|
||||
this.rendering = true;
|
||||
|
||||
section = this.book.spine.get(prev);
|
||||
rendered = this.render(section);
|
||||
this.rendering = true;
|
||||
|
||||
rendered.then(function(){
|
||||
this.rendering = false;
|
||||
// -- this might want to be in infinite
|
||||
this.container.scrollTop += this.first().height;
|
||||
// this.container.scrollTop += this.first().height;
|
||||
this.infinite.scrollBy(0, this.first().height, true);
|
||||
|
||||
if(this.views.length > this.settings.viewsLimit) {
|
||||
last = this.last();
|
||||
this.remove(last);
|
||||
}
|
||||
}.bind(this));
|
||||
|
||||
return rendered;
|
||||
|
|
@ -242,31 +273,45 @@ EPUBJS.Renderer.prototype.backwards = function(view){
|
|||
|
||||
// -- this might want to be in infinite
|
||||
EPUBJS.Renderer.prototype.fill = function() {
|
||||
var filling = this.backwards();
|
||||
var height = this.container.getBoundingClientRect().height;
|
||||
|
||||
if(!filling) return;
|
||||
|
||||
filling.then(function(){
|
||||
var next = function(){
|
||||
var bottom = this.last().bounds().bottom;
|
||||
while (height && bottom && bottom < height) {
|
||||
this.forwards();
|
||||
};
|
||||
}.bind(this));
|
||||
};
|
||||
var defer = new RSVP.defer();
|
||||
var promise = defer.promise;
|
||||
|
||||
if (height && bottom && (bottom < height) && (this.last().index + 1 < this.book.spine.length)) {
|
||||
return this.forwards().then(next);
|
||||
} else {
|
||||
this.rendering = false;
|
||||
defer.resolve();
|
||||
return promise;
|
||||
}
|
||||
}.bind(this);
|
||||
|
||||
|
||||
return next().
|
||||
then(this.backwards.bind(this)).
|
||||
then(function(){
|
||||
this.rendering = false;
|
||||
}.bind(this));
|
||||
|
||||
|
||||
EPUBJS.Renderer.prototype.jump = function(view){
|
||||
this.views.push(view);
|
||||
};
|
||||
|
||||
EPUBJS.Renderer.prototype.append = function(view){
|
||||
var first, prevTop, prevHeight, offset;
|
||||
|
||||
this.views.push(view);
|
||||
view.appendTo(this.container);
|
||||
|
||||
};
|
||||
|
||||
EPUBJS.Renderer.prototype.prepend = function(view){
|
||||
var last;
|
||||
|
||||
this.views.unshift(view);
|
||||
view.prependTo(this.container);
|
||||
|
||||
};
|
||||
|
||||
// Simple Insert
|
||||
|
|
@ -279,13 +324,17 @@ EPUBJS.Renderer.prototype.insert = function(view, index){
|
|||
} else if(index - this.last().index <= 0) {
|
||||
this.prepend(view);
|
||||
}
|
||||
|
||||
console.log("insert")
|
||||
// return position;
|
||||
};
|
||||
|
||||
// Remove the render element and clean up listeners
|
||||
EPUBJS.Renderer.prototype.destroy = function() {
|
||||
|
||||
EPUBJS.Renderer.prototype.remove = function(view) {
|
||||
var index = this.views.indexOf(view);
|
||||
view.destroy();
|
||||
if(index > -1) {
|
||||
this.views.splice(index, 1);
|
||||
}
|
||||
};
|
||||
|
||||
EPUBJS.Renderer.prototype.first = function() {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
EPUBJS.View = function(options) {
|
||||
EPUBJS.View = function(width, height) {
|
||||
this.id = "epubjs-view:" + EPUBJS.core.uuid();
|
||||
this.loading = new RSVP.defer();
|
||||
this.loaded = this.loading.promise;
|
||||
|
|
@ -13,9 +13,10 @@ EPUBJS.View.prototype.load = function(contents) {
|
|||
|
||||
this.document = this.iframe.contentDocument;
|
||||
|
||||
this.iframe.onload = function(e) {
|
||||
this.iframe.addEventListener("load", function(event) {
|
||||
var layout;
|
||||
|
||||
this.window = this.iframe.contentWindow;
|
||||
this.window.addEventListener("resize", this.resized.bind(this), false);
|
||||
this.document = this.iframe.contentDocument;
|
||||
|
||||
this.iframe.style.display = "block";
|
||||
|
|
@ -26,14 +27,24 @@ EPUBJS.View.prototype.load = function(contents) {
|
|||
|
||||
this.layout();
|
||||
|
||||
// This needs to run twice to get to the correct size sometimes?
|
||||
this.layout();
|
||||
|
||||
this.iframe.style.visibility = "visible";
|
||||
|
||||
setTimeout(function(){
|
||||
this.window.addEventListener("resize", this.resized.bind(this), false);
|
||||
}.bind(this), 10); // Wait to listen for resize events
|
||||
|
||||
this.document.fonts.onloading = function(){
|
||||
console.log("loaded fonts");
|
||||
// this.layout();
|
||||
}.bind(this);
|
||||
|
||||
// this.observer = this.observe(this.document);
|
||||
|
||||
loading.resolve(this);
|
||||
this.loading.resolve(this);
|
||||
}.bind(this);
|
||||
|
||||
}.bind(this));
|
||||
|
||||
|
||||
// this.iframe.srcdoc = contents;
|
||||
this.document.open();
|
||||
|
|
@ -43,11 +54,6 @@ EPUBJS.View.prototype.load = function(contents) {
|
|||
return loaded;
|
||||
};
|
||||
|
||||
|
||||
EPUBJS.View.prototype.unload = function() {
|
||||
|
||||
};
|
||||
|
||||
EPUBJS.View.prototype.create = function() {
|
||||
this.iframe = document.createElement('iframe');
|
||||
this.iframe.id = this.id;
|
||||
|
|
@ -55,16 +61,19 @@ EPUBJS.View.prototype.create = function() {
|
|||
this.iframe.seamless = "seamless";
|
||||
// Back up if seamless isn't supported
|
||||
this.iframe.style.border = "none";
|
||||
|
||||
this.resizing = true;
|
||||
this.iframe.width = "100%";
|
||||
this.iframe.style.height = "0";
|
||||
this.iframe.style.height = "100%";
|
||||
|
||||
this.iframe.style.display = "none";
|
||||
this.iframe.style.visibility = "hidden";
|
||||
|
||||
|
||||
return this.iframe;
|
||||
};
|
||||
|
||||
EPUBJS.View.prototype.resized = function() {
|
||||
EPUBJS.View.prototype.resized = function(e) {
|
||||
|
||||
if (!this.resizing) {
|
||||
this.layout();
|
||||
|
|
@ -75,32 +84,48 @@ EPUBJS.View.prototype.resized = function() {
|
|||
};
|
||||
|
||||
EPUBJS.View.prototype.layout = function() {
|
||||
var bounds = {}, content, width = 0, height = 0;
|
||||
|
||||
this.resizing = true;
|
||||
var bounds;
|
||||
console.log("layout")
|
||||
// Check bounds
|
||||
bounds = this.document.body.getBoundingClientRect();
|
||||
|
||||
if(!bounds || (bounds.height == 0 && bounds.width == 0)) {
|
||||
console.error("View not shown");
|
||||
}
|
||||
|
||||
// Apply Changes
|
||||
this.resizing = true;
|
||||
this.iframe.style.height = bounds.height + "px";
|
||||
this.iframe.style.width = bounds.width + "px";
|
||||
// this.iframe.style.width = bounds.width + "px";
|
||||
|
||||
// Check again
|
||||
content = this.document.body.getBoundingClientRect();
|
||||
bounds = this.document.body.getBoundingClientRect();
|
||||
this.resizing = true;
|
||||
this.iframe.style.height = bounds.height + "px";
|
||||
// this.iframe.style.width = bounds.width + "px";
|
||||
|
||||
height = content.height;
|
||||
width = content.width;
|
||||
this.width = bounds.width;
|
||||
this.height = bounds.height;
|
||||
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
};
|
||||
|
||||
EPUBJS.View.prototype.observe = function(target) {
|
||||
var renderer = this;
|
||||
|
||||
// if(bounds.height != content.height || bounds.width != content.width) {
|
||||
// // this.layout();
|
||||
// console.log(bounds, content)
|
||||
// }
|
||||
// create an observer instance
|
||||
var observer = new MutationObserver(function(mutations) {
|
||||
mutations.forEach(function(mutation) {
|
||||
renderer.layout();
|
||||
});
|
||||
});
|
||||
|
||||
// configuration of the observer:
|
||||
var config = { attributes: true, childList: true, characterData: true, subtree: true };
|
||||
|
||||
// pass in the target node, as well as the observer options
|
||||
observer.observe(target, config);
|
||||
|
||||
return observer;
|
||||
};
|
||||
|
||||
EPUBJS.View.prototype.appendTo = function(element) {
|
||||
|
|
@ -118,6 +143,9 @@ EPUBJS.View.prototype.bounds = function() {
|
|||
};
|
||||
|
||||
EPUBJS.View.prototype.destroy = function() {
|
||||
// Stop observing
|
||||
// this.observer.disconnect();
|
||||
|
||||
this.element.removeChild(this.iframe);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -17,15 +17,16 @@
|
|||
"express": "^4.5.1",
|
||||
"gulp": "^3.8.7",
|
||||
"gulp-concat": "^2.3.4",
|
||||
"gulp-connect": "~2.0.6",
|
||||
"gulp-jshint": "^1.8.4",
|
||||
"gulp-plumber": "^0.6.4",
|
||||
"gulp-rename": "^1.2.0",
|
||||
"gulp-uglify": "^0.3.1",
|
||||
"gulp-util": "^3.0.0",
|
||||
"morgan": "^1.1.1",
|
||||
"optimist": "^0.6.1",
|
||||
"portfinder": "^0.2.1",
|
||||
"qunitjs": "^1.14.0",
|
||||
"serve-static": "^1.3.1",
|
||||
"gulp-util": "~3.0.0",
|
||||
"gulp-connect": "~2.0.6"
|
||||
"serve-static": "^1.3.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue