diff options
author | Lauri Ojansivu <x@xet7.org> | 2019-03-27 17:33:53 +0200 |
---|---|---|
committer | Lauri Ojansivu <x@xet7.org> | 2019-03-27 17:33:53 +0200 |
commit | 619e5e944b0ea0fc8d5259e201359aba8434909e (patch) | |
tree | 7bb3a451aea457d56ac736dc8f955d23c06e15dd /client/components | |
parent | 14c493fc630c1eade00db236799ec6cf58767d85 (diff) | |
parent | e2d0faa539e287247ccd1208fe74705169749210 (diff) | |
download | wekan-619e5e944b0ea0fc8d5259e201359aba8434909e.tar.gz wekan-619e5e944b0ea0fc8d5259e201359aba8434909e.tar.bz2 wekan-619e5e944b0ea0fc8d5259e201359aba8434909e.zip |
Merge branch 'bentiss-fix-infinite-scroll' into edge
Diffstat (limited to 'client/components')
-rw-r--r-- | client/components/lists/listBody.jade | 19 | ||||
-rw-r--r-- | client/components/lists/listBody.js | 89 |
2 files changed, 51 insertions, 57 deletions
diff --git a/client/components/lists/listBody.jade b/client/components/lists/listBody.jade index 876b43d6..61fec93a 100644 --- a/client/components/lists/listBody.jade +++ b/client/components/lists/listBody.jade @@ -13,14 +13,7 @@ template(name="listBody") class="{{#if MultiSelection.isSelected _id}}is-checked{{/if}}") +minicard(this) if (showSpinner (idOrNull ../../_id)) - .sk-spinner.sk-spinner-wave.sk-spinner-list( - class=currentBoard.colorClass - id="showMoreResults") - .sk-rect1 - .sk-rect2 - .sk-rect3 - .sk-rect4 - .sk-rect5 + +spinnerList if canSeeAddCard +inlinedForm(autoclose=false position="bottom") @@ -30,6 +23,16 @@ template(name="listBody") i.fa.fa-plus | {{_ 'add-card'}} +template(name="spinnerList") + .sk-spinner.sk-spinner-wave.sk-spinner-list( + class=currentBoard.colorClass + id="showMoreResults") + .sk-rect1 + .sk-rect2 + .sk-rect3 + .sk-rect4 + .sk-rect5 + template(name="addCardForm") .minicard.minicard-composer.js-composer if getLabels diff --git a/client/components/lists/listBody.js b/client/components/lists/listBody.js index 7d767011..112b6379 100644 --- a/client/components/lists/listBody.js +++ b/client/components/lists/listBody.js @@ -7,28 +7,6 @@ BlazeComponent.extendComponent({ this.cardlimit = new ReactiveVar(InfiniteScrollIter); }, - 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, - }); - - this.updateList(domElement); - }, - - onDestroyed() { - $(window).off(`resize.${this.data().listId}`); - this.mutationObserver.disconnect(); - }, - mixins() { return [Mixins.PerfectScrollbar]; }, @@ -191,38 +169,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(); }, @@ -661,3 +612,43 @@ BlazeComponent.extendComponent({ }]; }, }).register('searchElementPopup'); + +BlazeComponent.extendComponent({ + onCreated() { + this.spinnerShown = false; + this.cardlimit = this.parentComponent().cardlimit; + }, + + onRendered() { + const spinner = this.find('.sk-spinner-list'); + + if (spinner) { + const options = { + root: null, // we check if the spinner is on the current viewport + rootMargin: '0px', + threshold: 0.25, + }; + + this.observer = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + this.spinnerShown = entry.isIntersecting; + this.updateList(); + }); + }, options); + + this.observer.observe(spinner); + } + }, + + onDestroyed() { + this.observer.disconnect(); + }, + + updateList() { + if (this.spinnerShown) { + this.cardlimit.set(this.cardlimit.get() + InfiniteScrollIter); + window.requestIdleCallback(() => this.updateList()); + } + }, + +}).register('spinnerList'); |