Refs #20 lazyDom

cli/dom.js

@@ -312,9 +312,11 @@ function makeUserColor(username) {
 /**
  * @param {Chatter} user
  * @param {string} userName
+ * @param {boolean} isMeMessage
+ * @param {number} firstTs
  * @return {Element}
 **/
-function createMessageGroupDom(user, userName) {
+function createMessageGroupDom(user, userName, isMeMessage, firstTs) {
     var dom = document.createElement("div")
         ,authorBlock = document.createElement("div")
         ,authorName = document.createElement("a")
@@ -343,6 +345,10 @@ function createMessageGroupDom(user, userName) {
     dom.content.className = R.klass.msg.authorMessages;
     dom.messages = [];
     dom.appendChild(dom.content);
+
+    dom.ts = firstTs;
+    dom.meMessage = isMeMessage;
+    dom.userId = user.id;
     return dom;
 }
 

cli/ui.js

@@ -309,6 +309,14 @@ function spawnNotification() {
         Notification.requestPermission();
 }
 
+function isSameGroup(group, msg) {
+    return group &&
+        isSameDay(msg.ts, group.ts) &&
+        !(msg instanceof MeMessage) &&
+        !group.meMessage &&
+        msg.userId === group.userId;
+}
+
 function onRoomUpdated() {
     var chatFrag = document.getElementById(R.id.currentRoom.content),
         currentRoomId = SELECTED_ROOM.id,
@@ -326,11 +334,13 @@ function onRoomUpdated() {
         var currentGroup = 0,
             currentMsgInGroup = 0;
         DATA.history[currentRoomId].messages.forEach(function(msg) {
+            var groupDomCreated = false;
             if (MSG_GROUPS[currentGroup]) {
                 if (currentMsgInGroup >= MSG_GROUPS[currentGroup].messages.length) {
                     if (!msg.removed) {
                         var sameDayThanPrevious = isSameDay(msg.ts, prevTs);
-                        if (msg instanceof MeMessage || (prevMsg && prevMsg.userId !== msg.userId) || !msg.userId) {
+                        if (!isSameGroup(MSG_GROUPS[currentGroup], msg)) {
+                            // New message in next group
                             while (MSG_GROUPS[currentGroup].content.children[currentMsgInGroup])
                                 MSG_GROUPS[currentGroup].content.children[currentMsgInGroup].remove();
                             MSG_GROUPS[currentGroup].messages.splice(currentMsgInGroup);
@@ -359,7 +369,7 @@ function onRoomUpdated() {
                     }
                     // else message got removed
                 }
-                if (MSG_GROUPS[currentGroup]) {
+                if (isSameGroup(MSG_GROUPS[currentGroup], msg)) {
                     if (MSG_GROUPS[currentGroup].messages[currentMsgInGroup] === msg.id) {
                         // same message
                         var dom = MSG_GROUPS[currentGroup].content.children[currentMsgInGroup];
@@ -368,6 +378,7 @@ function onRoomUpdated() {
                             dom.remove();
                             MSG_GROUPS[currentGroup].messages.splice(currentMsgInGroup, 1);
                         } else if (msg.uiNeedRefresh) {
+                            // Check invalidated
                             var newDom = msg.getDom();
                             MSG_GROUPS[currentGroup].content.replaceChild(dom, newDom);
                             dom = newDom;
@@ -376,10 +387,8 @@ function onRoomUpdated() {
                             dom.classList.add(R.klass.msg.firstUnread);
                         else
                             dom.classList.remove(R.klass.msg.firstUnread);
-                        // Check invalidated
                         currentMsgInGroup++;
                         prevMsg = msg;
-                        return;
                     } else {
                         // Another message, insert it before
                         var dom = msg.getDom();
@@ -392,47 +401,41 @@ function onRoomUpdated() {
                         // Check invalidated
                         currentMsgInGroup++;
                         prevMsg = msg;
-                        return;
                     }
+                    return;
                 }
             }
+            if (MSG_GROUPS[currentGroup] && !isSameGroup(MSG_GROUPS[currentGroup], msg)) // Next group is not the good one, insert a new group
+                MSG_GROUPS.splice(currentGroup, 0, null);
             if (!MSG_GROUPS[currentGroup]) {
-                // next group
-                MSG_GROUPS[currentGroup] = createMessageGroupDom(DATA.context.getUser(msg.userId), msg.username);
-                /** @type {Element} */
-                var dom = msg.getDom();
-                firstTsCombo = msg.ts;
-                if ((!prevMsg || prevMsg.ts <= SELECTED_ROOM.lastRead) && msg.ts > SELECTED_ROOM.lastRead) {
-                    dom.classList.add(R.klass.msg.firstUnread);
-                    dom.insertBefore(UNREAD_INDICATOR_DOM, dom.firstChild);
+                MSG_GROUPS[currentGroup] = createMessageGroupDom(DATA.context.getUser(msg.userId), msg.username, msg instanceof MeMessage, msg.ts);
+                groupDomCreated = true;
+            }
+            /** @type {Element} */
+            var dom = msg.getDom();
+            firstTsCombo = msg.ts;
+            if ((!prevMsg || prevMsg.ts <= SELECTED_ROOM.lastRead) && msg.ts > SELECTED_ROOM.lastRead) {
+                dom.classList.add(R.klass.msg.firstUnread);
+                dom.insertBefore(UNREAD_INDICATOR_DOM, dom.firstChild);
+            } else {
+                dom.classList.remove(R.klass.msg.firstUnread);
+            }
+            MSG_GROUPS[currentGroup].content.appendChild(dom);
+            MSG_GROUPS[currentGroup].messages.push(msg.id);
+            prevMsg = msg;
+            chatFrag.appendChild(MSG_GROUPS[currentGroup]);
+            currentMsgInGroup = 1;
+
+            if (groupDomCreated) {
+                if (sameDayThanPrevious) {
+                    MSG_GROUPS[currentGroup].classList.remove(R.klass.msg.firstOfDay);
                 } else {
-                    dom.classList.remove(R.klass.msg.firstUnread);
-                }
-                MSG_GROUPS[currentGroup].content.appendChild(dom);
-                MSG_GROUPS[currentGroup].messages.push(msg.id);
-                prevMsg = msg;
-                chatFrag.appendChild(MSG_GROUPS[currentGroup]);
-                currentMsgInGroup = 1;
-
-                if (msg instanceof MeMessage) {
-                    while (MSG_GROUPS[currentGroup].content.children[currentMsgInGroup])
-                        MSG_GROUPS[currentGroup].content.children[currentMsgInGroup].remove();
-                    MSG_GROUPS[currentGroup].messages.splice(currentMsgInGroup);
-                    currentGroup++;
-                    currentMsgInGroup = 0;
-                    firstTsCombo = msg.ts;
+                    MSG_GROUPS[currentGroup].classList.add(R.klass.msg.firstOfDay);
+                    MSG_GROUPS[currentGroup].dataset["date"] = locale.formatDay(msg.ts);
                 }
-                if (!currentMsgGroupDom || currentMsgGroupDom.content.firstChild === dom) {
-                    if (sameDayThanPrevious) {
-                        (currentMsgGroupDom || dom).classList.remove(R.klass.msg.firstOfDay);
-                    } else {
-                        (currentMsgGroupDom || dom).classList.add(R.klass.msg.firstOfDay);
-                        (currentMsgGroupDom || dom).dataset["date"] = locale.formatDay(msg.ts);
-                    }
-                }
-                prevTs = msg.ts;
-                return;
             }
+            prevTs = msg.ts;
+            return;
         });
         if (MSG_GROUPS[currentGroup]) {
             while (MSG_GROUPS[currentGroup].content.children[currentMsgInGroup])