Merge pull request #342 from radiolips/feature/227/Change-grid-columns

Feature/227/change grid columns

README.md

@@ -443,6 +443,7 @@ Changes
 - `'auto'` value for `cellHeight` option
 - fix `setStatic` method
 - add `setAnimation` method to API
+- add `setGridWidth` method ([#227](https://github.com/troolee/gridstack.js/issues/227))
 
 #### v0.2.4 (2016-02-15)
 

dist/gridstack.js

@@ -1256,6 +1256,25 @@
         }
     };
 
+    GridStack.prototype._updateNodeWidths = function(oldWidth, newWidth) {
+        this.grid._sortNodes();
+        this.grid.batchUpdate();
+        var node = {};
+        for (var i = 0; i < this.grid.nodes.length; i++) {
+            node = this.grid.nodes[i];
+            this.update(node.el, Math.round(node.x * newWidth / oldWidth), undefined,
+                Math.round(node.width * newWidth / oldWidth), undefined);
+        }
+        this.grid.commit();
+    };
+
+    GridStack.prototype.setGridWidth = function(gridWidth) {
+        this.container.removeClass('grid-stack-' + this.opts.width);
+        this._updateNodeWidths(this.opts.width, gridWidth);
+        this.opts.width = gridWidth;
+        this.container.addClass('grid-stack-' + gridWidth);
+    };
+
     // jscs:disable requireCamelCaseOrUpperCaseIdentifiers
     GridStackEngine.prototype.batch_update = obsolete(GridStackEngine.prototype.batchUpdate);
     GridStackEngine.prototype._fix_collisions = obsolete(GridStackEngine.prototype._fixCollisions,

doc/README.md

@@ -43,6 +43,7 @@ gridstack.js API
   - [resize(el, width, height)](#resizeel-width-height)
   - [resizable(el, val)](#resizableel-val)
   - [setAnimation(doAnimate)](#setanimationdoanimate)
+  - [setGridWidth(gridWidth)](#setgridwidthgridwidth)
   - [setStatic(staticValue)](#setstaticstaticvalue)
   - [update(el, x, y, width, height)](#updateel-x-y-width-height)
   - [willItFit(x, y, width, height, autoPosition)](#willitfitx-y-width-height-autoposition)
@@ -372,6 +373,12 @@ Toggle the grid animation state.  Toggles the `grid-stack-animate` class.
 
 - `doAnimate` - if `true` the grid will animate.
 
+### setGridWidth(gridWidth)
+
+(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`.
+
+- `gridWidth` - Integer between 1 and 12.
+
 ### setStatic(staticValue)
 
 Toggle the grid static state.  Also toggle the `grid-stack-static` class.

src/gridstack.js

@@ -1256,6 +1256,25 @@
         }
     };
 
+    GridStack.prototype._updateNodeWidths = function(oldWidth, newWidth) {
+        this.grid._sortNodes();
+        this.grid.batchUpdate();
+        var node = {};
+        for (var i = 0; i < this.grid.nodes.length; i++) {
+            node = this.grid.nodes[i];
+            this.update(node.el, Math.round(node.x * newWidth / oldWidth), undefined,
+                Math.round(node.width * newWidth / oldWidth), undefined);
+        }
+        this.grid.commit();
+    };
+
+    GridStack.prototype.setGridWidth = function(gridWidth) {
+        this.container.removeClass('grid-stack-' + this.opts.width);
+        this._updateNodeWidths(this.opts.width, gridWidth);
+        this.opts.width = gridWidth;
+        this.container.addClass('grid-stack-' + gridWidth);
+    };
+
     // jscs:disable requireCamelCaseOrUpperCaseIdentifiers
     GridStackEngine.prototype.batch_update = obsolete(GridStackEngine.prototype.batchUpdate);
     GridStackEngine.prototype._fix_collisions = obsolete(GridStackEngine.prototype._fixCollisions,