yetangitu/epub.js
1
0
Fork 0
mirror of https://github.com/futurepress/epub.js.git synced 2025-10-05 15:32:55 +02:00
Code Issues Releases Wiki Activity

Update stage to use clientWidth and height, overflow scroll adjusts only a single axis

Browse source
This commit is contained in:
Fred Chasen 2018-12-07 12:23:59 -08:00
parent f314d06387
commit 48b564ee31
6 changed files with 45 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

18
examples/continuous-scrolled.html
View file

@ -12,9 +12,9 @@
<style type="text/css">
.epub-container {
min-width: 320px;
margin: 0 auto;
position: relative;
/* min-width: 320px; */
/* margin: 0 auto; */
/* position: relative; */
}
.epub-container .epub-view > iframe {
@ -24,6 +24,13 @@
padding: 20px;*/
}
#viewer {
width: 600px;
height: 100vh;
/* overflow: auto; */
margin: 0 auto;
}
</style>
</head>
<body>
@ -33,10 +40,11 @@
var currentSectionIndex = 8;
// Load the opf
var book = ePub("https://s3.amazonaws.com/epubjs/books/moby-dick/OPS/package.opf");
var rendition = book.renderTo(document.body, {
var rendition = book.renderTo("viewer", {
manager: "continuous",
flow: "scrolled",
width: "60%"
width: "100%",
height: "100%"
});
var displayed = rendition.display("epubcfi(/6/14[xchapter_001]!4/2/24/2[c001p0011]/1:799)");

7
examples/examples.css
View file

@ -46,14 +46,9 @@ body {
margin: 0 auto;
position: relative;
background: url('ajax-loader.gif') center center no-repeat;
}
#viewer.scrolled .epub-container {
background: white;
box-shadow: 0 0 4px #ccc;
margin: 10px;
padding: 20px;
background: white;
}
#viewer.scrolled .epub-view > iframe {

3
examples/scrolled.html
View file

@ -20,7 +20,8 @@
// Load the opf
var book = ePub("https://s3.amazonaws.com/epubjs/books/alice/OPS/package.opf");
var rendition = book.renderTo("viewer", {
flow: "scrolled-doc"
flow: "scrolled-doc",
width: "100%"
});
rendition.display("chapter_008.xhtml");

2
src/managers/continuous/index.js
View file

@ -556,7 +556,7 @@ class ContinuousViewManager extends DefaultViewManager {
this.snapper = undefined;
}
super.updateFlow(flow);
super.updateFlow(flow, "scroll");
if (this.rendered && this.isPaginated && this.settings.snap) {
this.snapper = new Snap(this, this.settings.snap && (typeof this.settings.snap === "object") && this.settings.snap);

4
src/managers/default/index.js
View file

@ -895,7 +895,7 @@ class DefaultViewManager {
}
}
updateFlow(flow){
updateFlow(flow, defaultScrolledOverflow="auto"){
let isPaginated = (flow === "paginated" || flow === "auto");
this.isPaginated = isPaginated;
@ -911,7 +911,7 @@ class DefaultViewManager {
this.viewSettings.flow = flow;
if (!this.settings.overflow) {
this.overflow = isPaginated ? "hidden" : "auto";
this.overflow = isPaginated ? "hidden" : defaultScrolledOverflow;
} else {
this.overflow = this.settings.overflow;
}

36
src/managers/helpers/stage.js
View file

@ -1,4 +1,4 @@
import {uuid, isNumber, isElement, windowBounds} from "../../utils/core";
import {uuid, isNumber, isElement, windowBounds, extend} from "../../utils/core";
import throttle from 'lodash/throttle'
class Stage {
@ -25,6 +25,8 @@ class Stage {
let axis = options.axis || "vertical";
let direction = options.direction;
extend(this.settings, options);
if(options.height && isNumber(options.height)) {
height = options.height + "px";
}
@ -62,7 +64,15 @@ class Stage {
}
if (overflow) {
container.style.overflow = overflow;
if (overflow === "scroll" && axis === "vertical") {
container.style["overflow-y"] = overflow;
container.style["overflow-x"] = "hidden";
} else if (overflow === "scroll" && axis === "horizontal") {
container.style["overflow-y"] = "hidden";
container.style["overflow-x"] = overflow;
} else {
container.style["overflow"] = overflow;
}
}
if (direction) {
@ -187,18 +197,13 @@ class Stage {
}
if(!isNumber(width)) {
bounds = this.container.getBoundingClientRect();
width = Math.floor(bounds.width);
//height = bounds.height;
width = this.container.clientWidth;
}
if(!isNumber(height)) {
bounds = bounds || this.container.getBoundingClientRect();
//width = bounds.width;
height = bounds.height;
height = this.container.clientHeight;
}
this.containerStyles = window.getComputedStyle(this.container);
this.containerPadding = {
@ -293,6 +298,7 @@ class Stage {
} else {
this.container.style.display = "block";
}
this.settings.axis = axis;
}
// orientation(orientation) {
@ -314,12 +320,22 @@ class Stage {
if (this.settings.fullsize) {
document.body.style["direction"] = dir;
}
this.settings.dir = dir;
}
overflow(overflow) {
if (this.container) {
this.container.style["overflow"] = overflow;
if (overflow === "scroll" && this.settings.axis === "vertical") {
this.container.style["overflow-y"] = overflow;
this.container.style["overflow-x"] = "hidden";
} else if (overflow === "scroll" && this.settings.axis === "horizontal") {
this.container.style["overflow-y"] = "hidden";
this.container.style["overflow-x"] = overflow;
} else {
this.container.style["overflow"] = overflow;
}
}
this.settings.overflow = overflow;
}
destroy() {