corrade-http-templates – Diff between revs 1 and 4

Subversion Repositories:

?pathlinks?

Rev 1 – Rev 5 – Go to most recent revision – Details – Blame – Last modification – View Log

Only display areas with differences – Ignore whitespace

 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Corrade Instant Message Template</title>
     <link rel="stylesheet" href="css/fonts.css?v=1.0">
     <link rel="stylesheet" href="css/style.css?v=1.9">
     <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
     <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
     <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
     <script>
         $(function() {
             var firstName = $("#firstname"),
                 lastName = $("#lastname"),
                 tabTemplate = "<li id='#{id}'><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
                 tabCounter = 0,
                 messageIntervals = {},
                 getConversationsTimer;
             var tabs = $("#tabs").tabs();
             // Custom buttons and a "close" callback resetting the form inside.
             var dialog = $("#dialog").dialog({
                 autoOpen: false,
                 modal: true,
                 buttons: {
                     Add: function() {
                         addTab();
                         $(this).dialog("close");
                     },
                     Cancel: function() {
                         $(this).dialog("close");
+                    }
                 },
                 close: function() {
                     form[0].reset();
+                }
             });
             // Calls addTab function on submit and closes the dialog.
             var form = dialog.find("form").on("submit", function(event) {
                 addTab();
                 dialog.dialog("close");
                 event.preventDefault();
             });
             // The add tab button just opens the dialog and prompts for the avatar name.
             $("#add_tab")
                 .button()
                 .on("click", function() {
                     dialog.dialog("open");
                 });
             // Request the active conversations from the backend script and create tabs.
             function getConversations() {
                 $.get("getConversations.php?t=" + Math.random(), function(data) {
                     var json = $.parseJSON(data);
                     $.each(json, function(index, avatar) {
                         if (!conversationExists(avatar.firstname, avatar.lastname))
                             addTab(avatar.firstname, avatar.lastname);
                     });
                 });
+            }
             // Function to send the message to an agent by passing it back through PHP.
             function sendInstantMessage(e) {
                 var index = e.data.index;
+                // If the parameters are empty, then do not send anything to the PHP script.
+                if($.trim($("#firstname-" + index).val())  == '' ||
+                    $.trim($("#lastname-" + index).val()) == '' ||
+                    $.trim($("#message-" + index).val()) == '')
+                    return;
                 $("#controls-" + index).animate({
                     opacity: 'hide'
                 }, 'slow');
                 $.ajax({
                     type: 'post',
                     url: "sendInstantMessage.php",
                     data: {
                         name: $("#name").val(),
                         firstname: $("#firstname-" + index).val(),
                         lastname: $("#lastname-" + index).val(),
                         message: $("#message-" + index).val()
+                    }
                 }).done(function(data) {
                     if(data)
                         alert(data);
                     $("#message-" + index).val("");
                     $("#controls-" + index).animate({
                         opacity: 'show'
                     }, 'slow');
                 });
+            }
             // Loads all the stored instant messages from the log file named after the avatar.
             function loadInstantMessage(index) {
                 $.get("messages/" + $("#firstname-" + index).val() + " " + $("#lastname-" + index).val() + ".log" + "?t=" + Math.random(), function(data) {
                     $("#chat-" + index).html(data);
                 });
                 $("#chat-" + index).animate({
                     scrollTop: $("#chat-" + index)[0].scrollHeight - $("#chat-" + index).height()
                 }, 1000);
+            }
             // This function checks whether a conversation / tab already exists.
             function conversationExists(firstName, lastName) {
                 var exists = false;
                 for (var i = tabCounter; i >= 0; --i) {
                     if ($("#firstname-" + i).length &&
                         $("#firstname-" + i).val().toUpperCase() == firstName.toUpperCase() &&
                         $("#lastname-" + i).length &&
                         $("#lastname-" + i).val().toUpperCase() == lastName.toUpperCase()) {
                         exists = true;
                         break;
+                    }
+                }
                 return exists;
+            }
             // Adds a new tab in case a conversation with that agent does not exist.
             function addTab(first, last) {
                 var first = typeof first !== 'undefined' ? first : firstName.val();
                 var last = typeof last !== 'undefined' ? last : lastName.val();
                 // A conversation with that agent exists, so just do nothing.
                 if (conversationExists(first, last))
                     return;
                 // Normalize avatar names by capitalizing the first letter of the firstname and the last name.
                 first = first.charAt(0).toUpperCase() + first.substr(1);
                 last = last.charAt(0).toUpperCase() + last.substr(1);
                 // Build the discussion form and add the tab.
                 var label = first + " " + last,
                     id = "tabs-" + tabCounter,
                     li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{id\}/g, tabCounter).replace(/#\{label\}/g, label));
                 tabs.find(".ui-tabs-nav").append(li);
                 tabs.append("<div id='" + id + "'><p>" + " \
                     <div id='container-" + tabCounter + "'> \
                         <textarea id='chat-" + tabCounter + "' rows='12'></textarea><br/> \
                         <div id='controls-" + tabCounter + "'> \
                             Message: <input type='text' size='70' id='message-" + tabCounter + "'></input> \
                             <button type='button' id='send-" + tabCounter + "'>Send</button> \
                             <input type='hidden' name='firstname' id='firstname-" + tabCounter + "' value='" + first + "'></input> \
                             <input type='hidden' name='lastname' id='lastname-" + tabCounter + "' value='" + last + "'></input> \
                         </div> \
                     </div> \
                 " + "</p></div>");
                 tabs.tabs("refresh");
                 // Subscribe to click event to send the instant message.
                 $("#send-" + tabCounter).on("click", {
                     index: tabCounter
                 }, sendInstantMessage);
                 // Subscribe to pressing enter with the message input box selected.
                 $("#message-" + tabCounter).keypress({
                     index: tabCounter
                 }, function(e) {
                     if (e.which == 13) {
                         sendInstantMessage(e);
                         return false;
+                    }
                 });
                 ++tabCounter;
+            }
             // Close icon: removing the tab on click and delete the conversation.
             tabs.on("click", "span.ui-icon-close", function() {
                 var panelId = $(this).closest("li").remove().attr("aria-controls");
                 var selectedIndex = $(this).closest("li").remove().attr("id");
                 // Pause the conversation retrieval timer.
                 clearInterval(getConversationsTimer);
                 $.ajax({
                     type: 'post',
                     url: "deleteConversation.php",
                     data: {
                         firstname: $("#firstname-" + selectedIndex).val(),
                         lastname: $("#lastname-" + selectedIndex).val()
+                    }
                 }).done(function(data) {
                     $("#" + panelId).remove();
                     tabs.tabs("refresh");
                     // Resume the conversation retrieval timer.
                     getConversationsTimer = setInterval(
                         getConversations,
                     );
                 });
             });
             // Unbind the message retrieval interval from all other tabs except the active tab.
             tabs.on('tabsactivate', function(event, ui) {
                 var selectedIndex = ui.newTab.closest("li").attr("id");
                 $.each(messageIntervals, function(index, value) {
                     if (index != selectedIndex) {
                         clearInterval(value);
+                    }
                 });
                 messageIntervals[selectedIndex] = setInterval(
                     loadInstantMessage,
 ,
                     selectedIndex
                 );
             });
             // Start a timer to load tabs of existing conversations.
             getConversationsTimer = setInterval(
                 getConversations,
             );
         });
     </script>
 </head>
 <body>
     <div id="dialog" title="Agent Name">
         <form>
             <fieldset class="ui-helper-reset">
                 <label for="firstname">Firstname</label>
                 <input type="text" name="firstname" id="firstname" value="" class="ui-widget-content ui-corner-all">
                 <label for="lastname">Lastname</label>
                 <input type="text" name="lastname" id="lastname" value="" class="ui-widget-content ui-corner-all">
             </fieldset>
         </form>
     </div>
     <p>
         Your name: <input type="text" size="8" value="Someone" id="name"></input>
         <button id="add_tab">New Conversation</button>
     </p>
     <!-- This div holds the tabs that will be created. This structure should not be deleted. -->
     <div id="tabs">
         <ul>
         </ul>
         <div>
         </div>
     </div>
 </body>
 </html>
 Generated by GNU Enscript 1.6.5.90.