Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 515f5eb

Browse files
adumesnyadumesny
committed
web demo update to v11 API
1 parent 7133303 commit 515f5eb

File tree

3 files changed

+40
-71
lines changed

3 files changed

+40
-71
lines changed

‎demo/web1.html

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,7 @@ <h1>Web demo 1</h1>
2828
el.innerHTML = w.content;
2929
};
3030

31-
let grid = GridStack.init({
32-
cellHeight: 70,
33-
});
34-
35-
let items = [
31+
let children = [
3632
{x: 0, y: 0, w: 4, h: 2, content: '1'},
3733
{x: 4, y: 0, w: 4, h: 4, content: '2'},
3834
{x: 8, y: 0, w: 2, h: 2, content: '<p class="card-text text-center" style="margin-bottom: 0">Drag me!<p class="card-text text-center"style="margin-bottom: 0"><ion-icon name="hand" style="font-size: 300%"></ion-icon><p class="card-text text-center" style="margin-bottom: 0">'},
@@ -45,8 +41,8 @@ <h1>Web demo 1</h1>
4541
{x: 8, y: 4, w: 2, h: 2, content: '10'},
4642
{x: 10, y: 4, w: 2, h: 2, content: '11'},
4743
];
48-
grid.load(items);
49-
44+
45+
let grid = GridStack.init({ cellHeight: 70, children });
5046
grid.on('added removed change', function(e, items) {
5147
let str = '';
5248
items.forEach(function(item) { str += ' (x,y)=' + item.x + ',' + item.y; });

‎demo/web2.html

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,17 @@
2222
opacity: 0.8;
2323
filter: blur(5px);
2424
}
25+
.sidepanel-item {
26+
background-color: #18bc9c;
27+
text-align: center;
28+
padding: 5px;
29+
margin-bottom: 15px;
30+
}
2531
#trash {
26-
background: rgba(255, 0, 0, 0.4);
32+
background-color: rgba(255, 0, 0, 0.4);
33+
}
34+
ion-icon {
35+
font-size: 300%;
2736
}
2837
</style>
2938
</head>
@@ -32,23 +41,13 @@
3241
<h1>Advanced Demo</h1>
3342
<div class="row">
3443
<div class="sidepanel col-md-2 d-none d-md-block">
35-
<div id="trash" style="padding: 5px; margin-bottom: 15px;" class="text-center">
36-
<div>
37-
<ion-icon name="trash" style="font-size: 300%"></ion-icon>
38-
</div>
39-
<div>
40-
<span>Drop here to remove!</span>
41-
</div>
44+
<div id="trash" class="sidepanel-item">
45+
<ion-icon name="trash"></ion-icon>
46+
<div>Drop here to remove!</div>
4247
</div>
43-
<div class="grid-stack-item" gs-h="2">
44-
<div class="grid-stack-item-content" style="padding: 5px;">
45-
<div>
46-
<ion-icon name="add-circle" style="font-size: 300%"></ion-icon>
47-
</div>
48-
<div>
49-
<span>Drag me in the dashboard!</span>
50-
</div>
51-
</div>
48+
<div class="grid-stack-item sidepanel-item">
49+
<ion-icon name="add-circle"></ion-icon>
50+
<div>Drag me in the dashboard!</div>
5251
</div>
5352
</div>
5453
<div class="col-sm-12 col-md-10">
@@ -62,17 +61,10 @@ <h1>Advanced Demo</h1>
6261
el.innerHTML = w.content;
6362
};
6463

65-
let grid = GridStack.init({
66-
cellHeight: 70,
67-
acceptWidgets: true,
68-
removable: '#trash', // drag-out delete class
69-
});
70-
GridStack.setupDragIn('.sidepanel>.grid-stack-item');
71-
72-
let items = [
64+
let children = [
7365
{x: 0, y: 0, w: 4, h: 2, content: '1'},
74-
{x: 4, y: 0, w: 4, h: 4, noMove: true, noResize: true, locked: true, content: 'I can\'t be moved or dragged!<br><ion-icon name="ios-lock" style="font-size:300%"></ion-icon>'},
75-
{x: 8, y: 0, w: 2, h: 2, minW: 2, noResize: true, content: '<p class="card-text text-center" style="margin-bottom: 0">Drag me!<p class="card-text text-center"style="margin-bottom: 0"><ion-icon name="hand" style="font-size: 300%"></ion-icon><p class="card-text text-center" style="margin-bottom: 0">...but don\'t resize me!'},
66+
{x: 4, y: 0, w: 4, h: 4, locked: true, content: 'I can\'t be moved or dragged, nor pushed by others!<br><ion-icon name="ios-lock"></ion-icon>'},
67+
{x: 8, y: 0, w: 2, h: 2, minW: 2, noResize: true, content: '<p class="card-text text-center" style="margin-bottom: 0">Drag me!<p class="card-text text-center"style="margin-bottom: 0"><ion-icon name="hand"></ion-icon><p class="card-text text-center" style="margin-bottom: 0">...but don\'t resize me!'},
7668
{x: 10, y: 0, w: 2, h: 2, content: '4'},
7769
{x: 0, y: 2, w: 2, h: 2, content: '5'},
7870
{x: 2, y: 2, w: 2, h: 4, content: '6'},
@@ -82,7 +74,15 @@ <h1>Advanced Demo</h1>
8274
{x: 8, y: 4, w: 2, h: 2, content: '10'},
8375
{x: 10, y: 4, w: 2, h: 2, content: '11'},
8476
];
85-
grid.load(items);
77+
let insert = [ {h: 2, content: 'new item'}];
78+
79+
let grid = GridStack.init({
80+
cellHeight: 70,
81+
acceptWidgets: true,
82+
removable: '#trash', // drag-out delete class
83+
children
84+
});
85+
GridStack.setupDragIn('.sidepanel>.grid-stack-item', undefined, insert);
8686

8787
grid.on('added removed change', function(e, items) {
8888
let str = '';

‎index.html

Lines changed: 9 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -543,7 +543,7 @@ <h2 class="mt-4 text-4xl font-medium">Advanced demo</h2>
543543
</p>
544544
<div class="grid grid-cols-2 gap-8 mt-8">
545545
<div
546-
class="flex flex-col items-center justify-center p-1 mx-auto transition-colors rounded-lg cursor-pointer bg-green-500/15 hover:bg-green-500/30 size-40 grid-stack-item-content grid-stack-item newWidget"
546+
class="flex flex-col items-center justify-center p-1 mx-auto transition-colors rounded-lg cursor-pointer bg-green-500/15 hover:bg-green-500/30 size-40 grid-stack-item newWidget"
547547
>
548548
<svg
549549
class="text-green-700 size-8"
@@ -896,11 +896,7 @@ <h3 class="text-base text-black">Join the community</h3>
896896
var simple = [
897897
{ x: 0, y: 0, w: 4, h: 2, content: '1' },
898898
{ x: 4, y: 0, w: 4, h: 4, content: '2' },
899-
{
900-
x: 8,
901-
y: 0,
902-
w: 2,
903-
h: 2,
899+
{ x: 8, y: 0, w: 2, h: 2,
904900
content: `<div class="flex flex-col items-center justify-center w-full h-full text-indigo-600">
905901
<svg class="size-8" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-hand">
906902
<path d="M18 11V6a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v0"/><path d="M14 10V4a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v2"/>
@@ -920,29 +916,16 @@ <h3 class="text-base text-black">Join the community</h3>
920916
]
921917
var advanced = [
922918
{ x: 0, y: 0, w: 4, h: 2, content: '1' },
923-
{
924-
x: 4,
925-
y: 0,
926-
w: 4,
927-
h: 4,
928-
noMove: true,
929-
noResize: true,
930-
locked: true,
919+
{ x: 4, y: 0, w: 4, h: 4, noMove: true, noResize: true, locked: true,
931920
content: `<div class="flex flex-col items-center justify-center w-full h-full gap-2 text-red-600">
932921
<svg class="text-red-600 size-8" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lock-keyhole">
933922
<circle cx="12" cy="16" r="1"/><rect x="3" y="10" width="18" height="12" rx="2"/>
934923
<path d="M7 10V7a5 5 0 0 1 10 0v3"/>
935924
</svg>
936-
<p>Can't be moved or dragged</p>
925+
<p>Can't be moved or dragged, nor pushed by others</p>
937926
</div>`,
938927
},
939-
{
940-
x: 8,
941-
y: 0,
942-
w: 2,
943-
h: 2,
944-
minW: 2,
945-
noResize: true,
928+
{ x: 8, y: 0, w: 2, h: 2, minW: 2, noResize: true,
946929
content: `<div class="flex flex-col items-center justify-center w-full h-full gap-2 text-red-600">
947930
<svg class="size-8" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-scaling">
948931
<path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
@@ -963,31 +946,21 @@ <h3 class="text-base text-black">Join the community</h3>
963946

964947
// Setup Grids without jQuery
965948
document.addEventListener('DOMContentLoaded', function () {
966-
var simpleGrid = GridStack.init(
967-
{
968-
margin: 5,
969-
disableOneColumnMode: true,
970-
},
971-
'#simple-grid'
972-
)
973-
simpleGrid.load(simple)
949+
var simpleGrid = GridStack.init( { margin: 5, children: simple }, '#simple-grid' )
974950

975951
var advGrid = GridStack.init(
976952
{
977953
margin: 5,
978-
disableOneColumnMode: true,
979954
acceptWidgets: true,
980955
removable: '#trash',
981956
removeTimeout: 100,
957+
children: advanced
982958
},
983959
'#advanced-grid'
984960
)
985-
advGrid.load(advanced)
986961

987-
GridStack.setupDragIn('.newWidget', {
988-
appendTo: 'body',
989-
helper: 'clone',
990-
})
962+
var insert = [ {h: 2, content: 'new item'}];
963+
GridStack.setupDragIn('.newWidget', undefined, insert);
991964

992965
document
993966
.getElementById('search')

0 commit comments

Comments
 (0)