anonkun/static/anonkunQM.js

document.execCommand("defaultParagraphSeparator", false, "br");
var socket;
var tid = setInterval( function () {
	if ( document.readyState !== 'complete' ) return;
	clearInterval( tid );

	document.getElementById('chatWindow').scrollTop = document.getElementById('chatWindow').scrollHeight;
	socket = io.connect('https://' + document.domain + ':' + location.port);
	socket.on('connect', function() {
		socket.emit('joined', {room: room_id});
	});
	socket.on('message', function(data) {
		let msg_str = '<div id="msg-' + 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;
		}
	});
	socket.on('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">' + strftime(data.date);
		/* QM only */
		if (data.post_type == 'text') {
			post_str += '<br /><a href="javascript:void(0);" onclick="edit_post(\'' + data.post_id + '\')">Edit</a>';
			post_str += '<a href="javascript:void(0);" id="savePost-' + data.post_id + '" onclick="save_post(\'' + data.post_id + '\')" style="display:none;">Save</a>';
		} else if (data.post_type == 'dice' || data.post_type == 'poll') {
			post_str += '<br /><a href="javascript:void(0);" id="close_post_id-' + data.post_id + '" onclick="close_post(' + data.post_id + ')">Close</a>';
			post_str += '<a href="javascript:void(0);" id="open_post_id-' + data.post_id + '" onclick="open_post(' + data.post_id + ')" style="display:none;">Open</a>'
		}
		/* end QM only */
		post_str += '</div><div class="questPostData" id="questPostData-' + data.post_id + '">';
		if (data.post_type == 'text') {
			post_str += data.post;
		} else if (data.post_type == 'dice') {
			post_str += '<h3>' + data.post + ' - Open</h3>';
		} else if (data.post_type == 'poll') {
			post_str += '<h3>' + data.post + ' - Open</h3>';
			post_str += '<table class="poll" id="post-' + 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;
	});
	socket.on('update_post', function(data) {
		let post_id = data.post_id;
		let post = document.getElementById('questPostData-' + post_id);
		if (data.post_type === 'text') {
			post.innerHTML = data.post;
		} else if (data.post_type === 'dice') {
			post.innerHTML += '<b>' + data.post + '</b><br />';
		} else if (data.post_type === 'poll') {
			let row = post.children[1].insertRow(-1);
			let cell = row.insertCell(0);
			cell.className = 'pollCheckBox';
			cell.innerHTML = '<input type="checkbox" id="pollInput-' + data.options_id + '" onchange="pollVote(' + data.post_id + ',' + data.options_id + ')"/>';
			cell.innerHTML += '<label for="pollInput-' + data.options_id + '"></label>';

			cell = row.insertCell(1);
			cell.className = 'option_text';
			cell.innerHTML = data.option_text;

			cell = row.insertCell(2);
			cell.className = "optionVotes";
			cell.innerHTML = "0";
		}
	});
	socket.on('close_post', function(data) {
		let post = document.getElementById('questPostData-' + data.post_id);
		post.children[0].textContent = post.children[0].textContent.replace('Open', 'Closed');
		document.getElementById('close_post_id-' + data.post_id).style.display = 'none';
		document.getElementById('open_post_id-' + data.post_id).style.display = 'initial';
		if (post.parentElement.classList.contains('pollPost')) {
			let table = document.getElementById('poll-' + data.post_id);
			table.getElementsByTagName("col")[0].style.visibility = 'collapse';
			let writein = document.getElementById('writeinContainer');
			if (writein) {
				writein.style.display = 'none';
			}
		}
	});
	socket.on('open_post', function(data) {
		let post = document.getElementById('questPostData-' + data.post_id);
		post.firstElementChild.textContent = post.firstElementChild.textContent.replace('Closed', 'Open');
		document.getElementById('close_post_id-' + data.post_id).style.display = 'initial';
		document.getElementById('open_post_id-' + data.post_id).style.display = 'none';
		if (post.parentElement.classList.contains('pollPost')) {
			table = document.getElementById('poll-' + data.post_id);
			table.getElementsByTagName("col")[0].style.visibility = '';
			let writein = document.getElementById('writeinContainer');
			if (writein) {
				writein.style.display = 'initial';
			}
		}
	});
	socket.on('vote', function(data) {
		let row = document.getElementById('optionRow-' + data.option_id);
		if (data.polarity) {
			row.cells[2].textContent = Number(row.cells[2].textContent) + 1;
		} else {
			row.cells[2].textContent = Number(row.cells[2].textContent) - 1;
		}
		let table = row.parentElement.parentElement;
		arr = Array.prototype.slice.call(table.rows);
		arr.sort(sort_by_votes);
		let new_tbody = document.createElement('tbody');
		for (let i = 0; i < arr.length; i++) {
			new_tbody.appendChild(arr[i]);
		}
		table.replaceChild(new_tbody, table.children[1]);
	});
	socket.on('toggle_option_box', function(data) {
		document.getElementById('pollInput-' + data.option_id).checked = data.polarity;
	});
	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.emit('message', {message: text, name: 'Anonymous', room: room_id});
		}
	});
}, 100 );
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;
}
function sort_by_votes(a, b) {
	return b.cells[2].textContent.localeCompare(a.cells[2].textContent);
}
function pollVote(post_id, option_id) {
	let polarity = document.getElementById('pollInput-' + option_id).checked;
	socket.emit('vote', {post_id: post_id, option_id: option_id, polarity: polarity, room: room_id});
}
function submitWritein(post_id) {
	let writeinInput = document.getElementById('writeinInput');
	if (!writeinInput) { return; }
	let option_text = writeinInput.value;
	writeinInput.value = '';
	if (!option_text) { return; }
	socket.emit('write_in', {option_text: option_text, post_id: post_id, room: room_id});
}
function quote(message_id) {
	let textbox = document.getElementById('messageTextArea');
	textbox.value += '>>' + message_id + '\n';
	textbox.focus();
}
function scrollToMsg(message_id) {
	let elem = document.getElementById('msg-' + message_id);
	if (!elem) { return; }
	elem.scrollIntoView();
}
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 deactivate_post() {
	let post = document.getElementsByClassName('active_post');
	if (post.length == 0) { return; }
	post = post[0];
	post.children[1].children[0].textContent = post.children[1].children[0].textContent.replace('Open', 'Closed');
	post.classList.remove("active_post");
	/* QM only */
	post.children[0].children[2].outerHTML = "";
	post.children[0].children[1].outerHTML = "";
	/* end QM only */
	let writein = document.getElementById('writeinContainer');
	if (writein) {
		writein.outerHTML = '';
	}
}
/* QM only */
function makePost() {
	let qparea = document.getElementById('postTextArea');
	let text = qparea.value.trim();
	qparea.value = '';
	if (text == '') { return; }
	socket.emit('new_post', {post: text, room: room_id});
}
function edit_post(post_id) {
	document.getElementById('questPostData-' + post_id).contentEditable = 'true';
	document.execCommand("defaultParagraphSeparator", false, "br");
	document.getElementById('questPostData-' + post_id).style.border = '1px solid #ccc';
	document.getElementById('savePost-' + post_id).style.display = 'initial';
	document.getElementById('editPost-' + post_id).style.display = 'none';
}
function save_post(post_id) {
	document.getElementById('questPostData-' + post_id).contentEditable = 'false';
	document.getElementById('questPostData-' + post_id).style.border = null;
	let text = document.getElementById('questPostData-' + post_id).innerHTML;
	socket.emit('update_post', {post_id: post_id, post: text, room: room_id});
	document.getElementById('savePost-' + post_id).style.display = 'none';
	document.getElementById('editPost-' + post_id).style.display = 'initial';
}
function form_post(form_id, emit_msg) {
	let formData = new FormData(document.getElementById(form_id));
	let obj = {};
	formData.forEach(function(value, key) {
		obj[key] = value;
	});
	obj.room = room_id;
	socket.emit(emit_msg, obj);
	document.getElementById(form_id).reset();
}
function close_post(post_id) {
	socket.emit('close_post', {post_id: post_id, room: room_id});
}
function open_post(post_id) {
	socket.emit('open_post', {post_id: post_id, room: room_id});
}
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 = '';
}
function openPostTab(event, modeName) {
	let i, QMPostTabContent, QMPostTab;

	QMPostTabContent = document.getElementsByClassName("QMPostTabContent");
	for (i = 0; i < QMPostTabContent.length; i++) {
		QMPostTabContent[i].style.display = "none";
	}

	QMPostTab = document.getElementsByClassName("QMPostTab");
	for (i = 0; i < QMPostTab.length; i++) {
		QMPostTab[i].className = QMPostTab[i].className.replace(" active", "");
	}

	document.getElementById(modeName).style.display = "block";
	event.currentTarget.className += " active";
}
/* end QM only */