new GridStackOptions.responsive

* we now support much richer responsive behavior with `GridStackOptions.responsive` including any breakpoint width:column pairs, or automatic column sizing
* `disableOneColumnMode`, `oneColumnSize`, `oneColumnModeDomSort` have been removed (see v10 migration doc)

README.md

@@ -46,6 +46,7 @@ Join us on Slack: [https://gridstackjs.slack.com](https://gridstackjs.slack.com)
   - [Migrating to v7](#migrating-to-v7)
   - [Migrating to v8](#migrating-to-v8)
   - [Migrating to v9](#migrating-to-v9)
+  - [Migrating to v10](#migrating-to-v10)
 - [jQuery Application](#jquery-application)
 - [Changes](#changes)
 - [The Team](#the-team)
@@ -450,6 +451,15 @@ New addition - see release notes about `sizeToContent` feature.
 Possible break:
 * `GridStack.onParentResize()` is now called `onResize()` as grid now directly track size change, no longer involving parent per say to tell us anything. Note sure why it was public.
 
+## Migrating to v10
+
+we now support much richer responsive behavior with `GridStackOptions.responsive` including any breakpoint width:column pairs, or automatic column sizing.
+
+breaking change: 
+* `disableOneColumnMode`, `oneColumnSize` have been removed (thought we temporary convert if you have them). use `{ responsive: breakpoints: [{w:768, c:1}] }` for the same behavior.
+* 1 column mode switch is no longer by default (`responsive` is not defined) as too many new users had issues. Instead set it explicitly (see above).
+* `oneColumnModeDomSort` has been removed. Planning to support per column layouts at some future times. TBD
+
 # jQuery Application
 
 This is **old and no longer apply to v6+**. You'll need to use v5.1.1 and before

angular/projects/demo/src/app/app.component.ts

@@ -62,7 +62,6 @@ export class AppComponent implements OnInit {
     cellHeight: 50,
     margin: 5,
     minRow: 2, // don't collapse when empty
-    disableOneColumnMode: true,
     acceptWidgets: true,
     children: this.subChildren
   };
@@ -71,7 +70,6 @@ export class AppComponent implements OnInit {
     cellHeight: 50,
     margin: 5,
     minRow: 1, // don't collapse when empty
-    disableOneColumnMode: true,
     removable: '.trash',
     acceptWidgets: true,
     float: true,

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

demo/column.html

@@ -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>
@@ -107,14 +106,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 +117,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>

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

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 = [

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>

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>

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: [

demo/old_two-jq.html

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

demo/react-hooks-controlled-multiple.html

@@ -52,7 +52,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,
           },

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="../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>
+    <h1>Responsive: by column size</h1>
+    <p>Using new v10 <code>GridStackOptions.responsive: { 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.responsive.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)
+      responsive: {
+        columnWidth: 100, // wanted width
+      },
+      children: items,
+      float: true })
+    .on('change', (ev, gsItems) => text.innerHTML = grid.getColumn());
+    text.innerHTML = grid.getColumn();
   </script>
 </body>
 </html>

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="../dist/gridstack-extra.css"/>
+  <script src="../dist/gridstack-all.js"></script>
+</head>
+<body>
+  <div>
+    <h1>Responsive: using breakpoint</h1>
+    <p>Using new v10 <code>GridStackOptions.responsive: { 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.responsive.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)
+      responsive: {
+        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>

demo/two.html

@@ -57,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

demo/web1.html

@@ -25,7 +25,6 @@ <h1>Web demo 1</h1>
   <script type="text/javascript">
     let grid = GridStack.init({
       cellHeight: 70,
-      disableOneColumnMode: true,
     });
 
     let items = [

demo/web2.html

@@ -62,7 +62,6 @@ <h1>Advanced Demo</h1>
       cellHeight: 70,
       acceptWidgets: true,
       removable: '#trash', // drag-out delete class
-      disableOneColumnMode: true,
     });
     GridStack.setupDragIn('.newWidget', { appendTo: 'body', helper: 'clone' });
 

doc/CHANGES.md

@@ -5,6 +5,7 @@ Change log
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 **Table of Contents**  *generated with [DocToc](http://doctoc.herokuapp.com/)*
 
+- [10.0.0 (TBD)](#1000-tbd)
 - [9.5.1 (2023-11-11)](#951-2023-11-11)
 - [9.5.0 (2023-10-26)](#950-2023-10-26)
 - [9.4.0 (2023-10-15)](#940-2023-10-15)
@@ -104,6 +105,10 @@ Change log
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
+## 10.0.0 (TBD)
+* feat - we now support much richer responsive behavior with `GridStackOptions.responsive` including any breakpoint width:column pairs, or automatic column sizing. 
+* `disableOneColumnMode`, `oneColumnSize`, `oneColumnModeDomSort` have been removed (see v10 migration doc)
+
 ## 9.5.1 (2023-11-11)
 * fix [#2525](https://github.com/gridstack/gridstack.js/commit/2525) Fixed unhandled exception happening in _mouseMove handler
 * fix potential crash in doContentResize() if grid gets deleted by the time the delay happens