mirror of
https://github.com/futurepress/epub.js.git
synced 2025-10-04 15:09:16 +02:00
Update vertical writing support in continuous
This commit is contained in:
Fred Chasen
parent
628be87534
commit
781fd1e3bf
7 changed files with 172 additions and 64 deletions
|
|
@ -18,8 +18,12 @@
|
|||
<div id="prev" class="arrow">‹</div>
|
||||
<div id="next" class="arrow">›</div>
|
||||
<script>
|
||||
var params = URLSearchParams && new URLSearchParams(document.location.search.substring(1));
|
||||
var url = params && params.get("url") && decodeURIComponent(params.get("url"));
|
||||
var currentSectionIndex = (params && params.get("loc")) ? params.get("loc") : undefined;
|
||||
|
||||
// Load the opf
|
||||
window.book = ePub("https://s3.amazonaws.com/moby-dick/moby-dick.epub");
|
||||
window.book = ePub(url || "https://s3.amazonaws.com/moby-dick/moby-dick.epub");
|
||||
var rendition = book.renderTo("viewer", {
|
||||
manager: "continuous",
|
||||
flow: "paginated",
|
||||
|
|
@ -27,7 +31,7 @@
|
|||
height: 600
|
||||
});
|
||||
|
||||
var displayed = rendition.display();
|
||||
var displayed = rendition.display(currentSectionIndex);
|
||||
|
||||
|
||||
displayed.then(function(renderer){
|
||||
|
|
@ -39,26 +43,31 @@
|
|||
// console.log(toc);
|
||||
});
|
||||
|
||||
book.ready.then(() => {
|
||||
|
||||
var next = document.getElementById("next");
|
||||
next.addEventListener("click", function(){
|
||||
rendition.next();
|
||||
|
||||
next.addEventListener("click", function(e){
|
||||
book.package.metadata.direction === "rtl" ? rendition.prev() : rendition.next();
|
||||
e.preventDefault();
|
||||
}, false);
|
||||
|
||||
var prev = document.getElementById("prev");
|
||||
prev.addEventListener("click", function(){
|
||||
rendition.prev();
|
||||
prev.addEventListener("click", function(e){
|
||||
book.package.metadata.direction === "rtl" ? rendition.next() : rendition.prev();
|
||||
e.preventDefault();
|
||||
}, false);
|
||||
|
||||
var keyListener = function(e){
|
||||
|
||||
// Left Key
|
||||
if ((e.keyCode || e.which) == 37) {
|
||||
rendition.prev();
|
||||
book.package.metadata.direction === "rtl" ? rendition.next() : rendition.prev();
|
||||
}
|
||||
|
||||
// Right Key
|
||||
if ((e.keyCode || e.which) == 39) {
|
||||
rendition.next();
|
||||
book.package.metadata.direction === "rtl" ? rendition.prev() : rendition.next();
|
||||
}
|
||||
|
||||
};
|
||||
|
|
@ -66,12 +75,40 @@
|
|||
rendition.on("keyup", keyListener);
|
||||
document.addEventListener("keyup", keyListener, false);
|
||||
|
||||
});
|
||||
|
||||
rendition.on("selected", function(range) {
|
||||
console.log("selected", range);
|
||||
});
|
||||
|
||||
rendition.on("layout", function(layout) {
|
||||
let viewer = document.getElementById("viewer");
|
||||
|
||||
if (layout.spread) {
|
||||
viewer.classList.remove('single');
|
||||
} else {
|
||||
viewer.classList.add('single');
|
||||
}
|
||||
});
|
||||
|
||||
rendition.on("relocated", function(location){
|
||||
console.log(location);
|
||||
|
||||
var next = book.package.metadata.direction === "rtl" ? document.getElementById("prev") : document.getElementById("next");
|
||||
var prev = book.package.metadata.direction === "rtl" ? document.getElementById("next") : document.getElementById("prev");
|
||||
|
||||
if (location.atEnd) {
|
||||
next.style.visibility = "hidden";
|
||||
} else {
|
||||
next.style.visibility = "visible";
|
||||
}
|
||||
|
||||
if (location.atStart) {
|
||||
prev.style.visibility = "hidden";
|
||||
} else {
|
||||
prev.style.visibility = "visible";
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
book.loaded.navigation.then(function(toc){
|
||||
|
|
|
|||
|
|
@ -88,6 +88,10 @@ body {
|
|||
content: "";
|
||||
}
|
||||
|
||||
#viewer.spreads.single:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#prev {
|
||||
left: 40px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
<script>
|
||||
var params = URLSearchParams && new URLSearchParams(document.location.search.substring(1));
|
||||
var url = params && params.get("url") && decodeURIComponent(params.get("url"));
|
||||
var currentSectionIndex = (params && params.get("loc")) ? params.get("loc") : 6;
|
||||
var currentSectionIndex = (params && params.get("loc")) ? params.get("loc") : undefined;
|
||||
|
||||
// Load the opf
|
||||
var book = ePub(url || "https://s3.amazonaws.com/moby-dick/moby-dick.epub");
|
||||
|
|
|
|||
|
|
@ -954,10 +954,13 @@ class Contents {
|
|||
* @param {number} gap
|
||||
*/
|
||||
columns(width, height, columnWidth, gap){
|
||||
var COLUMN_AXIS = prefixed("column-axis");
|
||||
var COLUMN_GAP = prefixed("column-gap");
|
||||
var COLUMN_WIDTH = prefixed("column-width");
|
||||
var COLUMN_FILL = prefixed("column-fill");
|
||||
let COLUMN_AXIS = prefixed("column-axis");
|
||||
let COLUMN_GAP = prefixed("column-gap");
|
||||
let COLUMN_WIDTH = prefixed("column-width");
|
||||
let COLUMN_FILL = prefixed("column-fill");
|
||||
|
||||
let writingMode = this.writingMode();
|
||||
let axis = (writingMode.indexOf("vertical") === 0) ? "vertical" : "horizontal";
|
||||
|
||||
this.layoutStyle("paginated");
|
||||
|
||||
|
|
@ -976,7 +979,11 @@ class Contents {
|
|||
this.css("overflow-y", "hidden");
|
||||
this.css("margin", "0", true);
|
||||
|
||||
if (axis === "vertical") {
|
||||
this.css("padding", (gap / 2) + "px 20px", true);
|
||||
} else {
|
||||
this.css("padding", "20px " + (gap / 2) + "px", true);
|
||||
}
|
||||
|
||||
this.css("box-sizing", "border-box");
|
||||
this.css("max-width", "inherit");
|
||||
|
|
|
|||
|
|
@ -274,8 +274,6 @@ class ContinuousViewManager extends DefaultViewManager {
|
|||
}
|
||||
|
||||
check(_offsetLeft, _offsetTop){
|
||||
var last, first, next, prev;
|
||||
|
||||
var checking = new defer();
|
||||
var newViews = [];
|
||||
|
||||
|
|
@ -292,27 +290,45 @@ class ContinuousViewManager extends DefaultViewManager {
|
|||
|
||||
var bounds = this._bounds; // bounds saved this until resize
|
||||
|
||||
let dir = this.settings.direction === "rtl" ? -1 : 1; //RTL reverses scrollTop
|
||||
let rtl = this.settings.direction === "rtl";
|
||||
let dir = horizontal && rtl ? -1 : 1; //RTL reverses scrollTop
|
||||
|
||||
var offset = horizontal ? this.scrollLeft : this.scrollTop * dir;
|
||||
var visibleLength = horizontal ? bounds.width : bounds.height;
|
||||
var contentLength = horizontal ? this.container.scrollWidth : this.container.scrollHeight;
|
||||
|
||||
if (offset + visibleLength + delta >= contentLength) {
|
||||
last = this.views.last();
|
||||
next = last && last.section.next();
|
||||
let prepend = () => {
|
||||
let first = this.views.first();
|
||||
let prev = first && first.section.prev();
|
||||
|
||||
if(prev) {
|
||||
newViews.push(this.prepend(prev));
|
||||
}
|
||||
}
|
||||
|
||||
let append = () => {
|
||||
let last = this.views.last();
|
||||
let next = last && last.section.next();
|
||||
|
||||
if(next) {
|
||||
newViews.push(this.append(next));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if (offset + visibleLength + delta >= contentLength) {
|
||||
if (horizontal && rtl) {
|
||||
prepend();
|
||||
} else {
|
||||
append();
|
||||
}
|
||||
}
|
||||
|
||||
if (offset - delta < 0 ) {
|
||||
first = this.views.first();
|
||||
|
||||
prev = first && first.section.prev();
|
||||
if(prev) {
|
||||
newViews.push(this.prepend(prev));
|
||||
if (horizontal && rtl) {
|
||||
append();
|
||||
} else {
|
||||
prepend();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -322,6 +338,11 @@ class ContinuousViewManager extends DefaultViewManager {
|
|||
|
||||
if(newViews.length){
|
||||
return Promise.all(promises)
|
||||
.then(() => {
|
||||
if (this.layout.name === "pre-paginated" && this.layout.props.spread) {
|
||||
return this.check();
|
||||
}
|
||||
})
|
||||
.then(() => {
|
||||
// Check to see if anything new is on screen after rendering
|
||||
return this.update(delta);
|
||||
|
|
@ -511,32 +532,64 @@ class ContinuousViewManager extends DefaultViewManager {
|
|||
|
||||
next(){
|
||||
|
||||
if(this.settings.axis === "horizontal") {
|
||||
let dir = this.settings.direction;
|
||||
let delta = this.layout.props.name === "pre-paginated" &&
|
||||
this.layout.props.spread ? this.layout.props.delta * 2 : this.layout.props.delta;
|
||||
|
||||
this.scrollLeft = this.container.scrollLeft;
|
||||
if(!this.views.length) return;
|
||||
|
||||
if(this.container.scrollLeft +
|
||||
this.container.offsetWidth +
|
||||
this.layout.delta < this.container.scrollWidth) {
|
||||
this.scrollBy(this.layout.delta, 0, true);
|
||||
} else {
|
||||
this.scrollTo(this.container.scrollWidth - this.layout.delta, 0, true);
|
||||
}
|
||||
if(this.isPaginated && this.settings.axis === "horizontal") {
|
||||
|
||||
this.scrollBy(delta, 0, true);
|
||||
|
||||
} else {
|
||||
|
||||
this.scrollBy(0, this.layout.height, true);
|
||||
|
||||
}
|
||||
|
||||
// if(this.settings.axis === "horizontal") {
|
||||
//
|
||||
// this.scrollLeft = this.container.scrollLeft;
|
||||
//
|
||||
// if(this.container.scrollLeft +
|
||||
// this.container.offsetWidth +
|
||||
// this.layout.delta < this.container.scrollWidth) {
|
||||
// console.log("a", this.layout.delta);
|
||||
// this.scrollBy(this.layout.delta, 0, true);
|
||||
// } else {
|
||||
// console.log("b", this.container.scrollWidth - this.layout.delta);
|
||||
//
|
||||
// this.scrollTo(this.container.scrollWidth - this.layout.delta, 0, true);
|
||||
// }
|
||||
//
|
||||
// } else {
|
||||
// console.log("c", this.layout.height);
|
||||
//
|
||||
// this.scrollBy(0, this.layout.height, true);
|
||||
// }
|
||||
|
||||
this.q.enqueue(function() {
|
||||
this.check();
|
||||
}.bind(this));
|
||||
}
|
||||
|
||||
prev(){
|
||||
if(this.settings.axis === "horizontal") {
|
||||
this.scrollBy(-this.layout.delta, 0, true);
|
||||
|
||||
let dir = this.settings.direction;
|
||||
let delta = this.layout.props.name === "pre-paginated" &&
|
||||
this.layout.props.spread ? this.layout.props.delta * 2 : this.layout.props.delta;
|
||||
|
||||
if(!this.views.length) return;
|
||||
|
||||
if(this.isPaginated && this.settings.axis === "horizontal") {
|
||||
|
||||
this.scrollBy(-delta, 0, true);
|
||||
|
||||
} else {
|
||||
|
||||
this.scrollBy(0, -this.layout.height, true);
|
||||
|
||||
}
|
||||
|
||||
this.q.enqueue(function() {
|
||||
|
|
@ -544,24 +597,30 @@ class ContinuousViewManager extends DefaultViewManager {
|
|||
}.bind(this));
|
||||
}
|
||||
|
||||
|
||||
updateAxis(axis){
|
||||
|
||||
if (!this.isPaginated) {
|
||||
axis = "vertical";
|
||||
}
|
||||
|
||||
updateAxis(axis, preventUpdate){
|
||||
this.settings.axis = axis;
|
||||
|
||||
this.stage && this.stage.axis(axis);
|
||||
|
||||
this.viewSettings.axis = axis;
|
||||
|
||||
if (!this.isPaginated) {
|
||||
axis = "vertical";
|
||||
}
|
||||
|
||||
if (axis === "vertical") {
|
||||
this.layout.spread("none");
|
||||
}
|
||||
|
||||
if (axis === "vertical") {
|
||||
this.settings.infinite = true;
|
||||
} else {
|
||||
this.settings.infinite = false;
|
||||
}
|
||||
|
||||
if (!preventUpdate) {
|
||||
this.updateLayout();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -241,7 +241,7 @@ class DefaultViewManager {
|
|||
if (this.settings.direction === "ltr") {
|
||||
this.scrollTo(offset.left, offset.top, true);
|
||||
} else {
|
||||
let width = view.width();
|
||||
let width = visible.width();
|
||||
this.scrollTo(offset.left + width, offset.top, true);
|
||||
}
|
||||
|
||||
|
|
@ -414,7 +414,7 @@ class DefaultViewManager {
|
|||
left = this.container.scrollLeft;
|
||||
|
||||
if(left > 0) {
|
||||
this.scrollBy(-this.layout.delta, 0, true);
|
||||
this.scrollBy(this.layout.delta, 0, true);
|
||||
} else {
|
||||
next = this.views.last().section.next();
|
||||
}
|
||||
|
|
@ -426,7 +426,7 @@ class DefaultViewManager {
|
|||
let top = this.container.scrollTop + this.container.offsetHeight;
|
||||
|
||||
if(top < this.container.scrollHeight) {
|
||||
this.scrollBy(0, this.layout.height + this.layout.gap / 2, true);
|
||||
this.scrollBy(0, this.layout.height, true);
|
||||
} else {
|
||||
next = this.views.last().section.next();
|
||||
}
|
||||
|
|
@ -484,7 +484,7 @@ class DefaultViewManager {
|
|||
left = this.container.scrollLeft + this.container.offsetWidth + this.layout.delta;
|
||||
|
||||
if(left <= this.container.scrollWidth) {
|
||||
this.scrollBy(this.layout.delta, 0, true);
|
||||
this.scrollBy(-this.layout.delta, 0, true);
|
||||
} else {
|
||||
prev = this.views.first().section.prev();
|
||||
}
|
||||
|
|
@ -496,7 +496,7 @@ class DefaultViewManager {
|
|||
let top = this.container.scrollTop;
|
||||
|
||||
if(top > 0) {
|
||||
this.scrollBy(0, -(this.layout.height + this.layout.gap / 2), true);
|
||||
this.scrollBy(0, -(this.layout.height), true);
|
||||
} else {
|
||||
prev = this.views.first().section.prev();
|
||||
}
|
||||
|
|
@ -731,7 +731,7 @@ class DefaultViewManager {
|
|||
}
|
||||
|
||||
if(!this.fullsize) {
|
||||
if(x) this.container.scrollLeft += x;
|
||||
if(x) this.container.scrollLeft += x * dir;
|
||||
if(y) this.container.scrollTop += y;
|
||||
} else {
|
||||
window.scrollBy(x * dir, y * dir);
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ class IframeView {
|
|||
constructor(section, options) {
|
||||
this.settings = extend({
|
||||
ignoreClass : "",
|
||||
axis: "vertical",
|
||||
axis: options.layout && options.layout.props.flow === "scrolled" ? "vertical" : "horizontal",
|
||||
direction: undefined,
|
||||
width: 0,
|
||||
height: 0,
|
||||
|
|
@ -154,6 +154,7 @@ class IframeView {
|
|||
// find and report the writingMode axis
|
||||
let writingMode = this.contents.writingMode();
|
||||
let axis = (writingMode.indexOf("vertical") === 0) ? "vertical" : "horizontal";
|
||||
|
||||
this.setAxis(axis);
|
||||
this.emit(EVENTS.VIEWS.AXIS, axis);
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue