mirror of
https://github.com/futurepress/epub.js.git
synced 2025-10-03 14:59:18 +02:00
Take axis and writingModes into account when calculating when to add new views
Remove debugging logs remove trim log
This commit is contained in:
Fred Chasen
parent
bb61a92f27
commit
65c744c696
5 changed files with 89 additions and 76 deletions
|
|
@ -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,7 +213,7 @@ 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(){
|
||||
|
|
@ -241,12 +252,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,37 +294,19 @@ 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);
|
||||
});
|
||||
|
|
@ -365,16 +375,13 @@ class ContinuousViewManager extends DefaultViewManager {
|
|||
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);
|
||||
if (!this.settings.fullsize) {
|
||||
this.scrollTo(prevLeft, 0, true);
|
||||
}
|
||||
else {
|
||||
console.log("erase 2", prevLeft + Math.floor(bounds.width));
|
||||
} else {
|
||||
this.scrollTo(prevLeft + Math.floor(bounds.width), 0, true);
|
||||
}
|
||||
} else {
|
||||
|
|
@ -405,13 +412,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 +423,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 +452,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 +494,7 @@ class ContinuousViewManager extends DefaultViewManager {
|
|||
scrolled() {
|
||||
|
||||
this.q.enqueue(function() {
|
||||
this.check();
|
||||
return this.check();
|
||||
}.bind(this));
|
||||
|
||||
this.emit(EVENTS.MANAGERS.SCROLL, {
|
||||
|
|
@ -519,7 +520,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 +536,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 +558,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();
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
@ -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"}]);
|
||||
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
@ -477,6 +483,11 @@ class IframeView {
|
|||
|
||||
}
|
||||
|
||||
setWritingMode(mode) {
|
||||
// this.element.style.writingMode = writingMode;
|
||||
this.writingMode = mode;
|
||||
}
|
||||
|
||||
addListeners() {
|
||||
//TODO: Add content listeners for expanding
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,8 @@ export const EVENTS = {
|
|||
REMOVED : "removed",
|
||||
},
|
||||
VIEWS : {
|
||||
AXIS : "axis",
|
||||
AXIS: "axis",
|
||||
WRITING_MODE: "writingMode",
|
||||
LOAD_ERROR : "loaderror",
|
||||
RENDERED : "rendered",
|
||||
RESIZED : "resized",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue