Skip to content
This repository was archived by the owner on Feb 16, 2018. It is now read-only.

Scroll padding WIP #5

Open
jvatic wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Scroll padding WIP #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
23af1b9
Scroll padding WIP
jvatic Jun 25, 2014
89ed75e
Allow passing props to page component (e.g. className)
jvatic Aug 2, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
147 changes: 113 additions & 34 deletions ScrollPagination.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,15 @@ var findScrollParent = function (el) {
var ScrollPagination = window.ScrollPagination = React.createClass({
displayName: "ScrollPagination",

getInitialState: function () {
return {
hasPrevPage: false,
hasNextPage: false,
prevPagesMargin: 0,
nextPagesMargin: 0
};
},

getDefaultProps: function () {
return {
hasPrevPage: false,
Expand All @@ -30,17 +39,25 @@ var ScrollPagination = window.ScrollPagination = React.createClass({
componentWillMount: function () {
this.__pages = {};
this.__pageIds = [];

this.__initPageExistance(this.props);
},

componentDidMount: function () {
var scrollParent = this.__scrollParent = findScrollParent(this.getDOMNode());
scrollParent.addEventListener("scroll", this.__handleScroll, false);
scrollParent.addEventListener("resize", this.__handleResize, false);

this.__mounted = true;

this.__updatePageIds();
this.__updateDimensions();
},

componentWillReceiveProps: function (nextProps) {
this.__initPageExistance(nextProps);
},

componentDidUpdate: function () {
this.__updatePageIds();
this.__updateDimensions();
Expand All @@ -60,8 +77,11 @@ var ScrollPagination = window.ScrollPagination = React.createClass({

render: function () {
var style = {};
if (this.__paddingTop) {
style.paddingTop = this.__paddingTop + "px";
if (this.state.prevPagesMargin) {
style.paddingTop = this.state.prevPagesMargin + "px";
}
if (this.state.nextPagesMargin) {
style.paddingBottom = this.state.nextPagesMargin + "px";
}
return React.DOM.div({
style: style,
Expand All @@ -71,26 +91,67 @@ var ScrollPagination = window.ScrollPagination = React.createClass({

// called from Page component via parent component
handlePageEvent: function (pageId, event) {
if (event.name === "mount" || event.name === "update") {
this.__pages[pageId] = {
id: pageId,
height: event.height
};

this.__updateMargins();
}
},

__initPageExistance: function (props) {
var hasPrevPage = false;
if (Number.isInteger(props.prevPageCount) && props.prevPageCount > 0) {
hasPrevPage = true;
} else {
hasPrevPage = props.hasPrevPage;
}

var hasNextPage = false;
if (Number.isInteger(props.nextPageCount) && props.nextPageCount > 0) {
hasNextPage = true;
} else {
hasNextPage = props.hasNextPage;
}

this.setState({
hasPrevPage: hasPrevPage,
hasNextPage: hasNextPage
});
},

__updateMargins: function () {
if ( !this.__mounted ) {
return;
}

var avgHeight = 0;
var count = 0;
var sum = 0;
var pages = this.__pages;
switch (event.name) {
case "mount":
pages[pageId] = {
id: pageId,
height: event.height
};
break;

case "update":
pages[pageId] = {
id: pageId,
height: event.height
};
break;

case "unmount":
break;
Object.keys(pages).forEach(function (pageId) {
count++;
sum += pages[pageId].height;
});
avgHeight = Math.round(sum / count);

var prevPagesMargin = 0;
var nextPagesMargin = 0;

if (Number.isInteger(this.props.prevPageCount)) {
prevPagesMargin = this.props.prevPageCount * avgHeight;
}
this.__pages = pages;

if (Number.isInteger(this.props.nextPageCount)) {
nextPagesMargin = this.props.nextPageCount * avgHeight;
}

this.setState({
prevPagesMargin: prevPagesMargin,
nextPagesMargin: nextPagesMargin
});
},

__unloadPage: function (pageId) {
Expand All @@ -102,15 +163,15 @@ var ScrollPagination = window.ScrollPagination = React.createClass({
},

__loadPrevPage: function () {
if (this.__loadingPrevPage || !this.props.hasPrevPage) {
if (this.__loadingPrevPage || !this.state.hasPrevPage) {
return;
}
this.__loadingPrevPage = true;
this.props.loadPrevPage();
},

__loadNextPage: function () {
if (this.__loadingNextPage || !this.props.hasNextPage) {
if (this.__loadingNextPage || !this.state.hasNextPage) {
return;
}
this.__loadingNextPage = true;
Expand Down Expand Up @@ -218,7 +279,7 @@ var ScrollPagination = window.ScrollPagination = React.createClass({
if (this.__dimentions.contentHeight === 0) {
return;
}
if (this.__loadingNextPage || this.__loadingPrevPage || this.__unloadingPage || !(this.props.hasNextPage || this.props.hasPrevPage)) {
if (this.__loadingNextPage || this.__loadingPrevPage || this.__unloadingPage || !(this.state.hasNextPage || this.state.hasPrevPage)) {
if (e) {
e.preventDefault();
}
Expand All @@ -245,17 +306,29 @@ var ScrollPagination = window.ScrollPagination = React.createClass({
var remainingScrollBottom = contentHeight - scrollY - viewportHeight + offsetTop;
var remainingScrollTop = contentHeight - remainingScrollBottom - viewportHeight;

if (lastPage && remainingScrollBottom < (lastPage.height / 3)) {
if (secondPage && remainingScrollTop > (firstPage.height + secondPage.height)) {
this.__unloadPage(firstPage.id);
} else {
this.__loadNextPage();
if (Number.isInteger(this.props.nextPageCount)) {
console.log("TODO: calculate current page from scroll position");
} else {
if (lastPage && remainingScrollBottom < (lastPage.height / 3)) {
if (secondPage && remainingScrollTop > (firstPage.height + secondPage.height)) {
this.__unloadPage(firstPage.id);
} else {
this.__loadNextPage();
}
return;
}
} else if (firstPage && remainingScrollTop < (firstPage.height / 3)) {
if (secondLastPage && remainingScrollBottom > (lastPage.height + secondLastPage.height)) {
this.__unloadPage(lastPage.id);
} else {
this.__loadPrevPage();
}

if (Number.isInteger(this.props.prevPageCount)) {
console.log("TODO: calculate current page from scroll position");
} else {
if (firstPage && remainingScrollTop < (firstPage.height / 3)) {
if (secondLastPage && remainingScrollBottom > (lastPage.height + secondLastPage.height)) {
this.__unloadPage(lastPage.id);
} else {
this.__loadPrevPage();
}
return;
}
}
},
Expand Down Expand Up @@ -290,7 +363,13 @@ ScrollPagination.Page = React.createClass({
},

render: function () {
return this.props.component(null, this.props.children);
var props = {};
for (var k in this.props) {
if (k !== "component" && k !== "onPageEvent" && k !== "id" && this.props.hasOwnProperty(k)) {
props[k] = this.props[k];
}
}
return this.props.component(props, this.props.children);
},

__determineHeight: function () {
Expand Down
38 changes: 27 additions & 11 deletions example/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@
loadNextPage: this.props.loadNextPage,
loadPrevPage: this.props.loadPrevPage,
unloadPage: this.props.unloadPage,
hasNextPage: this.props.hasNextPage,
hasPrevPage: this.props.hasPrevPage,
nextPageCount: this.props.nextPageCount,
prevPageCount: this.props.prevPageCount
}, this.props.pages.map(function (page, index) {
return Page({ key: page.id, id: page.id, onPageEvent: this.__handlePageEvent }, page.items.map(function (item) {
return React.DOM.div({ key: item.id, style: { paddingTop: index + "px" } }, item.text);
Expand Down Expand Up @@ -61,6 +61,22 @@
return true;
};

var nextPageCount = function () {
if (loadedPages.length === 0) {
return pages.length;
}
var lastIndex = pages.indexOf(loadedPages[loadedPages.length-1]);
return pages.length - lastIndex;
};

var prevPageCount = function () {
if (loadedPages.length === 0) {
return 0;
}
var firstIndex = pages.indexOf(loadedPages[0]);
return firstIndex;
};

var loadNextPage = function () {
setTimeout(function () {
var lastLoadedPage = loadedPages[loadedPages.length-1];
Expand All @@ -74,7 +90,7 @@

view.setProps({
pages: loadedPages,
hasNextPage: hasNextPage()
nextPageCount: nextPageCount(),
});
}, 0);
};
Expand All @@ -92,7 +108,7 @@

view.setProps({
pages: loadedPages,
hasPrevPage: hasPrevPage()
prevPageCount: prevPageCount()
});
}, 0);
};
Expand All @@ -110,14 +126,14 @@
}

if (page === null) {
throw new Error("Invalid attempt to unload page: "+ pageId +"\n"+ JSON.stringify(loadedPages.map(function (p) { return p.id; })));
// throw new Error("Invalid attempt to unload page: "+ pageId +"\n"+ JSON.stringify(loadedPages.map(function (p) { return p.id; })));
} else {
loadedPages = loadedPages.slice(0, index).concat(loadedPages.slice(index+1, loadedPages.length));
}

loadedPages = loadedPages.slice(0, index).concat(loadedPages.slice(index+1, loadedPages.length));
view.setProps({
pages: loadedPages,
hasNextPage: hasNextPage(),
hasPrevPage: hasPrevPage()
nextPageCount: nextPageCount(),
prevPageCount: prevPageCount()
});
}, 0);
};
Expand All @@ -128,8 +144,8 @@
loadNextPage: loadNextPage,
loadPrevPage: loadPrevPage,
unloadPage: unloadPage,
hasNextPage: true,
hasPrevPage: false
nextPageCount: nextPageCount(),
prevPageCount: prevPageCount()
}), el);

loadNextPage();
Expand Down