X-Git-Url: http://git.scottworley.com/reliable-chat/blobdiff_plain/7f54ca0afcd01093cafcee969b6272ec5c05f542..e3e35bbed2617705f4db1c90e5e986f7e54c18da:/webclient/rc.html diff --git a/webclient/rc.html b/webclient/rc.html index c3284da..7ace5f6 100644 --- a/webclient/rc.html +++ b/webclient/rc.html @@ -31,6 +31,9 @@ color: silver; font-family: monospace; } + a { + color: white; + } #container { height: 100%; } @@ -56,6 +59,33 @@ padding: 0px 5px 55px 5px; vertical-align: bottom } + .banner { + font-size: 85%; + text-align: right; + } + .servercount { + margin-right: 0.5em; + font-size: 70%; + } + .timestamp { + margin-right: 0.8em; + } + .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 } #status span { margin-right: 10px; } @@ -121,16 +151,100 @@ } } + 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); + + // 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); + + // 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) { @@ -148,9 +262,9 @@ message_i = history.length-1; } - var text = (message.Time ? rcformattime(message.Time) : "") + " " + message.Text; - message.UI = document.createElement("div"); - message.UI.appendChild(document.createTextNode(text)); + 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); @@ -171,13 +285,34 @@ times.push(message.ServerTimes[i]); } times.sort(); - var middle = times.length/2; if (times.length % 2) { - message.Time = times[middle]; + message.Time = times[(times.length-1)/2]; } else { + var middle = times.length/2; var difference = times[middle].getTime() - times[middle-1].getTime(); 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); + 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) { @@ -188,6 +323,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; @@ -286,6 +422,7 @@
+