git.scottworley.com Git - reliable-chat/blame_incremental

... / ...

Commit	Line	Data
	1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	2	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
	3	<html xmlns="http://www.w3.org/1999/xhtml">
	4	<!--
	5	reliable-chat - multipath chat
	6	Copyright (C) 2012 Scott Worley <sworley@chkno.net>
	7	Copyright (C) 2012 Jason Hibbs <skitch@gmail.com>
	8
	9	This program is free software: you can redistribute it and/or modify
	10	it under the terms of the GNU Affero General Public License as
	11	published by the Free Software Foundation, version 3.
	12
	13	This program is distributed in the hope that it will be useful,
	14	but WITHOUT ANY WARRANTY; without even the implied warranty of
	15	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
	16	GNU Affero General Public License for more details.
	17
	18	You should have received a copy of the GNU Affero General Public License
	19	along with this program. If not, see <http://www.gnu.org/licenses/>.
	20	-->
	21	<head>
	22	<title>Reliable Chat</title>
	23	<style type="text/css"><!--/--><![CDATA[/><!--*/
	24	html, body {
	25	width: 100%;
	26	height: 100%;
	27	margin: 0;
	28	padding: 0;
	29	background-color: #293134;
	30	color: silver;
	31	font-family: monospace;
	32	}
	33	a {
	34	color: #ddd;
	35	}
	36	#container {
	37	height: 100%;
	38	}
	39	#status {
	40	width: 100%;
	41	text-align: right;
	42	background-color: #293134;
	43	padding: 5px 5px 5px 0px;
	44	}
	45	#client {
	46	width: 100%;
	47	position: fixed;
	48	bottom: 0;
	49	display: none;
	50	}
	51	#input {
	52	width: 100%;
	53	background-color: #293134;
	54	}
	55	#say { width: 100% }
	56	#history {
	57	padding: 0px 5px 30px 5px;
	58	vertical-align: bottom;
	59	}
	60	.banner {
	61	font-size: 85%;
	62	text-align: right;
	63	}
	64	.status {
	65	color: #dd8;
	66	}
	67	.local.self {
	68	color: #d8d;
	69	}
	70	.self {
	71	color: #8d8;
	72	}
	73	.me {
	74	color: #bbd;
	75	}
	76	.servercount {
	77	margin-right: -0.5em;
	78	font-size: 70%;
	79	}
	80	.timestamp:hover, .timestamp:hover .servertimestamps {
	81	background-color: #556;
	82	}
	83	.timestamp:hover .servertimestamps {
	84	display: block;
	85	}
	86	.servertimestamps {
	87	display: none;
	88	position: absolute;
	89	left: 3em;
	90	z-index: 1;
	91	border: 1px solid black;
	92	border-radius: 5px;
	93	padding-left: 5px;
	94	padding-right: 5px;
	95	}
	96	img { width: 1px; height: 1px; }
	97	iframe { display: none }
	98	#status span { margin-right: 10px; }
	99	#status span.sad {
	100	background-color: #f00;
	101	color: #fff;
	102	border: 1px solid black;
	103	border-radius: 5px;
	104	padding-left: 5px;
	105	padding-right: 5px;
	106	}
	107	#status span.happy {
	108	background-color: #0f0;
	109	color: #000;
	110	border: 1px solid black;
	111	border-radius: 5px;
	112	padding-left: 5px;
	113	padding-right: 5px;
	114	}
	115	#getnick {
	116	padding-left: 3em;
	117	display: none;
	118	}
	119
	120	/* BEGIN expando input box trick kindly provided by http://www.alistapart.com/articles/expanding-text-areas-made-elegant/ */
	121	.expandingArea {
	122	position: relative;
	123	border: 1px solid #888;
	124	background: silver;
	125	}
	126	.expandingArea > textarea,
	127	.expandingArea > pre {
	128	margin: 0;
	129	outline: 0;
	130	border: 0;
	131	padding: 5px;
	132	background: transparent;
	133	font: 400 13px/16px helvetica, arial, sans-serif;
	134	/* Make the text soft-wrap */
	135	white-space: pre-wrap;
	136	word-wrap: break-word;
	137	}
	138	.expandingArea > textarea {
	139	/* The border-box box model is used to allow
	140	* padding whilst still keeping the overall width
	141	* at exactly that of the containing element.
	142	*/
	143	-webkit-box-sizing: border-box;
	144	-moz-box-sizing: border-box;
	145	-ms-box-sizing: border-box;
	146	box-sizing: border-box;
	147	width: 100%;
	148	/* Hide any scrollbars */
	149	overflow: hidden;
	150	position: absolute;
	151	top: 0;
	152	left: 0;
	153	height: 100%;
	154	/* Remove WebKit user-resize widget */
	155	resize: none;
	156	}
	157	.expandingArea > pre {
	158	display: block;
	159	/* Hide the text; just using it for sizing */
	160	visibility: hidden;
	161	}
	162	/* END expando input box trick kindly provided by http://www.alistapart.com/articles/expanding-text-areas-made-elegant/ */
	163
	164	/]]>/--></style>
	165	<script type="text/javascript"><!--//--><![CDATA[//><!--
	166	var servers = ['chkno.net', 'rc2.chkno.net', 'reliablechat-chk.rhcloud.com:80', 'intense-basin-3395.herokuapp.com:80', 'echto.net', 'the-wes.com', 'vibrantlogic.com'];
	167
	168	var session = Math.random(); // For outgoing message IDs
	169	var since = {}; // server -> time: For fetch?since=
	170	var seen = {}; // seen_key -> message
	171	var hist = []; // List of messages sorted by Time
	172	// Messages have these fields:
	173	// Time: The timestamp. Median of ServerTimes
	174	// ID: Some unique string for deduping
	175	// Text: The text of the message
	176	// ServerTimes: server -> timestamp
	177	// UI: The DOM node for this message in the UI
	178
	179	function rcnick() {
	180	return localStorage.getItem("nick");
	181	}
	182
	183	function rcsetnick(new_nick) {
	184	localStorage.setItem("nick", new_nick);
	185	}
	186
	187	function rcserverbase(server) {
	188	// Add the default port if server doesn't contain a port number already
	189	if (server.indexOf(":") == -1) {
	190	return "http://" + server + ":21059";
	191	} else {
	192	return "http://" + server;
	193	}
	194	}
	195
	196	function rcchangeserverstatus(server, new_status) {
	197	var statusbar = document.getElementById("status");
	198	var spans = statusbar.getElementsByTagName("span");
	199	for (var i in spans) {
	200	if (spans[i].firstChild && 'data' in spans[i].firstChild && spans[i].firstChild.data == server) {
	201	spans[i].setAttribute("class", new_status);
	202	}
	203	}
	204	}
	205
	206	function rcpad2(x) {
	207	return (x < 10 ? "0" : "") + x;
	208	}
	209	function rcpad3(x) {
	210	return (x < 10 ? "00" : (x < 100 ? "0" : "")) + x;
	211	}
	212
	213	function rcformattime(t) {
	214	var d = t.getDay();
	215	d = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][d];
	216	var h = t.getHours();
	217	var m = t.getMinutes();
	218	var s = t.getSeconds();
	219	return d + " " + rcpad2(h) + ":" + rcpad2(m) + ":" + rcpad2(s);
	220	}
	221
	222	function rcaddservertimestamptohover(message, server) {
	223	var divs = message.UI.getElementsByTagName("div");
	224	var t = message.ServerTimes[server];
	225	for (var i in divs) {
	226	if (divs[i].getAttribute && divs[i].getAttribute("class") == "servertimestamps") {
	227	var d = document.createElement("div");
	228	var text = t.getFullYear() + "-" +
	229	rcpad2(t.getMonth()) + "-" +
	230	rcpad2(t.getDay()) + " " +
	231	rcformattime(t) + "." +
	232	rcpad3(t.getMilliseconds()) + " " +
	233	server;
	234	d.appendChild(document.createTextNode(text));
	235	divs[i].appendChild(d);
	236	}
	237	}
	238	}
	239
	240	function rcmakemessageUI(message) {
	241	message.UI = document.createElement("div");
	242
	243	// Server count
	244	var servercount = document.createElement("span");
	245	servercount.setAttribute("class", "servercount");
	246	servercount.appendChild(document.createTextNode(Object.keys(message.ServerTimes).length));
	247	message.UI.appendChild(servercount);
	248	message.UI.appendChild(document.createTextNode(" "));
	249
	250	// Timestamp
	251	var timestamp_text = message.Time ? rcformattime(message.Time) : "";
	252	var timestamp = document.createElement("span");
	253	timestamp.setAttribute("class", "timestamp");
	254	timestamp.appendChild(document.createTextNode(timestamp_text));
	255	message.UI.appendChild(timestamp);
	256	message.UI.appendChild(document.createTextNode(" "));
	257
	258	// Timestamp hover
	259	var timestamp_hover = document.createElement("div");
	260	timestamp_hover.setAttribute("class", "servertimestamps");
	261	timestamp.appendChild(timestamp_hover);
	262	for (var server in message.ServerTimes) {
	263	rcaddservertimestamptohover(message, server);
	264	}
	265
	266	// Classify different message types
	267	var text_span = document.createElement("span");
	268	var type;
	269	if (/^\\\* /.test(message.Text)) {
	270	type = "status";
	271	} else if (/^\* /.test(message.Text)) {
	272	type = "me";
	273	} else if (/^-!- /.test(message.Text)) {
	274	type = "local";
	275	} else {
	276	type = "text";
	277	}
	278	if (Object.keys(message.ServerTimes).length == 0) {
	279	type += " self";
	280	}
	281	text_span.setAttribute("class", type);
	282
	283	// URL detection
	284	var text = message.Text;
	285	var URL_re = /\bhttps?:\/\/\S+/;
	286	while (URL_re.test(text)) {
	287	var match = URL_re.exec(text);
	288	var leading_text = text.substr(0, match.index);
	289	if (leading_text) {
	290	text_span.appendChild(document.createTextNode(leading_text));
	291	}
	292	var anchor = document.createElement("a");
	293	anchor.setAttribute("rel", "nofollow");
	294	anchor.setAttribute("href", encodeURI(match[0]));
	295	anchor.appendChild(document.createTextNode(match[0]));
	296	text_span.appendChild(anchor);
	297	text = text.substr(match.index + match[0].length);
	298	}
	299	if (text) {
	300	text_span.appendChild(document.createTextNode(text));
	301	}
	302
	303	message.UI.appendChild(text_span);
	304	}
	305
	306	function rcaddmessagetohistory(message) {
	307	var message_i;
	308	if (message.Time) {
	309	for (var i = hist.length - 1; ; i--) {
	310	if (i < 0 \|\| (hist[i].Time && message.Time >= hist[i].Time)) {
	311	message_i = i+1;
	312	hist.splice(message_i, 0, message);
	313	break;
	314	}
	315	}
	316	} else {
	317	hist.push(message);
	318	message_i = hist.length-1;
	319	}
	320	if (message_i + 1 < hist.length) {
	321	rcaddmessagetoUI(message, hist[message_i + 1].UI);
	322	} else {
	323	rcaddmessagetoUI(message, null);
	324	}
	325	}
	326
	327	function rcaddmessagetoUI(message, before) {
	328	if (!message.UI) {
	329	rcmakemessageUI(message);
	330	}
	331	var h = document.getElementById("history");
	332	if (before) {
	333	h.insertBefore(message.UI, before);
	334	} else {
	335	h.appendChild(message.UI);
	336	}
	337	window.scrollTo(0, document.body.scrollHeight);
	338	}
	339
	340	function make_seen_key(id, text) {
	341	return id.replace(/@/g, "@@") + "_@_" + text.replace(/@/g, "@@");
	342	}
	343
	344	function rcupdatemessagetime(message) {
	345	// Set message.Time to be the median of message.ServerTimes
	346	var times = [];
	347	for (var i in message.ServerTimes) {
	348	times.push(message.ServerTimes[i]);
	349	}
	350	times.sort();
	351	if (times.length % 2) {
	352	message.Time = times[(times.length-1)/2];
	353	} else {
	354	var middle = times.length/2;
	355	var difference = times[middle].getTime() - times[middle-1].getTime();
	356	message.Time = new Date(times[middle-1].getTime() + difference/2);
	357	}
	358
	359	// This may have broken hist's in-sorted-order invariant
	360	var hi = hist.indexOf(message);
	361	if ((hist[hi-1] && hist[hi-1].Time > message.Time) \|\|
	362	(hist[hi+1] && hist[hi+1].Time < message.Time)) {
	363	hist.splice(hi,1);
	364	rcaddmessagetohistory(message);
	365	}
	366
	367	// Update the UI
	368	var spans = message.UI.getElementsByTagName("span");
	369	for (var i in spans) {
	370	if (spans[i].getAttribute) {
	371	var type = spans[i].getAttribute("class");
	372	if (type == "servercount") {
	373	spans[i].firstChild.data = Object.keys(message.ServerTimes).length;
	374	} else if (type == "timestamp") {
	375	spans[i].firstChild.data = rcformattime(message.Time);
	376	}
	377	}
	378	}
	379	}
	380
	381	function rcreceivemessages(server, messages) {
	382	for (var i in messages) {
	383	var m = messages[i];
	384	m.Time = new Date(m.Time);
	385	var seen_key = make_seen_key(m.ID, m.Text);
	386	if (seen_key in seen) {
	387	seen[seen_key].ServerTimes[server] = m.Time;
	388	rcupdatemessagetime(seen[seen_key]);
	389	rcaddservertimestamptohover(seen[seen_key], server);
	390	} else {
	391	m.ServerTimes = {};
	392	m.ServerTimes[server] = m.Time;
	393	seen[seen_key] = m;
	394	rcaddmessagetohistory(m);
	395	for (var i in servers) {
	396	rcchangeserverstatus(servers[i], "sad");
	397	}
	398	}
	399	rcchangeserverstatus(server, "happy");
	400	}
	401	}
	402
	403	function rcfetch(server) {
	404	var delay = 10000; // TODO: Exponential backoff
	405	var xhr = new XMLHttpRequest();
	406	xhr.onreadystatechange = function() {
	407	if (this.readyState == this.DONE) {
	408	if (this.status == 200) {
	409	var rtxt = this.responseText;
	410	if (rtxt != null) {
	411	var messages = JSON.parse(rtxt);
	412	if (messages != null) {
	413	delay = 40;
	414	if (messages.length >= 1 && "Time" in messages[messages.length-1]) {
	415	since[server] = messages[messages.length-1].Time;
	416	}
	417	rcreceivemessages(server, messages);
	418	}
	419	}
	420	}
	421	window.setTimeout(rcfetch, delay, server);
	422	}
	423	}
	424	var uri = rcserverbase(server) + "/fetch";
	425	if (server in since) {
	426	uri += '?since="' + since[server] + '"';
	427	}
	428	xhr.open("GET", uri);
	429	xhr.send();
	430	}
	431
	432	function rcconnect() {
	433	makeExpandingArea(document.getElementById("expando"));
	434	for (var i in servers) {
	435	rcfetch(servers[i]);
	436	// Status bar entry
	437	var status_indicator = document.createElement("span");
	438	status_indicator.appendChild(document.createTextNode(servers[i]));
	439	status_indicator.setAttribute("class", "sad");
	440	document.getElementById("status").appendChild(status_indicator);
	441	}
	442	}
	443
	444	function rcstart() {
	445	if (rcnick()) {
	446	document.getElementById("client").style.display = 'block';
	447	rcconnect();
	448	} else {
	449	document.getElementById("getnick").style.display = 'block';
	450	}
	451	}
	452
	453	function rcsend(d, message) {
	454	message.ID = new Date().getTime() + "-" + session + "-" + Math.random();
	455	seen[make_seen_key(message.ID, message.Text)] = message;
	456	var path = "/speak" +
	457	"?id=" + encodeURIComponent(message.ID) +
	458	"&text=" + encodeURIComponent(message.Text);
	459	for (var i in servers) {
	460	var xhr = new XMLHttpRequest();
	461	xhr.open("POST", rcserverbase(servers[i]) + path);
	462	xhr.send();
	463	}
	464	}
	465
	466	function rcinput(input) {
	467	var message;
	468	var re = /^\/(\S+)(\s(.*))?/;
	469	var match = re.exec(input);
	470	if (match) {
	471	var command = match[1];
	472	var rest = match[3];
	473	if (command == 'me') {
	474	message = "* " + rcnick() + " " + rest;
	475	} else if (command == 'nick') {
	476	if (rcnick() == rest) {
	477	rcaddmessagetoUI({'Text': '-!- Your nick is already ' + rcnick(), 'ServerTimes': {}});
	478	return;
	479	}
	480	if (rest) {
	481	message = "*** " + rcnick() + " is now known as " + rest;
	482	rcsetnick(rest);
	483	} else {
	484	rcaddmessagetoUI({'Text': '-!- /nick requires an argument', 'ServerTimes': {}});
	485	return;
	486	}
	487	} else {
	488	rcaddmessagetoUI({'Text': '-!- No such command: ' + command, 'ServerTimes': {}});
	489	return;
	490	}
	491	} else {
	492	message = "<" + rcnick() + "> " + input;
	493	}
	494
	495	var m = {'Text': message, 'ServerTimes': {}};
	496	rcaddmessagetohistory(m);
	497	rcsend(m.UI, m);
	498	}
	499
	500	function rckeydown(event) {
	501	if (event.keyCode == 13) {
	502	if (document.input.say.value) {
	503	rcinput(document.input.say.value);
	504	}
	505	document.input.say.value = "";
	506	return false;
	507	}
	508	}
	509
	510	function rcsetinitialnick() {
	511	if (document.getnickform.initial_nick.value) {
	512	rcsetnick(document.getnickform.initial_nick.value);
	513	document.getElementById("getnick").style.display = 'none';
	514	document.getElementById("client").style.display = 'block';
	515	rcconnect();
	516	}
	517	return false;
	518	}
	519
	520	// From http://www.alistapart.com/articles/expanding-text-areas-made-elegant/
	521	function makeExpandingArea(container) {
	522	var area = container.querySelector('textarea');
	523	var span1 = container.querySelector('span');
	524	var span2 = document.getElementById('historypad');
	525	if (area.addEventListener) {
	526	area.addEventListener('input', function() {
	527	span1.textContent = area.value;
	528	span2.textContent = area.value;
	529	}, false);
	530	span1.textContent = area.value;
	531	span2.textContent = area.value;
	532	} else if (area.attachEvent) {
	533	// IE8 compatibility
	534	area.attachEvent('onpropertychange', function() {
	535	span1.innerText = area.value;
	536	span2.innerText = area.value;
	537	});
	538	span1.innerText = area.value;
	539	span2.innerText = area.value;
	540	}
	541	}
	542	//--><!]]></script>
	543
	544	</head>
	545
	546	<body onload="rcstart()">
	547	<div id="container">
	548	<div class="banner">(You are using <a href="https://github.com/chkno/reliable-chat">Reliable Chat</a>)</div>
	549	<div id="history"></div>
	550	<div class="expandingArea" style="visibility: hidden">
	551	<pre><span id="historypad"></span><br></pre>
	552	</div>
	553	<div id="getnick">
	554	<h1>Set your nick</h1>
	555	<form name="getnickform" onsubmit="return rcsetinitialnick();">
	556	<input id="initial_nick" type="text"></input>
	557	<input type="submit" value="ok"></input>
	558	</form>
	559	</div>
	560	<div id="client">
	561	<div id="input">
	562	<form name="input" onsubmit="return false" autocomplete="off">
	563	<div id="expando" class="expandingArea">
	564	<pre><span></span><br></pre>
	565	<textarea id="say" onkeydown="return rckeydown(event)" autofocus="autofocus"></textarea>
	566	</div>
	567	</form></div>
	568	<div id="status"></div>
	569	</div>
	570	</div>
	571	</body>
	572	</html>