gridstack.js/demo/column.html at develop · liquidlabsio/gridstack.js · GitHub

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
<!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-h5.js"></script>
</head>
<body>
  <div class="container-fluid">
    <h1>column() grid demo</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="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>
      <a onClick="addWidget()" class="btn btn-primary" href="#">Add Widget</a>
      <a onClick="setOneColumn(false)" class="btn btn-primary" href="#">1 Column</a>
      <a onClick="setOneColumn(true)" class="btn btn-primary" href="#">1 Column DOM</a>
      <a onClick="column(2)" class="btn btn-primary" href="#">2 Column</a>
      <a onClick="column(3)" class="btn btn-primary" href="#">3 Column</a>
      <a onClick="column(4)" class="btn btn-primary" href="#">4 Column</a>
      <a onClick="column(6)" class="btn btn-primary" href="#">6 Column</a>
      <a onClick="column(8)" class="btn btn-primary" href="#">8 Column</a>
      <a onClick="column(10)" class="btn btn-primary" href="#">10 Column</a>
      <a onClick="column(12)" class="btn btn-primary" href="#">12 Column</a>
    </div>
    <br>
    <div class="grid-stack"></div>
  </div>

  <script type="text/javascript">
    let grid = GridStack.init({float: true});
    let text = document.querySelector('#column-text');
    let layout = 'moveScale';

    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 );
    });

    let items = [
      /* 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 count = 0;
    grid.batchUpdate();
    addWidget(); addWidget(); addWidget(); addWidget();
    grid.commit();

    function addWidget() {
      let n = items[count] || {
        x: Math.round(12 * Math.random()),
        y: Math.round(5 * Math.random()),
        w: Math.round(1 + 3 * Math.random()),
        h: Math.round(1 + 3 * Math.random())
      };
      n.content = '<button onClick="grid.removeWidget(this.parentNode.parentNode)">X</button><br>' + count++ + (n.text ? n.text : '');
      grid.addWidget(n);
    };

    function column(n) {
      grid.column(n, layout);
      text.innerHTML = n;
    }
    function setOneColumn(dom) {
      grid.opts.oneColumnModeDomSort = dom;
      grid.column(1, layout);
      text.innerHTML = dom ? '1 DOM' : '1';
    }
    // 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>