chat messages are loaded on scroll top
This commit is contained in:
parent
5452a2d418
commit
d927f3441a
@ -89,7 +89,7 @@ export class ChatModel implements Subject {
|
|||||||
// })
|
// })
|
||||||
const newArr = cVMs.concat(existingMessages)
|
const newArr = cVMs.concat(existingMessages)
|
||||||
// log.debug(newArr);
|
// log.debug(newArr);
|
||||||
this.storeUserMessages(contactName, newArr);
|
this.storeUserMessages(contactName, cVMs);
|
||||||
// this.storeUserMessages(contactName, cVMs);
|
// this.storeUserMessages(contactName, cVMs);
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
|
@ -41,10 +41,12 @@ export class ChatView implements Observer {
|
|||||||
update(data: ChatMessageViewModel[]): void {
|
update(data: ChatMessageViewModel[]): void {
|
||||||
log.info('ChatView: updating view');
|
log.info('ChatView: updating view');
|
||||||
// let html: string = "";
|
// let html: string = "";
|
||||||
this._messageContainer.innerHTML = "";
|
// let currentMsg = $('.msg:first');
|
||||||
|
// this._messageContainer.innerHTML = "";
|
||||||
const rev: ChatMessageViewModel[] = Object.create(data)
|
const rev: ChatMessageViewModel[] = Object.create(data)
|
||||||
rev.reverse();
|
rev.reverse();
|
||||||
data.forEach((vm: ChatMessageViewModel) => {
|
let arr: string[] = [];
|
||||||
|
rev.forEach((vm: ChatMessageViewModel) => {
|
||||||
const vmTemp: ChatMessageViewModel = { ...vm };
|
const vmTemp: ChatMessageViewModel = { ...vm };
|
||||||
vmTemp.message = this._markdownService.render(vm.message);
|
vmTemp.message = this._markdownService.render(vm.message);
|
||||||
/** Very Important!!!
|
/** Very Important!!!
|
||||||
@ -58,11 +60,18 @@ export class ChatView implements Observer {
|
|||||||
else {
|
else {
|
||||||
rendered = DOMPurify.sanitize(this._messageReceiveTemplate(vmTemp));
|
rendered = DOMPurify.sanitize(this._messageReceiveTemplate(vmTemp));
|
||||||
}
|
}
|
||||||
$(this._messageContainer).append(rendered);
|
$(this._messageContainer).prepend(rendered);
|
||||||
|
// if (currentMsg.position() != null) {
|
||||||
|
// $(this._messageContainer).scrollTop(currentMsg.position().top)
|
||||||
|
// }
|
||||||
|
|
||||||
// log.debug(vm)
|
// log.debug(vm)
|
||||||
// log.debug(vmTemp)
|
// log.debug(vmTemp)
|
||||||
// html += this._messageSendTemplate(vm);
|
// html += this._messageSendTemplate(vm);
|
||||||
});
|
});
|
||||||
|
// if (currentMsg.position() != null) {
|
||||||
|
// $(this._messageContainer).scrollTop(currentMsg.position().top)
|
||||||
|
// }
|
||||||
|
|
||||||
// html = DOMPurify.sanitize(md.render(html));
|
// html = DOMPurify.sanitize(md.render(html));
|
||||||
// this._element.innerHTML = html;
|
// this._element.innerHTML = html;
|
||||||
@ -149,7 +158,6 @@ export class ChatView implements Observer {
|
|||||||
fetch(JsonAPI.MESSAGE_POST, {
|
fetch(JsonAPI.MESSAGE_POST, {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: headers,
|
headers: headers,
|
||||||
body: JSON.stringify(chatMessageDTO)
|
|
||||||
})
|
})
|
||||||
.then(response => {
|
.then(response => {
|
||||||
log.debug(response);
|
log.debug(response);
|
||||||
@ -162,6 +170,7 @@ export class ChatView implements Observer {
|
|||||||
chatMessagePageLoadAjax() {
|
chatMessagePageLoadAjax() {
|
||||||
this._messageContainer.addEventListener('scroll', (e) => {
|
this._messageContainer.addEventListener('scroll', (e) => {
|
||||||
if ($(this._messageContainer).scrollTop() == 0) {
|
if ($(this._messageContainer).scrollTop() == 0) {
|
||||||
|
let currentMsg = $('.msg:first');
|
||||||
log.debug('Reached top')
|
log.debug('Reached top')
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
let passphrase: string;
|
let passphrase: string;
|
||||||
@ -179,7 +188,10 @@ export class ChatView implements Observer {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (JsonAPI.contactName != null)
|
if (JsonAPI.contactName != null)
|
||||||
this._chatModel.getMessages(JsonAPI.contactName , passphrase, null);
|
this._chatModel.getMessages(JsonAPI.contactName, passphrase, null).then(() => {
|
||||||
|
log.debug(currentMsg.offset()!.top)
|
||||||
|
$(this._messageContainer).scrollTop(currentMsg.position()!.top - $('.msg').position()!.top)
|
||||||
|
});
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
@ -232,7 +232,7 @@
|
|||||||
<div class="img_cont_msg">
|
<div class="img_cont_msg">
|
||||||
<img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img_msg">
|
<img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img_msg">
|
||||||
</div>
|
</div>
|
||||||
<div class="msg_container">
|
<div class="msg msg_container">
|
||||||
{{{message}}}
|
{{{message}}}
|
||||||
<span class="msg_time">{{messageTime}}</span>
|
<span class="msg_time">{{messageTime}}</span>
|
||||||
</div>
|
</div>
|
||||||
@ -241,7 +241,7 @@
|
|||||||
|
|
||||||
<template id="msg_container_send_template">
|
<template id="msg_container_send_template">
|
||||||
<div class="d-flex justify-content-end mb-4">
|
<div class="d-flex justify-content-end mb-4">
|
||||||
<div class="msg_container_send">
|
<div class="msg msg_container_send">
|
||||||
{{{message}}}
|
{{{message}}}
|
||||||
<span class="msg_time_send">{{messageTime}}</span>
|
<span class="msg_time_send">{{messageTime}}</span>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user