diff options
Diffstat (limited to 'static')
| -rwxr-xr-x | static/index.html | 46 | ||||
| -rwxr-xr-x | static/pichat.css | 104 | ||||
| -rwxr-xr-x | static/pichat.js | 344 | ||||
| -rwxr-xr-x | static/reset.css | 106 | ||||
| -rwxr-xr-x | static/test.html | 150 |
5 files changed, 375 insertions, 375 deletions
diff --git a/static/index.html b/static/index.html index bd75ab1..cee1d91 100755 --- a/static/index.html +++ b/static/index.html @@ -1,23 +1,23 @@ -<html>
- <head>
- <title>Pichat</title>
- <link rel="stylesheet" type="text/css" href="static/reset.css">
- <link rel="stylesheet" type="text/css" href="static/pichat.css">
- <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/pichat.js"></script>
- <script>
- $(document).ready(function() {
- $('#join').click(join);
- $('#nick').keyup(ifEnter(join));
- });
- </script>
- </head>
- <body>
- <div id="content">
- <h1>Welcome to Pichat!</h1>
- <input type="text" name="nick" id="nick">
- <input type="submit" value="Join" id="join">
- <img id="loginspinner" src="static/spinner.gif" style="display: none" />
- </div>
- </body>
-</html>
+<html> + <head> + <title>Pichat</title> + <link rel="stylesheet" type="text/css" href="static/reset.css"> + <link rel="stylesheet" type="text/css" href="static/pichat.css"> + <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/pichat.js"></script> + <script> + $(document).ready(function() { + $('#join').click(join); + $('#nick').keyup(ifEnter(join)); + }); + </script> + </head> + <body> + <div id="content"> + <h1>Welcome to Pichat!</h1> + <input type="text" name="nick" id="nick"> + <input type="submit" value="Join" id="join"> + <img id="loginspinner" src="static/spinner.gif" style="display: none" /> + </div> + </body> +</html> diff --git a/static/pichat.css b/static/pichat.css index 383ba7a..7bbb457 100755 --- a/static/pichat.css +++ b/static/pichat.css @@ -1,53 +1,53 @@ -/* pichat.css */
-
-html, body {
- padding: 1em;
-}
-
-#content, #chatbox {
- position: relative;
-}
-
-#messagePane {
- border: 1px solid green;
- height: 600px;
- padding: 5px;
- position: absolute;
- width: 540px;
-}
-
-#messageList {
- height: 575px;
- width: 540px;
- overflow-y: auto;
- overflow-x: hidden;
- border-bottom: 1px solid grey;
-}
-
-#msgInputDiv {
- height: 15px;
-}
-
-#msgInput {
- width: 85%;
- margin-right: 5px;
-}
-
-#msgSubmit {
- width: 14%;
-}
-
-.msgDiv {
- width: 520px;
-}
-
-#userList {
- overflow: auto;
- border: 1px solid blue;
- height: 600px;
- margin: 0px;
- position: absolute;
- padding: 5px;
- left: 550px;
- width: 150px;
+/* pichat.css */ + +html, body { + padding: 1em; +} + +#content, #chatbox { + position: relative; +} + +#messagePane { + border: 1px solid green; + height: 600px; + padding: 5px; + position: absolute; + width: 540px; +} + +#messageList { + height: 575px; + width: 540px; + overflow-y: auto; + overflow-x: hidden; + border-bottom: 1px solid grey; +} + +#msgInputDiv { + height: 15px; +} + +#msgInput { + width: 85%; + margin-right: 5px; +} + +#msgSubmit { + width: 14%; +} + +.msgDiv { + width: 520px; +} + +#userList { + overflow: auto; + border: 1px solid blue; + height: 600px; + margin: 0px; + position: absolute; + padding: 5px; + left: 550px; + width: 150px; }
\ No newline at end of file diff --git a/static/pichat.js b/static/pichat.js index 5567ea8..99bf1b5 100755 --- a/static/pichat.js +++ b/static/pichat.js @@ -1,172 +1,172 @@ -// pichat.js
-
-var Nick = null;
-
-function handleJoinError(resp) {
- var respText = resp.responseText ? resp.responseText.trim() : false;
- if (respText == 'NICK_TAKEN') {
- alert("Nick '" + Nick + "' was taken! Please choose another.");
- } else if (respText) {
- alert("Cannot join! (" + respText + ")");
- } else {
- alert("Cannot join! Please try again later.");
- }
-}
-
-function handleMsgError(resp) {
- var respText = resp.responseText ? resp.responseText.trim() : false;
- if (respText == 'UNKNOWN_USER') {
- alert("Can't send message! Please login.");
- } else if (respText) {
- alert("Cannot send message! (" + respText + ")");
- } else {
- alert("Cannot send message!");
- }
-}
-
-function join() {
- $('#join, #nick').attr('disabled', true);
- $('#loginspinner').show();
- Nick = $('#nick').val();
-
- onSuccess = function(json) {
- generateChatInterface(json.users, json.messages);
- };
-
- onError = function(resp, textStatus, errorThrown) {
- $('#join, #nick').attr('disabled', false);
- $('#loginspinner').hide();
- handleJoinError(resp);
- };
-
- $.ajax({
- type: 'GET',
- timeout: 5000,
- url: 'join',
- data: {'nick': Nick },
- cache: false,
- dataType: 'json',
- success: onSuccess,
- error: onError
- });
-}
-
-function buildUserDiv(user) {
- return '<div>' + user + '</div>';
-}
-
-// http://snippets.dzone.com/posts/show/6995
-var URLRegex = /((http\:\/\/|https\:\/\/|ftp\:\/\/)|(www\.))+(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/i;
-
-function buildMessageDiv(msg) {
- var match = URLRegex.exec(msg.content)
- if (match) {
- return '<div class="msgDev"><b>' + msg.nick + ': </b>'
- + '<a href="' + match[0] + '" target="_blank">'
- + '<img height="150" width="150" src="'
- + match[0] + '" /></a></div>';
- } else {
- return '<div class="msgDiv"><b>' + msg.nick + ": </b>"
- + msg.content + "</div>";
- }
-}
-
-function buildChatInterface(users, messages) {
- var userList = '<div id="userlist">'
- + $.map(users, buildUserDiv).join('') + '</div>';
- var messageList = '<div id="messagePane">'
- + '<div id="messageList">'
- + $.map(messages, buildMessageDiv).join('')
- + '</div>'
- + '<div id="msgInputDiv">'
- + '<input type="input" id="msgInput">'
- + '<input type="submit" value="Enter" id="msgSubmit">'
- + '</div>'
- + '</div>';
- return '<h1>Pichat</h1><div id="chatbox">' + userList + messageList + '</div>';
-}
-
-function submitMessage() {
- var content = $('#msgInput').val();
- var msg = { 'nick': Nick, 'content': content, 'timestamp': new Date() };
- if (content == '') { return; }
-
- var shouldScroll = isScrolledToBottom($('#messageList')[0]);
-
- $('#messageList').append($(buildMessageDiv(msg)));
- $('#msgInput').val('');
-
- if (shouldScroll) {
- scrollToBottom($('#messageList')[0]);
- }
-
- var onSuccess = function() {};
- var onError = function(resp, textStatus, errorThrown) {
- handleMsgError(resp);
- };
-
- $.ajax({
- type: 'GET',
- timeout: 5000,
- url: 'msg',
- data: {'content': content },
- cache: false,
- dataType: 'json',
- success: onSuccess,
- error: onError
- });
-}
-
-function ifEnter(fn) {
- return function(e) {
- if (e.keyCode == 13) { fn(); }
- };
-}
-
-function isScrolledToBottom(div) {
- return Math.abs(div.scrollTop - (div.scrollHeight - div.offsetHeight)) <= 3;
-}
-
-function scrollToBottom(div) {
- div.scrollTop = div.scrollHeight;
-}
-
-function refresh() {
- var onSuccess = function(json) {
- if (json.messages.length == 0) {
- return;
- }
-
- var shouldScroll = isScrolledToBottom($('#messageList')[0]);
-
- // Ignore our own messages
- 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 onError = function(resp, textStatus, errorThrown) {};
-
- $.ajax({
- type: 'GET',
- timeout: 5000,
- url: 'refresh',
- cache: false,
- dataType: 'json',
- success: onSuccess,
- error: onError
- });
-}
-
-function generateChatInterface(users, messages) {
- $('#content').html(buildChatInterface(users, messages));
- $('#msgInput').keyup(ifEnter(submitMessage));
- $('#msgSubmit').click(submitMessage);
- setInterval(refresh, 1000);
-}
-
+// pichat.js + +var Nick = null; + +function handleJoinError(resp) { + var respText = resp.responseText ? resp.responseText.trim() : false; + if (respText == 'NICK_TAKEN') { + alert("Nick '" + Nick + "' was taken! Please choose another."); + } else if (respText) { + alert("Cannot join! (" + respText + ")"); + } else { + alert("Cannot join! Please try again later."); + } +} + +function handleMsgError(resp) { + var respText = resp.responseText ? resp.responseText.trim() : false; + if (respText == 'UNKNOWN_USER') { + alert("Can't send message! Please login."); + } else if (respText) { + alert("Cannot send message! (" + respText + ")"); + } else { + alert("Cannot send message!"); + } +} + +function join() { + $('#join, #nick').attr('disabled', true); + $('#loginspinner').show(); + Nick = $('#nick').val(); + + onSuccess = function(json) { + generateChatInterface(json.users, json.messages); + }; + + onError = function(resp, textStatus, errorThrown) { + $('#join, #nick').attr('disabled', false); + $('#loginspinner').hide(); + handleJoinError(resp); + }; + + $.ajax({ + type: 'GET', + timeout: 5000, + url: 'join', + data: {'nick': Nick }, + cache: false, + dataType: 'json', + success: onSuccess, + error: onError + }); +} + +function buildUserDiv(user) { + return '<div>' + user + '</div>'; +} + +// http://snippets.dzone.com/posts/show/6995 +var URLRegex = /((http\:\/\/|https\:\/\/|ftp\:\/\/)|(www\.))+(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/i; + +function buildMessageDiv(msg) { + var match = URLRegex.exec(msg.content) + if (match) { + return '<div class="msgDev"><b>' + msg.nick + ': </b>' + + '<a href="' + match[0] + '" target="_blank">' + + '<img height="150" width="150" src="' + + match[0] + '" /></a></div>'; + } else { + return '<div class="msgDiv"><b>' + msg.nick + ": </b>" + + msg.content + "</div>"; + } +} + +function buildChatInterface(users, messages) { + var userList = '<div id="userlist">' + + $.map(users, buildUserDiv).join('') + '</div>'; + var messageList = '<div id="messagePane">' + + '<div id="messageList">' + + $.map(messages, buildMessageDiv).join('') + + '</div>' + + '<div id="msgInputDiv">' + + '<input type="input" id="msgInput">' + + '<input type="submit" value="Enter" id="msgSubmit">' + + '</div>' + + '</div>'; + return '<h1>Pichat</h1><div id="chatbox">' + userList + messageList + '</div>'; +} + +function submitMessage() { + var content = $('#msgInput').val(); + var msg = { 'nick': Nick, 'content': content, 'timestamp': new Date() }; + if (content == '') { return; } + + var shouldScroll = isScrolledToBottom($('#messageList')[0]); + + $('#messageList').append($(buildMessageDiv(msg))); + $('#msgInput').val(''); + + if (shouldScroll) { + scrollToBottom($('#messageList')[0]); + } + + var onSuccess = function() {}; + var onError = function(resp, textStatus, errorThrown) { + handleMsgError(resp); + }; + + $.ajax({ + type: 'GET', + timeout: 5000, + url: 'msg', + data: {'content': content }, + cache: false, + dataType: 'json', + success: onSuccess, + error: onError + }); +} + +function ifEnter(fn) { + return function(e) { + if (e.keyCode == 13) { fn(); } + }; +} + +function isScrolledToBottom(div) { + return Math.abs(div.scrollTop - (div.scrollHeight - div.offsetHeight)) <= 3; +} + +function scrollToBottom(div) { + div.scrollTop = div.scrollHeight; +} + +function refresh() { + var onSuccess = function(json) { + if (json.messages.length == 0) { + return; + } + + var shouldScroll = isScrolledToBottom($('#messageList')[0]); + + // Ignore our own messages + 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 onError = function(resp, textStatus, errorThrown) {}; + + $.ajax({ + type: 'GET', + timeout: 5000, + url: 'refresh', + cache: false, + dataType: 'json', + success: onSuccess, + error: onError + }); +} + +function generateChatInterface(users, messages) { + $('#content').html(buildChatInterface(users, messages)); + $('#msgInput').keyup(ifEnter(submitMessage)); + $('#msgSubmit').click(submitMessage); + setInterval(refresh, 1000); +} + diff --git a/static/reset.css b/static/reset.css index 8767cdd..a6a258f 100755 --- a/static/reset.css +++ b/static/reset.css @@ -1,54 +1,54 @@ -/* reset.css
- From http://meyerweb.com/eric/tools/css/reset/
- v1.0 | 20080212 */
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, font, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td {
- margin: 0;
- padding: 0;
- border: 0;
- outline: 0;
- font-size: 100%;
- vertical-align: baseline;
- background: transparent;
-}
-body {
- line-height: 1;
-}
-ol, ul {
- list-style: none;
-}
-blockquote, q {
- quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
- content: '';
- content: none;
-}
-
-/* remember to define focus styles! */
-:focus {
- outline: 0;
-}
-
-/* remember to highlight inserts somehow! */
-ins {
- text-decoration: none;
-}
-del {
- text-decoration: line-through;
-}
-
-/* tables still need 'cellspacing="0"' in the markup */
-table {
- border-collapse: collapse;
- border-spacing: 0;
+/* reset.css + From http://meyerweb.com/eric/tools/css/reset/ + v1.0 | 20080212 */ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, font, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-size: 100%; + vertical-align: baseline; + background: transparent; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} + +/* remember to define focus styles! */ +:focus { + outline: 0; +} + +/* remember to highlight inserts somehow! */ +ins { + text-decoration: none; +} +del { + text-decoration: line-through; +} + +/* tables still need 'cellspacing="0"' in the markup */ +table { + border-collapse: collapse; + border-spacing: 0; }
\ No newline at end of file diff --git a/static/test.html b/static/test.html index 1c9bfbe..bd0779a 100755 --- a/static/test.html +++ b/static/test.html @@ -1,75 +1,75 @@ -<html>
- <head>
- <style>
- #container {
- position: relative;
- width: 1000px;
- }
- #left {
- border: 1px solid green;
- height: 600px;
- left: -89px;
- margin: 0px auto 10%;
- margin-left: 10%;
- padding: 20px;
- position: absolute;
- top: 1%;
- width: 500px;
- }
-
- #right {
- border: 1px solid blue;
- height: 600px;
- margin: 0px 10%;
- margin-right: 10%;
- padding: 20px;
- position: absolute;
- left: 450px;
- top: 1%;
- width: 150px;
- }
- </style>
- </head>
-
- <body>
- <div id="container">
- <div id="left">
- I saw the best minds of my generation destroyed by
-madness, starving hysterical naked,
-dragging themselves through the negro streets at dawn
-looking for an angry fix,
-angelheaded hipsters burning for the ancient heavenly
-connection to the starry dynamo in the machin-
-ery of night,
-who poverty and tatters and hollow-eyed and high sat
-up smoking in the supernatural darkness of
-cold-water flats floating across the tops of cities
-contemplating jazz,
-who bared their brains to Heaven under the El and
-saw Mohammedan angels staggering on tene-
-ment roofs illuminated,
-who passed through universities with radiant cool eyes
-hallucinating Arkansas and Blake-light tragedy
-among the scholars of war,
-who were expelled from the academies for crazy &
-publishing obscene odes on the windows of the
-skull,
-who cowered in unshaven rooms in underwear, burn-
-ing their money in wastebaskets and listening
-to the Terror through the wall,
-who got busted in their pubic beards returning through
-Laredo with a belt of marijuana for New York,
-who ate fire in paint hotels or drank turpentine in
-Paradise Alley, death, or purgatoried their
-torsos night after night
-with dreams, with drugs, with waking nightmares, al-
-cohol and cock and endless balls,
-incomparable blind; streets of shuddering cloud and
-lightning in the mind leaping toward poles of
- </div>
- <div id="right">
- </div>
- </div>
- </body>
-
-</html>
+<html> + <head> + <style> + #container { + position: relative; + width: 1000px; + } + #left { + border: 1px solid green; + height: 600px; + left: -89px; + margin: 0px auto 10%; + margin-left: 10%; + padding: 20px; + position: absolute; + top: 1%; + width: 500px; + } + + #right { + border: 1px solid blue; + height: 600px; + margin: 0px 10%; + margin-right: 10%; + padding: 20px; + position: absolute; + left: 450px; + top: 1%; + width: 150px; + } + </style> + </head> + + <body> + <div id="container"> + <div id="left"> + I saw the best minds of my generation destroyed by +madness, starving hysterical naked, +dragging themselves through the negro streets at dawn +looking for an angry fix, +angelheaded hipsters burning for the ancient heavenly +connection to the starry dynamo in the machin- +ery of night, +who poverty and tatters and hollow-eyed and high sat +up smoking in the supernatural darkness of +cold-water flats floating across the tops of cities +contemplating jazz, +who bared their brains to Heaven under the El and +saw Mohammedan angels staggering on tene- +ment roofs illuminated, +who passed through universities with radiant cool eyes +hallucinating Arkansas and Blake-light tragedy +among the scholars of war, +who were expelled from the academies for crazy & +publishing obscene odes on the windows of the +skull, +who cowered in unshaven rooms in underwear, burn- +ing their money in wastebaskets and listening +to the Terror through the wall, +who got busted in their pubic beards returning through +Laredo with a belt of marijuana for New York, +who ate fire in paint hotels or drank turpentine in +Paradise Alley, death, or purgatoried their +torsos night after night +with dreams, with drugs, with waking nightmares, al- +cohol and cock and endless balls, +incomparable blind; streets of shuddering cloud and +lightning in the mind leaping toward poles of + </div> + <div id="right"> + </div> + </div> + </body> + +</html> |
