Merge commit '8faecc91769cd43431524065ea35bac10ee33cb5'

Author: radiolips

demo/two.html

@@ -42,12 +42,21 @@
         .grid-stack-item-removing {
             opacity: 0.5;
         }
+
+        .trash {
+            height: 150px;
+            margin-bottom: 20px;
+            background: rgba(255, 0, 0, 0.1) center center url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDQzOC41MjkgNDM4LjUyOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDM4LjUyOSA0MzguNTI5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTQxNy42ODksNzUuNjU0Yy0xLjcxMS0xLjcwOS0zLjkwMS0yLjU2OC02LjU2My0yLjU2OGgtODguMjI0TDMwMi45MTcsMjUuNDFjLTIuODU0LTcuMDQ0LTcuOTk0LTEzLjA0LTE1LjQxMy0xNy45ODkgICAgQzI4MC4wNzgsMi40NzMsMjcyLjU1NiwwLDI2NC45NDUsMGgtOTEuMzYzYy03LjYxMSwwLTE1LjEzMSwyLjQ3My0yMi41NTQsNy40MjFjLTcuNDI0LDQuOTQ5LTEyLjU2MywxMC45NDQtMTUuNDE5LDE3Ljk4OSAgICBsLTE5Ljk4NSw0Ny42NzZoLTg4LjIyYy0yLjY2NywwLTQuODUzLDAuODU5LTYuNTY3LDIuNTY4Yy0xLjcwOSwxLjcxMy0yLjU2OCwzLjkwMy0yLjU2OCw2LjU2N3YxOC4yNzQgICAgYzAsMi42NjQsMC44NTUsNC44NTQsMi41NjgsNi41NjRjMS43MTQsMS43MTIsMy45MDQsMi41NjgsNi41NjcsMi41NjhoMjcuNDA2djI3MS44YzAsMTUuODAzLDQuNDczLDI5LjI2NiwxMy40MTgsNDAuMzk4ICAgIGM4Ljk0NywxMS4xMzksMTkuNzAxLDE2LjcwMywzMi4yNjQsMTYuNzAzaDIzNy41NDJjMTIuNTY2LDAsMjMuMzE5LTUuNzU2LDMyLjI2NS0xNy4yNjhjOC45NDUtMTEuNTIsMTMuNDE1LTI1LjE3NCwxMy40MTUtNDAuOTcxICAgIFYxMDkuNjI3aDI3LjQxMWMyLjY2MiwwLDQuODUzLTAuODU2LDYuNTYzLTIuNTY4YzEuNzA4LTEuNzA5LDIuNTctMy45LDIuNTctNi41NjRWODIuMjIxICAgIEM0MjAuMjYsNzkuNTU3LDQxOS4zOTcsNzcuMzY3LDQxNy42ODksNzUuNjU0eiBNMTY5LjMwMSwzOS42NzhjMS4zMzEtMS43MTIsMi45NS0yLjc2Miw0Ljg1My0zLjE0aDkwLjUwNCAgICBjMS45MDMsMC4zODEsMy41MjUsMS40Myw0Ljg1NCwzLjE0bDEzLjcwOSwzMy40MDRIMTU1LjMxMUwxNjkuMzAxLDM5LjY3OHogTTM0Ny4xNzMsMzgwLjI5MWMwLDQuMTg2LTAuNjY0LDguMDQyLTEuOTk5LDExLjU2MSAgICBjLTEuMzM0LDMuNTE4LTIuNzE3LDYuMDg4LTQuMTQxLDcuNzA2Yy0xLjQzMSwxLjYyMi0yLjQyMywyLjQyNy0yLjk5OCwyLjQyN0gxMDAuNDkzYy0wLjU3MSwwLTEuNTY1LTAuODA1LTIuOTk2LTIuNDI3ICAgIGMtMS40MjktMS42MTgtMi44MS00LjE4OC00LjE0My03LjcwNmMtMS4zMzEtMy41MTktMS45OTctNy4zNzktMS45OTctMTEuNTYxVjEwOS42MjdoMjU1LjgxNVYzODAuMjkxeiIgZmlsbD0iI2ZmOWNhZSIvPgoJCTxwYXRoIGQ9Ik0xMzcuMDQsMzQ3LjE3MmgxOC4yNzFjMi42NjcsMCw0Ljg1OC0wLjg1NSw2LjU2Ny0yLjU2N2MxLjcwOS0xLjcxOCwyLjU2OC0zLjkwMSwyLjU2OC02LjU3VjE3My41ODEgICAgYzAtMi42NjMtMC44NTktNC44NTMtMi41NjgtNi41NjdjLTEuNzE0LTEuNzA5LTMuODk5LTIuNTY1LTYuNTY3LTIuNTY1SDEzNy4wNGMtMi42NjcsMC00Ljg1NCwwLjg1NS02LjU2NywyLjU2NSAgICBjLTEuNzExLDEuNzE0LTIuNTY4LDMuOTA0LTIuNTY4LDYuNTY3djE2NC40NTRjMCwyLjY2OSwwLjg1NCw0Ljg1MywyLjU2OCw2LjU3QzEzMi4xODYsMzQ2LjMxNiwxMzQuMzczLDM0Ny4xNzIsMTM3LjA0LDM0Ny4xNzJ6IiBmaWxsPSIjZmY5Y2FlIi8+CgkJPHBhdGggZD0iTTIxMC4xMjksMzQ3LjE3MmgxOC4yNzFjMi42NjYsMCw0Ljg1Ni0wLjg1NSw2LjU2NC0yLjU2N2MxLjcxOC0xLjcxOCwyLjU2OS0zLjkwMSwyLjU2OS02LjU3VjE3My41ODEgICAgYzAtMi42NjMtMC44NTItNC44NTMtMi41NjktNi41NjdjLTEuNzA4LTEuNzA5LTMuODk4LTIuNTY1LTYuNTY0LTIuNTY1aC0xOC4yNzFjLTIuNjY0LDAtNC44NTQsMC44NTUtNi41NjcsMi41NjUgICAgYy0xLjcxNCwxLjcxNC0yLjU2OCwzLjkwNC0yLjU2OCw2LjU2N3YxNjQuNDU0YzAsMi42NjksMC44NTQsNC44NTMsMi41NjgsNi41N0MyMDUuMjc0LDM0Ni4zMTYsMjA3LjQ2NSwzNDcuMTcyLDIxMC4xMjksMzQ3LjE3MnogICAgIiBmaWxsPSIjZmY5Y2FlIi8+CgkJPHBhdGggZD0iTTI4My4yMiwzNDcuMTcyaDE4LjI2OGMyLjY2OSwwLDQuODU5LTAuODU1LDYuNTctMi41NjdjMS43MTEtMS43MTgsMi41NjItMy45MDEsMi41NjItNi41N1YxNzMuNTgxICAgIGMwLTIuNjYzLTAuODUyLTQuODUzLTIuNTYyLTYuNTY3Yy0xLjcxMS0xLjcwOS0zLjkwMS0yLjU2NS02LjU3LTIuNTY1SDI4My4yMmMtMi42NywwLTQuODUzLDAuODU1LTYuNTcxLDIuNTY1ICAgIGMtMS43MTEsMS43MTQtMi41NjYsMy45MDQtMi41NjYsNi41Njd2MTY0LjQ1NGMwLDIuNjY5LDAuODU1LDQuODUzLDIuNTY2LDYuNTdDMjc4LjM2NywzNDYuMzE2LDI4MC41NSwzNDcuMTcyLDI4My4yMiwzNDcuMTcyeiIgZmlsbD0iI2ZmOWNhZSIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=) no-repeat;
+        }
     </style>
 </head>
 <body>
     <div class="container-fluid">
         <h1>Two grids demo</h1>
 
+        <div class="trash">
+        </div>
+
         <div class="row">
             <div class="col-md-6">
                 <div class="grid-stack grid-stack-6" id="grid1">
@@ -66,7 +75,8 @@ <h1>Two grids demo</h1>
             var options = {
                 width: 6,
                 float: true,
-                removable: true
+                removable: '.trash',
+                removeTimeout: 100
             };
             $('#grid1').gridstack(options);
             $('#grid2').gridstack(options);

dist/gridstack.js

@@ -664,6 +664,30 @@
 
         $(window).resize(this.onResizeHandler);
         this.onResizeHandler();
+
+        if (typeof self.opts.removable === 'string') {
+            var trashZone = $(self.opts.removable);
+            if (!trashZone.data('droppable')) {
+                trashZone.droppable({});
+            }
+            trashZone
+                .on('dropover', function(event, ui) {
+                    var el = $(ui.draggable);
+                    var node = el.data('_gridstack_node');
+                    if (node._grid !== self) {
+                        return;
+                    }
+                    self._setupRemovingTimeout(el);
+                })
+                .on('dropout', function(event, ui) {
+                    var el = $(ui.draggable);
+                    var node = el.data('_gridstack_node');
+                    if (node._grid !== self) {
+                        return;
+                    }
+                    self._clearRemovingTimeout(el);
+                });
+        }
     };
 
     GridStack.prototype._triggerChangeEvent = function(forceTrigger) {
@@ -799,6 +823,32 @@
             this.opts.minWidth;
     };
 
+    GridStack.prototype._setupRemovingTimeout = function(el) {
+        var self = this;
+        var node = $(el).data('_gridstack_node');
+
+        if (node._removeTimeout || !self.opts.removable) {
+            return;
+        }
+        node._removeTimeout = setTimeout(function() {
+            el.addClass('grid-stack-item-removing');
+            node._isAboutToRemove = true;
+        }, self.opts.removeTimeout);
+    };
+
+    GridStack.prototype._clearRemovingTimeout = function(el) {
+        var self = this;
+        var node = $(el).data('_gridstack_node');
+
+        if (!node._removeTimeout) {
+            return;
+        }
+        clearTimeout(node._removeTimeout);
+        node._removeTimeout = null;
+        el.removeClass('grid-stack-item-removing');
+        node._isAboutToRemove = false;
+    };
+
     GridStack.prototype._prepareElement = function(el, triggerAddEvent) {
         triggerAddEvent = typeof triggerAddEvent != 'undefined' ? triggerAddEvent : false;
         var self = this;
@@ -819,32 +869,13 @@
             noMove: Utils.toBool(el.attr('data-gs-no-move')),
             locked: Utils.toBool(el.attr('data-gs-locked')),
             el: el,
-            id: el.attr('data-gs-id')
+            id: el.attr('data-gs-id'),
+            _grid: self
         }, triggerAddEvent);
         el.data('_gridstack_node', node);
 
         var cellWidth;
         var cellHeight;
-        var removeTimeout;
-
-        var setupRemovingTimeout = function() {
-            if (removeTimeout || !self.opts.removable) {
-                return;
-            }
-            removeTimeout = setTimeout(function() {
-                el.addClass('grid-stack-item-removing');
-                node._isAboutToRemove = true;
-            }, self.opts.removeTimeout);
-        };
-        var clearRemovingTimeout = function() {
-            if (!removeTimeout) {
-                return;
-            }
-            clearTimeout(removeTimeout);
-            removeTimeout = null;
-            el.removeClass('grid-stack-item-removing');
-            node._isAboutToRemove = false;
-        };
 
         var dragOrResize = function(event, ui) {
             var x = Math.round(ui.position.left / cellWidth);
@@ -859,7 +890,9 @@
 
             if (event.type == 'drag') {
                 if (x < 0 || x >= self.grid.width || y < 0) {
-                    setupRemovingTimeout();
+                    if (self.opts.removable === true) {
+                        self._setupRemovingTimeout(el);
+                    }
 
                     x = node._beforeDragX;
                     y = node._beforeDragY;
@@ -871,7 +904,7 @@
 
                     node._temporaryRemoved = true;
                 } else {
-                    clearRemovingTimeout();
+                    self._clearRemovingTimeout(el);
 
                     if (node._temporaryRemoved) {
                         self.grid.addNode(node);
@@ -937,7 +970,7 @@
                 el.removeData('_gridstack_node');
                 el.remove();
             } else {
-                clearRemovingTimeout();
+                self._clearRemovingTimeout(el);
                 if (!node._temporaryRemoved) {
                     o
                         .attr('data-gs-x', node.x)

dist/gridstack.min.js

@@ -77,7 +77,7 @@ gridstack.js API
 - `placeholderClass` - class for placeholder (default: `'grid-stack-placeholder'`)
 - `placeholderText` - placeholder default content (default: `''`)
 - `resizable` - allows to override jQuery UI resizable options. (default: `{autoHide: true, handles: 'se'}`)
-- `removable` - if `true` widgets could be removed by dragging outside of the grid (default: `false`)
+- `removable` - if `true` widgets could be removed by dragging outside of the grid. It could also be a jQuery selector string, in this case widgets will be removed by dropping them there (default: `false`) See [example](http://troolee.github.io/gridstack.js/demo/two.html)
 - `removeTimeout` - time in milliseconds before widget is being removed while dragging outside of the grid. (default: `2000`)
 - `rtl` - if `true` turns grid to RTL. Possible values are `true`, `false`, `'auto'` (default: `'auto'`) See [example](http://troolee.github.io/gridstack.js/demo/rtl.html)
 - `staticGrid` - makes grid static (default `false`). If true widgets are not movable/resizable. You don't even need jQueryUI draggable/resizable.  A CSS class `grid-stack-static` is also added to the container.

dist/gridstack.min.map

@@ -108,6 +108,42 @@ describe('gridstack engine', function() {
         });
     });
 
+    describe('test batchUpdate/commit', function () {
+        var engine;
+
+        beforeAll(function () {
+            engine = new GridStackUI.Engine(12)
+        });
+
+        it('should work on not float grids', function () {
+            expect(engine.float).toEqual(false);
+            engine.batchUpdate();
+            expect(engine._updateCounter).toBeGreaterThan(0);
+            expect(engine.float).toEqual(true);
+            engine.commit();
+            expect(engine._updateCounter).toEqual(0);
+            expect(engine.float).toEqual(false);
+        });
+    });
+
+    describe('test batchUpdate/commit', function () {
+        var engine;
+
+        beforeAll(function () {
+            engine = new GridStackUI.Engine(12, null, true)
+        });
+
+        it('should work on float grids', function () {
+            expect(engine.float).toEqual(true);
+            engine.batchUpdate();
+            expect(engine._updateCounter).toBeGreaterThan(0);
+            expect(engine.float).toEqual(true);
+            engine.commit();
+            expect(engine._updateCounter).toEqual(0);
+            expect(engine.float).toEqual(true);
+        });
+    });
+
     describe('test _notify', function() {
         var engine;
         var spy;
@@ -157,4 +193,76 @@ describe('gridstack engine', function() {
             ]);
         });
     });
+
+    describe('test _packNodes', function () {
+        describe('using not float mode', function () {
+            var engine;
+
+            var findNode = function (engine, id) {
+                return _.find(engine.nodes, function(i) { return i._id === id });
+            }
+
+            beforeEach(function () {
+                engine = new GridStackUI.Engine(12, null, false);
+            });
+
+            it('shouldn\'t pack one node with y coord eq 0', function () {
+                engine.nodes = [
+                    {x: 0, y: 0, width: 1, height: 1, _id: 1},
+                ];
+
+                engine._packNodes();
+
+                expect(findNode(engine, 1)).toEqual(jasmine.objectContaining({x: 0, y: 0, width: 1, height: 1}));
+                expect(findNode(engine, 1)._dirty).toBeFalsy();
+            });
+
+            it('should pack one node correctly', function () {
+                engine.nodes = [
+                    {x: 0, y: 1, width: 1, height: 1, _id: 1},
+                ];
+
+                engine._packNodes();
+
+                expect(findNode(engine, 1)).toEqual(jasmine.objectContaining({x: 0, y: 0, width: 1, height: 1, _dirty: true}));
+            });
+
+            it('should pack nodes correctly', function () {
+                engine.nodes = [
+                    {x: 0, y: 1, width: 1, height: 1, _id: 1},
+                    {x: 0, y: 5, width: 1, height: 1, _id: 2},
+                ];
+
+                engine._packNodes();
+
+                expect(findNode(engine, 1)).toEqual(jasmine.objectContaining({x: 0, y: 0, width: 1, height: 1, _dirty: true}));
+                expect(findNode(engine, 2)).toEqual(jasmine.objectContaining({x: 0, y: 1, width: 1, height: 1, _dirty: true}));
+            });
+
+            it('should pack nodes correctly', function () {
+                engine.nodes = [
+                    {x: 0, y: 5, width: 1, height: 1, _id: 1},
+                    {x: 0, y: 1, width: 1, height: 1, _id: 2},
+                ];
+
+                engine._packNodes();
+
+                expect(findNode(engine, 2)).toEqual(jasmine.objectContaining({x: 0, y: 0, width: 1, height: 1, _dirty: true}));
+                expect(findNode(engine, 1)).toEqual(jasmine.objectContaining({x: 0, y: 1, width: 1, height: 1, _dirty: true}));
+            });
+
+            it('should respect locked nodes', function () {
+                engine.nodes = [
+                    {x: 0, y: 1, width: 1, height: 1, _id: 1, locked: true},
+                    {x: 0, y: 5, width: 1, height: 1, _id: 2},
+                ];
+
+                engine._packNodes();
+
+                expect(findNode(engine, 1)).toEqual(jasmine.objectContaining({x: 0, y: 1, width: 1, height: 1}));
+                expect(findNode(engine, 1)._dirty).toBeFalsy();
+                expect(findNode(engine, 2)).toEqual(jasmine.objectContaining({x: 0, y: 2, width: 1, height: 1, _dirty: true}));
+            });
+        });
+    });
 });