refactoring of chat room
This commit is contained in:
parent
6657461150
commit
ae55cee3ab
|
@ -424,6 +424,9 @@ export class Effects {
|
|||
break;
|
||||
case SSVC_TYPE_EVENT_INFO_RES:
|
||||
{
|
||||
if (!!infoList && 0 < infoList.length) {
|
||||
infoList = infoList.sort((a, b) => a.seq - b.seq);
|
||||
}
|
||||
if (
|
||||
infoList.length > 0 &&
|
||||
infoList.length >= req.requestCount &&
|
||||
|
|
|
@ -23,6 +23,7 @@
|
|||
</ucap-chat-message-box-date-splitter>
|
||||
|
||||
<div
|
||||
#mbChatRow
|
||||
class="chat-row"
|
||||
[@shake]="{
|
||||
value: shakeIt,
|
||||
|
|
|
@ -96,6 +96,9 @@ export class MessageBoxComponent implements OnInit, AfterViewInit {
|
|||
@ViewChild('mbContainer', { static: true })
|
||||
mbContainer: ElementRef<HTMLElement>;
|
||||
|
||||
@ViewChild('mbChatRow', { static: true })
|
||||
mbChatRow: ElementRef<HTMLElement>;
|
||||
|
||||
EventType = EventType;
|
||||
|
||||
moment = moment;
|
||||
|
@ -104,13 +107,17 @@ export class MessageBoxComponent implements OnInit, AfterViewInit {
|
|||
existReadHere = false;
|
||||
shakeIt = false;
|
||||
|
||||
get offsetTop() {
|
||||
return this.mbChatRow.nativeElement.offsetTop;
|
||||
}
|
||||
|
||||
constructor(
|
||||
private changeDetectorRef: ChangeDetectorRef,
|
||||
private logger: NGXLogger
|
||||
) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.mbContainer.nativeElement.classList.add('hide');
|
||||
// this.mbContainer.nativeElement.classList.add('hide');
|
||||
}
|
||||
|
||||
ngAfterViewInit(): void {
|
||||
|
@ -122,7 +129,7 @@ export class MessageBoxComponent implements OnInit, AfterViewInit {
|
|||
// .nativeElement.offsetHeight + 20}px`;
|
||||
// this.elementRef.nativeElement.style.maxHeight = `${this.mbContainer
|
||||
// .nativeElement.offsetHeight + 20}px`;
|
||||
this.mbContainer.nativeElement.classList.remove('hide');
|
||||
// this.mbContainer.nativeElement.classList.remove('hide');
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -122,6 +122,7 @@ export class MessagesComponent implements OnInit, OnDestroy {
|
|||
chatMessageBoxList: QueryList<MessageBoxComponent>;
|
||||
|
||||
storedScrollItem: Info<EventJson>; // 이전대화를 불러올 경우 현재 스크롤 포지션 유지를 위한 값. 0 이면 초기로딩.
|
||||
storedScrollItemOffsetTop: number | undefined;
|
||||
scrollUpInitalized = false; // ps 에서 초기 로딩시 scroll reach start 이벤트 발생 버그를 우회하기 위한 init 값으로 scrollUp 에 의해 true 로 된다.
|
||||
firstCheckReadHere = true;
|
||||
initRoomLastEventSeq: number;
|
||||
|
@ -395,6 +396,17 @@ export class MessagesComponent implements OnInit, OnDestroy {
|
|||
this.storedScrollItem = this.eventList[
|
||||
this.virtualScroller.viewPortInfo.startIndex
|
||||
];
|
||||
|
||||
const chatMessageBox = this.chatMessageBoxList.find(
|
||||
el =>
|
||||
el.message.seq ===
|
||||
this.eventList[this.virtualScroller.viewPortInfo.startIndex].seq
|
||||
);
|
||||
if (!!chatMessageBox) {
|
||||
this.storedScrollItemOffsetTop = chatMessageBox.offsetTop;
|
||||
} else {
|
||||
this.storedScrollItemOffsetTop = 0;
|
||||
}
|
||||
}
|
||||
|
||||
swapScrollTo(
|
||||
|
@ -408,14 +420,23 @@ export class MessagesComponent implements OnInit, OnDestroy {
|
|||
if (!!preCallback) {
|
||||
preCallback();
|
||||
}
|
||||
this.virtualScroller.scrollInto(to, true, 0, 0, () => {
|
||||
|
||||
this.virtualScroller.scrollInto(
|
||||
to,
|
||||
true,
|
||||
undefined !== this.storedScrollItemOffsetTop
|
||||
? -this.storedScrollItemOffsetTop
|
||||
: 0,
|
||||
0,
|
||||
() => {
|
||||
setTimeout(() => {
|
||||
if (!!postCallback) {
|
||||
postCallback();
|
||||
}
|
||||
this.postSwapScroll(useHide, useSwap);
|
||||
});
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
preSwapScroll(useHide: boolean, useSwap: boolean) {
|
||||
|
@ -465,15 +486,12 @@ export class MessagesComponent implements OnInit, OnDestroy {
|
|||
true
|
||||
);
|
||||
} else {
|
||||
const index = this.eventList.findIndex(
|
||||
i => i.seq === this.storedScrollItem.seq
|
||||
);
|
||||
|
||||
this.swapScrollTo(
|
||||
1 <= index ? this.eventList[index - 1] : this.eventList[0],
|
||||
this.storedScrollItem,
|
||||
() => {},
|
||||
() => {
|
||||
this.storedScrollItem = undefined;
|
||||
this.storedScrollItemOffsetTop = undefined;
|
||||
},
|
||||
true,
|
||||
true
|
||||
|
@ -525,18 +543,17 @@ export class MessagesComponent implements OnInit, OnDestroy {
|
|||
// 방정보가 바뀌면 이전대화 보기 관련 값들을 초기화 한다.
|
||||
this.scrollUpInitalized = false;
|
||||
this.storedScrollItem = undefined;
|
||||
this.storedScrollItemOffsetTop = undefined;
|
||||
}
|
||||
|
||||
clear() {}
|
||||
|
||||
gotoPosition(eventSeq: number) {
|
||||
if (!!this.virtualScroller) {
|
||||
const index = this.eventList.findIndex(v => v.seq === eventSeq);
|
||||
this.virtualScroller.scrollInto(
|
||||
1 <= index ? this.eventList[index - 1] : this.eventList[0],
|
||||
true,
|
||||
0,
|
||||
100,
|
||||
const e = this.eventList.find(v => v.seq === eventSeq);
|
||||
this.swapScrollTo(
|
||||
e,
|
||||
() => {},
|
||||
() => {
|
||||
const chatMessageBox = this.chatMessageBoxList.find(
|
||||
el => el.message.seq === eventSeq
|
||||
|
@ -544,7 +561,9 @@ export class MessagesComponent implements OnInit, OnDestroy {
|
|||
if (!!chatMessageBox) {
|
||||
chatMessageBox.shake();
|
||||
}
|
||||
}
|
||||
},
|
||||
true,
|
||||
true
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user