diff options
| -rw-r--r-- | client/components/lists/listBody.jade | 19 | ||||
| -rw-r--r-- | client/components/lists/listBody.js | 89 |
2 files changed, 57 insertions, 51 deletions
diff --git a/client/components/lists/listBody.jade b/client/components/lists/listBody.jade index 61fec93a..876b43d6 100644 --- a/client/components/lists/listBody.jade +++ b/client/components/lists/listBody.jade @@ -13,7 +13,14 @@ template(name="listBody") class="{{#if MultiSelection.isSelected _id}}is-checked{{/if}}") +minicard(this) if (showSpinner (idOrNull ../../_id)) - +spinnerList + .sk-spinner.sk-spinner-wave.sk-spinner-list( + class=currentBoard.colorClass + id="showMoreResults") + .sk-rect1 + .sk-rect2 + .sk-rect3 + .sk-rect4 + .sk-rect5 if canSeeAddCard +inlinedForm(autoclose=false position="bottom") @@ -23,16 +30,6 @@ 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 112b6379..7d767011 100644 --- a/client/components/lists/listBody.js +++ b/client/components/lists/listBody.js @@ -7,6 +7,28 @@ 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]; }, @@ -169,11 +191,38 @@ 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(); }, @@ -612,43 +661,3 @@ 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'); |