Skip to content

fix nested grids with different acceptWidgets class #1150

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Feb 17, 2020
Merged

fix nested grids with different acceptWidgets class #1150

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions doc/CHANGES.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ Change log

## v0.6.3-dev (upcoming changes)

- fix [#1143](https://github.com/gridstack/gridstack.js/issues/1143) nested grids with different `acceptWidgets` class
- fix [#1142](https://github.com/gridstack/gridstack.js/issues/1142) add/remove widget will also trigger change events when it should.
- 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)
- delete `bower` since [dead](https://snyk.io/blog/bower-is-dead) for a while now
Expand Down
84 changes: 84 additions & 0 deletions spec/e2e/html/1143_nested_acceptWidget_types.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>#1143 test</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="../../../demo/demo.css"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script src="../../../dist/jquery-ui.js"></script>
<script src="../../../src/gridstack.js"></script>
<script src="../../../src/gridstack.jQueryUI.js"></script>

<style type="text/css">
.grid-stack-item-removing {
opacity: 0.8;
filter: blur(5px);
}
#advanced-grid .grid-stack-item-content {
background-color: transparent;
}
#advanced-grid .nested1 .grid-stack-item-content {
background-color: #18bc9c;
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-2 d-none d-md-block">
<div class="newWidget grid-stack-item">
<div class="card-body grid-stack-item-content">
<span>Drag me in into the dashboard!</span>
</div>
</div>
</div>
<div class="col-sm-12 col-md-10">
<div class="grid-stack" id="advanced-grid" data-gs-animate="yes">
<div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="12" data-gs-height="3">
<div class="grid-stack-item-content">
This nested grid accepts new widget with class "newWidget"<br/>
The parent grid also accepts new widget but with a differenent class 'otherWidgetType'<br/>&nbsp;
<div class="grid-stack nested1">
<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>
<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>
<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>
<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>
<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>
<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>
</div>

</div>
</div>
</div>
</div>
</div>

<script type="text/javascript">
$(function () {
var $grid = $('#advanced-grid');
$grid.gridstack({ acceptWidgets: '.otherWidgetType' });
$('.grid-stack.nested1').gridstack({ acceptWidgets: '.newWidget' });

$grid.on('added', function(e, items) { log(' added ', items) });
$grid.on('removed', function(e, items) { log(' removed ', items) });
$grid.on('change', function(e, items) { log(' change ', items) });
function log(type, items) {
var str = '';
for (let i=0; items && i<items.length && items[i]; i++) { str += ' (x,y)=' + items[i].x + ',' + items[i].y; }
console.log(type + items.length + ' items.' + str );
}

$('.newWidget').draggable({
revert: 'invalid',
scroll: false,
appendTo: 'body',
helper: 'clone'
});
});
</script>
</body>
</html>
3 changes: 3 additions & 0 deletions src/gridstack.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -968,6 +968,7 @@
el.data('_gridstack_node_orig', origNode);

el.on('drag', onDrag);
return false; // prevent parent from receiving msg (which may be grid as well)
})
.on(self.container, 'dropout', function(event, ui) {
// jquery-ui bug. Must verify widget is being dropped out
Expand All @@ -986,6 +987,7 @@
self.placeholder.detach();
self._updateContainerHeight();
el.data('_gridstack_node', el.data('_gridstack_node_orig'));
return false; // prevent parent from receiving msg (which may be grid as well)
})
.on(self.container, 'drop', function(event, ui) {
self.placeholder.detach();
Expand Down Expand Up @@ -1027,6 +1029,7 @@
$(ui.draggable).removeData('_gridstack_node');
$(ui.draggable).removeData('_gridstack_node_orig');
self.container.trigger('dropped', [originalNode, node]);
return false; // prevent parent from receiving msg (which may be grid as well)
});
}
};
Expand Down