mirror/php-flarum
1
0
Fork 0
mirror of https://github.com/flarum/core.git synced 2025-08-08 09:26:34 +02:00
Code Issues Releases Wiki Activity

Rename props

Browse Source
This commit is contained in:
Franz Liedke
2020-07-31 12:11:10 +02:00
parent aae6f24356
commit 3ce94757fc
3 changed files with 59 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
js/src/forum/components/DiscussionPage.js
View File

@@ -109,7 +109,7 @@ export default class DiscussionPage extends Page {
<ul>{listItems(this.sidebarItems().toArray())}</ul> <ul>{listItems(this.sidebarItems().toArray())}</ul>
</nav> </nav>
<div className="DiscussionPage-stream"> <div className="DiscussionPage-stream">
{PostStream.component({ discussion, state: this.stream, positionHandler: this.positionChanged.bind(this) })} {PostStream.component({ discussion, stream: this.stream, onPositionChange: this.positionChanged.bind(this) })}
</div> </div>
</div>, </div>,
] ]
@@ -268,7 +268,7 @@ export default class DiscussionPage extends Page {
'scrubber', 'scrubber',
PostStreamScrubber.component({ PostStreamScrubber.component({
discussion: this.discussion, discussion: this.discussion,
state: this.stream, stream: this.stream,
className: 'App-titleControl', className: 'App-titleControl',
}), }),
-100 -100

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

@@ -11,12 +11,13 @@ import Button from '../../common/components/Button';
* ### Props * ### Props
* *
* - `discussion` * - `discussion`
* - `state` * - `stream`
* - `onPositionChange`
*/ */
export default class PostStream extends Component { export default class PostStream extends Component {
init() { init() {
this.discussion = this.props.discussion; this.discussion = this.props.discussion;
this.state = this.props.state; this.stream = this.props.stream;
this.scrollListener = new ScrollListener(this.onscroll.bind(this)); this.scrollListener = new ScrollListener(this.onscroll.bind(this));
} }
@@ -29,13 +30,13 @@ export default class PostStream extends Component {
let lastTime; let lastTime;
const viewingEnd = this.state.viewingEnd(); const viewingEnd = this.stream.viewingEnd();
const posts = this.state.posts(); const posts = this.stream.posts();
const postIds = this.discussion.postIds(); const postIds = this.discussion.postIds();
const items = posts.map((post, i) => { const items = posts.map((post, i) => {
let content; let content;
const attrs = { 'data-index': this.state.visibleStart + i }; const attrs = { 'data-index': this.stream.visibleStart + i };
if (post) { if (post) {
const time = post.createdAt(); const time = post.createdAt();
@@ -65,7 +66,7 @@ export default class PostStream extends Component {
lastTime = time; lastTime = time;
} else { } else {
attrs.key = 'post' + postIds[this.state.visibleStart + i]; attrs.key = 'post' + postIds[this.stream.visibleStart + i];
content = PostLoading.component(); content = PostLoading.component();
} }
@@ -77,10 +78,10 @@ export default class PostStream extends Component {
); );
}); });
if (!viewingEnd && posts[this.state.visibleEnd - this.state.visibleStart - 1]) { if (!viewingEnd && posts[this.stream.visibleEnd - this.stream.visibleStart - 1]) {
items.push( items.push(
<div className="PostStream-loadMore" key="loadMore"> <div className="PostStream-loadMore" key="loadMore">
<Button className="Button" onclick={this.state.loadNext.bind(this.state)}> <Button className="Button" onclick={this.stream.loadNext.bind(this.stream)}>
{app.translator.trans('core.forum.post_stream.load_more_button')} {app.translator.trans('core.forum.post_stream.load_more_button')}
</Button> </Button>
</div> </div>
@@ -101,17 +102,17 @@ export default class PostStream extends Component {
} }
config(isInitialized, context) { config(isInitialized, context) {
if (this.state.needsScroll) { if (this.stream.needsScroll) {
this.state.needsScroll = false; this.stream.needsScroll = false;
const locationType = this.state.locationType; const locationType = this.stream.locationType;
if (locationType == 'number') { if (locationType == 'number') {
this.scrollToNumber(this.state.number, this.state.noAnimationScroll); this.scrollToNumber(this.stream.number, this.stream.noAnimationScroll);
} else if (locationType == 'index') { } else if (locationType == 'index') {
const index = this.state.sanitizeIndex(this.state.index); const index = this.stream.sanitizeIndex(this.stream.index);
const backwards = index == this.state.count() - 1; const backwards = index == this.stream.count() - 1;
this.scrollToIndex(index, this.state.noAnimationScroll, backwards); this.scrollToIndex(index, this.stream.noAnimationScroll, backwards);
} }
this[locationType] = this.state[locationType]; this[locationType] = this.stream[locationType];
} }
if (isInitialized) return; if (isInitialized) return;
@@ -132,25 +133,25 @@ export default class PostStream extends Component {
* @param {Integer} top * @param {Integer} top
*/ */
onscroll(top = window.pageYOffset) { onscroll(top = window.pageYOffset) {
if (this.state.paused) return; if (this.stream.paused) return;
const marginTop = this.getMarginTop(); const marginTop = this.getMarginTop();
const viewportHeight = $(window).height() - marginTop; const viewportHeight = $(window).height() - marginTop;
const viewportTop = top + marginTop; const viewportTop = top + marginTop;
const loadAheadDistance = 300; const loadAheadDistance = 300;
if (this.state.visibleStart > 0) { if (this.stream.visibleStart > 0) {
const $item = this.$('.PostStream-item[data-index=' + this.state.visibleStart + ']'); const $item = this.$('.PostStream-item[data-index=' + this.stream.visibleStart + ']');
if ($item.length && $item.offset().top > viewportTop - loadAheadDistance) { if ($item.length && $item.offset().top > viewportTop - loadAheadDistance) {
this.state.loadPrevious(); this.stream.loadPrevious();
} }
} }
if (this.state.visibleEnd < this.state.count()) { if (this.stream.visibleEnd < this.stream.count()) {
const $item = this.$('.PostStream-item[data-index=' + (this.state.visibleEnd - 1) + ']'); const $item = this.$('.PostStream-item[data-index=' + (this.stream.visibleEnd - 1) + ']');
if ($item.length && $item.offset().top + $item.outerHeight(true) < viewportTop + viewportHeight + loadAheadDistance) { if ($item.length && $item.offset().top + $item.outerHeight(true) < viewportTop + viewportHeight + loadAheadDistance) {
this.state.loadNext(); this.stream.loadNext();
} }
} }
@@ -214,9 +215,9 @@ export default class PostStream extends Component {
if (time) period = time; if (time) period = time;
}); });
this.state.index = index + 1; this.stream.index = index + 1;
this.state.visible = visible; this.stream.visible = visible;
if (period) this.state.description = dayjs(period).format('MMMM YYYY'); if (period) this.stream.description = dayjs(period).format('MMMM YYYY');
} }
/** /**
@@ -255,7 +256,7 @@ export default class PostStream extends Component {
}); });
if (startNumber) { if (startNumber) {
this.props.positionHandler(startNumber || 1, endNumber, startNumber); this.props.onPositionChange(startNumber || 1, endNumber, startNumber);
} }
} }
@@ -285,7 +286,7 @@ export default class PostStream extends Component {
const $item = this.$(`.PostStream-item[data-index=${index}]`); const $item = this.$(`.PostStream-item[data-index=${index}]`);
return this.scrollToItem($item, noAnimation, true, bottom).then(() => { return this.scrollToItem($item, noAnimation, true, bottom).then(() => {
if (index == this.state.count() - 1) { if (index == this.stream.count() - 1) {
this.flashItem(this.$('.PostStream-item:last-child')); this.flashItem(this.$('.PostStream-item:last-child'));
} }
}); });
@@ -325,14 +326,14 @@ export default class PostStream extends Component {
} }
} }
return Promise.all([$container.promise(), this.state.loadPromise]).then(() => { return Promise.all([$container.promise(), this.stream.loadPromise]).then(() => {
this.updateScrubber(); this.updateScrubber();
const index = $item.data('index'); const index = $item.data('index');
m.redraw(true); m.redraw(true);
const scroll = index == 0 ? 0 : $(`.PostStream-item[data-index=${$item.data('index')}]`).offset().top - this.getMarginTop(); const scroll = index == 0 ? 0 : $(`.PostStream-item[data-index=${$item.data('index')}]`).offset().top - this.getMarginTop();
$(window).scrollTop(scroll); $(window).scrollTop(scroll);
this.calculatePosition(); this.calculatePosition();
this.state.paused = false; this.stream.paused = false;
}); });
} }

52
js/src/forum/components/PostStreamScrubber.js
View File

@@ -9,19 +9,19 @@ import ScrollListener from '../../common/utils/ScrollListener';
* *
* ### Props * ### Props
* *
* - `state` * - `stream`
* - `className` * - `className`
*/ */
export default class PostStreamScrubber extends Component { export default class PostStreamScrubber extends Component {
init() { init() {
this.state = this.props.state; this.stream = this.props.stream;
this.handlers = {}; this.handlers = {};
this.scrollListener = new ScrollListener(this.updateScrubberValues.bind(this, { fromScroll: true, forceHeightChange: true })); this.scrollListener = new ScrollListener(this.updateScrubberValues.bind(this, { fromScroll: true, forceHeightChange: true }));
} }
view() { view() {
const count = this.state.count(); const count = this.stream.count();
// Index is left blank for performance reasons, it is filled in in updateScubberValues // Index is left blank for performance reasons, it is filled in in updateScubberValues
const viewing = app.translator.transChoice('core.forum.post_scrubber.viewing_text', count, { const viewing = app.translator.transChoice('core.forum.post_scrubber.viewing_text', count, {
@@ -29,8 +29,8 @@ export default class PostStreamScrubber extends Component {
count: <span className="Scrubber-count">{formatNumber(count)}</span>, count: <span className="Scrubber-count">{formatNumber(count)}</span>,
}); });
const unreadCount = this.state.discussion.unreadCount(); const unreadCount = this.stream.discussion.unreadCount();
const unreadPercent = count ? Math.min(count - this.state.index, unreadCount) / count : 0; const unreadPercent = count ? Math.min(count - this.stream.index, unreadCount) / count : 0;
function styleUnread(element, isInitialized, context) { function styleUnread(element, isInitialized, context) {
const $element = $(element); const $element = $(element);
@@ -68,7 +68,7 @@ export default class PostStreamScrubber extends Component {
<div className="Scrubber-bar" /> <div className="Scrubber-bar" />
<div className="Scrubber-info"> <div className="Scrubber-info">
<strong>{viewing}</strong> <strong>{viewing}</strong>
<span className="Scrubber-description">{this.state.description}</span> <span className="Scrubber-description">{this.stream.description}</span>
</div> </div>
</div> </div>
<div className="Scrubber-after" /> <div className="Scrubber-after" />
@@ -88,7 +88,7 @@ export default class PostStreamScrubber extends Component {
} }
config(isInitialized, context) { config(isInitialized, context) {
this.state.loadPromise.then(() => this.updateScrubberValues({ animate: true, forceHeightChange: true })); this.stream.loadPromise.then(() => this.updateScrubberValues({ animate: true, forceHeightChange: true }));
if (isInitialized) return; if (isInitialized) return;
context.onunload = this.ondestroy.bind(this); context.onunload = this.ondestroy.bind(this);
@@ -142,24 +142,24 @@ export default class PostStreamScrubber extends Component {
* @param {Boolean} animate * @param {Boolean} animate
*/ */
updateScrubberValues(options = {}) { updateScrubberValues(options = {}) {
const index = this.state.index; const index = this.stream.index;
const count = this.state.count(); const count = this.stream.count();
const visible = this.state.visible || 1; const visible = this.stream.visible || 1;
const percentPerPost = this.percentPerPost(); const percentPerPost = this.percentPerPost();
const $scrubber = this.$(); const $scrubber = this.$();
$scrubber.find('.Scrubber-index').text(formatNumber(this.state.sanitizeIndex(Math.max(1, index)))); $scrubber.find('.Scrubber-index').text(formatNumber(this.stream.sanitizeIndex(Math.max(1, index))));
$scrubber.find('.Scrubber-description').text(this.state.description); $scrubber.find('.Scrubber-description').text(this.stream.description);
$scrubber.toggleClass('disabled', this.state.disabled()); $scrubber.toggleClass('disabled', this.stream.disabled());
const heights = {}; const heights = {};
heights.before = Math.max(0, percentPerPost.index * Math.min(index - 1, count - visible)); heights.before = Math.max(0, percentPerPost.index * Math.min(index - 1, count - visible));
heights.handle = Math.min(100 - heights.before, percentPerPost.visible * visible); heights.handle = Math.min(100 - heights.before, percentPerPost.visible * visible);
heights.after = 100 - heights.before - heights.handle; heights.after = 100 - heights.before - heights.handle;
// If the state is paused, don't change height on scroll, as the viewport is being scrolled by the JS // If the stream is paused, don't change height on scroll, as the viewport is being scrolled by the JS
// If a height change animation is already in progress, don't adjust height unless overriden // If a height change animation is already in progress, don't adjust height unless overriden
if ((options.fromScroll && this.state.paused) || (this.adjustingHeight && !options.forceHeightChange)) return; if ((options.fromScroll && this.stream.paused) || (this.adjustingHeight && !options.forceHeightChange)) return;
const func = options.animate ? 'animate' : 'css'; const func = options.animate ? 'animate' : 'css';
this.adjustingHeight = true; this.adjustingHeight = true;
@@ -184,7 +184,7 @@ export default class PostStreamScrubber extends Component {
* Go to the first post in the discussion. * Go to the first post in the discussion.
*/ */
goToFirst() { goToFirst() {
this.state.goToFirst(); this.stream.goToFirst();
this.updateScrubberValues({ animate: true, forceHeightChange: true }); this.updateScrubberValues({ animate: true, forceHeightChange: true });
} }
@@ -192,7 +192,7 @@ export default class PostStreamScrubber extends Component {
* Go to the last post in the discussion. * Go to the last post in the discussion.
*/ */
goToLast() { goToLast() {
this.state.goToLast(); this.stream.goToLast();
this.updateScrubberValues({ animate: true, forceHeightChange: true }); this.updateScrubberValues({ animate: true, forceHeightChange: true });
} }
@@ -222,7 +222,7 @@ export default class PostStreamScrubber extends Component {
onmousedown(e) { onmousedown(e) {
e.redraw = false; e.redraw = false;
this.mouseStart = e.clientY || e.originalEvent.touches[0].clientY; this.mouseStart = e.clientY || e.originalEvent.touches[0].clientY;
this.indexStart = this.state.index; this.indexStart = this.stream.index;
this.dragging = true; this.dragging = true;
$('body').css('cursor', 'move'); $('body').css('cursor', 'move');
this.$().toggleClass('dragging', this.dragging); this.$().toggleClass('dragging', this.dragging);
@@ -238,9 +238,9 @@ export default class PostStreamScrubber extends Component {
const deltaPixels = (e.clientY || e.originalEvent.touches[0].clientY) - this.mouseStart; const deltaPixels = (e.clientY || e.originalEvent.touches[0].clientY) - this.mouseStart;
const deltaPercent = (deltaPixels / this.$('.Scrubber-scrollbar').outerHeight()) * 100; const deltaPercent = (deltaPixels / this.$('.Scrubber-scrollbar').outerHeight()) * 100;
const deltaIndex = deltaPercent / this.percentPerPost().index || 0; const deltaIndex = deltaPercent / this.percentPerPost().index || 0;
const newIndex = Math.min(this.indexStart + deltaIndex, this.state.count() - 1); const newIndex = Math.min(this.indexStart + deltaIndex, this.stream.count() - 1);
this.state.index = Math.max(0, newIndex); this.stream.index = Math.max(0, newIndex);
this.updateScrubberValues(); this.updateScrubberValues();
} }
@@ -257,8 +257,8 @@ export default class PostStreamScrubber extends Component {
// If the index we've landed on is in a gap, then tell the stream- // If the index we've landed on is in a gap, then tell the stream-
// content that we want to load those posts. // content that we want to load those posts.
const intIndex = Math.floor(this.state.index); const intIndex = Math.floor(this.stream.index);
this.state.goToIndex(intIndex); this.stream.goToIndex(intIndex);
} }
onclick(e) { onclick(e) {
@@ -278,8 +278,8 @@ export default class PostStreamScrubber extends Component {
// 3. Now we can convert the percentage into an index, and tell the stream- // 3. Now we can convert the percentage into an index, and tell the stream-
// content component to jump to that index. // content component to jump to that index.
let offsetIndex = offsetPercent / this.percentPerPost().index; let offsetIndex = offsetPercent / this.percentPerPost().index;
offsetIndex = Math.max(0, Math.min(this.state.count() - 1, offsetIndex)); offsetIndex = Math.max(0, Math.min(this.stream.count() - 1, offsetIndex));
this.state.goToIndex(Math.floor(offsetIndex)); this.stream.goToIndex(Math.floor(offsetIndex));
this.updateScrubberValues({ animate: true, forceHeightChange: true }); this.updateScrubberValues({ animate: true, forceHeightChange: true });
this.$().removeClass('open'); this.$().removeClass('open');
@@ -296,8 +296,8 @@ export default class PostStreamScrubber extends Component {
* scrubber. * scrubber.
*/ */
percentPerPost() { percentPerPost() {
const count = this.state.count() || 1; const count = this.stream.count() || 1;
const visible = this.state.visible || 1; const visible = this.stream.visible || 1;
// To stop the handle of the scrollbar from getting too small when there // To stop the handle of the scrollbar from getting too small when there
// are many posts, we define a minimum percentage height for the handle // are many posts, we define a minimum percentage height for the handle