Merge pull request #2542 from adumesny/master

new `GridStackOptions.responsive`

Author: adumesny

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