corrade-http-templates

Subversion Repositories:
Compare Path: Rev
With Path: Rev
?path1? @ 43  →  ?path2? @ 44
/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">&times;</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">
@@ -59,25 +56,9 @@
 
</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> \
</div> \
<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> \
</div> \
</div> \
<input type='hidden' name='firstname' id='firstname-" + tabCounter + "' value='" + first + "'> \
<input type='hidden' name='lastname' id='lastname-" + tabCounter + "' value='" + last + "'> \
</form> \
</div> \
" + "</p></div>");
</div>");
tabs.tabs("refresh");
$("#form-" + tabCounter).validator();
 
// Subscribe to click event to send the instant message.
$("#send-" + tabCounter).on("click", {