Skip to content

Commit 3211512

Browse files
adumesnyadumesny
authored
Merge pull request #1150 from adumesny/develop
fix nested grids with different `acceptWidgets` class
2 parents b30655d + 5aae305 commit 3211512

File tree

3 files changed

+88
-0
lines changed

3 files changed

+88
-0
lines changed

‎doc/CHANGES.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ Change log
3131

3232
## v0.6.3-dev (upcoming changes)
3333

34+
- fix [#1143](https://github.com/gridstack/gridstack.js/issues/1143) nested grids with different `acceptWidgets` class
3435
- fix [#1142](https://github.com/gridstack/gridstack.js/issues/1142) add/remove widget will also trigger change events when it should.
3536
- optimized `change` callback to save original x,y,w,h values and only call those that changed [1148](https://github.com/gridstack/gridstack.js/pull/1148)
3637
- delete `bower` since [dead](https://snyk.io/blog/bower-is-dead) for a while now

‎spec/e2e/html/1143_nested_acceptWidget_types.html

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
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>#1143 test</title>
8+
9+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
10+
<link rel="stylesheet" href="../../../demo/demo.css"/>
11+
12+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
13+
<script src="../../../dist/jquery-ui.js"></script>
14+
<script src="../../../src/gridstack.js"></script>
15+
<script src="../../../src/gridstack.jQueryUI.js"></script>
16+
17+
<style type="text/css">
18+
.grid-stack-item-removing {
19+
opacity: 0.8;
20+
filter: blur(5px);
21+
}
22+
#advanced-grid .grid-stack-item-content {
23+
background-color: transparent;
24+
}
25+
#advanced-grid .nested1 .grid-stack-item-content {
26+
background-color: #18bc9c;
27+
}
28+
</style>
29+
</head>
30+
<body>
31+
<div class="row">
32+
<div class="col-md-2 d-none d-md-block">
33+
<div class="newWidget grid-stack-item">
34+
<div class="card-body grid-stack-item-content">
35+
<span>Drag me in into the dashboard!</span>
36+
</div>
37+
</div>
38+
</div>
39+
<div class="col-sm-12 col-md-10">
40+
<div class="grid-stack" id="advanced-grid" data-gs-animate="yes">
41+
<div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="12" data-gs-height="3">
42+
<div class="grid-stack-item-content">
43+
This nested grid accepts new widget with class "newWidget"<br/>
44+
The parent grid also accepts new widget but with a differenent class 'otherWidgetType'<br/>&nbsp;
45+
<div class="grid-stack nested1">
46+
<div class="grid-stack-item sub" data-gs-x="0" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">1</div></div>
47+
<div class="grid-stack-item sub" data-gs-x="3" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">2</div></div>
48+
<div class="grid-stack-item sub" data-gs-x="6" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">3</div></div>
49+
<div class="grid-stack-item sub" data-gs-x="9" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">4</div></div>
50+
<div class="grid-stack-item sub" data-gs-x="0" data-gs-y="1" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">5</div></div>
51+
<div class="grid-stack-item sub" data-gs-x="3" data-gs-y="1" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">6</div></div>
52+
</div>
53+
54+
</div>
55+
</div>
56+
</div>
57+
</div>
58+
</div>
59+
60+
<script type="text/javascript">
61+
$(function () {
62+
var $grid = $('#advanced-grid');
63+
$grid.gridstack({ acceptWidgets: '.otherWidgetType' });
64+
$('.grid-stack.nested1').gridstack({ acceptWidgets: '.newWidget' });
65+
66+
$grid.on('added', function(e, items) { log(' added ', items) });
67+
$grid.on('removed', function(e, items) { log(' removed ', items) });
68+
$grid.on('change', function(e, items) { log(' change ', items) });
69+
function log(type, items) {
70+
var str = '';
71+
for (let i=0; items && i<items.length && items[i]; i++) { str += ' (x,y)=' + items[i].x + ',' + items[i].y; }
72+
console.log(type + items.length + ' items.' + str );
73+
}
74+
75+
$('.newWidget').draggable({
76+
revert: 'invalid',
77+
scroll: false,
78+
appendTo: 'body',
79+
helper: 'clone'
80+
});
81+
});
82+
</script>
83+
</body>
84+
</html>

‎src/gridstack.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -968,6 +968,7 @@
968968
el.data('_gridstack_node_orig', origNode);
969969

970970
el.on('drag', onDrag);
971+
return false; // prevent parent from receiving msg (which may be grid as well)
971972
})
972973
.on(self.container, 'dropout', function(event, ui) {
973974
// jquery-ui bug. Must verify widget is being dropped out
@@ -986,6 +987,7 @@
986987
self.placeholder.detach();
987988
self._updateContainerHeight();
988989
el.data('_gridstack_node', el.data('_gridstack_node_orig'));
990+
return false; // prevent parent from receiving msg (which may be grid as well)
989991
})
990992
.on(self.container, 'drop', function(event, ui) {
991993
self.placeholder.detach();
@@ -1027,6 +1029,7 @@
10271029
$(ui.draggable).removeData('_gridstack_node');
10281030
$(ui.draggable).removeData('_gridstack_node_orig');
10291031
self.container.trigger('dropped', [originalNode, node]);
1032+
return false; // prevent parent from receiving msg (which may be grid as well)
10301033
});
10311034
}
10321035
};

0 commit comments

Comments
 (0)