width: 100%;
position: fixed;
bottom: 0;
+ display: none;
}
#input {
width: 100%;
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 {
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
// 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) {
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 < history.length) {
- rcaddmessagetoUI(message, history[message_i + 1].UI);
+ if (message_i + 1 < hist.length) {
+ rcaddmessagetoUI(message, hist[message_i + 1].UI);
} else {
rcaddmessagetoUI(message, null);
}
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);
}
}
}
+ 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;
}
}
+ 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');
</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">