/instantMessage/instantMessage.html |
@@ -11,13 +11,10 @@ |
<meta name="author" content="Wizardry and Steamworks"> |
<link rel="icon" href="favicon.ico"> |
|
<link rel="stylesheet" href="css/style.css?v=2.0"> |
|
<!-- Bootstrap core CSS --> |
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> |
<!-- jQuery UI CSS --> |
<link href="bower_components/jquery-ui/themes/base/jquery-ui.min.css" rel="stylesheet"> |
<!-- <link rel="stylesheet" href="css/style.css?v=1.3"> --> |
</head> |
|
<body> |
@@ -30,7 +27,7 @@ |
<div class="modal-content"> |
<div class="modal-header"> |
<button type="button" class="close" data-dismiss="modal">×</button> |
<h4 class="modal-title">Enter Agent Name</h4> |
<h2 class="modal-title">Enter Agent Name</h2> |
</div> |
<form role="form" data-toggle="validator" class="form-inline"> |
<div class="modal-body"> |
@@ -60,24 +57,8 @@ |
</div> |
</div> |
|
<!-- <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> --> |
|
<div class="container"> |
<form role="form" data-toggle="validator"> |
<form role="form" data-toggle="validator" action="javascript:return;"> |
<div class="form-group row"> |
<div class="input-group"> |
<span class="input-group-addon"> |
@@ -85,7 +66,7 @@ |
</span> |
<input type="text" maxlength="8" value="Someone" id="name" class="form-control" required> |
<span class="input-group-btn"> |
<button type="button" id="add_tab" class="btn btn-default" data-toggle="modal" data-target="#dialog">New Tab</button> |
<button type="submit" class="btn btn-default" data-toggle="modal" data-target="#dialog">New Conversation</button> |
</span> |
</div> |
</div> |
@@ -92,8 +73,6 @@ |
</form> |
|
<!-- This div holds the tabs that will be created. This structure should not be deleted. --> |
<!-- <ul class="nav nav-tabs" role="tablist" id="tabs"> |
</ul> --> |
<div id="tabs"> |
<ul> |
|
@@ -119,45 +98,15 @@ |
$(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>", |
tabTemplate = "<li id='#{id}'> \ |
<a href='#{href}'>#{label}</a> \ |
<span class='ui-icon ui-icon-close'></span> \ |
</li>", |
tabCounter = 0, |
messageIntervals = {}, |
getConversationsTimeout; |
getConversationsTimeout, |
tabs = $("#tabs").tabs(); |
|
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"); |
});*/ |
|
$("#startConversation") |
.on("click", function() { |
addTab(); |
@@ -187,9 +136,15 @@ |
$.trim($("#lastname-" + index).val()) == '' || |
$.trim($("#message-" + index).val()) == '') |
return; |
$("#controls-" + index).animate({ |
opacity: 'hide' |
}, 'slow'); |
$("#controls-" + index).animate( |
{ |
opacity: 0 |
}, |
{ |
duration: 1000, |
easing: "linear" |
} |
); |
$.ajax({ |
type: 'post', |
url: "sendInstantMessage.php", |
@@ -203,9 +158,15 @@ |
if(data) |
alert(data); |
$("#message-" + index).val(""); |
$("#controls-" + index).animate({ |
opacity: 'show' |
}, 'slow'); |
$("#controls-" + index).animate( |
{ |
opacity: 1 |
}, |
{ |
duration: 1000, |
easing: "linear" |
} |
); |
}); |
} |
|
@@ -213,9 +174,6 @@ |
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);*/ |
// Scroll to the bottom of the conversation. |
$("#chat-" + index).scrollTop($("#chat-" + index)[0].scrollHeight); |
messageIntervals[index] = setTimeout( |
@@ -260,18 +218,32 @@ |
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>" + " \ |
tabs.append("<div id='" + id + "'>"+ " \ |
<div id='container-" + tabCounter + "'> \ |
<textarea readonly='readonly' 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> \ |
<form role='form' data-toggle='validator' id='form-" + tabCounter + "' action='javascript:return;'> \ |
<div class='form-group row'> \ |
<textarea class='form-control' readonly='readonly' id='chat-" + tabCounter + "' rows='12'></textarea><br/> \ |
</div> \ |
<div id='controls-" + tabCounter + "' class='form-group row'> \ |
<div class='col-lg-1'> \ |
<div class='input-group'> \ |
<span class='input-group-addon'> \ |
<label for='message-" + tabCounter + "'>Message</label> \ |
</span> \ |
<input type='text' maxlength='255' class='form-control' id='message-" + tabCounter + "' required> \ |
<span class='input-group-btn' style='font-size: inherit;'> \ |
<button type='submit' class='btn btn-default' id='send-" + tabCounter + "'>Send</button> \ |
</span> \ |
</div> \ |
" + "</p></div>"); |
</div> \ |
</div> \ |
<input type='hidden' name='firstname' id='firstname-" + tabCounter + "' value='" + first + "'> \ |
<input type='hidden' name='lastname' id='lastname-" + tabCounter + "' value='" + last + "'> \ |
</form> \ |
</div> \ |
</div>"); |
tabs.tabs("refresh"); |
$("#form-" + tabCounter).validator(); |
|
// Subscribe to click event to send the instant message. |
$("#send-" + tabCounter).on("click", { |