Skip to content

Commit 0a0919e

Browse files
authored
Merge pull request #2815 from adumesny/master
fixed sidebar for nested grids
2 parents 4a53cc8 + 9fe8879 commit 0a0919e

File tree

7 files changed

+30
-482
lines changed

7 files changed

+30
-482
lines changed

demo/nested.html

Lines changed: 6 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,8 @@ <h1>Nested grids demo</h1>
2121
<a class="btn btn-primary" onClick="addNewWidget('.sub1')" href="#">Add Widget Grid1</a>
2222
<a class="btn btn-primary" onClick="addNewWidget('.sub2')" href="#">Add Widget Grid2</a>
2323
<a class="btn btn-primary" onClick="addNested()" href="#">Add Nested Grid</a>
24-
<div class="sidebar" style="height:50px; padding: 0">
25-
<!-- manually force a drop size of 2x2 for nested size -->
26-
<div class="grid-stack-item" gs-w="2" gs-h="2">
27-
<div class="grid-stack-item-content">Drag nested</div>
28-
</div>
29-
</div>
24+
<!-- add .grid-stack-item for acceptWidgets:true -->
25+
<div class="sidebar-item grid-stack-item">Drag nested</div>
3026
</div>
3127
<br />
3228
<span>entire save/re-create:</span>
@@ -78,7 +74,10 @@ <h1>Nested grids demo</h1>
7874
})
7975

8076
// setup drag drop behavior
81-
GridStack.setupDragIn('.sidebar .grid-stack-item', { appendTo: 'body', helper: 'clone' });
77+
let sidebarContent = [
78+
{ w:2, h:2, subGridOpts: { children: [{content: 'nest 1'}, {content: 'nest 2'}]}}
79+
];
80+
GridStack.setupDragIn('.sidebar-item', undefined, sidebarContent);
8281

8382
function addWidget() {
8483
grid.addWidget({x:0, y:100, content:"new item"});
@@ -104,25 +103,6 @@ <h1>Nested grids demo</h1>
104103
return false;
105104
};
106105

107-
// listener on drop event: every time the sidebar item is dropped create a new subgrid
108-
function droppedHandler(event, prevNode, n) {
109-
// if we don't have a prevNode that means it came from toolbar, which today is the only nested case (else check for some node.el.getAttribute or some custom field...)
110-
if (prevNode) return;
111-
112-
// clear the content then make it a subgrid
113-
n.el.querySelector('.grid-stack-item-content').innerHTML = '';
114-
let nodeToAdd = { children: [{content: 'nest 1'}, {content: 'nest 2'}]};
115-
let subgrid = n.grid.makeSubGrid(n.el, nodeToAdd, undefined, false);
116-
117-
// add a listener to the subgrid to allow widgets to be added into this newly created nested widget
118-
subgrid.on('dropped', droppedHandler);
119-
}
120-
// add listener to the main grid and subgrids
121-
grid.on('dropped', droppedHandler);
122-
document.querySelectorAll('.grid-stack-nested').forEach((subGrid) => {
123-
subGrid.gridstack.on('dropped', droppedHandler);
124-
});
125-
126106
//--- end of Drag and Drop Nested widget logic
127107

128108
function save(content = true, full = true) {
@@ -142,7 +122,6 @@ <h1>Nested grids demo</h1>
142122
function load(full = true) {
143123
if (full) {
144124
grid = GridStack.addGrid(document.querySelector('.container-fluid'), options);
145-
grid.on('dropped', droppedHandler);
146125
} else {
147126
grid.load(options);
148127
}

demo/sizeToContent.html

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ <h1>sizeToContent options demo</h1>
9191
grid.load(items); // test loading after
9292
GridStack.init({...opts, children:undefined}, '#grid2');
9393

94-
GridStack.setupDragIn('.sidebar .grid-stack-item', { appendTo: 'body', helper: 'clone' });
94+
GridStack.setupDragIn('.sidebar>.grid-stack-item');
9595

9696
function clearGrid() {
9797
grid.removeAll();
@@ -109,10 +109,7 @@ <h1>sizeToContent options demo</h1>
109109
grid.addWidget({content: `<div>New: ${text}</div>`});
110110
}
111111
function makeWidget() {
112-
let doc = document.implementation.createHTMLDocument();
113-
doc.body.innerHTML = `<div class="item"><div class="grid-stack-item-content"><div>New Make: ${text}</div></div></div>`;
114-
let el = doc.body.children[0];
115-
grid.el.appendChild(el);
112+
let el = GridStack.Utils.createWidgetDivs(undefined, {content: `<div>New Make: ${text}</div>`}, grid.el)
116113
grid.makeWidget(el, {w:2});
117114
}
118115
function more() {

demo/static.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ <h1>Static vs can move/drag Demo</h1>
4949
];
5050
grid.load(serializedData);
5151

52-
GridStack.setupDragIn('.sidebar .grid-stack-item', { appendTo: 'body', helper: 'clone' });
52+
GridStack.setupDragIn('.sidebar>.grid-stack-item');
5353

5454
// grid.setStatic(false); // TEST enable after disabled
5555

demo/two.html

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ <h1>Two grids demo</h1>
2323

2424
<div class="row">
2525
<div class="col-md-8">
26+
<!-- NOTE: add .grid-stack-item for acceptWidgets:true, but not needed for function which handles .sidebar-item (anything) -->
2627
<div class="sidebar">
2728
<!-- will size to match content. Also see sidebarContent -->
2829
<div class="sidebar-item">Drag me</div>
@@ -72,7 +73,7 @@ <h1>Two grids demo</h1>
7273
];
7374
items.forEach((item, i) => item.content = item.content || String(i));
7475

75-
// sidebar content to create when we get dropped, instead of inserting the clone version
76+
// sidebar content (just 2, rest is other behavior) to create when we get dropped, instead of inserting the clone version
7677
let sidebarContent = [
7778
{content: 'dropped'},
7879
{content: 'max=3', w:2, h:1, maxW: 3},
@@ -84,9 +85,10 @@ <h1>Two grids demo</h1>
8485
cellHeight: 70,
8586
float: true,
8687
removable: '.trash', // true or drag-out delete class
88+
/** accepts everything fcn, not just .grid-stack-item (true case) but can also be: true | false | '.someClass' value */
89+
acceptWidgets: function(el) { return true },
8790
children: items,
8891
// itemClass: 'with-lines', // test a custom additional class #2110
89-
acceptWidgets: function(el) { return true } // function example, but can also be: true | false | '.someClass' value
9092
};
9193
let grids = GridStack.initAll(options);
9294
grids[1].float(false);

demo/web2.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
<body>
3232
<h1>Advanced Demo</h1>
3333
<div class="row">
34-
<div class="col-md-2 d-none d-md-block">
34+
<div class="sidepanel col-md-2 d-none d-md-block">
3535
<div id="trash" style="padding: 5px; margin-bottom: 15px;" class="text-center">
3636
<div>
3737
<ion-icon name="trash" style="font-size: 300%"></ion-icon>
@@ -40,7 +40,7 @@ <h1>Advanced Demo</h1>
4040
<span>Drop here to remove!</span>
4141
</div>
4242
</div>
43-
<div class="newWidget grid-stack-item">
43+
<div class="grid-stack-item" gs-h="2">
4444
<div class="grid-stack-item-content" style="padding: 5px;">
4545
<div>
4646
<ion-icon name="add-circle" style="font-size: 300%"></ion-icon>
@@ -67,7 +67,7 @@ <h1>Advanced Demo</h1>
6767
acceptWidgets: true,
6868
removable: '#trash', // drag-out delete class
6969
});
70-
GridStack.setupDragIn('.newWidget', { appendTo: 'body', helper: 'clone' });
70+
GridStack.setupDragIn('.sidepanel>.grid-stack-item');
7171

7272
let items = [
7373
{x: 0, y: 0, w: 4, h: 2, content: '1'},

0 commit comments

Comments
 (0)