Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit e0d7e50

Browse files
adumesnyadumesny
committed
save(false, false) fixes
fix gridstack#1795 * save(false) will no longer have .content field fix gridstack#1782 * save(false, false) now correctly saves nested grids and not actual data structure * updated demos and test cases for these
1 parent 2299ca5 commit e0d7e50

File tree

8 files changed

+62
-36
lines changed

8 files changed

+62
-36
lines changed

‎demo/float.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,12 @@ <h1>Float grid demo</h1>
5454
document.querySelector('#float').innerHTML = 'float: ' + grid.getFloat();
5555
};
5656
addNewWidget();
57+
addNewWidget();
58+
59+
grid.enable();
60+
grid.save(false, true); // causes error at the end
61+
grid.disable();
62+
grid.enable();
5763
</script>
5864
</body>
5965
</html>

‎demo/nested.html

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,19 @@
2121
<div class="container-fluid">
2222
<h1>Nested grids demo</h1>
2323
<p>This example uses new v3.1 API to load the entire nested grid from JSON, and shows dragging between nested grid items (pink) vs dragging higher grid items (green)</p>
24-
<p>Note: initial v3 HTML5 release doesn't support 'dragOut:false' constrain so use jq version if you need that.</p>
24+
<p>Note: HTML5 release doesn't yet support 'dragOut:false' constrain so use JQ version if you need that.</p>
2525
<a class="btn btn-primary" onClick="addNested()" href="#">Add Widget</a>
2626
<a class="btn btn-primary" onClick="addNewWidget('.nested1')" href="#">Add Widget Grid1</a>
2727
<a class="btn btn-primary" onClick="addNewWidget('.nested2')" href="#">Add Widget Grid2</a>
28+
<span>entire save/re-create:</span>
2829
<a class="btn btn-primary" onClick="save()" href="#">Save</a>
29-
<a class="btn btn-primary" onClick="destroy()" href="#">Clear</a>
30-
<a class="btn btn-primary" onClick="load()" href="#">Load</a>
30+
<a class="btn btn-primary" onClick="destroy()" href="#">Destroy</a>
31+
<a class="btn btn-primary" onClick="load()" href="#">Create</a>
32+
<span>partial save/load:</span>
33+
<a class="btn btn-primary" onClick="save(true, false)" href="#">Save list</a>
34+
<a class="btn btn-primary" onClick="save(false, false)" href="#">Save no content</a>
35+
<a class="btn btn-primary" onClick="destroy(false)" href="#">Clear</a>
36+
<a class="btn btn-primary" onClick="load(false)" href="#">Load</a>
3137
<br><br>
3238
<!-- grid will be added here -->
3339
</div>
@@ -45,7 +51,7 @@ <h1>Nested grids demo</h1>
4551
minWidth: 300, // min to go 1 column mode
4652
margin: 1
4753
};
48-
let json = {cellHeight: 70, children: [
54+
let json = {cellHeight: 70, minRow: 2, children: [
4955
{y:0, content: 'regular item'},
5056
{x:1, w:4, h:4, content: 'nested 1 - can drag items out', subGrid: {children: sub1, dragOut: true, class: 'nested1', ...subOptions}},
5157
{x:5, w:4, h:4, content: 'nested 2 - constrained to parent (default)', subGrid: {children: sub2, class: 'nested2', ...subOptions}},
@@ -71,17 +77,25 @@ <h1>Nested grids demo</h1>
7177
return false;
7278
};
7379

74-
save = function() {
75-
json = grid.save(false, true);
80+
save = function(content = true, full = true) {
81+
json = grid.save(content, full);
7682
console.log(json);
7783
// console.log(JSON.stringify(json));
7884
}
79-
destroy = function() {
80-
grid.destroy();
81-
grid = undefined;
85+
destroy = function(full = true) {
86+
if (full) {
87+
grid.destroy();
88+
grid = undefined;
89+
} else {
90+
grid.removeAll();
91+
}
8292
}
83-
load = function() {
84-
grid = GridStack.addGrid(document.querySelector('.container-fluid'), json);
93+
load = function(full = true) {
94+
if (full) {
95+
grid = GridStack.addGrid(document.querySelector('.container-fluid'), json);
96+
} else {
97+
grid.load(json);
98+
}
8599
}
86100

87101
</script>

‎demo/serialization.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ <h1>Serialization demo</h1>
2424
</div>
2525

2626
<script type="text/javascript">
27-
let grid = GridStack.init({minRow: 1}); // don't let it collapse when empty
27+
let grid = GridStack.init({minRow: 1, cellHeight: 70}); // don't let it collapse when empty
2828

2929
grid.on('added removed change', function(e, items) {
3030
let str = '';

‎doc/CHANGES.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,8 @@ Change log
6363

6464
* fix [#1784](https://github.com/gridstack/gridstack.js/issues/1784) `removable:true` working by itself (without needing `acceptWidgets:true`)
6565
* fix [#1791](https://github.com/gridstack/gridstack.js/pull/1791) removed drag flicker and scroll issue. Thanks [@nelsieborja](https://github.com/nelsieborja)
66-
* better doc for save [#1795](https://github.com/gridstack/gridstack.js/issues/1795)
66+
* fix [#1795](https://github.com/gridstack/gridstack.js/issues/1795) `save(false)` will no longer have `.content` field (removed existing one if present)
67+
* fix [#1782](https://github.com/gridstack/gridstack.js/issues/1782) `save(false, false)` now correctly saves nested grids
6768

6869
## 4.2.5 (2021-5-31)
6970

‎doc/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -525,7 +525,7 @@ Enables/Disables user resizing of specific grid element. If you want all items,
525525
### `save(saveContent = true, saveGridOpt = false): GridStackWidget[] | GridStackOptions`
526526

527527
saves the current layout returning a list of widgets for serialization which might include any nested grids.
528-
- `saveContent` if true (default) the latest html inside `.grid-stack-content` will be saved to `GridStackWidget.content` field, else it will be left unchanged for initial load values.
528+
- `saveContent` if true (default) the latest html inside `.grid-stack-content` will be saved to `GridStackWidget.content` field, else it will be removed.
529529
- `saveGridOpt` if true (default `false`), save the grid options itself, so you can call the new `GridStack.addGrid()` to recreate everything from scratch. GridStackOptions.children would then contain the widget list instead.
530530
- returns list of widgets or full grid option, including .children list of widgets
531531
- see [serialization](http://gridstackjs.com/demo/serialization.html) and [nested](http://gridstackjs.com/demo/nested.html)

‎spec/gridstack-spec.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1744,14 +1744,21 @@ describe('gridstack', function() {
17441744
document.body.removeChild(document.getElementById('gs-cont'));
17451745
});
17461746
it('save layout', function() {
1747-
let grid = GridStack.init();
1747+
let grid = GridStack.init({maxRow: 10});
17481748
let layout = grid.save(false);
17491749
expect(layout).toEqual([{x:0, y:0, w:4, h:2, id:'gsItem1'}, {x:4, y:0, w:4, h:4, id:'gsItem2'}]);
17501750
layout = grid.save();
17511751
expect(layout).toEqual([{x:0, y:0, w:4, h:2, id:'gsItem1', content:'item 1 text'}, {x:4, y:0, w:4, h:4, id:'gsItem2', content:'item 2 text'}]);
17521752
layout = grid.save(true);
17531753
expect(layout).toEqual([{x:0, y:0, w:4, h:2, id:'gsItem1', content:'item 1 text'}, {x:4, y:0, w:4, h:4, id:'gsItem2', content:'item 2 text'}]);
17541754
});
1755+
it('save layout full', function() {
1756+
let grid = GridStack.init({maxRow: 10, _foo: 'bar'} as any); // using bogus 'internal' field (stripped)
1757+
let layout = grid.save(false, true);
1758+
expect(layout).toEqual({maxRow: 10, children: [{x:0, y:0, w:4, h:2, id:'gsItem1'}, {x:4, y:0, w:4, h:4, id:'gsItem2'}]});
1759+
layout = grid.save(true, true);
1760+
expect(layout).toEqual({maxRow: 10, children: [{x:0, y:0, w:4, h:2, id:'gsItem1', content:'item 1 text'}, {x:4, y:0, w:4, h:4, id:'gsItem2', content:'item 2 text'}]});
1761+
});
17551762
it('load move 1 item, delete others', function() {
17561763
let grid = GridStack.init();
17571764
grid.load([{x:2, h:1, id:'gsItem2'}]);

‎src/gridstack.ts

Lines changed: 15 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -443,7 +443,7 @@ export class GridStack {
443443
/**
444444
* saves the current layout returning a list of widgets for serialization which might include any nested grids.
445445
* @param saveContent if true (default) the latest html inside .grid-stack-content will be saved to GridStackWidget.content field, else it will
446-
* be left unchanged for initial load values.
446+
* be removed.
447447
* @param saveGridOpt if true (default false), save the grid options itself, so you can call the new GridStack.addGrid()
448448
* to recreate everything from scratch. GridStackOptions.children would then contain the widget list instead.
449449
* @returns list of widgets or full grid option, including .children list of widgets
@@ -452,28 +452,24 @@ export class GridStack {
452452
// return copied nodes we can modify at will...
453453
let list = this.engine.save(saveContent);
454454

455-
// check for HTML content as well
456-
if (saveContent) {
457-
list.forEach(n => {
458-
if (n.el && !n.subGrid) { // sub-grid are saved differently, not plain content
459-
let sub = n.el.querySelector('.grid-stack-item-content');
460-
n.content = sub ? sub.innerHTML : undefined;
461-
if (!n.content) delete n.content;
462-
delete n.el;
455+
// check for HTML content and nested grids
456+
list.forEach(n => {
457+
if (saveContent && n.el && !n.subGrid) { // sub-grid are saved differently, not plain content
458+
let sub = n.el.querySelector('.grid-stack-item-content');
459+
n.content = sub ? sub.innerHTML : undefined;
460+
if (!n.content) delete n.content;
461+
} else {
462+
if (!saveContent) { delete n.content; }
463+
// check for nested grid
464+
if (n.subGrid) {
465+
n.subGrid = (n.subGrid as GridStack).save(saveContent, true) as GridStackOptions;
463466
}
464-
});
465-
}
467+
}
468+
delete n.el;
469+
});
466470

467471
// check if save entire grid options (needed for recursive) + children...
468472
if (saveGridOpt) {
469-
470-
// check for nested grid
471-
list.forEach(n => {
472-
if (n.subGrid) {
473-
n.subGrid = (n.subGrid as GridStack).save(saveContent, saveGridOpt) as GridStackOptions;
474-
}
475-
})
476-
477473
let o: GridStackOptions = {...this.opts};
478474
// delete default values that will be recreated on launch
479475
if (o.marginBottom === o.marginTop && o.marginRight === o.marginLeft && o.marginTop === o.marginRight) {

‎src/utils.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -243,12 +243,14 @@ export class Utils {
243243
if (typeof a !== 'object' || typeof b !== 'object') return;
244244
for (let key in a) {
245245
let val = a[key];
246-
if (val && typeof val === 'object' && b[key] !== undefined) {
246+
if (key[0] === '_' || val === b[key]) {
247+
delete a[key]
248+
} else if (val && typeof val === 'object' && b[key] !== undefined) {
247249
for (let i in val) {
248250
if (val[i] === b[key][i] || i[0] === '_') { delete val[i] }
249251
}
250252
if (!Object.keys(val).length) { delete a[key] }
251-
} else if (val === b[key] || key[0] === '_') { delete a[key] }
253+
}
252254
}
253255
}
254256

0 commit comments

Comments
 (0)