Commit e8fba4a7 authored by JC Brand's avatar JC Brand

Refactored showNewDay to indicate day changes between messages.

updates #306
parent 06a6d6c4
...@@ -1387,7 +1387,7 @@ ...@@ -1387,7 +1387,7 @@
clearSpinner: function () { clearSpinner: function () {
if (this.$content.children(':first').is('span.spinner')) { if (this.$content.children(':first').is('span.spinner')) {
this.$content.children(':first').first().remove(); this.$content.children(':first').remove();
} }
}, },
...@@ -1401,11 +1401,9 @@ ...@@ -1401,11 +1401,9 @@
has_scrollbar = this.$content.get(0).scrollHeight > this.$content[0].clientHeight, has_scrollbar = this.$content.get(0).scrollHeight > this.$content[0].clientHeight,
template, username, insertMessage; template, username, insertMessage;
// FIXME: A better approach here is probably to look at what is // TODO: A better approach here is probably to look at what is
// already inside the content area, and from the determine if // already inside the content area, and from that determine if
// the message must be prepended or appended. // the message must be prepended or appended. Similar to showNewDay
// That way we could probably also better show day indicators.
// That code should perhaps go into onMessageAdded
if (num_messages && msg_time.isBefore(this.model.messages.at(0).get('time'))) { if (num_messages && msg_time.isBefore(this.model.messages.at(0).get('time'))) {
insertMessage = _.compose( insertMessage = _.compose(
this.scrollDownMessageHeight.bind(this), this.scrollDownMessageHeight.bind(this),
...@@ -1435,7 +1433,7 @@ ...@@ -1435,7 +1433,7 @@
var message = template({ var message = template({
'sender': msg_dict.sender, 'sender': msg_dict.sender,
'time': msg_time.format('hh:mm'), 'time': msg_time.format('hh:mm'),
'isodate': msg_time, 'isodate': msg_time.format(),
'username': username, 'username': username,
'message': '', 'message': '',
'extra_classes': extra_classes 'extra_classes': extra_classes
...@@ -1462,22 +1460,36 @@ ...@@ -1462,22 +1460,36 @@
}, },
showNewDay: function (message) { showNewDay: function (message) {
/* If this message is on a different day than the one received /* Messages may be received chronologically, from old to new or
* prior, then indicate it on the chatbox. * new to old.
*
* If this message is older than the oldest, or newer then the
* newest, we show a new day indication in the chat content
* area.
*
* Parameters:
* (XMLElement) message - The message stanza received from the XMPP server.
*/ */
var time = message.get('time'), var first_message_date = this.$content.children(':first').data('isodate');
idx = _.indexOf(this.model.messages.pluck('time'), time)-1, if (typeof(first_message_date) == "undefined") {
this_date, prev_date; return message;
if (idx >= 0) { }
prev_date = moment(this.model.messages.at(idx).get('time')); var last_message_date = this.$content.children(':last').data('isodate');
if (prev_date.isBefore(time, 'day')) { var this_date = moment(message.get('time'));
this_date = moment(time); var day_date;
if (this_date.isBefore(first_message_date, 'day')) {
day_date = moment(first_message_date).startOf('day');
this.$content.prepend(converse.templates.new_day({
isodate: day_date.format(),
datestring: day_date.format("dddd MMM Do YYYY")
}));
} else if (this_date.isAfter(last_message_date, 'day')) {
day_date = moment(this_date).startOf('day');
this.$content.append(converse.templates.new_day({ this.$content.append(converse.templates.new_day({
isodate: this_date.format("YYYY-MM-DD"), isodate: this_date.format(),
datestring: this_date.format("dddd MMM Do YYYY") datestring: this_date.format("dddd MMM Do YYYY")
})); }));
} }
}
return message; return message;
}, },
...@@ -1513,8 +1525,7 @@ ...@@ -1513,8 +1525,7 @@
* Parameters: * Parameters:
* (string) text - The chat message text. * (string) text - The chat message text.
*/ */
// TODO: We might want to send to specfic resources. Especially // TODO: We might want to send to specfic resources. Especially in the OTR case.
// in the OTR case.
var timestamp = (new Date()).getTime(); var timestamp = (new Date()).getTime();
var bare_jid = this.model.get('jid'); var bare_jid = this.model.get('jid');
var message = $msg({from: converse.connection.jid, to: bare_jid, type: 'chat', id: timestamp}) var message = $msg({from: converse.connection.jid, to: bare_jid, type: 'chat', id: timestamp})
...@@ -4258,6 +4269,7 @@ ...@@ -4258,6 +4269,7 @@
onRosterPush: function (iq) { onRosterPush: function (iq) {
/* Handle roster updates from the XMPP server. /* Handle roster updates from the XMPP server.
* See: https://xmpp.org/rfcs/rfc6121.html#roster-syntax-actions-push * See: https://xmpp.org/rfcs/rfc6121.html#roster-syntax-actions-push
*
* Parameters: * Parameters:
* (XMLElement) IQ - The IQ stanza received from the XMPP server. * (XMLElement) IQ - The IQ stanza received from the XMPP server.
*/ */
......
...@@ -652,7 +652,7 @@ ...@@ -652,7 +652,7 @@
var message_date = new Date(); var message_date = new Date();
expect($time.length).toEqual(1); expect($time.length).toEqual(1);
expect($time.attr('class')).toEqual('chat-date'); expect($time.attr('class')).toEqual('chat-date');
expect($time.attr('datetime')).toEqual(moment(message_date).format("YYYY-MM-DD")); expect($time.data('isodate')).toEqual(moment(message_date).format());
expect($time.text()).toEqual(moment(message_date).format("dddd MMM Do YYYY")); expect($time.text()).toEqual(moment(message_date).format("dddd MMM Do YYYY"));
// Normal checks for the 2nd message // Normal checks for the 2nd message
......
<time class="chat-date" datetime="{{isodate}}">{{datestring}}</time> <time class="chat-date" data-isodate="{{isodate}}">{{datestring}}</time>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment