diff --git a/src/contents.js b/src/contents.js index 0f888ea..a15a638 100644 --- a/src/contents.js +++ b/src/contents.js @@ -779,7 +779,15 @@ class Contents { var COLUMN_WIDTH = prefixed("column-width"); var COLUMN_FILL = prefixed("column-fill"); - this.width("100%"); + var isVertical = this.writingMode().indexOf("vertical") === 0; + + if (isVertical) { + this.width(width); + } else { + this.width("100%"); + } + + // this.width("100%"); this.height(height); // Deal with Mobile trying to scale to viewport @@ -850,6 +858,16 @@ class Contents { }); } + writingMode(mode) { + let WRITING_MODE = prefixed("writing-mode"); + + if (mode && this.documentElement) { + this.documentElement.style[WRITING_MODE] = mode; + } + + return this.window.getComputedStyle(this.documentElement)[WRITING_MODE] || ''; + } + destroy() { // Stop observing if(this.observer) { diff --git a/src/managers/continuous/index.js b/src/managers/continuous/index.js index b003ca9..11d3f1d 100644 --- a/src/managers/continuous/index.js +++ b/src/managers/continuous/index.js @@ -12,6 +12,7 @@ class ContinuousViewManager extends DefaultViewManager { infinite: true, overflow: undefined, axis: "vertical", + flow: "scrolled", offset: 500, offsetDelta: 250, width: undefined, @@ -28,6 +29,7 @@ class ContinuousViewManager extends DefaultViewManager { this.viewSettings = { ignoreClass: this.settings.ignoreClass, axis: this.settings.axis, + flow: this.settings.flow, layout: this.layout, width: 0, height: 0 @@ -69,7 +71,7 @@ class ContinuousViewManager extends DefaultViewManager { var offsetX = 0, offsetY = 0; - if(this.settings.axis === "vertical") { + if(!this.isPaginated) { distY = offset.top; offsetY = offset.top+this.settings.offset; } else { @@ -157,6 +159,10 @@ class ContinuousViewManager extends DefaultViewManager { view.expanded = true; }); + view.on("axis", (axis) => { + this.updateAxis(axis); + }); + // view.on("shown", this.afterDisplayed.bind(this)); view.onDisplayed = this.afterDisplayed.bind(this); view.onResize = this.afterResized.bind(this); @@ -171,6 +177,10 @@ class ContinuousViewManager extends DefaultViewManager { view.expanded = true; }); + view.on("axis", (axis) => { + this.updateAxis(axis); + }); + this.views.append(view); view.onDisplayed = this.afterDisplayed.bind(this); @@ -186,6 +196,10 @@ class ContinuousViewManager extends DefaultViewManager { view.expanded = true; }); + view.on("axis", (axis) => { + this.updateAxis(axis); + }); + this.views.prepend(view); view.onDisplayed = this.afterDisplayed.bind(this); @@ -269,7 +283,9 @@ class ContinuousViewManager extends DefaultViewManager { var bounds = this._bounds; // bounds saved this until resize - var offset = horizontal ? this.scrollLeft : this.scrollTop; + let dir = this.settings.direction === "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; @@ -404,7 +420,7 @@ class ContinuousViewManager extends DefaultViewManager { } scroller.addEventListener("scroll", this.onScroll.bind(this)); - this._scrolled = debounce(this.scrolled.bind(this), 60); + this._scrolled = debounce(this.scrolled.bind(this), 30); // this.tick.call(window, this.onScroll.bind(this)); this.didScroll = false; @@ -518,8 +534,12 @@ class ContinuousViewManager extends DefaultViewManager { }.bind(this)); } - updateFlow(flow){ - var axis = (flow === "paginated") ? "horizontal" : "vertical"; + + updateAxis(axis){ + + if (!this.isPaginated) { + axis = "vertical"; + } this.settings.axis = axis; @@ -527,25 +547,13 @@ class ContinuousViewManager extends DefaultViewManager { this.viewSettings.axis = axis; - if (!this.settings.overflow) { - this.overflow = (flow === "paginated") ? "hidden" : "auto"; - } else { - this.overflow = this.settings.overflow; - } - - // this.views.forEach(function(view){ - // view.setAxis(axis); - // }); - - if (this.settings.axis === "vertical") { + if (axis === "vertical") { this.settings.infinite = true; } else { this.settings.infinite = false; } - - this.updateLayout(); - } + } export default ContinuousViewManager; diff --git a/src/managers/default/index.js b/src/managers/default/index.js index bec4d62..66f62cd 100644 --- a/src/managers/default/index.js +++ b/src/managers/default/index.js @@ -19,9 +19,8 @@ class DefaultViewManager { hidden: false, width: undefined, height: undefined, - // globalLayoutProperties : { layout: "reflowable", spread: "auto", orientation: "auto"}, - // layout: null, axis: "vertical", + flow: "scrolled", ignoreClass: "" }); @@ -30,6 +29,7 @@ class DefaultViewManager { this.viewSettings = { ignoreClass: this.settings.ignoreClass, axis: this.settings.axis, + flow: this.settings.flow, layout: this.layout, method: this.settings.method, // srcdoc, blobUrl, write width: 0, @@ -303,7 +303,7 @@ class DefaultViewManager { var distX = 0, distY = 0; - if(this.settings.axis === "vertical") { + if(!this.isPaginated) { distY = offset.top; } else { distX = Math.floor(offset.left / this.layout.delta) * this.layout.delta; @@ -324,6 +324,10 @@ class DefaultViewManager { view.onDisplayed = this.afterDisplayed.bind(this); view.onResize = this.afterResized.bind(this); + view.on("axis", (axis) => { + this.updateAxis(axis); + }); + return view.display(this.request); } @@ -335,6 +339,10 @@ class DefaultViewManager { view.onDisplayed = this.afterDisplayed.bind(this); view.onResize = this.afterResized.bind(this); + view.on("axis", (axis) => { + this.updateAxis(axis); + }); + return view.display(this.request); } @@ -350,6 +358,10 @@ class DefaultViewManager { view.onDisplayed = this.afterDisplayed.bind(this); view.onResize = this.afterResized.bind(this); + view.on("axis", (axis) => { + this.updateAxis(axis); + }); + return view.display(this.request); } @@ -380,11 +392,11 @@ class DefaultViewManager { if(!this.views.length) return; - if(this.settings.axis === "horizontal" && (!dir || dir === "ltr")) { + if(this.isPaginated && this.settings.axis === "horizontal" && (!dir || dir === "ltr")) { this.scrollLeft = this.container.scrollLeft; - left = this.container.scrollLeft + this.container.offsetWidth + this.layout.delta; // 450 off + left = this.container.scrollLeft + this.container.offsetWidth + this.layout.delta; if(left <= this.container.scrollWidth) { this.scrollBy(this.layout.delta, 0, true); @@ -393,7 +405,7 @@ class DefaultViewManager { } else { next = this.views.last().section.next(); } - } else if (this.settings.axis === "horizontal" && dir === "rtl") { + } else if (this.isPaginated && this.settings.axis === "horizontal" && dir === "rtl") { this.scrollLeft = this.container.scrollLeft; @@ -405,6 +417,20 @@ class DefaultViewManager { next = this.views.last().section.next(); } + } else if (this.isPaginated && this.settings.axis === "vertical") { + + this.scrollTop = this.container.scrollTop; + + let top = this.container.scrollTop + this.container.offsetHeight + this.layout.delta; + + if(top <= this.container.scrollHeight) { + this.scrollBy(0, this.layout.height + this.layout.gap / 2, true); + } else if ((left - this.layout.pageWidth) === this.container.scrollWidth) { + this.scrollTo(this.container.scrollWidth - this.layout.delta, 0, true); + } else { + next = this.views.last().section.next(); + } + } else { next = this.views.last().section.next(); } @@ -437,7 +463,7 @@ class DefaultViewManager { if(!this.views.length) return; - if(this.settings.axis === "horizontal" && (!dir || dir === "ltr")) { + if(this.isPaginated && this.settings.axis === "horizontal" && (!dir || dir === "ltr")) { this.scrollLeft = this.container.scrollLeft; @@ -449,7 +475,7 @@ class DefaultViewManager { prev = this.views.first().section.prev(); } - } else if (this.settings.axis === "horizontal" && dir === "rtl") { + } else if (this.isPaginated && this.settings.axis === "horizontal" && dir === "rtl") { this.scrollLeft = this.container.scrollLeft; @@ -463,6 +489,18 @@ class DefaultViewManager { prev = this.views.first().section.prev(); } + } else if (this.isPaginated && this.settings.axis === "vertical") { + + this.scrollTop = this.container.scrollTop; + + let top = this.container.scrollTop; + + if(top > 0) { + this.scrollBy(0, -(this.layout.height + this.layout.gap / 2), true); + } else { + prev = this.views.first().section.prev(); + } + } else { prev = this.views.first().section.prev(); @@ -483,7 +521,7 @@ class DefaultViewManager { } }.bind(this)) .then(function(){ - if(this.settings.axis === "horizontal") { + if(this.isPaginated) { if (this.settings.direction === "rtl") { this.scrollTo(0, 0, true); } else { @@ -517,7 +555,7 @@ class DefaultViewManager { currentLocation(){ - if (this.settings.axis === "vertical") { + if (!this.isPaginated) { this.location = this.scrolledLocation(); } else { this.location = this.paginatedLocation(); @@ -774,7 +812,7 @@ class DefaultViewManager { this._stageSize = this.stage.size(); - if(this.settings.axis === "vertical") { + if(!this.isPaginated) { this.layout.calculate(this._stageSize.width, this._stageSize.height); } else { this.layout.calculate( @@ -813,17 +851,32 @@ class DefaultViewManager { } - updateFlow(flow){ - var axis = (flow === "paginated") ? "horizontal" : "vertical"; - + updateAxis(axis){ this.settings.axis = axis; this.stage && this.stage.axis(axis); this.viewSettings.axis = axis; + } + + updateFlow(flow){ + // var axis = (flow === "paginated") ? "horizontal" : "vertical"; + let isPaginated = (flow === "paginated" || flow === "auto"); + + this.isPaginated = isPaginated; + + if (isPaginated) { + // this.updateAxis("horizontal"); + } else { + // this.updateAxis("vertical"); + } + + // this.stage && this.stage.axis(flow); + + this.viewSettings.flow = flow; if (!this.settings.overflow) { - this.overflow = (flow === "paginated") ? "hidden" : "auto"; + this.overflow = isPaginated ? "hidden" : "auto"; } else { this.overflow = this.settings.overflow; } diff --git a/src/managers/views/iframe.js b/src/managers/views/iframe.js index 1332f33..a287760 100644 --- a/src/managers/views/iframe.js +++ b/src/managers/views/iframe.js @@ -150,6 +150,13 @@ class IframeView { // apply the layout function to the contents this.settings.layout.format(this.contents); + // find and report the writingMode axis + let writingMode = this.contents.writingMode(); + let axis = (writingMode.indexOf("vertical") === 0) ? "vertical" : "horizontal"; + this.setAxis(axis); + this.emit("axis", axis); + + // Listen for events that require an expansion of the iframe this.addListeners(); @@ -195,6 +202,9 @@ class IframeView { } else { this.lock("width", width, height); } + + this.settings.width = width; + this.settings.height = height; } // Lock an axis to element dimensions, taking borders into account @@ -405,6 +415,7 @@ class IframeView { setAxis(axis) { this.settings.axis = axis; + this.size(); } addListeners() { diff --git a/src/rendition.js b/src/rendition.js index db0f650..9600e49 100644 --- a/src/rendition.js +++ b/src/rendition.js @@ -431,7 +431,7 @@ class Rendition { if ((this.settings.width === 0 || this.settings.width > 0) && (this.settings.height === 0 || this.settings.height > 0)) { - viewport = "width="+this.settings.width+", height="+this.settings.height+""; + // viewport = "width="+this.settings.width+", height="+this.settings.height+""; } properties = {