Improved insertion order of new nodes

public/javascripts/views/list.js

@@ -27,7 +27,7 @@ define(
 
                 this.listenTo(this.collection, 'add', this.renderTask);
 
-                /** Load demo data and warn users **/
+                /** Load demo data **/
                 function loadDemoData() {
                     for (var i = 0; i < demoData.length; i++) {
                         var task = Tasks.add(demoData[i]);
@@ -44,7 +44,7 @@ define(
                 this.collection.fetch({
                     success: success,
                     error: function () {
-                        // switch to localforage database if server isn't present
+                        // switch to localforage database if server isn't present and fetch again
                         window.hackflowyOffline=true;
                         $('#header').append('<div class="alert-box secondary round">Running in offline mode, data may be lost </div>');
                         Tasks.fetch({
@@ -67,18 +67,30 @@ define(
                 });
                 var a = taskView.render();
                 if (a.model.get('parentId') === 0) {
+                    // inset it at the end of the root list
                     this.$el.append(a.el);
                 } else {
+                    // insert after the currently edited sibling (same parent)
+                    // or after the last sibling
                     var parent = $('*[data-id="' + a.model.get('parentId') + '"]');
-                    if (parent.length === 0) {
+                    var siblings = $('*[data-parent-id="' + a.model.get('parentId') + '"]').parents('li')
+                    if (siblings.length>0){
+                        var editingSibling = siblings.filter('.editing')
+                        var lastSibling = siblings.filter(':last');
+                        if (editingSibling)
+                            a.$el.insertAfter(editingSibling);
+                        else
+                            a.$el.insertAfter(lastSibling);
+                    }
+                    else if (parent.length < 0) {
+                        a.$el.insertAfter(parent.parents('li:first'));
+                    } else {
                         // TODO deal with loading order
                         console.error("Parent not rendered yet: ", {
                             selector: parent.selector,
                             task: task
                         });
                         this.$el.append(a.el);
-                    } else {
-                        a.$el.insertBefore(parent.parents('li:first'));
                     }
                 }
             }

public/templates/task.html

@@ -17,9 +17,9 @@
     </div>
 
     <%  if(model.isCompleted){%>
-      <input value="<%= model.content %>" data-id="<%= model.id %>" class="edit task-completed">
+      <input value="<%= model.content %>" data-id="<%= model.id %>" data-parent-id="<%= model.parentId %>" data-priority="<%= model.priority %>" class="edit task-completed">
     <%}else {%>
-      <input value="<%= model.content %>" data-id="<%= model.id %>" class="edit">
+      <input value="<%= model.content %>" data-id="<%= model.id %>" data-parent-id="<%= model.parentId %>" data-priority="<%= model.priority %>" class="edit">
     <%}%>
   </div>
 </div>