nova/Chatto
1
0
Fork 0
Code Issues 7 Pull Requests Releases Wiki Activity

Wrapped markdownit js dep into a service, and added send and receive templates to chatview

Browse Source
This commit is contained in:
nova 2019-12-07 16:15:29 +05:30
parent ba7dbb6f93
commit 874683ad0c
6 changed files with 75 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
chatto/src/main/javascript/ts/src/service/MarkDownItMarkDownService.ts Normal file
View File

@ -0,0 +1,9 @@
import markdownit = require('markdown-it');
import { MarkDownService } from './MarkDownService';
export class MarkDownItMarkDownService implements MarkDownService {
private readonly _md = new markdownit();
render(inputString: string): string {
return this._md.render(inputString);
}
}

3
chatto/src/main/javascript/ts/src/service/MarkDownService.ts Normal file
View File

@ -0,0 +1,3 @@
export interface MarkDownService {
render(inputString: string): string;
}

2
chatto/src/main/javascript/ts/src/singleton/AuthToken.ts
View File

@ -1,2 +0,0 @@
export let authToken: string | null = null;
// localStorage.getItem('authToken')

32
chatto/src/main/javascript/ts/src/view/ChatView.ts
View File

@ -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)));
// html += this._messageSendTemplate(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);

66
chatto/src/main/resources/static/js/bundle.js
View File

File diff suppressed because one or more lines are too long

10
chatto/src/main/resources/templates/chat.html
View File

@ -10,16 +10,6 @@
<meta charset="UTF-8">
<title id="pageTitle">Chat</title>
</div>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/sjcl/1.0.8/sjcl.min.js" integrity="sha256-nIoG9XIePM1QNttI6KAGLYGNxc4DNinxxmOZW0/Z7uA=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.4.2/handlebars.min.js" integrity="sha256-oh7N5nthuhldTk8/34Za7FXv3BkeVN9vAnYk/pLfC78=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.0.3/purify.min.js" integrity="sha256-58eGKW6SunbeAY1RP9WEbg3nViB9o1qDnxV4yCITqx4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/10.0.0/markdown-it.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.12.0/alertify.min.js" integrity="sha256-yscIZgtlDR9q6eoYCRmcaiNE6W80UFSnq+6Llwu4NLI=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.12.0/css/alertify.min.css" integrity="sha256-nhstgDCuZGQRk+wvwXZIPt278arHtuZKJ1YQ0rrXiL4=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.12.0/css/themes/default.css" integrity="sha256-dawRQVhnqw8jRXaGnK0aj/NpOsPaQm+Em1sWN+fvegI=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.12.0/css/themes/bootstrap.css" integrity="sha256-1fgYpB3cyITZIur7E+Mj3R54NtlN9HwHykgKTJf0pmU=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/3.4.5/fuse.min.js" integrity="sha256-Yrh3VGzE4d9b4KANknPJAhfcKt9SgHTL0v/FrJFoPzw=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/loglevel/1.6.4/loglevel.min.js" integrity="sha256-ACTlnmNCkOooSKkPCKYbiex8WLE82aeiN+Z9ElZag5Q=" crossorigin="anonymous"></script> -->
<script src="./../../javascript/bundle.js" th:src="@{/js/bundle.js}" defer></script>
<link rel="stylesheet" th:href="@{/css/chat.css}" href="../../resources/static/css/chat.css">