' +
'
' +
@@ -271,6 +271,62 @@ describe('gridstack', function() {
});
});
+ describe('grid.column', function() {
+ beforeEach(function() {
+ document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
+ });
+ afterEach(function() {
+ document.body.removeChild(document.getElementById('gs-cont'));
+ });
+ it('should have no changes', function() {
+ var options = {
+ column: 12
+ };
+ $('.grid-stack').gridstack(options);
+ var grid = $('.grid-stack').data('gridstack');
+ expect(grid.opts.column).toBe(12);
+ grid.setColumn(12);
+ expect(grid.opts.column).toBe(12);
+ grid.setGridWidth(12); // old API
+ expect(grid.opts.column).toBe(12);
+ });
+ it('should change column number, no relayout', function() {
+ var options = {
+ column: 12
+ };
+ $('.grid-stack').gridstack(options);
+ var grid = $('.grid-stack').data('gridstack');
+ var items = $('.grid-stack-item');
+
+ grid.setColumn(10, false);
+ expect(grid.opts.column).toBe(10);
+ for (var j = 0; j < items.length; j++) {
+ expect(parseInt($(items[j]).attr('data-gs-y'), 10)).toBe(0);
+ }
+
+ grid.setColumn(9, true);
+ expect(grid.opts.column).toBe(9);
+ for (var j = 0; j < items.length; j++) {
+ expect(parseInt($(items[j]).attr('data-gs-y'), 10)).toBe(0);
+ }
+ });
+ it('should change column number and relayout items', function() {
+ var options = {
+ column: 12
+ };
+ $('.grid-stack').gridstack(options);
+ var grid = $('.grid-stack').data('gridstack');
+ var items = $('.grid-stack-item');
+
+ grid.setColumn(1);
+ expect(grid.opts.column).toBe(1);
+ for (var j = 0; j < items.length; j++) {
+ expect(parseInt($(items[j]).attr('data-gs-x'), 10)).toBe(0);
+ // TODO: check Y position but I don't currently agree with order. [Alain]
+ }
+ });
+ });
+
describe('grid.minWidth', function() {
beforeEach(function() {
document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
diff --git a/src/gridstack.d.ts b/src/gridstack.d.ts
index 68fa25bde..957b59224 100644
--- a/src/gridstack.d.ts
+++ b/src/gridstack.d.ts
@@ -264,10 +264,10 @@ 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 gridWidth - Integer between 1 and 12.
+ * @param column - Integer between 1 and 12.
* @param doNotPropagate if true existing widgets will not be updated.
*/
- setGridWidth(gridWidth: number, doNotPropagate: boolean): void;
+ setColumn(column: number, doNotPropagate: boolean): void;
/**
* Toggle the grid static state. Also toggle the grid-stack-static class.
diff --git a/src/gridstack.js b/src/gridstack.js
index b8f4e213d..59f804eb9 100644
--- a/src/gridstack.js
+++ b/src/gridstack.js
@@ -250,11 +250,8 @@
/*eslint-disable camelcase */
Utils.is_intercepted = obsolete(Utils.isIntercepted, 'is_intercepted', 'isIntercepted');
-
Utils.create_stylesheet = obsolete(Utils.createStylesheet, 'create_stylesheet', 'createStylesheet');
-
Utils.remove_stylesheet = obsolete(Utils.removeStylesheet, 'remove_stylesheet', 'removeStylesheet');
-
Utils.insert_css_rule = obsolete(Utils.insertCSSRule, 'insert_css_rule', 'insertCSSRule');
/*eslint-enable camelcase */
@@ -697,7 +694,7 @@
opts.itemClass = opts.itemClass || 'grid-stack-item';
var isNested = this.container.closest('.' + opts.itemClass).length > 0;
- this.opts = Utils.defaults(opts || {}, {
+ this.opts = Utils.defaults(opts, {
column: parseInt(this.container.attr('data-gs-column')) || 12,
maxRow: parseInt(this.container.attr('data-gs-max-row')) || 0,
itemClass: 'grid-stack-item',
@@ -1229,7 +1226,7 @@
var distance = ui.position.top - node._prevYPix;
node._prevYPix = ui.position.top;
Utils.updateScrollPosition(el[0], ui, distance);
- if (el.data('inTrashZone') || x < 0 || x >= self.grid.width || y < 0 ||
+ if (el.data('inTrashZone') || x < 0 || x >= self.grid.column || y < 0 ||
(!self.grid.float && y > self.grid.getGridHeight())) {
if (!node._temporaryRemoved) {
if (self.opts.removable === true) {
@@ -1807,15 +1804,21 @@
this.grid.commit();
};
- GridStack.prototype.setGridWidth = function(gridWidth,doNotPropagate) {
+ GridStack.prototype.setColumn = function(column, doNotPropagate) {
+ if (this.opts.column === column) { return; }
this.container.removeClass('grid-stack-' + this.opts.column);
if (doNotPropagate !== true) {
- this._updateNodeWidths(this.opts.column, gridWidth);
+ this._updateNodeWidths(this.opts.column, column);
}
- this.opts.column = gridWidth;
- this.grid.width = gridWidth;
- this.container.addClass('grid-stack-' + gridWidth);
+ this.opts.column = this.grid.column = column;
+ this.container.addClass('grid-stack-' + column);
};
+ // legacy call from <= 0.5.2 - use new method instead.
+ GridStack.prototype.setGridWidth = function(column, doNotPropagate) {
+ console.warn('gridstack.js: setGridWidth() is deprecated as of v0.5.3 and has been replaced ' +
+ 'with setColumn(). It will be **completely** removed in v1.0.');
+ this.setColumn(column, doNotPropagate);
+ }
/*eslint-disable camelcase */
GridStackEngine.prototype.batch_update = obsolete(GridStackEngine.prototype.batchUpdate);