mirror/php-flarum
1
0
Fork 0
mirror of https://github.com/flarum/core.git synced 2025-05-10 01:16:09 +02:00
Code Issues Releases Wiki Activity

Add a "load more" button to the end of the post stream

Browse Source 
This is necessary if the page is viewed in a context with no scrolling, i.e. an auto-resizing iframe
This commit is contained in:
Toby Zerner 2015-11-20 12:33:56 +10:30
parent bd750ca154
commit acf67ca416
1 changed files with 62 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
js/forum/src/components/PostStream.js
View File

@ -5,6 +5,7 @@ import anchorScroll from 'flarum/utils/anchorScroll';
import mixin from 'flarum/utils/mixin'; import mixin from 'flarum/utils/mixin';
import evented from 'flarum/utils/evented'; import evented from 'flarum/utils/evented';
import ReplyPlaceholder from 'flarum/components/ReplyPlaceholder'; import ReplyPlaceholder from 'flarum/components/ReplyPlaceholder';
import Button from 'flarum/components/Button';
/** /**
* The `PostStream` component displays an infinitely-scrollable wall of posts in * The `PostStream` component displays an infinitely-scrollable wall of posts in
@ -194,11 +195,10 @@ class PostStream extends Component {
this.visibleEnd = this.sanitizeIndex(this.visibleEnd); this.visibleEnd = this.sanitizeIndex(this.visibleEnd);
this.viewingEnd = this.visibleEnd === this.count(); this.viewingEnd = this.visibleEnd === this.count();
const posts = this.posts();
const postIds = this.discussion.postIds(); const postIds = this.discussion.postIds();
return ( const items = posts.map((post, i) => {
<div className="PostStream">
{this.posts().map((post, i) => {
let content; let content;
const attrs = {'data-index': this.visibleStart + i}; const attrs = {'data-index': this.visibleStart + i};
@ -235,19 +235,31 @@ class PostStream extends Component {
} }
return <div className="PostStream-item" {...attrs}>{content}</div>; return <div className="PostStream-item" {...attrs}>{content}</div>;
})} });
if (!this.viewingEnd && posts[this.visibleEnd - this.visibleStart - 1]) {
items.push(
<div className="PostStream-loadMore" key="loadMore">
<Button className="Button" onclick={this.loadNext.bind(this)}>
{app.translator.trans('core.forum.post_stream.load_more_button')}
</Button>
</div>
);
}
{
// If we're viewing the end of the discussion, the user can reply, and // If we're viewing the end of the discussion, the user can reply, and
// is not already doing so, then show a 'write a reply' placeholder. // is not already doing so, then show a 'write a reply' placeholder.
this.viewingEnd && if (this.viewingEnd && (!app.session.user || this.discussion.canReply())) {
(!app.session.user || this.discussion.canReply()) items.push(
? (
<div className="PostStream-item" key="reply"> <div className="PostStream-item" key="reply">
{ReplyPlaceholder.component({discussion: this.discussion})} {ReplyPlaceholder.component({discussion: this.discussion})}
</div> </div>
) : '' );
} }
return (
<div className="PostStream">
{items}
</div> </div>
); );
} }