corrade-http-templates – Rev 4
?pathlinks?
<!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,
1000
);
});
});
// 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,
1000,
selectedIndex
);
});
// Start a timer to load tabs of existing conversations.
getConversationsTimer = setInterval(
getConversations,
1000
);
});
</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.