change grid prop to 'column' & 'maxRow' (singular)

README.md

@@ -177,9 +177,9 @@ If you're still experiencing issues on touch devices please check [#444](https:/
 
 GridStack makes it very easy if you need [1-12] columns out of the box (default is 12), but you always need **2 things** if you need to customize this:
 
-1) Change the `columns` grid option when creating a grid to your number N
+1) Change the `column` grid option when creating a grid to your number N
 ```js
-$('.grid-stack').gridstack( {columns: N} );
+$('.grid-stack').gridstack( {column: N} );
 ```
 
 2) and change your HTML accordingly if **N < 12** (else custom CSS section next). Without this, things will not render/work correctly.

demo/two.html

@@ -106,7 +106,7 @@ <h1>Two grids demo</h1>
   <script type="text/javascript">
     $(function () {
       var options = {
-        columns: 6,
+        column: 6,
         float: false,
         removable: '.trash',
         removeTimeout: 100,

doc/CHANGES.md

@@ -24,7 +24,7 @@ Change log
 
 ## v0.5.2-dev (upcoming changes)
 
-- grid options `width` is now `columns`, and `height` is now `maxRows` which match what they are. Old names are still supported for now (with console warnings). Also various fixes for custom # of columns and re-wrote entire doc section ([#1053](https://github.com/gridstack/gridstack.js/issues/1053)).
+- grid options `width` is now `column`, and `height` is now `maxRow` which match what they are. Old names are still supported for now (with console warnings). Also various fixes for custom # of column and re-wrote entire doc section ([#1053](https://github.com/gridstack/gridstack.js/issues/1053)).
 - fix widgets not animating when animate: true is used. on every move, styles were recreated-fix should slightly improve gridstack.js speed ([#937](https://github.com/gridstack/gridstack.js/issues/937)).
 - fix moving widgets when having multiple grids. jquery-ui workaround ([#1043](https://github.com/gridstack/gridstack.js/issues/1043)).
 - switch to eslint ([#763](https://github.com/gridstack/gridstack.js/issues/763)).

doc/README.md

@@ -77,8 +77,8 @@ gridstack.js API
 - `draggable` - allows to override jQuery UI draggable options. (default: `{handle: '.grid-stack-item-content', scroll: false, appendTo: 'body'}`)
 - `handle` - draggable handle selector (default: `'.grid-stack-item-content'`)
 - `handleClass` - draggable handle class (e.g. `'grid-stack-item-content'`). If set `handle` is ignored (default: `null`)
-- `columns` - amount of columns (default: `12`)
-- `maxRows` - maximum rows amount. Default is `0` which means no maximum rows
+- `column` - amount of columns (default: `12`)
+- `maxRow` - maximum rows amount. Default is `0` which means no maximum rows
 - `float` - enable floating widgets (default: `false`) See [example](http://gridstackjs.com/demo/float.html)
 - `itemClass` - widget class (default: `'grid-stack-item'`)
 - `minWidth` - minimal width. If window width is less than or equal to, grid will be shown in one-column mode (default: `768`)
@@ -98,8 +98,8 @@ gridstack.js API
 ## Grid attributes
 
 - `data-gs-animate` - turns animation on
-- `data-gs-columns` - amount of columns. Setting non-default value must be supported by equivalent change in CSS, [see docs here](https://github.com/gridstack/gridstack.js#change-grid-columns).
-- `data-gs-maxRows` - maximum rows amount. Default is `0` which means no maximum rows.
+- `data-gs-column` - amount of columns. Setting non-default value must be supported by equivalent change in CSS, [see docs here](https://github.com/gridstack/gridstack.js#change-grid-columns).
+- `data-gs-max-row` - maximum rows amount. Default is `0` which means no maximum rows.
 - `data-gs-current-height` - current rows amount. Set by the library only. Can be used by the CSS rules.
 
 ## Item attributes

spec/e2e/html/810-many-columns.html

@@ -49,7 +49,7 @@ <h1>Many Columns demo</h1>
       const COLUMNS = 30; // # of columns, also need to update CSS
       var count = 0;
       var options = {
-        columns: COLUMNS,
+        column: COLUMNS,
         cellHeight: 'auto',
         float: false
       };

spec/gridstack-engine-spec.js

@@ -17,9 +17,9 @@ describe('gridstack engine', function() {
     });
 
     it('should be setup properly', function() {
-      expect(engine.columns).toEqual(12);
+      expect(engine.column).toEqual(12);
       expect(engine.float).toEqual(false);
-      expect(engine.maxRows).toEqual(0);
+      expect(engine.maxRow).toEqual(0);
       expect(engine.nodes).toEqual([]);
     });
   });

spec/gridstack-spec.js

@@ -31,9 +31,9 @@ describe('gridstack', function() {
 
     it('should set default params correctly.', function() {
       e.call(w);
-      expect(w.columns).toBeUndefined();
+      expect(w.column).toBeUndefined();
       expect(w.float).toBe(false);
-      expect(w.maxRows).toEqual(0);
+      expect(w.maxRow).toEqual(0);
       expect(w.nodes).toEqual([]);
       expect(typeof w.onchange).toBe('function');
       expect(w._updateCounter).toEqual(0);
@@ -45,9 +45,9 @@ describe('gridstack', function() {
       var arr = [1,2,3];
 
       e.call(w, 1, fkt, true, 2, arr);
-      expect(w.columns).toEqual(1);
+      expect(w.column).toEqual(1);
       expect(w.float).toBe(true);
-      expect(w.maxRows).toEqual(2);
+      expect(w.maxRow).toEqual(2);
       expect(w.nodes).toEqual(arr);
       expect(w.onchange).toEqual(fkt);
       expect(w._updateCounter).toEqual(0);
@@ -84,14 +84,14 @@ describe('gridstack', function() {
     });
 
     it('should sort ascending without columns.', function() {
-      w.columns = undefined;
+      w.column = undefined;
       w.nodes = [{x: 7, y: 0, width: 1}, {x: 4, y: 4, width: 1}, {x: 9, y: 0, width: 1}, {x: 0, y: 1, width: 1}];
       e.prototype._sortNodes.call(w, 1);
       expect(w.nodes).toEqual([{x: 7, y: 0, width: 1}, {x: 9, y: 0, width: 1}, {x: 0, y: 1, width: 1}, {x: 4, y: 4, width: 1}]);
     });
 
     it('should sort descending without columns.', function() {
-      w.columns = undefined;
+      w.column = undefined;
       w.nodes = [{x: 7, y: 0, width: 1}, {x: 4, y: 4, width: 1}, {x: 9, y: 0, width: 1}, {x: 0, y: 1, width: 1}];
       e.prototype._sortNodes.call(w, -1);
       expect(w.nodes).toEqual([{x: 4, y: 4, width: 1}, {x: 0, y: 1, width: 1}, {x: 9, y: 0, width: 1}, {x: 7, y: 0, width: 1}]);
@@ -220,7 +220,7 @@ describe('gridstack', function() {
       var options = {
         cellHeight: 80,
         verticalMargin: 10,
-        columns: 12
+        column: 12
       };
       $('.grid-stack').gridstack(options);
       var grid = $('.grid-stack').data('gridstack');
@@ -231,7 +231,7 @@ describe('gridstack', function() {
       var options = {
         cellHeight: 80,
         verticalMargin: 10,
-        columns: 10
+        column: 10
       };
       $('.grid-stack').gridstack(options);
       var grid = $('.grid-stack').data('gridstack');
@@ -251,7 +251,7 @@ describe('gridstack', function() {
       var options = {
         cellHeight: 80,
         verticalMargin: 10,
-        columns: 12
+        column: 12
       };
       $('.grid-stack').gridstack(options);
       var grid = $('.grid-stack').data('gridstack');
@@ -262,7 +262,7 @@ describe('gridstack', function() {
       var options = {
         cellHeight: 80,
         verticalMargin: 10,
-        columns: 10
+        column: 10
       };
       $('.grid-stack').gridstack(options);
       var grid = $('.grid-stack').data('gridstack');

src/gridstack.d.ts

@@ -437,14 +437,14 @@ interface GridstackOptions {
     handleClass?: string;
 
     /**
-    * number of columns (default?: 12). Note: IF you change this, CSS also have to change. See https://github.com/gridstack/gridstack.js#change-grid-columns
+  * number of columns (default?: 12). Note: IF you change this, CSS also have to change. See https://github.com/gridstack/gridstack.js#change-grid-columns
     */
-    columns?: number;
+    column?: number;
 
     /**
     * maximum rows amount. Default? is 0 which means no maximum rows
     */
-    maxRows?: number;
+    maxRow?: number;
 
     /**
     * enable floating widgets (default?: false) See example (http://gridstack.github.io/gridstack.js/demo/float.html)

src/gridstack.js

@@ -295,10 +295,10 @@
 
   var idSeq = 0;
 
-  var GridStackEngine = function(columns, onchange, floatMode, maxRows, items) {
-    this.columns = columns;
+  var GridStackEngine = function(column, onchange, floatMode, maxRow, items) {
+    this.column = column;
     this.float = floatMode || false;
-    this.maxRows = maxRows || 0;
+    this.maxRow = maxRow || 0;
 
     this.nodes = items || [];
     this.onchange = onchange || function() {};
@@ -336,7 +336,7 @@
     var nn = node;
     var hasLocked = Boolean(this.nodes.find(function(n) { return n.locked; }));
     if (!this.float && !hasLocked) {
-      nn = {x: 0, y: node.y, width: this.columns, height: node.height};
+      nn = {x: 0, y: node.y, width: this.column, height: node.height};
     }
     while (true) {
       var collisionNode = this.nodes.find(Utils._collisionNodeCheck, {node: node, nn: nn});
@@ -355,7 +355,7 @@
   };
 
   GridStackEngine.prototype._sortNodes = function(dir) {
-    this.nodes = Utils.sort(this.nodes, dir, this.columns);
+    this.nodes = Utils.sort(this.nodes, dir, this.column);
   };
 
   GridStackEngine.prototype._packNodes = function() {
@@ -432,8 +432,8 @@
     if (Number.isNaN(node.width))  { node.width = defaults.width; }
     if (Number.isNaN(node.height)) { node.height = defaults.height; }
 
-    if (node.width > this.columns) {
-      node.width = this.columns;
+    if (node.width > this.column) {
+      node.width = this.column;
     } else if (node.width < 1) {
       node.width = 1;
     }
@@ -446,11 +446,11 @@
       node.x = 0;
     }
 
-    if (node.x + node.width > this.columns) {
+    if (node.x + node.width > this.column) {
       if (resizing) {
-        node.width = this.columns - node.x;
+        node.width = this.column - node.x;
       } else {
-        node.x = this.columns - node.width;
+        node.x = this.column - node.width;
       }
     }
 
@@ -498,9 +498,9 @@
       this._sortNodes();
 
       for (var i = 0;; ++i) {
-        var x = i % this.columns;
-        var y = Math.floor(i / this.columns);
-        if (x + node.width > this.columns) {
+        var x = i % this.column;
+        var y = Math.floor(i / this.column);
+        if (x + node.width > this.column) {
           continue;
         }
         if (!this.nodes.find(Utils._isAddNodeIntercepted, {x: x, y: y, node: node})) {
@@ -537,13 +537,13 @@
     }
     var hasLocked = Boolean(this.nodes.find(function(n) { return n.locked; }));
 
-    if (!this.maxRows && !hasLocked) {
+    if (!this.maxRow && !hasLocked) {
       return true;
     }
 
     var clonedNode;
     var clone = new GridStackEngine(
-      this.columns,
+      this.column,
       null,
       this.float,
       0,
@@ -566,26 +566,26 @@
         return n !== clonedNode && Boolean(n.locked) && Boolean(n._dirty);
       }));
     }
-    if (this.maxRows) {
-      res &= clone.getGridHeight() <= this.maxRows;
+    if (this.maxRow) {
+      res &= clone.getGridHeight() <= this.maxRow;
     }
 
     return res;
   };
 
   GridStackEngine.prototype.canBePlacedWithRespectToHeight = function(node) {
-    if (!this.maxRows) {
+    if (!this.maxRow) {
       return true;
     }
 
     var clone = new GridStackEngine(
-      this.columns,
+      this.column,
       null,
       this.float,
       0,
       this.nodes.map(function(n) { return $.extend({}, n); }));
     clone.addNode(node);
-    return clone.getGridHeight() <= this.maxRows;
+    return clone.getGridHeight() <= this.maxRow;
   };
 
   GridStackEngine.prototype.isNodeChangedPosition = function(node, x, y, width, height) {
@@ -686,20 +686,20 @@
     obsoleteOpts(opts, 'static_grid', 'staticGrid');
     obsoleteOpts(opts, 'is_nested', 'isNested');
     obsoleteOpts(opts, 'always_show_resize_handle', 'alwaysShowResizeHandle');
-    obsoleteOpts(opts, 'width', 'columns');
-    obsoleteOpts(opts, 'height', 'maxRows');
+    obsoleteOpts(opts, 'width', 'column');
+    obsoleteOpts(opts, 'height', 'maxRow');
 
     // container attributes
-    obsoleteAttr(this.container, 'data-gs-width', 'data-gs-columns');
-    obsoleteAttr(this.container, 'data-gs-height', 'data-gs-max-rows');
+    obsoleteAttr(this.container, 'data-gs-width', 'data-gs-column');
+    obsoleteAttr(this.container, 'data-gs-height', 'data-gs-max-row');
     /*eslint-enable camelcase */
 
     opts.itemClass = opts.itemClass || 'grid-stack-item';
     var isNested = this.container.closest('.' + opts.itemClass).length > 0;
 
     this.opts = Utils.defaults(opts || {}, {
-      columns: parseInt(this.container.attr('data-gs-columns')) || 12,
-      maxRows: parseInt(this.container.attr('data-gs-max-rows')) || 0,
+      column: parseInt(this.container.attr('data-gs-column')) || 12,
+      maxRow: parseInt(this.container.attr('data-gs-max-row')) || 0,
       itemClass: 'grid-stack-item',
       placeholderClass: 'grid-stack-placeholder',
       placeholderText: '',
@@ -776,7 +776,7 @@
 
     this._initStyles();
 
-    this.grid = new GridStackEngine(this.opts.columns, function(nodes, detachNode) {
+    this.grid = new GridStackEngine(this.opts.column, function(nodes, detachNode) {
       detachNode = detachNode === undefined ? true : detachNode;
       var maxHeight = 0;
       this.nodes.forEach(function(n) {
@@ -796,7 +796,7 @@
         }
       });
       self._updateStyles(maxHeight + 10);
-    }, this.opts.float, this.opts.maxRows);
+    }, this.opts.float, this.opts.maxRow);
 
     if (this.opts.auto) {
       var elements = [];
@@ -808,7 +808,7 @@
             el: el,
             // if x,y are missing (autoPosition) add them to end of list - keep their respective DOM order
             i: (parseInt(el.attr('data-gs-x')) || 100) +
-              (parseInt(el.attr('data-gs-y')) || 100) * _this.opts.columns
+              (parseInt(el.attr('data-gs-y')) || 100) * _this.opts.column
           });
         });
       Utils.sortBy(elements, function(x) { return x.i; }).forEach(function(item) {
@@ -1296,9 +1296,9 @@
       self.grid.beginUpdate(node);
       cellWidth = self.cellWidth();
       var strictCellHeight = self.cellHeight();
-      // TODO: cellHeight cannot be set to cellHeight() (i.e. remove strictCellHeight) right here otherwise
+      // TODO: cellHeight = cellHeight() causes issue (i.e. remove strictCellHeight above) otherwise
       // when sizing up we jump almost right away to next size instead of half way there. Not sure
-      // why as we don't use ceil() is many places but round().
+      // why as we don't use ceil() in many places but round() instead.
       cellHeight = self.container.height() / parseInt(self.container.attr('data-gs-current-height'));
       self.placeholder
         .attr('data-gs-x', o.attr('data-gs-x'))
@@ -1710,7 +1710,7 @@
 
     var heightData = Utils.parseHeight(val);
 
-    if (this.opts.verticalMarginUnit === heightData.unit && this.opts.maxRows === heightData.height) {
+    if (this.opts.verticalMarginUnit === heightData.unit && this.opts.maxRow === heightData.height) {
       return ;
     }
     this.opts.verticalMarginUnit = heightData.unit;
@@ -1750,7 +1750,7 @@
 
   GridStack.prototype.cellWidth = function() {
     // TODO: take margin into account ($horizontal_padding in .scss) to make cellHeight='auto' square ? (see 810-many-columns.html)
-    return Math.round(this.container.outerWidth() / this.opts.columns);
+    return Math.round(this.container.outerWidth() / this.opts.column);
   };
 
   GridStack.prototype.getCellFromPixel = function(position, useOffset) {
@@ -1759,7 +1759,7 @@
     var relativeLeft = position.left - containerPos.left;
     var relativeTop = position.top - containerPos.top;
 
-    var columnWidth = Math.floor(this.container.width() / this.opts.columns);
+    var columnWidth = Math.floor(this.container.width() / this.opts.column);
     var rowHeight = Math.floor(this.container.height() / parseInt(this.container.attr('data-gs-current-height')));
 
     return {x: Math.floor(relativeLeft / columnWidth), y: Math.floor(relativeTop / rowHeight)};
@@ -1808,11 +1808,11 @@
   };
 
   GridStack.prototype.setGridWidth = function(gridWidth,doNotPropagate) {
-    this.container.removeClass('grid-stack-' + this.opts.columns);
+    this.container.removeClass('grid-stack-' + this.opts.column);
     if (doNotPropagate !== true) {
-      this._updateNodeWidths(this.opts.columns, gridWidth);
+      this._updateNodeWidths(this.opts.column, gridWidth);
     }
-    this.opts.columns = gridWidth;
+    this.opts.column = gridWidth;
     this.grid.width = gridWidth;
     this.container.addClass('grid-stack-' + gridWidth);
   };