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

Some refactoring while removing jquery

Browse Source
This commit is contained in:
JC Brand 2017-12-24 16:47:02 +00:00
parent 334a24c938
commit 1e1aa1d9c9
1 changed files with 48 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
src/converse-chatview.js
View File

@ -118,7 +118,7 @@
}
_converse.api.listen.on('windowStateChanged', onWindowStateChanged);
_converse.EmojiPicker = Backbone.Model.extend({
_converse.EmojiPicker = Backbone.Model.extend({
defaults: {
'current_category': 'people',
'current_skintone': '',
@ -385,23 +385,24 @@
);
},
insertDayIndicator (date, prepend) {
/* Appends (or prepends if "prepend" is truthy) an indicator
insertDayIndicator (date, insert_method) {
/* Inserts an indicator
* into the chat area, showing the day as given by the
* passed in date.
*
* Parameters:
* (String) date - An ISO8601 date string.
* (Function) insert_method - The method to be used to
* insert the indicator
*/
const day_date = moment(date).startOf('day');
const insert = prepend ? $(this.content).prepend: $(this.content).append;
insert.call($(this.content), tpl_new_day({
insert_method(tpl_new_day({
isodate: day_date.format(),
datestring: day_date.format("dddd MMM Do YYYY")
}));
},
insertMessage (attrs, prepend) {
insertMessage (attrs, insert_method) {
/* 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.
@ -409,15 +410,35 @@
* Parameters:
* (Object) attrs: An object containing the message attributes.
*/
const insert = prepend ? $(this.content).prepend : $(this.content).append;
_.flow(($el) => {
insert.call($(this.content), $el);
insert_method($el[0]);
return $el;
},
this.scrollDown.bind(this)
)(this.renderMessage(attrs));
},
getLastMessageDate (cutoff) {
/* Return the ISO8601 format date of the latest message.
*
* Parameters:
* (Object) cutoff: Moment Date cutoff date. The last
* message received cutoff this date will be returned.
*/
if (!cutoff) {
const last_msg = this.content.lastElementChild;
return last_msg ? last_msg.getAttribute('data-isodate') : null
}
const msg_dates = _.invokeMap(
this.content.querySelector('.message'),
Element.prototype.getAttribute,
'data-isodate'
)
msg_dates.push(cutoff.format());
msg_dates.sort();
return msg_dates[msg_dates.indexOf(cutoff)-1];
},
showMessage (attrs) {
/* Inserts a chat message into the content area of the chat box.
* Will also insert a new day indicator if the message is on a
@ -430,62 +451,52 @@
* (Object) attrs: An object containing the message
* attributes.
*/
let current_msg_date = moment(attrs.time) || moment;
const first_msg_el = this.content.firstElementChild,
first_msg_date = first_msg_el ? first_msg_el.getAttribute('data-isodate') : null;
const current_msg_date = moment(attrs.time) || moment,
first_msg_el = this.content.firstElementChild,
first_msg_date = first_msg_el ? first_msg_el.getAttribute('data-isodate') : null,
append_element = _.bind(this.content.insertAdjacentElement, this.content, 'beforeend'),
append_html = _.bind(this.content.insertAdjacentHTML, this.content, 'beforeend');
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);
this.insertDayIndicator(current_msg_date, append_html);
this.insertMessage(attrs, append_element);
return;
}
const last_msg_el = this.content.lastElementChild,
last_msg_date = last_msg_el.getAttribute('data-isodate');
const last_msg_date = this.getLastMessageDate();
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
this.insertDayIndicator(current_msg_date);
this.insertDayIndicator(current_msg_date, append_html);
}
this.insertMessage(attrs);
this.insertMessage(attrs, append_element);
return;
}
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).
this.insertMessage(attrs, 'prepend');
const prepend_element = _.bind(this.content.insertAdjacentElement, this.content, 'afterbegin');
this.insertMessage(attrs, prepend_element);
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.insertDayIndicator(current_msg_date, append_html);
}
return;
}
// Find the correct place to position the message
current_msg_date = current_msg_date.format();
const msg_dates = _.invokeMap(
this.content.querySelector('.message'),
Element.prototype.getAttribute,
'data-isodate'
)
msg_dates.push(current_msg_date);
msg_dates.sort();
const idx = msg_dates.indexOf(current_msg_date)-1;
const latest_msg_el = this.content.querySelector(`.message[data-isodate="${msg_dates[idx]}"]`);
_.flow(($el) => {
$el.insertAfter(latest_msg_el);
return $el;
},
this.scrollDown.bind(this)
)(this.renderMessage(attrs));
const previous_msg_date = this.getLastMessageDate(current_msg_date);
const previous_msg_el = this.content.querySelector(
`.message[data-isodate="${previous_msg_date}"]`);
this.insertMessage(
attrs, _.bind(previous_msg_el.insertAdjacentElement, previous_msg_el, 'afterend'));
},
getExtraMessageTemplateAttributes () {