corrade-http-templates – Blame information for rev 4
?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 = {}, |
||
24 | getConversationsTimer; |
||
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 | }); |
||
68 | }); |
||
69 | } |
||
70 | |||
71 | // Function to send the message to an agent by passing it back through PHP. |
||
72 | function sendInstantMessage(e) { |
||
73 | var index = e.data.index; |
||
4 | eva | 74 | // If the parameters are empty, then do not send anything to the PHP script. |
75 | if($.trim($("#firstname-" + index).val()) == '' || |
||
76 | $.trim($("#lastname-" + index).val()) == '' || |
||
77 | $.trim($("#message-" + index).val()) == '') |
||
78 | return; |
||
1 | eva | 79 | $("#controls-" + index).animate({ |
80 | opacity: 'hide' |
||
81 | }, 'slow'); |
||
82 | $.ajax({ |
||
83 | type: 'post', |
||
84 | url: "sendInstantMessage.php", |
||
85 | data: { |
||
86 | name: $("#name").val(), |
||
87 | firstname: $("#firstname-" + index).val(), |
||
88 | lastname: $("#lastname-" + index).val(), |
||
89 | message: $("#message-" + index).val() |
||
90 | } |
||
91 | }).done(function(data) { |
||
92 | if(data) |
||
93 | alert(data); |
||
94 | $("#message-" + index).val(""); |
||
95 | $("#controls-" + index).animate({ |
||
96 | opacity: 'show' |
||
97 | }, 'slow'); |
||
98 | }); |
||
99 | } |
||
100 | |||
101 | // Loads all the stored instant messages from the log file named after the avatar. |
||
102 | function loadInstantMessage(index) { |
||
103 | $.get("messages/" + $("#firstname-" + index).val() + " " + $("#lastname-" + index).val() + ".log" + "?t=" + Math.random(), function(data) { |
||
104 | $("#chat-" + index).html(data); |
||
105 | }); |
||
106 | |||
107 | $("#chat-" + index).animate({ |
||
108 | scrollTop: $("#chat-" + index)[0].scrollHeight - $("#chat-" + index).height() |
||
109 | }, 1000); |
||
110 | } |
||
111 | |||
112 | // This function checks whether a conversation / tab already exists. |
||
113 | function conversationExists(firstName, lastName) { |
||
114 | var exists = false; |
||
115 | for (var i = tabCounter; i >= 0; --i) { |
||
116 | if ($("#firstname-" + i).length && |
||
117 | $("#firstname-" + i).val().toUpperCase() == firstName.toUpperCase() && |
||
118 | $("#lastname-" + i).length && |
||
119 | $("#lastname-" + i).val().toUpperCase() == lastName.toUpperCase()) { |
||
120 | exists = true; |
||
121 | break; |
||
122 | } |
||
123 | } |
||
124 | return exists; |
||
125 | } |
||
126 | |||
127 | // Adds a new tab in case a conversation with that agent does not exist. |
||
128 | function addTab(first, last) { |
||
129 | var first = typeof first !== 'undefined' ? first : firstName.val(); |
||
130 | var last = typeof last !== 'undefined' ? last : lastName.val(); |
||
131 | |||
132 | // A conversation with that agent exists, so just do nothing. |
||
133 | if (conversationExists(first, last)) |
||
134 | return; |
||
135 | |||
136 | // Normalize avatar names by capitalizing the first letter of the firstname and the last name. |
||
137 | first = first.charAt(0).toUpperCase() + first.substr(1); |
||
138 | last = last.charAt(0).toUpperCase() + last.substr(1); |
||
139 | |||
140 | // Build the discussion form and add the tab. |
||
141 | var label = first + " " + last, |
||
142 | id = "tabs-" + tabCounter, |
||
143 | li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{id\}/g, tabCounter).replace(/#\{label\}/g, label)); |
||
144 | |||
145 | tabs.find(".ui-tabs-nav").append(li); |
||
146 | tabs.append("<div id='" + id + "'><p>" + " \ |
||
147 | <div id='container-" + tabCounter + "'> \ |
||
148 | <textarea id='chat-" + tabCounter + "' rows='12'></textarea><br/> \ |
||
149 | <div id='controls-" + tabCounter + "'> \ |
||
150 | Message: <input type='text' size='70' id='message-" + tabCounter + "'></input> \ |
||
151 | <button type='button' id='send-" + tabCounter + "'>Send</button> \ |
||
152 | <input type='hidden' name='firstname' id='firstname-" + tabCounter + "' value='" + first + "'></input> \ |
||
153 | <input type='hidden' name='lastname' id='lastname-" + tabCounter + "' value='" + last + "'></input> \ |
||
154 | </div> \ |
||
155 | </div> \ |
||
156 | " + "</p></div>"); |
||
157 | tabs.tabs("refresh"); |
||
158 | |||
159 | // Subscribe to click event to send the instant message. |
||
160 | $("#send-" + tabCounter).on("click", { |
||
161 | index: tabCounter |
||
162 | }, sendInstantMessage); |
||
163 | |||
164 | // Subscribe to pressing enter with the message input box selected. |
||
165 | $("#message-" + tabCounter).keypress({ |
||
166 | index: tabCounter |
||
167 | }, function(e) { |
||
168 | if (e.which == 13) { |
||
169 | sendInstantMessage(e); |
||
170 | return false; |
||
171 | } |
||
172 | }); |
||
173 | |||
174 | ++tabCounter; |
||
175 | } |
||
176 | |||
177 | // Close icon: removing the tab on click and delete the conversation. |
||
178 | tabs.on("click", "span.ui-icon-close", function() { |
||
179 | var panelId = $(this).closest("li").remove().attr("aria-controls"); |
||
180 | var selectedIndex = $(this).closest("li").remove().attr("id"); |
||
181 | // Pause the conversation retrieval timer. |
||
182 | clearInterval(getConversationsTimer); |
||
183 | $.ajax({ |
||
184 | type: 'post', |
||
185 | url: "deleteConversation.php", |
||
186 | data: { |
||
187 | firstname: $("#firstname-" + selectedIndex).val(), |
||
188 | lastname: $("#lastname-" + selectedIndex).val() |
||
189 | } |
||
190 | }).done(function(data) { |
||
191 | $("#" + panelId).remove(); |
||
192 | tabs.tabs("refresh"); |
||
193 | // Resume the conversation retrieval timer. |
||
194 | getConversationsTimer = setInterval( |
||
195 | getConversations, |
||
196 | 1000 |
||
197 | ); |
||
198 | }); |
||
199 | }); |
||
200 | |||
201 | // Unbind the message retrieval interval from all other tabs except the active tab. |
||
202 | tabs.on('tabsactivate', function(event, ui) { |
||
203 | var selectedIndex = ui.newTab.closest("li").attr("id"); |
||
204 | $.each(messageIntervals, function(index, value) { |
||
205 | if (index != selectedIndex) { |
||
206 | clearInterval(value); |
||
207 | } |
||
208 | }); |
||
209 | |||
210 | messageIntervals[selectedIndex] = setInterval( |
||
211 | loadInstantMessage, |
||
212 | 1000, |
||
213 | selectedIndex |
||
214 | ); |
||
215 | }); |
||
216 | |||
217 | // Start a timer to load tabs of existing conversations. |
||
218 | getConversationsTimer = setInterval( |
||
219 | getConversations, |
||
220 | 1000 |
||
221 | ); |
||
222 | |||
223 | }); |
||
224 | </script> |
||
225 | </head> |
||
226 | |||
227 | <body> |
||
228 | |||
229 | <div id="dialog" title="Agent Name"> |
||
230 | <form> |
||
231 | <fieldset class="ui-helper-reset"> |
||
232 | <label for="firstname">Firstname</label> |
||
233 | <input type="text" name="firstname" id="firstname" value="" class="ui-widget-content ui-corner-all"> |
||
234 | <label for="lastname">Lastname</label> |
||
235 | <input type="text" name="lastname" id="lastname" value="" class="ui-widget-content ui-corner-all"> |
||
236 | </fieldset> |
||
237 | </form> |
||
238 | </div> |
||
239 | |||
240 | <p> |
||
241 | Your name: <input type="text" size="8" value="Someone" id="name"></input> |
||
242 | <button id="add_tab">New Conversation</button> |
||
243 | </p> |
||
244 | |||
245 | <!-- This div holds the tabs that will be created. This structure should not be deleted. --> |
||
246 | <div id="tabs"> |
||
247 | <ul> |
||
248 | |||
249 | </ul> |
||
250 | <div> |
||
251 | |||
252 | </div> |
||
253 | </div> |
||
254 | |||
255 | </body> |
||
256 | |||
257 | </html> |