You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
46 lines
1.9 KiB
46 lines
1.9 KiB
import { Observer } from "../observe/Observer";
|
|
import { TemplateFactory } from "../template/TemplateFactory";
|
|
import { ChatModel } from "../model/ChatModel";
|
|
import { ChatMessageViewModel } from "../viewmodel/ChatMessageViewModel";
|
|
import * as log from 'loglevel';
|
|
import * as DOMPurify from 'dompurify';
|
|
import { MarkDownService } from "../service/MarkDownService";
|
|
import { MarkDownItMarkDownService } from "../service/MarkDownItMarkDownService";
|
|
import { JsonAPI } from "../singleton/JsonAPI";
|
|
// var md = new markdownit();
|
|
|
|
export class ChatView implements Observer {
|
|
private readonly _element: HTMLElement;
|
|
private readonly _messageSendTemplate = TemplateFactory.getTemplate('msg_container_send_template');
|
|
private readonly _messageReceiveTemplate = TemplateFactory.getTemplate('msg_container_template');
|
|
private readonly _markdownService: MarkDownService = new MarkDownItMarkDownService();
|
|
|
|
|
|
constructor(model: ChatModel, element: HTMLElement) {
|
|
this._element = element;
|
|
}
|
|
|
|
|
|
update(data: ChatMessageViewModel[]): void {
|
|
log.info('ChatView: updating view');
|
|
// let html: string = "";
|
|
data.forEach((vm: ChatMessageViewModel) => {
|
|
const vmTemp = vm;
|
|
vmTemp.message = this._markdownService.render(vm.message);
|
|
/** Very Important!!!
|
|
* Sanitizing HTML before displaying on webpage to prevent XSS attacks!!
|
|
*/
|
|
if (vmTemp.fromUser == JsonAPI.userName) {
|
|
$(this._element).append(DOMPurify.sanitize(this._messageSendTemplate(vmTemp)));
|
|
}
|
|
else {
|
|
$(this._element).append(DOMPurify.sanitize(this._messageReceiveTemplate(vmTemp)));
|
|
}
|
|
// html += this._messageSendTemplate(vm);
|
|
});
|
|
|
|
// html = DOMPurify.sanitize(md.render(html));
|
|
// this._element.innerHTML = html;
|
|
// log.debug(this._element.innerHTML);
|
|
}
|
|
}
|