X-Git-Url: http://git.scottworley.com/reliable-chat/blobdiff_plain/5afebfc66c48be6f07f6c829513faa7f9ffd6470..a7a2c8b6c0d41519e516008ba2306c4a3948c40b:/webclient/rc.html

diff --git a/webclient/rc.html b/webclient/rc.html
index 7ace5f6..4a956ea 100644
--- a/webclient/rc.html
+++ b/webclient/rc.html
@@ -23,7 +23,7 @@
  <title>Reliable Chat</title>
   <style type="text/css"><!--/*--><![CDATA[/*><!--*/
 	html, body {
-		width: 99.9%;
+		width: 100%;
 		height: 100%;
 		margin: 0;
 		padding: 0;
@@ -32,7 +32,7 @@
 		font-family: monospace;
 	}
 	a {
-		color: white;
+		color: #ddd;
 	}
 	#container {
 		height: 100%;
@@ -44,9 +44,7 @@
 		padding: 5px 5px 5px 0px;
 	}
 	#client {
-		width: 98.5%;
-		padding: 0px 0px 0px 5px;
-		height: 50px;
+		width: 100%;
 		position: fixed;
 		bottom: 0;
 	}
@@ -56,20 +54,29 @@
 	}
 	#say { width: 100% }
 	#history {
-		padding: 0px 5px 55px 5px;
-		vertical-align: bottom
+		padding: 0px 5px 30px 5px;
+		vertical-align: bottom;
 	}
 	.banner {
 		font-size: 85%;
 		text-align: right;
 	}
+	.status {
+		color: #dd8;
+	}
+	.local.self {
+		color: #d8d;
+	}
+	.self {
+		color: #8d8;
+	}
+	.me {
+		color: #bbd;
+	}
 	.servercount {
-		margin-right: 0.5em;
+		margin-right: -0.5em;
 		font-size: 70%;
 	}
-	.timestamp {
-		margin-right: 0.8em;
-	}
 	.timestamp:hover, .timestamp:hover .servertimestamps {
 		background-color: #556;
 	}
@@ -105,9 +112,54 @@
 		padding-left: 5px;
 		padding-right: 5px;
 	}
+
+	/* BEGIN expando input box trick kindly provided by http://www.alistapart.com/articles/expanding-text-areas-made-elegant/ */
+	.expandingArea {
+		position: relative;
+		border: 1px solid #888;
+		background: silver;
+	}
+	.expandingArea > textarea,
+	.expandingArea > pre {
+		margin: 0;
+		outline: 0;
+		border: 0;
+		padding: 5px;
+		background: transparent;
+		font: 400 13px/16px helvetica, arial, sans-serif;
+		/* Make the text soft-wrap */
+		white-space: pre-wrap;
+		word-wrap: break-word;
+	}
+	.expandingArea > textarea {
+		/* The border-box box model is used to allow
+		 * padding whilst still keeping the overall width
+		 * at exactly that of the containing element.
+		 */
+		-webkit-box-sizing: border-box;
+		   -moz-box-sizing: border-box;
+		    -ms-box-sizing: border-box;
+			box-sizing: border-box;
+		width: 100%;
+		/* Hide any scrollbars */
+		overflow: hidden;
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: 100%;
+		/* Remove WebKit user-resize widget */
+		resize: none;
+	}
+	.expandingArea > pre {
+		display: block;
+		/* Hide the text; just using it for sizing */
+		visibility: hidden;
+	}
+	/* END expando input box trick kindly provided by http://www.alistapart.com/articles/expanding-text-areas-made-elegant/ */
+
   /*]]>*/--></style>
   <script type="text/javascript"><!--//--><![CDATA[//><!--
-	var servers = ['chkno.net', 'rc2.chkno.net', 'echto.net', 'the-wes.com', 'vibrantlogic.com'];
+	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'];
 
 	var session = Math.random();  // For outgoing message IDs
 	var since = {};    // server -> time: For fetch?since=
@@ -193,6 +245,7 @@
 		servercount.setAttribute("class", "servercount");
 		servercount.appendChild(document.createTextNode(Object.keys(message.ServerTimes).length));
 		message.UI.appendChild(servercount);
+		message.UI.appendChild(document.createTextNode(" "));
 
 		// Timestamp
 		var timestamp_text = message.Time ? rcformattime(message.Time) : "";
@@ -200,6 +253,7 @@
 		timestamp.setAttribute("class", "timestamp");
 		timestamp.appendChild(document.createTextNode(timestamp_text));
 		message.UI.appendChild(timestamp);
+		message.UI.appendChild(document.createTextNode(" "));
 
 		// Timestamp hover
 		var timestamp_hover = document.createElement("div");
@@ -216,6 +270,8 @@
 			type = "status";
 		} else if (/^\* /.test(message.Text)) {
 			type = "me";
+		} else if (/^-!- /.test(message.Text)) {
+			type = "local";
 		} else {
 			type = "text";
 		}
@@ -261,13 +317,20 @@
 			history.push(message);
 			message_i = history.length-1;
 		}
+		if (message_i + 1 < history.length) {
+			rcaddmessagetoUI(message, history[message_i + 1].UI);
+		} else {
+			rcaddmessagetoUI(message, null);
+		}
+	}
 
+	function rcaddmessagetoUI(message, before) {
 		if (!message.UI) {
 			rcmakemessageUI(message);
 		}
 		var h = document.getElementById("history");
-		if (message_i + 1 < history.length) {
-			h.insertBefore(message.UI, history[message_i + 1].UI);
+		if (before) {
+			h.insertBefore(message.UI, before);
 		} else {
 			h.appendChild(message.UI);
 		}
@@ -367,6 +430,7 @@
 	}
 
 	function rcconnect() {
+		makeExpandingArea(document.getElementById("expando"));
 		for (var i in servers) {
 			rcfetch(servers[i]);
 			// Status bar entry
@@ -384,22 +448,37 @@
 			"?id=" + encodeURIComponent(message.ID) +
 			"&text=" + encodeURIComponent(message.Text);
 		for (var i in servers) {
-			var uri = rcserverbase(servers[i]) + path;
-			var img = document.createElement("img");
-			img.setAttribute("src", uri);
-			d.appendChild(img);
+			var xhr = new XMLHttpRequest();
+			xhr.open("POST", rcserverbase(servers[i]) + path);
+			xhr.send();
 		}
 	}
 
 	function rcinput(input) {
 		var message;
-		var re = /^\/([a-z]+) (.*)/
+		var re = /^\/(\S+)(\s(.*))?/;
 		var match = re.exec(input);
-		if (match && match[1] == 'me') {
-			message = "* " + rcnick() + "  " + match[2];
-		} else if (match && match[1] == 'nick') {
-			message = "*** " + rcnick() + " is now known as " + match[2];
-			rcsetnick(match[2]);
+		if (match) {
+			var command = match[1];
+			var rest = match[3];
+			if (command == 'me') {
+				message = "* " + rcnick() + "  " + rest;
+			} else if (command == 'nick') {
+				if (rcnick() == rest) {
+					rcaddmessagetoUI({'Text': '-!- Your nick is already ' + rcnick(), 'ServerTimes': {}});
+					return;
+				}
+				if (rest) {
+					message = "*** " + rcnick() + " is now known as " + rest;
+					rcsetnick(rest);
+				} else {
+					rcaddmessagetoUI({'Text': '-!- /nick requires an argument', 'ServerTimes': {}});
+					return;
+				}
+			} else {
+				rcaddmessagetoUI({'Text': '-!- No such command: ' + command, 'ServerTimes': {}});
+				return;
+			}
 		} else {
 			message = "<" + rcnick() + "> " + input;
 		}
@@ -411,9 +490,34 @@
 
 	function rckeydown(event) {
 		if (event.keyCode == 13) {
-			rcinput(document.input.say.value);
+			if (document.input.say.value) {
+				rcinput(document.input.say.value);
+			}
 			document.input.say.value = "";
-			
+			return false;
+		}
+	}
+
+	// From http://www.alistapart.com/articles/expanding-text-areas-made-elegant/
+	function makeExpandingArea(container) {
+		var area = container.querySelector('textarea');
+		var span1 = container.querySelector('span');
+		var span2 = document.getElementById('historypad');
+		if (area.addEventListener) {
+			area.addEventListener('input', function() {
+				span1.textContent = area.value;
+				span2.textContent = area.value;
+			}, false);
+			span1.textContent = area.value;
+			span2.textContent = area.value;
+		} else if (area.attachEvent) {
+			// IE8 compatibility
+			area.attachEvent('onpropertychange', function() {
+				span1.innerText = area.value;
+				span2.innerText = area.value;
+			});
+			span1.innerText = area.value;
+			span2.innerText = area.value;
 		}
 	}
   //--><!]]></script>
@@ -424,12 +528,18 @@
 	<div id="container">
 		<div class="banner">(You are using <a href="https://github.com/chkno/reliable-chat">Reliable Chat</a>)</div>
 		<div id="history"></div>
+		<div class="expandingArea" style="visibility: hidden">
+			<pre><span id="historypad"></span><br></pre>
+		</div>
 		<div id="client">
 			<div id="input">
 				<form name="input" onsubmit="return false" autocomplete="off">
-					<input id="say" onkeydown="return rckeydown(event)" autocomplete="off" autofocus="autofocus"></input>
+					<div id="expando" class="expandingArea">
+						<pre><span></span><br></pre>
+						<textarea id="say" onkeydown="return rckeydown(event)" autofocus="autofocus"></textarea>
+					</div>
 				</form></div>
-			<div id="status">&nbsp;</div>
+			<div id="status"></div>
 		</div>
 	</div>
 </body>