corrade-http-templates – Blame information for rev 32
?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"> |
||
28 | office | 18 | <!-- <link rel="stylesheet" href="css/style.css?v=1.1"> --> |
19 | </head> |
||
20 | |||
21 | <body> |
||
22 | <div class="container"> |
||
30 | office | 23 | <form role="form" data-toggle="validator"> |
28 | office | 24 | <div class="form-group"> |
25 | <textarea class="form-control" id="chat" readonly="readonly" rows="12"></textarea> |
||
26 | </div> |
||
27 | <div class="form-group"> |
||
28 | <div id="controls"> |
||
29 | <div class="input-group"> |
||
30 | office | 30 | <input class="form-control" id="name" maxlength="8" type="text" value="Someone" required> |
28 | office | 31 | <span class="input-group-addon">@</span> |
30 | office | 32 | <input class="form-control" id="message" type="text" required> |
28 | office | 33 | <span class="input-group-btn"> |
30 | office | 34 | <button class="btn btn-default" id="send" type="submit">Send</button> |
28 | office | 35 | </span> |
36 | </div> |
||
37 | </div> |
||
38 | </div> |
||
39 | </form> |
||
40 | </div> |
||
2 | eva | 41 | |
30 | office | 42 | <!-- Include jQuery --> |
32 | office | 43 | <script src="bower_components/jquery/dist/jquery.min.js"></script> |
30 | office | 44 | <!-- Include Bootstrap Validator --> |
45 | <script src="bower_components/bootstrap-validator/js/validator.js"></script> |
||
32 | office | 46 | <!-- Include Velocity --> |
47 | <script src="bower_components/velocity/velocity.min.js"></script> |
||
30 | office | 48 | <script> |
2 | eva | 49 | $(document).ready(function () { |
3 | eva | 50 | function sendGroupMessage() { |
4 | eva | 51 | // Hide the controls. |
32 | office | 52 | $("#controls").animate( |
53 | { |
||
54 | opacity: 0 |
||
55 | }, |
||
56 | { |
||
57 | duration: 1000, |
||
58 | easing: "linear" |
||
59 | } |
||
60 | ); |
||
4 | eva | 61 | // Make the POST request to the PHP script and pass the values of the fields. |
2 | eva | 62 | $.ajax({ |
63 | type: 'post', |
||
64 | url: "sendGroupMessage.php", |
||
65 | data: { |
||
66 | name: $("#name").val(), |
||
67 | message: $("#message").val() |
||
68 | } |
||
69 | }).done(function(data) { |
||
4 | eva | 70 | // If any error occurred, display it. |
71 | if(data) |
||
72 | alert(data); |
||
73 | // When the data returns, clear the message box and show the controls. |
||
2 | eva | 74 | $('#message').val(""); |
32 | office | 75 | $("#controls").animate( |
76 | { |
||
77 | opacity: 1 |
||
78 | }, |
||
79 | { |
||
80 | duration: 1000, |
||
81 | easing: "linear" |
||
82 | } |
||
83 | ); |
||
2 | eva | 84 | }); |
3 | eva | 85 | } |
4 | eva | 86 | // Polls the chatlog every second for changes. |
5 | zed | 87 | (function retrieveMessages() { |
3 | eva | 88 | $.get("chat.log?t=" + Math.random(), function(data) { |
89 | $("#chat").html(data); |
||
22 | office | 90 | $("#chat").scrollTop($("#chat")[0].scrollHeight); |
5 | zed | 91 | setTimeout(retrieveMessages, 1000); |
3 | eva | 92 | }); |
5 | zed | 93 | }()); |
4 | eva | 94 | // When the send button is pressed, then call the sendGroupMessage function to |
95 | // send the message to the PHP script, which then send the message to Corrade. |
||
3 | eva | 96 | $("#send").click(function(e){ |
97 | sendGroupMessage(); |
||
2 | eva | 98 | }); |
3 | eva | 99 | // Subscribe to pressing enter with the message input box selected. |
100 | $("#message").keypress(function(e) { |
||
101 | if (e.which == 13) { |
||
102 | sendGroupMessage(); |
||
103 | return false; |
||
104 | } |
||
105 | }); |
||
2 | eva | 106 | }); |
107 | </script> |
||
108 | </body> |
||
109 | </html> |