forked from gridstack/gridstack.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
responsive.html
82 lines (76 loc) · 2.62 KB
/
responsive.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html lang="en">
<head>
<title>Responsive grid demo</title>
<link rel="stylesheet" href="demo.css"/>
<link rel="stylesheet" href="../dist/gridstack-extra.css"/>
<script src="../dist/gridstack-all.js"></script>
<style type="text/css">
body { margin: 8px 0; } /* make grid take entire vw so we have correct square cells */
</style>
</head>
<body>
<div>
<h1>Responsive grid demo</h1>
<div>
<span>Number of Columns:</span> <span id="column-text"></span>
</div>
<div>
<label>Choose re-layout:</label>
<select onchange="layout = this.value">
<option value="moveScale">move + scale</option>
<option value="move">move</option>
<option value="scale">scale</option>
<option value="none">none</option>
</select>
<a onClick="grid.removeAll()" class="btn btn-primary" href="#">Clear</a>
<a onClick="addWidget()" class="btn btn-primary" href="#">Add Widget</a>
</div>
<br/>
<div class="grid-stack">
</div>
</div>
<script type="text/javascript">
let grid = GridStack.init({
cellHeight: 'initial', // start square but will set to % of window width later
animate: false, // show immediate (animate: true is nice for user dragging though)
disableOneColumnMode: true, // will manually do 1 column
float: true });
let text = document.querySelector('#column-text');
let layout = 'moveScale';
function resizeGrid() {
let width = document.body.clientWidth;
if (width < 700) {
grid.column(1, layout).cellHeight('100vw');
text.innerHTML = 1;
} else if (width < 850) {
grid.column(3, layout).cellHeight('33.3333vw');
text.innerHTML = 3;
} else if (width < 950) {
grid.column(6, layout).cellHeight('16.6666vw');
text.innerHTML = 6;
} else if (width < 1100) {
grid.column(8, layout).cellHeight('12.25vw');
text.innerHTML = 8;
} else {
grid.column(12, layout).cellHeight('8.3333vw');
text.innerHTML = 12;
}
};
function addWidget() {
grid.addWidget({x:0, y:0, w:4, content: '4x1'});
};
let items = [ // our initial 12 column layout loaded first so we can compare
{x: 0, y: 0, w: 2, content: '0'},
{x: 2, y: 0, w: 2, h: 2, content: '1'},
{x: 5, y: 0, content: '2'},
{x: 1, y: 3, w: 4, content: '3'},
{x: 5, y: 2, w: 2, content: '4'},
{x: 0, y: 4, w: 12, content: '5'}
];
grid.load(items);
resizeGrid(); // finally size to actual window
window.addEventListener('resize', function() {resizeGrid()});
</script>
</body>
</html>