,
preCallback: () => void,
postCallback: () => void,
- useHide: boolean
+ useHide: boolean,
+ useSwap: boolean
) {
- this.preSwapScroll(useHide);
+ this.preSwapScroll(useHide, useSwap);
if (!!preCallback) {
preCallback();
}
@@ -408,19 +413,35 @@ export class MessagesComponent implements OnInit, OnDestroy {
if (!!postCallback) {
postCallback();
}
- this.postSwapScroll(useHide);
+ this.postSwapScroll(useHide, useSwap);
});
});
}
- preSwapScroll(useHide: boolean) {
+ preSwapScroll(useHide: boolean, useSwap: boolean) {
+ if (useSwap && !this.swapped) {
+ this.chatMessagesBuffer.nativeElement.innerHTML = this.chatMessagesContainer.nativeElement.innerHTML;
+ this.chatMessagesBuffer.nativeElement.scrollTop = this.chatMessagesContainer.nativeElement.scrollTop;
+ this.chatMessagesBufferContainer.nativeElement.classList.remove(
+ 'disappear'
+ );
+ this.swapped = true;
+ }
+
if (useHide && !this.hidden) {
this.chatMessagesContainer.nativeElement.classList.add('hide');
this.hidden = true;
}
}
- postSwapScroll(useHide: boolean) {
+ postSwapScroll(useHide: boolean, useSwap: boolean) {
+ if (useSwap && this.swapped) {
+ this.chatMessagesBuffer.nativeElement.innerHTML = '';
+ this.chatMessagesBuffer.nativeElement.scrollTop = 0;
+ this.chatMessagesBufferContainer.nativeElement.classList.add('disappear');
+ this.swapped = false;
+ }
+
if (useHide && this.hidden) {
this.chatMessagesContainer.nativeElement.classList.remove('hide');
this.hidden = false;
@@ -434,12 +455,13 @@ export class MessagesComponent implements OnInit, OnDestroy {
scrollToBottom(): void {
if (!!this.storedScrollItem) {
if (!!this.readToHereEvent && this.firstCheckReadHere) {
- this.scrollTo(
+ this.swapScrollTo(
this.readToHereEvent,
() => {},
() => {
this.firstCheckReadHere = false;
},
+ true,
true
);
} else {
@@ -447,13 +469,14 @@ export class MessagesComponent implements OnInit, OnDestroy {
i => i.seq === this.storedScrollItem.seq
);
- this.scrollTo(
+ this.swapScrollTo(
1 <= index ? this.eventList[index - 1] : this.eventList[0],
() => {},
() => {
this.storedScrollItem = undefined;
},
- false
+ true,
+ true
);
}
} else if (this.scrollUpInitalized) {
@@ -464,31 +487,34 @@ export class MessagesComponent implements OnInit, OnDestroy {
}
} else {
if (!!this.readToHereEvent && this.firstCheckReadHere) {
- this.scrollTo(
+ this.swapScrollTo(
this.readToHereEvent,
() => {},
() => {
this.firstCheckReadHere = false;
},
- true
+ true,
+ false
);
} else {
if (
this.virtualScroller.viewPortInfo.endIndex ===
this.eventList.length - 2
) {
- this.scrollTo(
+ this.swapScrollTo(
this.eventList[this.eventList.length - 1],
() => {},
() => {},
+ true,
false
);
} else {
- this.scrollTo(
+ this.swapScrollTo(
this.eventList[this.eventList.length - 1],
() => {},
() => {},
- true
+ true,
+ false
);
}
}
@@ -534,7 +560,7 @@ export class MessagesComponent implements OnInit, OnDestroy {
if (this.scrollUpInitalized && this.eventRemained) {
this.storeScrollPosition();
- this.preSwapScroll(false);
+ this.preSwapScroll(true, true);
this.moreEvent.emit(this.eventList[0].seq);
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/ucap-ui-chat.module.ts b/projects/ucap-webmessenger-ui-chat/src/lib/ucap-ui-chat.module.ts
index d1155ae9..6a096a94 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/ucap-ui-chat.module.ts
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/ucap-ui-chat.module.ts
@@ -4,9 +4,6 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { FlexLayoutModule } from '@angular/flex-layout';
-import { ScrollingModule } from '@angular/cdk/scrolling';
-import { ScrollingModule as ExperimentalScrollingModule } from '@angular/cdk-experimental/scrolling';
-
import { MatTooltipModule } from '@angular/material';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
@@ -78,9 +75,6 @@ const PROVIDERS = [DatePipe];
ReactiveFormsModule,
FlexLayoutModule,
- ScrollingModule,
- ExperimentalScrollingModule,
-
MatFormFieldModule,
MatIconModule,
MatInputModule,
From b1ed539d46e289a0fa30c43cd768fe658352beee Mon Sep 17 00:00:00 2001
From: richard-loafle <44828666+richard-loafle@users.noreply.github.com>
Date: Thu, 30 Jan 2020 17:06:01 +0900
Subject: [PATCH 3/3] virtual-scroller is added
---
.../left-sidenav/organization.component.html | 11 ++++++-----
.../components/left-sidenav/organization.component.ts | 10 ++++++----
.../app/layouts/messenger/messenger.layout.module.ts | 2 ++
3 files changed, 14 insertions(+), 9 deletions(-)
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
index 77995867..ae9341a2 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
@@ -88,14 +88,15 @@
-
-
+
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.ts
index 53a0765f..6ae7a8b2 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.ts
@@ -66,6 +66,7 @@ import {
} from '../../dialogs/organization/selected-user-list.dialog.component';
import { TranslateService } from '@ngx-translate/core';
import { StringFormatterPhonePipe } from 'projects/ucap-webmessenger-ui/src/lib/pipes/string.pipe';
+import { VirtualScrollerComponent } from 'ngx-virtual-scroller';
@Component({
selector: 'app-layout-chat-left-sidenav-organization',
@@ -120,8 +121,9 @@ export class OrganizationComponent
@ViewChild('cvsvDeptUser', { static: false })
cvsvDeptUser: CdkVirtualScrollViewport;
- @ViewChild('cvsvDeptSearchUser', { static: false })
- cvsvDeptSearchUser: CdkVirtualScrollViewport;
+
+ @ViewChild('vsDeptSearchUser', { static: false })
+ private vsDeptSearchUser: VirtualScrollerComponent;
@ViewChild(PerfectScrollbarDirective, { static: false })
psDirectiveRef?: PerfectScrollbarDirective;
@@ -306,8 +308,8 @@ export class OrganizationComponent
this.searchUserInfos = searchUserInfos;
this.selectedDepartmentProcessing = false;
- if (!!this.cvsvDeptSearchUser) {
- this.cvsvDeptSearchUser.scrollToOffset(0);
+ if (!!this.vsDeptSearchUser) {
+ this.vsDeptSearchUser.scrollToIndex(0);
}
if (!!this.psDirectiveRef) {
this.psDirectiveRef.update();
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts
index decd71d3..f390f876 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts
@@ -39,6 +39,7 @@ import { MatListModule } from '@angular/material/list';
import { MatChipsModule } from '@angular/material/chips';
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
+import { VirtualScrollerModule } from 'ngx-virtual-scroller';
import { TranslateModule } from '@ngx-translate/core';
@@ -93,6 +94,7 @@ import { DIALOGS } from './dialogs';
MatSidenavModule,
PerfectScrollbarModule,
+ VirtualScrollerModule,
TranslateModule,