Make DOM traversal methods more generic and move to utils.

src/converse-chatview.js

@@ -404,7 +404,7 @@
                      *      This element must have a "data-isodate" attribute
                      *      which specifies its creation date.
                      */
-                    const prev_msg_el = this.getPreviousMessageElement(next_msg_el),
+                    const prev_msg_el = u.getPreviousElement(next_msg_el, ".message:not(.chat-event)"),
                           prev_msg_date = _.isNull(prev_msg_el) ? null : prev_msg_el.getAttribute('data-isodate'),
                           next_msg_date = next_msg_el.getAttribute('data-isodate');
 
@@ -419,34 +419,6 @@
                     }
                 },
 
-                isNotPermanentMessage (el) {
-                    return !_.isNull(el) && (u.hasClass('chat-event', el) || !u.hasClass('message', el));
-                },
-
-                getPreviousMessageElement (el) {
-                    let prev_msg_el = el.previousSibling;
-                    while (this.isNotPermanentMessage(prev_msg_el)) {
-                        prev_msg_el = prev_msg_el.previousSibling
-                    }
-                    return prev_msg_el;
-                },
-
-                getLastMessageElement () {
-                    let last_msg_el = this.content.lastElementChild;
-                    while (this.isNotPermanentMessage(last_msg_el)) {
-                        last_msg_el = last_msg_el.previousSibling
-                    }
-                    return last_msg_el;
-                },
-
-                getFirstMessageElement () {
-                    let first_msg_el = this.content.firstElementChild;
-                    while (this.isNotPermanentMessage(first_msg_el)) {
-                        first_msg_el = first_msg_el.nextSibling
-                    }
-                    return first_msg_el;
-                },
-
                 getLastMessageDate (cutoff) {
                     /* Return the ISO8601 format date of the latest message.
                      *
@@ -454,12 +426,12 @@
                      *  (Object) cutoff: Moment Date cutoff date. The last
                      *      message received cutoff this date will be returned.
                      */
-                    const first_msg = this.getFirstMessageElement(),
+                    const first_msg = u.getFirstChildElement(this.content, '.message:not(.chat-event)'),
                           oldest_date = first_msg ? first_msg.getAttribute('data-isodate') : null;
                     if (!_.isNull(oldest_date) && moment(oldest_date).isAfter(cutoff)) {
                         return null;
                     }
-                    const last_msg = this.getLastMessageElement(),
+                    const last_msg = u.getLastChildElement(this.content, '.message:not(.chat-event)'),
                           most_recent_date = last_msg ? last_msg.getAttribute('data-isodate') : null;
                     if (_.isNull(most_recent_date) || moment(most_recent_date).isBefore(cutoff)) {
                         return most_recent_date;

src/utils.js

@@ -64,16 +64,6 @@
         });
     };
 
-    function calculateElementHeight (el) {
-        /* Return the height of the passed in DOM element,
-         * based on the heights of its children.
-         */
-        return _.reduce(
-            el.children,
-            (result, child) => result + child.offsetHeight, 0
-        );
-    }
-
     function slideOutWrapup (el) {
         /* Wrapup function for slideOut. */
         el.removeAttribute('data-slider-marker');
@@ -85,6 +75,48 @@
 
     var u = {};
 
+    u.getNextElement = function (el, selector='*') {
+        let next_el = el.nextElementSibling;
+        while (!_.isNull(next_el) && !sizzle.matchesSelector(next_el, selector)) {
+            next_el = next_el.nextElementSibling;
+        }
+        return next_el;
+    }
+
+    u.getPreviousElement = function (el, selector='*') {
+        let prev_el = el.previousSibling;
+        while (!_.isNull(prev_el) && !sizzle.matchesSelector(prev_el, selector)) {
+            prev_el = prev_el.previousSibling
+        }
+        return prev_el;
+    }
+
+    u.getFirstChildElement = function (el, selector='*') {
+        let first_el = el.firstElementChild;
+        while (!_.isNull(first_el) && !sizzle.matchesSelector(first_el, selector)) {
+            first_el = first_el.nextSibling
+        }
+        return first_el;
+    }
+
+    u.getLastChildElement = function (el, selector='*') {
+        let last_el = el.lastElementChild;
+        while (!_.isNull(last_el) && !sizzle.matchesSelector(last_el, selector)) {
+            last_el = last_el.previousSibling
+        }
+        return last_el;
+    }
+
+    u.calculateElementHeight = function (el) {
+        /* Return the height of the passed in DOM element,
+         * based on the heights of its children.
+         */
+        return _.reduce(
+            el.children,
+            (result, child) => result + child.offsetHeight, 0
+        );
+    }
+
     u.addClass = function (className, el) {
         if (el instanceof Element) {
             el.classList.add(className);
@@ -199,7 +231,7 @@
                 el.removeAttribute('data-slider-marker');
                 window.cancelAnimationFrame(marker);
             }
-            const end_height = calculateElementHeight(el);
+            const end_height = u.calculateElementHeight(el);
             if (window.converse_disable_effects) { // Effects are disabled (for tests)
                 el.style.height = end_height + 'px';
                 slideOutWrapup(el);
@@ -227,7 +259,7 @@
                     // browser bug where browsers don't know the correct
                     // offsetHeight beforehand.
                     el.removeAttribute('data-slider-marker');
-                    el.style.height = calculateElementHeight(el) + 'px';
+                    el.style.height = u.calculateElementHeight(el) + 'px';
                     el.style.overflow = "";
                     el.style.height = "";
                     resolve();