1
0
mirror of https://github.com/flarum/core.git synced 2025-08-08 01:16:52 +02:00

Store $scrollParent and $notifications in the component state so we don't need to reobtain them 3 separate times

This commit is contained in:
Alexander Skvortsov
2020-09-04 16:40:40 -04:00
committed by Franz Liedke
parent 27ffeb204e
commit e7f6e37799

View File

@@ -97,31 +97,25 @@ export default class NotificationList extends Component {
oncreate(vnode) { oncreate(vnode) {
super.oncreate(vnode); super.oncreate(vnode);
const $notifications = this.$('.NotificationList-content'); this.$notifications = this.$('.NotificationList-content');
const $scrollParent = $notifications.css('overflow') === 'auto' ? $notifications : $(window); this.$scrollParent = $notifications.css('overflow') === 'auto' ? $notifications : $(window);
this.boundScrollHandler = this.scrollHandler.bind(this); this.boundScrollHandler = this.scrollHandler.bind(this);
$scrollParent.on('scroll', this.boundScrollHandler); this.$scrollParent.on('scroll', this.boundScrollHandler);
} }
onremove() { onremove() {
const $notifications = this.$('.NotificationList-content'); this.$scrollParent.off('scroll', this.boundScrollHandler);
const $scrollParent = $notifications.css('overflow') === 'auto' ? $notifications : $(window);
$scrollParent.off('scroll', this.boundScrollHandler);
} }
scrollHandler() { scrollHandler() {
const state = this.attrs.state; const state = this.attrs.state;
const $notifications = this.$('.NotificationList-content'); const scrollTop = this.$scrollParent.scrollTop();
const $scrollParent = $notifications.css('overflow') === 'auto' ? $notifications : $(window); const viewportHeight = this.$scrollParent.height();
const scrollTop = $scrollParent.scrollTop(); const contentTop = this.$scrollParent === this.$notifications ? 0 : this.$notifications.offset().top;
const viewportHeight = $scrollParent.height(); const contentHeight = this.$notifications[0].scrollHeight;
const contentTop = $scrollParent === $notifications ? 0 : $notifications.offset().top;
const contentHeight = $notifications[0].scrollHeight;
if (state.hasMoreResults() && !state.isLoading() && scrollTop + viewportHeight >= contentTop + contentHeight) { if (state.hasMoreResults() && !state.isLoading() && scrollTop + viewportHeight >= contentTop + contentHeight) {
state.loadMore(); state.loadMore();