My Chat Script So Far:
initChat: function () {
var cont = $('#chats');
var list = $('.chats', cont);
var form = $('.chat-form', cont);
var input = $('input', form);
var btn = $('.btn', form);
$('.scroller', cont).slimScroll({
scrollTo: list.height()
});
var handleClick = function (e) {
e.preventDefault();
var text = input.val();
if (text.length == 0) {
return;
}
var contains = text.match(/(@Tim marshall:|@Mark Smyth:)/i) === null ? "left" : "right";
sender;
if(contains === 'right'){
var sender = 'Private message from: <a href="#" class="name">Bob Nilson</a> <br />';
}else{
var sender = '<a href="#" class="name">Bob Nilson</a> ';
};
var time = new Date();
var time_str = time.toString('MMM dd, yyyy hh:mm:ss');
var tpl = '';
tpl += '<li class="' + contains + '">';
tpl += '<img class="avatar" alt="" src="../../assets/admin/layout/img/avatar1.jpg"/>';
tpl += '<div class="message">';
tpl += '<span class="arrow"></span>';
tpl += sender;
tpl += '<span class="datetime">at ' + time_str + '</span>';
tpl += '<span class="body">';
tpl += text.toString().replace(/</g, "<").replace(/>/g, ">").replace(/'/g, "'").replace(/"/g, """);
tpl += '</span>';
tpl += '</div>';
tpl += '</li>';
var msg = list.append(tpl);
input.val("");
$('.scroller', cont).slimScroll({
scrollTo: list.height()
});
}
/*
$('.scroller', cont).slimScroll({
scrollTo: list.height()
});
*/
$('body').on('click', '.message .name', function (e) {
e.preventDefault(); // prevent click event
var name = $(this).text(); // get clicked user's full name
input.val('@' + name + ':'); // set it into the input field
Metronic.scrollTo(input); // scroll to input if needed
});
btn.click(handleClick);
input.keypress(function (e) {
if (e.which == 13) {
handleClick();
return false; //<---- Add this line
}
});
},
This script section starts on line 484 in index.js. You can play around with my staff chat [URL=“http://rafflebananza.com/admin/index.html”]here.
Upon sending a message, you see something like this:
Bob Nilson at Fri Jun 27 2014 21:30:45 GMT+0100 (GMT Daylight Time)
Test Message
What I am looking to do is to display a dynamic time since the message was sent. In my understanding, I believe in theory I need to edit:
var time = new Date();
var time_str = time.toString('MMM dd, yyyy hh:mm:ss');
to be a timestamp and then run through all my .datetime classes somehow displaying a time since. Alike Facebook, I would like to have certain times from lets say from 10800 (3 hours in seconds) to 14400 (4 hours in seconds) to say ‘About four hours ago’.
How can I achieve something like this?