Skip to content

Commit 0944010

Browse files
author
Alain Dumesny
committed
gridstack() init method return GridStack
* `gridstack()` init method will no longer return a JQuery object (part of removing JQ from our API), but rather `GridStack | GridStack[]` (if multiple are present) making it much more convenient. * Instead of: $('.grid-stack').gridstack(opt); var grid = $('.grid-stack').data('gridstack'); you can now just: var grid = $('.grid-stack').gridstack(opt);
1 parent d988466 commit 0944010

19 files changed

+221
-227
lines changed

‎demo/anijs.html‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,9 @@
1010
<link rel="stylesheet" href="demo.css"/>
1111

1212
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
13-
<!--
1413
<script src="../dist/jquery-ui.min.js"></script>
1514
<script src="../src/gridstack.js"></script>
1615
<script src="../src/gridstack.jQueryUI.js"></script>
17-
-->
18-
<script src="../dist/gridstack.all.js"></script>
1916
</head>
2017
<body>
2118
<div class="container-fluid">
@@ -31,9 +28,8 @@ <h4>Widget added</h4>
3128
<script src="https://cdnjs.cloudflare.com/ajax/libs/AniJS/0.9.3/anijs.js"></script>
3229
<script type="text/javascript">
3330
$(function () {
34-
$('.grid-stack').gridstack();
31+
var grid = $('.grid-stack').gridstack();
3532
var self = this;
36-
this.grid = $('.grid-stack').data('gridstack');
3733
$('.grid-stack').on('added', function(event, items) {
3834
// add anijs data to gridstack item
3935
for (var i = 0; i < items.length; i++) {
@@ -44,14 +40,10 @@ <h4>Widget added</h4>
4440
// fire added event!
4541
self.gridstackNotifier.dispatchEvent('added');
4642
});
47-
$('#add-widget').click(function() {
48-
addNewWidget();
49-
});
5043

51-
function addNewWidget() {
52-
var grid = $('.grid-stack').data('gridstack');
44+
$('#add-widget').click(function() {
5345
grid.addWidget($('<div><div class="grid-stack-item-content"></div></div>'), 0, 0, Math.floor(1 + 3 * Math.random()), Math.floor(1 + 3 * Math.random()), true);
54-
}
46+
});
5547

5648
var animationHelper = AniJS.getHelper();
5749

‎demo/column.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,7 @@ <h1>setColumn() grid demo</h1>
3838
<script type="text/javascript">
3939
$(function () {
4040
var $grid = $('.grid-stack');
41-
$grid.gridstack({float: true});
42-
grid = $grid.data('gridstack');
41+
var grid = $grid.gridstack({float: true});
4342
var $text = $('#column-text');
4443

4544
$grid.on('added', function(e, items) {log(' added ', items)});

‎demo/float.html‎

Lines changed: 29 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -28,39 +28,35 @@ <h1>Float grid demo</h1>
2828

2929
<script type="text/javascript">
3030
$(function () {
31-
$('.grid-stack').gridstack({float: true});
32-
33-
new function () {
34-
this.items = [
35-
{x: 2, y: 5, width: 1, height: 1},
36-
{x: 2, y: 3, width: 3, height: 1},
37-
{x: 4, y: 2, width: 1, height: 1},
38-
{x: 3, y: 1, width: 1, height: 2},
39-
{x: 0, y: 6, width: 2, height: 2}
40-
];
41-
var count = 0;
42-
43-
this.grid = $('.grid-stack').data('gridstack');
44-
45-
this.addNewWidget = function() {
46-
var node = this.items[count] || {
47-
x: Math.round(12 * Math.random()),
48-
y: Math.round(5 * Math.random()),
49-
width: Math.round(1 + 3 * Math.random()),
50-
height: Math.round(1 + 3 * Math.random())
51-
};
52-
this.grid.addWidget($('<div><div class="grid-stack-item-content">' + count++ + '</div></div>'), node);
53-
return false;
54-
}.bind(this);
55-
56-
this.toggleFloat = function() {
57-
this.grid.float(! this.grid.float());
58-
$('#float').html('float: ' + this.grid.float());
59-
}.bind(this);;
60-
61-
$('#add-widget').click(this.addNewWidget);
62-
$('#float').click(this.toggleFloat);
63-
};
31+
this.grid = $('.grid-stack').gridstack({float: true});
32+
33+
this.items = [
34+
{x: 2, y: 5, width: 1, height: 1},
35+
{x: 2, y: 3, width: 3, height: 1},
36+
{x: 4, y: 2, width: 1, height: 1},
37+
{x: 3, y: 1, width: 1, height: 2},
38+
{x: 0, y: 6, width: 2, height: 2}
39+
];
40+
var count = 0;
41+
42+
this.addNewWidget = function() {
43+
var node = this.items[count] || {
44+
x: Math.round(12 * Math.random()),
45+
y: Math.round(5 * Math.random()),
46+
width: Math.round(1 + 3 * Math.random()),
47+
height: Math.round(1 + 3 * Math.random())
48+
};
49+
this.grid.addWidget($('<div><div class="grid-stack-item-content">' + count++ + '</div></div>'), node);
50+
return false;
51+
}.bind(this);
52+
53+
this.toggleFloat = function() {
54+
this.grid.float(! this.grid.float());
55+
$('#float').html('float: ' + this.grid.float());
56+
}.bind(this);
57+
58+
$('#add-widget').click(this.addNewWidget);
59+
$('#float').click(this.toggleFloat);
6460
});
6561
</script>
6662
</body>

‎demo/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<h1>Demos</h1>
99
<ul>
1010
<li><a href="advance.html">Advance</a></li>
11-
<li><a href="anijs.html">AniJS</a></li>
11+
<li><a href="anijs.html">AniJS Animation</a></li>
1212
<li><a href="column.html">Column</a></li>
1313
<li><a href="float.html">Float grid</a></li>
1414
<li><a href="knockout.html">Knockout.js</a></li>

‎demo/knockout.html‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,8 @@ <h1>knockout.js Demo</h1>
3434
this.widgets = controller.widgets;
3535

3636
this.afterAddWidget = function (items) {
37-
if (grid == null) {
38-
grid = $(componentInfo.element).find('.grid-stack').gridstack({
39-
auto: false
40-
}).data('gridstack');
37+
if (!grid ) {
38+
grid = $(componentInfo.element).find('.grid-stack').gridstack({auto: false});
4139
}
4240

4341
var item = items.find(function (i) { return i.nodeType == 1 });

‎demo/knockout2.html‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,8 @@ <h1>knockout.js Demo</h1>
3434
this.widgets = controller.widgets;
3535

3636
this.afterAddWidget = function (items) {
37-
if (grid == null) {
38-
grid = $(componentInfo.element).find('.grid-stack').gridstack({
39-
auto: false
40-
}).data('gridstack');
37+
if (!grid) {
38+
grid = $(componentInfo.element).find('.grid-stack').gridstack({auto: false});
4139
}
4240

4341
var item = items.find(function (i) { return i.nodeType == 1 });

‎demo/nested.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,9 +65,9 @@ <h1>Nested grids demo</h1>
6565
dragOut: true // let us drag them out!
6666
};
6767
$('.grid-stack.top').gridstack();
68-
var grid1 = $('.grid-stack.nested1').gridstack(nestOptions).data('gridstack');
68+
var grid1 = $('.grid-stack.nested1').gridstack(nestOptions);
6969
nestOptions.dragOut = false;
70-
var grid2 = $('.grid-stack.nested2').gridstack(nestOptions).data('gridstack');
70+
var grid2 = $('.grid-stack.nested2').gridstack(nestOptions);
7171

7272
var count = 9;
7373
addNewWidget = function(grid) {

‎demo/responsive.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ <h1>Responsive grid demo</h1>
2626
$(function () {
2727
var grid = $('.grid-stack').gridstack({
2828
disableOneColumnMode: true, // will manually do 1 column
29-
float: true }).data('gridstack');
29+
float: true });
3030
var $text = $('#column-text');
3131

3232
function resizeGrid() {

‎demo/right-to-left(rtl).html‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,8 @@ <h1>RTL Demo</h1>
3939
this.widgets = controller.widgets;
4040

4141
this.afterAddWidget = function (items) {
42-
if (grid == null) {
43-
grid = $(componentInfo.element).find('.grid-stack').gridstack({
44-
auto: false
45-
}).data('gridstack');
42+
if (!grid) {
43+
grid = $(componentInfo.element).find('.grid-stack').gridstack({auto: false});
4644
}
4745

4846
var item = items.find(function (i) { return i.nodeType == 1 });

‎demo/serialization.html‎

Lines changed: 41 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,8 @@ <h1>Serialization demo</h1>
2828
<script type="text/javascript">
2929
$(function () {
3030
var $grid = $('.grid-stack');
31-
31+
var grid = $grid.gridstack();
32+
3233
$grid.on('added', function(e, items) { log(' added ', items) });
3334
$grid.on('removed', function(e, items) { log(' removed ', items) });
3435
$grid.on('change', function(e, items) { log(' change ', items) });
@@ -39,59 +40,50 @@ <h1>Serialization demo</h1>
3940
console.log(type + items.length + ' items.' + str );
4041
}
4142

42-
$grid.gridstack();
43+
var serializedData = [
44+
{x: 0, y: 0, width: 2, height: 2},
45+
{x: 3, y: 1, width: 1, height: 2},
46+
{x: 4, y: 1, width: 1, height: 1},
47+
{x: 2, y: 3, width: 3, height: 1},
48+
{x: 1, y: 4, width: 1, height: 1},
49+
{x: 1, y: 3, width: 1, height: 1},
50+
{x: 2, y: 4, width: 1, height: 1},
51+
{x: 2, y: 5, width: 1, height: 1}
52+
];
4353

44-
new function () {
45-
this.serializedData = [
46-
{x: 0, y: 0, width: 2, height: 2},
47-
{x: 3, y: 1, width: 1, height: 2},
48-
{x: 4, y: 1, width: 1, height: 1},
49-
{x: 2, y: 3, width: 3, height: 1},
50-
{x: 1, y: 4, width: 1, height: 1},
51-
{x: 1, y: 3, width: 1, height: 1},
52-
{x: 2, y: 4, width: 1, height: 1},
53-
{x: 2, y: 5, width: 1, height: 1}
54-
];
55-
56-
this.grid = $('.grid-stack').data('gridstack');
57-
58-
this.loadGrid = function () {
59-
this.grid.removeAll();
60-
var items = GridStackUI.Utils.sort(this.serializedData);
61-
this.grid.batchUpdate();
62-
items.forEach(function (node) {
63-
this.grid.addWidget($('<div><div class="grid-stack-item-content"></div></div>'), node);
64-
}, this);
65-
this.grid.commit();
66-
return false;
67-
}.bind(this);
54+
loadGrid = function () {
55+
grid.removeAll();
56+
var items = GridStackUI.Utils.sort(serializedData);
57+
grid.batchUpdate();
58+
items.forEach(function (node) {
59+
grid.addWidget($('<div><div class="grid-stack-item-content"></div></div>'), node);
60+
});
61+
grid.commit();
62+
};
6863

69-
this.saveGrid = function () {
70-
this.serializedData = $('.grid-stack > .grid-stack-item:visible').map(function (i, el) {
71-
el = $(el);
72-
var node = el.data('_gridstack_node');
73-
return {
74-
x: node.x,
75-
y: node.y,
76-
width: node.width,
77-
height: node.height
78-
};
79-
}).toArray();
80-
$('#saved-data').val(JSON.stringify(this.serializedData, null, ' '));
81-
return false;
82-
}.bind(this);
64+
saveGrid = function () {
65+
serializedData = $('.grid-stack > .grid-stack-item:visible').map(function (i, el) {
66+
el = $(el);
67+
var node = el.data('_gridstack_node');
68+
return {
69+
x: node.x,
70+
y: node.y,
71+
width: node.width,
72+
height: node.height
73+
};
74+
}).toArray();
75+
$('#saved-data').val(JSON.stringify(serializedData, null, ' '));
76+
};
8377

84-
this.clearGrid = function () {
85-
this.grid.removeAll();
86-
return false;
87-
}.bind(this);
78+
clearGrid = function () {
79+
grid.removeAll();
80+
}
8881

89-
$('#save-grid').click(this.saveGrid);
90-
$('#load-grid').click(this.loadGrid);
91-
$('#clear-grid').click(this.clearGrid);
82+
$('#save-grid').click(saveGrid);
83+
$('#load-grid').click(loadGrid);
84+
$('#clear-grid').click(clearGrid);
9285

93-
this.loadGrid();
94-
};
86+
loadGrid();
9587
});
9688
</script>
9789
</body>

0 commit comments

Comments
 (0)