diff options
author | Benjamin Tissoires <benjamin.tissoires@redhat.com> | 2019-03-26 15:13:35 +0100 |
---|---|---|
committer | Benjamin Tissoires <benjamin.tissoires@redhat.com> | 2019-03-26 16:25:49 +0100 |
commit | fb163a24939e97756ac91361893c55ec760355fa (patch) | |
tree | 583fb8b3707a8f49cb30891c38ae9f86e0179f43 /client/components | |
parent | 14c493fc630c1eade00db236799ec6cf58767d85 (diff) | |
download | wekan-fb163a24939e97756ac91361893c55ec760355fa.tar.gz wekan-fb163a24939e97756ac91361893c55ec760355fa.tar.bz2 wekan-fb163a24939e97756ac91361893c55ec760355fa.zip |
list: simplify infinite scrolling
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
Diffstat (limited to 'client/components')
-rw-r--r-- | client/components/lists/listBody.js | 61 |
1 files changed, 17 insertions, 44 deletions
diff --git a/client/components/lists/listBody.js b/client/components/lists/listBody.js index 7d767011..006f8f0d 100644 --- a/client/components/lists/listBody.js +++ b/client/components/lists/listBody.js @@ -8,25 +8,25 @@ BlazeComponent.extendComponent({ }, onRendered() { - const domElement = this.find('.js-perfect-scrollbar'); - - this.$(domElement).on('scroll', () => this.updateList(domElement)); - $(window).on(`resize.${this.data().listId}`, () => this.updateList(domElement)); - - // 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)); - - this.mutationObserver.observe(domElement, { - childList: true, - }); + const spinner = this.find('.sk-spinner-list'); - this.updateList(domElement); - }, + if (spinner) { + const options = { + root: null, // we check if the spinner is on the current viewport + rootMargin: '0px', + threshold: 0.25, + }; + + const observer = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + this.cardlimit.set(this.cardlimit.get() + InfiniteScrollIter); + } + }); + }, options); - 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(); }, |