From 07a65f5b6aecb954483a97e4828ad4edead577c8 Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Wed, 27 Mar 2013 17:06:09 +0200
Subject: [PATCH] Also show different days on chatrooms.

- Use a template to show the day's date.
- Use time element for the date and datetime attr
---
 CHANGES.rst  |  1 +
 converse.css |  5 +++++
 converse.js  | 37 +++++++++++++++++++++++++++++--------
 3 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/CHANGES.rst b/CHANGES.rst
index 40e165786..3d1fa989b 100644
--- a/CHANGES.rst
+++ b/CHANGES.rst
@@ -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)
diff --git a/converse.css b/converse.css
index b89ece3c0..23e353d34 100644
--- a/converse.css
+++ b/converse.css
@@ -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 {
diff --git a/converse.js b/converse.js
index 78d428eb6..c1876240a 100644
--- a/converse.js
+++ b/converse.js
@@ -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' || ''