From df32545b07658626359405eeb97be2c86964dfc4 Mon Sep 17 00:00:00 2001 From: Lauri Ojansivu Date: Fri, 29 Mar 2019 14:27:37 +0200 Subject: Revert spinner etc fixes of Wekan v2.56, because of some new bugs. Thanks to gerroon ! Related #2250 --- client/components/lists/listBody.jade | 19 ++++---- client/components/lists/listBody.js | 89 +++++++++++++++++++---------------- 2 files changed, 57 insertions(+), 51 deletions(-) (limited to 'client/components') 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'); -- cgit v1.2.3-1-g7c22 From a80cd455defd71f2ac67fd5e008415e3785b761a Mon Sep 17 00:00:00 2001 From: Lauri Ojansivu Date: Sat, 30 Mar 2019 19:06:09 +0200 Subject: - [Add back zoom fixes of #2250](https://github.com/wekan/wekan/issues/2250). Thanks to xet7 ! --- client/components/lists/listBody.jade | 19 ++++---- client/components/lists/listBody.js | 89 ++++++++++++++++------------------- 2 files changed, 51 insertions(+), 57 deletions(-) (limited to 'client/components') 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'); -- cgit v1.2.3-1-g7c22 From 261754f18b8a5e6e6eedf39d6f6b143a752b0588 Mon Sep 17 00:00:00 2001 From: Benjamin Tissoires Date: Mon, 1 Apr 2019 23:35:12 +0200 Subject: list: do not use IntersectionObserver to reduce CPU usage Switch back to a custom spinner detection, as the IntersectionObserver is eating a lot of CPU resources on idle. This should also take care of #2250 properly: the previous `onDestroyed()` was removing the resize and scroll callbacks, but they were not unique enough, and they were shared across swimlanes. So if a list had 2 swimlanes with spinners, when one was removed, the other was not triggering its callbacks anymore. Related: #2294 --- client/components/lists/listBody.js | 50 ++++++++++++++++++++++--------------- 1 file changed, 30 insertions(+), 20 deletions(-) (limited to 'client/components') diff --git a/client/components/lists/listBody.js b/client/components/lists/listBody.js index 112b6379..43619890 100644 --- a/client/components/lists/listBody.js +++ b/client/components/lists/listBody.js @@ -615,40 +615,50 @@ BlazeComponent.extendComponent({ BlazeComponent.extendComponent({ onCreated() { - this.spinnerShown = false; this.cardlimit = this.parentComponent().cardlimit; + + this.listId = this.parentComponent().data()._id; + this.swimlaneId = ''; + + const boardView = Meteor.user().profile.boardView; + if (boardView === 'board-view-swimlanes') + this.swimlaneId = this.parentComponent().parentComponent().parentComponent().data()._id; }, 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.spinner = this.find('.sk-spinner-list'); + this.container = this.$(this.spinner).parents('.js-perfect-scrollbar')[0]; - this.observer.observe(spinner); - } + $(this.container).on(`scroll.spinner_${this.swimlaneId}_${this.listId}`, () => this.updateList()); + $(window).on(`resize.spinner_${this.swimlaneId}_${this.listId}`, () => this.updateList()); + + this.updateList(); }, onDestroyed() { - this.observer.disconnect(); + $(this.container).off(`scroll.spinner_${this.swimlaneId}_${this.listId}`); + $(window).off(`resize.spinner_${this.swimlaneId}_${this.listId}`); }, updateList() { - if (this.spinnerShown) { + if (this.spinnerInView()) { this.cardlimit.set(this.cardlimit.get() + InfiniteScrollIter); window.requestIdleCallback(() => this.updateList()); } }, + spinnerInView() { + const parentViewHeight = this.container.clientHeight; + const bottomViewPosition = this.container.scrollTop + parentViewHeight; + + const threshold = this.spinner.offsetTop; + + // spinner deleted + if (!this.spinner.offsetTop) { + return false; + } + + return bottomViewPosition > threshold; + }, + }).register('spinnerList'); -- cgit v1.2.3-1-g7c22