Merge pull request gridstack#2548 from adumesny/gh-pages

web v10.0.0
adumesny · Nov 21, 2023 · 7e662f5 · 7e662f5
2 parents 9922a1d + 2c7a3ec
commit 7e662f5
Show file tree

Hide file tree

Showing 25 changed files with 135 additions and 89 deletions.
diff --git a/demo/canvasJS.html b/demo/canvasJS.html
@@ -23,7 +23,6 @@ <h1>CanvasJS grid demo</h1>
   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
   });
 

diff --git a/demo/column.html b/demo/column.html
@@ -7,8 +7,8 @@
   <title>Column grid demo</title>
 
   <link rel="stylesheet" href="demo.css"/>
-  <link rel="stylesheet" href="../node_modules/gridstack/dist/gridstack-extra.min.css"/>
-  <script src="../node_modules/gridstack/dist/gridstack-all.js"></script>
+  <link rel="stylesheet" href="../dist/gridstack-extra.css"/>
+  <script src="../dist/gridstack-all.js"></script>
 </head>
 <body>
   <div class="container-fluid">
@@ -33,8 +33,7 @@ <h1>column() grid demo (fix cellHeight)</h1>
       <a onClick="random()" class="btn btn-primary" href="#">random</a>
       <a onClick="addWidget()" class="btn btn-primary" href="#">Add Widget</a>
       column:
-      <a onClick="setOneColumn(false)" class="btn btn-primary" href="#">1</a>
-      <a onClick="setOneColumn(true)" class="btn btn-primary" href="#">1 DOM</a>
+      <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>
@@ -75,7 +74,6 @@ <h1>column() grid demo (fix cellHeight)</h1>
 
     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
     }).load(list);
     let text = document.querySelector('#column-text');
@@ -107,14 +105,6 @@ <h1>column() grid demo (fix cellHeight)</h1>
       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 => {
@@ -126,7 +116,6 @@ <h1>column() grid demo (fix cellHeight)</h1>
     function setLayout(name) {
       layout = name === 'custom' ? this.columnLayout : name;
     }
-    // setOneColumn(true); // test dom order
   </script>
 </body>
 </html>
diff --git a/demo/custom-engine.html b/demo/custom-engine.html
@@ -50,7 +50,6 @@ <h1>Custom Engine</h1>
 
     let grid = GridStack.init({
       float: true, 
-      disableOneColumnMode: true,
       cellHeight: 70
     }).load(items);
     addEvents(grid);

diff --git a/demo/drag-and-drop-dataTransfer.html b/demo/drag-and-drop-dataTransfer.html
@@ -34,7 +34,6 @@ <h1>Event DataTransfer Demo</h1>
     <script type="text/javascript">
         let options = {
             column: 12,
-            disableOneColumnMode: true,
             acceptWidgets: function (el) { return true; }
         };
         let items = [

diff --git a/demo/events.js b/demo/events.js
@@ -15,22 +15,22 @@ function addEvents(grid, id) {
     console.log(g + 'disable');
   })
   .on('dragstart', function(event, el) {
-    let node = el.gridstackNode;
+    let n = el.gridstackNode;
     let x = el.getAttribute('gs-x'); // verify node (easiest) and attr are the same
     let y = el.getAttribute('gs-y');
-    console.log(g + 'dragstart ' + el.textContent + ' pos: (' + node.x + ',' + node.y + ') = (' + x + ',' + y + ')');
+    console.log(g + 'dragstart ' + (n.content || '') + ' pos: (' + n.x + ',' + n.y + ') = (' + x + ',' + y + ')');
   })
   .on('drag', function(event, el) {
-    let node = el.gridstackNode;
+    let n = el.gridstackNode;
     let x = el.getAttribute('gs-x'); // verify node (easiest) and attr are the same
     let y = el.getAttribute('gs-y');
-    // console.log(g + 'drag ' + el.textContent + ' pos: (' + node.x + ',' + node.y + ') = (' + x + ',' + y + ')');
+    // console.log(g + 'drag ' + (n.content || '') + ' pos: (' + n.x + ',' + n.y + ') = (' + x + ',' + y + ')');
   })
   .on('dragstop', function(event, el) {
-    let node = el.gridstackNode;
+    let n = el.gridstackNode;
     let x = el.getAttribute('gs-x'); // verify node (easiest) and attr are the same
     let y = el.getAttribute('gs-y');
-    console.log(g + 'dragstop ' + el.textContent + ' pos: (' + node.x + ',' + node.y + ') = (' + x + ',' + y + ')');
+    console.log(g + 'dragstop ' + (n.content || '') + ' pos: (' + n.x + ',' + n.y + ') = (' + x + ',' + y + ')');
   })
   .on('dropped', function(event, previousNode, newNode) {
     if (previousNode) {
@@ -43,17 +43,17 @@ function addEvents(grid, id) {
   .on('resizestart', function(event, el) {
     let n = el.gridstackNode;
     let rec = el.getBoundingClientRect();
-    console.log(`${g} resizestart ${el.textContent} size: (${n.w}x${n.h}) = (${Math.round(rec.width)}x${Math.round(rec.height)})px`);
+    console.log(`${g} resizestart ${n.content || ''} size: (${n.w}x${n.h}) = (${Math.round(rec.width)}x${Math.round(rec.height)})px`);
 
   })
   .on('resize', function(event, el) {
     let n = el.gridstackNode;
     let rec = el.getBoundingClientRect();
-    console.log(`${g} resize ${el.textContent} size: (${n.w}x${n.h}) = (${Math.round(rec.width)}x${Math.round(rec.height)})px`);
+    console.log(`${g} resize ${n.content || ''} size: (${n.w}x${n.h}) = (${Math.round(rec.width)}x${Math.round(rec.height)})px`);
   })
   .on('resizestop', function(event, el) {
     let n = el.gridstackNode;
     let rec = el.getBoundingClientRect();
-    console.log(`${g} resizestop ${el.textContent} size: (${n.w}x${n.h}) = (${Math.round(rec.width)}x${Math.round(rec.height)})px`);
+    console.log(`${g} resizestop ${n.content || ''} size: (${n.w}x${n.h}) = (${Math.round(rec.width)}x${Math.round(rec.height)})px`);
   });
 }
diff --git a/demo/index.html b/demo/index.html
@@ -22,7 +22,8 @@ <h1>Demos</h1>
     <li><a href="react-hooks-controlled-multiple.html">ReactJS (Hooks), multiple grid, controlled (NOT Ideal)</a></li>
     <li><a href="react-hooks.html">ReactJS (Hooks)</a></li>
     <li><a href="react.html">ReactJS</a></li>
-    <li><a href="responsive.html">Responsive</a></li>
+    <li><a href="responsive.html">Responsive: by column size</a></li>
+    <li><a href="responsive_break.html">Responsive: using breakpoints</a></li>
     <li><a href="right-to-left(rtl).html">Right-To-Left (RTL)</a></li>
     <li><a href="serialization.html">Serialization</a></li>
     <li><a href="sizeToContent.html">Size To Content</a></li>

diff --git a/demo/mobile.html b/demo/mobile.html
@@ -18,7 +18,6 @@ <h1>Simple mobile demo</h1>
   <script type="text/javascript">
     let grid = GridStack.init({
       column: 3,
-      disableOneColumnMode: true,
     });
     grid.load([{x:0, y:0, content: '1'}, {x:1, y:0, h:2, content: '2'}, {x:2, y:0, content: '3'}])
   </script>

diff --git a/demo/nested.html b/demo/nested.html
@@ -47,7 +47,6 @@ <h1>Nested grids demo</h1>
       cellHeight: 50,
       margin: 5,
       minRow: 2, // don't collapse when empty
-      disableOneColumnMode: true,
       acceptWidgets: true,
       id: 'main',
       children: [

diff --git a/demo/old_two-jq.html b/demo/old_two-jq.html
@@ -56,7 +56,7 @@ <h1>Two grids demo (old v5.1.1 Jquery version)</h1>
       column: 6,
       minRow: 1, // don't collapse when empty
       cellHeight: 70,
-      disableOneColumnMode: true,
+disableOneColumnMode: true,
       float: false,
       // dragIn: '.sidebar .grid-stack-item', // add draggable to class
       // dragInOptions: { revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone' }, // clone

diff --git a/demo/react-hooks-controlled-multiple.html b/demo/react-hooks-controlled-multiple.html
@@ -53,7 +53,6 @@ <h2>Controlled stack</h2>
           {
             float: false,
             acceptWidgets: true,
-            disableOneColumnMode: true, // side-by-side and fever columns to fit smaller screens
             column: 6,
             minRow: 1,
           },

diff --git a/demo/responsive.html b/demo/responsive.html
@@ -1,24 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <title>Responsive grid demo</title>
+  <title>Responsive column</title>
 
   <link rel="stylesheet" href="demo.css"/>
   <link rel="stylesheet" href="../node_modules/gridstack/dist/gridstack-extra.min.css"/>
   <script src="../node_modules/gridstack/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>
+    <h1>Responsive: by column size</h1>
+    <p>Using new v10 <code>GridStackOptions.columnOpts: { columnWidth: x }</code></p>
+
     <div>
       <span>Number of Columns:</span> <span id="column-text"></span>
     </div>
     <div>
       <label>Choose re-layout:</label>
-      <select onchange="layout = this.value">
+      <select onchange="grid.opts.columnOpts.layout = this.value">
         <option value="moveScale">move + scale</option>
         <option value="move">move</option>
         <option value="scale">scale</option>
@@ -35,50 +34,33 @@ <h1>Responsive grid demo</h1>
   </div>
 
   <script type="text/javascript">
-    let grid = GridStack.init({
-      cellHeight: 'auto', // always square
-      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);
-        text.innerHTML = 1;
-      } else if (width < 850) {
-        grid.column(3, layout);
-        text.innerHTML = 3;
-      } else if (width < 950) {
-        grid.column(6, layout);
-        text.innerHTML = 6;
-      } else if (width < 1100) {
-        grid.column(8, layout);
-        text.innerHTML = 8;
-      } else {
-        grid.column(12, layout);
-        text.innerHTML = 12;
-      }
-    };
 
     function addWidget() {
-      grid.addWidget({x:0, y:0, w:4, content: '4x1'});
+      grid.addWidget({x:0, y:0, w:4, id:count++, content: '4x1'});
     };
 
+    let count = 0;
     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: 3, w: 2, content: '4'},
-      {x: 0, y: 4, w: 12, content: '5'}
+      {x: 0, y: 0},
+      {x: 1, y: 0, w: 2, h: 2},
+      {x: 4, y: 0, w: 2},
+      {x: 1, y: 3, w: 4},
+      {x: 5, y: 3, w: 2},
+      {x: 0, y: 4, w: 12}
     ];
-    grid.load(items);
-    resizeGrid(); // finally size to actual window
+    items.forEach(n => {n.id = count; n.content = String(count++)});
 
-    window.addEventListener('resize', function() {resizeGrid()});
+    let grid = GridStack.init({
+      cellHeight: 80, // use 'auto' to make square
+      animate: false, // show immediate (animate: true is nice for user dragging though)
+      columnOpts: {
+        columnWidth: 100, // wanted width
+      },
+      children: items,
+      float: true })
+    .on('change', (ev, gsItems) => text.innerHTML = grid.getColumn());
+    text.innerHTML = grid.getColumn();
   </script>
 </body>
 </html>
diff --git a/demo/responsive_break.html b/demo/responsive_break.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Responsive breakpoint</title>
+
+  <link rel="stylesheet" href="demo.css"/>
+  <link rel="stylesheet" href="../node_modules/gridstack/dist/gridstack-extra.min.css"/>
+  <script src="../node_modules/gridstack/dist/gridstack-all.js"></script>
+</head>
+<body>
+  <div>
+    <h1>Responsive: using breakpoint</h1>
+    <p>Using new v10 <code>GridStackOptions.columnOpts: { breakpoints: [] }</code></p>
+    <div>
+      <span>Number of Columns:</span> <span id="column-text"></span>
+    </div>
+    <div>
+      <label>Choose re-layout:</label>
+      <select onchange="grid.opts.columnOpts.layout = this.value">
+        <option value="moveScale">move + scale</option>
+        <option value="move">move</option>
+        <option value="scale">scale</option>
+        <option value="list">list</option>
+        <option value="compact">compact</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 text = document.querySelector('#column-text');
+
+    function addWidget() {
+      grid.addWidget({x:0, y:0, w:4, id:count++, content: '4x1'});
+    };
+
+    let count = 0;
+    let items = [ // our initial 12 column layout loaded first so we can compare
+      {x: 0, y: 0},
+      {x: 1, y: 0, w: 2, h: 2},
+      {x: 4, y: 0, w: 2},
+      {x: 1, y: 3, w: 4},
+      {x: 5, y: 3, w: 2},
+      {x: 0, y: 4, w: 12}
+    ];
+    items.forEach(n => {n.id = count; n.content = String(count++)});
+
+    let grid = GridStack.init({
+      cellHeight: 80,
+      animate: false, // show immediate (animate: true is nice for user dragging though)
+      columnOpts: {
+        breakpointForWindow: true,  // test window vs grid size
+        breakpoints: [{w:700, c:1},{w:850, c:3},{w:950, c:6},{w:1100, c:8}]
+      },
+      children: items,
+      float: true })
+    .on('change', (ev, gsItems) => text.innerHTML = grid.getColumn());
+    text.innerHTML = grid.getColumn();
+  </script>
+</body>
+</html>
diff --git a/demo/sizeToContent.html b/demo/sizeToContent.html
@@ -21,6 +21,8 @@ <h1>Cell sizeToContent options demo</h1>
     <p>new 9.x feature that size the items to fit their content height as to not have scroll bars
       (unless `sizeToContent:false` in C: case). Defaulting to different initial size (see code) to show grow/shrink behavior.</p>
     <div>
+      <a onClick="clearGrid()" class="btn btn-primary" href="#">clear</a>
+      <a onClick="load()" class="btn btn-primary" href="#">load</a>
       column:
       <a onClick="column(8)" class="btn btn-primary" href="#">8</a>
       <a onClick="column(12)" class="btn btn-primary" href="#">12</a>
@@ -46,14 +48,22 @@ <h1>Cell sizeToContent options demo</h1>
     let grid = GridStack.init(opts);
     let text ='some very large content that will normally not fit in the window.'
     text = text + text;
+    let count = 0;
     let items = [
       {x:0, y:0, w:2, content: `<div>A no h: ${text}</div>`},
       {x:2, y:0, w:1, h:2, content: '<div>B: shrink h=2</div>'}, // make taller than needed upfront
       {x:3, y:0, w:2, sizeToContent: false, content: `<div>C: WILL SCROLL. ${text}</div>`}, // prevent this from fitting testing
       {x:0, y:1, w:3, content: `<div>D no h: ${text} ${text}</div>`},
       {x:3, y:1, w:2, sizeToContent:3, content: `<div>E sizeToContent=3 <button onClick="more()">more</button><button onClick="less()">less</button><div id="dynContent">${text} ${text} ${text}</div></div>`}    ];
+    items.forEach(n => n.id = String(count++));
     grid.load(items);
 
+    function clearGrid() {
+      grid.removeAll();
+    }
+    function load() {
+      grid.load(items);
+    }
     function column(n) {
       grid.column(n, 'none');
     }
@@ -85,6 +95,10 @@ <h1>Cell sizeToContent options demo</h1>
       let el = cont.parentElement.parentElement.parentElement;
       grid.resizeToContent(el);
     }
+
+    // TEST
+    // grid.update(grid.engine.nodes[0].el, {x:7});
+    // load();
   </script>
 </body>
 </html>
diff --git a/demo/two.html b/demo/two.html
@@ -9,6 +9,9 @@
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="demo.css"/>
   <link rel="stylesheet" href="../node_modules/gridstack/dist/gridstack-extra.min.css"/>
+  <style type="text/css">
+    .with-lines { border: 1px dotted #777}
+  </style>
 
   <script src="../node_modules/gridstack/dist/gridstack-all.js"></script>
 </head>
@@ -54,7 +57,6 @@ <h1>Two grids demo</h1>
       column: 6,
       minRow: 1, // don't collapse when empty
       cellHeight: 70,
-      disableOneColumnMode: true,
       float: true,
       removable: '.trash', // true or drag-out delete class
       // itemClass: 'with-lines', // test a custom additional class #2110