diff options
-rw-r--r-- | CHANGELOG.md | 5 | ||||
-rw-r--r-- | client/components/lists/listBody.jade | 19 | ||||
-rw-r--r-- | client/components/lists/listBody.js | 89 |
3 files changed, 51 insertions, 62 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index 2776ea2a..8dda97be 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,11 +6,6 @@ This release fixes the following bugs: fixes [Incorrect variable replacement on email notifications](https://github.com/wekan/wekan/issues/2295). Thanks to justinr1234. -and reverts the following fixes: - -- [Revert spinner etc fixes of Wekan v2.56, because of some new bugs](https://github.com/wekan/wekan/issues/2250). - Thanks to gerroon. - Thanks to above GitHub users for their contributions and translators for their translations. # v2.56 2019-03-27 Wekan release 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'); |