Skip to content

Commit bd6910e

Browse files
adumesnyadumesny
authored
Merge pull request #1146 from gridstack/revert-1141-develop
Revert "`gridstack()` init method return GridStack ** BREAKING CHANGE***"
2 parents 54b5476 + 38d1dfb commit bd6910e

19 files changed

+227
-221
lines changed

‎demo/anijs.html‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,12 @@
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+
<!--
1314
<script src="../dist/jquery-ui.min.js"></script>
1415
<script src="../src/gridstack.js"></script>
1516
<script src="../src/gridstack.jQueryUI.js"></script>
17+
-->
18+
<script src="../dist/gridstack.all.js"></script>
1619
</head>
1720
<body>
1821
<div class="container-fluid">
@@ -28,8 +31,9 @@ <h4>Widget added</h4>
2831
<script src="https://cdnjs.cloudflare.com/ajax/libs/AniJS/0.9.3/anijs.js"></script>
2932
<script type="text/javascript">
3033
$(function () {
31-
var grid = $('.grid-stack').gridstack();
34+
$('.grid-stack').gridstack();
3235
var self = this;
36+
this.grid = $('.grid-stack').data('gridstack');
3337
$('.grid-stack').on('added', function(event, items) {
3438
// add anijs data to gridstack item
3539
for (var i = 0; i < items.length; i++) {
@@ -40,11 +44,15 @@ <h4>Widget added</h4>
4044
// fire added event!
4145
self.gridstackNotifier.dispatchEvent('added');
4246
});
43-
4447
$('#add-widget').click(function() {
45-
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);
48+
addNewWidget();
4649
});
4750

51+
function addNewWidget() {
52+
var grid = $('.grid-stack').data('gridstack');
53+
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+
}
55+
4856
var animationHelper = AniJS.getHelper();
4957

5058
//Defining removeAnimations to remove existing animations

‎demo/column.html‎

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

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

‎demo/float.html‎

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

2929
<script type="text/javascript">
3030
$(function () {
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);
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+
};
6064
});
6165
</script>
6266
</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 Animation</a></li>
11+
<li><a href="anijs.html">AniJS</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: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,10 @@ <h1>knockout.js Demo</h1>
3434
this.widgets = controller.widgets;
3535

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

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

‎demo/knockout2.html‎

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

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

4143
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);
68+
var grid1 = $('.grid-stack.nested1').gridstack(nestOptions).data('gridstack');
6969
nestOptions.dragOut = false;
70-
var grid2 = $('.grid-stack.nested2').gridstack(nestOptions);
70+
var grid2 = $('.grid-stack.nested2').gridstack(nestOptions).data('gridstack');
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 });
29+
float: true }).data('gridstack');
3030
var $text = $('#column-text');
3131

3232
function resizeGrid() {

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

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

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

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

‎demo/serialization.html‎

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

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-
];
42+
$grid.gridstack();
5343

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-
};
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+
];
6355

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-
};
56+
this.grid = $('.grid-stack').data('gridstack');
7757

78-
clearGrid = function () {
79-
grid.removeAll();
80-
}
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);
8168

82-
$('#save-grid').click(saveGrid);
83-
$('#load-grid').click(loadGrid);
84-
$('#clear-grid').click(clearGrid);
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);
8583

86-
loadGrid();
84+
this.clearGrid = function () {
85+
this.grid.removeAll();
86+
return false;
87+
}.bind(this);
88+
89+
$('#save-grid').click(this.saveGrid);
90+
$('#load-grid').click(this.loadGrid);
91+
$('#clear-grid').click(this.clearGrid);
92+
93+
this.loadGrid();
94+
};
8795
});
8896
</script>
8997
</body>

0 commit comments

Comments
 (0)