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

3
examples/scrolled.html
View file

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

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

@ -556,7 +556,7 @@ class ContinuousViewManager extends DefaultViewManager {
this.snapper = undefined; this.snapper = undefined;
} }
super.updateFlow(flow); super.updateFlow(flow, "scroll");
if (this.rendered && this.isPaginated && this.settings.snap) { if (this.rendered && this.isPaginated && this.settings.snap) {
this.snapper = new Snap(this, this.settings.snap && (typeof this.settings.snap === "object") && 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"); let isPaginated = (flow === "paginated" || flow === "auto");
this.isPaginated = isPaginated; this.isPaginated = isPaginated;
@ -911,7 +911,7 @@ class DefaultViewManager {
this.viewSettings.flow = flow; this.viewSettings.flow = flow;
if (!this.settings.overflow) { if (!this.settings.overflow) {
this.overflow = isPaginated ? "hidden" : "auto"; this.overflow = isPaginated ? "hidden" : defaultScrolledOverflow;
} else { } else {
this.overflow = this.settings.overflow; this.overflow = this.settings.overflow;
} }

34
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' import throttle from 'lodash/throttle'
class Stage { class Stage {
@ -25,6 +25,8 @@ class Stage {
let axis = options.axis || "vertical"; let axis = options.axis || "vertical";
let direction = options.direction; let direction = options.direction;
extend(this.settings, options);
if(options.height && isNumber(options.height)) { if(options.height && isNumber(options.height)) {
height = options.height + "px"; height = options.height + "px";
} }
@ -62,7 +64,15 @@ class Stage {
} }
if (overflow) { 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) { if (direction) {
@ -187,18 +197,13 @@ class Stage {
} }
if(!isNumber(width)) { if(!isNumber(width)) {
bounds = this.container.getBoundingClientRect(); width = this.container.clientWidth;
width = Math.floor(bounds.width);
//height = bounds.height;
} }
if(!isNumber(height)) { if(!isNumber(height)) {
bounds = bounds || this.container.getBoundingClientRect(); height = this.container.clientHeight;
//width = bounds.width;
height = bounds.height;
} }
this.containerStyles = window.getComputedStyle(this.container); this.containerStyles = window.getComputedStyle(this.container);
this.containerPadding = { this.containerPadding = {
@ -293,6 +298,7 @@ class Stage {
} else { } else {
this.container.style.display = "block"; this.container.style.display = "block";
} }
this.settings.axis = axis;
} }
// orientation(orientation) { // orientation(orientation) {
@ -314,13 +320,23 @@ class Stage {
if (this.settings.fullsize) { if (this.settings.fullsize) {
document.body.style["direction"] = dir; document.body.style["direction"] = dir;
} }
this.settings.dir = dir;
} }
overflow(overflow) { overflow(overflow) {
if (this.container) { if (this.container) {
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.container.style["overflow"] = overflow;
} }
} }
this.settings.overflow = overflow;
}
destroy() { destroy() {
var base; var base;