diff options
| author | sostler <sbostler@gmail.com> | 2009-11-24 23:43:43 -0500 |
|---|---|---|
| committer | sostler <sbostler@gmail.com> | 2009-11-24 23:43:43 -0500 |
| commit | 105ef5e0142d33c0dc24f7f0422f279e4ef1fc23 (patch) | |
| tree | a85a0d5313269c2e3fb2ddcb3c974b0e020a57af /static | |
| parent | 40a57a474294244832a6023a10592a38a6178b91 (diff) | |
Added persistent rooms
Diffstat (limited to 'static')
| -rwxr-xr-x | static/index.html | 2 | ||||
| -rwxr-xr-x | static/pichat.css | 3 | ||||
| -rwxr-xr-x | static/pichat.js | 84 | ||||
| -rwxr-xr-x | static/register.html | 30 |
4 files changed, 64 insertions, 55 deletions
diff --git a/static/index.html b/static/index.html index ae4a48f..8087996 100755 --- a/static/index.html +++ b/static/index.html @@ -25,7 +25,7 @@ </head> <body> - <div id="loginbar" style="display: none"> + <div id="loginbar" style="display: none;"> <span>Username:</span><input id="nickInput" type="input" /> <br /> <span>Password:</span><input id="passwordInput" type="password" /> diff --git a/static/pichat.css b/static/pichat.css index 28e7431..584189e 100755 --- a/static/pichat.css +++ b/static/pichat.css @@ -174,12 +174,13 @@ height: expression(this.width > 400 ? 400: true);max-width:400px;} } #loginbar { + background: white; padding: 5px; position: absolute; bottom: 40px; left: 40px; line-height: 8px; - z-index: 2; + z-index: 5; border: 1px solid #15fff3; } diff --git a/static/pichat.js b/static/pichat.js index d665e2b..56dbd36 100755 --- a/static/pichat.js +++ b/static/pichat.js @@ -1,7 +1,6 @@ // pichat.js var Nick = null; -var LoggedIn = false; function handleMsgError(resp) { var respText = resp.responseText ? resp.responseText.trim() : false; @@ -54,6 +53,9 @@ function setNick(nick) { Nick = nick; $('#nickspan').text(nick); $('#welcomebar').show(); + $('#msgInput, #msgSubmit').removeAttr('disabled'); + $('#msgInput').keyup(ifEnter(submitMessage)); + $('#msgSubmit').click(submitMessage); } function submitMessage() { @@ -100,7 +102,6 @@ function login() { var onSuccess = function(json) { $('#loginbar').hide(); - LoggedIn = true; setNick(nick); }; @@ -128,25 +129,37 @@ function scrollToBottom(div) { div.scrollTop = div.scrollHeight; } -function refresh() { - var onSuccess = function(json) { - if (json.messages.length > 0) { - var shouldScroll = isScrolledToBottom($('#messageList')[0]); - - // Ignore our own messages +function updateUI(json, initialUpdate) { + if (json.messages.length > 0) { + if (initialUpdate) { + var messages = json.messages; + } else { + // Our own messages have already been displayed. var filterFunc = function(m) { return m.nick != Nick }; - var msgStr = $.map($.grep(json.messages, filterFunc), - buildMessageDiv).join(''); - $('#messageList').append(msgStr); - - if (shouldScroll) { - scrollToBottom($('#messageList')[0]); - } + var messages = $.grep(json.messages, filterFunc); } - $("#userList").html($.map(json.users, buildUserDiv).join('')); - }; + + var msgStr = $.map(messages, + buildMessageDiv).join(''); + var wasScrolledToBottom = isScrolledToBottom($('#messageList')[0]); + $('#messageList').append(msgStr); + + if (initialUpdate || wasScrolledToBottom) { + // Delay scrolling by .5 seconds so images can start loading. + setTimeout(scrollToBottom, 500, $('#messageList')[0]); + } + } + $("#userList").html($.map(json.users, buildUserDiv).join('')); +} - var onError = function(resp, textStatus, errorThrown) {}; +function refresh() { + var onSuccess = function(json) { + updateUI(json, false); + setTimeout(refresh, 1000); + }; + var onError = function(resp, textStatus, errorThrown) { + setTimeout(refresh, 1000); + }; $.ajax({ type: 'GET', @@ -159,34 +172,22 @@ function refresh() { }); } -function init() { +function init() { var onSuccess = function(json) { - $('#loadingbox').hide(); - Nick = json.nick; - - setNick(Nick); - if (json.loggedin) { - LoggedIn = true; + if (json.nick) { + setNick(json.nick); } else { $('#loginbar').show(); - $('#loginSubmit').click(login); $('#passwordInput').keyup(ifEnter(login)); + $('#loginSubmit').click(login); } - - var msgStr = $.map(json.messages, buildMessageDiv).join(''); - $('#messageList').append(msgStr); - $("#userList").html($.map(json.users, buildUserDiv).join('')); - $('#nickInput, #nickSubmit, #msgInput, #msgSubmit').removeAttr('disabled'); - - // Delay scrolling by .5 seconds so images can start loading. - setTimeout(scrollToBottom, 500, $('#messageList')[0]); - setInterval(refresh, 1000); + updateUI(json, true); + setTimeout(refresh, 1000); }; - var onError = function(resp, textStatus, errorThrown) { - alert("Error connecting to chat server!"); - }; - + alert("Error initializing!"); + }; + $.ajax({ type: 'GET', timeout: 5000, @@ -194,9 +195,8 @@ function init() { cache: false, dataType: 'json', success: onSuccess, - error: onError + error: onError }); - $('#msgInput').keyup(ifEnter(submitMessage)); - $('#msgSubmit').click(submitMessage); + } diff --git a/static/register.html b/static/register.html index e5ae761..acc13da 100755 --- a/static/register.html +++ b/static/register.html @@ -11,16 +11,24 @@ </script> </head> <body> - <h1>Register</h1> - <span>Nickname:</span> - <input type="text" id="nickInput" /> - <br /> - <span>Email:</span> - <input type="text" id="emailInput" /> - <br /> - <span>Password:</span> - <input type="password" id="passwordInput" /> - <br /> - <input type="submit" id="submit" value="register" /> + <div id="registerbox"> + <h1>Register</h1> + <span>Nickname:</span> + <input type="text" id="nickInput" /> + <br /> + <span>Email:</span> + <input type="text" id="emailInput" /> + <br /> + <span>Password:</span> + <input type="password" id="passwordInput" /> + <br /> + <input type="submit" id="submit" value="register" /> + </div> + + <div id="confirmationbox" style="display: none"> + <h1>You've registered!</h1> + <span>Please wait as you're redirected to the chat.</span> + </div> + </body> </html> |