Skip to content

test demo cleanup, remove $('selection') JQ code #1582

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
Jan 21, 2021
Merged

test demo cleanup, remove $('selection') JQ code #1582

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
2 changes: 1 addition & 1 deletion demo/nested.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<div class="container-fluid">
<h1>Nested grids demo</h1>
<p>This example uses new v3.1 API to load the entire nested grid from JSON, and shows dragging between nested grid items (pink) vs dragging higher grid items (green)</p>
<p>Note: initial v3.0.0 HTML5 release doesn't support 'dragOut:false' constrain so this uses JQ version for now. If you don't need the nested2 behavior I suggest you use h5 version.</p>
<p>Note: initial v3.0.0 HTML5 release doesn't support 'dragOut:false' constrain so this uses JQ version for now, otherwise recommend you use h5 version.</p>
<a class="btn btn-primary" onClick="addNewWidget('.nested1')" href="#">Add Widget Grid1</a>
<a class="btn btn-primary" onClick="addNewWidget('.nested2')" href="#">Add Widget Grid2</a>
<br><br>
Expand Down
2 changes: 1 addition & 1 deletion demo/two.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ <h1>Two grids demo</h1>
cellHeight: 70,
disableOneColumnMode: true,
float: false,
dragIn: '.sidebar .grid-stack-item', // class that can be dragged from outside
dragIn: '.sidebar .grid-stack-item', // add draggable to class
dragInOptions: { revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone' }, // clone
removable: '.trash', // drag-out delete class
removeTimeout: 100,
Expand Down
14 changes: 2 additions & 12 deletions spec/e2e/html/1102-button-between-grids.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,30 +14,20 @@ <h1>lose functionality when dragged</h1>
<br/>
<div class="grid-stack" id="right-grid">
<div class="grid-stack-item">
<div class="grid-stack-item-content" id="button1">button1</div>
<div class="grid-stack-item-content" onclick="alert('1')">button1</div>
</div>
</div>
<br/>
<br/>
<div class="grid-stack" id="left-grid">
<div class="grid-stack-item">
<div class="grid-stack-item-content" id="button2">button2</div>
<div class="grid-stack-item-content" onclick="alert('2')">button2</div>
</div>
</div>
</div>

<script type="text/javascript">
GridStack.initAll({acceptWidgets: true});

function pressed1(){
$('.container-fluid').append("button 1 pressed ");
}

function pressed2(){
$('.container-fluid').append("button 2 pressed ");
}
$('#button1').click(pressed1);
$('#button2').click(pressed2);
</script>
</body>
</html>
5 changes: 3 additions & 2 deletions spec/e2e/html/1142_change_event_missing.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>1142 demo</title>
<link rel="stylesheet" href="../../../demo/demo.css"/>
<script src="../../../dist/gridstack-h5.js"></script>
<script src="../../../dist/gridstack-jq.js"></script>
</head>
<body>
<h1>JQ test case with click to remove</h1>
<div class="grid-stack">
<div class="grid-stack-item" gs-x="0" gs-y="0" gs-w="3" gs-h="1"><div class="grid-stack-item-content">1 click to delete</div></div>
<div class="grid-stack-item" gs-x="0" gs-y="1" gs-w="3" gs-h="1"><div class="grid-stack-item-content">2 missing change event</div></div>
Expand All @@ -27,7 +28,7 @@

$('.grid-stack .grid-stack-item').click(function(e) {
let item = $(e.currentTarget).closest('.grid-stack-item');
grid.removeWidget(item);
grid.removeWidget(item.get(0));
});
</script>
</body>
Expand Down
33 changes: 16 additions & 17 deletions spec/e2e/html/1143_nested_acceptWidget_types.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
</style>
</head>
<body>
<h3>show dragging into sub grid</h3>
<div class="row">
<div class="col-md-2 d-none d-md-block">
<div class="newWidget grid-stack-item">
Expand All @@ -37,15 +38,7 @@
<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 different class 'otherWidgetType'<br/>&nbsp;
<div class="grid-stack nested">
<div class="grid-stack-item sub" gs-x="0" gs-y="0" gs-w="3" gs-h="1"><div class="grid-stack-item-content">1</div></div>
<div class="grid-stack-item sub" gs-x="3" gs-y="0" gs-w="3" gs-h="1"><div class="grid-stack-item-content">2</div></div>
<div class="grid-stack-item sub" gs-x="6" gs-y="0" gs-w="3" gs-h="1"><div class="grid-stack-item-content">3</div></div>
<div class="grid-stack-item sub" gs-x="9" gs-y="0" gs-w="3" gs-h="1"><div class="grid-stack-item-content">4</div></div>
<div class="grid-stack-item sub" gs-x="0" gs-y="1" gs-w="3" gs-h="1"><div class="grid-stack-item-content">5</div></div>
<div class="grid-stack-item sub" gs-x="3" gs-y="1" gs-w="3" gs-h="1"><div class="grid-stack-item-content">6</div></div>
</div>

<div class="grid-stack nested"></div>
</div>
</div>
</div>
Expand All @@ -54,20 +47,26 @@

<script type="text/javascript">
let grid = GridStack.init({ acceptWidgets: '.otherWidgetType' }, '.grid-stack.outer');
let gridNest = GridStack.init({ acceptWidgets: '.newWidget' }, '.grid-stack.nested');
let gridNest = GridStack.init({
acceptWidgets: '.newWidget',
dragIn: '.newWidget', // class that can be dragged from outside
dragInOptions: { revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone' }, // clone
itemClass: 'sub',
}, '.grid-stack.nested');
gridNest.load([
{x:0, y:0, w:3, content:'1'},
{x:3, y:0, w:3, content:'2'},
{x:6, y:0, w:3, content:'2'},
{x:9, y:0, w:3, content:'3'},
{x:0, y:1, w:3, content:'4'},
{x:3, y:1, w:3, content:'5'},
]);

grid.on('added removed change', function(e, items) {
let str = '';
items.forEach(function(item) { str += ' (x,y)=' + item.x + ',' + item.y; });
console.log(e.type + ' ' + items.length + ' items:' + str );
});

$('.newWidget').draggable({
revert: 'invalid',
scroll: false,
appendTo: 'body',
helper: 'clone'
});
</script>
</body>
</html>
5 changes: 3 additions & 2 deletions src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,8 @@ export interface GridStackOptions {
/** number of columns (default?: 12). Note: IF you change this, CSS also have to change. See https://github.com/gridstack/gridstack.js#change-grid-columns */
column?: number;

/** additional class on top of '.grid-stack' (which is required for our CSS) to differentiate this instance */
/** additional class on top of '.grid-stack' (which is required for our CSS) to differentiate this instance.
Note: only used by addGrid(), else your element should have the needed class */
class?: string;

/** disallows dragging of widgets (default?: false) */
Expand Down Expand Up @@ -98,7 +99,7 @@ export interface GridStackOptions {
/** draggable handle class (e.g. 'grid-stack-item-content'). If set 'handle' is ignored (default?: null) */
handleClass?: string;

/** widget class (default?: 'grid-stack-item') */
/** additional widget class (default?: 'grid-stack-item') */
itemClass?: string;

/**
Expand Down