|
|
|
@ -1,42 +1,44 @@ |
|
|
|
import { Observer } from "../observe/Observer"; |
|
|
|
import { Model } from "../model/AbstractModel"; |
|
|
|
import { Subject } from "../observe/Observable"; |
|
|
|
import { View } from "./AbstractView"; |
|
|
|
import { Controller } from "../controller/AbstractController"; |
|
|
|
import { TemplateFactory } from "../template/TemplateFactory"; |
|
|
|
import { ActiveUserViewModel } from "../viewmodel/ActiveUserViewModel"; |
|
|
|
import { ChatModel } from "../model/ChatModel"; |
|
|
|
import { ChatMessageViewModel } from "../viewmodel/ChatMessageViewModel"; |
|
|
|
import * as log from 'loglevel'; |
|
|
|
import * as DOMPurify from 'dompurify'; |
|
|
|
import markdownit = require('markdown-it'); |
|
|
|
var md = new markdownit(); |
|
|
|
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 _model: ChatModel; |
|
|
|
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._model = model; |
|
|
|
this._element = element; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
update(data: ChatMessageViewModel[]): void { |
|
|
|
log.info('ChatView: updating view'); |
|
|
|
let html: string = ""; |
|
|
|
// let html: string = "";
|
|
|
|
data.forEach((vm: ChatMessageViewModel) => { |
|
|
|
const vmTemp = vm; |
|
|
|
vmTemp.message = md.render(vm.message); |
|
|
|
$(this._element).append(DOMPurify.sanitize(this._messageSendTemplate(vmTemp))); |
|
|
|
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);
|
|
|
|
}); |
|
|
|
|
|
|
|
/** Very Important!!! |
|
|
|
* Sanitizing HTML before displaying on webpage to prevent XSS attacks!! |
|
|
|
*/ |
|
|
|
// html = DOMPurify.sanitize(md.render(html));
|
|
|
|
// this._element.innerHTML = html;
|
|
|
|
// log.debug(this._element.innerHTML);
|
|
|
|
|
