Skip to content

Commit

Permalink
Merge pull request #1074 from futurepress/scrolled_axis
Browse files Browse the repository at this point in the history 
Updated scrolled display to work on vertical and horizontal axis
  • Loading branch information
@fchasen
fchasen committed Jul 1, 2020
2 parents 32cb9cf + fc71726 commit b5be551
Show file tree
Hide file tree
Showing 10 changed files with 190 additions and 115 deletions.
9 changes: 6 additions & 3 deletions examples/continuous-scrolled.html
View file
Expand Up @@ -37,16 +37,19 @@
<div id="viewer"></div>

<script>
var currentSectionIndex = 8;
var params = URLSearchParams && new URLSearchParams(document.location.search.substring(1));
var url = params && params.get("url") && decodeURIComponent(params.get("url"));
var currentSectionIndex = (params && params.get("loc")) ? params.get("loc") : undefined;

// Load the opf
var book = ePub("https://s3.amazonaws.com/epubjs/books/moby-dick/OPS/package.opf");
var book = ePub(url || "https://s3.amazonaws.com/epubjs/books/moby-dick/OPS/package.opf");
var rendition = book.renderTo("viewer", {
manager: "continuous",
flow: "scrolled",
width: "100%",
height: "100%"
});
var displayed = rendition.display("epubcfi(/6/14[xchapter_001]!4/2/24/2[c001p0011]/1:799)");
var displayed = rendition.display(currentSectionIndex);


displayed.then(function(renderer){
Expand Down
1 change: 1 addition & 0 deletions examples/examples.css
View file
Expand Up @@ -248,6 +248,7 @@ body {
-webkit-transform: translate(-400px, 0);
-moz-transform: translate(-400px, 0);
-ms-transform: translate(-400px, 0);
transform: translate(-400px, 0);
}

svg {
Expand Down
12 changes: 8 additions & 4 deletions examples/scrolled.html
View file
Expand Up @@ -16,15 +16,19 @@
<a id="next" href="#next" class="navlink">...</a>

<script>
var currentSectionIndex = 8;
// Load the opf
var book = ePub("https://s3.amazonaws.com/epubjs/books/alice/OPS/package.opf");
var params = URLSearchParams && new URLSearchParams(document.location.search.substring(1));
var url = params && params.get("url") && decodeURIComponent(params.get("url"));
var currentSectionIndex = (params && params.get("loc")) ? params.get("loc") : undefined;

var book = ePub(url || "https://s3.amazonaws.com/epubjs/books/alice/OPS/package.opf");
var rendition = book.renderTo("viewer", {
flow: "scrolled-doc",
width: "100%"
width: "100%",
fullsize: true
});

rendition.display("chapter_008.xhtml");
rendition.display(currentSectionIndex);


var next = document.getElementById("next");
Expand Down
8 changes: 5 additions & 3 deletions src/layout.js
View file
Expand Up @@ -189,15 +189,17 @@ class Layout {
* @param {Contents} contents
* @return {Promise}
*/
format(contents, section){
format(contents, section, axis){
var formating;

if (this.name === "pre-paginated") {
formating = contents.fit(this.columnWidth, this.height, section);
} else if (this._flow === "paginated") {
formating = contents.columns(this.width, this.height, this.columnWidth, this.gap, this.settings.direction);
} else { // scrolled
formating = contents.size(this.width, null);
} else if (axis && axis === "horizontal") {
formating = contents.size(null, this.height);
} else {
formating = contents.size(this.width, null);
}

return formating; // might be a promise in some View Managers
Expand Down
121 changes: 56 additions & 65 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 @@ -165,7 +178,6 @@ class ContinuousViewManager extends DefaultViewManager {
} else {
this.scrollBy(bounds.widthDelta, 0, true);
}

}

update(_offset){
Expand All @@ -185,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 @@ -201,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(){
Expand Down Expand Up @@ -240,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();
Expand All @@ -265,36 +294,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 @@ -362,16 +373,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") {
this.scrollTo(prevLeft, 0, true);
}
else {
if (!this.settings.fullsize) {
this.scrollTo(prevLeft, 0, true);
} else {
this.scrollTo(prevLeft + Math.floor(bounds.width), 0, true);
}
} else {
Expand Down Expand Up @@ -402,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;
Expand All @@ -419,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);
Expand Down Expand Up @@ -448,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;
Expand Down Expand Up @@ -490,7 +494,7 @@ class ContinuousViewManager extends DefaultViewManager {
scrolled() {

this.q.enqueue(function() {
this.check();
return this.check();
}.bind(this));

this.emit(EVENTS.MANAGERS.SCROLL, {
Expand All @@ -516,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;

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

Expand All @@ -556,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();
Expand Down

0 comments on commit b5be551

Please sign in to comment.