add CreateItemInBetween();

.gitignore

@@ -1,4 +1,5 @@
 assets
+sketch
 deploy
 .DS_Store
 test.sh

css/style.less

@@ -369,7 +369,7 @@ html, body {
     .inner {
         .transform-style(preserve-3d);
         .transition(.3s @ease);
-        .transform(translate3d(0, 0, -@itemHeight / 2 + 5px));
+        .transform(translate3d(0, -@itemHeight / 2, -@itemHeight / 2 + 5px));
         height: 100%;
     }
     .unfold {

index.html

@@ -41,6 +41,7 @@
 		<script src="js/db.js"></script>
 		<script src="js/touch.js"></script>
 		<script src="js/item.js"></script>
+		<script src="js/unfold-dummy.js"></script>
 		<script src="js/collection.js"></script>
 		<script src="js/list-collection.js"></script>
 		<script src="js/list-item.js"></script>

js/collection.js

@@ -513,6 +513,57 @@ C.Collection = (function (raf) {
         },
 
         createItemInBetween: function () {
+
+            var newData = {
+                title: '',
+                order: this.count
+            };
+
+            C.db.addItem(newData, this.data);
+
+            var newItem = this.addItem(newData);
+            this.updateColor();
+            this.updateBounds();
+
+            // push done items 1 slot down
+            var i = this.items.length,
+                item;
+
+            while (i--) {
+                item = this.items[i];
+                if (item.data.done) {
+                    item.data.order++;
+                    item.moveY(item.y + C.ITEM_HEIGHT);
+                }
+            }
+
+            // dummy
+            var lastUndone = this.getItemByOrder(this.count - 1),
+                color = lastUndone.el.find('.slider').css('background-color'),
+                dummy = new C.UnfoldDummy({
+                    order: this.count,
+                    color: color
+                });
+            this.el.append(dummy.el);
+
+            newItem.el
+                .addClass('drag')
+                .css('opacity', .01); // hack hack hack...
+            newItem.el.find('.field').show().focus();
+
+            setTimeout(function () {
+                dummy.el.addClass('open');
+                dummy.el.on(C.client.transitionEndEvent, function () {
+                    dummy.el.off(C.client.transitionEndEvent);
+                    newItem.el.css('opacity', '');
+                    setTimeout(function () {
+                        newItem.el.removeClass('drag')
+                        newItem.onEditStart();
+                        dummy.el.remove();
+                        dummy = null;
+                    }, 0);
+                });
+            }, 0);
 
         },
 

js/unfold-dummy.js

@@ -3,22 +3,26 @@ C.UnfoldDummy = function (options) {
     this.el = $('<div class="item unfold-dummy">\
         <div class="inner">\
             <div class="unfold top">\
-                <div class="item" style="padding-left: 12px"></div>
+                <div class="item" style="padding-left: 12px"></div>\
             </div>\
             <div class="unfold bot">\
-                <div class="item" style="padding-left: 12px"></div>
+                <div class="item" style="padding-left: 12px"></div>\
             </div>\
-        </div>\
-    ')
+        </div>');
 
-    this.top = this.el.find('.top')
-    this.bot = this.el.find('.bot')
-    this.content = this.el.find('.item')
+    this.style = this.el[0].style;
 
-}
+    this.top = this.el.find('.top');
+    this.bot = this.el.find('.bot');
+    this.content = this.el.find('.item');
 
-C.UnfoldDummy.prototype = {
+    if (options.content) {
+        this.content.text(options.content);
+    }
 
+    this.content.css('background-color', options.color);
+    this.moveY((options.order - 1) * C.ITEM_HEIGHT - 1);
 
+};
 
-}
+C.UnfoldDummy.prototype.moveY = C.Item.moveY;