Titivillus/quest/static/quest.js

124 lines
4.9 KiB
JavaScript
Raw Normal View History

2018-08-20 07:23:33 -04:00
/* House keeping */
2018-08-14 20:12:52 -04:00
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);
}
2018-08-20 07:23:33 -04:00
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});
}
});
}
2018-08-20 07:23:33 -04:00
/* Websocket events */
socket.events['message'] = function(data) {
2018-08-16 15:43:43 -04:00
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;
}
}
2018-08-21 09:01:16 -04:00
socket.events['new_post'] = function(data) {
//deactivate_post();
let qposts = document.getElementById('questPosts');
let post_str = '<div class="questPost ';
if (data.post_type == 'text') {
post_str += 'textPost">';
} else if (data.post_type == 'dice') {
post_str += 'dicePost active_post">';
} else if (data.post_type == 'poll') {
post_str += 'pollPost active_post">';
}
post_str += '<div class="questPostMeta">' + data.date;
post_str += '</div><div class="questPostData" id="questPostData-' + data.post_id + '">';
if (data.post_type == 'text') {
2018-08-23 07:40:28 -04:00
post_str += data.post_text;
2018-08-21 09:01:16 -04:00
} else if (data.post_type == 'dice') {
2018-08-23 07:40:28 -04:00
post_str += '<h3>' + data.post_text + ' - Open</h3>';
2018-08-21 09:01:16 -04:00
} else if (data.post_type == 'poll') {
2018-08-23 07:40:28 -04:00
post_str += '<h3>' + data.post_text + ' - Open</h3>';
2018-08-21 09:01:16 -04:00
post_str += '<table class="poll" id="poll-' + data.post_id + '">';
post_str += '<col/><col/><col/>';
for (i = 0; i < data.options.length; i++) {
post_str += '<tr id="optionRow-' + data.options[i][0] + '">';
post_str += '<td class="pollCheckBox"><input type="checkbox" id="pollInput-' + data.options[i][0] + '" onchange="pollVote(' + data.post_id + ',' + data.options[i][0] + ')"/>';
post_str += '<label for="pollInput-' + data.options[i][0] + '"></label></td>';
post_str += '<td class="option_text">' + data.options[i][1] + '</td>';
post_str += '<td class="optionVotes">0</td></tr>';
}
post_str += '</table>';
if (data.allow_writein) {
post_str += '<div id="writeinContainer">';
post_str += 'Write-in: <input type="text" id="writeinInput" placeholder="Custom choice..." maxlength="200" /><br />';
post_str += '<input type="submit" id="writeinSubmit" value="Submit" onclick="submitWritein({{ quest_post[0] }});"/></div>';
}
}
post_str += '</div></div><br />';
qposts.innerHTML = qposts.innerHTML + post_str;
};
2018-08-16 15:43:43 -04:00
2018-08-20 07:23:33 -04:00
/* Helpers */
2018-08-16 15:43:43 -04:00
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;
}
2018-08-20 07:23:33 -04:00
/* 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();
}