diff options
author | Lauri Ojansivu <x@xet7.org> | 2019-03-30 19:06:09 +0200 |
---|---|---|
committer | Lauri Ojansivu <x@xet7.org> | 2019-03-30 19:06:09 +0200 |
commit | a80cd455defd71f2ac67fd5e008415e3785b761a (patch) | |
tree | 8b171488bd40af435abbe3b5ed7a72b2ae75817a /client/components/lists/listBody.js | |
parent | 088ec7fd949db38dcf0cacce5e2aa05f4e9fd345 (diff) | |
download | wekan-a80cd455defd71f2ac67fd5e008415e3785b761a.tar.gz wekan-a80cd455defd71f2ac67fd5e008415e3785b761a.tar.bz2 wekan-a80cd455defd71f2ac67fd5e008415e3785b761a.zip |
- [Add back zoom fixes of #2250](https://github.com/wekan/wekan/issues/2250).
Thanks to xet7 !
Diffstat (limited to 'client/components/lists/listBody.js')
-rw-r--r-- | client/components/lists/listBody.js | 89 |
1 files changed, 40 insertions, 49 deletions
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'); |