mirror of
https://github.com/futurepress/epub.js.git
synced 2025-10-03 14:59:18 +02:00
Updated offset location on display
This commit is contained in:
fchasen
parent
4a7e08c49a
commit
ae726a1dab
7 changed files with 517 additions and 393 deletions
427
dist/epub.js
vendored
427
dist/epub.js
vendored
File diff suppressed because it is too large
Load diff
6
dist/epub.min.js
vendored
6
dist/epub.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -15,12 +15,12 @@
|
|||
color: #333;
|
||||
}
|
||||
|
||||
#viewer {
|
||||
#viewer {
|
||||
|
||||
overflow: hidden;
|
||||
width: 800px;
|
||||
margin: 0 auto;
|
||||
|
||||
|
||||
}
|
||||
|
||||
#viewer .epub-view {
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
.arrow:hover {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
|
||||
.arrow:active {
|
||||
color: #000;
|
||||
}
|
||||
|
|
@ -61,9 +61,9 @@
|
|||
<script>
|
||||
var currentSectionIndex = 8;
|
||||
// Load the opf
|
||||
var book = ePub("../books/moby-dick/OPS/package.opf");
|
||||
var book = ePub("../books/alice/OPS/package.opf");
|
||||
var rendition = book.renderTo("viewer");
|
||||
|
||||
|
||||
rendition.display("chapter_008.xhtml");
|
||||
|
||||
|
||||
|
|
@ -87,7 +87,7 @@
|
|||
|
||||
if(nextSection) {
|
||||
nextNav = book.navigation.get(nextSection.href);
|
||||
|
||||
|
||||
if(nextNav) {
|
||||
nextLabel = nextNav.label;
|
||||
} else {
|
||||
|
|
@ -101,7 +101,7 @@
|
|||
|
||||
if(prevSection) {
|
||||
prevNav = book.navigation.get(prevSection.href);
|
||||
|
||||
|
||||
if(prevNav) {
|
||||
prevLabel = prevNav.label;
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -23,9 +23,9 @@
|
|||
-webkit-justify-content: center;
|
||||
}
|
||||
|
||||
#viewer {
|
||||
/*width: 900px;*/
|
||||
width: 80%;
|
||||
#viewer {
|
||||
width: 900px;
|
||||
/*width: 80%;*/
|
||||
height: 600px;
|
||||
background: white;
|
||||
box-shadow: 0 0 4px #ccc;
|
||||
|
|
@ -39,13 +39,13 @@
|
|||
margin: 40px auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/*
|
||||
#viewer > iframe {
|
||||
overflow: scroll;
|
||||
height: 400px;
|
||||
|
||||
|
||||
-webkit-column-axis: horizontal;
|
||||
-webkit-column-fill: auto;
|
||||
-webkit-column-width: 400px;
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
left: 40px;
|
||||
}
|
||||
|
||||
#next {
|
||||
#next {
|
||||
right: 40px;
|
||||
}
|
||||
|
||||
|
|
@ -84,7 +84,7 @@
|
|||
.arrow:hover {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
|
||||
.arrow:active {
|
||||
color: #000;
|
||||
}
|
||||
|
|
@ -106,7 +106,7 @@
|
|||
top: 5%;
|
||||
opacity: .15;
|
||||
box-shadow: -2px 0 15px rgba(0, 0, 0, 1);
|
||||
content: "";
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -119,15 +119,15 @@
|
|||
<script>
|
||||
// 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",
|
||||
var book = ePub("../books/alice/OPS/package.opf");
|
||||
var rendition = book.renderTo("viewer", {
|
||||
method: "paginate",
|
||||
width: "100%",
|
||||
height: 600
|
||||
});
|
||||
|
||||
var displayed = rendition.display();
|
||||
|
||||
|
||||
|
||||
displayed.then(function(renderer){
|
||||
// -- do stuff
|
||||
|
|
@ -147,21 +147,21 @@
|
|||
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>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
EPUBJS.Continuous = function(book, options) {
|
||||
|
||||
|
||||
EPUBJS.Rendition.apply(this, arguments); // call super constructor.
|
||||
|
||||
this.settings = EPUBJS.core.extend(this.settings || {}, {
|
||||
|
|
@ -9,14 +9,14 @@ EPUBJS.Continuous = function(book, options) {
|
|||
offset: 500,
|
||||
offsetDelta: 250
|
||||
});
|
||||
|
||||
|
||||
EPUBJS.core.extend(this.settings, options);
|
||||
|
||||
|
||||
if(this.settings.hidden) {
|
||||
this.wrapper = this.wrap(this.container);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
};
|
||||
|
||||
// subclass extends superclass
|
||||
|
|
@ -26,7 +26,7 @@ EPUBJS.Continuous.prototype.constructor = EPUBJS.Continuous;
|
|||
EPUBJS.Continuous.prototype.attachListeners = function(){
|
||||
|
||||
// Listen to window for resize event if width or height is set to a percent
|
||||
if(!EPUBJS.core.isNumber(this.settings.width) ||
|
||||
if(!EPUBJS.core.isNumber(this.settings.width) ||
|
||||
!EPUBJS.core.isNumber(this.settings.height) ) {
|
||||
window.addEventListener("resize", this.onResized.bind(this), false);
|
||||
}
|
||||
|
|
@ -40,14 +40,16 @@ EPUBJS.Continuous.prototype.attachListeners = function(){
|
|||
};
|
||||
|
||||
EPUBJS.Continuous.prototype._display = function(target){
|
||||
|
||||
|
||||
var displaying = new RSVP.defer();
|
||||
var displayed = displaying.promise;
|
||||
|
||||
|
||||
var section;
|
||||
var view;
|
||||
var cfi, spinePos;
|
||||
|
||||
var visible;
|
||||
|
||||
if(this.epubcfi.isCfiString(target)) {
|
||||
cfi = this.epubcfi.parse(target);
|
||||
spinePos = cfi.spinePos;
|
||||
|
|
@ -56,12 +58,48 @@ EPUBJS.Continuous.prototype._display = function(target){
|
|||
section = this.book.spine.get(target);
|
||||
}
|
||||
|
||||
this.displaying = true;
|
||||
this.hide();
|
||||
|
||||
|
||||
|
||||
|
||||
if(section){
|
||||
|
||||
this.displaying = true;
|
||||
|
||||
// Check to make sure the section we want isn't already shown
|
||||
visible = this.visible();
|
||||
for (var i = 0; i < visible.length; i++) {
|
||||
if(visible.length &&
|
||||
section.index === visible[i].section.index){
|
||||
// Section already has a visible view
|
||||
view = visible[i];
|
||||
// Move to target location
|
||||
this.q.enqueue(function(){
|
||||
|
||||
var offset = view.locationOf(target);
|
||||
|
||||
return this.moveTo(offset);
|
||||
|
||||
});
|
||||
|
||||
this.q.enqueue(this.check);
|
||||
// Trigger display hooks
|
||||
this.hooks.display.trigger(view)
|
||||
.then(function(){
|
||||
this.trigger("displayed", section);
|
||||
displaying.resolve(this);
|
||||
}.bind(this));
|
||||
|
||||
// Finished, no need to fill
|
||||
return displayed;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
this.hide();
|
||||
|
||||
view = new EPUBJS.View(section, this.viewSettings);
|
||||
|
||||
|
||||
// This will clear all previous views
|
||||
this.q.enqueue(this.fill, view).then(function(){
|
||||
|
||||
|
|
@ -73,18 +111,18 @@ EPUBJS.Continuous.prototype._display = function(target){
|
|||
return this.moveTo(offset);
|
||||
|
||||
});
|
||||
|
||||
|
||||
this.q.enqueue(this.check);
|
||||
|
||||
this.q.enqueue(this.show);
|
||||
|
||||
// This hook doesn't prevent showing, but waits to resolve until
|
||||
// all the hooks have finished. Might want to block showing.
|
||||
this.hooks.display.trigger(view)
|
||||
.then(function(){
|
||||
this.trigger("displayed", section);
|
||||
displaying.resolve(this);
|
||||
}.bind(this));
|
||||
// // This hook doesn't prevent showing, but waits to resolve until
|
||||
// // all the hooks have finished. Might want to block showing.
|
||||
// this.hooks.display.trigger(view)
|
||||
// .then(function(){
|
||||
// this.trigger("displayed", section);
|
||||
// // displaying.resolve(this);
|
||||
// }.bind(this));
|
||||
|
||||
}.bind(this));
|
||||
|
||||
|
|
@ -93,7 +131,14 @@ EPUBJS.Continuous.prototype._display = function(target){
|
|||
// this.displaying = false;
|
||||
// displaying.resolve(this);
|
||||
//}.bind(this));
|
||||
displaying.resolve(this);
|
||||
|
||||
// This hook doesn't prevent showing, but waits to resolve until
|
||||
// all the hooks have finished. Might want to block showing.
|
||||
this.hooks.display.trigger(view)
|
||||
.then(function(){
|
||||
this.trigger("displayed", section);
|
||||
displaying.resolve(this);
|
||||
}.bind(this));
|
||||
|
||||
} else {
|
||||
displaying.reject(new Error("No Section Found"));
|
||||
|
|
@ -104,18 +149,20 @@ EPUBJS.Continuous.prototype._display = function(target){
|
|||
|
||||
|
||||
EPUBJS.Continuous.prototype.moveTo = function(offset){
|
||||
var bounds = this.bounds();
|
||||
var dist = Math.floor(offset.top / bounds.height) * bounds.height;
|
||||
// var bounds = this.bounds();
|
||||
// var dist = Math.floor(offset.top / bounds.height) * bounds.height;
|
||||
return this.check(
|
||||
offset.left+this.settings.offset,
|
||||
offset.top+this.settings.offset)
|
||||
.then(function(){
|
||||
|
||||
return this.check(0, dist+this.settings.offset).then(function(){
|
||||
|
||||
if(this.settings.axis === "vertical") {
|
||||
this.scrollBy(0, dist);
|
||||
} else {
|
||||
this.scrollBy(dist, 0);
|
||||
}
|
||||
if(this.settings.axis === "vertical") {
|
||||
this.scrollBy(0, offset.top);
|
||||
} else {
|
||||
this.scrollBy(offset.left, 0);
|
||||
}
|
||||
|
||||
}.bind(this));
|
||||
}.bind(this));
|
||||
};
|
||||
|
||||
EPUBJS.Continuous.prototype.afterDisplayed = function(currView){
|
||||
|
|
@ -166,7 +213,7 @@ EPUBJS.Continuous.prototype.append = function(view){
|
|||
EPUBJS.Continuous.prototype.prepend = function(view){
|
||||
this.views.unshift(view);
|
||||
this.container.insertBefore(view.element, this.container.firstChild);
|
||||
|
||||
|
||||
// view.on("shown", this.afterDisplayedAbove.bind(this));
|
||||
view.onDisplayed = this.afterDisplayed.bind(this);
|
||||
|
||||
|
|
@ -226,15 +273,15 @@ EPUBJS.Continuous.prototype.insert = function(view, index) {
|
|||
// }
|
||||
|
||||
// this.container.removeChild(view.element);
|
||||
|
||||
|
||||
// view.off("resized");
|
||||
|
||||
// if(view.displayed){
|
||||
// view.destroy();
|
||||
// }
|
||||
|
||||
|
||||
// view = null;
|
||||
|
||||
|
||||
// };
|
||||
|
||||
EPUBJS.Continuous.prototype.first = function() {
|
||||
|
|
@ -267,7 +314,7 @@ EPUBJS.Continuous.prototype.check = function(_offset){
|
|||
}
|
||||
|
||||
} else {
|
||||
|
||||
|
||||
if(view.displayed) {
|
||||
// console.log("destroy", view.section.index)
|
||||
this.q.enqueue(view.destroy.bind(view));
|
||||
|
|
@ -283,7 +330,7 @@ EPUBJS.Continuous.prototype.check = function(_offset){
|
|||
|
||||
}.bind(this));
|
||||
|
||||
|
||||
|
||||
if(promises.length){
|
||||
|
||||
return RSVP.all(promises)
|
||||
|
|
@ -331,12 +378,12 @@ EPUBJS.Continuous.prototype.trim = function(){
|
|||
var lastIndex = this.views.indexOf(last);
|
||||
var above = this.views.slice(0, firstIndex);
|
||||
var below = this.views.slice(lastIndex+1);
|
||||
|
||||
|
||||
// Erase all but last above
|
||||
for (var i = 0; i < above.length-1; i++) {
|
||||
this.erase(above[i], above);
|
||||
}
|
||||
|
||||
|
||||
// Erase all except first below
|
||||
for (var j = 1; j < below.length; j++) {
|
||||
this.erase(below[j]);
|
||||
|
|
@ -347,7 +394,7 @@ EPUBJS.Continuous.prototype.trim = function(){
|
|||
};
|
||||
|
||||
EPUBJS.Continuous.prototype.erase = function(view, above){ //Trim
|
||||
|
||||
|
||||
var prevTop;
|
||||
var prevLeft;
|
||||
|
||||
|
|
@ -362,7 +409,7 @@ EPUBJS.Continuous.prototype.erase = function(view, above){ //Trim
|
|||
var bounds = view.bounds();
|
||||
|
||||
this.remove(view);
|
||||
|
||||
|
||||
if(above) {
|
||||
|
||||
if(this.settings.axis === "vertical") {
|
||||
|
|
@ -371,7 +418,7 @@ EPUBJS.Continuous.prototype.erase = function(view, above){ //Trim
|
|||
this.scrollTo(prevLeft - bounds.width, 0, true);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
|
@ -387,12 +434,12 @@ EPUBJS.Continuous.prototype.checkCurrent = function(position) {
|
|||
if(this.settings.axis === "horizontal") {
|
||||
// TODO: Check for current horizontal
|
||||
} else {
|
||||
|
||||
|
||||
for (var i = length; i >= 0; i--) {
|
||||
view = this.views[i];
|
||||
top = view.bounds().top;
|
||||
if(top < container.bottom) {
|
||||
|
||||
|
||||
if(this.current == view.section) {
|
||||
break;
|
||||
}
|
||||
|
|
@ -436,7 +483,7 @@ EPUBJS.Continuous.prototype.start = function() {
|
|||
this.ignore = false;
|
||||
}
|
||||
}.bind(this));
|
||||
|
||||
|
||||
window.addEventListener('unload', function(e){
|
||||
this.ignore = true;
|
||||
this.destroy();
|
||||
|
|
@ -467,13 +514,13 @@ EPUBJS.Continuous.prototype.onScroll = function(){
|
|||
// left: scrollLeft
|
||||
// });
|
||||
|
||||
if((this.scrollDeltaVert === 0 &&
|
||||
if((this.scrollDeltaVert === 0 &&
|
||||
this.scrollDeltaHorz === 0) ||
|
||||
this.scrollDeltaVert > this.settings.offsetDelta ||
|
||||
this.scrollDeltaHorz > this.settings.offsetDelta) {
|
||||
|
||||
this.q.enqueue(this.check);
|
||||
|
||||
|
||||
this.scrollDeltaVert = 0;
|
||||
this.scrollDeltaHorz = 0;
|
||||
|
||||
|
|
@ -509,43 +556,6 @@ EPUBJS.Continuous.prototype.onScroll = function(){
|
|||
|
||||
};
|
||||
|
||||
EPUBJS.Continuous.prototype.scrollBy = function(x, y, silent){
|
||||
if(silent) {
|
||||
this.ignore = true;
|
||||
}
|
||||
|
||||
if(this.settings.height) {
|
||||
|
||||
if(x) this.container.scrollLeft += x;
|
||||
if(y) this.container.scrollTop += y;
|
||||
|
||||
} else {
|
||||
window.scrollBy(x,y);
|
||||
}
|
||||
// console.log("scrollBy", x, y);
|
||||
this.scrolled = true;
|
||||
};
|
||||
|
||||
EPUBJS.Continuous.prototype.scrollTo = function(x, y, silent){
|
||||
if(silent) {
|
||||
this.ignore = true;
|
||||
}
|
||||
|
||||
if(this.settings.height) {
|
||||
this.container.scrollLeft = x;
|
||||
this.container.scrollTop = y;
|
||||
} else {
|
||||
window.scrollTo(x,y);
|
||||
}
|
||||
// console.log("scrollTo", x, y);
|
||||
this.scrolled = true;
|
||||
// if(this.container.scrollLeft != x){
|
||||
// setTimeout(function() {
|
||||
// this.scrollTo(x, y, silent);
|
||||
// }.bind(this), 10);
|
||||
// return;
|
||||
// };
|
||||
};
|
||||
|
||||
EPUBJS.Continuous.prototype.resizeView = function(view) {
|
||||
|
||||
|
|
@ -562,7 +572,7 @@ EPUBJS.Continuous.prototype.currentLocation = function(){
|
|||
var startPage, endPage;
|
||||
|
||||
var container = this.container.getBoundingClientRect();
|
||||
|
||||
|
||||
if(visible.length === 1) {
|
||||
return this.map.page(visible[0]);
|
||||
}
|
||||
|
|
@ -577,7 +587,7 @@ EPUBJS.Continuous.prototype.currentLocation = function(){
|
|||
end: endPage.end
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
|
||||
/*
|
||||
|
|
@ -587,13 +597,13 @@ EPUBJS.Continuous.prototype.current = function(what){
|
|||
var length = this.views.length - 1;
|
||||
|
||||
if(this.settings.axis === "horizontal") {
|
||||
|
||||
|
||||
for (var i = length; i >= 0; i--) {
|
||||
view = this.views[i];
|
||||
left = view.position().left;
|
||||
|
||||
if(left < container.right) {
|
||||
|
||||
|
||||
if(this._current == view) {
|
||||
break;
|
||||
}
|
||||
|
|
@ -604,12 +614,12 @@ EPUBJS.Continuous.prototype.current = function(what){
|
|||
}
|
||||
|
||||
} else {
|
||||
|
||||
|
||||
for (var i = length; i >= 0; i--) {
|
||||
view = this.views[i];
|
||||
top = view.bounds().top;
|
||||
if(top < container.bottom) {
|
||||
|
||||
|
||||
if(this._current == view) {
|
||||
break;
|
||||
}
|
||||
|
|
@ -624,4 +634,4 @@ EPUBJS.Continuous.prototype.current = function(what){
|
|||
|
||||
return this._current;
|
||||
};
|
||||
*/
|
||||
*/
|
||||
|
|
|
|||
136
src/rendition.js
136
src/rendition.js
|
|
@ -1,5 +1,5 @@
|
|||
EPUBJS.Rendition = function(book, options) {
|
||||
|
||||
|
||||
this.settings = EPUBJS.core.extend(this.settings || {}, {
|
||||
infinite: true,
|
||||
hidden: false,
|
||||
|
|
@ -10,13 +10,13 @@ EPUBJS.Rendition = function(book, options) {
|
|||
});
|
||||
|
||||
EPUBJS.core.extend(this.settings, options);
|
||||
|
||||
|
||||
this.viewSettings = {};
|
||||
|
||||
this.book = book;
|
||||
|
||||
|
||||
this.views = [];
|
||||
|
||||
|
||||
//-- Adds Hook methods to the Rendition prototype
|
||||
this.hooks = {};
|
||||
this.hooks.display = new EPUBJS.Hook(this);
|
||||
|
|
@ -50,7 +50,7 @@ EPUBJS.Rendition.prototype.initialize = function(_options){
|
|||
var hidden = options.hidden || false;
|
||||
var container;
|
||||
var wrapper;
|
||||
|
||||
|
||||
if(options.height && EPUBJS.core.isNumber(options.height)) {
|
||||
height = options.height + "px";
|
||||
}
|
||||
|
|
@ -58,10 +58,10 @@ EPUBJS.Rendition.prototype.initialize = function(_options){
|
|||
if(options.width && EPUBJS.core.isNumber(options.width)) {
|
||||
width = options.width + "px";
|
||||
}
|
||||
|
||||
|
||||
// Create new container element
|
||||
container = document.createElement("div");
|
||||
|
||||
|
||||
container.id = "epubjs-container:" + EPUBJS.core.uuid();
|
||||
container.classList.add("epub-container");
|
||||
|
||||
|
|
@ -78,7 +78,7 @@ EPUBJS.Rendition.prototype.initialize = function(_options){
|
|||
if(width){
|
||||
container.style.width = width;
|
||||
}
|
||||
|
||||
|
||||
if(height){
|
||||
container.style.height = height;
|
||||
}
|
||||
|
|
@ -90,21 +90,21 @@ EPUBJS.Rendition.prototype.initialize = function(_options){
|
|||
|
||||
EPUBJS.Rendition.wrap = function(container) {
|
||||
var wrapper = document.createElement("div");
|
||||
|
||||
|
||||
wrapper.style.visibility = "hidden";
|
||||
wrapper.style.overflow = "hidden";
|
||||
wrapper.style.width = "0";
|
||||
wrapper.style.height = "0";
|
||||
|
||||
|
||||
wrapper.appendChild(container);
|
||||
return wrapper;
|
||||
};
|
||||
|
||||
|
||||
// Call to attach the container to an element in the dom
|
||||
// Container must be attached before rendering can begin
|
||||
EPUBJS.Rendition.prototype.attachTo = function(_element){
|
||||
var bounds;
|
||||
|
||||
|
||||
this.container = this.initialize({
|
||||
"width" : this.settings.width,
|
||||
"height" : this.settings.height
|
||||
|
|
@ -114,7 +114,7 @@ EPUBJS.Rendition.prototype.attachTo = function(_element){
|
|||
this.element = _element;
|
||||
} else if (typeof _element === "string") {
|
||||
this.element = document.getElementById(_element);
|
||||
}
|
||||
}
|
||||
|
||||
if(!this.element){
|
||||
console.error("Not an Element");
|
||||
|
|
@ -127,7 +127,7 @@ EPUBJS.Rendition.prototype.attachTo = function(_element){
|
|||
} else {
|
||||
this.element.appendChild(this.container);
|
||||
}
|
||||
|
||||
|
||||
// Attach Listeners
|
||||
this.attachListeners();
|
||||
|
||||
|
|
@ -136,19 +136,19 @@ EPUBJS.Rendition.prototype.attachTo = function(_element){
|
|||
|
||||
// Add Layout method
|
||||
this.applyLayoutMethod();
|
||||
|
||||
|
||||
// Trigger Attached
|
||||
this.trigger("attached");
|
||||
|
||||
// Start processing queue
|
||||
// this.q.run();
|
||||
|
||||
|
||||
};
|
||||
|
||||
EPUBJS.Rendition.prototype.attachListeners = function(){
|
||||
|
||||
// Listen to window for resize event if width or height is set to 100%
|
||||
if(!EPUBJS.core.isNumber(this.settings.width) ||
|
||||
if(!EPUBJS.core.isNumber(this.settings.width) ||
|
||||
!EPUBJS.core.isNumber(this.settings.height) ) {
|
||||
window.addEventListener("resize", this.onResized.bind(this), false);
|
||||
}
|
||||
|
|
@ -160,13 +160,13 @@ EPUBJS.Rendition.prototype.bounds = function() {
|
|||
};
|
||||
|
||||
EPUBJS.Rendition.prototype.display = function(target){
|
||||
|
||||
|
||||
return this.q.enqueue(this._display, target);
|
||||
|
||||
};
|
||||
|
||||
EPUBJS.Rendition.prototype._display = function(target){
|
||||
|
||||
|
||||
var displaying = new RSVP.defer();
|
||||
var displayed = displaying.promise;
|
||||
|
||||
|
|
@ -183,7 +183,7 @@ EPUBJS.Rendition.prototype._display = function(target){
|
|||
}
|
||||
|
||||
this.displaying = true;
|
||||
|
||||
|
||||
// Hide current views
|
||||
this.hide();
|
||||
|
||||
|
|
@ -194,11 +194,19 @@ EPUBJS.Rendition.prototype._display = function(target){
|
|||
this.q.enqueue(this.append, view);
|
||||
|
||||
// Move to correct place within the section, if needed
|
||||
// this.moveTo(what)
|
||||
this.q.enqueue(function(){
|
||||
|
||||
var offset = view.locationOf(target);
|
||||
|
||||
if(offset.top > 250 || offset.left > 250){ // Terrible temp fix to prevent unneeded jumps
|
||||
return this.moveTo(offset);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// Show views
|
||||
this.show();
|
||||
|
||||
|
||||
// This hook doesn't prevent showing, but waits to resolve until
|
||||
// all the hooks have finished. Might want to block showing.
|
||||
this.hooks.display.trigger(view)
|
||||
|
|
@ -215,14 +223,14 @@ EPUBJS.Rendition.prototype._display = function(target){
|
|||
|
||||
};
|
||||
// Takes a cfi, fragment or page?
|
||||
EPUBJS.Rendition.prototype.moveTo = function(what){
|
||||
|
||||
EPUBJS.Rendition.prototype.moveTo = function(offset){
|
||||
this.scrollBy(offset.left, offset.top);
|
||||
};
|
||||
|
||||
EPUBJS.Rendition.prototype.render = function(view, show) {
|
||||
|
||||
view.create();
|
||||
|
||||
|
||||
view.onLayout = this.layout.format.bind(this.layout);
|
||||
|
||||
// Fit to size of the container, apply padding
|
||||
|
|
@ -243,13 +251,13 @@ EPUBJS.Rendition.prototype.render = function(view, show) {
|
|||
return this.hooks.render.trigger(view, this);
|
||||
}.bind(this))
|
||||
.then(function(){
|
||||
|
||||
|
||||
if(show !== false && this.hidden === false) {
|
||||
this.q.enqueue(function(view){
|
||||
view.show();
|
||||
}, view);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// this.map = new EPUBJS.Map(view, this.layout);
|
||||
this.trigger("rendered", view.section);
|
||||
|
|
@ -296,7 +304,7 @@ EPUBJS.Rendition.prototype.remove = function(view) {
|
|||
this.views.splice(index, 1);
|
||||
}
|
||||
|
||||
|
||||
|
||||
this._remove(view);
|
||||
|
||||
};
|
||||
|
|
@ -313,7 +321,7 @@ EPUBJS.Rendition.prototype._remove = function(view) {
|
|||
};
|
||||
|
||||
EPUBJS.Rendition.prototype.resizeView = function(view) {
|
||||
|
||||
|
||||
if(this.globalLayoutProperties.layout === "pre-paginated") {
|
||||
view.lock("both", this.stage.width, this.stage.height);
|
||||
} else {
|
||||
|
|
@ -352,7 +360,7 @@ EPUBJS.Rendition.prototype.stageSize = function(_width, _height){
|
|||
width = bounds.width;
|
||||
//height = bounds.height;
|
||||
}
|
||||
|
||||
|
||||
if(height && !EPUBJS.core.isNumber(height)) {
|
||||
bounds = bounds || this.container.getBoundingClientRect();
|
||||
//width = bounds.width;
|
||||
|
|
@ -369,11 +377,11 @@ EPUBJS.Rendition.prototype.stageSize = function(_width, _height){
|
|||
};
|
||||
|
||||
this.stage = {
|
||||
width: width -
|
||||
this.containerPadding.left -
|
||||
width: width -
|
||||
this.containerPadding.left -
|
||||
this.containerPadding.right,
|
||||
height: height -
|
||||
this.containerPadding.top -
|
||||
height: height -
|
||||
this.containerPadding.top -
|
||||
this.containerPadding.bottom
|
||||
};
|
||||
|
||||
|
|
@ -382,7 +390,7 @@ EPUBJS.Rendition.prototype.stageSize = function(_width, _height){
|
|||
};
|
||||
|
||||
EPUBJS.Rendition.prototype.applyLayoutMethod = function() {
|
||||
|
||||
|
||||
this.layout = new EPUBJS.Layout.Scroll();
|
||||
this.updateLayout();
|
||||
|
||||
|
|
@ -390,7 +398,7 @@ EPUBJS.Rendition.prototype.applyLayoutMethod = function() {
|
|||
};
|
||||
|
||||
EPUBJS.Rendition.prototype.updateLayout = function() {
|
||||
|
||||
|
||||
this.layout.calculate(this.stage.width, this.stage.height);
|
||||
|
||||
};
|
||||
|
|
@ -485,12 +493,12 @@ EPUBJS.Rendition.prototype.isVisible = function(view, offsetPrev, offsetNext, _c
|
|||
var position = view.position();
|
||||
var container = _container || this.container.getBoundingClientRect();
|
||||
|
||||
if(this.settings.axis === "horizontal" &&
|
||||
if(this.settings.axis === "horizontal" &&
|
||||
(position.right > container.left - offsetPrev) &&
|
||||
!(position.left >= container.right + offsetNext)) {
|
||||
|
||||
return true;
|
||||
|
||||
|
||||
} else if(this.settings.axis === "vertical" &&
|
||||
(position.bottom > container.top - offsetPrev) &&
|
||||
!(position.top >= container.bottom + offsetNext)) {
|
||||
|
|
@ -499,7 +507,7 @@ EPUBJS.Rendition.prototype.isVisible = function(view, offsetPrev, offsetNext, _c
|
|||
}
|
||||
|
||||
return false;
|
||||
|
||||
|
||||
};
|
||||
|
||||
EPUBJS.Rendition.prototype.visible = function(){
|
||||
|
|
@ -519,12 +527,12 @@ EPUBJS.Rendition.prototype.visible = function(){
|
|||
}
|
||||
|
||||
return visible;
|
||||
|
||||
|
||||
};
|
||||
|
||||
EPUBJS.Rendition.prototype.bounds = function(func) {
|
||||
var bounds;
|
||||
|
||||
|
||||
if(!this.settings.height) {
|
||||
bounds = EPUBJS.core.windowBounds();
|
||||
} else {
|
||||
|
|
@ -573,8 +581,8 @@ EPUBJS.Rendition.prototype.destroy = function(){
|
|||
this.q.clear();
|
||||
|
||||
this.clear();
|
||||
|
||||
clearTimeout(this.trimTimeout);
|
||||
|
||||
clearTimeout(this.trimTimeout);
|
||||
if(this.settings.hidden) {
|
||||
this.element.removeChild(this.wrapper);
|
||||
} else {
|
||||
|
|
@ -593,7 +601,7 @@ EPUBJS.Rendition.prototype.reportLocation = function(){
|
|||
EPUBJS.Rendition.prototype.currentLocation = function(){
|
||||
var view;
|
||||
var start, end;
|
||||
|
||||
|
||||
if(this.views.length) {
|
||||
view = this.views[0];
|
||||
// start = container.left - view.position().left;
|
||||
|
|
@ -601,8 +609,46 @@ EPUBJS.Rendition.prototype.currentLocation = function(){
|
|||
|
||||
return this.map.page(view);
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
|
||||
EPUBJS.Rendition.prototype.scrollBy = function(x, y, silent){
|
||||
if(silent) {
|
||||
this.ignore = true;
|
||||
}
|
||||
|
||||
if(this.settings.height) {
|
||||
|
||||
if(x) this.container.scrollLeft += x;
|
||||
if(y) this.container.scrollTop += y;
|
||||
|
||||
} else {
|
||||
window.scrollBy(x,y);
|
||||
}
|
||||
// console.log("scrollBy", x, y);
|
||||
this.scrolled = true;
|
||||
};
|
||||
|
||||
EPUBJS.Rendition.prototype.scrollTo = function(x, y, silent){
|
||||
if(silent) {
|
||||
this.ignore = true;
|
||||
}
|
||||
|
||||
if(this.settings.height) {
|
||||
this.container.scrollLeft = x;
|
||||
this.container.scrollTop = y;
|
||||
} else {
|
||||
window.scrollTo(x,y);
|
||||
}
|
||||
// console.log("scrollTo", x, y);
|
||||
this.scrolled = true;
|
||||
// if(this.container.scrollLeft != x){
|
||||
// setTimeout(function() {
|
||||
// this.scrollTo(x, y, silent);
|
||||
// }.bind(this), 10);
|
||||
// return;
|
||||
// };
|
||||
};
|
||||
|
||||
//-- Enable binding events to Renderer
|
||||
RSVP.EventTarget.mixin(EPUBJS.Rendition.prototype);
|
||||
|
|
|
|||
103
src/view.js
103
src/view.js
|
|
@ -7,7 +7,7 @@ EPUBJS.View = function(section, options) {
|
|||
|
||||
this.element = document.createElement('div');
|
||||
this.element.classList.add("epub-view");
|
||||
|
||||
|
||||
|
||||
// this.element.style.minHeight = "100px";
|
||||
this.element.style.height = "0px";
|
||||
|
|
@ -17,7 +17,7 @@ EPUBJS.View = function(section, options) {
|
|||
this.added = false;
|
||||
this.displayed = false;
|
||||
this.rendered = false;
|
||||
|
||||
|
||||
//this.width = 0;
|
||||
//this.height = 0;
|
||||
|
||||
|
|
@ -29,7 +29,7 @@ EPUBJS.View = function(section, options) {
|
|||
} else {
|
||||
this.element.style.display = "block";
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
|
||||
EPUBJS.View.prototype.create = function() {
|
||||
|
|
@ -45,13 +45,13 @@ 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.style.display = "none";
|
||||
this.element.style.visibility = "hidden";
|
||||
this.iframe.style.visibility = "hidden";
|
||||
|
||||
|
||||
this.iframe.style.width = "0";
|
||||
this.iframe.style.height = "0";
|
||||
this._width = 0;
|
||||
|
|
@ -59,7 +59,7 @@ EPUBJS.View.prototype.create = function() {
|
|||
|
||||
this.element.appendChild(this.iframe);
|
||||
this.added = true;
|
||||
|
||||
|
||||
this.elementBounds = EPUBJS.core.bounds(this.element);
|
||||
|
||||
// if(width || height){
|
||||
|
|
@ -69,7 +69,7 @@ EPUBJS.View.prototype.create = function() {
|
|||
// } else {
|
||||
// this.iframeBounds = EPUBJS.core.bounds(this.iframe);
|
||||
// }
|
||||
|
||||
|
||||
// Firefox has trouble with baseURI and srcdoc
|
||||
// Disabled for now
|
||||
/*
|
||||
|
|
@ -86,7 +86,7 @@ EPUBJS.View.prototype.create = function() {
|
|||
|
||||
|
||||
EPUBJS.View.prototype.lock = function(what, width, height) {
|
||||
|
||||
|
||||
var elBorders = EPUBJS.core.borders(this.element);
|
||||
var iframeBorders;
|
||||
|
||||
|
|
@ -106,10 +106,10 @@ EPUBJS.View.prototype.lock = function(what, width, height) {
|
|||
this.resize(width, this.lockedHeight);
|
||||
}
|
||||
|
||||
if(what === "both" &&
|
||||
if(what === "both" &&
|
||||
EPUBJS.core.isNumber(width) &&
|
||||
EPUBJS.core.isNumber(height)){
|
||||
|
||||
|
||||
this.lockedWidth = width - elBorders.width - iframeBorders.width;
|
||||
this.lockedHeight = height - elBorders.height - iframeBorders.height;
|
||||
|
||||
|
|
@ -123,14 +123,14 @@ EPUBJS.View.prototype.lock = function(what, width, height) {
|
|||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
};
|
||||
|
||||
EPUBJS.View.prototype.expand = function(force) {
|
||||
var width = this.lockedWidth;
|
||||
var height = this.lockedHeight;
|
||||
|
||||
|
||||
var textWidth, textHeight;
|
||||
// console.log("expanding a")
|
||||
if(!this.iframe || this._expanding) return;
|
||||
|
|
@ -155,7 +155,7 @@ EPUBJS.View.prototype.expand = function(force) {
|
|||
width = this._contentWidth;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Expand Vertically
|
||||
if(width && !height) {
|
||||
textHeight = this.textHeight();
|
||||
|
|
@ -167,7 +167,7 @@ EPUBJS.View.prototype.expand = function(force) {
|
|||
height = this._contentHeight;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Only Resize if dimensions have changed or
|
||||
// if Frame is still hidden, so needs reframing
|
||||
if(this._needsReframe || width != this._width || height != this._height){
|
||||
|
|
@ -180,7 +180,7 @@ EPUBJS.View.prototype.expand = function(force) {
|
|||
EPUBJS.View.prototype.contentWidth = function(min) {
|
||||
var prev;
|
||||
var width;
|
||||
|
||||
|
||||
// Save previous width
|
||||
prev = this.iframe.style.width;
|
||||
// Set the iframe size to min, width will only ever be greater
|
||||
|
|
@ -207,10 +207,10 @@ EPUBJS.View.prototype.contentHeight = function(min) {
|
|||
EPUBJS.View.prototype.textWidth = function() {
|
||||
var width;
|
||||
var range = this.document.createRange();
|
||||
|
||||
|
||||
// Select the contents of frame
|
||||
range.selectNodeContents(this.document.body);
|
||||
|
||||
|
||||
// get the width of the text content
|
||||
width = range.getBoundingClientRect().width;
|
||||
return width;
|
||||
|
|
@ -220,15 +220,15 @@ EPUBJS.View.prototype.textWidth = function() {
|
|||
EPUBJS.View.prototype.textHeight = function() {
|
||||
var height;
|
||||
var range = this.document.createRange();
|
||||
|
||||
|
||||
range.selectNodeContents(this.document.body);
|
||||
|
||||
height = range.getBoundingClientRect().height;
|
||||
|
||||
height = range.getBoundingClientRect().height;
|
||||
return height;
|
||||
};
|
||||
|
||||
EPUBJS.View.prototype.resize = function(width, height) {
|
||||
|
||||
|
||||
if(!this.iframe) return;
|
||||
|
||||
if(EPUBJS.core.isNumber(width)){
|
||||
|
|
@ -254,7 +254,7 @@ EPUBJS.View.prototype.reframe = function(width, height) {
|
|||
this._needsReframe = true;
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
if(EPUBJS.core.isNumber(width)){
|
||||
this.element.style.width = width + "px";
|
||||
}
|
||||
|
|
@ -314,29 +314,29 @@ EPUBJS.View.prototype.load = function(contents) {
|
|||
}
|
||||
|
||||
this.iframe.onload = function(event) {
|
||||
|
||||
|
||||
this.window = this.iframe.contentWindow;
|
||||
this.document = this.iframe.contentDocument;
|
||||
this.rendering = false;
|
||||
loading.resolve(this);
|
||||
|
||||
|
||||
}.bind(this);
|
||||
|
||||
|
||||
if(this.supportsSrcdoc){
|
||||
this.iframe.srcdoc = contents;
|
||||
} else {
|
||||
|
||||
|
||||
this.document = this.iframe.contentDocument;
|
||||
|
||||
|
||||
if(!this.document) {
|
||||
loading.reject(new Error("No Document Available"));
|
||||
return loaded;
|
||||
}
|
||||
|
||||
|
||||
this.document.open();
|
||||
this.document.write(contents);
|
||||
this.document.close();
|
||||
|
||||
|
||||
}
|
||||
|
||||
return loaded;
|
||||
|
|
@ -351,7 +351,7 @@ EPUBJS.View.prototype.layout = function(layoutFunc) {
|
|||
this.document.body.style.margin = "0";
|
||||
//this.document.body.style.display = "inline-block";
|
||||
//this.document.documentElement.style.width = "auto";
|
||||
|
||||
|
||||
if(layoutFunc){
|
||||
layoutFunc(this);
|
||||
}
|
||||
|
|
@ -374,7 +374,7 @@ EPUBJS.View.prototype.listeners = function() {
|
|||
// Wait for fonts to load to finish
|
||||
// http://dev.w3.org/csswg/css-font-loading/
|
||||
// Not implemented fully except in chrome
|
||||
|
||||
|
||||
if(this.document.fonts && this.document.fonts.status === "loading") {
|
||||
// console.log("fonts unloaded");
|
||||
this.document.fonts.onloadingdone = function(){
|
||||
|
|
@ -390,15 +390,15 @@ EPUBJS.View.prototype.listeners = function() {
|
|||
this.imageLoadListeners();
|
||||
|
||||
this.mediaQueryListeners();
|
||||
|
||||
|
||||
this.resizeListenters();
|
||||
|
||||
|
||||
};
|
||||
|
||||
EPUBJS.View.prototype.resizeListenters = function() {
|
||||
// Test size again
|
||||
clearTimeout(this.expanding);
|
||||
// this.expanding = setTimeout(this.expand.bind(this), 350);
|
||||
// this.expanding = setTimeout(this.expand.bind(this), 350);
|
||||
};
|
||||
|
||||
//https://github.com/tylergaw/media-query-events/blob/master/js/mq-events.js
|
||||
|
|
@ -451,7 +451,7 @@ EPUBJS.View.prototype.observe = function(target) {
|
|||
// this.element = element;
|
||||
// this.element.appendChild(this.iframe);
|
||||
// };
|
||||
//
|
||||
//
|
||||
// EPUBJS.View.prototype.prependTo = function(element) {
|
||||
// this.element = element;
|
||||
// element.insertBefore(this.iframe, element.firstChild);
|
||||
|
|
@ -517,7 +517,7 @@ EPUBJS.View.prototype.onDisplayed = function(view) {
|
|||
// Stub, override with a custom functions
|
||||
};
|
||||
|
||||
EPUBJS.View.prototype.bounds = function() {
|
||||
EPUBJS.View.prototype.bounds = function() {
|
||||
if(!this.elementBounds) {
|
||||
this.elementBounds = EPUBJS.core.bounds(this.element);
|
||||
}
|
||||
|
|
@ -535,7 +535,7 @@ EPUBJS.View.prototype.destroy = function() {
|
|||
this.element.removeChild(this.iframe);
|
||||
this.displayed = false;
|
||||
this.iframe = null;
|
||||
|
||||
|
||||
this._textWidth = null;
|
||||
this._textHeight = null;
|
||||
this._width = null;
|
||||
|
|
@ -551,7 +551,9 @@ EPUBJS.View.prototype.root = function() {
|
|||
};
|
||||
|
||||
EPUBJS.View.prototype.locationOf = function(target) {
|
||||
|
||||
var parentPos = this.iframe.getBoundingClientRect();
|
||||
var targetPos = {"left": 0, "top": 0};
|
||||
|
||||
if(!this.document) return;
|
||||
|
||||
if(this.epubcfi.isCfiString(target)) {
|
||||
|
|
@ -563,38 +565,41 @@ EPUBJS.View.prototype.locationOf = function(target) {
|
|||
// Must Clean up Marker before going to page
|
||||
this.epubcfi.removeMarker(marker, this.document);
|
||||
|
||||
return marker.getBoundingClientRect();
|
||||
targetPos = marker.getBoundingClientRect();
|
||||
}
|
||||
} else {
|
||||
range = this.epubcfi.generateRangeFromCfi(cfi, this.document);
|
||||
if(range) {
|
||||
return range.getBoundingClientRect();
|
||||
targetPos = range.getBoundingClientRect();
|
||||
}
|
||||
}
|
||||
} else if(typeof target === "string" &&
|
||||
target.indexOf("#") > -1) {
|
||||
|
||||
id = target.substring(target.indexOf("#"));
|
||||
id = target.substring(target.indexOf("#")+1);
|
||||
el = this.document.getElementById(id);
|
||||
|
||||
if(el) {
|
||||
return el.getBoundingClientRect();
|
||||
targetPos = el.getBoundingClientRect();
|
||||
}
|
||||
}
|
||||
|
||||
return {"left": 0, "top": 0};
|
||||
return {
|
||||
"left": window.scrollX + parentPos.left + targetPos.left,
|
||||
"top": window.scrollY + parentPos.top + targetPos.top
|
||||
};
|
||||
};
|
||||
|
||||
EPUBJS.View.prototype.addCss = function(src) {
|
||||
var $stylesheet = document.createElement('link');
|
||||
var ready = false;
|
||||
|
||||
|
||||
return new RSVP.Promise(function(resolve, reject){
|
||||
if(!this.document) {
|
||||
resolve(false);
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
$stylesheet.type = 'text/css';
|
||||
$stylesheet.rel = "stylesheet";
|
||||
$stylesheet.href = src;
|
||||
|
|
@ -607,7 +612,7 @@ EPUBJS.View.prototype.addCss = function(src) {
|
|||
}, 1);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
this.document.head.appendChild($stylesheet);
|
||||
|
||||
}.bind(this));
|
||||
|
|
@ -617,9 +622,9 @@ EPUBJS.View.prototype.addCss = function(src) {
|
|||
EPUBJS.View.prototype.addStylesheetRules = function(rules) {
|
||||
var styleEl = document.createElement('style'),
|
||||
styleSheet;
|
||||
|
||||
|
||||
if(!this.document) return;
|
||||
|
||||
|
||||
// Append style element to head
|
||||
this.document.head.appendChild(styleEl);
|
||||
|
||||
|
|
@ -644,4 +649,4 @@ EPUBJS.View.prototype.addStylesheetRules = function(rules) {
|
|||
}
|
||||
};
|
||||
|
||||
RSVP.EventTarget.mixin(EPUBJS.View.prototype);
|
||||
RSVP.EventTarget.mixin(EPUBJS.View.prototype);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue