mirror/php-flarum
1
0
Fork 0
mirror of https://github.com/flarum/core.git synced 2025-05-05 23:15:22 +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

112
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 evented from 'flarum/utils/evented';
import ReplyPlaceholder from 'flarum/components/ReplyPlaceholder';
import Button from 'flarum/components/Button';
/**
* The `PostStream` component displays an infinitely-scrollable wall of posts in
@ -194,60 +195,71 @@ class PostStream extends Component {
this.visibleEnd = this.sanitizeIndex(this.visibleEnd);
this.viewingEnd = this.visibleEnd === this.count();
const posts = this.posts();
const postIds = this.discussion.postIds();
const items = posts.map((post, i) => {
let content;
const attrs = {'data-index': this.visibleStart + i};
if (post) {
const time = post.time();
const PostComponent = app.postComponents[post.contentType()];
content = PostComponent ? PostComponent.component({post}) : '';
attrs.key = 'post' + post.id();
attrs.config = fadeIn;
attrs['data-time'] = time.toISOString();
attrs['data-number'] = post.number();
attrs['data-id'] = post.id();
// If the post before this one was more than 4 hours ago, we will
// display a 'time gap' indicating how long it has been in between
// the posts.
const dt = time - lastTime;
if (dt > 1000 * 60 * 60 * 24 * 4) {
content = [
<div className="PostStream-timeGap">
<span>{app.translator.trans('core.forum.post_stream.time_lapsed_text', {period: moment.duration(dt).humanize()})}</span>
</div>,
content
];
}
lastTime = time;
} else {
attrs.key = 'post' + postIds[this.visibleStart + i];
content = PostLoading.component();
}
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
// is not already doing so, then show a 'write a reply' placeholder.
if (this.viewingEnd && (!app.session.user || this.discussion.canReply())) {
items.push(
<div className="PostStream-item" key="reply">
{ReplyPlaceholder.component({discussion: this.discussion})}
</div>
);
}
return (
<div className="PostStream">
{this.posts().map((post, i) => {
let content;
const attrs = {'data-index': this.visibleStart + i};
if (post) {
const time = post.time();
const PostComponent = app.postComponents[post.contentType()];
content = PostComponent ? PostComponent.component({post}) : '';
attrs.key = 'post' + post.id();
attrs.config = fadeIn;
attrs['data-time'] = time.toISOString();
attrs['data-number'] = post.number();
attrs['data-id'] = post.id();
// If the post before this one was more than 4 hours ago, we will
// display a 'time gap' indicating how long it has been in between
// the posts.
const dt = time - lastTime;
if (dt > 1000 * 60 * 60 * 24 * 4) {
content = [
<div className="PostStream-timeGap">
<span>{app.translator.trans('core.forum.post_stream.time_lapsed_text', {period: moment.duration(dt).humanize()})}</span>
</div>,
content
];
}
lastTime = time;
} else {
attrs.key = 'post' + postIds[this.visibleStart + i];
content = PostLoading.component();
}
return <div className="PostStream-item" {...attrs}>{content}</div>;
})}
{
// 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.
this.viewingEnd &&
(!app.session.user || this.discussion.canReply())
? (
<div className="PostStream-item" key="reply">
{ReplyPlaceholder.component({discussion: this.discussion})}
</div>
) : ''
}
{items}
</div>
);
}