corrade-http-templates – Blame information for rev 27
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
2 | eva | 1 | <!doctype html> |
2 | |||
3 | <html lang="en"> |
||
4 | <head> |
||
5 | <meta charset="utf-8"> |
||
6 | |||
27 | office | 7 | <title>Corrade Group Chat Template</title> |
8 | |||
9 | <meta charset="utf-8"> |
||
10 | <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||
11 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
||
2 | eva | 12 | <meta name="description" content="Group Chat Relay using Corrade"> |
13 | <meta name="author" content="Wizardry and Steamworks"> |
||
27 | office | 14 | <link rel="icon" href="../../favicon.ico"> |
4 | eva | 15 | |
27 | office | 16 | <!-- Bootstrap core CSS --> |
17 | <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> |
||
23 | vero | 18 | <link rel="stylesheet" href="css/style.css?v=1.1"> |
2 | eva | 19 | |
20 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> |
||
21 | <script type="text/javascript"> |
||
22 | $(document).ready(function () { |
||
3 | eva | 23 | function sendGroupMessage() { |
4 | eva | 24 | // Do not send the message if either the name or the message is empty. |
25 | // This check is performed in the PHP script as well. |
||
26 | if($.trim($("#name").val()) == '' || $.trim($('#message').val()) == '') |
||
27 | return; |
||
28 | // Hide the controls. |
||
2 | eva | 29 | $("#controls").animate({ opacity: 'hide' }, 'slow'); |
4 | eva | 30 | // Make the POST request to the PHP script and pass the values of the fields. |
2 | eva | 31 | $.ajax({ |
32 | type: 'post', |
||
33 | url: "sendGroupMessage.php", |
||
34 | data: { |
||
35 | name: $("#name").val(), |
||
36 | message: $("#message").val() |
||
37 | } |
||
38 | }).done(function(data) { |
||
4 | eva | 39 | // If any error occurred, display it. |
40 | if(data) |
||
41 | alert(data); |
||
42 | // When the data returns, clear the message box and show the controls. |
||
2 | eva | 43 | $('#message').val(""); |
44 | $("#controls").animate({ opacity: 'show' }, 'slow'); |
||
45 | }); |
||
3 | eva | 46 | } |
4 | eva | 47 | // Polls the chatlog every second for changes. |
5 | zed | 48 | (function retrieveMessages() { |
3 | eva | 49 | $.get("chat.log?t=" + Math.random(), function(data) { |
50 | $("#chat").html(data); |
||
22 | office | 51 | $("#chat").scrollTop($("#chat")[0].scrollHeight); |
5 | zed | 52 | setTimeout(retrieveMessages, 1000); |
3 | eva | 53 | }); |
5 | zed | 54 | }()); |
4 | eva | 55 | // When the send button is pressed, then call the sendGroupMessage function to |
56 | // send the message to the PHP script, which then send the message to Corrade. |
||
3 | eva | 57 | $("#send").click(function(e){ |
58 | sendGroupMessage(); |
||
2 | eva | 59 | }); |
3 | eva | 60 | // Subscribe to pressing enter with the message input box selected. |
61 | $("#message").keypress(function(e) { |
||
62 | if (e.which == 13) { |
||
63 | sendGroupMessage(); |
||
64 | return false; |
||
65 | } |
||
66 | }); |
||
2 | eva | 67 | }); |
68 | </script> |
||
69 | </head> |
||
70 | |||
71 | <body> |
||
27 | office | 72 | <div class="container"> |
73 | <div class="input-group"> |
||
74 | <textarea class="form-control" readonly='readonly' id="chat" rows="12"></textarea><br/> |
||
75 | <div id="controls"> |
||
76 | Name: <input type="text" class="form-control" size="8" value="Someone" id="name"></input> |
||
77 | Message: <input type="text" class="form-control" size="35" id="message"></input> |
||
78 | <button type="button" id="send">Send</button> |
||
79 | </div> |
||
2 | eva | 80 | </div> |
81 | </div> |
||
82 | </body> |
||
83 | </html> |