ucap/next-ucap-messenger
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

more rendering is implemented

Browse Source
This commit is contained in:
Richard Park 2020-01-20 18:01:31 +09:00
parent 49cc27c257
commit 852eb6314f
3 changed files with 36 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html
View File

@ -12,11 +12,7 @@
[modifyOverflowStyleOfParentScroll]="false"
(vsChange)="onVsChange($event)"
>
<div
#chatMessagesContainer
class="chat-messages hide"
[style.opacity]="fixScreen ? 0 : 1"
>
<div #chatMessagesContainer class="chat-messages">
<div
*ngIf="eventRemained && eventList.length > 0"
class="message-row view-previous"
@ -83,3 +79,9 @@
</div>
</div>
</virtual-scroller>
<div
#chatMessagesBuffer
fxFlexFill
class="chat-messages-buffer disappear"
></div>

12
projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss
View File

@ -189,3 +189,15 @@ $meBox-bg: #ffffff;
.hide {
opacity: 0 !important;
}
.disappear {
display: none !important;
}
.chat-messages-buffer {
position: absolute;
top: 0px;
overflow-y: hidden !important;
padding: 30px 40px;
flex-direction: column;
}

26
projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts
View File

@ -108,6 +108,9 @@ export class MessagesComponent implements OnInit, OnDestroy {
@ViewChild('chatMessagesContainer', { static: false })
chatMessagesContainer: ElementRef<HTMLElement>;
@ViewChild('chatMessagesBuffer', { static: false })
chatMessagesBuffer: ElementRef<HTMLElement>;
@ViewChild(PerfectScrollbarDirective, { static: false })
psChatContent: PerfectScrollbarDirective;
@ -142,7 +145,6 @@ export class MessagesComponent implements OnInit, OnDestroy {
moment = moment;
existReadHere = false;
fixScreen = false;
constructor(
private logger: NGXLogger,
@ -382,11 +384,13 @@ export class MessagesComponent implements OnInit, OnDestroy {
}
scrollToStoredItem() {
if (!this.scrollUpInitalized) {
this.chatMessagesContainer.nativeElement.classList.remove('hide');
}
this.virtualScroller.scrollInto(this.storedScrollItem, true, 0, 0, () => {
this.chatMessagesBuffer.nativeElement.innerHTML = '';
this.chatMessagesBuffer.nativeElement.scrollTop = 0;
this.chatMessagesBuffer.nativeElement.classList.add('disappear');
this.chatMessagesContainer.nativeElement.classList.remove('hide');
this.storedScrollItem = undefined;
});
}
@ -472,10 +476,7 @@ export class MessagesComponent implements OnInit, OnDestroy {
if (!!this.virtualScroller) {
const e = this.eventList.find(v => v.seq === eventSeq);
this.fixScreen = true;
this.virtualScroller.scrollInto(e, false, undefined, 0, () => {
this.fixScreen = false;
});
this.virtualScroller.scrollInto(e, false, undefined, 0, () => {});
}
}
@ -491,6 +492,13 @@ export class MessagesComponent implements OnInit, OnDestroy {
// this.storedScrollItem = this.psChatContent.elementRef.nativeElement.scrollHeight;
this.storeScrollPosition();
this.chatMessagesBuffer.nativeElement.innerHTML = this.chatMessagesContainer.nativeElement.innerHTML;
this.chatMessagesBuffer.nativeElement.scrollTop = this.chatMessagesContainer.nativeElement.scrollTop;
this.chatMessagesBuffer.nativeElement.classList.remove('disappear');
this.chatMessagesContainer.nativeElement.classList.add('hide');
this.changeDetectorRef.detectChanges();
this.moreEvent.emit(this.eventList[0].seq);
this.virtualScroller.invalidateCachedMeasurementAtIndex(0);