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

Also show the day for the first received messages.

Browse Source 
Until now, new days were only indicated for messages received on different days
*after* the day's messages.
This commit is contained in:
JC Brand 2016-05-25 06:23:00 +00:00
parent cb288341fb
commit aaaacf2513
5 changed files with 66 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/converse.css
View File

@ -1347,7 +1347,7 @@
font-weight: bold; }
#conversejs .chatbox .chat-body .chat-info.chat-date {
display: inline-block;
margin-top: 2em; }
margin-top: 1em; }
#conversejs .chatbox .chat-body .chat-message {
margin: 0.3em; }
#conversejs .chatbox .chat-body .chat-message span {

3
docs/CHANGES.md
View File

@ -1,9 +1,10 @@
# Changelog
## 1.0.2 (Unreleased)
## 1.0.3 (Unreleased)
- Bugfix. Login form doesn't render after logging out, when `auto_reconnect = false`
[jcbrand]
- Also indicate new day for the first day's messages. [jcbrand]
## 1.0.2 (2016-05-24)

2
sass/_chatbox.scss
View File

@ -151,7 +151,7 @@
}
&.chat-date {
display: inline-block;
margin-top: 2em;
margin-top: 1em;
}
}
.chat-message {

15
spec/chatbox.js
View File

@ -664,6 +664,12 @@
sender_txt = $chat_content.find('span.chat-msg-them').text();
expect(sender_txt.match(/^[0-9][0-9]:[0-9][0-9] /)).toBeTruthy();
var $time = $chat_content.find('time');
expect($time.length).toEqual(1);
expect($time.attr('class')).toEqual('chat-info chat-date');
expect($time.data('isodate')).toEqual(moment(one_day_ago.startOf('day')).format());
expect($time.text()).toEqual(moment(one_day_ago.startOf('day')).format("dddd MMM Do YYYY"));
message = 'This is a current message';
msg = $msg({
from: contact_jid,
@ -676,12 +682,13 @@
expect(converse.emit).toHaveBeenCalledWith('message', msg);
// Check that there is a <time> element, with the required
// props.
var $time = $chat_content.find('time');
$time = $chat_content.find('time');
expect($time.length).toEqual(2); // There are now two time elements
$time = $chat_content.find('time:last'); // We check the last one
var message_date = new Date();
expect($time.length).toEqual(1);
expect($time.attr('class')).toEqual('chat-info chat-date');
expect($time.data('isodate')).toEqual(moment(message_date).format());
expect($time.text()).toEqual(moment(message_date).format("dddd MMM Do YYYY"));
expect($time.data('isodate')).toEqual(moment(message_date).startOf('day').format());
expect($time.text()).toEqual(moment(message_date).startOf('day').format("dddd MMM Do YYYY"));
// Normal checks for the 2nd message
expect(chatbox.messages.length).toEqual(2);

92
src/converse-chatview.js
View File

@ -154,30 +154,37 @@
}
},
prependDayIndicator: function (date) {
/* Prepends an indicator into the chat area, showing the day as
* given by the passed in date.
insertDayIndicator: function (date, prepend) {
/* Appends (or prepends if "prepend" is truthy) an indicator
* into the chat area, showing the day as given by the
* passed in date.
*
* Parameters:
* (String) date - An ISO8601 date string.
*/
var day_date = moment(date).startOf('day');
this.$content.prepend(converse.templates.new_day({
var insert = prepend ? this.$content.prepend: this.$content.append;
insert.call(this.$content, converse.templates.new_day({
isodate: day_date.format(),
datestring: day_date.format("dddd MMM Do YYYY")
}));
},
appendMessage: function (attrs) {
/* Helper method which appends a message to the end of the chat
* box's content area.
insertMessage: function (attrs, prepend) {
/* Helper method which appends a message (or prepends if the
* 2nd parameter is set to true) to the end of the chat box's
* content area.
*
* Parameters:
* (Object) attrs: An object containing the message attributes.
*/
var insert = prepend ? this.$content.prepend : this.$content.append;
_.compose(
_.debounce(this.scrollDown.bind(this), 50),
this.$content.append.bind(this.$content)
this.scrollDownMessageHeight.bind(this),
function ($el) {
insert.call(this.$content, $el);
return $el;
}.bind(this)
)(this.renderMessage(attrs));
},
@ -192,66 +199,42 @@
* Parameters:
* (Object) attrs: An object containing the message attributes.
*/
var $first_msg = this.$content.children('.chat-message:first'),
var msg_dates, idx,
$first_msg = this.$content.children('.chat-message:first'),
first_msg_date = $first_msg.data('isodate'),
last_msg_date, current_msg_date, day_date, $msgs, msg_dates, idx;
if (!first_msg_date) {
this.appendMessage(attrs);
return;
}
current_msg_date = moment(attrs.time) || moment;
current_msg_date = moment(attrs.time) || moment,
last_msg_date = this.$content.children('.chat-message:last').data('isodate');
if (typeof last_msg_date !== "undefined" && (current_msg_date.isAfter(last_msg_date) || current_msg_date.isSame(last_msg_date))) {
if (!first_msg_date) {
// This is the first received message, so we insert a
// date indicator before it.
this.insertDayIndicator(current_msg_date);
this.insertMessage(attrs);
return;
}
if (current_msg_date.isAfter(last_msg_date) || current_msg_date.isSame(last_msg_date)) {
// The new message is after the last message
if (current_msg_date.isAfter(last_msg_date, 'day')) {
// Append a new day indicator
day_date = moment(current_msg_date).startOf('day');
this.$content.append(converse.templates.new_day({
isodate: current_msg_date.format(),
datestring: current_msg_date.format("dddd MMM Do YYYY")
}));
this.insertDayIndicator(current_msg_date);
}
this.appendMessage(attrs);
this.insertMessage(attrs);
return;
}
if (typeof first_msg_date !== "undefined" &&
(current_msg_date.isBefore(first_msg_date) ||
(current_msg_date.isSame(first_msg_date) && !current_msg_date.isSame(last_msg_date)))) {
// The new message is before the first message
if ($first_msg.prev().length === 0) {
// There's no day indicator before the first message, so we prepend one.
this.prependDayIndicator(first_msg_date);
}
if (current_msg_date.isBefore(first_msg_date, 'day')) {
_.compose(
this.scrollDownMessageHeight.bind(this),
function ($el) {
this.$content.prepend($el);
return $el;
}.bind(this)
)(this.renderMessage(attrs));
// This message is on a different day, so we add a day indicator.
this.prependDayIndicator(current_msg_date);
} else {
if (current_msg_date.isBefore(first_msg_date) || current_msg_date.isSame(first_msg_date)) {
// The message is before the first, but on the same day.
// We need to prepend the message immediately before the
// first message (so that it'll still be after the day indicator).
_.compose(
this.scrollDownMessageHeight.bind(this),
function ($el) {
$el.insertBefore($first_msg);
return $el;
this.insertMessage(attrs, 'prepend');
if (current_msg_date.isBefore(first_msg_date, 'day')) {
// This message is also on a different day, so we prepend a day indicator.
this.insertDayIndicator(current_msg_date, 'prepend');
}
)(this.renderMessage(attrs));
return;
}
} else {
// We need to find the correct place to position the message
// Find the correct place to position the message
current_msg_date = current_msg_date.format();
$msgs = this.$content.children('.chat-message');
msg_dates = _.map($msgs, function (el) {
msg_dates = _.map(this.$content.children('.chat-message'), function (el) {
return $(el).data('isodate');
});
msg_dates.push(current_msg_date);
@ -264,7 +247,6 @@
return $el;
}.bind(this)
)(this.renderMessage(attrs));
}
},
renderMessage: function (attrs) {