corrade-http-templates – Diff between revs 32 and 33

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