github-mirrors/wekan
1
0
Fork 0
mirror of https://github.com/wekan/wekan.git synced 2025-04-22 04:57:07 -04:00
Code Issues Projects Releases Packages Wiki Activity

list: simplify infinite scrolling

Browse source 
Use IntersectionObserver instead of custom made one.
This adds the benefit of not loading any extra cards if the list is
not shown on screen
This commit is contained in:
Benjamin Tissoires 2019-03-26 15:13:35 +01:00
parent 14c493fc63
commit fb163a2493
1 changed files with 16 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

59
client/components/lists/listBody.js
View file

@ -8,25 +8,25 @@ BlazeComponent.extendComponent({
},
onRendered() {
const domElement = this.find('.js-perfect-scrollbar');
const spinner = this.find('.sk-spinner-list');
this.$(domElement).on('scroll', () => this.updateList(domElement));
$(window).on(`resize.${this.data().listId}`, () => this.updateList(domElement));
if (spinner) {
const options = {
root: null, // we check if the spinner is on the current viewport
rootMargin: '0px',
threshold: 0.25,
};
// we add a Mutation Observer to allow propagations of cardlimit
// when the spinner stays in the current view (infinite scrolling)
this.mutationObserver = new MutationObserver(() => this.updateList(domElement));
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
this.cardlimit.set(this.cardlimit.get() + InfiniteScrollIter);
}
});
}, options);
this.mutationObserver.observe(domElement, {
childList: true,
});
this.updateList(domElement);
},
onDestroyed() {
$(window).off(`resize.${this.data().listId}`);
this.mutationObserver.disconnect();
observer.observe(spinner);
}
},
mixins() {
@ -191,38 +191,11 @@ BlazeComponent.extendComponent({
});
},
spinnerInView(container) {
const parentViewHeight = container.clientHeight;
const bottomViewPosition = container.scrollTop + parentViewHeight;
const spinner = this.find('.sk-spinner-list');
const threshold = spinner.offsetTop;
return bottomViewPosition > threshold;
},
showSpinner(swimlaneId) {
const list = Template.currentData();
return list.cards(swimlaneId).count() > this.cardlimit.get();
},
updateList(container) {
// first, if the spinner is not rendered, we have reached the end of
// the list of cards, so skip and disable firing the events
const target = this.find('.sk-spinner-list');
if (!target) {
this.$(container).off('scroll');
$(window).off(`resize.${this.data().listId}`);
return;
}
if (this.spinnerInView(container)) {
this.cardlimit.set(this.cardlimit.get() + InfiniteScrollIter);
Ps.update(container);
}
},
canSeeAddCard() {
return !this.reachedWipLimit() && Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
},