diff --git a/src/managers/continuous/index.js b/src/managers/continuous/index.js index 0f9f945b9..9ab1d59fe 100644 --- a/src/managers/continuous/index.js +++ b/src/managers/continuous/index.js @@ -14,6 +14,7 @@ class ContinuousViewManager extends DefaultViewManager { infinite: true, overflow: undefined, axis: undefined, + writingMode: undefined, flow: "scrolled", offset: 500, offsetDelta: 250, @@ -115,6 +116,10 @@ class ContinuousViewManager extends DefaultViewManager { this.updateAxis(axis); }); + view.on(EVENTS.VIEWS.WRITING_MODE, (mode) => { + this.updateWritingMode(mode); + }); + // view.on(EVENTS.VIEWS.SHOWN, this.afterDisplayed.bind(this)); view.onDisplayed = this.afterDisplayed.bind(this); view.onResize = this.afterResized.bind(this); @@ -133,6 +138,10 @@ class ContinuousViewManager extends DefaultViewManager { this.updateAxis(axis); }); + view.on(EVENTS.VIEWS.WRITING_MODE, (mode) => { + this.updateWritingMode(mode); + }); + this.views.append(view); view.onDisplayed = this.afterDisplayed.bind(this); @@ -152,6 +161,10 @@ class ContinuousViewManager extends DefaultViewManager { this.updateAxis(axis); }); + view.on(EVENTS.VIEWS.WRITING_MODE, (mode) => { + this.updateWritingMode(mode); + }); + this.views.prepend(view); view.onDisplayed = this.afterDisplayed.bind(this); @@ -163,10 +176,8 @@ class ContinuousViewManager extends DefaultViewManager { if(this.settings.axis === "vertical") { this.scrollBy(0, bounds.heightDelta, true); } else { - console.log("counter", bounds.widthDelta) this.scrollBy(bounds.widthDelta, 0, true); } - } update(_offset){ @@ -186,7 +197,7 @@ class ContinuousViewManager extends DefaultViewManager { isVisible = this.isVisible(view, offset, offset, container); if(isVisible === true) { - // console.log("visible " + view.index); + // console.log("visible " + view.index, view.displayed); if (!view.displayed) { let displayed = view.display(this.request) @@ -202,10 +213,11 @@ class ContinuousViewManager extends DefaultViewManager { visible.push(view); } else { this.q.enqueue(view.destroy.bind(view)); - // console.log("hidden " + view.index); + // console.log("hidden " + view.index, view.displayed); clearTimeout(this.trimTimeout); this.trimTimeout = setTimeout(function(){ + console.log("trim"); this.q.enqueue(this.trim.bind(this)); }.bind(this), 250); } @@ -241,12 +253,29 @@ class ContinuousViewManager extends DefaultViewManager { var bounds = this._bounds; // bounds saved this until resize + let offset = horizontal ? this.scrollLeft : this.scrollTop; + let visibleLength = horizontal ? Math.floor(bounds.width) : bounds.height; + let contentLength = horizontal ? this.container.scrollWidth : this.container.scrollHeight; + let writingMode = (this.writingMode && this.writingMode.indexOf("vertical") === 0) ? "vertical" : "horizontal"; + let rtlScrollType = this.settings.rtlScrollType; let rtl = this.settings.direction === "rtl"; - let dir = horizontal && rtl ? -1 : 1; //RTL reverses scrollTop - var offset = horizontal ? this.scrollLeft : this.scrollTop * dir; - var visibleLength = horizontal ? Math.floor(bounds.width) : bounds.height; - var contentLength = horizontal ? this.container.scrollWidth : this.container.scrollHeight; + if (!this.settings.fullsize) { + // Scroll offset starts at width of element + if (rtl && rtlScrollType === "default" && writingMode === "horizontal") { + offset = contentLength - visibleLength - offset; + } + // Scroll offset starts at 0 and goes negative + if (rtl && rtlScrollType === "negative" && writingMode === "horizontal") { + offset = offset * -1; + } + } else { + // Scroll offset starts at 0 and goes negative + if ((horizontal && rtl && rtlScrollType === "negative") || + (!horizontal && rtl && rtlScrollType === "default")) { + offset = offset * -1; + } + } let prepend = () => { let first = this.views.first(); @@ -266,36 +295,18 @@ class ContinuousViewManager extends DefaultViewManager { } }; - //Horizontal negative scrolling - if (horizontal && rtl && this.settings.rtlScrollType === "negative") { - if (offset - delta <= (-1 * contentLength)) { - append(); - } - - if (offset + delta > 0) { - prepend(); - } + let end = offset + visibleLength + delta; + let start = offset - delta; + if (end >= contentLength) { + append(); } - //default scrolling - else { - if (offset + visibleLength + delta >= contentLength) { - if (horizontal && rtl) { - prepend(); - } else { - append(); - } - } - - if (offset - delta < 0) { - if (horizontal && rtl) { - append(); - } else { - prepend(); - } - } + + if (start < 0) { + prepend(); } + let promises = newViews.map((view) => { return view.display(this.request); @@ -363,18 +374,15 @@ class ContinuousViewManager extends DefaultViewManager { var bounds = view.bounds(); this.views.remove(view); - + if(above) { - if(this.settings.axis === "vertical") { + if (this.settings.axis === "vertical") { this.scrollTo(0, prevTop - bounds.height, true); } else { if(this.settings.direction === 'rtl') { - if (this.settings.rtlScrollType === "default") { - console.log("erase 1", window.scrollX, prevLeft, bounds.width); - this.scrollTo(prevLeft, 0, true); - } - else { - console.log("erase 2", prevLeft + Math.floor(bounds.width)); + if (!this.settings.fullsize) { + this.scrollTo(prevLeft, 0, true); + } else { this.scrollTo(prevLeft + Math.floor(bounds.width), 0, true); } } else { @@ -405,13 +413,7 @@ class ContinuousViewManager extends DefaultViewManager { this.tick = requestAnimationFrame; - if(!this.settings.fullsize) { - this.prevScrollTop = this.container.scrollTop; - this.prevScrollLeft = this.container.scrollLeft; - } else { - this.prevScrollTop = window.scrollY; - this.prevScrollLeft = window.scrollX; - } + let dir = this.settings.direction === "rtl" && this.settings.rtlScrollType === "default" ? -1 : 1; this.scrollDeltaVert = 0; this.scrollDeltaHorz = 0; @@ -422,8 +424,8 @@ class ContinuousViewManager extends DefaultViewManager { this.scrollLeft = this.container.scrollLeft; } else { scroller = window; - this.scrollTop = window.scrollY; - this.scrollLeft = window.scrollX; + this.scrollTop = window.scrollY * dir; + this.scrollLeft = window.scrollX * dir; } this._onScroll = this.onScroll.bind(this); @@ -451,7 +453,7 @@ class ContinuousViewManager extends DefaultViewManager { onScroll(){ let scrollTop; let scrollLeft; - let dir = this.settings.direction === "rtl" ? -1 : 1; + let dir = this.settings.direction === "rtl" && this.settings.rtlScrollType === "default" ? -1 : 1; if(!this.settings.fullsize) { scrollTop = this.container.scrollTop; @@ -493,7 +495,7 @@ class ContinuousViewManager extends DefaultViewManager { scrolled() { this.q.enqueue(function() { - this.check(); + return this.check(); }.bind(this)); this.emit(EVENTS.MANAGERS.SCROLL, { @@ -519,7 +521,6 @@ class ContinuousViewManager extends DefaultViewManager { next(){ - let dir = this.settings.direction; let delta = this.layout.props.name === "pre-paginated" && this.layout.props.spread ? this.layout.props.delta * 2 : this.layout.props.delta; @@ -536,13 +537,12 @@ class ContinuousViewManager extends DefaultViewManager { } this.q.enqueue(function() { - this.check(); + return this.check(); }.bind(this)); } prev(){ - let dir = this.settings.direction; let delta = this.layout.props.name === "pre-paginated" && this.layout.props.spread ? this.layout.props.delta * 2 : this.layout.props.delta; @@ -559,21 +559,10 @@ class ContinuousViewManager extends DefaultViewManager { } this.q.enqueue(function() { - this.check(); + return this.check(); }.bind(this)); } - // updateAxis(axis, forceUpdate){ - // - // super.updateAxis(axis, forceUpdate); - // - // if (axis === "vertical") { - // this.settings.infinite = true; - // } else { - // this.settings.infinite = false; - // } - // } - updateFlow(flow){ if (this.rendered && this.snapper) { this.snapper.destroy(); diff --git a/src/managers/default/index.js b/src/managers/default/index.js index 857af70cc..feffa9afc 100644 --- a/src/managers/default/index.js +++ b/src/managers/default/index.js @@ -23,6 +23,7 @@ class DefaultViewManager { width: undefined, height: undefined, axis: undefined, + writingMode: undefined, flow: "scrolled", ignoreClass: "", fullsize: undefined @@ -359,6 +360,10 @@ class DefaultViewManager { this.updateAxis(axis); }); + view.on(EVENTS.VIEWS.WRITING_MODE, (mode) => { + this.updateWritingMode(mode); + }); + return view.display(this.request); } @@ -373,6 +378,10 @@ class DefaultViewManager { this.updateAxis(axis); }); + view.on(EVENTS.VIEWS.WRITING_MODE, (mode) => { + this.updateWritingMode(mode); + }); + return view.display(this.request); } @@ -392,6 +401,10 @@ class DefaultViewManager { this.updateAxis(axis); }); + view.on(EVENTS.VIEWS.WRITING_MODE, (mode) => { + this.updateWritingMode(mode); + }); + return view.display(this.request); } @@ -819,7 +832,7 @@ class DefaultViewManager { if(silent) { this.ignore = true; } - + console.log("scrollBy", x * dir, y); if(!this.settings.fullsize) { if(x) this.container.scrollLeft += x * dir; if(y) this.container.scrollTop += y; @@ -834,6 +847,8 @@ class DefaultViewManager { this.ignore = true; } + console.log("scrollTo", x, y); + if(!this.settings.fullsize) { this.container.scrollLeft = x; this.container.scrollTop = y; @@ -916,7 +931,7 @@ class DefaultViewManager { ); // Set the look ahead offset for what is visible - this.settings.offset = this.layout.delta; + this.settings.offset = this.layout.delta / this.layout.divisor; // this.stage.addStyleRules("iframe", [{"margin-right" : this.layout.gap + "px"}]); @@ -947,11 +962,11 @@ class DefaultViewManager { } - updateAxis(axis, forceUpdate){ + updateWritingMode(mode) { + this.writingMode = mode; + } - if (!this.isPaginated) { - // axis = "vertical"; - } + updateAxis(axis, forceUpdate){ if (!forceUpdate && axis === this.settings.axis) { return; diff --git a/src/managers/helpers/views.js b/src/managers/helpers/views.js index dc0a465db..4368da2c2 100644 --- a/src/managers/helpers/views.js +++ b/src/managers/helpers/views.js @@ -80,7 +80,7 @@ class Views { if(view.displayed){ view.destroy(); } - + if(this.container){ this.container.removeChild(view.element); } diff --git a/src/managers/views/iframe.js b/src/managers/views/iframe.js index c0fe01013..5259f5040 100644 --- a/src/managers/views/iframe.js +++ b/src/managers/views/iframe.js @@ -159,10 +159,16 @@ class IframeView { axis = (writingMode.indexOf("vertical") === 0) ? "vertical" : "horizontal"; } - // this.element.style.writingMode = writingMode; + if (writingMode.indexOf("vertical") === 0 && this.settings.flow === "paginated") { + this.layout.delta = this.layout.height; + } + this.setAxis(axis); this.emit(EVENTS.VIEWS.AXIS, axis); + this.setWritingMode(writingMode); + this.emit(EVENTS.VIEWS.WRITING_MODE, writingMode); + // apply the layout function to the contents this.layout.format(this.contents, this.section, this.axis); @@ -354,7 +360,7 @@ class IframeView { }); this.onResize(this, size); - + console.log("resized", size); this.emit(EVENTS.VIEWS.RESIZED, size); this.prevBounds = size; @@ -477,6 +483,11 @@ class IframeView { } + setWritingMode(mode) { + // this.element.style.writingMode = writingMode; + this.writingMode = mode; + } + addListeners() { //TODO: Add content listeners for expanding } @@ -497,7 +508,12 @@ class IframeView { this.onDisplayed(this); this.displayed = true; - displayed.resolve(this); + requestAnimationFrame(() => { + console.log("displayed - done"); + + displayed.resolve(this); + }) + // displayed.resolve(this); }.bind(this), function (err) { displayed.reject(err, this); diff --git a/src/utils/constants.js b/src/utils/constants.js index a4aadedb3..fd5997ba2 100644 --- a/src/utils/constants.js +++ b/src/utils/constants.js @@ -27,7 +27,8 @@ export const EVENTS = { REMOVED : "removed", }, VIEWS : { - AXIS : "axis", + AXIS: "axis", + WRITING_MODE: "writingMode", LOAD_ERROR : "loaderror", RENDERED : "rendered", RESIZED : "resized",