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

update: forum/components/PostStreamScrubber

Browse Source
This commit is contained in:
Alexander Skvortsov
2020-08-09 23:31:22 -04:00
committed by Franz Liedke
parent 89b6847710
commit f44caf1600
1 changed files with 28 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,20 +7,22 @@ import ScrollListener from '../../common/utils/ScrollListener';
* The `PostStreamScrubber` component displays a scrubber which can be used to * The `PostStreamScrubber` component displays a scrubber which can be used to
* navigate/scrub through a post stream. * navigate/scrub through a post stream.
* *
* ### Props * ### Attrs
* *
* - `stream` * - `stream`
* - `className` * - `className`
*/ */
export default class PostStreamScrubber extends Component { export default class PostStreamScrubber extends Component {
init() { oninit(vnode) {
this.stream = this.props.stream; super.oninit(vnode);
this.stream = this.attrs.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(vnode) {
const count = this.stream.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
@@ -29,26 +31,26 @@ 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.stream.discussion.unreadCount(); const unreadCount = this.attrs.discussion.unreadCount();
const unreadPercent = count ? Math.min(count - this.stream.index, unreadCount) / count : 0; const unreadPercent = count ? Math.min(count - this.stream.index, unreadCount) / count : 0;
function styleUnread(element, isInitialized, context) { function styleUnread(vnode) {
const $element = $(element); const $element = $(vnode.dom);
const newStyle = { const newStyle = {
top: 100 - unreadPercent * 100 + '%', top: 100 - unreadPercent * 100 + '%',
height: unreadPercent * 100 + '%', height: unreadPercent * 100 + '%',
}; };
if (context.oldStyle) { if (vnode.oldStyle) {
$element.stop(true).css(context.oldStyle).animate(newStyle); $element.stop(true).css(vnode.oldStyle).animate(newStyle);
} else { } else {
$element.css(newStyle); $element.css(newStyle);
} }
context.oldStyle = newStyle; vnode.oldStyle = newStyle;
} }
const classNames = ['PostStreamScrubber', 'Dropdown']; const classNames = ['PostStreamScrubber', 'Dropdown'];
if (this.props.className) classNames.push(this.props.className); if (this.attrs.className) classNames.push(this.attrs.className);
return ( return (
<div className={classNames.join(' ')}> <div className={classNames.join(' ')}>
@@ -68,12 +70,12 @@ 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.stream.description}</span> <span className="Scrubber-description"></span>
</div> </div>
</div> </div>
<div className="Scrubber-after" /> <div className="Scrubber-after" />
<div className="Scrubber-unread" config={styleUnread}> <div className="Scrubber-unread" oncreate={styleUnread} onupdate={styleUnread}>
{app.translator.trans('core.forum.post_scrubber.unread_text', { count: unreadCount })} {app.translator.trans('core.forum.post_scrubber.unread_text', { count: unreadCount })}
</div> </div>
</div> </div>
@@ -87,11 +89,12 @@ export default class PostStreamScrubber extends Component {
); );
} }
config(isInitialized, context) { onupdate() {
this.stream.loadPromise.then(() => this.updateScrubberValues({ animate: true, forceHeightChange: true })); this.stream.loadPromise.then(() => this.updateScrubberValues({ animate: true, forceHeightChange: true }));
if (isInitialized) return; }
context.onunload = this.ondestroy.bind(this); oncreate(vnode) {
super.oncreate(vnode);
// Whenever the window is resized, adjust the height of the scrollbar // Whenever the window is resized, adjust the height of the scrollbar
// so that it fills the height of the sidebar. // so that it fills the height of the sidebar.
@@ -133,6 +136,15 @@ export default class PostStreamScrubber extends Component {
.on('mouseup touchend', (this.handlers.onmouseup = this.onmouseup.bind(this))); .on('mouseup touchend', (this.handlers.onmouseup = this.onmouseup.bind(this)));
setTimeout(() => this.scrollListener.start()); setTimeout(() => this.scrollListener.start());
this.updateScrubberValues({ animate: true, forceHeightChange: true });
}
onremove() {
this.scrollListener.stop();
$(window).off('resize', this.handlers.onresize);
$(document).off('mousemove touchmove', this.handlers.onmousemove).off('mouseup touchend', this.handlers.onmouseup);
} }
/** /**
@@ -196,13 +208,6 @@ export default class PostStreamScrubber extends Component {
this.updateScrubberValues({ animate: true, forceHeightChange: true }); this.updateScrubberValues({ animate: true, forceHeightChange: true });
} }
ondestroy() {
this.scrollListener.stop();
$(window).off('resize', this.handlers.onresize);
$(document).off('mousemove touchmove', this.handlers.onmousemove).off('mouseup touchend', this.handlers.onmouseup);
}
onresize() { onresize() {
// Adjust the height of the scrollbar so that it fills the height of // Adjust the height of the scrollbar so that it fills the height of
// the sidebar and doesn't overlap the footer. // the sidebar and doesn't overlap the footer.