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