Skip to content

Commit

Permalink
Merge pull request gridstack#2842 from adumesny/gh-pages
Browse files Browse the repository at this point in the history 
web demo update to v11 API
  • Loading branch information
@adumesny
adumesny authored Oct 26, 2024
2 parents 79ca205 + 515f5eb commit 56b4716
Show file tree
Hide file tree
Showing 3 changed files with 40 additions and 71 deletions.
10 changes: 3 additions & 7 deletions demo/web1.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,7 @@ <h1>Web demo 1</h1>
el.innerHTML = w.content;
};

let grid = GridStack.init({
cellHeight: 70,
});

let items = [
let children = [
{x: 0, y: 0, w: 4, h: 2, content: '1'},
{x: 4, y: 0, w: 4, h: 4, content: '2'},
{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">'},
Expand All @@ -45,8 +41,8 @@ <h1>Web demo 1</h1>
{x: 8, y: 4, w: 2, h: 2, content: '10'},
{x: 10, y: 4, w: 2, h: 2, content: '11'},
];
grid.load(items);


let grid = GridStack.init({ cellHeight: 70, children });
grid.on('added removed change', function(e, items) {
let str = '';
items.forEach(function(item) { str += ' (x,y)=' + item.x + ',' + item.y; });
Expand Down
56 changes: 28 additions & 28 deletions demo/web2.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,17 @@
opacity: 0.8;
filter: blur(5px);
}
.sidepanel-item {
background-color: #18bc9c;
text-align: center;
padding: 5px;
margin-bottom: 15px;
}
#trash {
background: rgba(255, 0, 0, 0.4);
background-color: rgba(255, 0, 0, 0.4);
}
ion-icon {
font-size: 300%;
}
</style>
</head>
Expand All @@ -32,23 +41,13 @@
<h1>Advanced Demo</h1>
<div class="row">
<div class="sidepanel col-md-2 d-none d-md-block">
<div id="trash" style="padding: 5px; margin-bottom: 15px;" class="text-center">
<div>
<ion-icon name="trash" style="font-size: 300%"></ion-icon>
</div>
<div>
<span>Drop here to remove!</span>
</div>
<div id="trash" class="sidepanel-item">
<ion-icon name="trash"></ion-icon>
<div>Drop here to remove!</div>
</div>
<div class="grid-stack-item" gs-h="2">
<div class="grid-stack-item-content" style="padding: 5px;">
<div>
<ion-icon name="add-circle" style="font-size: 300%"></ion-icon>
</div>
<div>
<span>Drag me in the dashboard!</span>
</div>
</div>
<div class="grid-stack-item sidepanel-item">
<ion-icon name="add-circle"></ion-icon>
<div>Drag me in the dashboard!</div>
</div>
</div>
<div class="col-sm-12 col-md-10">
Expand All @@ -62,17 +61,10 @@ <h1>Advanced Demo</h1>
el.innerHTML = w.content;
};

let grid = GridStack.init({
cellHeight: 70,
acceptWidgets: true,
removable: '#trash', // drag-out delete class
});
GridStack.setupDragIn('.sidepanel>.grid-stack-item');

let items = [
let children = [
{x: 0, y: 0, w: 4, h: 2, content: '1'},
{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>'},
{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!'},
{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>'},
{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!'},
{x: 10, y: 0, w: 2, h: 2, content: '4'},
{x: 0, y: 2, w: 2, h: 2, content: '5'},
{x: 2, y: 2, w: 2, h: 4, content: '6'},
Expand All @@ -82,7 +74,15 @@ <h1>Advanced Demo</h1>
{x: 8, y: 4, w: 2, h: 2, content: '10'},
{x: 10, y: 4, w: 2, h: 2, content: '11'},
];
grid.load(items);
let insert = [ {h: 2, content: 'new item'}];

let grid = GridStack.init({
cellHeight: 70,
acceptWidgets: true,
removable: '#trash', // drag-out delete class
children
});
GridStack.setupDragIn('.sidepanel>.grid-stack-item', undefined, insert);

grid.on('added removed change', function(e, items) {
let str = '';
Expand Down
45 changes: 9 additions & 36 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -543,7 +543,7 @@ <h2 class="mt-4 text-4xl font-medium">Advanced demo</h2>
</p>
<div class="grid grid-cols-2 gap-8 mt-8">
<div
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"
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"
>
<svg
class="text-green-700 size-8"
Expand Down Expand Up @@ -896,11 +896,7 @@ <h3 class="text-base text-black">Join the community</h3>
var simple = [
{ x: 0, y: 0, w: 4, h: 2, content: '1' },
{ x: 4, y: 0, w: 4, h: 4, content: '2' },
{
x: 8,
y: 0,
w: 2,
h: 2,
{ x: 8, y: 0, w: 2, h: 2,
content: `<div class="flex flex-col items-center justify-center w-full h-full text-indigo-600">
<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">
<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"/>
Expand All @@ -920,29 +916,16 @@ <h3 class="text-base text-black">Join the community</h3>
]
var advanced = [
{ x: 0, y: 0, w: 4, h: 2, content: '1' },
{
x: 4,
y: 0,
w: 4,
h: 4,
noMove: true,
noResize: true,
locked: true,
{ x: 4, y: 0, w: 4, h: 4, noMove: true, noResize: true, locked: true,
content: `<div class="flex flex-col items-center justify-center w-full h-full gap-2 text-red-600">
<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">
<circle cx="12" cy="16" r="1"/><rect x="3" y="10" width="18" height="12" rx="2"/>
<path d="M7 10V7a5 5 0 0 1 10 0v3"/>
</svg>
<p>Can't be moved or dragged</p>
<p>Can't be moved or dragged, nor pushed by others</p>
</div>`,
},
{
x: 8,
y: 0,
w: 2,
h: 2,
minW: 2,
noResize: true,
{ x: 8, y: 0, w: 2, h: 2, minW: 2, noResize: true,
content: `<div class="flex flex-col items-center justify-center w-full h-full gap-2 text-red-600">
<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">
<path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
Expand All @@ -963,31 +946,21 @@ <h3 class="text-base text-black">Join the community</h3>

// Setup Grids without jQuery
document.addEventListener('DOMContentLoaded', function () {
var simpleGrid = GridStack.init(
{
margin: 5,
disableOneColumnMode: true,
},
'#simple-grid'
)
simpleGrid.load(simple)
var simpleGrid = GridStack.init( { margin: 5, children: simple }, '#simple-grid' )

var advGrid = GridStack.init(
{
margin: 5,
disableOneColumnMode: true,
acceptWidgets: true,
removable: '#trash',
removeTimeout: 100,
children: advanced
},
'#advanced-grid'
)
advGrid.load(advanced)

GridStack.setupDragIn('.newWidget', {
appendTo: 'body',
helper: 'clone',
})
var insert = [ {h: 2, content: 'new item'}];
GridStack.setupDragIn('.newWidget', undefined, insert);

document
.getElementById('search')
Expand Down

0 comments on commit 56b4716

Please sign in to comment.