From a81d1c716114f3b56980feaefc7ca8da9384c49f Mon Sep 17 00:00:00 2001 From: Dani Palou Date: Thu, 1 Jul 2021 12:49:19 +0200 Subject: [PATCH] MOBILE-3320 messages: Improve scroll position after loading previous --- .../messages/pages/discussion/discussion.html | 2 +- .../pages/discussion/discussion.page.ts | 51 ++++++------------- .../infinite-loading/infinite-loading.ts | 34 ++++++++----- 3 files changed, 39 insertions(+), 48 deletions(-) diff --git a/src/addons/messages/pages/discussion/discussion.html b/src/addons/messages/pages/discussion/discussion.html index 6c5affb89..346fe8573 100644 --- a/src/addons/messages/pages/discussion/discussion.html +++ b/src/addons/messages/pages/discussion/discussion.html @@ -174,6 +174,6 @@

+ [placeholder]="'addon.messages.newmessage' | translate"> diff --git a/src/addons/messages/pages/discussion/discussion.page.ts b/src/addons/messages/pages/discussion/discussion.page.ts index a77b7f46b..cb683d327 100644 --- a/src/addons/messages/pages/discussion/discussion.page.ts +++ b/src/addons/messages/pages/discussion/discussion.page.ts @@ -12,7 +12,7 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core'; +import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core'; import { IonContent } from '@ionic/angular'; import { AlertOptions } from '@ionic/core'; import { CoreEventObserver, CoreEvents } from '@singletons/events'; @@ -76,6 +76,7 @@ export class AddonMessagesDiscussionPage implements OnInit, OnDestroy, AfterView protected viewDestroyed = false; protected memberInfoObserver: CoreEventObserver; protected showLoadingModal = false; // Whether to show a loading modal while fetching data. + protected hostElement: HTMLElement; conversationId?: number; // Conversation ID. Undefined if it's a new individual conversation. conversation?: AddonMessagesConversationFormatted; // The conversation object (if it exists). @@ -113,7 +114,9 @@ export class AddonMessagesDiscussionPage implements OnInit, OnDestroy, AfterView constructor( protected route: ActivatedRoute, + protected elementRef: ElementRef, ) { + this.hostElement = elementRef.nativeElement; this.siteId = CoreSites.getCurrentSiteId(); this.currentUserId = CoreSites.getCurrentSiteUserId(); this.groupMessagingEnabled = AddonMessages.isGroupMessagingEnabled(); @@ -357,7 +360,6 @@ export class AddonMessagesDiscussionPage implements OnInit, OnDestroy, AfterView CoreDomUtils.showErrorModalDefault(error, 'addon.messages.errorwhileretrievingmessages', true); } finally { this.checkCanDelete(); - this.resizeContent(); this.loaded = true; this.setPolling(); // Make sure we're polling messages. this.setContactRequestInfo(); @@ -537,7 +539,9 @@ export class AddonMessagesDiscussionPage implements OnInit, OnDestroy, AfterView return; } - const messages = Array.from(document.querySelectorAll('.addon-message-not-mine')).slice(-this.newMessages).reverse(); + const messages = Array.from(this.hostElement.querySelectorAll('.addon-message-not-mine')) + .slice(-this.newMessages) + .reverse(); const newMessagesUnread = messages.findIndex((message) => { const elementRect = message.getBoundingClientRect(); @@ -1045,7 +1049,7 @@ export class AddonMessagesDiscussionPage implements OnInit, OnDestroy, AfterView return; } - let infiniteHeight = this.infinite?.infiniteEl?.nativeElement.getBoundingClientRect().height || 0; + let infiniteHeight = this.infinite?.hostElement.getBoundingClientRect().height || 0; const scrollHeight = (this.scrollElement?.scrollHeight || 0); // If there is an ongoing fetch, wait for it to finish. @@ -1060,7 +1064,7 @@ export class AddonMessagesDiscussionPage implements OnInit, OnDestroy, AfterView // Try to keep the scroll position. const scrollBottom = scrollHeight - (this.scrollElement?.scrollTop || 0); - const height = this.infinite?.infiniteEl?.nativeElement.getBoundingClientRect().height || 0; + const height = this.infinite?.hostElement.getBoundingClientRect().height || 0; if (this.canLoadMore && infiniteHeight && this.infinite) { // The height of the infinite is different while spinner is shown. Add that difference. infiniteHeight = infiniteHeight - height; @@ -1082,10 +1086,8 @@ export class AddonMessagesDiscussionPage implements OnInit, OnDestroy, AfterView /** * Keep scroll position after loading previous messages. - * We don't use resizeContent because the approach used is different and it isn't easy to calculate these positions. */ protected keepScroll(oldScrollHeight: number, oldScrollBottom: number, infiniteHeight: number, retries = 0): void { - setTimeout(() => { const newScrollHeight = (this.scrollElement?.scrollHeight || 0); @@ -1098,37 +1100,16 @@ export class AddonMessagesDiscussionPage implements OnInit, OnDestroy, AfterView return; } - const scrollTo = newScrollHeight - oldScrollBottom + infiniteHeight; + // Scroll has changed, but maybe it hasn't reached the full height yet. + setTimeout(() => { + const newScrollHeight = (this.scrollElement?.scrollHeight || 0); + const scrollTo = newScrollHeight - oldScrollBottom + infiniteHeight; - this.content!.scrollToPoint(0, scrollTo, 0); + this.content!.scrollToPoint(0, scrollTo, 0); + }, 30); }, 30); } - /** - * Content or scroll has been resized. For content, only call it if it's been added on top. - */ - resizeContent(): void { - /* @todo probably not needed. - let top = this.content!.getContentDimensions().scrollTop; - // @todo this.content.resize(); - - // Wait for new content height to be calculated. - setTimeout(() => { - // Visible content size changed, maintain the bottom position. - if (!this.viewDestroyed && (this.scrollElement?.clientHeight || 0) != this.oldContentHeight) { - if (!top) { - top = this.content!.getContentDimensions().scrollTop; - } - - top += this.oldContentHeight - (this.scrollElement?.clientHeight || 0); - this.oldContentHeight = (this.scrollElement?.clientHeight || 0); - - this.content!.scrollToPoint(0, top, 0); - } - }); - */ - } - /** * Scroll bottom when render has finished. * @@ -1160,7 +1141,7 @@ export class AddonMessagesDiscussionPage implements OnInit, OnDestroy, AfterView */ scrollToFirstUnreadMessage(): void { if (this.newMessages > 0) { - const messages = Array.from(document.querySelectorAll('.addon-message-not-mine')); + const messages = Array.from(this.hostElement.querySelectorAll('.addon-message-not-mine')); CoreDomUtils.scrollToElement(this.content!, messages[messages.length - this.newMessages]); } diff --git a/src/core/components/infinite-loading/infinite-loading.ts b/src/core/components/infinite-loading/infinite-loading.ts index 2a088dcf5..994f6ea43 100644 --- a/src/core/components/infinite-loading/infinite-loading.ts +++ b/src/core/components/infinite-loading/infinite-loading.ts @@ -13,7 +13,7 @@ // limitations under the License. import { Component, Input, Output, EventEmitter, OnChanges, SimpleChange, ViewChild, ElementRef } from '@angular/core'; -import { IonContent, IonInfiniteScroll } from '@ionic/angular'; +import { IonInfiniteScroll } from '@ionic/angular'; import { CoreDomUtils } from '@services/utils/dom'; import { CoreUtils } from '@services/utils/utils'; @@ -37,15 +37,16 @@ export class CoreInfiniteLoadingComponent implements OnChanges { @Output() action: EventEmitter<() => void>; // Will emit an event when triggered. @ViewChild('topbutton') topButton?: ElementRef; - @ViewChild('infinitescroll') infiniteEl?: ElementRef; @ViewChild('bottombutton') bottomButton?: ElementRef; @ViewChild('spinnercontainer') spinnerContainer?: ElementRef; @ViewChild(IonInfiniteScroll) infiniteScroll?: IonInfiniteScroll; loadingMore = false; // Hide button and avoid loading more. + hostElement: HTMLElement; - constructor(protected element: ElementRef) { + constructor(protected element: ElementRef) { this.action = new EventEmitter(); + this.hostElement = element.nativeElement; } /** @@ -76,14 +77,14 @@ export class CoreInfiniteLoadingComponent implements OnChanges { await CoreUtils.nextTick(); // Calculate distance from edge. - const content = this.element.nativeElement.closest('ion-content') as IonContent; + const content = this.hostElement.closest('ion-content'); if (!content) { return; } const scrollElement = await content.getScrollElement(); - const infiniteHeight = this.element.nativeElement.getBoundingClientRect().height; + const infiniteHeight = this.hostElement.getBoundingClientRect().height; const scrollTop = scrollElement.scrollTop; const height = scrollElement.offsetHeight; const threshold = height * THRESHOLD; @@ -141,11 +142,20 @@ export class CoreInfiniteLoadingComponent implements OnChanges { * @deprecated since 3.9.5 */ getHeight(): number { - // return this.element.nativeElement.getBoundingClientRect().height; + return (this.position == 'top' ? + this.getElementHeight(this.topButton?.nativeElement) : + this.getElementHeight(this.bottomButton?.nativeElement)) + + this.getElementHeight(this.infiniteScrollElement) + + this.getElementHeight(this.spinnerContainer?.nativeElement); + } - return (this.position == 'top' ? this.getElementHeight(this.topButton): this.getElementHeight(this.bottomButton)) + - this.getElementHeight(this.infiniteEl) + - this.getElementHeight(this.spinnerContainer); + /** + * Get the infinite scroll element. + * + * @return Element or null. + */ + get infiniteScrollElement(): HTMLIonInfiniteScrollElement | null { + return this.hostElement.querySelector('ion-infinite-scroll'); } /** @@ -154,9 +164,9 @@ export class CoreInfiniteLoadingComponent implements OnChanges { * @param element Element ref. * @return Height. */ - protected getElementHeight(element?: ElementRef): number { - if (element && element.nativeElement) { - return CoreDomUtils.getElementHeight(element.nativeElement, true, true, true); + protected getElementHeight(element?: HTMLElement | null): number { + if (element) { + return CoreDomUtils.getElementHeight(element, true, true, true); } return 0;