corrade-http-templates – Diff between revs 51 and 62
?pathlinks?
Rev 51 | Rev 62 | |||
---|---|---|---|---|
1 | <!DOCTYPE html> |
1 | <!DOCTYPE html> |
|
2 | <html lang="en"> |
2 | <html lang="en"> |
|
3 | |
3 | |
|
4 | <head> |
4 | <head> |
|
5 | <title>Corrade Instant Message Template</title> |
5 | <title>Corrade Instant Message Template</title> |
|
6 | |
6 | |
|
7 | <meta charset="utf-8"> |
7 | <meta charset="utf-8"> |
|
8 | <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
8 | <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|
9 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
9 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
|
10 | <meta name="description" content="Group Chat Relay using Corrade"> |
10 | <meta name="description" content="Group Chat Relay using Corrade"> |
|
11 | <meta name="author" content="Wizardry and Steamworks"> |
11 | <meta name="author" content="Wizardry and Steamworks"> |
|
12 | <link rel="icon" href="favicon.ico"> |
12 | <link rel="icon" href="favicon.ico"> |
|
13 | |
13 | |
|
14 | <!-- Bootstrap core CSS --> |
14 | <!-- Bootstrap core CSS --> |
|
15 | <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> |
15 | <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> |
|
16 | <!-- jQuery UI CSS --> |
16 | <!-- jQuery UI CSS --> |
|
17 | <link href="bower_components/jquery-ui/themes/base/jquery-ui.min.css" rel="stylesheet"> |
17 | <link href="node_modules/jquery-ui-dist/jquery-ui.min.css" rel="stylesheet"> |
|
18 | <!-- Custom Styles --> |
18 | <!-- Custom Styles --> |
|
19 | <link rel="stylesheet" href="css/style.css?v=1.3"> |
19 | <link rel="stylesheet" href="css/style.css?v=1.3"> |
|
20 | </head> |
20 | </head> |
|
21 | |
21 | |
|
22 | <body> |
22 | <body> |
|
23 | |
23 | |
|
24 | <!-- Modal --> |
24 | <!-- Modal --> |
|
25 | <div id="dialog" class="modal fade" role="dialog"> |
25 | <div id="dialog" class="modal fade" role="dialog"> |
|
26 | <div class="modal-dialog"> |
26 | <div class="modal-dialog"> |
|
27 | |
27 | |
|
28 | <!-- Modal content--> |
28 | <!-- Modal content--> |
|
29 | <div class="modal-content"> |
29 | <div class="modal-content"> |
|
30 | <div class="modal-header"> |
30 | <div class="modal-header"> |
|
31 | <button type="button" class="close" data-dismiss="modal">×</button> |
31 | <button type="button" class="close" data-dismiss="modal">×</button> |
|
32 | <h2 class="modal-title">Enter Agent Name</h2> |
32 | <h2 class="modal-title">Enter Agent Name</h2> |
|
33 | </div> |
33 | </div> |
|
34 | <form role="form" data-toggle="validator" class="form-inline"> |
34 | <form role="form" data-toggle="validator" class="form-inline"> |
|
35 | <div class="modal-body"> |
35 | <div class="modal-body"> |
|
36 | |
36 | |
|
37 | <div class="form-group"> |
37 | <div class="form-group"> |
|
38 | <div class="input-group"> |
38 | <div class="input-group"> |
|
39 | <label for="firstname">First Name</label> |
39 | <label for="firstname">First Name</label> |
|
40 | <input class="form-control" maxlength="63" type="text" id="firstname" placeholder="Corrade" required> |
40 | <input class="form-control" maxlength="63" type="text" id="firstname" placeholder="Corrade" required> |
|
41 | </div> |
41 | </div> |
|
42 | <div class="input-group"> |
42 | <div class="input-group"> |
|
43 | <label for="lastname">Last Name</label> |
43 | <label for="lastname">Last Name</label> |
|
44 | <input class="form-control" maxlength="63" type="text" id="lastname" placeholder="Resident" required> |
44 | <input class="form-control" maxlength="63" type="text" id="lastname" placeholder="Resident" required> |
|
45 | </div> |
45 | </div> |
|
46 | </div> |
46 | </div> |
|
47 | |
47 | |
|
48 | |
48 | |
|
49 | </div> |
49 | </div> |
|
50 | <div class="modal-footer"> |
50 | <div class="modal-footer"> |
|
51 | <button type="button" id="startConversation" class="btn btn-primary btn-lg"> |
51 | <button type="button" id="startConversation" class="btn btn-primary btn-lg"> |
|
52 | <span class="glyphicon glyphicon-bullhorn" aria-hidden="true"></span> Start |
52 | <span class="glyphicon glyphicon-bullhorn" aria-hidden="true"></span> Start |
|
53 | </button> |
53 | </button> |
|
54 | <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> |
54 | <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> |
|
55 | </div> |
55 | </div> |
|
56 | </form> |
56 | </form> |
|
57 | </div> |
57 | </div> |
|
58 | |
58 | |
|
59 | </div> |
59 | </div> |
|
60 | </div> |
60 | </div> |
|
61 | |
61 | |
|
62 | <div class="container"> |
62 | <div class="container"> |
|
63 | <form role="form" data-toggle="validator" action="javascript:return;"> |
63 | <form role="form" data-toggle="validator" action="javascript:return;"> |
|
64 | <div class="form-group row"> |
64 | <div class="form-group row"> |
|
65 | <div class="input-group"> |
65 | <div class="input-group"> |
|
66 | <span class="input-group-addon"> |
66 | <span class="input-group-addon"> |
|
67 | <label for="name">Your Name</label> |
67 | <label for="name">Your Name</label> |
|
68 | </span> |
68 | </span> |
|
69 | <input type="text" maxlength="8" value="Someone" id="name" class="form-control" required> |
69 | <input type="text" maxlength="8" value="Someone" id="name" class="form-control" required> |
|
70 | <span class="input-group-btn"> |
70 | <span class="input-group-btn"> |
|
71 | <button type="submit" class="btn btn-default" data-toggle="modal" data-target="#dialog">New Conversation</button> |
71 | <button type="submit" class="btn btn-default" data-toggle="modal" data-target="#dialog">New Conversation</button> |
|
72 | </span> |
72 | </span> |
|
73 | </div> |
73 | </div> |
|
74 | </div> |
74 | </div> |
|
75 | </form> |
75 | </form> |
|
76 | |
76 | |
|
77 | <!-- This div holds the tabs that will be created. This structure should not be deleted. --> |
77 | <!-- This div holds the tabs that will be created. This structure should not be deleted. --> |
|
78 | <div id="tabs"> |
78 | <div id="tabs"> |
|
79 | <ul> |
79 | <ul> |
|
80 | |
80 | |
|
81 | </ul> |
81 | </ul> |
|
82 | <div> |
82 | <div> |
|
83 | |
83 | |
|
84 | </div> |
84 | </div> |
|
85 | </div> |
85 | </div> |
|
86 | </div> |
86 | </div> |
|
87 | |
87 | |
|
88 | <!-- Include jQuery --> |
88 | <!-- Include jQuery --> |
|
89 | <script src="bower_components/jquery/dist/jquery.min.js"></script> |
89 | <script src="node_modules/jquery/dist/jquery.min.js"></script> |
|
90 | <!-- Include jQuery UI --> |
90 | <!-- Include jQuery UI --> |
|
91 | <script src="bower_components/jquery-ui/jquery-ui.min.js"></script> |
91 | <script src="node_modules/jquery-ui-dist/jquery-ui.min.js"></script> |
|
92 | <!-- Include Bootstrap --> |
92 | <!-- Include Bootstrap and Validator --> |
|
93 | <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> |
93 | <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script> |
|
94 | <!-- Include Bootstrap Validator --> |
- | ||
95 | <script src="bower_components/bootstrap-validator/js/validator.js"></script> |
94 | <script src="node_modules/bootstrap-validator/js/validator.js"></script> |
|
96 | <!-- Include Velocity --> |
95 | <!-- Include Velocity --> |
|
97 | <script src="bower_components/velocity/velocity.min.js"></script> |
96 | <script src="node_modules/velocity-animate/velocity.min.js"></script> |
|
98 | |
- | ||
99 | <script> |
97 | <script> |
|
100 | $(function() { |
98 | $(function() { |
|
101 | $.get('session.php').then((token) => { |
99 | $.get('session.php').then((token) => { |
|
102 | var firstName = $("#firstname"), |
100 | var firstName = $("#firstname"), |
|
103 | lastName = $("#lastname"), |
101 | lastName = $("#lastname"), |
|
104 | tabTemplate = "<li id='#{id}'> \ |
102 | tabTemplate = "<li id='#{id}'> \ |
|
105 | <a href='#{href}'>#{label}</a> \ |
103 | <a href='#{href}'>#{label}</a> \ |
|
106 | <span class='ui-icon ui-icon-close'></span> \ |
104 | <span class='ui-icon ui-icon-close'></span> \ |
|
107 | </li>", |
105 | </li>", |
|
108 | tabCounter = 0, |
106 | tabCounter = 0, |
|
109 | messageIntervals = {}, |
107 | messageIntervals = {}, |
|
110 | getConversationsTimeout, |
108 | getConversationsTimeout, |
|
111 | tabs = $("#tabs").tabs(); |
109 | tabs = $("#tabs").tabs(); |
|
112 | |
110 | |
|
113 | $("#startConversation") |
111 | $("#startConversation") |
|
114 | .on("click", function() { |
112 | .on("click", function() { |
|
115 | addTab(); |
113 | addTab(); |
|
116 | $("#dialog").modal('hide'); |
114 | $("#dialog").modal('hide'); |
|
117 | }); |
115 | }); |
|
118 | |
116 | |
|
119 | // Request the active conversations from the backend script and create tabs. |
117 | // Request the active conversations from the backend script and create tabs. |
|
120 | function getConversations() { |
118 | function getConversations() { |
|
121 | $.get("getConversations.php?t=" + Math.random(), function(data) { |
119 | $.get("getConversations.php?t=" + Math.random(), function(data) { |
|
122 | var json = $.parseJSON(data); |
120 | var json = $.parseJSON(data); |
|
123 | $.each(json, function(index, avatar) { |
121 | $.each(json, function(index, avatar) { |
|
124 | if (!conversationExists(avatar.firstname, avatar.lastname)) |
122 | if (!conversationExists(avatar.firstname, avatar.lastname)) |
|
125 | addTab(avatar.firstname, avatar.lastname); |
123 | addTab(avatar.firstname, avatar.lastname); |
|
126 | }); |
124 | }); |
|
127 | getConversationsTimeout = setTimeout( |
125 | getConversationsTimeout = setTimeout( |
|
128 | getConversations, |
126 | getConversations, |
|
129 | 1000 |
127 | 1000 |
|
130 | ); |
128 | ); |
|
131 | }); |
129 | }); |
|
132 | } |
130 | } |
|
133 | |
131 | |
|
134 | // Function to send the message to an agent by passing it back through PHP. |
132 | // Function to send the message to an agent by passing it back through PHP. |
|
135 | function sendInstantMessage(e) { |
133 | function sendInstantMessage(e) { |
|
136 | var index = e.data.index; |
134 | var index = e.data.index; |
|
137 | // If the parameters are empty, then do not send anything to the PHP script. |
135 | // If the parameters are empty, then do not send anything to the PHP script. |
|
138 | if($.trim($("#firstname-" + index).val()) == '' || |
136 | if($.trim($("#firstname-" + index).val()) == '' || |
|
139 | $.trim($("#lastname-" + index).val()) == '' || |
137 | $.trim($("#lastname-" + index).val()) == '' || |
|
140 | $.trim($("#message-" + index).val()) == '') |
138 | $.trim($("#message-" + index).val()) == '') |
|
141 | return; |
139 | return; |
|
142 | $("#controls-" + index).animate( |
140 | $("#controls-" + index).animate( |
|
143 | { |
141 | { |
|
144 | opacity: 0 |
142 | opacity: 0 |
|
145 | }, |
143 | }, |
|
146 | { |
144 | { |
|
147 | duration: 1000, |
145 | duration: 1000, |
|
148 | easing: "linear" |
146 | easing: "linear" |
|
149 | } |
147 | } |
|
150 | ); |
148 | ); |
|
151 | $.ajax({ |
149 | $.ajax({ |
|
152 | type: 'post', |
150 | type: 'post', |
|
153 | url: "sendInstantMessage.php", |
151 | url: "sendInstantMessage.php", |
|
154 | data: { |
152 | data: { |
|
155 | name: $("#name").val(), |
153 | name: $("#name").val(), |
|
156 | firstname: $("#firstname-" + index).val(), |
154 | firstname: $("#firstname-" + index).val(), |
|
157 | lastname: $("#lastname-" + index).val(), |
155 | lastname: $("#lastname-" + index).val(), |
|
158 | message: $("#message-" + index).val(), |
156 | message: $("#message-" + index).val(), |
|
159 | token: token |
157 | token: token |
|
160 | } |
158 | } |
|
161 | }).done(function(data) { |
159 | }).done(function(data) { |
|
162 | if(data) |
160 | if(data) |
|
163 | alert(data); |
161 | alert(data); |
|
164 | $("#message-" + index).val(""); |
162 | $("#message-" + index).val(""); |
|
165 | $("#controls-" + index).animate( |
163 | $("#controls-" + index).animate( |
|
166 | { |
164 | { |
|
167 | opacity: 1 |
165 | opacity: 1 |
|
168 | }, |
166 | }, |
|
169 | { |
167 | { |
|
170 | duration: 1000, |
168 | duration: 1000, |
|
171 | easing: "linear" |
169 | easing: "linear" |
|
172 | } |
170 | } |
|
173 | ); |
171 | ); |
|
174 | }); |
172 | }); |
|
175 | } |
173 | } |
|
176 | |
174 | |
|
177 | // Loads all the stored instant messages from the log file named after the avatar. |
175 | // Loads all the stored instant messages from the log file named after the avatar. |
|
178 | function loadInstantMessage(index) { |
176 | function loadInstantMessage(index) { |
|
179 | $.get("messages/" + $("#firstname-" + index).val() + " " + $("#lastname-" + index).val() + ".log" + "?t=" + Math.random(), function(data) { |
177 | $.get("messages/" + $("#firstname-" + index).val() + " " + $("#lastname-" + index).val() + ".log" + "?t=" + Math.random(), function(data) { |
|
180 | $("#chat-" + index).html(data); |
178 | $("#chat-" + index).html(data); |
|
181 | // Scroll to the bottom of the conversation. |
179 | // Scroll to the bottom of the conversation. |
|
182 | $("#chat-" + index).scrollTop($("#chat-" + index)[0].scrollHeight); |
180 | $("#chat-" + index).scrollTop($("#chat-" + index)[0].scrollHeight); |
|
183 | messageIntervals[index] = setTimeout( |
181 | messageIntervals[index] = setTimeout( |
|
184 | loadInstantMessage, |
182 | loadInstantMessage, |
|
185 | 1000, |
183 | 1000, |
|
186 | index |
184 | index |
|
187 | ); |
185 | ); |
|
188 | }); |
186 | }); |
|
189 | } |
187 | } |
|
190 | |
188 | |
|
191 | // This function checks whether a conversation / tab already exists. |
189 | // This function checks whether a conversation / tab already exists. |
|
192 | function conversationExists(firstName, lastName) { |
190 | function conversationExists(firstName, lastName) { |
|
193 | var exists = false; |
191 | var exists = false; |
|
194 | for (var i = tabCounter; i >= 0; --i) { |
192 | for (var i = tabCounter; i >= 0; --i) { |
|
195 | if ($("#firstname-" + i).length && |
193 | if ($("#firstname-" + i).length && |
|
196 | $("#firstname-" + i).val().toUpperCase() == firstName.toUpperCase() && |
194 | $("#firstname-" + i).val().toUpperCase() == firstName.toUpperCase() && |
|
197 | $("#lastname-" + i).length && |
195 | $("#lastname-" + i).length && |
|
198 | $("#lastname-" + i).val().toUpperCase() == lastName.toUpperCase()) { |
196 | $("#lastname-" + i).val().toUpperCase() == lastName.toUpperCase()) { |
|
199 | exists = true; |
197 | exists = true; |
|
200 | break; |
198 | break; |
|
201 | } |
199 | } |
|
202 | } |
200 | } |
|
203 | return exists; |
201 | return exists; |
|
204 | } |
202 | } |
|
205 | |
203 | |
|
206 | // Adds a new tab in case a conversation with that agent does not exist. |
204 | // Adds a new tab in case a conversation with that agent does not exist. |
|
207 | function addTab(first, last) { |
205 | function addTab(first, last) { |
|
208 | var first = typeof first !== 'undefined' ? first : firstName.val(); |
206 | var first = typeof first !== 'undefined' ? first : firstName.val(); |
|
209 | var last = typeof last !== 'undefined' ? last : lastName.val(); |
207 | var last = typeof last !== 'undefined' ? last : lastName.val(); |
|
210 | |
208 | |
|
211 | // A conversation with that agent exists, so just do nothing. |
209 | // A conversation with that agent exists, so just do nothing. |
|
212 | if (conversationExists(first, last)) |
210 | if (conversationExists(first, last)) |
|
213 | return; |
211 | return; |
|
214 | |
212 | |
|
215 | // Normalize avatar names by capitalizing the first letter of the firstname and the last name. |
213 | // Normalize avatar names by capitalizing the first letter of the firstname and the last name. |
|
216 | first = first.charAt(0).toUpperCase() + first.substr(1); |
214 | first = first.charAt(0).toUpperCase() + first.substr(1); |
|
217 | last = last.charAt(0).toUpperCase() + last.substr(1); |
215 | last = last.charAt(0).toUpperCase() + last.substr(1); |
|
218 | |
216 | |
|
219 | // Build the discussion form and add the tab. |
217 | // Build the discussion form and add the tab. |
|
220 | var label = first + " " + last, |
218 | var label = first + " " + last, |
|
221 | id = "tabs-" + tabCounter, |
219 | id = "tabs-" + tabCounter, |
|
222 | li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{id\}/g, tabCounter).replace(/#\{label\}/g, label)); |
220 | li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{id\}/g, tabCounter).replace(/#\{label\}/g, label)); |
|
223 | |
221 | |
|
224 | tabs.find(".ui-tabs-nav").append(li); |
222 | tabs.find(".ui-tabs-nav").append(li); |
|
225 | tabs.append("<div id='" + id + "'>"+ " \ |
223 | tabs.append("<div id='" + id + "'>"+ " \ |
|
226 | <div id='container-" + tabCounter + "'> \ |
224 | <div id='container-" + tabCounter + "'> \ |
|
227 | <form role='form' data-toggle='validator' id='form-" + tabCounter + "' action='javascript:return;'> \ |
225 | <form role='form' data-toggle='validator' id='form-" + tabCounter + "' action='javascript:return;'> \ |
|
228 | <div class='form-group row'> \ |
226 | <div class='form-group row'> \ |
|
229 | <textarea class='form-control' readonly='readonly' id='chat-" + tabCounter + "' rows='12'></textarea><br/> \ |
227 | <textarea class='form-control' readonly='readonly' id='chat-" + tabCounter + "' rows='12'></textarea><br/> \ |
|
230 | </div> \ |
228 | </div> \ |
|
231 | <div id='controls-" + tabCounter + "' class='form-group row'> \ |
229 | <div id='controls-" + tabCounter + "' class='form-group row'> \ |
|
232 | <div class='col-lg-1'> \ |
230 | <div class='col-lg-1'> \ |
|
233 | <div class='input-group'> \ |
231 | <div class='input-group'> \ |
|
234 | <span class='input-group-addon'> \ |
232 | <span class='input-group-addon'> \ |
|
235 | <label for='message-" + tabCounter + "'>Message</label> \ |
233 | <label for='message-" + tabCounter + "'>Message</label> \ |
|
236 | </span> \ |
234 | </span> \ |
|
237 | <input type='text' maxlength='255' class='form-control' id='message-" + tabCounter + "' required> \ |
235 | <input type='text' maxlength='255' class='form-control' id='message-" + tabCounter + "' required> \ |
|
238 | <span class='input-group-btn' style='font-size: inherit;'> \ |
236 | <span class='input-group-btn' style='font-size: inherit;'> \ |
|
239 | <button type='submit' class='btn btn-default' id='send-" + tabCounter + "'>Send</button> \ |
237 | <button type='submit' class='btn btn-default' id='send-" + tabCounter + "'>Send</button> \ |
|
240 | </span> \ |
238 | </span> \ |
|
241 | </div> \ |
239 | </div> \ |
|
242 | </div> \ |
240 | </div> \ |
|
243 | </div> \ |
241 | </div> \ |
|
244 | <input type='hidden' name='firstname' id='firstname-" + tabCounter + "' value='" + first + "'> \ |
242 | <input type='hidden' name='firstname' id='firstname-" + tabCounter + "' value='" + first + "'> \ |
|
245 | <input type='hidden' name='lastname' id='lastname-" + tabCounter + "' value='" + last + "'> \ |
243 | <input type='hidden' name='lastname' id='lastname-" + tabCounter + "' value='" + last + "'> \ |
|
246 | </form> \ |
244 | </form> \ |
|
247 | </div> \ |
245 | </div> \ |
|
248 | </div>"); |
246 | </div>"); |
|
249 | tabs.tabs("refresh"); |
247 | tabs.tabs("refresh"); |
|
250 | $("#form-" + tabCounter).validator(); |
248 | $("#form-" + tabCounter).validator(); |
|
251 | |
249 | |
|
252 | // Subscribe to click event to send the instant message. |
250 | // Subscribe to click event to send the instant message. |
|
253 | $("#send-" + tabCounter).on("click", { |
251 | $("#send-" + tabCounter).on("click", { |
|
254 | index: tabCounter |
252 | index: tabCounter |
|
255 | }, sendInstantMessage); |
253 | }, sendInstantMessage); |
|
256 | |
254 | |
|
257 | // Subscribe to pressing enter with the message input box selected. |
255 | // Subscribe to pressing enter with the message input box selected. |
|
258 | $("#message-" + tabCounter).keypress({ |
256 | $("#message-" + tabCounter).keypress({ |
|
259 | index: tabCounter |
257 | index: tabCounter |
|
260 | }, function(e) { |
258 | }, function(e) { |
|
261 | if (e.which == 13) { |
259 | if (e.which == 13) { |
|
262 | sendInstantMessage(e); |
260 | sendInstantMessage(e); |
|
263 | return false; |
261 | return false; |
|
264 | } |
262 | } |
|
265 | }); |
263 | }); |
|
266 | |
264 | |
|
267 | ++tabCounter; |
265 | ++tabCounter; |
|
268 | } |
266 | } |
|
269 | |
267 | |
|
270 | // Close icon: removing the tab on click and delete the conversation. |
268 | // Close icon: removing the tab on click and delete the conversation. |
|
271 | tabs.on("click", "span.ui-icon-close", function() { |
269 | tabs.on("click", "span.ui-icon-close", function() { |
|
272 | var panelId = $(this).closest("li").remove().attr("aria-controls"); |
270 | var panelId = $(this).closest("li").remove().attr("aria-controls"); |
|
273 | var selectedIndex = $(this).closest("li").remove().attr("id"); |
271 | var selectedIndex = $(this).closest("li").remove().attr("id"); |
|
274 | // Pause the conversation retrieval timer. |
272 | // Pause the conversation retrieval timer. |
|
275 | clearTimeout(getConversationsTimeout); |
273 | clearTimeout(getConversationsTimeout); |
|
276 | $.ajax({ |
274 | $.ajax({ |
|
277 | type: 'post', |
275 | type: 'post', |
|
278 | url: "deleteConversation.php", |
276 | url: "deleteConversation.php", |
|
279 | data: { |
277 | data: { |
|
280 | firstname: $("#firstname-" + selectedIndex).val(), |
278 | firstname: $("#firstname-" + selectedIndex).val(), |
|
281 | lastname: $("#lastname-" + selectedIndex).val(), |
279 | lastname: $("#lastname-" + selectedIndex).val(), |
|
282 | token: token |
280 | token: token |
|
283 | } |
281 | } |
|
284 | }).done(function(data) { |
282 | }).done(function(data) { |
|
285 | $("#" + panelId).remove(); |
283 | $("#" + panelId).remove(); |
|
286 | tabs.tabs("refresh"); |
284 | tabs.tabs("refresh"); |
|
287 | // Resume the conversation retrieval timer. |
285 | // Resume the conversation retrieval timer. |
|
288 | getConversationsTimeout = setTimeout( |
286 | getConversationsTimeout = setTimeout( |
|
289 | getConversations, |
287 | getConversations, |
|
290 | 1000 |
288 | 1000 |
|
291 | ); |
289 | ); |
|
292 | }); |
290 | }); |
|
293 | }); |
291 | }); |
|
294 | |
292 | |
|
295 | // Unbind the message retrieval interval from all other tabs except the active tab. |
293 | // Unbind the message retrieval interval from all other tabs except the active tab. |
|
296 | tabs.on('tabsactivate', function(event, ui) { |
294 | tabs.on('tabsactivate', function(event, ui) { |
|
297 | var selectedIndex = ui.newTab.closest("li").attr("id"); |
295 | var selectedIndex = ui.newTab.closest("li").attr("id"); |
|
298 | $.each(messageIntervals, function(index, value) { |
296 | $.each(messageIntervals, function(index, value) { |
|
299 | if (index != selectedIndex) { |
297 | if (index != selectedIndex) { |
|
300 | clearInterval(value); |
298 | clearInterval(value); |
|
301 | } |
299 | } |
|
302 | }); |
300 | }); |
|
303 | |
301 | |
|
304 | messageIntervals[selectedIndex] = setTimeout( |
302 | messageIntervals[selectedIndex] = setTimeout( |
|
305 | loadInstantMessage, |
303 | loadInstantMessage, |
|
306 | 1000, |
304 | 1000, |
|
307 | selectedIndex |
305 | selectedIndex |
|
308 | ); |
306 | ); |
|
309 | }); |
307 | }); |
|
310 | |
308 | |
|
311 | // Start a timer to load tabs of existing conversations. |
309 | // Start a timer to load tabs of existing conversations. |
|
312 | getConversationsTimeout = setTimeout( |
310 | getConversationsTimeout = setTimeout( |
|
313 | getConversations, |
311 | getConversations, |
|
314 | 1000 |
312 | 1000 |
|
315 | ); |
313 | ); |
|
316 | }); |
314 | }); |
|
317 | }); |
315 | }); |
|
318 | </script> |
316 | </script> |
|
319 | </body> |
317 | </body> |
|
320 | |
318 | |
|
321 | </html> |
319 | </html> |
|
322 | |
320 | |
|
323 |
|
321 |
|
|
324 | |
322 | |
|
325 | |
323 | |
|
326 | |
324 | |