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

Skip to content

Commit e40ab18

Browse files
adumesnyadumesny
authored
Merge pull request gridstack#2069 from adumesny/gh-pages
web v7.0.0
2 parents 98af004 + 60eab15 commit e40ab18

15 files changed

+172
-70
lines changed

‎demo/column.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ <h1>column() grid demo (fix cellHeight)</h1>
9494
}
9595
function setOneColumn(dom) {
9696
if (grid.opts.column === 1 && grid.opts.oneColumnModeDomSort !== dom) {
97-
column(12); // go back to 12 before going to new column1 version
97+
column(12); // go ack to 12 before going to new column1 version
9898
}
9999
grid.opts.oneColumnModeDomSort = dom;
100100
grid.column(1, layout);

‎demo/demo.css

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,3 +60,16 @@ h1 {
6060
.sidebar .grid-stack-item .grid-stack-item-content {
6161
background: none;
6262
}
63+
64+
/* make nested grid have slightly darker bg take almost all space (need some to tell them apart) so items inside can have similar to external size+margin */
65+
.grid-stack > .grid-stack-item.grid-stack-sub-grid > .grid-stack-item-content {
66+
background: rgba(0,0,0,0.1);
67+
inset: 0 2px;
68+
}
69+
.grid-stack.grid-stack-nested {
70+
background: none;
71+
/* background-color: red; */
72+
/* take entire space */
73+
position: absolute;
74+
inset: 0; /* TODO change top: if you have content in nested grid */
75+
}

‎demo/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ <h1>Demos</h1>
1616
<li><a href="knockout.html">Knockout.js</a></li>
1717
<li><a href="mobile.html">Mobile touch (JQ)</a></li>
1818
<li><a href="nested.html">Nested grids</a></li>
19+
<li><a href="nested_constraint.html">Nested Constraint grids</a></li>
1920
<li><a href="nested_advanced.html">Nested Advanced grids</a></li>
2021
<li><a href="react-hooks.html">ReactJS (Hooks)</a></li>
2122
<li><a href="react.html">ReactJS</a></li>

‎demo/nested.html

Lines changed: 1 addition & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,29 +4,10 @@
44
<meta charset="utf-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1">
7-
<title>Nested grids demo (ES6)</title>
7+
<title>Nested grids demo</title>
88
<link rel="stylesheet" href="demo.css"/>
99
<link rel="stylesheet" href="../node_modules/gridstack/dist/gridstack-extra.min.css"/>
1010
<script src="../node_modules/gridstack/dist/gridstack-all.js"></script>
11-
<style type="text/css">
12-
/* make nested grids have slightly darker bg */
13-
.grid-stack.grid-stack-nested {
14-
background: #e4e4c1;
15-
}
16-
/* make nested grid take almost all space (need some to tell them apart) so items inside can have similar to external size+margin */
17-
.grid-stack > .grid-stack-item.grid-stack-nested > .grid-stack-item-content {
18-
/* inset: 0 2px; not IE */
19-
top: 0;
20-
bottom: 0;
21-
left: 2px;
22-
right: 2px;
23-
}
24-
/* make nested grid take entire item content */
25-
.grid-stack-item-content .grid-stack {
26-
min-height: 100%;
27-
min-width: 100%;
28-
}
29-
</style>
3011
</head>
3112
<body>
3213
<div class="container-fluid">

‎demo/nested_advanced.html

Lines changed: 37 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -4,30 +4,26 @@
44
<meta charset="utf-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1">
7-
<title>Nested grids demo (ES6)</title>
7+
<title>Advance Nested grids demo</title>
88
<link rel="stylesheet" href="demo.css"/>
99
<link rel="stylesheet" href="../node_modules/gridstack/dist/gridstack-extra.min.css"/>
1010
<script src="../node_modules/gridstack/dist/gridstack-all.js"></script>
11-
<style type="text/css">
12-
.grid-stack.grid-stack-nested {
13-
background: rgba(255, 255, 255, 0.3);
14-
}
15-
.grid-stack-item.sub .grid-stack-item-content {
16-
background: lightpink;
17-
}
18-
</style>
1911
</head>
2012
<body>
2113
<div class="container-fluid">
2214
<h1>Advanced Nested grids demo</h1>
23-
<p>This example shows sub-grids only accepting pink items, while parent accept all.</p>
24-
<a class="btn btn-primary" onClick="addNested()" href="#">Add Widget</a>
25-
<a class="btn btn-primary" onClick="addNewWidget('.sub1')" href="#">Add Widget Grid1</a>
26-
<a class="btn btn-primary" onClick="addNewWidget('.sub2')" href="#">Add Widget Grid2</a>
15+
<p>Create sub-grids (darker background) on the fly, by dragging items completely over others (nest) vs partially (push) using
16+
the new v7 API <code>GridStackOptions.subGridDynamic=true</code></p>
17+
<p>This will use the new delay drag&drop option <code>DDDragOpt.pause</code> to tell the gesture difference</p>
18+
<p>Note: <code>gridstack-extra.min.css</code> is required for [2-11] column of sub-grids</p>
19+
<a class="btn btn-primary" onClick="addMainWidget()" href="#">Add Widget</a>
20+
<a class="btn btn-primary" onClick="addNewWidget(0)" href="#">Add W Grid0</a>
21+
<a class="btn btn-primary" onClick="addNewWidget(1)" href="#">Add W Grid1</a>
22+
<a class="btn btn-primary" onClick="addNewWidget(2)" href="#">Add W Grid2</a>
2723
<span>entire save/re-create:</span>
2824
<a class="btn btn-primary" onClick="save()" href="#">Save</a>
2925
<a class="btn btn-primary" onClick="destroy()" href="#">Destroy</a>
30-
<a class="btn btn-primary" onClick="load()" href="#">Create</a>
26+
<a class="btn btn-primary" onClick="load()" href="#">Load</a>
3127
<span>partial save/load:</span>
3228
<a class="btn btn-primary" onClick="save(true, false)" href="#">Save list</a>
3329
<a class="btn btn-primary" onClick="save(false, false)" href="#">Save no content</a>
@@ -38,65 +34,69 @@ <h1>Advanced Nested grids demo</h1>
3834
</div>
3935

4036
<script type="text/javascript">
41-
let sub1 = [ {x:0, y:0}, {x:1, y:0}, {x:2, y:0}, {x:3, y:0}, {x:0, y:1}, {x:1, y:1}];
42-
let sub2 = [ {x:0, y:0}, {x:0, y:1, w:2}];
43-
let count = 0;
44-
[...sub1, ...sub2].forEach(d => d.content = String(count++));
4537
let subOptions = {
46-
cellHeight: 50,
38+
cellHeight: 50, // should be 50 - top/bottom
4739
column: 'auto', // size to match container. make sure to include gridstack-extra.min.css
48-
itemClass: 'sub', // style sub items differently and use to prevent dragging in/out
49-
acceptWidgets: '.grid-stack-item.sub', // only pink sub items can be inserted
50-
margin: 2,
51-
minRow: 1, // don't collapse when empty
40+
acceptWidgets: true, // will accept .grid-stack-item by default
41+
margin: 5,
42+
subGridDynamic: true, // make it recursive for all future sub-grids
5243
};
44+
let main = [{x:0, y:0}, {x:0, y:1}, {x:1, y:0}]
45+
let sub1 = [{x:0, y:0}];
46+
let sub0 = [{x:0, y:0}, {x:1, y:0}];
47+
// let sub0 = [{x:0, y:0}, {x:1, y:0}, {x:1, y:1, h:2, subGrid: {children: sub1, ...subOptions}}];
5348
let options = { // main grid options
5449
cellHeight: 50,
5550
margin: 5,
5651
minRow: 2, // don't collapse when empty
5752
acceptWidgets: true,
58-
id: 'main',
53+
subGrid: subOptions,
54+
subGridDynamic: true, // v7 api to create sub-grids on the fly
5955
children: [
60-
{y:0, content: 'regular item'},
61-
{x:1, w:4, h:4, content: 'nested 1 - can drag items out', subGrid: {children: sub1, dragOut: true, class: 'sub1', ...subOptions}},
62-
{x:5, w:4, h:4, content: 'nested 2 - constrained to parent (JQ only)', subGrid: {children: sub2, class: 'sub2', ...subOptions}},
56+
...main,
57+
{x:2, y:0, w:2, h:3, subGrid: {children: sub0, ...subOptions}},
58+
{x:4, y:0, h:2, subGrid: {children: sub1, ...subOptions}},
59+
// {x:2, y:0, w:2, h:3, subGrid: {children: [...sub1, {x:0, y:1, subGrid: subOptions}], ...subOptions}/*,content: "<div>nested grid here</div>"*/},
6360
]
6461
};
62+
let count = 0;
63+
[...main, ...sub0, ...sub1].forEach(d => {if (!d.subGrid) d.content = String(count++)});
6564

6665
// create and load it all from JSON above
6766
let grid = GridStack.addGrid(document.querySelector('.container-fluid'), options);
6867

69-
addNested = function() {
68+
function addMainWidget() {
7069
grid.addWidget({x:0, y:100, content:"new item"});
7170
}
7271

73-
addNewWidget = function(selector) {
74-
let subGrid = document.querySelector(selector).gridstack;
72+
function addNewWidget(i) {
73+
let subGrid = document.querySelectorAll('.grid-stack-nested')[i]?.gridstack;
74+
if (!subGrid) return;
7575
let node = {
76-
x: Math.round(6 * Math.random()),
77-
y: Math.round(5 * Math.random()),
78-
w: Math.round(1 + 1 * Math.random()),
79-
h: Math.round(1 + 1 * Math.random()),
76+
// x: Math.round(6 * Math.random()),
77+
// y: Math.round(5 * Math.random()),
78+
// w: Math.round(1 + 1 * Math.random()),
79+
// h: Math.round(1 + 1 * Math.random()),
8080
content: String(count++)
8181
};
8282
subGrid.addWidget(node);
8383
return false;
8484
};
8585

86-
save = function(content = true, full = true) {
86+
function save(content = true, full = true) {
8787
options = grid.save(content, full);
8888
console.log(options);
8989
// console.log(JSON.stringify(options));
9090
}
91-
destroy = function(full = true) {
91+
function destroy(full = true) {
9292
if (full) {
9393
grid.destroy();
9494
grid = undefined;
9595
} else {
9696
grid.removeAll();
9797
}
9898
}
99-
load = function(full = true) {
99+
function load(full = true) {
100100
if (full) {
101101
grid = GridStack.addGrid(document.querySelector('.container-fluid'), options);
102102
} else {

‎demo/nested_constraint.html

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>Constraint nested grids demo</title>
8+
<link rel="stylesheet" href="demo.css"/>
9+
<link rel="stylesheet" href="../node_modules/gridstack/dist/gridstack-extra.min.css"/>
10+
<script src="../node_modules/gridstack/dist/gridstack-all.js"></script>
11+
<style type="text/css">
12+
.grid-stack-item.sub .grid-stack-item-content {
13+
background: lightpink;
14+
}
15+
</style>
16+
</head>
17+
<body>
18+
<div class="container-fluid">
19+
<h1>Constraint Nested grids demo</h1>
20+
<p>This example shows sub-grids only accepting pink items, while parent accept all.</p>
21+
<a class="btn btn-primary" onClick="addNested()" href="#">Add Widget</a>
22+
<a class="btn btn-primary" onClick="addNewWidget('.sub1')" href="#">Add Widget Grid1</a>
23+
<a class="btn btn-primary" onClick="addNewWidget('.sub2')" href="#">Add Widget Grid2</a>
24+
<span>entire save/re-create:</span>
25+
<a class="btn btn-primary" onClick="save()" href="#">Save</a>
26+
<a class="btn btn-primary" onClick="destroy()" href="#">Destroy</a>
27+
<a class="btn btn-primary" onClick="load()" href="#">Create</a>
28+
<span>partial save/load:</span>
29+
<a class="btn btn-primary" onClick="save(true, false)" href="#">Save list</a>
30+
<a class="btn btn-primary" onClick="save(false, false)" href="#">Save no content</a>
31+
<a class="btn btn-primary" onClick="destroy(false)" href="#">Clear</a>
32+
<a class="btn btn-primary" onClick="load(false)" href="#">Load</a>
33+
<br><br>
34+
<!-- grid will be added here -->
35+
</div>
36+
37+
<script type="text/javascript">
38+
let sub1 = [ {x:0, y:0}, {x:1, y:0}, {x:2, y:0}, {x:3, y:0}, {x:0, y:1}, {x:1, y:1}];
39+
let sub2 = [ {x:0, y:0}, {x:0, y:1, w:2}];
40+
let count = 0;
41+
[...sub1, ...sub2].forEach(d => d.content = String(count++));
42+
let subOptions = {
43+
cellHeight: 50,
44+
column: 'auto', // size to match container. make sure to include gridstack-extra.min.css
45+
itemClass: 'sub', // style sub items differently and use to prevent dragging in/out
46+
acceptWidgets: '.grid-stack-item.sub', // only pink sub items can be inserted
47+
margin: 2,
48+
minRow: 1, // don't collapse when empty
49+
};
50+
let options = { // main grid options
51+
cellHeight: 50,
52+
margin: 5,
53+
minRow: 2, // don't collapse when empty
54+
acceptWidgets: true,
55+
id: 'main',
56+
children: [
57+
{y:0, content: 'regular item'},
58+
{x:1, w:4, h:4, subGrid: {children: sub1, class: 'sub1', ...subOptions}},
59+
{x:5, w:4, h:4, subGrid: {children: sub2, class: 'sub2', ...subOptions}},
60+
]
61+
};
62+
63+
// create and load it all from JSON above
64+
let grid = GridStack.addGrid(document.querySelector('.container-fluid'), options);
65+
66+
addNested = function() {
67+
grid.addWidget({x:0, y:100, content:"new item"});
68+
}
69+
70+
addNewWidget = function(selector) {
71+
let subGrid = document.querySelector(selector).gridstack;
72+
let node = {
73+
x: Math.round(6 * Math.random()),
74+
y: Math.round(5 * Math.random()),
75+
w: Math.round(1 + 1 * Math.random()),
76+
h: Math.round(1 + 1 * Math.random()),
77+
content: String(count++)
78+
};
79+
subGrid.addWidget(node);
80+
return false;
81+
};
82+
83+
save = function(content = true, full = true) {
84+
options = grid.save(content, full);
85+
console.log(options);
86+
// console.log(JSON.stringify(options));
87+
}
88+
destroy = function(full = true) {
89+
if (full) {
90+
grid.destroy();
91+
grid = undefined;
92+
} else {
93+
grid.removeAll();
94+
}
95+
}
96+
load = function(full = true) {
97+
if (full) {
98+
grid = GridStack.addGrid(document.querySelector('.container-fluid'), options);
99+
} else {
100+
grid.load(options);
101+
}
102+
}
103+
104+
</script>
105+
</body>
106+
</html>

‎demo/serialization.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,14 +30,15 @@ <h1>Serialization demo</h1>
3030
});
3131

3232
grid.on('added removed change', function(e, items) {
33+
if (!items) return;
3334
let str = '';
3435
items.forEach(function(item) { str += ' (x,y)=' + item.x + ',' + item.y; });
3536
console.log(e.type + ' ' + items.length + ' items:' + str );
3637
});
3738

3839
let serializedData = [
3940
{x: 0, y: 0, w: 2, h: 2, id: '0'},
40-
{x: 3, y: 1, h: 2, id: '1', content: "<button onclick=\"alert('clicked!')\">Press me</button>"},
41+
{x: 3, y: 1, h: 2, id: '1', content: "<button onclick=\"alert('clicked!')\">Press me</button><div>text area</div><div><textarea></textarea></div><div>Input Field</div><input type='text'>"},
4142
{x: 4, y: 1, id: '2'},
4243
{x: 2, y: 3, w: 3, id: '3'},
4344
{x: 1, y: 3, id: '4'}

‎node_modules/gridstack/dist/es5/gridstack-all.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎node_modules/gridstack/dist/es5/gridstack-all.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎node_modules/gridstack/dist/es5/gridstack-poly.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎node_modules/gridstack/dist/gridstack-all.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎node_modules/gridstack/dist/gridstack-all.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎node_modules/gridstack/dist/gridstack.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
},
1616
"homepage": "http://gridstack.github.io/gridstack.js/",
1717
"dependencies": {
18-
"gridstack": "6.0.2"
18+
"gridstack": "7.0.0"
1919
},
2020
"devDependencies": {}
2121
}

‎yarn.lock

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
# yarn lockfile v1
33

44

5-
gridstack@6.0.2:
6-
version "6.0.2"
7-
resolved "https://registry.yarnpkg.com/gridstack/-/gridstack-6.0.2.tgz#80a34525bb6e3d2c359434e186b3394a7c283b9b"
8-
integrity sha512-23Tzimg7sKglCO+3U4HZwTOg9rgIClDwl4aEd4f7+ww0LppuknBorAht0AHz/TMLUsrNXeDxSGzgiaCkH2mHOA==
5+
gridstack@7.0.0:
6+
version "7.0.0"
7+
resolved "https://registry.yarnpkg.com/gridstack/-/gridstack-7.0.0.tgz#2d00b28efa8d22a8b9ad2640c8ab64b494bbfdc9"
8+
integrity sha512-iBts/PRuqg6OQvdpv7A84p3RROxzXVSKjM3SJHrdl2pdDZKmIpGo2oxjdCHv6l+SzU2EuptcHd1Rqouocwl1Cg==

0 commit comments

Comments
 (0)