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
* navigate/scrub through a post stream.
*
* ### Props
* ### Attrs
*
* - `stream`
* - `className`
*/
export default class PostStreamScrubber extends Component {
init() {
this.stream = this.props.stream;
oninit(vnode) {
super.oninit(vnode);
this.stream = this.attrs.stream;
this.handlers = {};
this.scrollListener = new ScrollListener(this.updateScrubberValues.bind(this, { fromScroll: true, forceHeightChange: true }));
}
view() {
view(vnode) {
const count = this.stream.count();
// 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>,
});
const unreadCount = this.stream.discussion.unreadCount();
const unreadCount = this.attrs.discussion.unreadCount();
const unreadPercent = count ? Math.min(count - this.stream.index, unreadCount) / count : 0;
function styleUnread(element, isInitialized, context) {
const $element = $(element);
function styleUnread(vnode) {
const $element = $(vnode.dom);
const newStyle = {
top: 100 - unreadPercent * 100 + '%',
height: unreadPercent * 100 + '%',
};
if (context.oldStyle) {
$element.stop(true).css(context.oldStyle).animate(newStyle);
if (vnode.oldStyle) {
$element.stop(true).css(vnode.oldStyle).animate(newStyle);
} else {
$element.css(newStyle);
}
context.oldStyle = newStyle;
vnode.oldStyle = newStyle;
}
const classNames = ['PostStreamScrubber', 'Dropdown'];
if (this.props.className) classNames.push(this.props.className);
if (this.attrs.className) classNames.push(this.attrs.className);
return (
<div className={classNames.join(' ')}>
@@ -68,12 +70,12 @@ export default class PostStreamScrubber extends Component {
<div className="Scrubber-bar" />
<div className="Scrubber-info">
<strong>{viewing}</strong>
<span className="Scrubber-description">{this.stream.description}</span>
<span className="Scrubber-description"></span>
</div>
</div>
<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 })}
</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 }));
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
// 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)));
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 });
}
ondestroy() {
this.scrollListener.stop();
$(window).off('resize', this.handlers.onresize);
$(document).off('mousemove touchmove', this.handlers.onmousemove).off('mouseup touchend', this.handlers.onmouseup);
}
onresize() {
// Adjust the height of the scrollbar so that it fills the height of
// the sidebar and doesn't overlap the footer.