Skip to content

Commit bc2ac6b

Browse files
adumesnyadumesny
authored
Merge pull request #3416 from adumesny/gh-pages
web 14.0.0
2 parents 27b6c1e + 146644d commit bc2ac6b

28 files changed

Lines changed: 679 additions & 56 deletions

‎demo/canvasJS.html‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>CanvasJS grid demo</title>
5+
6+
<link rel="stylesheet" href="demo.css"/>
7+
<script src="https://cdn.jsdelivr.net/npm/gridstack@5.1.1/dist/gridstack-jq.js"></script>
8+
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
9+
10+
<style type="text/css">
11+
body { margin: 8px 0; } /* make grid take entire vw so we have correct square cells */
12+
</style>
13+
</head>
14+
<body>
15+
<div>
16+
<h1>CanvasJS grid demo</h1>
17+
<br/>
18+
<div class="grid-stack">
19+
</div>
20+
</div>
21+
22+
<script type="text/javascript">
23+
let grid = GridStack.init({
24+
cellHeight: 'initial', // start square but will set to % of window width later
25+
animate: false, // show immediate (animate: true is nice for user dragging though)
26+
mode: 'float'
27+
});
28+
29+
let items = [ // our initial 12 column layout loaded first so we can compare
30+
{x: 1, y: 1, w: 7, h:3 , content: '<div id="chartContainer" style="height: 370px; width: 100%;"></div>'},
31+
];
32+
grid.load(items);
33+
34+
var chart = new CanvasJS.Chart("chartContainer", {
35+
animationEnabled: true,
36+
title:{
37+
text: "Company Revenue by Year"
38+
},
39+
axisY: {
40+
title: "Revenue in USD",
41+
valueFormatString: "#0,,.",
42+
suffix: "mn",
43+
prefix: "$"
44+
},
45+
data: [{
46+
type: "splineArea",
47+
color: "rgba(54,158,173,.7)",
48+
markerSize: 5,
49+
xValueFormatString: "YYYY",
50+
yValueFormatString: "$#,##0.##",
51+
dataPoints: [
52+
{ x: new Date(2000, 0), y: 3289000 },
53+
{ x: new Date(2001, 0), y: 3830000 },
54+
{ x: new Date(2002, 0), y: 2009000 },
55+
{ x: new Date(2003, 0), y: 2840000 },
56+
{ x: new Date(2004, 0), y: 2396000 },
57+
{ x: new Date(2005, 0), y: 1613000 },
58+
{ x: new Date(2006, 0), y: 2821000 },
59+
{ x: new Date(2007, 0), y: 2000000 },
60+
{ x: new Date(2008, 0), y: 1397000 },
61+
{ x: new Date(2009, 0), y: 2506000 },
62+
{ x: new Date(2010, 0), y: 2798000 },
63+
{ x: new Date(2011, 0), y: 3386000 },
64+
{ x: new Date(2012, 0), y: 6704000},
65+
{ x: new Date(2013, 0), y: 6026000 },
66+
{ x: new Date(2014, 0), y: 2394000 },
67+
{ x: new Date(2015, 0), y: 1872000 },
68+
{ x: new Date(2016, 0), y: 2140000 }
69+
]
70+
}]
71+
});
72+
chart.render();
73+
</script>
74+
</body>
75+
</html>

‎demo/cell-height.html‎

Lines changed: 46 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,25 +9,46 @@
99
<link rel="stylesheet" href="demo.css"/>
1010
<script src="../node_modules/gridstack/dist/gridstack-all.js"></script>
1111
<style type="text/css">
12+
html, body {
13+
width: 100%;
14+
height: 100%;
15+
margin: 0;
16+
display: flex;
17+
}
1218
.container {
1319
background-color: lightblue;
1420
width: 100%;
15-
height: 800px;
21+
flex: 1;
22+
max-height: 800px; /* test grid not filling entire page */
23+
display: flex;
24+
flex-direction: column;
1625
}
1726
</style>
18-
1927
</head>
2028
<body>
2129
<div class="container">
2230
<h1>Cell Height grid options demo</h1>
23-
<p>sample showing the different cellHeight options and what happens when you resize the window</p>
31+
<p>sample showing the different cellHeight options and what happens when you resize the window<br>
32+
<b>New:</b> v14.x <i>cellHeight:'fill'</i> (rows divide the <b>grid height</b> which MUST be set by the app to something fixed as GS won't set a size)</p>
2433
<div>
2534
<a class="btn btn-primary" onClick="setOpt('auto')" href="#">auto</a>
2635
<a class="btn btn-primary" onClick="setOpt('initial')" href="#">initial</a>
2736
<a class="btn btn-primary" onClick="setOpt(100)" href="#">100px</a>
2837
<a class="btn btn-primary" onClick="setOpt('10vh')" href="#">'10vh'</a>
38+
<a class="btn btn-primary" onClick="setOpt('fill')" href="#">fill</a>
2939
<a class="btn btn-primary" onClick="setOpt('10%')" href="#">'10%' of blue (broken)</a>
3040
<span>settings:</span><span id="info"></span>
41+
<span>rows:</span><span id="rows"></span>
42+
<a class="btn btn-primary" onClick="grid.removeAll()" href="#">clear</a>
43+
</div>
44+
<br>
45+
<div class="sidebar" style="height: 40px">
46+
<div class="grid-stack-item">
47+
<div class="grid-stack-item-content">1x1</div>
48+
</div>
49+
<div class="grid-stack-item" gs-h="2">
50+
<div class="grid-stack-item-content">1x2</div>
51+
</div>
3152
</div>
3253
<br>
3354
<div class="grid-stack"></div>
@@ -36,21 +57,33 @@ <h1>Cell Height grid options demo</h1>
3657
let opts = {
3758
cellHeight: 'auto', // see other possible values (best to do in here)
3859
cellHeightThrottle: 100,
60+
acceptWidgets: true,
61+
children: [{x:0, y:0, content:'0'}, {x:1, y:0, w:2, content:'1'}, {x:3, y:0, h:2, content:'2'}]
3962
}
40-
let grid = GridStack.init(opts);
41-
let items = [
42-
{x:0, y:0, content:'0'},
43-
{x:1, y:0, w:2, content:'1'},
44-
{x:3, y:0, h:2, content:'2'},
45-
];
46-
grid.load(items);
4763

4864
let info = document.querySelector('#info');
49-
info.innerHTML = opts.cellHeight;
50-
setOpt = function(val) {
51-
grid.cellHeight(val);
65+
let rows = document.querySelector('#rows');
66+
let grid_el = document.querySelector('.grid-stack');
67+
setOpt = function(val, update = true) {
68+
if (val === 'fill') {
69+
grid_el.style.flex = '1';
70+
} else {
71+
grid_el.style.flex = 'none';
72+
}
73+
if (update && grid) grid.cellHeight(val);
5274
info.innerHTML = val;
5375
}
76+
77+
// initialize our CSS state BEFORE grid (reduces flicker)
78+
setOpt(opts.cellHeight, false);
79+
let grid = GridStack.init(opts);
80+
81+
GridStack.setupDragIn('.sidebar .grid-stack-item', { appendTo: 'body', helper: 'clone' });
82+
83+
grid.on('change added removed', function(e, items) {
84+
rows.innerHTML = grid.getRow();
85+
});
86+
rows.innerHTML = grid.getRow();
5487
</script>
5588
</body>
5689
</html>

‎demo/column.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ <h1>column() grid demo (fix cellHeight)</h1>
7777
});
7878

7979
let grid = GridStack.init({
80-
float: true,
80+
mode: 'float',
8181
cellHeight: 100 // fixed as default 'auto' (square) makes it hard to test 1-3 column in actual large windows tests
8282
}).load(list);
8383
let text = document.querySelector('#column-text');

‎demo/css_attributes.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88

99
<link rel="stylesheet" href="demo.css"/>
1010
<script src="../node_modules/gridstack/dist/gridstack-all.js"></script>
11+
1112
</head>
1213
<body>
1314
<div class="container-fluid">
@@ -22,7 +23,7 @@ <h1>Demo showcasing how to use gridstack.js attributes in CSS</h1>
2223
<script src="events.js"></script>
2324
<script type="text/javascript">
2425
let grid = GridStack.init({
25-
float: true,
26+
mode: 'float',
2627
resizable: { handles: 'all'}
2728
});
2829
addEvents(grid);

‎demo/custom-engine.html‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
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>Custom Engine</title>
8+
9+
<link rel="stylesheet" href="demo.css"/>
10+
<!-- <script src="../node_modules/gridstack/dist/gridstack-all.js"></script> -->
11+
<script src="events.js"></script>
12+
</head>
13+
<body>
14+
<div class="container-fluid">
15+
<h1>Custom Engine</h1>
16+
<p>shows a custom engine subclass in Typescript that only allows objects to move vertically.</p>
17+
<div>
18+
<a class="btn btn-primary" onClick="addNewWidget()" href="#">Add Widget</a>
19+
<label>mode:</label>
20+
<select onchange="grid.mode(this.value)">
21+
<option value="top">top</option>
22+
<option value="float" selected>float</option>
23+
<option value="list">list</option>
24+
<option value="compact">compact</option>
25+
</select>
26+
</div>
27+
<br><br>
28+
<div class="grid-stack"></div>
29+
</div>
30+
31+
<script type="module" > // so we can use import
32+
// get CORS error in Chrome...need to have http://localhost/ URL - see https://stackoverflow.com/questions/50197495/javascript-modules-and-cors
33+
import { GridStack, GridStackEngine } from '../node_modules/gridstack/dist/gridstack-all.js';
34+
35+
/**
36+
* Custom engine class that only allows vertical movement and resizing
37+
*/
38+
class CustomEngine extends GridStackEngine {
39+
/** refined this to move the node to the given new location */
40+
moveNode(node, o) {
41+
// keep the same original X and Width and let base do it all...
42+
o.x = node.x;
43+
o.w = node.w;
44+
return super.moveNode(node, o);
45+
}
46+
}
47+
GridStack.registerEngine(CustomEngine); // globally set our custom class
48+
49+
let count = 0;
50+
let items = [
51+
{x: 0, y: 0},
52+
{x: 1, y: 0},
53+
{x: 1, y: 2, w: 3},
54+
];
55+
items.forEach(n => n.content = String(count++));
56+
57+
// NOTE: module scope, so expose what the inline HTML handlers need
58+
let grid = window.grid = GridStack.init({
59+
mode: 'float',
60+
cellHeight: 70
61+
}).load(items);
62+
addEvents(grid);
63+
64+
let addNewWidget = window.addNewWidget = function() {
65+
let n = items[count] || {
66+
x: Math.round(12 * Math.random()),
67+
y: Math.round(5 * Math.random()),
68+
w: Math.round(1 + 3 * Math.random()),
69+
h: Math.round(1 + 3 * Math.random())
70+
};
71+
n.content = n.content || String(count++);
72+
grid.addWidget(n);
73+
};
74+
</script>
75+
</body>
76+
</html>

‎demo/esmodule.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
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>ES Module demo</title>
8+
9+
<link rel="stylesheet" href="demo.css"/>
10+
11+
</head>
12+
<body>
13+
<h1>ES Module loading demo</h1>
14+
<div class="grid-stack"></div>
15+
16+
<!-- loading GS as an ES module instead of commonjs all.js. doesn't work (see #2476) and get CORS error locally -->
17+
<script type="module">
18+
import { GridStack } from '../node_modules/gridstack/dist/gridstack.js';
19+
20+
let items = [{x: 1, y: 1}, {x: 2, y: 2, w: 3}];
21+
let count = 0;
22+
items.forEach(e => e.content = String(count++));
23+
24+
GridStack.init({mode: 'float'}).load(items);
25+
</script>
26+
</body>
27+
</html>

‎demo/float.html‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,21 @@ <h1>Float grid demo</h1>
1616
<div>
1717
<a class="btn btn-primary" onClick="addNewWidget()" href="#">Add Widget</a>
1818
<a class="btn btn-primary" onClick="makeNewWidget()" href="#">Make Widget</a>
19-
<a class="btn btn-primary" onclick="toggleFloat()" id="float" href="#">float: true</a>
19+
<label>mode:</label>
20+
<select onchange="grid.mode(this.value)">
21+
<option value="top">top</option>
22+
<option value="float" selected>float</option>
23+
<option value="list">list</option>
24+
<option value="compact">compact</option>
25+
</select>
2026
</div>
2127
<br><br>
2228
<div class="grid-stack"></div>
2329
</div>
2430
<script src="events.js"></script>
2531
<script type="text/javascript">
2632
let grid = GridStack.init({
27-
float: true,
33+
mode: 'float',
2834
// disableResize: true, // TEST no resizing, but dragging
2935
resizable: { handles: 'all'} // do all sides for testing
3036
});
@@ -65,10 +71,6 @@ <h1>Float grid demo</h1>
6571
let w = grid.makeWidget(el);
6672
};
6773

68-
toggleFloat = function() {
69-
grid.float(! grid.getFloat());
70-
document.querySelector('#float').innerHTML = 'float: ' + grid.getFloat();
71-
};
7274
addNewWidget();
7375
</script>
7476
</body>

‎demo/index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,13 @@ <h1>Demos</h1>
1313
<li><a href="cell-height.html">Cell Height</a></li>
1414
<li><a href="column.html">Column</a></li>
1515
<li><a href="css_attributes.html">CSS & attributes</a></li>
16+
<!-- <li><a href="esmodule.html">ES Module test</a></li> -->
1617
<li><a href="float.html">Float grid</a></li>
1718
<li><a href="grid-lines.html">Grid Lines</a></li>
1819
<li><a href="knockout.html">Knockout.js</a></li>
1920
<li><a href="lazy_load.html">Lazy Load</a></li>
21+
<li><a href="list.html">List grid</a></li>
22+
<li><a href="list_advanced.html">List grid (advanced)</a></li>
2023
<li><a href="mobile.html">Mobile touch</a></li>
2124
<li><a href="nested.html">Nested grids</a></li>
2225
<li><a href="nested_advanced.html">Nested Advanced grids</a></li>

0 commit comments

Comments
 (0)