Skip to content

Commit 8450897

Browse files
adumesnyadumesny
committed
partial jquery nested grid workaround
* partial work to get jq nested grid to work #1998, but big issue remain. just testing example with initial workaround - just to get items to not clipp on drag overflow-x: hidden causes item clipping (see demo notes)
1 parent 6f3bb44 commit 8450897

File tree

5 files changed

+150
-12
lines changed

5 files changed

+150
-12
lines changed

‎demo/nested-jq.html‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
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>Nested JQuery grids demo (ES6)</title>
8+
<link rel="stylesheet" href="demo.css"/>
9+
<link rel="stylesheet" href="../dist/gridstack-extra.min.css"/>
10+
<script src="../dist/gridstack-jq.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>
30+
</head>
31+
<body>
32+
<div class="container-fluid">
33+
<h1>Nested JQuery grids demo</h1>
34+
<p>This is the same nested grid demo, but for Jquery which has additional work required, and options.<br>
35+
1. dragOut is implemented (second subgrid cannot drag outside, only adding item).<br>
36+
</p>
37+
<a class="btn btn-primary" onClick="addNested()" href="#">Add Widget</a>
38+
<a class="btn btn-primary" onClick="addNewWidget('.sub1')" href="#">Add Widget Grid1</a>
39+
<a class="btn btn-primary" onClick="addNewWidget('.sub2')" href="#">Add Widget Grid2</a>
40+
<span>entire save/re-create:</span>
41+
<a class="btn btn-primary" onClick="save()" href="#">Save</a>
42+
<a class="btn btn-primary" onClick="destroy()" href="#">Destroy</a>
43+
<a class="btn btn-primary" onClick="load()" href="#">Create</a>
44+
<span>partial save/load:</span>
45+
<a class="btn btn-primary" onClick="save(true, false)" href="#">Save list</a>
46+
<a class="btn btn-primary" onClick="save(false, false)" href="#">Save no content</a>
47+
<a class="btn btn-primary" onClick="destroy(false)" href="#">Clear</a>
48+
<a class="btn btn-primary" onClick="load(false)" href="#">Load</a>
49+
<br><br>
50+
<!-- grid will be added here -->
51+
</div>
52+
53+
<script type="text/javascript">
54+
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}];
55+
let sub2 = [ {x:0, y:0}, {x:0, y:1, w:2}];
56+
let count = 0;
57+
[...sub1, ...sub2].forEach(d => d.content = String(count++));
58+
let subOptions = {
59+
cellHeight: 50, // should be 50 - top/bottom
60+
column: 'auto', // size to match container. make sure to include gridstack-extra.min.css
61+
acceptWidgets: true, // will accept .grid-stack-item by default
62+
margin: 5,
63+
draggable: {
64+
scroll: false,
65+
appendTo: 'body',
66+
helper: myClone,
67+
// handle: ".grid-stack-item"
68+
// zIndex: true,
69+
}
70+
};
71+
let options = { // main grid options
72+
cellHeight: 50,
73+
margin: 5,
74+
minRow: 2, // don't collapse when empty
75+
acceptWidgets: true,
76+
id: 'main',
77+
children: [
78+
{x:0, y:0, content: 'regular item'},
79+
{x:1, w:4, h:4, subGrid: {children: sub1, dragOut: true, class: 'sub1', ...subOptions}},
80+
{x:5, w:3, h:4, subGrid: {children: sub2, dragOut: false, class: 'sub2', ...subOptions}},
81+
]
82+
};
83+
84+
// create and load it all from JSON above
85+
let grid = GridStack.addGrid(document.querySelector('.container-fluid'), options);
86+
87+
// WORK-IN_PROGRESS the target is content, but we need to drag the grid-item parent and jquery-ui needs helper
88+
// to be different, and re-parented (so it doesn't get clipped by other containers overflow-x:hidden, overflow-y:auto which are needed behavior)
89+
// but jq-ui doesn't support position:fixed
90+
function myClone(event) {
91+
let item = event.target.parentElement;
92+
item = item.cloneNode(true);
93+
grid.el.append(item)
94+
// item.style.position = 'fixed'
95+
return item;
96+
}
97+
98+
function addNested() {
99+
grid.addWidget({x:0, y:100, content:"new item"});
100+
}
101+
102+
function addNewWidget(selector) {
103+
let subGrid = document.querySelector(selector).gridstack;
104+
let node = {
105+
x: Math.round(6 * Math.random()),
106+
y: Math.round(5 * Math.random()),
107+
w: Math.round(1 + 1 * Math.random()),
108+
h: Math.round(1 + 1 * Math.random()),
109+
content: String(count++)
110+
};
111+
subGrid.addWidget(node);
112+
return false;
113+
};
114+
115+
function save(content = true, full = true) {
116+
options = grid.save(content, full);
117+
console.log(options);
118+
// console.log(JSON.stringify(options));
119+
}
120+
function destroy(full = true) {
121+
if (full) {
122+
grid.destroy();
123+
grid = undefined;
124+
} else {
125+
grid.removeAll();
126+
}
127+
}
128+
function load(full = true) {
129+
if (full) {
130+
grid = GridStack.addGrid(document.querySelector('.container-fluid'), options);
131+
} else {
132+
grid.load(options);
133+
}
134+
}
135+
136+
</script>
137+
</body>
138+
</html>

‎demo/nested.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -68,20 +68,20 @@ <h1>Nested grids demo</h1>
6868
acceptWidgets: true,
6969
id: 'main',
7070
children: [
71-
{y:0, content: 'regular item'},
72-
{x:1, w:4, h:4, subGrid: {children: sub1, dragOut: true, class: 'sub1', ...subOptions}},
71+
{x:0, y:0, content: 'regular item'},
72+
{x:1, w:4, h:4, subGrid: {children: sub1, class: 'sub1', ...subOptions}},
7373
{x:5, w:3, h:4, subGrid: {children: sub2, class: 'sub2', ...subOptions}},
7474
]
7575
};
7676

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

80-
addNested = function() {
80+
function addNested() {
8181
grid.addWidget({x:0, y:100, content:"new item"});
8282
}
8383

84-
addNewWidget = function(selector) {
84+
function addNewWidget(selector) {
8585
let subGrid = document.querySelector(selector).gridstack;
8686
let node = {
8787
x: Math.round(6 * Math.random()),
@@ -94,20 +94,20 @@ <h1>Nested grids demo</h1>
9494
return false;
9595
};
9696

97-
save = function(content = true, full = true) {
97+
function save(content = true, full = true) {
9898
options = grid.save(content, full);
9999
console.log(options);
100100
// console.log(JSON.stringify(options));
101101
}
102-
destroy = function(full = true) {
102+
function destroy(full = true) {
103103
if (full) {
104104
grid.destroy();
105105
grid = undefined;
106106
} else {
107107
grid.removeAll();
108108
}
109109
}
110-
load = function(full = true) {
110+
function load(full = true) {
111111
if (full) {
112112
grid = GridStack.addGrid(document.querySelector('.container-fluid'), options);
113113
} else {

‎src/gridstack.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ const GridDefaults: GridStackOptions = {
7070
scroll: false,
7171
appendTo: 'body'
7272
},
73+
dragOut: true,
7374
disableDrag: false,
7475
disableResize: false,
7576
rtl: 'auto',
@@ -80,7 +81,7 @@ const GridDefaults: GridStackOptions = {
8081
marginUnit: 'px',
8182
cellHeightUnit: 'px',
8283
disableOneColumnMode: false,
83-
oneColumnModeDomSort: false
84+
oneColumnModeDomSort: false,
8485
};
8586

8687
/**

‎src/h5/gridstack-dd-native.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,9 +57,8 @@ export class GridStackDDNative extends GridStackDD {
5757
dEl.setupDraggable({
5858
...grid.opts.draggable,
5959
...{
60-
containment: (grid.opts._isNested && !grid.opts.dragOut)
61-
? grid.el.parentElement
62-
: (grid.opts.draggable.containment || null),
60+
containment: (grid.opts._isNested && !grid.opts.dragOut) ?
61+
grid.el.parentElement : (grid.opts.draggable.containment || null),
6362
start: opts.start,
6463
stop: opts.stop,
6564
drag: opts.drag

‎src/types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ export interface GridStackOptions {
103103
*/
104104
dragInOptions?: DDDragInOpt;
105105

106-
/** let user drag nested grid items out of a parent or not (default false) */
106+
/** let user drag nested grid items out of a parent or not (default true - not supported by h5 yet) */
107107
dragOut?: boolean;
108108

109109
/** the type of engine to create (so you can subclass) default to GridStackEngine */

0 commit comments

Comments
 (0)