diff options
Diffstat (limited to 'static')
| -rwxr-xr-x | static/chat.st | 92 | ||||
| -rwxr-xr-x | static/index.html | 10 | ||||
| -rwxr-xr-x | static/js/pichat.js | 99 |
3 files changed, 71 insertions, 130 deletions
diff --git a/static/chat.st b/static/chat.st deleted file mode 100755 index aecf87c..0000000 --- a/static/chat.st +++ /dev/null @@ -1,92 +0,0 @@ -<html> - <head> - <title>dump.fm</title> - <link rel="stylesheet" type="text/css" href="/static/reset.css"> - <link rel="stylesheet" type="text/css" href="static/pichat.css"> - - <link rel="shortcut icon" href="/static/favicon.ico"> - <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> - <script type="text/javascript" src="/static/sha1.js"></script> - <script type="text/javascript" src="/static/pichat.js"></script> - <script type="text/javascript" src="/static/scroll.js"></script> - <script> - jQuery(document).ready(initChat); - var Nick = $json_user_nick$; - </script> - <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><style type="text/css"> -<!-- -a { - font-size: 12px; - color: #000; -} -a:link { - text-decoration: none; -} -a:visited { - text-decoration: none; - color: #000; -} -a:hover { - text-decoration: none; - color: #00F; -} -a:active { - text-decoration: none; - color: #000; -} - ---> -</style></head> - -<body> - - - $header()$ - -<div id="chatrap"><div id="logc"> - <div id="content"> - - <div id="messagetabs"></div> - <div id="rapper"> - <div id="loghead"></div> - </div> - <div id="userList"> - $users: { u | - <div class="username"><a href="/u/$u$" class="username"><img src="/static/cat.jpeg" width="50" height="50">$u$</a><br> - </div> - }$ - </div> - - <div id="messagePane"> - <div id="messageList"> - $messages: { m | - <div class="msgDiv oldmsg"><b><a href="/u/$m.nick$">$m.nick$</a>: </b> - <span class="content">$m.content$<span></div> - }$ - <hr /> - </div></div></div> - $if(user_nick)$ - <div id="msgInputDiv"> - <input id="msgInput" class="msgInput" type="input" /> - <input id="msgSubmit" type="submit" value="Send Image URL" - /> - </div> - $endif$ - </div> - </div> - - </div> - </div> - </div> - - </div> - - </div> - <div id="footerc"> - <p> - $footer()$</p> - <p> - </p> - </div> - </body> -</html> diff --git a/static/index.html b/static/index.html index cb1852b..f80e5da 100755 --- a/static/index.html +++ b/static/index.html @@ -1,9 +1,9 @@ </html><head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> - <script type="text/javascript" src="static/js/underscore-min.js"></script> - <script type="text/javascript" src="static/js/sha1.js"></script> - <script type="text/javascript" src="static/js/home.js"></script> - <script type="text/javascript" src="static/background.js"></script> + <script type="text/javascript" src="/static/js/underscore-min.js"></script> + <script type="text/javascript" src="/static/js/sha1.js"></script> + <script type="text/javascript" src="/static/js/home.js"></script> + <script type="text/javascript" src="static/background.js"></script> <script> $(document).ready(initHome); </script> @@ -224,4 +224,4 @@ body { </body> -</html>
\ No newline at end of file +</html> diff --git a/static/js/pichat.js b/static/js/pichat.js index b9e0d46..df79c17 100755 --- a/static/js/pichat.js +++ b/static/js/pichat.js @@ -24,20 +24,30 @@ function buildMsgContent(content) { return linkify(content) } -function buildMessageDiv(msg) { +var SpinnerImage = '<img class="spinner" src="/static/spinner.gif" />'; + +function buildMessageDiv(msg, isLoading) { var nick = escapeHtml(msg.nick); - return '<div class="msgDiv"><b><a href="/u/' + nick + ' ">' + nick + '</a>: </b>' - + buildMsgContent(msg.content) + '</div>'; + var msgId = !isLoading ? 'id="message-' + msg.message_id + '"' : ''; + var spinnerHtml = isLoading ? SpinnerImage : ''; + var loadingClass = isLoading ? ' loading' : ''; + return '<div class="msgDiv ' + loadingClass + '" ' + msgId + '>' + + '<b><a href="/u/' + nick + ' ">' + nick + '</a>: </b>' + + buildMsgContent(msg.content) + + spinnerHtml + + '</div>'; } function buildUserDiv(user) { if (user.avatar) { - return '<div class="username"><a href="/u/' + escapeHtml(user.nick) + '">' + - '<img src="' + user.avatar + '" width="50" height="50">' + - escapeHtml(user.nick) + '</a></div>'; + return '<div class="username">' + + '<a href="/u/' + escapeHtml(user.nick) + '" target="_blank">' + + '<img src="' + user.avatar + '" width="50" height="50">' + + escapeHtml(user.nick) + '</a></div>'; } else { - return '<div class="username"><a href="/u/' + escapeHtml(user.nick) + '">' + - escapeHtml(user.nick) + '</a></div>'; + return '<div class="username">' + + '<a href="/u/' + escapeHtml(user.nick) + '" target="_blank">' + + escapeHtml(user.nick) + '</a></div>'; } } @@ -49,10 +59,12 @@ function buildGrowlDataAndPopDatShit(msg) { } function growl(user, msg) { - $.gritter.add({ - title: user, - text: msg - }); + $.gritter.add({ + // (string | mandatory) the heading of the notification + title: user, + // (string | mandatory) the text inside the notification + text: msg + }); } function handleMsgError(resp) { @@ -72,11 +84,16 @@ function submitMessage() { PostedMessages.push(content); $('#msgInput').val(''); - updateUI([{ 'nick': Nick, 'content': content}], null); + var msg = { 'nick': Nick, 'content': content }; + var div = addNewMessage(msg, true); - var onSuccess = function(json) {}; - var onError = function(resp, textStatus, errorThrown) { - $('#msgInput, #msgSubmit').removeAttr('disabled'); + var onSuccess = function(json) { + div.attr('id', 'message-' + json) + .removeClass('loading').addClass('loaded'); + div.find('.spinner').remove(); + }; + var onError = function(resp, textStatus, errorThrown) { + div.remove(); handleMsgError(resp); }; @@ -89,7 +106,7 @@ function submitMessage() { dataType: 'json', success: onSuccess, error: onError - }); + }); } function ifEnter(fn) { @@ -112,30 +129,44 @@ function delayedScrollToBottom(delay) { setTimeout(scrollToBottom, delay, $('#messageList')[0]); } +function addNewMessages(msgs) { + var wasScrolledToBottom = isScrolledToBottom($('#messageList')[0]); + var msgStr = $.map(msgs, buildMessageDiv).join(''); + $('#messageList').append(msgStr); + + if (wasScrolledToBottom) { delayedScrollToBottom(500); } +} + +function addNewMessage(msg, isLoading) { + var wasScrolledToBottom = isScrolledToBottom($('#messageList')[0]); + var msgStr = buildMessageDiv(msg, isLoading); + var div = $(msgStr).appendTo('#messageList'); + if (wasScrolledToBottom) { delayedScrollToBottom(500); } + return div; +} + +function setUserList(users) { + $("#userList").html($.map(users, buildUserDiv).join('')); +} + function updateUI(msgs, users) { - if (window['growlize'] && msgs !== null) { - $.map(msgs, buildGrowlDataAndPopDatShit) - } - else if (msgs !== null) { - var msgStr = $.map(msgs, buildMessageDiv).join(''); - var wasScrolledToBottom = isScrolledToBottom($('#messageList')[0]); - $('#messageList').append(msgStr); - - if (wasScrolledToBottom) { - delayedScrollToBottom(500); - } + if (window['growlize'] && msgs && msgs.length > 0) { + $.map(msgs, buildGrowlDataAndPopDatShit) + } else if (msgs && msgs.length > 0) { + addNewMessages(msgs); } if (users !== null) { - var flattened = users.sort().join(",") - if (!('userlist' in cache) || flattened != cache.userlist){ - $("#userList").html($.map(users, buildUserDiv).join('')); - } - cache.userlist = flattened + var flattened = users.sort().join(",") + if (!('userlist' in cache) || flattened != cache.userlist) { + $("#userList").html($.map(users, buildUserDiv).join('')); + } + cache.userlist = flattened } } // A duplicate message is a message that was likely to have // originated from this browser. +// TODO: replace w/ msg_id checks. function isDuplicateMessage(m) { if (m.nick != Nick || $.inArray(m.content, PostedMessages) == -1) { return false; @@ -240,3 +271,5 @@ function initLog() { }); } + +function favoriteImage() {}; |