]> git.scottworley.com Git - reliable-chat/blob - webclient/rc.html
Scroll history without input. Input above status
[reliable-chat] / webclient / rc.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
2 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
3
4 <html xmlns="http://www.w3.org/1999/xhtml">
5 <head>
6 <title>Reliable Chat</title>
7 <style type="text/css"><!--/*--><![CDATA[/*><!--*/
8 html, body {
9 width: 99.9%;
10 height: 100%;
11 margin: 0;
12 padding: 0;
13 font-family: monospace;
14 }
15 #container {
16 height: 100%;
17 }
18 #status {
19 width: 100%;
20 background-color: #eef;
21 padding: 5px 5px 5px 0px;
22 }
23 #client {
24 width: 98.5%;
25 padding: 0px 0px 0px 5px;
26 height: 50px;
27 position: fixed;
28 bottom: 0;
29 }
30 #input {
31 width: 100%;
32 }
33 #say { width: 100% }
34 #history {
35 padding: 0px 5px 55px 5px;
36 vertical-align: bottom
37 }
38 img { width: 1px; height: 1px; }
39 iframe { display: none }
40 #status span { margin-right: 10px; }
41 #status span.sad {
42 background-color: #f00;
43 color: #fff;
44 border: 1px solid black;
45 border-radius: 5px;
46 padding-left: 5px;
47 padding-right: 5px;
48 }
49 #status span.happy {
50 background-color: #0f0;
51 color: #000;
52 border: 1px solid black;
53 border-radius: 5px;
54 padding-left: 5px;
55 padding-right: 5px;
56 }
57 /*]]>*/--></style>
58 <script type="text/javascript"><!--//--><![CDATA[//><!--
59 var servers = ['chkno.net', 'rc2.chkno.net', 'echto.net', 'the-wes.com', 'vibrantlogic.com'];
60
61 var session = Math.random();
62 var seen = {};
63
64 function rcnick() {
65 var nick = localStorage.getItem("nick");
66 if (nick) {
67 return nick;
68 }
69 return 'anonymous';
70 }
71
72 function rcsetnick(new_nick) {
73 localStorage.setItem("nick", new_nick);
74 }
75
76 function rcserverbase(server) {
77 // Add the default port if server doesn't contain a port number already
78 if (server.indexOf(":") == -1) {
79 return "http://" + server + ":21059";
80 } else {
81 return "http://" + server;
82 }
83 }
84
85 function rcchangeserverstatus(server, new_status) {
86 var statusbar = document.getElementById("status");
87 var spans = statusbar.getElementsByTagName("span");
88 for (var i in spans) {
89 if (spans[i].firstChild && 'data' in spans[i].firstChild && spans[i].firstChild.data == server) {
90 spans[i].setAttribute("class", new_status);
91 }
92 }
93 }
94
95 function rcaddmessagetohistory(message) {
96 var d = document.createElement("div");
97 d.appendChild(document.createTextNode(message));
98 var h = document.getElementById("history");
99 h.appendChild(d);
100 window.scrollTo(0, document.body.scrollHeight);
101 return d;
102 }
103
104 function make_seen_key(id, text) {
105 return id.replace(/@/g, "@@") + "_@_" + text.replace(/@/g, "@@");
106 }
107
108 function receiveMessage(server, time, id, text) {
109 var seen_key = make_seen_key(id, text);
110 if (!(seen_key in seen)) {
111 seen[seen_key] = true;
112 rcaddmessagetohistory(text);
113 for (var i in servers) {
114 rcchangeserverstatus(servers[i], "sad");
115 }
116 }
117 rcchangeserverstatus(server, "happy");
118 }
119
120 function receiveMessageEvent(event)
121 {
122 for (var i in servers) {
123 if (event.origin === rcserverbase(servers[i])) {
124 messages = JSON.parse(event.data);
125 for (var j in messages) {
126 if ('Time' in messages[j] &&
127 'ID' in messages[j] &&
128 'Text' in messages[j]) {
129 receiveMessage(servers[i], messages[j]['Time'], messages[j]['ID'], messages[j]['Text']);
130 }
131 }
132 }
133 }
134 }
135
136 function rcconnect() {
137 window.addEventListener("message", receiveMessageEvent, false);
138 for (var i in servers) {
139 // Create a hidden iframe for same-origin workaround
140 var iframe = document.createElement("iframe");
141 iframe.setAttribute("src", rcserverbase(servers[i]) + "/frame");
142 document.body.insertBefore(iframe, document.body.firstChild);
143 // Status bar entry
144 var status_indicator = document.createElement("span");
145 status_indicator.appendChild(document.createTextNode(servers[i]));
146 status_indicator.setAttribute("class", "sad");
147 document.getElementById("status").appendChild(status_indicator);
148 }
149 if (rcnick() == 'anonymous') {
150 rcaddmessagetohistory("-!- Set your nick with /nick");
151 }
152 }
153
154 function rcsend(d, message) {
155 var id = new Date().getTime() + "-" + session + "-" + Math.random();
156 seen[make_seen_key(id, message)] = true;
157 var path = "/speak" +
158 "?id=" + encodeURIComponent(id) +
159 "&text=" + encodeURIComponent(message);
160 for (var i in servers) {
161 var uri = rcserverbase(servers[i]) + path;
162 var img = document.createElement("img");
163 img.setAttribute("src", uri);
164 d.appendChild(img);
165 }
166 }
167
168 function rckeydown(event) {
169 if (event.keyCode == 13) {
170 var input = document.input.say.value;
171 document.input.say.value = "";
172
173 // Check nick change
174 var message;
175 var re = /^\/nick (.*)/;
176 var match = re.exec(input);
177 if (match) {
178 message = "*** " + rcnick() + " is now known as " + match[1];
179 rcsetnick(match[1]);
180 } else {
181 message = "<" + rcnick() + "> " + input;
182 }
183
184 // /me support
185 var message;
186 var re = /^\/me (.*)/;
187 var match = re.exec(input);
188 var inputme = input.substring(4);
189 if (match) {
190 message = "* " + rcnick() + " " + inputme;
191 } else {
192 message = "<" + rcnick() + "> " + input;
193 }
194
195 // Remind people to set their nick
196 if (rcnick() == 'anonymous') {
197 rcaddmessagetohistory("-!- Set your nick with /nick");
198 }
199
200 // Say the message
201 var d = rcaddmessagetohistory(message);
202 rcsend(d, message);
203 }
204 }
205 //--><!]]></script>
206
207 </head>
208
209 <body onload="rcconnect()">
210 <div id="container">
211 <div id="history"></div>
212 <div id="client">
213 <div id="input">
214 <form name="input" onsubmit="return false" autocomplete="off">
215 <input id="say" onkeydown="return rckeydown(event)" autocomplete="off" autofocus="autofocus"></input>
216 </form></div>
217 <div id="status">&nbsp;</div>
218 </div>
219 </div>
220 </body>
221 </html>