56 lines
1.6 KiB
JavaScript
56 lines
1.6 KiB
JavaScript
const timeout = 30000;
|
|
|
|
class Message {
|
|
constructor(object, onDestroy) {
|
|
this.target = object.target;
|
|
this.context = object.context;
|
|
this.message = object.message;
|
|
this.self = object.self;
|
|
}
|
|
|
|
createEl() {
|
|
this.element = document.createElement('li');
|
|
this.element.className = "item";
|
|
this.element.style.position = "relative";
|
|
let name = document.createElement('span');
|
|
name.className = "text name";
|
|
name.style.color = this.context.color;
|
|
name.innerHTML = escapeHtml(this.context["display-name"]);
|
|
this.element.appendChild(name);
|
|
|
|
let message = document.createElement('span');
|
|
message.innerHTML = escapeHtml(this.message);
|
|
message.className = "text message";
|
|
this.element.appendChild(message);
|
|
|
|
setTimeout(() => this.destroy(), timeout);
|
|
return this.element;
|
|
}
|
|
|
|
destroy() {
|
|
console.log(this.element);
|
|
this.element.className += ' destroy';
|
|
}
|
|
}
|
|
|
|
function escapeHtml(unsafe) {
|
|
return unsafe
|
|
.replace(/&/g, "&")
|
|
.replace(/</g, "<")
|
|
.replace(/>/g, ">")
|
|
.replace(/"/g, """)
|
|
.replace(/'/g, "'");
|
|
}
|
|
|
|
function addMessage(object) {
|
|
messages .className = "";
|
|
let message = new Message(object);
|
|
messages.appendChild(message.createEl());
|
|
messages.style.bottom = '-' + message.element.offsetHeight + 'px';
|
|
messages.className = "slide";
|
|
};
|
|
|
|
let messages = document.getElementById('messages');
|
|
let socket = io();
|
|
socket.on('message', addMessage);
|