add float(val?) set/get method

* to change the grid option, which will relayout widgets when gravity is back on
* renamed internal _updateCounter (number)  to _batchMode (boolean)
was never a counter to begin with.

Author: Alain Dumesny

demo/two.html

@@ -76,15 +76,17 @@ <h1>Two grids demo</h1>
 
     <div class="row">
       <div class="col-md-6">
+        <a class="btn btn-primary" id="float1" href="#">float: false</a>
         <div class="grid-stack grid-stack-6" id="grid1">
         </div>
       </div>
       <div class="col-md-6">
+        <a class="btn btn-primary" id="float2" href="#">float: true</a>
         <div class="grid-stack grid-stack-6" id="grid2">
-        </div>
-      </div>
+          </div>
     </div>
   </div>
+</div>
 
 
   <script type="text/javascript">
@@ -124,6 +126,14 @@ <h1>Two grids demo</h1>
         scroll: false,
         appendTo: 'body',
       });
+
+      $('#float1').click(function() { toggleFloat('#float1', '#grid1'); });
+      $('#float2').click(function() { toggleFloat('#float2', '#grid2'); });
+      function toggleFloat(button, grid) {
+        var grid = $(grid).data('gridstack');
+        grid.float(! grid.float());
+        $(button).html('float: ' + grid.float());
+      }
     });
   </script>
 </body>

doc/CHANGES.md

@@ -27,7 +27,7 @@ Change log
 
 ## v0.5.5-dev (upcoming changes)
 
-TBD
+- add `float(val)` to set/get the grid float mode
 
 ## v0.5.5 (2019-11-27)
 

doc/README.md

@@ -32,6 +32,7 @@ gridstack.js API
   - [enable()](#enable)
   - [enableMove(doEnable, includeNewWidgets)](#enablemovedoenable-includenewwidgets)
   - [enableResize(doEnable, includeNewWidgets)](#enableresizedoenable-includenewwidgets)
+  - [float(val?)](#floatval)
   - [getCellFromPixel(position[, useOffset])](#getcellfrompixelposition-useoffset)
   - [isAreaEmpty(x, y, width, height)](#isareaemptyx-y-width-height)
   - [locked(el, val)](#lockedel-val)
@@ -314,6 +315,12 @@ Enables/disables widget resizing. `includeNewWidgets` will force new widgets to
 grid.resizable(this.container.children('.' + this.opts.itemClass), doEnable);
 ```
 
+### float(val?)
+
+set/get floating widgets (default: `false`)
+
+- `val` - boolean to set true/false, else get the current value
+
 ### getCellFromPixel(position[, useOffset])
 
 Get the position of the cell under a pixel on screen.

spec/gridstack-engine-spec.js

@@ -83,7 +83,7 @@ describe('gridstack engine', function() {
     });
 
     beforeEach(function() {
-      engine._updateCounter = 0;
+      engine._batchMode = false;
     });
 
     it('should return all dirty nodes', function() {
@@ -94,8 +94,8 @@ describe('gridstack engine', function() {
       expect(nodes[1].idx).toEqual(2);
     });
 
-    it('should\'n clean nodes if _updateCounter > 0', function() {
-      engine._updateCounter = 1;
+    it('should\'n clean nodes if _batchMode true', function() {
+      engine._batchMode = true;
       engine.cleanNodes();
 
       expect(engine.getDirtyNodes().length).toBeGreaterThan(0);
@@ -118,12 +118,22 @@ describe('gridstack engine', function() {
     it('should work on not float grids', function() {
       expect(engine.float).toEqual(false);
       engine.batchUpdate();
-      expect(engine._updateCounter).toBeGreaterThan(0);
+      expect(engine._batchMode).toBeTrue();
       expect(engine.float).toEqual(true);
       engine.commit();
-      expect(engine._updateCounter).toEqual(0);
+      expect(engine._batchMode).toBeFalse();
       expect(engine.float).toEqual(false);
     });
+
+    it('should work on float grids', function() {
+      engine.float = true;
+      engine.batchUpdate();
+      expect(engine._batchMode).toBeTrue();
+      expect(engine.float).toEqual(true);
+      engine.commit();
+      expect(engine._batchMode).toBeFalse();
+      expect(engine.float).toEqual(true);
+    });
   });
 
   describe('test batchUpdate/commit', function() {
@@ -136,10 +146,10 @@ describe('gridstack engine', function() {
     it('should work on float grids', function() {
       expect(engine.float).toEqual(true);
       engine.batchUpdate();
-      expect(engine._updateCounter).toBeGreaterThan(0);
+      expect(engine._batchMode).toBeTrue();
       expect(engine.float).toEqual(true);
       engine.commit();
-      expect(engine._updateCounter).toEqual(0);
+      expect(engine._batchMode).toBeFalse();
       expect(engine.float).toEqual(true);
     });
   });
@@ -163,8 +173,8 @@ describe('gridstack engine', function() {
       ];
     });
 
-    it('should\'n be called if _updateCounter > 0', function() {
-      engine._updateCounter = 1;
+    it('should\'n be called if _batchMode true', function() {
+      engine._batchMode = true;
       engine._notify();
 
       expect(spy.callback).not.toHaveBeenCalled();

spec/gridstack-spec.js

@@ -15,6 +15,8 @@ describe('gridstack', function() {
     '    </div>' +
     '  </div>' +
     '</div>';
+  // generic widget with no param
+  var widgetHTML = '<div class="grid-stack-item"><div class="grid-stack-item-content"> hello </div></div>';
 
   beforeEach(function() {
     w = window;
@@ -31,13 +33,12 @@ describe('gridstack', function() {
 
     it('should set default params correctly.', function() {
       e.call(w);
-      expect(w.column).toBeUndefined();
+      expect(w.column).toEqual(12);
       expect(w.float).toBe(false);
       expect(w.maxRow).toEqual(0);
       expect(w.nodes).toEqual([]);
       expect(typeof w.onchange).toBe('function');
-      expect(w._updateCounter).toEqual(0);
-      expect(w._float).toEqual(w.float);
+      expect(w._batchMode).toBeFalse();
     });
 
     it('should set params correctly.', function() {
@@ -50,23 +51,19 @@ describe('gridstack', function() {
       expect(w.maxRow).toEqual(2);
       expect(w.nodes).toEqual(arr);
       expect(w.onchange).toEqual(fkt);
-      expect(w._updateCounter).toEqual(0);
-      expect(w._float).toEqual(w.float);
+      expect(w._batchMode).toBeFalse();
     });
-
-
   });
 
   describe('batch update', function() {
 
-    it('should set float and counter when calling batchUpdate.', function() {
+    it('should set float and batchMode when calling batchUpdate.', function() {
       e.prototype.batchUpdate.call(w);
       expect(w.float).toBe(true);
-      expect(w._updateCounter).toEqual(1);
+      expect(w._batchMode).toBeTrue();
     });
 
     //test commit function
-
   });
 
   describe('sorting of nodes', function() {
@@ -914,7 +911,6 @@ describe('gridstack', function() {
     it('should keep all widget options the same (autoPosition off', function() {
       $('.grid-stack').gridstack({float: true});
       var grid = $('.grid-stack').data('gridstack');
-      var widgetHTML = '<div class="grid-stack-item"><div class="grid-stack-item-content"></div></div>';
       var widget = grid.addWidget(widgetHTML, 6, 7, 2, 3, false, 1, 4, 2, 5, 'coolWidget');
       var $widget = $(widget);
       expect(parseInt($widget.attr('data-gs-x'), 10)).toBe(6);
@@ -927,6 +923,35 @@ describe('gridstack', function() {
       expect(parseInt($widget.attr('data-gs-min-height'), 10)).toBe(2);
       expect(parseInt($widget.attr('data-gs-max-height'), 10)).toBe(5);
       expect($widget.attr('data-gs-id')).toBe('coolWidget');
+
+      // should move widget to top with float=false
+      expect(grid.float()).toBe(true);
+      grid.float(false);
+      expect(grid.float()).toBe(false);
+      expect(parseInt($widget.attr('data-gs-x'), 10)).toBe(6);
+      expect(parseInt($widget.attr('data-gs-y'), 10)).toBe(4); // <--- from 7 to 4 below second original widget
+      expect(parseInt($widget.attr('data-gs-width'), 10)).toBe(2);
+      expect(parseInt($widget.attr('data-gs-height'), 10)).toBe(3);
+      expect($widget.attr('data-gs-auto-position')).toBe(undefined);
+      expect(parseInt($widget.attr('data-gs-min-width'), 10)).toBe(1);
+      expect(parseInt($widget.attr('data-gs-max-width'), 10)).toBe(4);
+      expect(parseInt($widget.attr('data-gs-min-height'), 10)).toBe(2);
+      expect(parseInt($widget.attr('data-gs-max-height'), 10)).toBe(5);
+      expect($widget.attr('data-gs-id')).toBe('coolWidget');
+
+      // should not move again (no-op)
+      grid.float(true);
+      expect(grid.float()).toBe(true);
+      expect(parseInt($widget.attr('data-gs-x'), 10)).toBe(6);
+      expect(parseInt($widget.attr('data-gs-y'), 10)).toBe(4);
+      expect(parseInt($widget.attr('data-gs-width'), 10)).toBe(2);
+      expect(parseInt($widget.attr('data-gs-height'), 10)).toBe(3);
+      expect($widget.attr('data-gs-auto-position')).toBe(undefined);
+      expect(parseInt($widget.attr('data-gs-min-width'), 10)).toBe(1);
+      expect(parseInt($widget.attr('data-gs-max-width'), 10)).toBe(4);
+      expect(parseInt($widget.attr('data-gs-min-height'), 10)).toBe(2);
+      expect(parseInt($widget.attr('data-gs-max-height'), 10)).toBe(5);
+      expect($widget.attr('data-gs-id')).toBe('coolWidget');
     });
   });
 
@@ -940,7 +965,6 @@ describe('gridstack', function() {
     it('should change x, y coordinates for widgets.', function() {
       $('.grid-stack').gridstack({float: true});
       var grid = $('.grid-stack').data('gridstack');
-      var widgetHTML = '<div class="grid-stack-item"><div class="grid-stack-item-content"></div></div>';
       var widget = grid.addWidget(widgetHTML, 9, 7, 2, 3, true);
       var $widget = $(widget);
       expect(parseInt($widget.attr('data-gs-x'), 10)).not.toBe(9);
@@ -958,7 +982,6 @@ describe('gridstack', function() {
     it('should keep all widget options the same (autoPosition off)', function() {
       $('.grid-stack').gridstack();
       var grid = $('.grid-stack').data('gridstack');
-      var widgetHTML = '<div class="grid-stack-item"><div class="grid-stack-item-content"></div></div>';
       var widget = grid.addWidget(widgetHTML, {x: 8, height: 2, id: 'optionWidget'});
       var $widget = $(widget);
       expect(parseInt($widget.attr('data-gs-x'), 10)).toBe(8);
@@ -983,7 +1006,6 @@ describe('gridstack', function() {
     it('should use default', function() {
       $('.grid-stack').gridstack();
       var grid = $('.grid-stack').data('gridstack');
-      var widgetHTML = '<div class="grid-stack-item"><div class="grid-stack-item-content"></div></div>';
       var widget = grid.addWidget(widgetHTML, {x: 'foo', height: null, width: 'bar', height: ''});
       var $widget = $(widget);
       expect(parseInt($widget.attr('data-gs-x'), 10)).toBe(8);
@@ -1011,6 +1033,28 @@ describe('gridstack', function() {
     });
   });
 
+  describe('method float()', function() {
+    beforeEach(function() {
+      document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
+    });
+    afterEach(function() {
+      document.body.removeChild(document.getElementById('gs-cont'));
+    });
+    it('should match true/false only', function() {
+      $('.grid-stack').gridstack({float: true});
+      var grid = $('.grid-stack').data('gridstack');
+      expect(grid.float()).toBe(true);
+      grid.float(0);
+      expect(grid.float()).toBe(false);
+      grid.float(null);
+      expect(grid.float()).toBe(false);
+      grid.float(undefined);
+      expect(grid.float()).toBe(false);
+      grid.float(false);
+      expect(grid.float()).toBe(false);
+    });
+  });
+
   describe('grid.destroy', function() {
     beforeEach(function() {
       document.body.insertAdjacentHTML('afterbegin', gridstackHTML);

src/gridstack.d.ts

@@ -142,6 +142,19 @@ interface GridStack {
    */
   enableResize(doEnable: boolean, includeNewWidgets: boolean): void;
 
+  /**
+   * enable/disable floating widgets (default: `false`) See [example](http://gridstackjs.com/demo/float.html)
+   * @param mode 
+   */
+  float(mode: boolean): void;
+  
+  /**
+   * get the current float mode
+   */
+  float(): boolean;
+
+
+
   /**
    * Get the position of the cell under a pixel on screen.
    * @param position the position of the pixel to resolve in
@@ -263,8 +276,9 @@ interface GridStack {
 
   /**
    * (Experimental) Modify number of columns in the grid. Will attempt to update existing widgets
-   * to conform to new number of columns. Requires `gridstack-extra.css` or `gridstack-extra.min.css`.
-   * @param column - Integer between 1 and 12.
+   * to conform to new number of columns. Requires `gridstack-extra.css` or `gridstack-extra.min.css` for [1-11],
+   * else you will need to generate correct CSS (see https://github.com/gridstack/gridstack.js#change-grid-columns)
+   * @param column - Integer > 0 (default 12).
    * @param doNotPropagate if true existing widgets will not be updated (optional) 
    */
   setColumn(column: number, doNotPropagate ? : boolean): void;