Skip to content

Commit

Permalink
Take axis and writingModes into account when calculating when to add …
Browse files Browse the repository at this point in the history 
…new views

Remove debugging logs
  • Loading branch information
@fchasen
fchasen committed Jun 27, 2020
1 parent bb61a92 commit 9f5ab17
Show file tree
Hide file tree
Showing 5 changed files with 90 additions and 76 deletions.
125 changes: 57 additions & 68 deletions src/managers/continuous/index.js
View file
Expand Up @@ -14,6 +14,7 @@ class ContinuousViewManager extends DefaultViewManager {
infinite: true,
overflow: undefined,
axis: undefined,
writingMode: undefined,
flow: "scrolled",
offset: 500,
offsetDelta: 250,
Expand Down Expand Up @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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){
Expand All @@ -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)
Expand All @@ -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);
}
Expand Down Expand Up @@ -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();
Expand All @@ -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);
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand All @@ -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);
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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, {
Expand All @@ -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;

Expand All @@ -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;

Expand All @@ -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();
Expand Down
23 changes: 18 additions & 5 deletions src/managers/default/index.js
View file
Expand Up @@ -23,6 +23,7 @@ class DefaultViewManager {
width: undefined,
height: undefined,
axis: undefined,
writingMode: undefined,
flow: "scrolled",
ignoreClass: "",
fullsize: undefined
Expand Down Expand Up @@ -359,6 +360,10 @@ class DefaultViewManager {
this.updateAxis(axis);
});

view.on(EVENTS.VIEWS.WRITING_MODE, (mode) => {
this.updateWritingMode(mode);
});

return view.display(this.request);
}

Expand All @@ -373,6 +378,10 @@ class DefaultViewManager {
this.updateAxis(axis);
});

view.on(EVENTS.VIEWS.WRITING_MODE, (mode) => {
this.updateWritingMode(mode);
});

return view.display(this.request);
}

Expand All @@ -392,6 +401,10 @@ class DefaultViewManager {
this.updateAxis(axis);
});

view.on(EVENTS.VIEWS.WRITING_MODE, (mode) => {
this.updateWritingMode(mode);
});

return view.display(this.request);
}

Expand Down Expand Up @@ -916,7 +929,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"}]);

Expand Down Expand Up @@ -947,11 +960,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;
Expand Down
2 changes: 1 addition & 1 deletion src/managers/helpers/views.js
View file
Expand Up @@ -80,7 +80,7 @@ class Views {
if(view.displayed){
view.destroy();
}

if(this.container){
this.container.removeChild(view.element);
}
Expand Down
13 changes: 12 additions & 1 deletion src/managers/views/iframe.js
View file
Expand Up @@ -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);
Expand Down Expand Up @@ -477,6 +483,11 @@ class IframeView {

}

setWritingMode(mode) {
// this.element.style.writingMode = writingMode;
this.writingMode = mode;
}

addListeners() {
//TODO: Add content listeners for expanding
}
Expand Down
3 changes: 2 additions & 1 deletion src/utils/constants.js
View file
Expand Up @@ -27,7 +27,8 @@ export const EVENTS = {
REMOVED : "removed",
},
VIEWS : {
AXIS : "axis",
AXIS: "axis",
WRITING_MODE: "writingMode",
LOAD_ERROR : "loaderror",
RENDERED : "rendered",
RESIZED : "resized",
Expand Down

0 comments on commit 9f5ab17

Please sign in to comment.