gridstack.js/demo/column.html at master · ZOUJIELynn/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
110
111
112
113
114
115
116
117
<!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 (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="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,
      disableOneColumnMode: true, // prevent auto column for this manual demo
      cellHeight: 100 // fixed as default 'auto' (square) makes it hard to test 1-3 column in actual large windows tests
    });
    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;
    items.forEach(n => {
      n.content = '<button onClick="grid.removeWidget(this.parentNode.parentNode)">X</button><br>' + count++ + (n.text ? n.text : '');
      grid.addWidget(n); // DOM order will be 0,1,2,3,4,5,6 vs column1 = 0,1,4,3,2,5,6
    });

    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) {
      if (grid.opts.column === 1 && grid.opts.oneColumnModeDomSort !== dom) {
        column(12); // go ack to 12 before going to new column1 version
      }
      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;
    }
    // setOneColumn(true); // test dom order
  </script>
</body>
</html>