corrade-http-templates – Blame information for rev 32

Subversion Repositories:
Rev:
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>