corrade-http-templates – Blame information for rev 10
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
1 | eva | 1 | <!doctype html> |
2 | <html lang="en"> |
||
3 | |||
4 | <head> |
||
5 | <meta charset="utf-8"> |
||
6 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
||
7 | <title>Corrade Instant Message Template</title> |
||
8 | |||
9 | |||
10 | <link rel="stylesheet" href="css/fonts.css?v=1.0"> |
||
11 | <link rel="stylesheet" href="css/style.css?v=1.9"> |
||
12 | |||
13 | <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> |
||
14 | <script src="https://code.jquery.com/jquery-1.12.4.js"></script> |
||
15 | <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> |
||
16 | |||
17 | <script> |
||
18 | $(function() { |
||
19 | var firstName = $("#firstname"), |
||
20 | lastName = $("#lastname"), |
||
21 | tabTemplate = "<li id='#{id}'><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>", |
||
22 | tabCounter = 0, |
||
23 | messageIntervals = {}, |
||
5 | zed | 24 | getConversationsTimeout; |
1 | eva | 25 | |
26 | var tabs = $("#tabs").tabs(); |
||
27 | |||
28 | // Custom buttons and a "close" callback resetting the form inside. |
||
29 | var dialog = $("#dialog").dialog({ |
||
30 | autoOpen: false, |
||
31 | modal: true, |
||
32 | buttons: { |
||
33 | Add: function() { |
||
34 | addTab(); |
||
35 | $(this).dialog("close"); |
||
36 | }, |
||
37 | Cancel: function() { |
||
38 | $(this).dialog("close"); |
||
39 | } |
||
40 | }, |
||
41 | close: function() { |
||
42 | form[0].reset(); |
||
43 | } |
||
44 | }); |
||
45 | |||
46 | // Calls addTab function on submit and closes the dialog. |
||
47 | var form = dialog.find("form").on("submit", function(event) { |
||
48 | addTab(); |
||
49 | dialog.dialog("close"); |
||
50 | event.preventDefault(); |
||
51 | }); |
||
52 | |||
53 | // The add tab button just opens the dialog and prompts for the avatar name. |
||
54 | $("#add_tab") |
||
55 | .button() |
||
56 | .on("click", function() { |
||
57 | dialog.dialog("open"); |
||
58 | }); |
||
59 | |||
60 | // Request the active conversations from the backend script and create tabs. |
||
61 | function getConversations() { |
||
62 | $.get("getConversations.php?t=" + Math.random(), function(data) { |
||
63 | var json = $.parseJSON(data); |
||
64 | $.each(json, function(index, avatar) { |
||
65 | if (!conversationExists(avatar.firstname, avatar.lastname)) |
||
66 | addTab(avatar.firstname, avatar.lastname); |
||
67 | }); |
||
5 | zed | 68 | getConversationsTimeout = setTimeout( |
69 | getConversations, |
||
70 | 1000 |
||
71 | ); |
||
1 | eva | 72 | }); |
73 | } |
||
74 | |||
75 | // Function to send the message to an agent by passing it back through PHP. |
||
76 | function sendInstantMessage(e) { |
||
77 | var index = e.data.index; |
||
4 | eva | 78 | // If the parameters are empty, then do not send anything to the PHP script. |
79 | if($.trim($("#firstname-" + index).val()) == '' || |
||
80 | $.trim($("#lastname-" + index).val()) == '' || |
||
81 | $.trim($("#message-" + index).val()) == '') |
||
82 | return; |
||
1 | eva | 83 | $("#controls-" + index).animate({ |
84 | opacity: 'hide' |
||
85 | }, 'slow'); |
||
86 | $.ajax({ |
||
87 | type: 'post', |
||
88 | url: "sendInstantMessage.php", |
||
89 | data: { |
||
90 | name: $("#name").val(), |
||
91 | firstname: $("#firstname-" + index).val(), |
||
92 | lastname: $("#lastname-" + index).val(), |
||
93 | message: $("#message-" + index).val() |
||
94 | } |
||
95 | }).done(function(data) { |
||
96 | if(data) |
||
97 | alert(data); |
||
98 | $("#message-" + index).val(""); |
||
99 | $("#controls-" + index).animate({ |
||
100 | opacity: 'show' |
||
101 | }, 'slow'); |
||
102 | }); |
||
103 | } |
||
104 | |||
105 | // Loads all the stored instant messages from the log file named after the avatar. |
||
106 | function loadInstantMessage(index) { |
||
107 | $.get("messages/" + $("#firstname-" + index).val() + " " + $("#lastname-" + index).val() + ".log" + "?t=" + Math.random(), function(data) { |
||
108 | $("#chat-" + index).html(data); |
||
5 | zed | 109 | $("#chat-" + index).animate({ |
110 | scrollTop: $("#chat-" + index)[0].scrollHeight - $("#chat-" + index).height() |
||
111 | }, 1000); |
||
112 | messageIntervals[index] = setTimeout( |
||
113 | loadInstantMessage, |
||
114 | 1000, |
||
115 | index |
||
116 | ); |
||
1 | eva | 117 | }); |
118 | } |
||
119 | |||
120 | // This function checks whether a conversation / tab already exists. |
||
121 | function conversationExists(firstName, lastName) { |
||
122 | var exists = false; |
||
123 | for (var i = tabCounter; i >= 0; --i) { |
||
124 | if ($("#firstname-" + i).length && |
||
125 | $("#firstname-" + i).val().toUpperCase() == firstName.toUpperCase() && |
||
126 | $("#lastname-" + i).length && |
||
127 | $("#lastname-" + i).val().toUpperCase() == lastName.toUpperCase()) { |
||
128 | exists = true; |
||
129 | break; |
||
130 | } |
||
131 | } |
||
132 | return exists; |
||
133 | } |
||
134 | |||
135 | // Adds a new tab in case a conversation with that agent does not exist. |
||
136 | function addTab(first, last) { |
||
137 | var first = typeof first !== 'undefined' ? first : firstName.val(); |
||
138 | var last = typeof last !== 'undefined' ? last : lastName.val(); |
||
139 | |||
140 | // A conversation with that agent exists, so just do nothing. |
||
141 | if (conversationExists(first, last)) |
||
142 | return; |
||
143 | |||
144 | // Normalize avatar names by capitalizing the first letter of the firstname and the last name. |
||
145 | first = first.charAt(0).toUpperCase() + first.substr(1); |
||
146 | last = last.charAt(0).toUpperCase() + last.substr(1); |
||
147 | |||
148 | // Build the discussion form and add the tab. |
||
149 | var label = first + " " + last, |
||
150 | id = "tabs-" + tabCounter, |
||
151 | li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{id\}/g, tabCounter).replace(/#\{label\}/g, label)); |
||
152 | |||
153 | tabs.find(".ui-tabs-nav").append(li); |
||
154 | tabs.append("<div id='" + id + "'><p>" + " \ |
||
155 | <div id='container-" + tabCounter + "'> \ |
||
5 | zed | 156 | <textarea readonly='readonly' id='chat-" + tabCounter + "' rows='12'></textarea><br/> \ |
1 | eva | 157 | <div id='controls-" + tabCounter + "'> \ |
158 | Message: <input type='text' size='70' id='message-" + tabCounter + "'></input> \ |
||
159 | <button type='button' id='send-" + tabCounter + "'>Send</button> \ |
||
160 | <input type='hidden' name='firstname' id='firstname-" + tabCounter + "' value='" + first + "'></input> \ |
||
161 | <input type='hidden' name='lastname' id='lastname-" + tabCounter + "' value='" + last + "'></input> \ |
||
162 | </div> \ |
||
163 | </div> \ |
||
164 | " + "</p></div>"); |
||
165 | tabs.tabs("refresh"); |
||
166 | |||
167 | // Subscribe to click event to send the instant message. |
||
168 | $("#send-" + tabCounter).on("click", { |
||
169 | index: tabCounter |
||
170 | }, sendInstantMessage); |
||
171 | |||
172 | // Subscribe to pressing enter with the message input box selected. |
||
173 | $("#message-" + tabCounter).keypress({ |
||
174 | index: tabCounter |
||
175 | }, function(e) { |
||
176 | if (e.which == 13) { |
||
177 | sendInstantMessage(e); |
||
178 | return false; |
||
179 | } |
||
180 | }); |
||
181 | |||
182 | ++tabCounter; |
||
183 | } |
||
184 | |||
185 | // Close icon: removing the tab on click and delete the conversation. |
||
186 | tabs.on("click", "span.ui-icon-close", function() { |
||
187 | var panelId = $(this).closest("li").remove().attr("aria-controls"); |
||
188 | var selectedIndex = $(this).closest("li").remove().attr("id"); |
||
189 | // Pause the conversation retrieval timer. |
||
5 | zed | 190 | clearTimeout(getConversationsTimeout); |
1 | eva | 191 | $.ajax({ |
192 | type: 'post', |
||
193 | url: "deleteConversation.php", |
||
194 | data: { |
||
195 | firstname: $("#firstname-" + selectedIndex).val(), |
||
196 | lastname: $("#lastname-" + selectedIndex).val() |
||
197 | } |
||
198 | }).done(function(data) { |
||
199 | $("#" + panelId).remove(); |
||
200 | tabs.tabs("refresh"); |
||
201 | // Resume the conversation retrieval timer. |
||
5 | zed | 202 | getConversationsTimeout = setTimeout( |
1 | eva | 203 | getConversations, |
204 | 1000 |
||
205 | ); |
||
206 | }); |
||
207 | }); |
||
208 | |||
209 | // Unbind the message retrieval interval from all other tabs except the active tab. |
||
210 | tabs.on('tabsactivate', function(event, ui) { |
||
211 | var selectedIndex = ui.newTab.closest("li").attr("id"); |
||
212 | $.each(messageIntervals, function(index, value) { |
||
213 | if (index != selectedIndex) { |
||
214 | clearInterval(value); |
||
215 | } |
||
216 | }); |
||
217 | |||
5 | zed | 218 | messageIntervals[selectedIndex] = setTimeout( |
1 | eva | 219 | loadInstantMessage, |
220 | 1000, |
||
221 | selectedIndex |
||
222 | ); |
||
223 | }); |
||
224 | |||
225 | // Start a timer to load tabs of existing conversations. |
||
5 | zed | 226 | getConversationsTimeout = setTimeout( |
1 | eva | 227 | getConversations, |
228 | 1000 |
||
229 | ); |
||
230 | |||
231 | }); |
||
232 | </script> |
||
233 | </head> |
||
234 | |||
235 | <body> |
||
236 | |||
237 | <div id="dialog" title="Agent Name"> |
||
238 | <form> |
||
239 | <fieldset class="ui-helper-reset"> |
||
240 | <label for="firstname">Firstname</label> |
||
241 | <input type="text" name="firstname" id="firstname" value="" class="ui-widget-content ui-corner-all"> |
||
242 | <label for="lastname">Lastname</label> |
||
243 | <input type="text" name="lastname" id="lastname" value="" class="ui-widget-content ui-corner-all"> |
||
244 | </fieldset> |
||
245 | </form> |
||
246 | </div> |
||
247 | |||
248 | <p> |
||
249 | Your name: <input type="text" size="8" value="Someone" id="name"></input> |
||
250 | <button id="add_tab">New Conversation</button> |
||
251 | </p> |
||
252 | |||
253 | <!-- This div holds the tabs that will be created. This structure should not be deleted. --> |
||
254 | <div id="tabs"> |
||
255 | <ul> |
||
256 | |||
257 | </ul> |
||
258 | <div> |
||
259 | |||
260 | </div> |
||
261 | </div> |
||
262 | |||
263 | </body> |
||
264 | |||
265 | </html> |