corrade-http-templates – Diff between revs 35 and 37

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