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
183
dist/epub.js
vendored
183
dist/epub.js
vendored
|
|
@ -4383,6 +4383,8 @@ 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;
|
||||
|
||||
|
|
@ -4395,26 +4397,29 @@ 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) {
|
||||
|
|
@ -4477,6 +4482,7 @@ EPUBJS.View.prototype.addStylesheetRules = function(rules) {
|
|||
};
|
||||
|
||||
RSVP.EventTarget.mixin(EPUBJS.View.prototype);
|
||||
|
||||
EPUBJS.Layout = EPUBJS.Layout || {};
|
||||
|
||||
EPUBJS.Layout.Reflowable = function(){
|
||||
|
|
@ -4829,7 +4835,15 @@ 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();
|
||||
|
|
@ -4850,8 +4864,8 @@ 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) {
|
||||
|
|
@ -5239,6 +5253,44 @@ EPUBJS.Rendition.prototype.currentLocation = function(){
|
|||
|
||||
};
|
||||
|
||||
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);
|
||||
|
||||
|
|
@ -5292,6 +5344,8 @@ EPUBJS.Continuous.prototype._display = function(target){
|
|||
var view;
|
||||
var cfi, spinePos;
|
||||
|
||||
var visible;
|
||||
|
||||
if(this.epubcfi.isCfiString(target)) {
|
||||
cfi = this.epubcfi.parse(target);
|
||||
spinePos = cfi.spinePos;
|
||||
|
|
@ -5300,10 +5354,46 @@ 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
|
||||
|
|
@ -5322,13 +5412,13 @@ EPUBJS.Continuous.prototype._display = function(target){
|
|||
|
||||
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));
|
||||
|
||||
|
|
@ -5337,7 +5427,14 @@ EPUBJS.Continuous.prototype._display = function(target){
|
|||
// this.displaying = false;
|
||||
// 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));
|
||||
|
||||
} else {
|
||||
displaying.reject(new Error("No Section Found"));
|
||||
|
|
@ -5348,15 +5445,17 @@ 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;
|
||||
|
||||
return this.check(0, dist+this.settings.offset).then(function(){
|
||||
// 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(){
|
||||
|
||||
if(this.settings.axis === "vertical") {
|
||||
this.scrollBy(0, dist);
|
||||
this.scrollBy(0, offset.top);
|
||||
} else {
|
||||
this.scrollBy(dist, 0);
|
||||
this.scrollBy(offset.left, 0);
|
||||
}
|
||||
|
||||
}.bind(this));
|
||||
|
|
@ -5753,43 +5852,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) {
|
||||
|
||||
|
|
@ -5869,6 +5931,7 @@ EPUBJS.Continuous.prototype.current = function(what){
|
|||
return this._current;
|
||||
};
|
||||
*/
|
||||
|
||||
EPUBJS.Paginate = function(book, options) {
|
||||
|
||||
EPUBJS.Continuous.apply(this, arguments);
|
||||
|
|
|
|||
6
dist/epub.min.js
vendored
6
dist/epub.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -61,7 +61,7 @@
|
|||
<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");
|
||||
|
|
|
|||
|
|
@ -24,8 +24,8 @@
|
|||
}
|
||||
|
||||
#viewer {
|
||||
/*width: 900px;*/
|
||||
width: 80%;
|
||||
width: 900px;
|
||||
/*width: 80%;*/
|
||||
height: 600px;
|
||||
background: white;
|
||||
box-shadow: 0 0 4px #ccc;
|
||||
|
|
@ -119,7 +119,7 @@
|
|||
<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 book = ePub("../books/alice/OPS/package.opf");
|
||||
var rendition = book.renderTo("viewer", {
|
||||
method: "paginate",
|
||||
width: "100%",
|
||||
|
|
|
|||
|
|
@ -48,6 +48,8 @@ EPUBJS.Continuous.prototype._display = function(target){
|
|||
var view;
|
||||
var cfi, spinePos;
|
||||
|
||||
var visible;
|
||||
|
||||
if(this.epubcfi.isCfiString(target)) {
|
||||
cfi = this.epubcfi.parse(target);
|
||||
spinePos = cfi.spinePos;
|
||||
|
|
@ -56,10 +58,46 @@ 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
|
||||
|
|
@ -78,13 +116,13 @@ EPUBJS.Continuous.prototype._display = function(target){
|
|||
|
||||
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));
|
||||
|
||||
// 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,15 +149,17 @@ 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;
|
||||
|
||||
return this.check(0, dist+this.settings.offset).then(function(){
|
||||
// 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(){
|
||||
|
||||
if(this.settings.axis === "vertical") {
|
||||
this.scrollBy(0, dist);
|
||||
this.scrollBy(0, offset.top);
|
||||
} else {
|
||||
this.scrollBy(dist, 0);
|
||||
this.scrollBy(offset.left, 0);
|
||||
}
|
||||
|
||||
}.bind(this));
|
||||
|
|
@ -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) {
|
||||
|
||||
|
|
|
|||
|
|
@ -194,7 +194,15 @@ 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();
|
||||
|
|
@ -215,8 +223,8 @@ 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) {
|
||||
|
|
@ -604,5 +612,43 @@ EPUBJS.Rendition.prototype.currentLocation = function(){
|
|||
|
||||
};
|
||||
|
||||
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);
|
||||
|
|
|
|||
15
src/view.js
15
src/view.js
|
|
@ -551,6 +551,8 @@ 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;
|
||||
|
||||
|
|
@ -563,26 +565,29 @@ 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) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue