Further updates to post partial replacement

boards/static/js/thread_update.js

@@ -30,6 +30,13 b' var POST_UPDATED = 1;'
 
 var JS_AUTOUPDATE_PERIOD = 20000;
 
+var ALLOWED_FOR_PARTIAL_UPDATE = [
+    'refmap',
+    'post-info'
+];
+
+var ATTR_CLASS = 'class';
+
 var wsUser = '';
 
 var unreadPosts = 0;
@@ -165,7 +172,8 b' function updatePost(postHtml) {'
     var type;
 
     if (existingPosts.size() > 0) {
-        existingPosts.first().replaceWith(post);
+        replacePartial(existingPosts.first(), post, false);
+        post = existingPosts.first();
 
         type = POST_UPDATED;
     } else {
@@ -362,13 +370,16 b' function processNewPost(post) {'
     blink(post);
 }
 
-function replacePartial(oldNode, newNode) {
-    var oldContent = oldNode[0].outerHTML;
-    var newContent = newNode[0].outerHTML;
+function replacePartial(oldNode, newNode, recursive) {
+    if (!equalNodes(oldNode, newNode)) {
+        // Update parent node class attribute
+        var oldClass = oldNode.attr(ATTR_CLASS);
+        var newClass = newNode.attr(ATTR_CLASS);
+        if (oldClass != newClass) {
+            oldNode.attr(ATTR_CLASS, newClass);
+        };
 
-    // TODO Handle different children sizes
-
-    if (oldContent != newContent) {
+        // Replace children
         var children = oldNode.children();
         if (children.length == 0) {
             console.log(oldContent);
@@ -377,13 +388,38 b' function replacePartial(oldNode, newNode'
             oldNode.replaceWith(newNode);
         } else {
             var newChildren = newNode.children();
-            children.each(function(i) {
-                replacePartial(children.eq(i), newChildren.eq(i));
+            newChildren.each(function(i) {
+                var newChild = newChildren.eq(i);
+                var newChildClass = newChild.attr(ATTR_CLASS);
+
+                // Update only certain allowed blocks (e.g. not images)
+                if (ALLOWED_FOR_PARTIAL_UPDATE.indexOf(newChildClass) > -1) {
+                    var oldChild = oldNode.children('.' + newChildClass);
+
+                    if (oldChild.length == 0) {
+                        oldNode.append(newChild);
+                    } else {
+                        if (!equalNodes(oldChild, newChild)) {
+                            if (recursive) {
+                                replacePartial(oldChild, newChild, false);
+                            } else {
+                                oldChild.replaceWith(newChild);
+                            }
+                        }
+                    }
+                }
             });
         }
     }
 }
 
+/**
+ * Compare nodes by content
+ */
+function equalNodes(node1, node2) {
+    return node1[0].outerHTML == node2[0].outerHTML;
+}
+
 $(document).ready(function(){
     if (initAutoupdate()) {
         // Post form data over AJAX