Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 69 additions & 0 deletions demo/column.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Column grid demo</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="../dist/gridstack.css"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="../src/gridstack.js"></script>
<script src="../src/gridstack.jQueryUI.js"></script>

<style type="text/css">
.grid-stack {
background: lightgoldenrodyellow;
}

.grid-stack-item-content {
color: #2c3e50;
text-align: center;
background-color: #18bc9c;
}
</style>
</head>
<body>
<div class="container-fluid">
<h1>setColumn() grid demo</h1>
<div>
<a class="btn btn-primary" id="1column" href="#">1 Column</a>
</div>
<br><br>
<div class="grid-stack"></div>
</div>


<script type="text/javascript">
$(function () {
$('.grid-stack').gridstack();
var self = this;
this.grid = $('.grid-stack').data('gridstack');

var items = [
{x: 0, y: 0, width: 4, height: 2},
{x: 4, y: 0, width: 4, height: 1},
];
items.forEach(function (node, i) {
self.grid.addWidget($('<div><div class="grid-stack-item-content">' + i + '</div></div>'), node);
});

$('#1column').click(function() {
oneColumn();
});

function oneColumn() {
self.grid.setColumn(1);
}
});
</script>
</body>
</html>
6 changes: 3 additions & 3 deletions demo/responsive.html
Original file line number Diff line number Diff line change
Expand Up @@ -72,13 +72,13 @@ <h1>Responsive grid demo</h1>
if (isBreakpoint('xs')) {
$('#grid-size').text('One column mode');
} else if (isBreakpoint('sm')) {
grid.setGridWidth(3);
grid.setColumn(3);
$('#grid-size').text(3);
} else if (isBreakpoint('md')) {
grid.setGridWidth(6);
grid.setColumn(6);
$('#grid-size').text(6);
} else if (isBreakpoint('lg')) {
grid.setGridWidth(12);
grid.setColumn(12);
$('#grid-size').text(12);
}
};
Expand Down
26 changes: 13 additions & 13 deletions doc/CHANGES.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,19 +24,19 @@ Change log

## v0.5.2-dev (upcoming changes)

- 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)).
- grid options `width` is now `column`, `height` now `maxRow`, and `setGridWidth()` now `setColumn()` to match what they are. Old names are still supported (console warnings). 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)).
- null values to addWidget() exception fix ([#1042](https://github.com/gridstack/gridstack.js/issues/1042)).
- fix null values `addWidget()` options ([#1042](https://github.com/gridstack/gridstack.js/issues/1042)).

## v0.5.2 (2019-11-13)

- undefined x,y position messes up grid ([#1017](https://github.com/gridstack/gridstack.js/issues/1017)).
- undefined `x,y` position messes up grid ([#1017](https://github.com/gridstack/gridstack.js/issues/1017)).
- changed code to 2 spaces.
- fix minHeight during `onStartMoving()` ([#999](https://github.com/gridstack/gridstack.js/issues/999)).
- TypeScript definition file now included - no need to include @types/gridstack, easier to update ([#1036](https://github.com/gridstack/gridstack.js/pull/1036)).
- new addWidget(el, options) to pass object so you don't have to spell 10 params. ([#907](https://github.com/gridstack/gridstack.js/issues/907)).
- new `addWidget(el, options)` to pass object so you don't have to spell 10 params. ([#907](https://github.com/gridstack/gridstack.js/issues/907)).

## v0.5.1 (2019-11-07)

Expand All @@ -57,11 +57,11 @@ Change log
## v0.4.0 (2018-05-11)

- widgets can have their own resize handles. Use `data-gs-resize-handles` element attribute to use. For example, `data-gs-resize-handles="e,w"` will make the particular widget only resize west and east. ([#494](https://github.com/gridstack/gridstack.js/issues/494)).
- enable sidebar items to be duplicated properly. Pass `helper: 'clone'` in `draggable` options. ([#661](https://github.com/gridstack/gridstack.js/issues/661), ([#396](https://github.com/gridstack/gridstack.js/issues/396), ([#499](https://github.com/gridstack/gridstack.js/issues/499)).
- enable sidebar items to be duplicated properly. Pass `helper: 'clone'` in `draggable` options. ([#661](https://github.com/gridstack/gridstack.js/issues/661), [#396](https://github.com/gridstack/gridstack.js/issues/396), [#499](https://github.com/gridstack/gridstack.js/issues/499)).
- fix `staticGrid` grid option ([#743](https://github.com/gridstack/gridstack.js/issues/743))
- preserve inline styles when moving/cloning items (thanks [@silverwind](https://github.com/silverwind))
- fix bug causing heights not to get set ([#744](https://github.com/gridstack/gridstack.js/issues/744))
- allow grid to have min-height, fixes ([#628](https://github.com/gridstack/gridstack.js/issues/628)) (thanks [@adumesny](https://github.com/adumesny))
- allow grid to have min-height, fixes ([#628](https://github.com/gridstack/gridstack.js/issues/628)) thanks [@adumesny](https://github.com/adumesny)
- widget x and y are now ints (thanks [@DonnchaC](https://github.com/donnchac))
- allow all droppable options (thanks [@vigor-vlad](https://github.com/vigor-vlad))
- properly track mouse position in `getCellFromPixel` (thanks [@aletorrado](https://github.com/aletorrado))
Expand All @@ -74,7 +74,7 @@ Change log
- prevent extra checks for removing widget when dragging off grid.
- trigger `added` when a widget is added via dropping from one grid to another.
- trigger `removed` when a widget is removed via dropping from one grid to another.
- trigger `removed` when a widget is removed via dropping on a removable zone ([#607](https://github.com/gridstack/gridstack.js/issues/607) and [#550])(https://github.com/gridstack/gridstack.js/issues/550)).
- trigger `removed` when a widget is removed via dropping on a removable zone ([#607](https://github.com/gridstack/gridstack.js/issues/607) and [#550](https://github.com/gridstack/gridstack.js/issues/550)).
- trigger custom event for `resizestop` called `gsresizestop` ([#577](https://github.com/gridstack/gridstack.js/issues/577) and [#398](https://github.com/gridstack/gridstack.js/issues/398)).
- prevent dragging/resizing in `oneColumnMode` ([#593](https://github.com/gridstack/gridstack.js/issues/593)).
- add `oneColumnModeClass` option to grid.
Expand All @@ -99,7 +99,7 @@ Change log
- `cellHeight` and `verticalMargin` can now be string (e.g. '3em', '20px') (Thanks to @jlowcs).
- add `maxWidth`/`maxHeight` methods.
- add `enableMove`/`enableResize` methods.
- fix window resize issue #331.
- fix window resize issue [#331](https://github.com/gridstack/gridstack.js/issues/331)).
- add options `disableDrag` and `disableResize`.
- fix `batchUpdate`/`commit` (Thank to @radiolips)
- remove dependency of FontAwesome
Expand Down Expand Up @@ -147,16 +147,16 @@ Change log

- fix grid initialization
- add `cell_height`/`cell_width` API methods
- fix boolean attributes (issue #31)
- fix boolean attributes ([#31](https://github.com/gridstack/gridstack.js/issues/31))

## v0.2.1 (2014-12-09)

- add widgets locking (issue #19)
- add widgets locking ([#19](https://github.com/gridstack/gridstack.js/issues/19))
- add `will_it_fit` API method
- fix auto-positioning (issue #20)
- fix auto-positioning ([#20](https://github.com/gridstack/gridstack.js/issues/20))
- add animation (thanks to @ishields)
- fix `y` coordinate calculation when dragging (issue #18)
- fix `remove_widget` (issue #16)
- fix `y` coordinate calculation when dragging ([#18](https://github.com/gridstack/gridstack.js/issues/18))
- fix `remove_widget` ([#16](https://github.com/gridstack/gridstack.js/issues/16))
- minor fixes


Expand Down
6 changes: 3 additions & 3 deletions doc/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ gridstack.js API
- [resize(el, width, height)](#resizeel-width-height)
- [resizable(el, val)](#resizableel-val)
- [setAnimation(doAnimate)](#setanimationdoanimate)
- [setGridWidth(gridWidth, doNotPropagate)](#setgridwidthgridwidth-donotpropagate)
- [setColumn(column, doNotPropagate)](#setcolumncolumn-donotpropagate)
- [setStatic(staticValue)](#setstaticstaticvalue)
- [update(el, x, y, width, height)](#updateel-x-y-width-height)
- [verticalMargin()](#verticalmargin)
Expand Down Expand Up @@ -436,11 +436,11 @@ Toggle the grid animation state. Toggles the `grid-stack-animate` class.

- `doAnimate` - if `true` the grid will animate.

### setGridWidth(gridWidth, doNotPropagate)
### setColumn(column, doNotPropagate)

(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.
- `column` - Integer between 1 and 12.
- `doNotPropagate` - if true existing widgets will not be updated.

### setStatic(staticValue)
Expand Down
58 changes: 57 additions & 1 deletion spec/gridstack-spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ describe('gridstack', function() {

var e;
var w;
// grid has 4x2 and 4x4 top-left aligned - used all most test cases
// grid has 4x2 and 4x4 top-left aligned - used on most test cases
var gridstackHTML =
'<div style="width: 992px; height: 800px" id="gs-cont">' +
' <div class="grid-stack">' +
Expand Down Expand Up @@ -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);
Expand Down
4 changes: 2 additions & 2 deletions src/gridstack.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
23 changes: 13 additions & 10 deletions src/gridstack.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 */

Expand Down Expand Up @@ -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, {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

|| {} already done above

column: parseInt(this.container.attr('data-gs-column')) || 12,
maxRow: parseInt(this.container.attr('data-gs-max-row')) || 0,
itemClass: 'grid-stack-item',
Expand Down Expand Up @@ -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 ||
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

had missed that one before

(!self.grid.float && y > self.grid.getGridHeight())) {
if (!node._temporaryRemoved) {
if (self.opts.removable === true) {
Expand Down Expand Up @@ -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);
Expand Down