[tmp] init lazy dom

cli/dom.js

@@ -341,6 +341,7 @@ function createMessageGroupDom(user, userName) {
     dom.appendChild(authorBlock);
     dom.content = document.createElement("div");
     dom.content.className = R.klass.msg.authorMessages;
+    dom.messages = [];
     dom.appendChild(dom.content);
     return dom;
 }

cli/osmTile.js

@@ -85,7 +85,7 @@ function makeOSMTiles(geo) {
                             mapCtx.drawImage(img.img, tileSize *img.i, tileSize *img.j, tileSize, tileSize);
                             drawPlot(px -absoluteX, py -absoluteY, accRadiusPx);
                         }
-                    });
+                    }).catch(function() {});
         },
         currentZoom,
         setZoom = function(val) {

cli/ui.js

@@ -167,6 +167,7 @@ function onRoomSelected() {
     }
     var roomLi = document.getElementById("room_" +SELECTED_ROOM.id);
     document.getElementById(R.id.currentRoom.title).textContent = name;
+    MSG_GROUPS = [];
     onRoomUpdated();
     focusInput();
 
@@ -308,7 +309,7 @@ function spawnNotification() {
 }
 
 function onRoomUpdated() {
-    var chatFrag = document.createDocumentFragment(),
+    var chatFrag = document.getElementById(R.id.currentRoom.content),
         currentRoomId = SELECTED_ROOM.id,
         prevMsg = null,
         firstTsCombo = 0,
@@ -320,77 +321,118 @@ function onRoomUpdated() {
         document.getElementById(R.id.mainSection).classList.add(R.klass.starred);
     else
         document.getElementById(R.id.mainSection).classList.remove(R.klass.starred);
-    MSG_GROUPS = [];
-    if (DATA.history[currentRoomId])
+    if (DATA.history[currentRoomId]) {
+        var currentGroup = 0,
+            currentMsgInGroup = 0;
         DATA.history[currentRoomId].messages.forEach(function(msg) {
-            if (!msg.removed) {
-                var dom = msg.getDom(),
-                    newGroupDom = false,
-                    sameDayThanPrevious = isSameDay(msg.ts, prevTs);
-
-                if (prevMsg && prevMsg.userId === msg.userId && msg.userId && sameDayThanPrevious) {
-                    if (Math.abs(firstTsCombo -msg.ts) < 30 && !(msg instanceof MeMessage))
-                        prevMsgDom.classList.add(R.klass.msg.sameTs);
-                    else
-                        firstTsCombo = msg.ts;
-                } else {
-                    firstTsCombo = msg.ts;
-                    newGroupDom = true;
+            if (MSG_GROUPS[currentGroup]) {
+                if (currentMsgInGroup >= MSG_GROUPS[currentGroup].messages.length) {
+                    if (!msg.removed) {
+                        if (msg instanceof MeMessage || (prevMsg && prevMsg.userId !== msg.userId) || !msg.userId) {
+                            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 (SELECTED_ROOM_UNREAD > -1 &&
-                        (!prevMsg || prevMsg.ts <= SELECTED_ROOM_UNREAD) &&
-                        msg.ts > SELECTED_ROOM_UNREAD) {
+                if (MSG_GROUPS[currentGroup]) {
+                    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) {
+                            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);
+                        // Check invalidated
+                        currentMsgInGroup++;
+                        prevMsg = msg;
+                        return;
+                    } 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);
+                        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;
+                    }
+                }
+            }
+            if (!MSG_GROUPS[currentGroup]) {
+                // next group
+                MSG_GROUPS[currentGroup] = createMessageGroupDom(DATA.context.getUser(msg.userId), msg.username);
+                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 (msg instanceof MeMessage) {
-                    prevMsg = null;
-                    prevMsgDom = null;
-                    firstTsCombo = 0;
-                    newGroupDom = true;
-                    chatFrag.appendChild(dom);
-                    currentMsgGroupDom = null;
-                } else {
-                    if (newGroupDom || !currentMsgGroupDom) {
-                        currentMsgGroupDom = createMessageGroupDom(DATA.context.getUser(msg.userId), msg.username);
-                        MSG_GROUPS.push(currentMsgGroupDom);
-                        chatFrag.appendChild(currentMsgGroupDom);
-                    }
-                    prevMsg = msg;
-                    prevMsgDom = dom;
-                    currentMsgGroupDom.content.appendChild(dom);
-                }
-                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);
-                    }
+                    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;
                 }
-                prevTs = msg.ts;
-            } else {
-                msg.removeDom();
+                return;
             }
         });
-    var isFirstPending = true;
-    PENDING_MESSAGES.forEach(function(msg) {
-        if (msg.channel === SELECTED_ROOM.id) {
-            if (isFirstPending) {
-                currentMsgGroupDom = createMessageGroupDom(SELECTED_CONTEXT.self, "");
-                chatFrag.appendChild(currentMsgGroupDom);
-                isFirstPending = false;
+        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();
             }
-            currentMsgGroupDom.content.appendChild(msg.dom);
         }
-    });
-    var content = document.getElementById(R.id.currentRoom.content);
-    //TODO lazy add dom if needed
-    content.textContent = "";
-    content.appendChild(chatFrag);
+        MSG_GROUPS.splice(currentGroup +1);
+    }
     //TODO scroll lock
+    var content = document.getElementById(R.id.currentRoom.content);
     content.scrollTop = content.scrollHeight -content.clientHeight;
     updateTitle();
     if (window.hasFocus)