Titivillus/quest/static/quest.js

/* House keeping */
var socket = new WebSocket('wss://' + document.domain + SCRIPT_NAME + '/ws/quest/' + quest_id + '/');
socket.oldSend = socket.send;
socket.send = function(event_title, data) {
	data = JSON.stringify({event: event_title, data: data});
	socket.oldSend.apply(this, [data]);
}
socket.events = {};
socket.onmessage = function(e) {
	let data = JSON.parse(e.data);
	let event = data.event;
	data = data.data;
	if (socket.events[event] === undefined) { return; }
	socket.events[event](data);
}
function load() {
	document.getElementById('chatWindow').scrollTop = document.getElementById('chatWindow').scrollHeight;
	let mtarea = document.getElementById('messageTextArea');
	mtarea.addEventListener('keypress', function(event) {
		if (event.key == 'Enter' && !event.shiftKey) {
			let text = mtarea.value.trim();
			mtarea.value = '';
			if (text == '') { return; }
			document.getElementById('chatWindow').scrollTop = document.getElementById('chatWindow').scrollHeight;
			socket.send('message', {message: text, quest_id: quest_id});
		}
	});
}

/* Websocket events */
socket.events['message'] = function(data) {
	let msg_str = '<div id="message-' + data.message_id + '" class="message">';
	msg_str = '<div class="messageHeader"><span class="messageName">' + data.name + '</span> ';
	msg_str += '<span class="messageDate">' + strftime(data.date) + '</span> ';
	msg_str += '<span class="messageID">No.<a href="javascript:quote(' + data.message_id + ')">' + data.message_id + '</a></span></div>';
	msg_str += '<div class="messageContent">' + data.message + '</div></div><hr>';

	let mbox = document.getElementById('chatWindow');
	mbox.innerHTML = mbox.innerHTML + msg_str;
	if ((mbox.scrollTop + mbox.offsetHeight) >= (mbox.scrollHeight - mbox.clientHeight / 2)) {
		mbox.scrollTop = mbox.scrollHeight;
	}
}

/* Helpers */
function padToTwo(number) {
	if (number<=99) { number = ("0"+number).slice(-2); }
	return number;
}
function strftime(date) {
	date = new Date(date * 1000);
	let date_str = date.getFullYear() + '-' + padToTwo(date.getMonth()+1) + '-' + padToTwo(date.getDate()) + ' ';
	date_str += padToTwo(date.getHours()) + ':' + padToTwo(date.getMinutes()) + ':' + padToTwo(date.getSeconds());
	return date_str;
}

/* User-facing */
function quote(message_id) {
	let textbox = document.getElementById('messageTextArea');
	textbox.value += '>>' + message_id + '\n';
	textbox.focus();
}
function showPreview(event, message_id) {
	let elem = document.getElementById('msg-' + message_id);
	if (!elem) { return; }
	let preview = document.getElementById('preview');
	preview.innerHTML = elem.innerHTML;
	preview.style.display = '';
	let x = event.clientX + 20 + 'px';
	let y = event.clientY + 20 + 'px';
	let maxWidth = window.innerWidth - event.clientX - 80 + 'px';
	preview.style.top = y;
	preview.style.left = x;
	preview.style.maxWidth = maxWidth;
}
function clearPreview() {
	document.getElementById('preview').innerHTML = '';
	document.getElementById('preview').style.display = 'none';
}
function scrollToMsg(message_id) {
	let elem = document.getElementById('msg-' + message_id);
	if (!elem) { return; }
	elem.scrollIntoView();
}