Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Also show different days on chatrooms.

Browse Source 
- Use a template to show the day's date.
- Use time element for the date and datetime attr
This commit is contained in:
JC Brand 2013-03-27 17:06:09 +02:00
parent acbcf3fd2a
commit 07a65f5b6a
3 changed files with 35 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGES.rst
View File

@ -11,6 +11,7 @@ Changelog
chat messages. [jcbrand]
- Fixed user status handling, which wasn't 100% according to the
spec. [jcbrand]
- Separate messages according to day in chats. [jcbrand]
0.2 (unreleased)

5
converse.css
View File

@ -158,6 +158,11 @@ input.new-chatroom-name {
color: #808080;
}
.chat-date {
display: inline-block;
padding-top: 10px;
}
div#settings,
div#chatrooms,
div#login-dialog {

37
converse.js
View File

@ -303,6 +303,10 @@
'<span class="chat-message-content">{{message}}</span>' +
'</div>'),
new_day_template: _.template(
'<time class="chat-date" datetime="{{isodate}}">{{datestring}}</time>'
),
insertStatusNotification: function (message, replace) {
var $chat_content = this.$el.find('.chat-content');
$chat_content.find('div.chat-event').remove().end()
@ -315,7 +319,7 @@
times = this.model.messages.pluck('time'),
this_date = xmppchat.parseISO8601(time),
$chat_content = this.$el.find('.chat-content'),
previous_message, idx, prev_date;
previous_message, idx, prev_date, isodate;
// If this message is on a different day than the one received
// prior, then indicate it on the chatbox.
@ -323,12 +327,16 @@
if (idx >= 0) {
previous_message = this.model.messages.at(idx);
prev_date = xmppchat.parseISO8601(previous_message.get('time'));
isodate = this_date;
isodate.setUTCHours(0,0,0,0);
isodate = xmppchat.toISOString(isodate);
if (this.isDifferentDay(prev_date, this_date)) {
$chat_content.append($('<div class="chat-date">&nbsp;</div>'));
$chat_content.append($('<div class="chat-date"></div>').text(this_date.toString().substring(0,15)));
$chat_content.append(this.new_day_template({
isodate: isodate,
datestring: this_date.toString().substring(0,15)
}));
}
}
if (xmppchat.xmppstatus.getStatus() === 'offline') {
// only update the UI if the user is not offline
return;
@ -914,17 +922,30 @@
sender = Strophe.unescapeNode(Strophe.getResourceFromJid(jid)),
delayed = $message.find('delay').length > 0,
subject = $message.children('subject').text(),
match, template;
match, template, message_datetime, message_date, dates, isodate;
if (!body) { return true; } // XXX: Necessary?
if (subject) {
this.$el.find('.chatroom-topic').text(subject).attr('title', subject);
}
if (delayed) {
stamp = $message.find('delay').attr('stamp');
time = (new Date(stamp)).toLocaleTimeString().substring(0,5);
message_datetime = xmppchat.parseISO8601(stamp);
} else {
time = (new Date()).toLocaleTimeString().substring(0,5);
message_datetime = new Date();
}
// If this message is on a different day than the one received
// prior, then indicate it on the chatbox.
dates = $chat_content.find("time").map(function(){return $(this).attr("datetime");}).get();
message_date = message_datetime;
message_date.setUTCHours(0,0,0,0);
isodate = xmppchat.toISOString(message_date);
if (_.indexOf(dates, isodate) == -1) {
$chat_content.append(this.new_day_template({
isodate: isodate,
datestring: message_date.toString().substring(0,15)
}));
}
match = body.match(/^\/(.*?)(?: (.*))?$/);
if ((match) && (match[1] === 'me')) {
body = body.replace(/^\/me/, '*'+sender);
@ -938,7 +959,7 @@
$chat_content.append(
template({
'sender': sender == 'me' && sender || 'room',
'time': time,
'time': message_date.toLocaleTimeString().substring(0,5),
'message': body,
'username': sender,
'extra_classes': delayed && 'delayed' || ''