mirror of
https://github.com/futurepress/epub.js.git
synced 2025-10-03 14:59:18 +02:00
Single render handles spreads
This commit is contained in:
Fred Chasen
parent
0889e63a29
commit
89387f1ef2
9 changed files with 231 additions and 45 deletions
121
dist/epub.js
vendored
121
dist/epub.js
vendored
|
|
@ -6366,6 +6366,7 @@ Contents.prototype.columns = function(width, height, columnWidth, gap){
|
|||
var COLUMN_GAP = core.prefixed('columnGap');
|
||||
var COLUMN_WIDTH = core.prefixed('columnWidth');
|
||||
var COLUMN_FILL = core.prefixed('columnFill');
|
||||
var textWidth;
|
||||
|
||||
this.width(width);
|
||||
this.height(height);
|
||||
|
|
@ -7991,6 +7992,7 @@ function Layout(settings){
|
|||
this._flow = (settings.flow === "paginated") ? "paginated" : "scrolled";
|
||||
this._spread = (settings.spread === "none") ? false : true;
|
||||
this._minSpreadWidth = settings.spread || 800;
|
||||
this._evenSpreads = settings.evenSpreads || false;
|
||||
|
||||
this.width = 0;
|
||||
this.height = 0;
|
||||
|
|
@ -9086,11 +9088,17 @@ SingleViewManager.prototype.destroy = function(){
|
|||
};
|
||||
|
||||
SingleViewManager.prototype.onResized = function(e) {
|
||||
this.resize();
|
||||
clearTimeout(this.resizeTimeout);
|
||||
this.resizeTimeout = setTimeout(function(){
|
||||
this.resize();
|
||||
}.bind(this), 150);
|
||||
};
|
||||
|
||||
SingleViewManager.prototype.resize = function(width, height){
|
||||
|
||||
// Clear the queue
|
||||
this.q.clear();
|
||||
|
||||
this._stageSize = this.stage.size(width, height);
|
||||
this._bounds = this.bounds();
|
||||
|
||||
|
|
@ -9103,10 +9111,12 @@ SingleViewManager.prototype.resize = function(width, height){
|
|||
view.size(this._stageSize.width, this._stageSize.height);
|
||||
}.bind(this));
|
||||
|
||||
this.trigger("resized", {
|
||||
width: this._stageSize.width,
|
||||
height: this._stageSize.height
|
||||
});
|
||||
this.updateLayout();
|
||||
|
||||
this.trigger("resized", {
|
||||
width: this.stage.width,
|
||||
height: this.stage.height
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
|
|
@ -9169,8 +9179,25 @@ SingleViewManager.prototype.afterResized = function(view){
|
|||
this.trigger("resize", view.section);
|
||||
};
|
||||
|
||||
// SingleViewManager.prototype.moveTo = function(offset){
|
||||
// this.scrollTo(offset.left, offset.top);
|
||||
// };
|
||||
|
||||
SingleViewManager.prototype.moveTo = function(offset){
|
||||
this.scrollTo(offset.left, offset.top);
|
||||
var distX = 0,
|
||||
distY = 0;
|
||||
|
||||
if(this.settings.axis === "vertical") {
|
||||
distY = offset.top;
|
||||
} else {
|
||||
distX = Math.floor(offset.left / this.layout.delta) * this.layout.delta;
|
||||
|
||||
if (distX + this.layout.delta > this.container.scrollWidth) {
|
||||
distX = this.container.scrollWidth - this.layout.delta;
|
||||
}
|
||||
}
|
||||
|
||||
this.scrollTo(distX, distY);
|
||||
};
|
||||
|
||||
SingleViewManager.prototype.add = function(view){
|
||||
|
|
@ -9198,10 +9225,30 @@ SingleViewManager.prototype.add = function(view){
|
|||
SingleViewManager.prototype.next = function(){
|
||||
var next;
|
||||
var view;
|
||||
var left;
|
||||
|
||||
if(!this.views.length) return;
|
||||
|
||||
next = this.views.last().section.next();
|
||||
if(this.settings.axis === "horizontal") {
|
||||
|
||||
this.scrollLeft = this.container.scrollLeft;
|
||||
|
||||
left = this.container.scrollLeft + this.container.offsetWidth + this.layout.delta;
|
||||
|
||||
if(left < this.container.scrollWidth) {
|
||||
this.scrollBy(this.layout.delta, 0);
|
||||
} else if (left - this.layout.columnWidth === this.container.scrollWidth) {
|
||||
this.scrollTo(this.container.scrollWidth - this.layout.delta, 0);
|
||||
} else {
|
||||
next = this.views.last().section.next();
|
||||
}
|
||||
|
||||
|
||||
} else {
|
||||
|
||||
next = this.views.last().section.next();
|
||||
|
||||
}
|
||||
|
||||
if(next) {
|
||||
this.views.clear();
|
||||
|
|
@ -9212,21 +9259,45 @@ SingleViewManager.prototype.next = function(){
|
|||
this.views.show();
|
||||
}.bind(this));
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
|
||||
SingleViewManager.prototype.prev = function(){
|
||||
var prev;
|
||||
var view;
|
||||
var left;
|
||||
|
||||
if(!this.views.length) return;
|
||||
|
||||
prev = this.views.first().section.prev();
|
||||
if(this.settings.axis === "horizontal") {
|
||||
|
||||
this.scrollLeft = this.container.scrollLeft;
|
||||
|
||||
left = this.container.scrollLeft;
|
||||
|
||||
if(left > 0) {
|
||||
this.scrollBy(-this.layout.delta, 0);
|
||||
} else {
|
||||
prev = this.views.first().section.prev();
|
||||
}
|
||||
|
||||
|
||||
} else {
|
||||
|
||||
prev = this.views.first().section.prev();
|
||||
|
||||
}
|
||||
|
||||
if(prev) {
|
||||
this.views.clear();
|
||||
|
||||
view = this.createView(prev);
|
||||
return this.add(view)
|
||||
.then(function(){
|
||||
if(this.settings.axis === "horizontal") {
|
||||
this.scrollTo(this.container.scrollWidth - this.layout.delta, 0);
|
||||
}
|
||||
this.views.show();
|
||||
}.bind(this));
|
||||
}
|
||||
|
|
@ -9250,7 +9321,7 @@ SingleViewManager.prototype.currentLocation = function(){
|
|||
start = container.left - view.position().left;
|
||||
end = start + this.layout.spread;
|
||||
|
||||
return this.mapping.page(view);
|
||||
return this.mapping.page(view, view.section.cfiBase);
|
||||
}
|
||||
|
||||
};
|
||||
|
|
@ -9359,15 +9430,27 @@ SingleViewManager.prototype.applyLayout = function(layout) {
|
|||
};
|
||||
|
||||
SingleViewManager.prototype.updateLayout = function() {
|
||||
var bounds;
|
||||
|
||||
if (!this.stage) {
|
||||
return;
|
||||
}
|
||||
|
||||
bounds = this.stage.size();
|
||||
this._stageSize = this.stage.size();
|
||||
|
||||
this.layout.calculate(bounds.width, bounds.height);
|
||||
if(this.settings.axis === "vertical") {
|
||||
this.layout.calculate(this._stageSize.width, this._stageSize.height);
|
||||
} else {
|
||||
this.layout.calculate(
|
||||
this._stageSize.width,
|
||||
this._stageSize.height,
|
||||
this.settings.gap
|
||||
);
|
||||
|
||||
// Set the look ahead offset for what is visible
|
||||
this.settings.offset = this.layout.delta;
|
||||
|
||||
this.stage.addStyleRules("iframe", [{"margin-right" : this.layout.gap + "px"}]);
|
||||
|
||||
}
|
||||
|
||||
this.setLayout(this.layout);
|
||||
|
||||
|
|
@ -10516,7 +10599,7 @@ function Rendition(book, options) {
|
|||
width: null,
|
||||
height: null,
|
||||
ignoreClass: '',
|
||||
manager: "continuous",
|
||||
manager: "single",
|
||||
view: "iframe",
|
||||
flow: null,
|
||||
layout: null,
|
||||
|
|
@ -12456,6 +12539,7 @@ IframeView.prototype.lock = function(what, width, height) {
|
|||
IframeView.prototype.expand = function(force) {
|
||||
var width = this.lockedWidth;
|
||||
var height = this.lockedHeight;
|
||||
var columns;
|
||||
|
||||
var textWidth, textHeight;
|
||||
|
||||
|
|
@ -12473,6 +12557,15 @@ IframeView.prototype.expand = function(force) {
|
|||
// Get the contentWidth by resizing the iframe
|
||||
// Check with a min reset of the textWidth
|
||||
width = this.contentWidth(textWidth);
|
||||
|
||||
columns = Math.ceil(width / (this.settings.layout.columnWidth + this.settings.layout.gap));
|
||||
|
||||
if ( this.settings.layout.divisor > 1 &&
|
||||
(columns % 2 > 0)) {
|
||||
// add a blank page
|
||||
width += this.settings.layout.gap + this.settings.layout.columnWidth;
|
||||
}
|
||||
|
||||
// Save the textWdith
|
||||
this._textWidth = textWidth;
|
||||
// Save the contentWidth
|
||||
|
|
|
|||
2
dist/epub.js.map
vendored
2
dist/epub.js.map
vendored
File diff suppressed because one or more lines are too long
|
|
@ -63,7 +63,6 @@
|
|||
// Load the opf
|
||||
var book = ePub("https://s3.amazonaws.com/epubjs/books/alice/OPS/package.opf");
|
||||
var rendition = book.renderTo("viewer", {
|
||||
manager: "single",
|
||||
flow: "scrolled-doc",
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
-webkit-justify-content: center;
|
||||
}
|
||||
|
||||
#viewer {
|
||||
#viewer {
|
||||
width: 290px;
|
||||
height: 580px;
|
||||
background: white;
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
left: 40px;
|
||||
}
|
||||
|
||||
#next {
|
||||
#next {
|
||||
right: 40px;
|
||||
}
|
||||
|
||||
|
|
@ -59,15 +59,15 @@
|
|||
.arrow:hover {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
|
||||
.arrow:active {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media only screen
|
||||
and (min-device-width : 320px)
|
||||
|
||||
@media only screen
|
||||
and (min-device-width : 320px)
|
||||
and (max-device-width : 667px) {
|
||||
#viewer {
|
||||
height: 96.5%;
|
||||
|
|
@ -91,8 +91,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");
|
||||
var rendition = book.renderTo("viewer", {
|
||||
method: "paginate",
|
||||
var rendition = book.renderTo("viewer", {
|
||||
manager: "continuous",
|
||||
flow: "paginated",
|
||||
width: "100%",
|
||||
height: "100%"
|
||||
});
|
||||
|
|
@ -118,29 +119,29 @@
|
|||
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);
|
||||
|
||||
$(window).on( "swipeleft", function( event ) {
|
||||
$(window).on( "swipeleft", function( event ) {
|
||||
rendition.next();
|
||||
});
|
||||
|
||||
$(window).on( "swiperight", function( event ) {
|
||||
$(window).on( "swiperight", function( event ) {
|
||||
rendition.prev();
|
||||
});
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -588,6 +588,7 @@ Contents.prototype.columns = function(width, height, columnWidth, gap){
|
|||
var COLUMN_GAP = core.prefixed('columnGap');
|
||||
var COLUMN_WIDTH = core.prefixed('columnWidth');
|
||||
var COLUMN_FILL = core.prefixed('columnFill');
|
||||
var textWidth;
|
||||
|
||||
this.width(width);
|
||||
this.height(height);
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ function Layout(settings){
|
|||
this._flow = (settings.flow === "paginated") ? "paginated" : "scrolled";
|
||||
this._spread = (settings.spread === "none") ? false : true;
|
||||
this._minSpreadWidth = settings.spread || 800;
|
||||
this._evenSpreads = settings.evenSpreads || false;
|
||||
|
||||
this.width = 0;
|
||||
this.height = 0;
|
||||
|
|
|
|||
|
|
@ -91,11 +91,17 @@ SingleViewManager.prototype.destroy = function(){
|
|||
};
|
||||
|
||||
SingleViewManager.prototype.onResized = function(e) {
|
||||
this.resize();
|
||||
clearTimeout(this.resizeTimeout);
|
||||
this.resizeTimeout = setTimeout(function(){
|
||||
this.resize();
|
||||
}.bind(this), 150);
|
||||
};
|
||||
|
||||
SingleViewManager.prototype.resize = function(width, height){
|
||||
|
||||
// Clear the queue
|
||||
this.q.clear();
|
||||
|
||||
this._stageSize = this.stage.size(width, height);
|
||||
this._bounds = this.bounds();
|
||||
|
||||
|
|
@ -108,10 +114,12 @@ SingleViewManager.prototype.resize = function(width, height){
|
|||
view.size(this._stageSize.width, this._stageSize.height);
|
||||
}.bind(this));
|
||||
|
||||
this.trigger("resized", {
|
||||
width: this._stageSize.width,
|
||||
height: this._stageSize.height
|
||||
});
|
||||
this.updateLayout();
|
||||
|
||||
this.trigger("resized", {
|
||||
width: this.stage.width,
|
||||
height: this.stage.height
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
|
|
@ -174,8 +182,25 @@ SingleViewManager.prototype.afterResized = function(view){
|
|||
this.trigger("resize", view.section);
|
||||
};
|
||||
|
||||
// SingleViewManager.prototype.moveTo = function(offset){
|
||||
// this.scrollTo(offset.left, offset.top);
|
||||
// };
|
||||
|
||||
SingleViewManager.prototype.moveTo = function(offset){
|
||||
this.scrollTo(offset.left, offset.top);
|
||||
var distX = 0,
|
||||
distY = 0;
|
||||
|
||||
if(this.settings.axis === "vertical") {
|
||||
distY = offset.top;
|
||||
} else {
|
||||
distX = Math.floor(offset.left / this.layout.delta) * this.layout.delta;
|
||||
|
||||
if (distX + this.layout.delta > this.container.scrollWidth) {
|
||||
distX = this.container.scrollWidth - this.layout.delta;
|
||||
}
|
||||
}
|
||||
|
||||
this.scrollTo(distX, distY);
|
||||
};
|
||||
|
||||
SingleViewManager.prototype.add = function(view){
|
||||
|
|
@ -203,10 +228,30 @@ SingleViewManager.prototype.add = function(view){
|
|||
SingleViewManager.prototype.next = function(){
|
||||
var next;
|
||||
var view;
|
||||
var left;
|
||||
|
||||
if(!this.views.length) return;
|
||||
|
||||
next = this.views.last().section.next();
|
||||
if(this.settings.axis === "horizontal") {
|
||||
|
||||
this.scrollLeft = this.container.scrollLeft;
|
||||
|
||||
left = this.container.scrollLeft + this.container.offsetWidth + this.layout.delta;
|
||||
|
||||
if(left < this.container.scrollWidth) {
|
||||
this.scrollBy(this.layout.delta, 0);
|
||||
} else if (left - this.layout.columnWidth === this.container.scrollWidth) {
|
||||
this.scrollTo(this.container.scrollWidth - this.layout.delta, 0);
|
||||
} else {
|
||||
next = this.views.last().section.next();
|
||||
}
|
||||
|
||||
|
||||
} else {
|
||||
|
||||
next = this.views.last().section.next();
|
||||
|
||||
}
|
||||
|
||||
if(next) {
|
||||
this.views.clear();
|
||||
|
|
@ -217,21 +262,45 @@ SingleViewManager.prototype.next = function(){
|
|||
this.views.show();
|
||||
}.bind(this));
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
|
||||
SingleViewManager.prototype.prev = function(){
|
||||
var prev;
|
||||
var view;
|
||||
var left;
|
||||
|
||||
if(!this.views.length) return;
|
||||
|
||||
prev = this.views.first().section.prev();
|
||||
if(this.settings.axis === "horizontal") {
|
||||
|
||||
this.scrollLeft = this.container.scrollLeft;
|
||||
|
||||
left = this.container.scrollLeft;
|
||||
|
||||
if(left > 0) {
|
||||
this.scrollBy(-this.layout.delta, 0);
|
||||
} else {
|
||||
prev = this.views.first().section.prev();
|
||||
}
|
||||
|
||||
|
||||
} else {
|
||||
|
||||
prev = this.views.first().section.prev();
|
||||
|
||||
}
|
||||
|
||||
if(prev) {
|
||||
this.views.clear();
|
||||
|
||||
view = this.createView(prev);
|
||||
return this.add(view)
|
||||
.then(function(){
|
||||
if(this.settings.axis === "horizontal") {
|
||||
this.scrollTo(this.container.scrollWidth - this.layout.delta, 0);
|
||||
}
|
||||
this.views.show();
|
||||
}.bind(this));
|
||||
}
|
||||
|
|
@ -255,7 +324,7 @@ SingleViewManager.prototype.currentLocation = function(){
|
|||
start = container.left - view.position().left;
|
||||
end = start + this.layout.spread;
|
||||
|
||||
return this.mapping.page(view);
|
||||
return this.mapping.page(view, view.section.cfiBase);
|
||||
}
|
||||
|
||||
};
|
||||
|
|
@ -364,15 +433,27 @@ SingleViewManager.prototype.applyLayout = function(layout) {
|
|||
};
|
||||
|
||||
SingleViewManager.prototype.updateLayout = function() {
|
||||
var bounds;
|
||||
|
||||
if (!this.stage) {
|
||||
return;
|
||||
}
|
||||
|
||||
bounds = this.stage.size();
|
||||
this._stageSize = this.stage.size();
|
||||
|
||||
this.layout.calculate(bounds.width, bounds.height);
|
||||
if(this.settings.axis === "vertical") {
|
||||
this.layout.calculate(this._stageSize.width, this._stageSize.height);
|
||||
} else {
|
||||
this.layout.calculate(
|
||||
this._stageSize.width,
|
||||
this._stageSize.height,
|
||||
this.settings.gap
|
||||
);
|
||||
|
||||
// Set the look ahead offset for what is visible
|
||||
this.settings.offset = this.layout.delta;
|
||||
|
||||
this.stage.addStyleRules("iframe", [{"margin-right" : this.layout.gap + "px"}]);
|
||||
|
||||
}
|
||||
|
||||
this.setLayout(this.layout);
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ function Rendition(book, options) {
|
|||
width: null,
|
||||
height: null,
|
||||
ignoreClass: '',
|
||||
manager: "continuous",
|
||||
manager: "single",
|
||||
view: "iframe",
|
||||
flow: null,
|
||||
layout: null,
|
||||
|
|
|
|||
|
|
@ -230,6 +230,7 @@ IframeView.prototype.lock = function(what, width, height) {
|
|||
IframeView.prototype.expand = function(force) {
|
||||
var width = this.lockedWidth;
|
||||
var height = this.lockedHeight;
|
||||
var columns;
|
||||
|
||||
var textWidth, textHeight;
|
||||
|
||||
|
|
@ -247,6 +248,15 @@ IframeView.prototype.expand = function(force) {
|
|||
// Get the contentWidth by resizing the iframe
|
||||
// Check with a min reset of the textWidth
|
||||
width = this.contentWidth(textWidth);
|
||||
|
||||
columns = Math.ceil(width / (this.settings.layout.columnWidth + this.settings.layout.gap));
|
||||
|
||||
if ( this.settings.layout.divisor > 1 &&
|
||||
(columns % 2 > 0)) {
|
||||
// add a blank page
|
||||
width += this.settings.layout.gap + this.settings.layout.columnWidth;
|
||||
}
|
||||
|
||||
// Save the textWdith
|
||||
this._textWidth = textWidth;
|
||||
// Save the contentWidth
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue