Skip to content

Commit 9cb9781

Browse files
adumesnyadumesny
committed
test demo cleanup, remove $('selection') JQ code
1 parent 0c29630 commit 9cb9781

File tree

6 files changed

+26
-35
lines changed

6 files changed

+26
-35
lines changed

‎demo/nested.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
<div class="container-fluid">
2121
<h1>Nested grids demo</h1>
2222
<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>
23-
<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>
23+
<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>
2424
<a class="btn btn-primary" onClick="addNewWidget('.nested1')" href="#">Add Widget Grid1</a>
2525
<a class="btn btn-primary" onClick="addNewWidget('.nested2')" href="#">Add Widget Grid2</a>
2626
<br><br>

‎demo/two.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ <h1>Two grids demo</h1>
8787
cellHeight: 70,
8888
disableOneColumnMode: true,
8989
float: false,
90-
dragIn: '.sidebar .grid-stack-item', // class that can be dragged from outside
90+
dragIn: '.sidebar .grid-stack-item', // add draggable to class
9191
dragInOptions: { revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone' }, // clone
9292
removable: '.trash', // drag-out delete class
9393
removeTimeout: 100,

‎spec/e2e/html/1102-button-between-grids.html‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -14,30 +14,20 @@ <h1>lose functionality when dragged</h1>
1414
<br/>
1515
<div class="grid-stack" id="right-grid">
1616
<div class="grid-stack-item">
17-
<div class="grid-stack-item-content" id="button1">button1</div>
17+
<div class="grid-stack-item-content" onclick="alert('1')">button1</div>
1818
</div>
1919
</div>
2020
<br/>
2121
<br/>
2222
<div class="grid-stack" id="left-grid">
2323
<div class="grid-stack-item">
24-
<div class="grid-stack-item-content" id="button2">button2</div>
24+
<div class="grid-stack-item-content" onclick="alert('2')">button2</div>
2525
</div>
2626
</div>
2727
</div>
2828

2929
<script type="text/javascript">
3030
GridStack.initAll({acceptWidgets: true});
31-
32-
function pressed1(){
33-
$('.container-fluid').append("button 1 pressed ");
34-
}
35-
36-
function pressed2(){
37-
$('.container-fluid').append("button 2 pressed ");
38-
}
39-
$('#button1').click(pressed1);
40-
$('#button2').click(pressed2);
4131
</script>
4232
</body>
4333
</html>

‎spec/e2e/html/1142_change_event_missing.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,10 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<title>1142 demo</title>
88
<link rel="stylesheet" href="../../../demo/demo.css"/>
9-
<script src="../../../dist/gridstack-h5.js"></script>
9+
<script src="../../../dist/gridstack-jq.js"></script>
1010
</head>
1111
<body>
12+
<h1>JQ test case with click to remove</h1>
1213
<div class="grid-stack">
1314
<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>
1415
<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>
@@ -27,7 +28,7 @@
2728

2829
$('.grid-stack .grid-stack-item').click(function(e) {
2930
let item = $(e.currentTarget).closest('.grid-stack-item');
30-
grid.removeWidget(item);
31+
grid.removeWidget(item.get(0));
3132
});
3233
</script>
3334
</body>

‎spec/e2e/html/1143_nested_acceptWidget_types.html‎

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
</style>
2424
</head>
2525
<body>
26+
<h3>show dragging into sub grid</h3>
2627
<div class="row">
2728
<div class="col-md-2 d-none d-md-block">
2829
<div class="newWidget grid-stack-item">
@@ -37,15 +38,7 @@
3738
<div class="grid-stack-item-content">
3839
This nested grid accepts new widget with class "newWidget"<br/>
3940
The parent grid also accepts new widget but with a different class 'otherWidgetType'<br/>&nbsp;
40-
<div class="grid-stack nested">
41-
<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>
42-
<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>
43-
<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>
44-
<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>
45-
<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>
46-
<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>
47-
</div>
48-
41+
<div class="grid-stack nested"></div>
4942
</div>
5043
</div>
5144
</div>
@@ -54,20 +47,26 @@
5447

5548
<script type="text/javascript">
5649
let grid = GridStack.init({ acceptWidgets: '.otherWidgetType' }, '.grid-stack.outer');
57-
let gridNest = GridStack.init({ acceptWidgets: '.newWidget' }, '.grid-stack.nested');
50+
let gridNest = GridStack.init({
51+
acceptWidgets: '.newWidget',
52+
dragIn: '.newWidget', // class that can be dragged from outside
53+
dragInOptions: { revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone' }, // clone
54+
itemClass: 'sub',
55+
}, '.grid-stack.nested');
56+
gridNest.load([
57+
{x:0, y:0, w:3, content:'1'},
58+
{x:3, y:0, w:3, content:'2'},
59+
{x:6, y:0, w:3, content:'2'},
60+
{x:9, y:0, w:3, content:'3'},
61+
{x:0, y:1, w:3, content:'4'},
62+
{x:3, y:1, w:3, content:'5'},
63+
]);
5864

5965
grid.on('added removed change', function(e, items) {
6066
let str = '';
6167
items.forEach(function(item) { str += ' (x,y)=' + item.x + ',' + item.y; });
6268
console.log(e.type + ' ' + items.length + ' items:' + str );
6369
});
64-
65-
$('.newWidget').draggable({
66-
revert: 'invalid',
67-
scroll: false,
68-
appendTo: 'body',
69-
helper: 'clone'
70-
});
7170
</script>
7271
</body>
7372
</html>

‎src/types.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,8 @@ export interface GridStackOptions {
6565
/** 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 */
6666
column?: number;
6767

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

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

101-
/** widget class (default?: 'grid-stack-item') */
102+
/** additional widget class (default?: 'grid-stack-item') */
102103
itemClass?: string;
103104

104105
/**

0 commit comments

Comments
 (0)