update gridstack

troolee · troolee · commit ff9136cd87a8 · 2014-12-04T20:52:38.000-08:00
diff --git a/gridstack.css b/gridstack.css
@@ -88,7 +88,6 @@
 .grid-stack-item[data-gs-x="2"]  { left: 16.66666667% }
 .grid-stack-item[data-gs-x="1"]  { left: 8.33333333% }
 
-
 @media (max-width: 768px) {
     .grid-stack-item {
         position: relative !important;
@@ -102,3 +101,20 @@
         height: auto !important;
     }
 }
+
+.grid-stack.grid-stack-animate .grid-stack-item {
+    -webkit-transition: left .3s, top .3s, height .3s, width .3s;
+    -moz-transition: left .3s, top .3s, height .3s, width .3s;
+    -o-transition: left .3s, top .3s, height .3s, width .3s;
+    -ms-transition: left .3s, top .3s, height .3s, width .3s;
+    transition: left .3s, top .3s, height .3s, width .3s;
+}
+/*Don't animate the placeholder or when dragging/resizing*/
+.grid-stack.grid-stack-animate .grid-stack-item.ui-draggable-dragging,
+.grid-stack.grid-stack-animate .grid-stack-item.ui-resizable-resizing,
+.grid-stack.grid-stack-animate .grid-stack-item.grid-stack-placeholder{
+    -webkit-transition: left .0s, top .0s, height .0s, width .0s;
+    -moz-transition: left .0s, top .0s, height .0s, width .0s;
+    -o-transition: left .0s, top .0s, height .0s, width .0s;
+    transition:  left .0s, top .0s, height .0s, width .0s;
+}
diff --git a/gridstack.js b/gridstack.js
@@ -283,7 +283,8 @@
             auto: true,
             min_width: 768,
             float: false,
-            _class: 'grid-stack-' + (Math.random() * 10000).toFixed(0)
+            _class: 'grid-stack-' + (Math.random() * 10000).toFixed(0),
+            animate: Boolean(this.container.attr('data-gs-animate')) || false
         });
 
         this.container.addClass(this.opts._class);
@@ -324,6 +325,8 @@
             });
         }
 
+        this.set_animation(this.opts.animate);
+
         this.placeholder = $('<div class="' + this.opts.placeholder_class + ' ' + this.opts.item_class + '"><div class="placeholder-content" /></div>').hide();
         this.container.append(this.placeholder);
         this.container.height((this.grid.get_grid_height()) * (this.opts.cell_height + this.opts.vertical_margin) - this.opts.vertical_margin);
@@ -427,10 +430,12 @@
             self.grid.end_update();
 
             self.grid._sort_nodes();
-            _.each(self.grid.nodes, function (node) {
-                node.el.detach();
-                self.container.append(node.el);
-            });
+            setTimeout(function() { //if animating, delay detaching & reattaching all elements until animation finishes
+                _.each(self.grid.nodes, function (node) {
+                    node.el.detach();
+                    self.container.append(node.el);
+                });
+            }, (self.opts.animate ? 300 : 0));
         };
 
         el.draggable({
@@ -477,6 +482,15 @@
         }
     };
 
+    GridStack.prototype.set_animation = function (enable) {
+        if (enable) {
+            this.container.addClass('grid-stack-animate');
+        }
+        else {
+            this.container.removeClass('grid-stack-animate');
+        }
+    }
+
     GridStack.prototype.add_widget = function (el, x, y, width, height, auto_position) {
         el = $(el);
         if (typeof x != 'undefined') el.attr('data-gs-x', x);
diff --git a/index.html b/index.html
@@ -106,7 +106,7 @@ <h2>Demo</h2>
                 </div>
             </div>
 
-            <div class="grid-stack" data-gs-width="12">
+            <div class="grid-stack" data-gs-width="12" data-gs-animate="yes">
                 <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="2"><div class="grid-stack-item-content">1</div></div>
                 <div class="grid-stack-item" data-gs-x="4" data-gs-y="0" data-gs-width="4" data-gs-height="4"><div class="grid-stack-item-content">2</div></div>
                 <div class="grid-stack-item" data-gs-x="8" data-gs-y="0" data-gs-width="2" data-gs-height="2" data-gs-min-width="2" data-gs-no-resize="yes"><div class="grid-stack-item-content"> <span class="fa fa-hand-o-up"></span> Drag me! </div></div>
