MUC Join/Leave messages now also show a new day indicator

CHANGES.md

@@ -34,6 +34,7 @@
 - Show status messages in an MUC room when a user's role changes.
 - In MUC chat rooms, collapse multiple, consecutive join/leave messages.
 - Performance improvements for rendering private chats, rooms and the contacts roster.
+- MUC Leave/Join messages now also show a new day indicator if applicable.
 
 ### API changes
 - New API method `_converse.disco.supports` to check whether a certain

src/converse-chatview.js

@@ -386,21 +386,37 @@
                     /* Inserts an indicator into the chat area, showing the
                      * day as given by the passed in date.
                      *
+                     * The indicator is only inserted if necessary.
+                     *
                      * Parameters:
                      *  (HTMLElement) next_msg_el - The message element before
                      *      which the day indicator element must be inserted.
                      *      This element must have a "data-isodate" attribute
                      *      which specifies its creation date.
                      */
-                    const date = next_msg_el.getAttribute('data-isodate'),
-                          day_date = moment(date).startOf('day');
+                    const prev_msg_el = this.getPreviousMessageElement(next_msg_el),
+                          prev_msg_date = _.isNull(prev_msg_el) ? null : prev_msg_el.getAttribute('data-isodate'),
+                          next_msg_date = next_msg_el.getAttribute('data-isodate');
+
+                    if (_.isNull(prev_msg_date) || moment(next_msg_date).isAfter(prev_msg_date, 'day')) {
+                        const day_date = moment(next_msg_date).startOf('day');
+                        next_msg_el.insertAdjacentHTML('beforeBegin',
+                            tpl_new_day({
+                                'isodate': day_date.format(),
+                                'datestring': day_date.format("dddd MMM Do YYYY")
+                            })
+                        );
+                    }
+                },
 
-                    next_msg_el.insertAdjacentHTML('beforeBegin',
-                        tpl_new_day({
-                            'isodate': day_date.format(),
-                            'datestring': day_date.format("dddd MMM Do YYYY")
-                        })
-                    );
+                getPreviousMessageElement (el) {
+                    let prev_msg_el = el.previousSibling;
+                    while (!_.isNull(prev_msg_el) &&
+                            !u.hasClass(prev_msg_el, 'message') &&
+                            !u.hasClass(prev_msg_el, 'chat-info')) {
+                        prev_msg_el = prev_msg_el.previousSibling
+                    }
+                    return prev_msg_el;
                 },
 
                 getLastMessageElement () {
@@ -476,14 +492,11 @@
 
                     if (_.isNull(previous_msg_date)) {
                         this.content.insertAdjacentElement('afterbegin', message_el);
-                        this.insertDayIndicator(message_el);
                     } else {
                         const previous_msg_el = sizzle(`[data-isodate="${previous_msg_date}"]:last`, this.content).pop();
                         previous_msg_el.insertAdjacentElement('afterend', message_el);
-                        if (current_msg_date.isAfter(previous_msg_date, 'day')) {
-                            this.insertDayIndicator(message_el);
-                        }
                     }
+                    this.insertDayIndicator(message_el);
                     this.scrollDown();
                 },
 

src/converse-muc.js

@@ -1837,9 +1837,10 @@
                     const nick = Strophe.getResourceFromJid(stanza.getAttribute('from'));
                     const stat = stanza.querySelector('status');
                     const last_el = this.content.lastElementChild;
+
                     if (_.includes(_.get(last_el, 'classList', []), 'chat-info') &&
                             _.get(last_el, 'dataset', {}).leave === `"${nick}"`) {
-                        last_el.outerHTML = 
+                        last_el.outerHTML =
                             tpl_info({
                                 'data': `data-leavejoin="${nick}"`,
                                 'isodate': moment().format(),
@@ -1860,7 +1861,9 @@
 
                             last_el.outerHTML = tpl_info(data);
                         } else {
-                            this.content.insertAdjacentHTML('beforeend', tpl_info(data));
+                            const el = u.stringToElement(tpl_info(data));
+                            this.content.insertAdjacentElement('beforeend', el);
+                            this.insertDayIndicator(el);
                         }
                     }
                     this.scrollDown();
@@ -1877,7 +1880,7 @@
                         if (_.get(stat, 'textContent')) {
                             message = message + ' "' + stat.textContent + '"';
                         }
-                        last_el.outerHTML = 
+                        last_el.outerHTML =
                             tpl_info({
                                 'data': `data-joinleave="${nick}"`,
                                 'isodate': moment().format(),
@@ -1890,6 +1893,7 @@
                         }
                         const data = {
                             'message': message,
+                            'isodate': moment().format(),
                             'data': `data-leave="${nick}"`
                         }
                         if (_.includes(_.get(last_el, 'classList', []), 'chat-info') &&
@@ -1897,7 +1901,9 @@
 
                             last_el.outerHTML = tpl_info(data);
                         } else {
-                            this.content.insertAdjacentHTML('beforeend', tpl_info(data));
+                            const el = u.stringToElement(tpl_info(data));
+                            this.content.insertAdjacentElement('beforeend', el);
+                            this.insertDayIndicator(el);
                         }
                     }
                     this.scrollDown();