8000 Merge pull request #2841 from adumesny/gh-pages · gridstack/gridstack.js@79ca205 · GitHub
[go: up one dir, main page]
Skip to content

Commit 79ca205

Browse files
adumesnyadumesny
authored
Merge pull request #2841 from adumesny/gh-pages
web v11.0.1
2 parents b0f9c15 + 7133303 commit 79ca205

24 files changed

+188
-175
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ dist_save
44
*.tgz
55
*.zip
66
angular/
7+
react/
78

89
!node_modules/
910
node_modules/*

‎demo/column.html

Lines changed: 5 additions & 0 deletions
< F438 /tr>
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,11 @@ <h1>column() grid demo (fix cellHeight)</h1>
4747
</div>
4848

4949
<script type="text/javascript">
50+
// NOTE: REAL apps would sanitize-html or DOMPurify before blinding setting innerHTML. see #2736
51+
GridStack.renderCB = function(el, w) {
52+
el.innerHTML = w.content;
53+
};
54+
5055
let test1 = [ // DOM order will be 0,1,2,3,4,5,6 vs column1 = 0,1,4,3,2,5,6
5156
/* match karma testing
5257
{x: 0, y: 0, w: 4, h: 2},

‎demo/demo.css

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,29 @@ h1 {
2323
margin-bottom: .5rem;
2424
}
2525

26+
.sidebar {
27+
background: rgb(215, 243, 215);
28+
padding: 25px 0;
29+
height: 100px;
30+
text-align: center;
31+
}
32+
.sidebar > .grid-stack-item,
33+
.sidebar-item {
34+
width: 100px;
35+
height: 50px;
36+
border: 2px dashed green;
37+
text-align: center;
38+
line-height: 35px;
39+
background: rgb(192, 231, 192);
40+
cursor: default;
41+
display: inline-block;
42+
}
43+
2644
.grid-stack {
2745
background: #FAFAD2;
2846
}
2947

48+
.sidebar > .grid-stack-item,
3049
.grid-stack-item-content {
3150
text-align: center;
3251
background-color: #18bc9c;
@@ -39,25 +58,6 @@ h1 {
3958
height: 100px;
4059
background: rgba(255, 0, 0, 0.1) center center url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDQzOC41MjkgNDM4LjUyOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDM4LjUyOSA0MzguNTI5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTQxNy42ODksNzUuNjU0Yy0xLjcxMS0xLjcwOS0zLjkwMS0yLjU2OC02LjU2My0yLjU2OGgtODguMjI0TDMwMi45MTcsMjUuNDFjLTIuODU0LTcuMDQ0LTcuOTk0LTEzLjA0LTE1LjQxMy0xNy45ODkgICAgQzI4MC4wNzgsMi40NzMsMjcyLjU1NiwwLDI2NC45NDUsMGgtOTEuMzYzYy03LjYxMSwwLTE1LjEzMSwyLjQ3My0yMi41NTQsNy40MjFjLTcuNDI0LDQuOTQ5LTEyLjU2MywxMC45NDQtMTUuNDE5LDE3Ljk4OSAgICBsLTE5Ljk4NSw0Ny42NzZoLTg4LjIyYy0yLjY2NywwLTQuODUzLDAuODU5LTYuNTY3LDIuNTY4Yy0xLjcwOSwxLjcxMy0yLjU2OCwzLjkwMy0yLjU2OCw2LjU2N3YxOC4yNzQgICAgYzAsMi42NjQsMC44NTUsNC44NTQsMi41NjgsNi41NjRjMS43MTQsMS43MTIsMy45MDQsMi41NjgsNi41NjcsMi41NjhoMjcuNDA2djI3MS44YzAsMTUuODAzLDQuNDczLDI5LjI2NiwxMy40MTgsNDAuMzk4ICAgIGM4Ljk0NywxMS4xMzksMTkuNzAxLDE2LjcwMywzMi4yNjQsMTYuNzAzaDIzNy41NDJjMTIuNTY2LDAsMjMuMzE5LTUuNzU2LDMyLjI2NS0xNy4yNjhjOC45NDUtMTEuNTIsMTMuNDE1LTI1LjE3NCwxMy40MTUtNDAuOTcxICAgIFYxMDkuNjI3aDI3LjQxMWMyLjY2MiwwLDQuODUzLTAuODU2LDYuNTYzLTIuNTY4YzEuNzA4LTEuNzA5LDIuNTctMy45LDIuNTctNi41NjRWODIuMjIxICAgIEM0MjAuMjYsNzkuNTU3LDQxOS4zOTcsNzcuMzY3LDQxNy42ODksNzUuNjU0eiBNMTY5LjMwMSwzOS42NzhjMS4zMzEtMS43MTIsMi45NS0yLjc2Miw0Ljg1My0zLjE0aDkwLjUwNCAgICBjMS45MDMsMC4zODEsMy41MjUsMS40Myw0Ljg1NCwzLjE0bDEzLjcwOSwzMy40MDRIMTU1LjMxMUwxNjkuMzAxLDM5LjY3OHogTTM0Ny4xNzMsMzgwLjI5MWMwLDQuMTg2LTAuNjY0LDguMDQyLTEuOTk5LDExLjU2MSAgICBjLTEuMzM0LDMuNTE4LTIuNzE3LDYuMDg4LTQuMTQxLDcuNzA2Yy0xLjQzMSwxLjYyMi0yLjQyMywyLjQyNy0yLjk5OCwyLjQyN0gxMDAuNDkzYy0wLjU3MSwwLTEuNTY1LTAuODA1LTIuOTk2LTIuNDI3ICAgIGMtMS40MjktMS42MTgtMi44MS00LjE4OC00LjE0My03LjcwNmMtMS4zMzEtMy41MTktMS45OTctNy4zNzktMS45OTctMTEuNTYxVjEwOS42MjdoMjU1LjgxNVYzODAuMjkxeiIgZmlsbD0iI2ZmOWNhZSIvPgoJCTxwYXRoIGQ9Ik0xMzcuMDQsMzQ3LjE3MmgxOC4yNzFjMi42NjcsMCw0Ljg1OC0wLjg1NSw2LjU2Ny0yLjU2N2MxLjcwOS0xLjcxOCwyLjU2OC0zLjkwMSwyLjU2OC02LjU3VjE3My41ODEgICAgYzAtMi42NjMtMC44NTktNC44NTMtMi41NjgtNi41NjdjLTEuNzE0LTEuNzA5LTMuODk5LTIuNTY1LTYuNTY3LTIuNTY1SDEzNy4wNGMtMi42NjcsMC00Ljg1NCwwLjg1NS02LjU2NywyLjU2NSAgICBjLTEuNzExLDEuNzE0LTIuNTY4LDMuOTA0LTIuNTY4LDYuNTY3djE2NC40NTRjMCwyLjY2OSwwLjg1NCw0Ljg1MywyLjU2OCw2LjU3QzEzMi4xODYsMzQ2LjMxNiwxMzQuMzczLDM0Ny4xNzIsMTM3LjA0LDM0Ny4xNzJ6IiBmaWxsPSIjZmY5Y2FlIi8+CgkJPHBhdGggZD0iTTIxMC4xMjksMzQ3LjE3MmgxOC4yNzFjMi42NjYsMCw0Ljg1Ni0wLjg1NSw2LjU2NC0yLjU2N2MxLjcxOC0xLjcxOCwyLjU2OS0zLjkwMSwyLjU2OS02LjU3VjE3My41ODEgICAgYzAtMi42NjMtMC44NTItNC44NTMtMi41NjktNi41NjdjLTEuNzA4LTEuNzA5LTMuODk4LTIuNTY1LTYuNTY0LTIuNTY1aC0xOC4yNzFjLTIuNjY0LDAtNC44NTQsMC44NTUtNi41NjcsMi41NjUgICAgYy0xLjcxNCwxLjcxNC0yLjU2OCwzLjkwNC0yLjU2OCw2LjU2N3YxNjQuNDU0YzAsMi42NjksMC44NTQsNC44NTMsMi41NjgsNi41N0MyMDUuMjc0LDM0Ni4zMTYsMjA3LjQ2NSwzNDcuMTcyLDIxMC4xMjksMzQ3LjE3MnogICAgIiBmaWxsPSIjZmY5Y2FlIi8+CgkJPHBhdGggZD0iTTI4My4yMiwzNDcuMTcyaDE4LjI2OGMyLjY2OSwwLDQuODU5LTAuODU1LDYuNTctMi41NjdjMS43MTEtMS43MTgsMi41NjItMy45MDEsMi41NjItNi41N1YxNzMuNTgxICAgIGMwLTIuNjYzLTAuODUyLTQuODUzLTIuNTYyLTYuNTY3Yy0xLjcxMS0xLjcwOS0zLjkwMS0yLjU2NS02LjU3LTIuNTY1SDI4My4yMmMtMi42NywwLTQuODUzLDAuODU1LTYuNTcxLDIuNTY1ICAgIGMtMS43MTEsMS43MTQtMi41NjYsMy45MDQtMi41NjYsNi41Njd2MTY0LjQ1NGMwLDIuNjY5LDAuODU1LDQuODUzLDIuNTY2LDYuNTdDMjc4LjM2NywzNDYuMzE2LDI4MC41NSwzNDcuMTcyLDI4My4yMiwzNDcuMTcyeiIgZmlsbD0iI2ZmOWNhZSIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=) no-repeat;
4160
}
42-
.sidebar {
43-
background: rgba(0, 255, 0, 0.1);
44-
padding: 25px 0;
45-
height: 100px;
46-
text-align: center;
47-
}
48-
.sidebar .grid-stack-item {
49-
width: 120px;
50-
height: 50px;
51-
border: 2px dashed green;
52-
text-align: center;
53-
line-height: 35px;
54-
background: rgba(0, 255, 0, 0.1);
55-
cursor: default;
56-
display: inline-block;
57-
}
58-
.sidebar .grid-stack-item .grid-stack-item-content {
59-
background: none;
60-
}
6161

6262
/* make nested grid have slightly darker bg take almost all space (need some to tell them apart) so items inside can have similar to external size+margin */
6363
.grid-stack > .grid-stack-item.grid-stack-sub-grid > .grid-stack-item-content {

‎demo/index.html

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ <h1>Demos</h1>
1515
<!-- <li><a href="esmodule.html">ES Module test</a></li> -->
1616
<li><a href="float.html">Float grid</a></li>
1717
<li><a href="knockout.html">Knockout.js</a></li>
18+
<li><a href="lazy_load.html">Lazy Load</a></li>
1819
<li><a href="mobile.html">Mobile touch</a></li>
1920
<li><a href="nested.html">Nested grids</a></li>
2021
<li><a href="nested_advanced.html">Nested Advanced grids</a></li>
@@ -46,10 +47,10 @@ <h1>Angular wrapper</h1>
4647
to make it supper easy for that framework (Vue and React examples are above)</p>
4748
<p>These are complete Angular projects with multiple options. use `yarn` and `yarn start` in <a href="https://github.com/gridstack/gridstack.js/tree/master/angular/projects/demo" target="_blank">angular demo</a> sub-project to run them</p>
4849
<ol>
49-
<li><a href="https://github.com/gridstack/gridstack.js/tree/master/angular/projects/demo/src/app/simple.ts">simple.ts</a></li>
50-
<li><a href="https://github.com/gridstack/gridstack.js/tree/master/angular/projects/demo/src/app/ngFor.ts">ngFor.ts</a></li>
51-
<li><a href="https://github.com/gridstack/gridstack.js/tree/master/angular/projects/demo/src/app/ngFor_cmd.ts">ngFor with command</a> (not recommended)</li>
52-
<li><a href="https://github.com/gridstack/gridstack.js/tree/master/angular/projects/lib/src/lib/gridstack.component.ts">gridstack.component.ts</a> and <a href="https://github.com/gridstack/gridstack.js/tree/master/angular/projects/lib/src/lib/gridstack-item.component.ts">gridstack-item.component.ts</a> (BEST)</li>
50+
<li><a href="../angular/projects/demo/src/app/simple.ts">simple.ts</a></li>
51+
<li><a href="../angular/projects/demo/src/app/ngFor.ts">ngFor.ts</a></li>
52+
<li><a href="../angular/projects/demo/src/app/ngFor_cmd.ts">ngFor with command</a> (not recommended)</li>
53+
<li><a href="../angular/projects/lib/src/lib/gridstack.component.ts">gridstack.component.ts</a> and <a href="../angular/projects/lib/src/lib/gridstack-item.component.ts">gridstack-item.component.ts</a> (BEST)</li>
5354
</ol>
5455
<h1>Old v5.1.1 Jquery Demos</h1>
5556
Note: those are no longer supported, and use an old version of the lib to compare functionality.

‎demo/knockout.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ <h1>knockout.js Demo</h1>
3636
}
3737

3838
let item = items.find(function (i) { return i.nodeType == 1 });
39-
grid.addWidget(item);
39+
grid.makeWidget(item);
4040
ko.utils.domNodeDisposal.addDisposeCallback(item, function () {
4141
grid.removeWidget(item);
4242
});

‎demo/lazy_load.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>Lazy loading demo</title>
8+
9+
<link rel="stylesheet" href="demo.css"/>
10+
<script src="../node_modules/gridstack/dist/gridstack-all.js"></script>
11+
</head>
12+
<body>
13+
<div>
14+
<h1>Lazy loading demo</h1>
15+
<p>New V11 GridStackWidget.lazyLoad feature. open console and see widget content (or angular components) created as they become visible.</p>
16+
<div style="height: 300px; overflow-y: auto">
17+
<div class="grid-stack"></div>
18+
</div>
19+
</div>
20+
<script type="text/javascript">
21+
// print when widgets are created
22+
GridStack.renderCB = function(el, w) {
23+
el.textContent = w.content;
24+
console.log('created node id ', w.id);
25+
};
26+
let children = [];
27+
for (let y = 0; y <= 5; y++) children.push({x:0, y, id:String(y), content: String(y)});
28+
let grid = GridStack.init({
29+
cellHeight: 200,
30+
children,
31+
lazyLoad: true, // delay creation until visible
32+
});
33+
</script>
34+
</body>
35+
</html>

‎demo/nested.html

Lines changed: 6 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,8 @@ <h1>Nested grids demo</h1>
2121
<a class="btn btn-primary" onClick="addNewWidget('.sub1')" href="#">Add Widget Grid1</a>
2222
<a class="btn btn-primary" onClick="addNewWidget('.sub2')" href="#">Add Widget Grid2</a>
2323
<a class="btn btn-primary" onClick="addNested()" href="#">Add Nested Grid</a>
24-
<div class="sidebar" style="height:50px; padding: 0">
25-
<!-- manually force a drop size of 2x2 for nested size -->
26-
<div class="grid-stack-item" gs-w="2" gs-h="2">
27-
<div class="grid-stack-item-content">Drag nested</div>
28-
</div>
29-
</div>
24+
<!-- add .grid-stack-item for acceptWidgets:true -->
25+
<div class="sidebar-item grid-stack-item">Drag nested</div>
3026
</div>
3127
<br />
3228
<span>entire save/re-create:</span>
@@ -78,7 +74,10 @@ <h1>Nested grids demo</h1>
7874
})
7975

8076
// setup drag drop behavior
81-
GridStack.setupDragIn('.sidebar .grid-stack-item', { appendTo: 'body', helper: 'clone' });
77+
let sidebarContent = [
78+
{ w:2, h:2, subGridOpts: { children: [{content: 'nest 1'}, {content: 'nest 2'}]}}
79+
];
80+
GridStack.setupDragIn('.sidebar-item', undefined, sidebarContent);
8281

8382
function addWidget() {
8483
grid.addWidget({x:0, y:100, content:"new item"});
@@ -104,25 +103,6 @@ <h1>Nested grids demo</h1>
104103
return false;
105104
};
106105

107-
// listener on drop event: every time the sidebar item is dropped create a new subgrid
108-
function droppedHandler(event, prevNode, n) {
109-
// if we don't have a prevNode that means it came from toolbar, which today is the only nested case (else check for some node.el.getAttribute or some custom field...)
110-
if (prevNode) return;
111-
112-
// clear the content then make it a subgrid
113-
n.el.querySelector('.grid-stack-item-content').innerHTML = '';
114-
let nodeToAdd = { children: [{content: 'nest 1'}, {content: 'nest 2'}]};
115-
let subgrid = n.grid.makeSubGrid(n.el, nodeToAdd, undefined, false);
116-
117-
// add a listener to the subgrid to allow widgets to be added into this newly created nested widget
118-
subgrid.on('dropped', droppedHandler);
119-
}
120-
// add listener to the main grid and subgrids
121-
grid.on('dropped', droppedHandler);
122-
document.querySelectorAll('.grid-stack-nested').forEach((subGrid) => {
123-
subGrid.gridstack.on('dropped', droppedHandler);
124-
});
125-
126106
//--- end of Drag and Drop Nested widget logic
127107

128108
function save(content = true, full = true) {
@@ -142,7 +122,6 @@ <h1>Nested grids demo</h1>
142122
function load(full = true) {
143123
if (full) {
144124
grid = GridStack.addGrid(document.querySelector('.container-fluid'), options);
145-
grid.on('dropped', droppedHandler);
146125
} else {
147126
grid.load(options);
148127
}

‎demo/right-to-left(rtl).html

Lines changed: 25 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -5,94 +5,44 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<title>Right-To-Left (RTL) demo</title>
8-
9-
<link rel="stylesheet" href="demo.css"/>
108
<style type="text/css">
9+
/* don't include demo.css as that has some forced text aligment */
10+
@import "../node_modules/gridstack/dist/gridstack.min.css";
11+
.grid-stack {
12+
background: #FAFAD2;
13+
}
1114
.grid-stack-item-content {
12-
text-align: right; /* override demo.css */
15+
background-color: #18bc9c;
1316
}
1417
</style>
15-
16-
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script>
1718
<script src="../node_modules/gridstack/dist/gridstack-all.js"></script>
1819
</head>
1920
<body>
20-
<div class="container-fluid">
21-
<h1>RTL Demo</h1>
22-
<div>
23-
<a class="btn btn-primary" data-bind="click: addNewWidget">Add Widget</a>
24-
</div>
25-
<br>
26-
<div data-bind="component: {name: 'dashboard-grid', params: $data}"></div>
21+
<h1>RTL Demo</h1>
22+
<div>
23+
<button onClick="addWidget()">Add Widget</button>
2724
</div>
25+
<br>
26+
<div class="grid-stack"></div>
2827

2928
<script type="text/javascript">
30-
ko.components.register('dashboard-grid', {
31-
viewModel: {
32-
createViewModel: function (controller, componentInfo) {
33-
let ViewModel = function (controller, componentInfo) {
34-
let grid = null;
35-
36-
this.widgets = controller.widgets;
37-
38-
this.afterAddWidget = function (items) {
39-
if (!grid) {
40-
grid = GridStack.init({auto: false});
41-
}
42-
43-
let item = items.find(function (i) { return i.nodeType == 1 });
44-
grid.addWidget(item);
45-
ko.utils.domNodeDisposal.addDisposeCallback(item, function () {
46-
grid.removeWidget(item);
47-
});
48-
};
49-
};
50-
51-
return new ViewModel(controller, componentInfo);
52-
}
53-
},
54-
template:
55-
[
56-
'<div class="grid-stack" data-bind="foreach: {data: widgets, afterRender: afterAddWidget}">',
57-
' <div class="grid-stack-item" data-bind="attr: {\'gs-x\': $data.x, \'gs-y\': $data.y, \'gs-w\': $data.w, \'gs-h\': $data.h, \'gs-auto-position\': $data.auto_position}">',
58-
' <div class="grid-stack-item-content"><center><button data-bind="click: $root.deleteWidget">Delete me</button><br><h5 data-bind="text: index" /></center><br><p>lorem ipsum</p></div>',
59-
' </div>',
60-
'</div> '
61-
].join('')
62-
});
63-
64-
let Controller = function (widgets) {
65-
let self = this;
66-
67-
this.widgets = ko.observableArray(widgets);
68-
69-
this.addNewWidget = function () {
70-
this.widgets.push({
71-
x: 0,
72-
y: 0,
73-
w: Math.floor(1 + 3 * Math.random()),
74-
h: Math.floor(1 + 3 * Math.random()),
75-
auto_position: true,
76-
index: 'auto'
77-
});
78-
return false;
79-
};
80-
81-
this.deleteWidget = function (item) {
82-
self.widgets.remove(item);
83-
return false;
29+
let items = [
30+
{x: 0, y: 0, w: 2, h: 1},
31+
{x: 2, y: 0, w: 4, h: 1},
32+
{x: 6, y: 0, w: 2, h: 2},
33+
];
34+
items.forEach((item, i) => item.content = 'item ' + i);
35+
let grid = GridStack.init({rtl: true, children: items});
36+
37+
function addWidget() {
38+
let w = {
39+
w: Math.round(1 + 3 * Math.random()),
40+
h: Math.round(1 + 3 * Math.random()),
41+
content: 'new item',
8442
};
43+
grid.addWidget(w);
8544
};
8645

87-
let widgets = [
88-
{x: 0, y: 0, w: 2, h: 2, index: 1},
89-
{x: 2, y: 0, w: 4, h: 2, index: 2},
90-
{x: 6, y: 0, w: 2, h: 4, index: 3},
91-
{x: 1, y: 2, w: 4, h: 2, index: 4}
92-
];
93-
94-
let controller = new Controller(widgets);
95-
ko.applyBindings(controller);
9646
</script>
9747
</body>
9848
</html>

‎demo/serialization.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,11 @@ <h1>Serialization demo</h1>
2424
</div>
2525
<script src="events.js"></script>
2626
<script type="text/javascript">
27+
// NOTE: REAL apps would sanitize-html or DOMPurify before blinding setting innerHTML. see #2736
28+
GridStack.renderCB = function(el, w) {
29+
el.innerHTML = w.content;
30+
};
31+
2732
let serializedData = [
2833
{x: 0, y: 0, w: 2, h: 2},
2934
{x: 2, y: 1, w: 2, h: 3,

‎demo/sizeToContent.html

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,11 @@ <h1>sizeToContent options demo</h1>
6161

6262
</div>
6363
<script type="text/javascript">
64+
// NOTE: REAL apps would sanitize-html or DOMPurify before blinding setting innerHTML. see #2736
65+
GridStack.renderCB = function(el, w) {
66+
el.innerHTML = w.content;
67+
};
68+
6469
let text ='some very large content that will normally not fit in the window.'
6570
text = text + text;
6671
let count = 0;
@@ -86,7 +91,7 @@ <h1>sizeToContent options demo</h1>
8691
grid.load(items); // test loading after
8792
GridStack.init({...opts, children:undefined}, '#grid2');
8893

89-
GridStack.setupDragIn('.sidebar .grid-stack-item', { appendTo: 'body', helper: 'clone' });
94+
GridStack.setupDragIn('.sidebar>.grid-stack-item');
9095

9196
function clearGrid() {
9297
grid.removeAll();
@@ -104,10 +109,7 @@ <h1>sizeToContent options demo</h1>
104109
grid.addWidget({content: `<div>New: ${text}</div>`});
105110
}
106111
function makeWidget() {
107-
let doc = document.implementation.createHTMLDocument();
108-
doc.body.innerHTML = `<div class="item"><div class="grid-stack-item-content"><div>New Make: ${text}</div></div></div>`;
109-
let el = doc.body.children[0];
110-
grid.el.appendChild(el);
112+
let el = GridStack.Utils.createWidgetDivs(undefined, {content: `<div>New Make: ${text}</div>`}, grid.el)
111113
grid.makeWidget(el, {w:2});
112114
}
113115
function more() {

‎demo/static.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ <h1>Static vs can move/drag Demo</h1>
4949
];
5050
grid.load(serializedData);
5151

52-
GridStack.setupDragIn('.sidebar .grid-stack-item', { appendTo: 'body', helper: 'clone' });
52+
GridStack.setupDragIn('.sidebar>.grid-stack-item');
5353

5454
// grid.setStatic(false); // TEST enable after disabled
5555

0 commit comments

Comments
 (0)
0