corrade-http-templates – Blame information for rev 23

Subversion Repositories:
Rev:
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">
23 vero 11 <link rel="stylesheet" href="css/style.css?v=2.0">
1 eva 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);
22 office 109 // Scroll to the bottom of the conversation.
110 $("#chat-" + index).scrollTop($("#chat-" + index)[0].scrollHeight);
5 zed 111 messageIntervals[index] = setTimeout(
112 loadInstantMessage,
113 1000,
114 index
115 );
1 eva 116 });
117 }
118  
119 // This function checks whether a conversation / tab already exists.
120 function conversationExists(firstName, lastName) {
121 var exists = false;
122 for (var i = tabCounter; i >= 0; --i) {
123 if ($("#firstname-" + i).length &&
124 $("#firstname-" + i).val().toUpperCase() == firstName.toUpperCase() &&
125 $("#lastname-" + i).length &&
126 $("#lastname-" + i).val().toUpperCase() == lastName.toUpperCase()) {
127 exists = true;
128 break;
129 }
130 }
131 return exists;
132 }
133  
134 // Adds a new tab in case a conversation with that agent does not exist.
135 function addTab(first, last) {
136 var first = typeof first !== 'undefined' ? first : firstName.val();
137 var last = typeof last !== 'undefined' ? last : lastName.val();
138  
139 // A conversation with that agent exists, so just do nothing.
140 if (conversationExists(first, last))
141 return;
142  
143 // Normalize avatar names by capitalizing the first letter of the firstname and the last name.
144 first = first.charAt(0).toUpperCase() + first.substr(1);
145 last = last.charAt(0).toUpperCase() + last.substr(1);
146  
147 // Build the discussion form and add the tab.
148 var label = first + " " + last,
149 id = "tabs-" + tabCounter,
150 li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{id\}/g, tabCounter).replace(/#\{label\}/g, label));
151  
152 tabs.find(".ui-tabs-nav").append(li);
153 tabs.append("<div id='" + id + "'><p>" + " \
154 <div id='container-" + tabCounter + "'> \
5 zed 155 <textarea readonly='readonly' id='chat-" + tabCounter + "' rows='12'></textarea><br/> \
1 eva 156 <div id='controls-" + tabCounter + "'> \
157 Message: <input type='text' size='70' id='message-" + tabCounter + "'></input> \
158 <button type='button' id='send-" + tabCounter + "'>Send</button> \
159 <input type='hidden' name='firstname' id='firstname-" + tabCounter + "' value='" + first + "'></input> \
160 <input type='hidden' name='lastname' id='lastname-" + tabCounter + "' value='" + last + "'></input> \
161 </div> \
162 </div> \
163 " + "</p></div>");
164 tabs.tabs("refresh");
165  
166 // Subscribe to click event to send the instant message.
167 $("#send-" + tabCounter).on("click", {
168 index: tabCounter
169 }, sendInstantMessage);
170  
171 // Subscribe to pressing enter with the message input box selected.
172 $("#message-" + tabCounter).keypress({
173 index: tabCounter
174 }, function(e) {
175 if (e.which == 13) {
176 sendInstantMessage(e);
177 return false;
178 }
179 });
180  
181 ++tabCounter;
182 }
183  
184 // Close icon: removing the tab on click and delete the conversation.
185 tabs.on("click", "span.ui-icon-close", function() {
186 var panelId = $(this).closest("li").remove().attr("aria-controls");
187 var selectedIndex = $(this).closest("li").remove().attr("id");
188 // Pause the conversation retrieval timer.
5 zed 189 clearTimeout(getConversationsTimeout);
1 eva 190 $.ajax({
191 type: 'post',
192 url: "deleteConversation.php",
193 data: {
194 firstname: $("#firstname-" + selectedIndex).val(),
195 lastname: $("#lastname-" + selectedIndex).val()
196 }
197 }).done(function(data) {
198 $("#" + panelId).remove();
199 tabs.tabs("refresh");
200 // Resume the conversation retrieval timer.
5 zed 201 getConversationsTimeout = setTimeout(
1 eva 202 getConversations,
203 1000
204 );
205 });
206 });
207  
208 // Unbind the message retrieval interval from all other tabs except the active tab.
209 tabs.on('tabsactivate', function(event, ui) {
210 var selectedIndex = ui.newTab.closest("li").attr("id");
211 $.each(messageIntervals, function(index, value) {
212 if (index != selectedIndex) {
213 clearInterval(value);
214 }
215 });
216  
5 zed 217 messageIntervals[selectedIndex] = setTimeout(
1 eva 218 loadInstantMessage,
219 1000,
220 selectedIndex
221 );
222 });
223  
224 // Start a timer to load tabs of existing conversations.
5 zed 225 getConversationsTimeout = setTimeout(
1 eva 226 getConversations,
227 1000
228 );
229  
230 });
231 </script>
232 </head>
233  
234 <body>
235  
236 <div id="dialog" title="Agent Name">
237 <form>
238 <fieldset class="ui-helper-reset">
239 <label for="firstname">Firstname</label>
240 <input type="text" name="firstname" id="firstname" value="" class="ui-widget-content ui-corner-all">
241 <label for="lastname">Lastname</label>
242 <input type="text" name="lastname" id="lastname" value="" class="ui-widget-content ui-corner-all">
243 </fieldset>
244 </form>
245 </div>
246  
247 <p>
248 Your name: <input type="text" size="8" value="Someone" id="name"></input>
249 <button id="add_tab">New Conversation</button>
250 </p>
251  
252 <!-- This div holds the tabs that will be created. This structure should not be deleted. -->
253 <div id="tabs">
254 <ul>
255  
256 </ul>
257 <div>
258  
259 </div>
260 </div>
261  
262 </body>
263  
264 </html>