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

bug of chat room is fixed

Browse Source
This commit is contained in:
richard-loafle 2020-01-30 17:05:22 +09:00
parent 9069a58627
commit d71d13c676
4 changed files with 50 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -82,7 +82,9 @@
</virtual-scroller>
<div
#chatMessagesBuffer
#chatMessagesBufferContainer
fxFlexFill
class="chat-messages-buffer disappear"
></div>
class="chat-messages-buffer-container disappear"
>
<div #chatMessagesBuffer fxFlexFill class="chat-messages-buffer"></div>
</div>

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

@ -164,10 +164,12 @@ $tablet-l-width: 1024px;
display: none !important;
}
.chat-messages-buffer {
.chat-messages-buffer-container {
position: absolute;
top: 0px;
overflow-y: hidden !important;
padding: 30px 40px;
padding: 2vh 2vw;
flex-direction: column;
.chat-messages-buffer {
}
}

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

@ -112,6 +112,9 @@ export class MessagesComponent implements OnInit, OnDestroy {
@ViewChild('chatMessagesBuffer', { static: false })
chatMessagesBuffer: ElementRef<HTMLElement>;
@ViewChild('chatMessagesBufferContainer', { static: false })
chatMessagesBufferContainer: ElementRef<HTMLElement>;
@ViewChild(VirtualScrollerComponent, { static: false })
private virtualScroller: VirtualScrollerComponent;
@ -148,6 +151,7 @@ export class MessagesComponent implements OnInit, OnDestroy {
readToHereEvent: Info<EventJson>;
existReadToHereEvent = true;
hidden = false;
swapped = false;
constructor(
private logger: NGXLogger,
@ -393,13 +397,14 @@ export class MessagesComponent implements OnInit, OnDestroy {
];
}
scrollTo(
swapScrollTo(
to: Info<EventJson>,
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);

6
projects/ucap-webmessenger-ui-chat/src/lib/ucap-ui-chat.module.ts
View File

@ -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,