forked from gridstack/gridstack.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcolumn.html
121 lines (113 loc) · 4.27 KB
/
column.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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Column grid demo</title>
<link rel="stylesheet" href="demo.css"/>
<link rel="stylesheet" href="../dist/gridstack-extra.css"/>
<script src="../dist/gridstack-all.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>column() grid demo (fix cellHeight)</h1>
<div><span>Number of Columns:</span> <span id="column-text">12</span></div>
<div>
<label>Choose re-layout:</label>
<select onchange="setLayout(this.value)">
<option value="list">list</option>
<option value="compact">compact</option>
<option value="moveScale">move + scale</option>
<option value="move">move</option>
<option value="scale">scale</option>
<option value="none">none</option>
<option value="custom">custom</option>
</select>
</div>
<div>
load:
<a onClick="grid.removeAll().load(list)" class="btn btn-primary" href="#">list</a>
<a onClick="grid.removeAll().load(test1)" class="btn btn-primary" href="#">case 1</a>
<a onClick="random()" class="btn btn-primary" href="#">random</a>
<a onClick="addWidget()" class="btn btn-primary" href="#">Add Widget</a>
column:
<a onClick="column(1)" class="btn btn-primary" href="#">1</a>
<a onClick="column(2)" class="btn btn-primary" href="#">2</a>
<a onClick="column(3)" class="btn btn-primary" href="#">3</a>
<a onClick="column(4)" class="btn btn-primary" href="#">4</a>
<a onClick="column(6)" class="btn btn-primary" href="#">6</a>
<a onClick="column(8)" class="btn btn-primary" href="#">8</a>
<a onClick="column(10)" class="btn btn-primary" href="#">10</a>
<a onClick="column(12)" class="btn btn-primary" href="#">12</a>
</div>
<br>
<div class="grid-stack"></div>
</div>
<script type="text/javascript">
let test1 = [ // DOM order will be 0,1,2,3,4,5,6 vs column1 = 0,1,4,3,2,5,6
/* match karma testing
{x: 0, y: 0, w: 4, h: 2},
{x: 4, y: 0, w: 4, h: 4},
{text: ' auto'},
*/
{x: 0, y: 0, w: 2, h: 2},
{x: 2, y: 0, w: 2},
{x: 5, y: 1},
{x: 5, y: 0, w: 2},
// {x: 0, y: 0}, // conflict
{text: ' auto'}, // autoPosition testing
// {x: 4, y: 0}, // same auto-pos
{x: 5, y: 3, w: 2},
{x: 0, y: 4, w: 12}
];
let list = [{h:2},{},{},{},{},{},{},{},{},{w:2},{},{},{},{},{},{}];
list.forEach((n,i) => {
n.content = '<button onClick="grid.removeWidget(this.parentNode.parentNode)">X</button><br>' + ++i;
});
let count = 0;
test1.forEach(n => {
n.content = '<button onClick="grid.removeWidget(this.parentNode.parentNode)">X</button><br>' + count++ + (n.text ? n.text : '');
});
let grid = GridStack.init({
float: true,
cellHeight: 100 // fixed as default 'auto' (square) makes it hard to test 1-3 column in actual large windows tests
}).load(list);
let text = document.querySelector('#column-text');
let layout = 'list';
grid.on('added removed change', function(e, items) {
let str = '';
items.forEach(function(item) { str += ' (x,y)=' + item.x + ',' + item.y; });
console.log(e.type + ' ' + items.length + ' items:' + str );
});
function random() {
grid.removeAll();
count = 0;
for (i=0; i<8; i++) addWidget(true);
}
function addWidget() {
let n = {
w: Math.round(1 + 3 * Math.random()),
h: Math.round(1 + 3 * Math.random()),
content: '<button onClick="grid.removeWidget(this.parentNode.parentNode)">X</button><br>' + count++,
};
grid.addWidget(n);
};
function column(n) {
grid.column(n, layout);
text.innerHTML = n;
}
// dummy test method that moves items to the right each new layout... grid engine will validate those values (can't be neg or out of bounds) anyway...
function columnLayout(column, oldColumn, nodes, oldNodes) {
oldNodes.forEach(n => {
n.x = n.x + 1;
nodes.push(n);
});
oldNodes.length = 0;
}
function setLayout(name) {
layout = name === 'custom' ? this.columnLayout : name;
}
</script>
</body>
</html>