From 48b564ee3170ad3f3215d9ff80770c4dc205b40a Mon Sep 17 00:00:00 2001 From: Fred Chasen Date: Fri, 7 Dec 2018 12:23:59 -0800 Subject: [PATCH] Update stage to use clientWidth and height, overflow scroll adjusts only a single axis --- examples/continuous-scrolled.html | 18 +++++++++++----- examples/examples.css | 7 +----- examples/scrolled.html | 3 ++- src/managers/continuous/index.js | 2 +- src/managers/default/index.js | 4 ++-- src/managers/helpers/stage.js | 36 ++++++++++++++++++++++--------- 6 files changed, 45 insertions(+), 25 deletions(-) diff --git a/examples/continuous-scrolled.html b/examples/continuous-scrolled.html index 518abcd6a..42333ba5d 100644 --- a/examples/continuous-scrolled.html +++ b/examples/continuous-scrolled.html @@ -12,9 +12,9 @@ @@ -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)"); diff --git a/examples/examples.css b/examples/examples.css index 3762ae068..3d709625a 100644 --- a/examples/examples.css +++ b/examples/examples.css @@ -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 { diff --git a/examples/scrolled.html b/examples/scrolled.html index 419f3c0a8..5f044c0da 100644 --- a/examples/scrolled.html +++ b/examples/scrolled.html @@ -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"); diff --git a/src/managers/continuous/index.js b/src/managers/continuous/index.js index eed22a421..7f6406ed0 100644 --- a/src/managers/continuous/index.js +++ b/src/managers/continuous/index.js @@ -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); diff --git a/src/managers/default/index.js b/src/managers/default/index.js index 35469e64d..f5ddf96cb 100644 --- a/src/managers/default/index.js +++ b/src/managers/default/index.js @@ -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; } diff --git a/src/managers/helpers/stage.js b/src/managers/helpers/stage.js index a7421cb2c..d0f67e65d 100644 --- a/src/managers/helpers/stage.js +++ b/src/managers/helpers/stage.js @@ -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() {