X-Git-Url: http://git.scottworley.com/reliable-chat/blobdiff_plain/66b29e97f7f07d34df3b903ac13c81e5cb005fa2..refs/heads/master:/webclient/rc.html diff --git a/webclient/rc.html b/webclient/rc.html index 01dc168..41c1e54 100644 --- a/webclient/rc.html +++ b/webclient/rc.html @@ -8,8 +8,7 @@ This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as - published by the Free Software Foundation, either version 3 of the - License, or (at your option) any later version. + published by the Free Software Foundation, version 3. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of @@ -23,7 +22,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 +31,7 @@ font-family: monospace; } a { - color: white; + color: #ddd; } #container { height: 100%; @@ -44,11 +43,10 @@ padding: 5px 5px 5px 0px; } #client { - width: 98.5%; - padding: 0px 0px 0px 5px; - height: 50px; + width: 100%; position: fixed; bottom: 0; + display: none; } #input { width: 100%; @@ -56,16 +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; } @@ -101,14 +112,63 @@ padding-left: 5px; padding-right: 5px; } + #getnick { + padding-left: 3em; + display: none; + } + + /* 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= var seen = {}; // seen_key -> message - var history = []; // List of messages sorted by Time + var hist = []; // List of messages sorted by Time // Messages have these fields: // Time: The timestamp. Median of ServerTimes // ID: Some unique string for deduping @@ -117,11 +177,7 @@ // UI: The DOM node for this message in the UI function rcnick() { - var nick = localStorage.getItem("nick"); - if (nick) { - return nick; - } - return 'anonymous'; + return localStorage.getItem("nick"); } function rcsetnick(new_nick) { @@ -189,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) : ""; @@ -196,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"); @@ -212,6 +270,8 @@ type = "status"; } else if (/^\* /.test(message.Text)) { type = "me"; + } else if (/^-!- /.test(message.Text)) { + type = "local"; } else { type = "text"; } @@ -230,6 +290,7 @@ 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); @@ -245,24 +306,31 @@ function rcaddmessagetohistory(message) { var message_i; if (message.Time) { - for (var i = history.length - 1; ; i--) { - if (i < 0 || (history[i].Time && message.Time >= history[i].Time)) { + for (var i = hist.length - 1; ; i--) { + if (i < 0 || (hist[i].Time && message.Time >= hist[i].Time)) { message_i = i+1; - history.splice(message_i, 0, message); + hist.splice(message_i, 0, message); break; } } } else { - history.push(message); - message_i = history.length-1; + hist.push(message); + message_i = hist.length-1; + } + if (message_i + 1 < hist.length) { + rcaddmessagetoUI(message, hist[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); } @@ -288,11 +356,11 @@ message.Time = new Date(times[middle-1].getTime() + difference/2); } - // This may have broken history's in-sorted-order invariant - var hi = history.indexOf(message); - if ((history[hi-1] && history[hi-1].Time > message.Time) || - (history[hi+1] && history[hi+1].Time < message.Time)) { - history.splice(hi,1); + // This may have broken hist's in-sorted-order invariant + var hi = hist.indexOf(message); + if ((hist[hi-1] && hist[hi-1].Time > message.Time) || + (hist[hi+1] && hist[hi+1].Time < message.Time)) { + hist.splice(hi,1); rcaddmessagetohistory(message); } @@ -362,6 +430,7 @@ } function rcconnect() { + makeExpandingArea(document.getElementById("expando")); for (var i in servers) { rcfetch(servers[i]); // Status bar entry @@ -372,6 +441,15 @@ } } + function rcstart() { + if (rcnick()) { + document.getElementById("client").style.display = 'block'; + rcconnect(); + } else { + document.getElementById("getnick").style.display = 'block'; + } + } + function rcsend(d, message) { message.ID = new Date().getTime() + "-" + session + "-" + Math.random(); seen[make_seen_key(message.ID, message.Text)] = message; @@ -379,22 +457,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; } @@ -406,24 +499,73 @@ 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; + } + } + + function rcsetinitialnick() { + if (document.getnickform.initial_nick.value) { + rcsetnick(document.getnickform.initial_nick.value); + document.getElementById("getnick").style.display = 'none'; + document.getElementById("client").style.display = 'block'; + rcconnect(); + } + 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> </head> -<body onload="rcconnect()"> +<body onload="rcstart()"> <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="getnick"> + <h1>Set your nick</h1> + <form name="getnickform" onsubmit="return rcsetinitialnick();"> + <input id="initial_nick" type="text"></input> + <input type="submit" value="ok"></input> + </form> + </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>