lazyDom

cli/dom.js

@@ -340,6 +340,8 @@ function createMessageGroupDom(user, userName, isMeMessage, firstTs) {
     authorBlock.appendChild(authorName);
     authorBlock.className = R.klass.msg.author;
     dom.className = R.klass.msg.authorGroup;
+    if (isMeMessage)
+        dom.classList.add(R.klass.msg.meMessage);
     dom.appendChild(authorBlock);
     dom.content = document.createElement("div");
     dom.content.className = R.klass.msg.authorMessages;

cli/ui.js

@@ -319,133 +319,149 @@ function isSameGroup(group, msg) {
 
 function onRoomUpdated() {
     var chatFrag = document.getElementById(R.id.currentRoom.content),
-        currentRoomId = SELECTED_ROOM.id,
         prevMsg = null,
         firstTsCombo = 0,
-        prevMsgDom = null,
-        prevTs = 0,
-        currentMsgGroupDom;
+        currentGroup = 0,
+        currentMsgInGroup = 0;
 
     if (SELECTED_ROOM.starred)
         document.getElementById(R.id.mainSection).classList.add(R.klass.starred);
     else
         document.getElementById(R.id.mainSection).classList.remove(R.klass.starred);
-    if (DATA.history[currentRoomId]) {
-        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 (!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);
-                            currentGroup++;
-                            currentMsgInGroup = 0;
-                            firstTsCombo = msg.ts;
-                        } else {
-                            // New message belonging in this group
-                            var dom = msg.getDom();
-                            if (Math.abs(firstTsCombo -msg.ts) < 30 && !(msg instanceof MeMessage)) {
-                                if (prevMsg)
-                                    prevMsg.getDom().classList.add(R.klass.msg.sameTs);
-                            }
-                            else
-                                firstTsCombo = msg.ts;
-                            if ((!prevMsg || prevMsg.ts <= SELECTED_ROOM.lastRead) && msg.ts > SELECTED_ROOM.lastRead)
-                                dom.classList.add(R.klass.msg.firstUnread);
-                            else
-                                dom.classList.remove(R.klass.msg.firstUnread);
-                            MSG_GROUPS[currentGroup].content.appendChild(dom);
-                            MSG_GROUPS[currentGroup].messages.push(msg.id);
-                            ++currentMsgInGroup;
-                            prevMsg = msg;
-                            return;
-                        }
-                    }
-                    // else message got removed
-                }
-                if (isSameGroup(MSG_GROUPS[currentGroup], msg)) {
-                    if (MSG_GROUPS[currentGroup].messages[currentMsgInGroup] === msg.id) {
-                        // same message
-                        var dom = MSG_GROUPS[currentGroup].content.children[currentMsgInGroup];
-                        if (msg.removed) {
-                            // Check removed
-                            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;
+    DATA.history[SELECTED_ROOM.id] && DATA.history[SELECTED_ROOM.id].messages.forEach(function(msg) {
+        var groupDomCreated = false;
+        if (MSG_GROUPS[currentGroup]) {
+            if (currentMsgInGroup >= MSG_GROUPS[currentGroup].messages.length) {
+                if (!msg.removed) {
+                    if (isSameGroup(MSG_GROUPS[currentGroup], msg)) {
+                        // New message belonging in this group
+                        var dom = msg.getDom();
+                        if (Math.abs(firstTsCombo -msg.ts) < 30 && !(msg instanceof MeMessage)) {
+                            if (prevMsg)
+                                prevMsg.getDom().classList.add(R.klass.msg.sameTs);
                         }
-                        if ((!prevMsg || prevMsg.ts <= SELECTED_ROOM.lastRead) && msg.ts > SELECTED_ROOM.lastRead)
-                            dom.classList.add(R.klass.msg.firstUnread);
                         else
-                            dom.classList.remove(R.klass.msg.firstUnread);
-                        currentMsgInGroup++;
-                        prevMsg = msg;
-                    } else {
-                        // Another message, insert it before
-                        var dom = msg.getDom();
-                        MSG_GROUPS[currentGroup].content.insertBefore(dom, MSG_GROUPS[currentGroup].content.children[currentMsgInGroup]);
-                        MSG_GROUPS[currentGroup].messages.splice(currentMsgInGroup, 0, msg.id);
+                            firstTsCombo = msg.ts;
                         if ((!prevMsg || prevMsg.ts <= SELECTED_ROOM.lastRead) && msg.ts > SELECTED_ROOM.lastRead)
                             dom.classList.add(R.klass.msg.firstUnread);
                         else
                             dom.classList.remove(R.klass.msg.firstUnread);
-                        // Check invalidated
-                        currentMsgInGroup++;
+                        MSG_GROUPS[currentGroup].content.appendChild(dom);
+                        MSG_GROUPS[currentGroup].messages.push(msg.id);
+                        ++currentMsgInGroup;
                         prevMsg = msg;
+                        return;
                     }
-                    return;
+                    if (msg.ts < MSG_GROUPS[currentGroup].ts) {
+                        while (currentGroup > 0 && msg.ts < MSG_GROUPS[currentGroup].ts) {
+                            // New message in previous group, move group cursor before the group to be inserted
+                            --currentGroup;
+                        }
+                        while (MSG_GROUPS[currentGroup]) {
+                            MSG_GROUPS[currentGroup].remove();
+                            MSG_GROUPS.splice(currentGroup, 1);
+                        }
+                    } else {
+                        // 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);
+                        if (!MSG_GROUPS[currentGroup].messages.length) {
+                            MSG_GROUPS[currentGroup].remove();
+                            MSG_GROUPS[currentGroup] = null;
+                        } else {
+                            currentGroup++;
+                        }
+                    }
+                    currentMsgInGroup = 0;
+                    firstTsCombo = msg.ts;
                 }
+                // else message got removed
             }
-            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]) {
-                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 {
-                    MSG_GROUPS[currentGroup].classList.add(R.klass.msg.firstOfDay);
-                    MSG_GROUPS[currentGroup].dataset["date"] = locale.formatDay(msg.ts);
+            if (isSameGroup(MSG_GROUPS[currentGroup], msg)) {
+                if (MSG_GROUPS[currentGroup].messages[currentMsgInGroup] === msg.id) {
+                    // same message
+                    var dom = MSG_GROUPS[currentGroup].content.children[currentMsgInGroup];
+                    if (msg.removed) {
+                        // Check removed
+                        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;
+                    }
+                    if ((!prevMsg || prevMsg.ts <= SELECTED_ROOM.lastRead) && msg.ts > SELECTED_ROOM.lastRead)
+                        dom.classList.add(R.klass.msg.firstUnread);
+                    else
+                        dom.classList.remove(R.klass.msg.firstUnread);
+                    currentMsgInGroup++;
+                    prevMsg = msg;
+                } else if (!msg.removed) {
+                    // Another message, insert it before
+                    var dom = msg.getDom();
+                    MSG_GROUPS[currentGroup].content.insertBefore(dom, MSG_GROUPS[currentGroup].content.children[currentMsgInGroup]);
+                    MSG_GROUPS[currentGroup].messages.splice(currentMsgInGroup, 0, msg.id);
+                    if ((!prevMsg || prevMsg.ts <= SELECTED_ROOM.lastRead) && msg.ts > SELECTED_ROOM.lastRead)
+                        dom.classList.add(R.klass.msg.firstUnread);
+                    else
+                        dom.classList.remove(R.klass.msg.firstUnread);
+                    // Check invalidated
+                    currentMsgInGroup++;
+                    prevMsg = msg;
                 }
+                return;
             }
-            prevTs = msg.ts;
+        }
+        if (msg.removed)
             return;
-        });
-        if (MSG_GROUPS[currentGroup]) {
-            while (MSG_GROUPS[currentGroup].content.children[currentMsgInGroup])
-                MSG_GROUPS[currentGroup].content.children[currentMsgInGroup].remove();
-            MSG_GROUPS[currentGroup].messages.splice(currentMsgInGroup);
-            for (var i = currentGroup +1;MSG_GROUPS[i]; i++) {
-                MSG_GROUPS[i].remove();
-            }
+        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]) {
+            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;
+
+        if (groupDomCreated) {
+            if (MSG_GROUPS[currentGroup +1])
+                chatFrag.insertBefore(MSG_GROUPS[currentGroup], MSG_GROUPS[currentGroup +1]);
+            else
+                chatFrag.appendChild(MSG_GROUPS[currentGroup]);
+            currentMsgInGroup = 1;
+        }
+        return;
+    });
+    if (MSG_GROUPS[currentGroup]) {
+        while (MSG_GROUPS[currentGroup].content.children[currentMsgInGroup])
+            MSG_GROUPS[currentGroup].content.children[currentMsgInGroup].remove();
+        MSG_GROUPS[currentGroup].messages.splice(currentMsgInGroup);
+        if (!MSG_GROUPS[currentGroup].messages.length)
+            --currentGroup;
+        for (var i = currentGroup +1;MSG_GROUPS[i]; i++) {
+            MSG_GROUPS[i].remove();
+        }
+    }
+    for (var i =0, len =MSG_GROUPS.length; i < len; ++i) {
+        if (MSG_GROUPS[i -1] && isSameDay(MSG_GROUPS[i -1].ts, MSG_GROUPS[i].ts)) {
+            MSG_GROUPS[i].classList.remove(R.klass.msg.firstOfDay);
+        } else {
+            MSG_GROUPS[i].classList.add(R.klass.msg.firstOfDay);
+            MSG_GROUPS[i].dataset["date"] = MSG_GROUPS[i].dataset["date"] || locale.formatDay(MSG_GROUPS[i].ts);
         }
-        MSG_GROUPS.splice(currentGroup +1);
     }
     //TODO scroll lock
     var content = document.getElementById(R.id.currentRoom.content);

srv/public/style.css

@@ -91,11 +91,14 @@ button, .button { border: 1px solid black; border-radius: 3px; background: rgb(2
 .chat-context-room:not(.selected).unreadHi, .chat-context-room:not(.selected).unreadHi > a { font-weight: bold; color: #4c9689; }
 .chatmsg-authorGroup { position: relative; }
 .chatmsg-authorGroup .chatmsg-item .chatmsg-author-name { display: none; }
+.chatmsg-authorGroup.chatmsg-me_message { padding: 0; }
+.chatmsg-authorGroup.chatmsg-me_message .chatmsg-author { display: none; }
+.chatmsg-authorGroup.chatmsg-me_message > .chatmsg-author-messages { padding: 0; }
 .chatmsg-authorGroup > .chatmsg-author { position: absolute; }
 .chatmsg-authorGroup > .chatmsg-author * { vertical-align: top; }
 .chatmsg-authorGroup > .chatmsg-author .chatmsg-author-img-wrapper { position: relative; display: inline-block; top: 0; }
 .chatmsg-authorGroup > .chatmsg-author-messages { padding: 18px 0 0 36px; }
-.chatmsg-authorGroup, .chatmsg-me_message { padding: 10px; }
+.chatmsg-authorGroup, .chatmsg-authorGroup .chatmsg-me_message { padding: 10px; }
 .chatmsg-authorGroup .chatmsg-item { padding: 4px 10px; }
 .chatmsg-authorGroup.chatmsg-first-daily,.chatmsg-me_message.chatmsg-first-daily { margin-top: 1em; }
 .chatmsg-authorGroup.chatmsg-first-daily::before,.chatmsg-me_message.chatmsg-first-daily::before { position: absolute; top: -1em; width: calc(100% - 20px); content: attr(data-date); border-bottom: 1px solid rgb(156, 156, 156); }