X-Git-Url: http://git.scottworley.com/reliable-chat/blobdiff_plain/ac4bf273ffd4ff666af66d27b26ffef62d45c12c..cf44a97649f42952e85dca82a91f18fc4e14c1e9:/webclient/rc.html diff --git a/webclient/rc.html b/webclient/rc.html index e497135..7f3e8d1 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; @@ -31,6 +31,9 @@ color: silver; font-family: monospace; } + a { + color: #ddd; + } #container { height: 100%; } @@ -41,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; } @@ -53,8 +54,32 @@ } #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; + } + .servercount { + margin-right: -0.5em; + font-size: 70%; + } + .timestamp:hover, .timestamp:hover .servertimestamps { + background-color: #556; + } + .timestamp:hover .servertimestamps { + display: block; + } + .servertimestamps { + display: none; + position: absolute; + left: 3em; + z-index: 1; + border: 1px solid black; + border-radius: 5px; + padding-left: 5px; + padding-right: 5px; } img { width: 1px; height: 1px; } iframe { display: none } @@ -75,9 +100,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= @@ -121,16 +191,102 @@ } } + function rcpad2(x) { + return (x < 10 ? "0" : "") + x; + } + function rcpad3(x) { + return (x < 10 ? "00" : (x < 100 ? "0" : "")) + x; + } + function rcformattime(t) { var d = t.getDay(); d = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][d]; var h = t.getHours(); var m = t.getMinutes(); var s = t.getSeconds(); - function pad(x) { - return (x < 10 ? "0" : "") + x; + return d + " " + rcpad2(h) + ":" + rcpad2(m) + ":" + rcpad2(s); + } + + function rcaddservertimestamptohover(message, server) { + var divs = message.UI.getElementsByTagName("div"); + var t = message.ServerTimes[server]; + for (var i in divs) { + if (divs[i].getAttribute && divs[i].getAttribute("class") == "servertimestamps") { + var d = document.createElement("div"); + var text = t.getFullYear() + "-" + + rcpad2(t.getMonth()) + "-" + + rcpad2(t.getDay()) + " " + + rcformattime(t) + "." + + rcpad3(t.getMilliseconds()) + " " + + server; + d.appendChild(document.createTextNode(text)); + divs[i].appendChild(d); + } } - return d + " " + pad(h) + ":" + pad(m) + ":" + pad(s); + } + + function rcmakemessageUI(message) { + message.UI = document.createElement("div"); + + // Server count + var servercount = document.createElement("span"); + 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) : ""; + var timestamp = document.createElement("span"); + 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"); + timestamp_hover.setAttribute("class", "servertimestamps"); + timestamp.appendChild(timestamp_hover); + for (var server in message.ServerTimes) { + rcaddservertimestamptohover(message, server); + } + + // Classify different message types + var text_span = document.createElement("span"); + var type; + if (/^\*\*\* /.test(message.Text)) { + type = "status"; + } else if (/^\* /.test(message.Text)) { + type = "me"; + } else { + type = "text"; + } + if (Object.keys(message.ServerTimes).length == 0) { + type += " self"; + } + text_span.setAttribute("class", type); + + // URL detection + var text = message.Text; + var URL_re = /\bhttps?:\/\/\S+/; + while (URL_re.test(text)) { + var match = URL_re.exec(text); + var leading_text = text.substr(0, match.index); + if (leading_text) { + text_span.appendChild(document.createTextNode(leading_text)); + } + var anchor = document.createElement("a"); + anchor.setAttribute("rel", "nofollow"); + anchor.setAttribute("href", encodeURI(match[0])); + anchor.appendChild(document.createTextNode(match[0])); + text_span.appendChild(anchor); + text = text.substr(match.index + match[0].length); + } + if (text) { + text_span.appendChild(document.createTextNode(text)); + } + + message.UI.appendChild(text_span); } function rcaddmessagetohistory(message) { @@ -147,15 +303,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) { - var text = (message.Time ? rcformattime(message.Time) : "") + " " + message.Text; - message.UI = document.createElement("div"); - message.UI.appendChild(document.createTextNode(text)); + 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); } @@ -188,6 +349,19 @@ history.splice(hi,1); rcaddmessagetohistory(message); } + + // Update the UI + var spans = message.UI.getElementsByTagName("span"); + for (var i in spans) { + if (spans[i].getAttribute) { + var type = spans[i].getAttribute("class"); + if (type == "servercount") { + spans[i].firstChild.data = Object.keys(message.ServerTimes).length; + } else if (type == "timestamp") { + spans[i].firstChild.data = rcformattime(message.Time); + } + } + } } function rcreceivemessages(server, messages) { @@ -198,6 +372,7 @@ if (seen_key in seen) { seen[seen_key].ServerTimes[server] = m.Time; rcupdatemessagetime(seen[seen_key]); + rcaddservertimestamptohover(seen[seen_key], server); } else { m.ServerTimes = {}; m.ServerTimes[server] = m.Time; @@ -241,6 +416,7 @@ } function rcconnect() { + makeExpandingArea(document.getElementById("expando")); for (var i in servers) { rcfetch(servers[i]); // Status bar entry @@ -267,13 +443,24 @@ 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; + } + message = "*** " + rcnick() + " is now known as " + rest; + rcsetnick(rest); + } else { + rcaddmessagetoUI({'Text': '-!- No such command: ' + command, 'ServerTimes': {}}); + return; + } } else { message = "<" + rcnick() + "> " + input; } @@ -285,9 +472,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> @@ -296,13 +508,20 @@ <body onload="rcconnect()"> <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"> </div> + <div id="status"></div> </div> </div> </body>