Merge pull request futurepress#883 from futurepress/overflow_scroll

Update oveflow scroll
JFTavares · Dec 8, 2018 · c1739e6 · c1739e6
2 parents f314d06 + 48b564e
commit c1739e6
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 25 deletions.
diff --git a/examples/continuous-scrolled.html b/examples/continuous-scrolled.html
@@ -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)");
 

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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() {