Titivillus/quest/static/questQM.js

169 lines
7.2 KiB
JavaScript
Raw Normal View History

2018-08-24 17:45:18 -04:00
/* Websocket receive */
2018-08-21 09:01:16 -04:00
socket.events['new_post'] = function(data) {
let qposts = document.getElementById('questPosts');
let post_str = '<div class="questPost ';
2018-08-24 21:51:03 -04:00
if (data.post_type === 'text') {
2018-08-21 09:01:16 -04:00
post_str += 'textPost">';
2018-08-24 21:51:03 -04:00
} else if (data.post_type === 'dice') {
2018-08-21 09:01:16 -04:00
post_str += 'dicePost active_post">';
2018-08-24 21:51:03 -04:00
} else if (data.post_type === 'poll') {
2018-08-21 09:01:16 -04:00
post_str += 'pollPost active_post">';
}
post_str += '<div class="questPostMeta">' + data.date;
/* QM only */
2018-08-24 21:51:03 -04:00
if (data.post_type === 'text') {
2018-09-07 12:56:13 -04:00
post_str += '<br /><a href="javascript:void(0);" id="editPost-' + data.post_id + '"onclick="edit_post(\'' + data.post_id + '\')">Edit</a>';
2018-08-21 09:01:16 -04:00
post_str += '<a href="javascript:void(0);" id="savePost-' + data.post_id + '" onclick="save_post(\'' + data.post_id + '\')" style="display:none;">Save</a>';
2018-08-24 21:51:03 -04:00
} else if (data.post_type === 'dice' || data.post_type === 'poll') {
2018-09-05 14:34:24 -04:00
post_str += '<br /><a href="javascript:void(0);" id="closePost-' + data.post_id + '" onclick="close_post(' + data.post_id + ')">Close</a>';
post_str += '<a href="javascript:void(0);" id="openPost-' + data.post_id + '" onclick="open_post(' + data.post_id + ')" style="display:none;">Open</a>'
2018-08-21 09:01:16 -04:00
}
/* end QM only */
post_str += '</div><div class="questPostData" id="questPostData-' + data.post_id + '">';
2018-08-24 21:51:03 -04:00
if (data.post_type === 'text') {
2018-08-23 07:40:28 -04:00
post_str += data.post_text;
2018-08-24 21:51:03 -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-24 21:51:03 -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 + '">';
for (i = 0; i < data.options.length; i++) {
post_str += '<tr id="optionRow-' + data.options[i][0] + '">';
2018-09-03 17:59:41 -04:00
post_str += '<td class="pollCheckBox"><input type="checkbox" id="pollInput-' + data.options[i][0] + '" onchange="vote(' + data.post_id + ',' + data.options[i][0] + ')"/>';
2018-08-21 09:01:16 -04:00
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">';
2018-09-05 08:41:53 -04:00
post_str += 'Write-in: <input type="text" id="writeinInput-' + data.post_id + '" placeholder="Custom choice..." maxlength="200" /><br />';
post_str += '<input type="submit" id="writeinSubmit-' + data.post_id + '" value="Submit" onclick="submitWritein(' + data.post_id + ');"/></div>';
2018-08-21 09:01:16 -04:00
}
}
post_str += '</div></div><br />';
qposts.innerHTML = qposts.innerHTML + post_str;
};
2018-08-24 18:24:25 -04:00
/* Websocket send */
2018-08-21 09:01:16 -04:00
function makePost() {
let qparea = document.getElementById('postTextArea');
let text = qparea.value.trim();
qparea.value = '';
2018-08-24 21:51:03 -04:00
if (text === '') { return; }
2018-09-24 08:02:53 -04:00
socket.send('text_post', {text: text, page_num: page_num});
2018-08-21 09:01:16 -04:00
}
2018-09-07 12:56:13 -04:00
function save_post(post_id) {
let post = document.getElementById('questPostData-' + post_id);
let post_text = post.firstElementChild.value.trim();
socket.send('edit_post', {post_text: post_text, post_id: post_id});
post_text = post_text.replace(/\n/g, '<br>')
post.innerHTML = post_text;
document.getElementById('savePost-' + post_id).style.display = 'none';
document.getElementById('editPost-' + post_id).style.display = 'initial';
}
2018-08-24 18:24:25 -04:00
function form_post(form_id, event) {
2018-08-24 17:45:18 -04:00
let formData = new FormData(document.getElementById(form_id));
let obj = {};
formData.forEach(function(value, key) {
obj[key] = value;
});
obj.page_num = page_num;
2018-08-24 18:24:25 -04:00
socket.send(event, obj);
2018-08-24 17:45:18 -04:00
document.getElementById(form_id).reset();
}
function close_post_send(post_id) {
2018-09-24 08:02:53 -04:00
data = {post_id: post_id}
2018-08-24 17:45:18 -04:00
let post = document.getElementById('questPostData-' + post_id);
if (post.parentElement.classList.contains('dicePost')) {
2018-08-24 21:51:03 -04:00
data.post_type = 'dice';
2018-08-24 17:45:18 -04:00
} else if (post.parentElement.classList.contains('pollPost')) {
2018-08-24 21:51:03 -04:00
data.post_type = 'poll';
2018-08-24 17:45:18 -04:00
}
socket.send('close_post', data);
}
function open_post_send(post_id) {
2018-09-24 08:02:53 -04:00
data = {post_id: post_id}
2018-08-24 17:45:18 -04:00
let post = document.getElementById('questPostData-' + post_id);
if (post.parentElement.classList.contains('dicePost')) {
2018-08-24 21:51:03 -04:00
data.post_type = 'dice';
2018-08-24 17:45:18 -04:00
} else if (post.parentElement.classList.contains('pollPost')) {
2018-08-24 21:51:03 -04:00
data.post_type = 'poll';
2018-08-24 17:45:18 -04:00
}
socket.send('open_post', data);
}
2018-08-21 09:01:16 -04:00
2018-08-24 17:45:18 -04:00
/* DOM editing */
2018-09-07 12:56:13 -04:00
function edit_post(post_id) {
let post = document.getElementById('questPostData-' + post_id);
let post_text = post.innerHTML.trim();
post_text = post_text.replace(/<br>/g, '\n');
post.innerHTML = '<textarea class="editPostText">' + post_text + '</textarea>';
post.firstElementChild.style.height = post.firstElementChild.scrollHeight + 'px';
document.getElementById('savePost-' + post_id).style.display = 'initial';
document.getElementById('editPost-' + post_id).style.display = 'none';
2018-08-21 09:01:16 -04:00
}
2018-08-24 17:45:18 -04:00
function close_post(post_id) {
let post = document.getElementById('questPostData-' + post_id);
post.children[0].textContent = post.children[0].textContent.replace('Open', 'Closed');
/* QM only */
document.getElementById('closePost-' + post_id).style.display = 'none';
document.getElementById('openPost-' + post_id).style.display = 'initial';
/* end QM only */
if (post.parentElement.classList.contains('pollPost')) {
let table = document.getElementById('poll-' + post_id);
let boxes = table.getElementsByTagName('input');
for (let i = 0; i < boxes.length; i++) {
boxes[i].disabled = true;
}
2018-09-05 08:41:53 -04:00
let writein = document.getElementById('writeinContainer-' + post_id);
2018-08-24 17:45:18 -04:00
if (writein) {
writein.style.display = 'none';
}
}
}
function open_post(post_id) {
let post = document.getElementById('questPostData-' + post_id);
post.firstElementChild.textContent = post.firstElementChild.textContent.replace('Closed', 'Open');
2018-08-24 18:24:25 -04:00
post.parentElement.className += ' activePost';
2018-08-24 17:45:18 -04:00
/* QM only */
document.getElementById('closePost-' + post_id).style.display = 'initial';
document.getElementById('openPost-' + post_id).style.display = 'none';
/* end QM only */
if (post.parentElement.classList.contains('pollPost')) {
let table = document.getElementById('poll-' + post_id);
let boxes = table.getElementsByTagName('input');
for (let i = 0; i < boxes.length; i++) {
boxes[i].disabled = false;
}
2018-09-05 08:41:53 -04:00
let writein = document.getElementById('writeinContainer-' + post_id);
2018-08-24 17:45:18 -04:00
if (writein) {
writein.style.display = 'initial';
}
}
2018-08-23 07:40:28 -04:00
}
2018-09-07 12:56:13 -04:00
function openPostTab(event, modeName) {
let QMPostTabContent = document.getElementsByClassName("QMPostTabContent");
for (let i = 0; i < QMPostTabContent.length; i++) {
QMPostTabContent[i].style.display = "none";
}
let QMPostTab = document.getElementsByClassName("QMPostTab");
for (let i = 0; i < QMPostTab.length; i++) {
QMPostTab[i].className = QMPostTab[i].className.replace(" active", "");
}
document.getElementById(modeName).style.display = "block";
event.currentTarget.className += " active";
}
2018-08-29 14:01:31 -04:00
function insertPollOption() {
let opts = document.getElementById('pollOptions');
let num = opts.children.length+1;
let temp = document.createElement('template');
temp.innerHTML = '<div><input type="text" name="pollOption-' + num + '" class="pollOption" placeholder="Option ' + num + '" maxlength="200" /></div>';
opts.appendChild(temp.content);
}
function removePollOption() {
let opts = document.getElementById('pollOptions');
if (opts.children.length == 0) { return; }
opts.children[opts.children.length-1].outerHTML = '';
}