corrade-http-templates – Blame information for rev 61
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
37 | office | 1 | <!DOCTYPE html> |
2 | eva | 2 | |
3 | <html lang="en"> |
||
4 | <head> |
||
27 | office | 5 | <title>Corrade Group Chat Template</title> |
6 | |||
7 | <meta charset="utf-8"> |
||
8 | <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||
9 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
||
2 | eva | 10 | <meta name="description" content="Group Chat Relay using Corrade"> |
11 | <meta name="author" content="Wizardry and Steamworks"> |
||
46 | office | 12 | <link rel="icon" href="favicon.ico"> |
4 | eva | 13 | |
27 | office | 14 | <!-- Bootstrap core CSS --> |
61 | office | 15 | <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> |
35 | office | 16 | <link rel="stylesheet" href="css/style.css?v=1.3"> |
28 | office | 17 | </head> |
18 | |||
19 | <body> |
||
33 | office | 20 | <!-- Group chat container. --> |
28 | office | 21 | <div class="container"> |
30 | office | 22 | <form role="form" data-toggle="validator"> |
28 | office | 23 | <div class="form-group"> |
24 | <textarea class="form-control" id="chat" readonly="readonly" rows="12"></textarea> |
||
25 | </div> |
||
33 | office | 26 | <div class="form-group row"> |
37 | office | 27 | <!-- Controls --> |
28 | office | 28 | <div id="controls"> |
33 | office | 29 | <div class="col-xs-3"> |
30 | <div class="input-group"> |
||
31 | <span class="input-group-addon"> |
||
32 | <label for="name">Name</label> |
||
33 | </span> |
||
34 | <input class="form-control" id="name" maxlength="8" type="text" value="Someone" required> |
||
35 | </div> |
||
36 | </div> |
||
34 | office | 37 | <div class="col-lg-1"> |
33 | office | 38 | <div class="input-group"> |
39 | <span class="input-group-addon"> |
||
40 | <label for="message">Message</label> |
||
41 | </span> |
||
42 | <div class="input-group col-xs-12"> |
||
43 | <input class="form-control" id="message" type="text" required> |
||
44 | <span class="input-group-btn"> |
||
45 | <button class="btn btn-default" id="send" type="submit">Send</button> |
||
46 | </span> |
||
47 | </div> |
||
48 | </div> |
||
49 | </div> |
||
28 | office | 50 | </div> |
51 | </div> |
||
52 | </form> |
||
53 | </div> |
||
2 | eva | 54 | |
30 | office | 55 | <!-- Include jQuery --> |
61 | office | 56 | <script src="node_modules/jquery/dist/jquery.min.js"></script> |
57 | <!-- Include Bootstrap and Validator --> |
||
58 | <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script> |
||
59 | <script src="node_modules/bootstrap-validator/js/validator.js"></script> |
||
32 | office | 60 | <!-- Include Velocity --> |
61 | office | 61 | <script src="node_modules/velocity-animate/velocity.min.js"></script> |
30 | office | 62 | <script> |
2 | eva | 63 | $(document).ready(function () { |
52 | office | 64 | function sendGroupMessage(token) { |
4 | eva | 65 | // Hide the controls. |
32 | office | 66 | $("#controls").animate( |
67 | { |
||
68 | opacity: 0 |
||
69 | }, |
||
70 | { |
||
71 | duration: 1000, |
||
72 | easing: "linear" |
||
73 | } |
||
74 | ); |
||
4 | eva | 75 | // Make the POST request to the PHP script and pass the values of the fields. |
2 | eva | 76 | $.ajax({ |
77 | type: 'post', |
||
78 | url: "sendGroupMessage.php", |
||
79 | data: { |
||
80 | name: $("#name").val(), |
||
52 | office | 81 | message: $("#message").val(), |
82 | token: token |
||
2 | eva | 83 | } |
84 | }).done(function(data) { |
||
4 | eva | 85 | // If any error occurred, display it. |
86 | if(data) |
||
87 | alert(data); |
||
88 | // When the data returns, clear the message box and show the controls. |
||
2 | eva | 89 | $('#message').val(""); |
32 | office | 90 | $("#controls").animate( |
91 | { |
||
92 | opacity: 1 |
||
93 | }, |
||
94 | { |
||
95 | duration: 1000, |
||
96 | easing: "linear" |
||
97 | } |
||
98 | ); |
||
2 | eva | 99 | }); |
3 | eva | 100 | } |
52 | office | 101 | |
4 | eva | 102 | // Polls the chatlog every second for changes. |
5 | zed | 103 | (function retrieveMessages() { |
3 | eva | 104 | $.get("chat.log?t=" + Math.random(), function(data) { |
105 | $("#chat").html(data); |
||
22 | office | 106 | $("#chat").scrollTop($("#chat")[0].scrollHeight); |
5 | zed | 107 | setTimeout(retrieveMessages, 1000); |
3 | eva | 108 | }); |
5 | zed | 109 | }()); |
52 | office | 110 | |
111 | $.get('session.php').then((token) => { |
||
112 | // When the send button is pressed, then call the sendGroupMessage function to |
||
113 | // send the message to the PHP script, which then send the message to Corrade. |
||
114 | $("#send").click(function(e){ |
||
115 | sendGroupMessage(token); |
||
116 | }); |
||
117 | |||
118 | // Subscribe to pressing enter with the message input box selected. |
||
119 | $("#message").keypress(function(e) { |
||
120 | if (e.which == 13) { |
||
121 | sendGroupMessage(token); |
||
122 | return false; |
||
123 | } |
||
124 | }); |
||
2 | eva | 125 | }); |
126 | }); |
||
127 | </script> |
||
128 | </body> |
||
129 | </html> |