corrade-http-templates – Diff between revs 28 and 30

Subversion Repositories:
Rev:
Only display areas with differences – Ignore whitespace
Rev 28 Rev 30
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 <div class="container"> 22 <div class="container">
23 <form role="form"> 23 <form role="form" data-toggle="validator">
24 <div class="form-group"> 24 <div class="form-group">
25 <textarea class="form-control" id="chat" readonly="readonly" rows="12"></textarea> 25 <textarea class="form-control" id="chat" readonly="readonly" rows="12"></textarea>
26 </div> 26 </div>
27 <div class="form-group"> 27 <div class="form-group">
28 <div id="controls"> 28 <div id="controls">
29 <div class="input-group"> 29 <div class="input-group">
30 <input class="form-control" id="name" maxlength="8" type="text" value="Someone"> 30 <input class="form-control" id="name" maxlength="8" type="text" value="Someone" required>
31 <span class="input-group-addon">@</span> 31 <span class="input-group-addon">@</span>
32 <input class="form-control" id="message" type="text"> 32 <input class="form-control" id="message" type="text" required>
33 <span class="input-group-btn"> 33 <span class="input-group-btn">
34 <button class="btn btn-default" id="send" type="button">Send</button> 34 <button class="btn btn-default" id="send" type="submit">Send</button>
35 </span> 35 </span>
36 </div> 36 </div>
37 </div> 37 </div>
38 </div> 38 </div>
39 </form> 39 </form>
40 </div> 40 </div>
-   41
41 42 <!-- Include jQuery -->
42 <script type="text/javascript" src="bower_components//jquery/dist/jquery.min.js"></script> 43 <script src="bower_components//jquery/dist/jquery.min.js"></script>
-   44 <!-- Include Bootstrap Validator -->
-   45 <script src="bower_components/bootstrap-validator/js/validator.js"></script>
43 <script type="text/javascript"> 46 <script>
44 $(document).ready(function () { 47 $(document).ready(function () {
45 function sendGroupMessage() { -  
46 // Do not send the message if either the name or the message is empty. -  
47 // This check is performed in the PHP script as well. -  
48 if($.trim($("#name").val()) == '' || $.trim($('#message').val()) == '') -  
49 return; 48 function sendGroupMessage() {
50 // Hide the controls. 49 // Hide the controls.
51 $("#controls").animate({ opacity: 'hide' }, 'slow'); 50 $("#controls").animate({ opacity: 'hide' }, 'slow');
52 // Make the POST request to the PHP script and pass the values of the fields. 51 // Make the POST request to the PHP script and pass the values of the fields.
53 $.ajax({ 52 $.ajax({
54 type: 'post', 53 type: 'post',
55 url: "sendGroupMessage.php", 54 url: "sendGroupMessage.php",
56 data: { 55 data: {
57 name: $("#name").val(), 56 name: $("#name").val(),
58 message: $("#message").val() 57 message: $("#message").val()
59 } 58 }
60 }).done(function(data) { 59 }).done(function(data) {
61 // If any error occurred, display it. 60 // If any error occurred, display it.
62 if(data) 61 if(data)
63 alert(data); 62 alert(data);
64 // When the data returns, clear the message box and show the controls. 63 // When the data returns, clear the message box and show the controls.
65 $('#message').val(""); 64 $('#message').val("");
66 $("#controls").animate({ opacity: 'show' }, 'slow'); 65 $("#controls").animate({ opacity: 'show' }, 'slow');
67 }); 66 });
68 } 67 }
69 // Polls the chatlog every second for changes. 68 // Polls the chatlog every second for changes.
70 (function retrieveMessages() { 69 (function retrieveMessages() {
71 $.get("chat.log?t=" + Math.random(), function(data) { 70 $.get("chat.log?t=" + Math.random(), function(data) {
72 $("#chat").html(data); 71 $("#chat").html(data);
73 $("#chat").scrollTop($("#chat")[0].scrollHeight); 72 $("#chat").scrollTop($("#chat")[0].scrollHeight);
74 setTimeout(retrieveMessages, 1000); 73 setTimeout(retrieveMessages, 1000);
75 }); 74 });
76 }()); 75 }());
77 // When the send button is pressed, then call the sendGroupMessage function to 76 // When the send button is pressed, then call the sendGroupMessage function to
78 // send the message to the PHP script, which then send the message to Corrade. 77 // send the message to the PHP script, which then send the message to Corrade.
79 $("#send").click(function(e){ 78 $("#send").click(function(e){
80 sendGroupMessage(); 79 sendGroupMessage();
81 }); 80 });
82 // Subscribe to pressing enter with the message input box selected. 81 // Subscribe to pressing enter with the message input box selected.
83 $("#message").keypress(function(e) { 82 $("#message").keypress(function(e) {
84 if (e.which == 13) { 83 if (e.which == 13) {
85 sendGroupMessage(); 84 sendGroupMessage();
86 return false; 85 return false;
87 } 86 }
88 }); 87 });
89 }); 88 });
90 </script> 89 </script>
91 </body> 90 </body>
92 </html> 91 </html>
93   92