Skip to content

Commit 967faf0

Browse files
adumesnyadumesny
committed
save() will now optionally save grid HTML content
fix for #1418 * `save(saveContent = true)` now lets you optionally save the HTML content in the node property, with load() restoring it * `addWidget(opt)` now handles just passing a `GridStackWidget` which creates the default divs, simplifying your code. Old API still supported. * fixed all demos and test case to use newer API
1 parent 5111f99 commit 967faf0

20 files changed

+159
-172
lines changed

‎README.md‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ creating items dynamically...
112112

113113
// ...in your script
114114
var grid = GridStack.init();
115-
grid.addWidget('<div><div class="grid-stack-item-content">Item 1</div></div>', {width: 2});
115+
grid.addWidget({width: 2, content: 'item 1'});
116116
```
117117

118118
... or creating from list
@@ -121,8 +121,8 @@ grid.addWidget('<div><div class="grid-stack-item-content">Item 1</div></div>', {
121121
// using serialize data instead of .addWidget()
122122
const serializedData = [
123123
{x: 0, y: 0, width: 2, height: 2},
124-
{x: 2, y: 3, width: 3, height: 1},
125-
{x: 1, y: 3, width: 1, height: 1}
124+
{x: 2, y: 3, width: 3, content: 'item 2'},
125+
{x: 1, y: 3}
126126
];
127127

128128
grid.load(serializedData);
@@ -370,12 +370,13 @@ v2.x is a Typescript rewrite of 1.x, removing all jquery events, using classes a
370370
371371
1. In general methods that used no args (getter) vs setter can't be used in TS when the arguments differ (set/get are also not function calls so API would have changed). Instead we decided to have <b>all set methods return</b> `GridStack` to they can be chain-able (ex: `grid.float(true).cellHeight(10).column(6)`). Also legacy methods that used to take many parameters will now take a single object (typically `GridStackOptions` or `GridStackWidget`).
372372
373-
```
373+
```js
374374
`addWidget(el, x, y, width, height)` --> `addWidget(el, {with: 2})`
375-
`float()` to get value --> `getFloat()`
376-
'cellHeight()` to get value --> `getCellHeight()`
377-
'verticalMargin' is now 'margin' grid options and API that applies to all 4 sides.
378-
'verticalMargin()` to get value --> `getMargin()`
375+
// Note: in 2.1.x you can now just do addWidget({with: 2, content: "text"})
376+
`float()` --> `getFloat()` // to get value
377+
`cellHeight()` --> `getCellHeight()` // to get value
378+
`verticalMargin` --> `margin` // grid options and API that applies to all 4 sides.
379+
`verticalMargin()` --> `getMargin()` // to get value
379380
```
380381
381382
2. event signatures are generic and not jquery-ui dependent anymore. `gsresizestop` has been removed as `resizestop|dragstop` are now called **after** the DOM attributes have been updated.

‎demo/advance.html‎

Lines changed: 17 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@
2020
opacity: 0.8;
2121
filter: blur(5px);
2222
}
23-
2423
#trash {
2524
background: rgba(255, 0, 0, 0.4);
2625
}
@@ -51,57 +50,12 @@ <h1>Advanced Demo</h1>
5150
</div>
5251
</div>
5352
<div class="col-sm-12 col-md-10">
54-
<div class="grid-stack" data-gs-animate="yes">
55-
<div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="2">
56-
<div class="grid-stack-item-content">1</div>
57-
</div>
58-
<div class="grid-stack-item" data-gs-x="4" data-gs-y="0" data-gs-width="4" data-gs-height="4"
59-
data-gs-no-move="yes" data-gs-no-resize="yes" data-gs-locked="yes">
60-
<div class="grid-stack-item-content">I can't be moved or dragged!
61-
<br>
62-
<ion-icon name="ios-lock" style="font-size:300%"></ion-icon>
63-
</div>
64-
</div>
65-
<div class="grid-stack-item" data-gs-x="8" data-gs-y="0" data-gs-width="2" data-gs-height="2"
66-
data-gs-min-width="2" data-gs-no-resize="yes">
67-
<div class="grid-stack-item-content" style="overflow: hidden">
68-
<p class="card-text text-center" style="margin-bottom: 0">
69-
Drag me!
70-
<p class="card-text text-center" style="margin-bottom: 0">
71-
<ion-icon name="hand" style="font-size: 300%"></ion-icon>
72-
<p class="card-text text-center" style="margin-bottom: 0">
73-
...but don't resize me!
74-
</div>
75-
</div>
76-
<div class="grid-stack-item" data-gs-x="10" data-gs-y="0" data-gs-width="2" data-gs-height="2">
77-
<div class="grid-stack-item-content"> 4</div>
78-
</div>
79-
<div class="grid-stack-item" data-gs-x="0" data-gs-y="2" data-gs-width="2" data-gs-height="2">
80-
<div class="grid-stack-item-content">5</div>
81-
</div>
82-
<div class="grid-stack-item" data-gs-x="2" data-gs-y="2" data-gs-width="2" data-gs-height="4">
83-
<div class="grid-stack-item-content">6</div>
84-
</div>
85-
<div class="grid-stack-item" data-gs-x="8" data-gs-y="2" data-gs-width="4" data-gs-height="2">
86-
<div class="grid-stack-item-content">7</div>
87-
</div>
88-
<div class="grid-stack-item" data-gs-x="0" data-gs-y="4" data-gs-width="2" data-gs-height="2">
89-
<div class="grid-stack-item-content">8</div>
90-
</div>
91-
<div class="grid-stack-item" data-gs-x="4" data-gs-y="4" data-gs-width="4" data-gs-height="2">
92-
<div class="grid-stack-item-content">9</div>
93-
</div>
94-
<div class="grid-stack-item" data-gs-x="8" data-gs-y="4" data-gs-width="2" data-gs-height="2">
95-
<div class="grid-stack-item-content">10</div>
96-
</div>
97-
<div class="grid-stack-item" data-gs-x="10" data-gs-y="4" data-gs-width="2" data-gs-height="2">
98-
<div class="grid-stack-item-content">11</div>
99-
</div>
100-
</div>
53+
<div class="grid-stack"></div>
10154
</div>
10255
</div>
10356

10457
<script type="text/javascript">
58+
10559
let grid = GridStack.init({
10660
alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
10761
navigator.userAgent
@@ -116,6 +70,21 @@ <h1>Advanced Demo</h1>
11670
removeTimeout: 100,
11771
});
11872

73+
let items = [
74+
{x: 0, y: 0, width: 4, height: 2, content: '1'},
75+
{x: 4, y: 0, width: 4, height: 4, noMove: true, noResize: true, locked: true, content: 'I can\'t be moved or dragged!<br><ion-icon name="ios-lock" style="font-size:300%"></ion-icon>'},
76+
{x: 8, y: 0, width: 2, height: 2, minWidth: 2, noResize: true, content: '<p class="card-text text-center" style="margin-bottom: 0">Drag me!<p class="card-text text-center"style="margin-bottom: 0"><ion-icon name="hand" style="font-size: 300%"></ion-icon><p class="card-text text-center" style="margin-bottom: 0">...but don\'t resize me!'},
77+
{x: 10, y: 0, width: 2, height: 2, content: '4'},
78+
{x: 0, y: 2, width: 2, height: 2, content: '5'},
79+
{x: 2, y: 2, width: 2, height: 4, content: '6'},
80+
{x: 8, y: 2, width: 4, height: 2, content: '7'},
81+
{x: 0, y: 4, width: 2, height: 2, content: '8'},
82+
{x: 4, y: 4, width: 4, height: 2, content: '9'},
83+
{x: 8, y: 4, width: 2, height: 2, content: '10'},
84+
{x: 10, y: 4, width: 2, height: 2, content: '11'},
85+
];
86+
grid.load(items);
87+
11988
grid.on('added removed change', function(e, items) {
12089
let str = '';
12190
items.forEach(function(item) { str += ' (x,y)=' + item.x + ',' + item.y; });

‎demo/anijs.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ <h4>Widget added</h4>
3838
});
3939

4040
function addWidget() {
41-
grid.addWidget('<div><div class="grid-stack-item-content"></div></div>', {width: Math.floor(1 + 3 * Math.random()), height: Math.floor(1 + 3 * Math.random())});
41+
grid.addWidget({width: Math.floor(1 + 3 * Math.random()), height: Math.floor(1 + 3 * Math.random())});
4242
};
4343

4444
let animationHelper = AniJS.getHelper();

‎demo/column.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,8 +68,8 @@ <h1>column() grid demo</h1>
6868
width: Math.round(1 + 3 * Math.random()),
6969
height: Math.round(1 + 3 * Math.random())
7070
};
71-
grid.addWidget('<div><div class="grid-stack-item-content"><button onClick="grid.removeWidget(this.parentNode.parentNode)">X</button><br>'
72-
+ count++ + (n.text ? n.text : '') + '</div></div>', n);
71+
n.content = '<button onClick="grid.removeWidget(this.parentNode.parentNode)">X</button><br>' + count++ + (n.text ? n.text : '');
72+
grid.addWidget(n);
7373
};
7474

7575
function column(n) {

‎demo/float.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,13 +35,14 @@ <h1>Float grid demo</h1>
3535
let count = 0;
3636

3737
addNewWidget = function() {
38-
let node = items[count] || {
38+
let n = items[count] || {
3939
x: Math.round(12 * Math.random()),
4040
y: Math.round(5 * Math.random()),
4141
width: Math.round(1 + 3 * Math.random()),
4242
height: Math.round(1 + 3 * Math.random())
4343
};
44-
grid.addWidget('<div><div class="grid-stack-item-content">' + count++ + '</div></div>', node);
44+
n.content = String(count++);
45+
grid.addWidget(n);
4546
};
4647

4748
toggleFloat = function() {

‎demo/locked.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,8 @@ <h1>Locked demo</h1>
4646
width: Math.round(1 + 3 * Math.random()),
4747
height: Math.round(1 + 3 * Math.random())
4848
};
49-
grid.addWidget('<div><div class="grid-stack-item-content">' + (n.text ? n.text : count) + '</div></div>', n);
49+
n.content = n.text ? n.text : String(count);
50+
grid.addWidget(n);
5051
count++
5152
};
5253

‎demo/nested.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ <h1>Nested grids demo</h1>
7373
width: Math.round(1 + 3 * Math.random()),
7474
height: Math.round(1 + 3 * Math.random())
7575
};
76+
// Note: we have additional style .sub here so add the HTML passed directly...
7677
grid.addWidget('<div class="grid-stack-item sub"><div class="grid-stack-item-content">' + count++ + '</div></div>', node);
7778
return false;
7879
};

‎demo/responsive.html‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -45,18 +45,14 @@ <h1>Responsive grid demo</h1>
4545
};
4646

4747
let items = [
48-
{x: 0, y: 0, width: 2, height: 2},
49-
{x: 2, y: 0, width: 2, height: 1},
50-
{x: 5, y: 0, width: 1, height: 1},
51-
{x: 1, y: 3, width: 4, height: 1},
52-
{x: 5, y: 2, width: 2, height: 1},
53-
{x: 0, y: 4, width: 12, height: 1}
48+
{x: 0, y: 0, width: 2, height: 2, content: '0'},
49+
{x: 2, y: 0, width: 2, content: '1'},
50+
{x: 5, y: 0, content: '2'},
51+
{x: 1, y: 3, width: 4, content: '3'},
52+
{x: 5, y: 2, width: 2, content: '4'},
53+
{x: 0, y: 4, width: 12, content: '5'}
5454
];
55-
grid.batchUpdate();
56-
items.forEach(function(node, index) {
57-
grid.addWidget('<div><div class="grid-stack-item-content">' + index + '</div></div>', node);
58-
});
59-
grid.commit();
55+
grid.load(items);
6056
resizeGrid();
6157

6258
window.addEventListener('resize', function() {resizeGrid()});

‎demo/serialization.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,8 @@ <h1>Serialization demo</h1>
3333
});
3434

3535
let serializedData = [
36-
{x: 0, y: 0, width: 2, height: 2, id: '0'},
37-
{x: 3, y: 1, width: 1, height: 2, id: '1'},
36+
{x: 0, y: 0, width: 2, height: 2, id: '0', content: "big 2x2"},
37+
{x: 3, y: 1, width: 1, height: 2, id: '1', content: "<button onclick=\"alert('clicked!')\">Press me</button>"},
3838
{x: 4, y: 1, width: 1, height: 1, id: '2'},
3939
{x: 2, y: 3, width: 3, height: 1, id: '3'},
4040
{x: 1, y: 3, width: 1, height: 1, id: '4'}
@@ -59,7 +59,7 @@ <h1>Serialization demo</h1>
5959
if (grid.engine.nodes.length === 0) {
6060
// load from empty
6161
items.forEach(function (item) {
62-
grid.addWidget('<div><div class="grid-stack-item-content">' + item.id + '</div></div>', item);
62+
grid.addWidget('<div class="grid-stack-item"><div class="grid-stack-item-content">' + item.id + '</div></div>', item);
6363
});
6464
} else {
6565
// else update existing nodes (instead of calling grid.removeAll())

‎demo/two.html‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -101,18 +101,14 @@ <h1>Two grids demo</h1>
101101
let items = [
102102
{x: 0, y: 0, width: 2, height: 2},
103103
{x: 3, y: 1, width: 1, height: 2},
104-
{x: 4, y: 1, width: 1, height: 1},
105-
{x: 2, y: 3, width: 3, height: 1, maxWidth: 3, id: 'special', text: 'has maxWidth=3'},
106-
{x: 2, y: 5, width: 1, height: 1}
104+
{x: 4, y: 1, width: 1},
105+
{x: 2, y: 3, width: 3, maxWidth: 3, id: 'special', content: 'has maxWidth=3'},
106+
{x: 2, y: 5, width: 1}
107107
];
108108

109109
grids.forEach(function (grid, i) {
110110
addEvents(grid, i);
111-
grid.batchUpdate();
112-
items.forEach(function (node) {
113-
grid.addWidget('<div><div class="grid-stack-item-content">' + (node.text? node.text : '') + '</div></div>', node);
114-
});
115-
grid.commit();
111+
grid.load(items);
116112
});
117113

118114
function toggleFloat(button, i) {

0 commit comments

Comments
 (0)