Merge pull request #2545 from adumesny/master

adumesny · web-flow · commit 9bc45120dda6 · 2023-11-20T17:33:27.000-08:00
more responsive tweaks.
diff --git a/README.md b/README.md
@@ -453,7 +453,7 @@ Possible break:
 
 ## Migrating to v10
 
-we now support much richer responsive behavior with `GridStackOptions.responsive` including any breakpoint width:column pairs, or automatic column sizing.
+we now support much richer responsive behavior with `GridStackOptions.columnOpts` 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.
diff --git a/demo/responsive.html b/demo/responsive.html
@@ -10,14 +10,14 @@
 <body>
   <div>
     <h1>Responsive: by column size</h1>
-    <p>Using new v10 <code>GridStackOptions.responsive: { columnWidth: x }</code></p>
+    <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="grid.opts.responsive.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>
@@ -54,7 +54,7 @@ <h1>Responsive: by column size</h1>
     let grid = GridStack.init({
       cellHeight: 80, // use 'auto' to make square
       animate: false, // show immediate (animate: true is nice for user dragging though)
-      responsive: {
+      columnOpts: {
         columnWidth: 100, // wanted width
       },
       children: items,
diff --git a/demo/responsive_break.html b/demo/responsive_break.html
@@ -10,13 +10,13 @@
 <body>
   <div>
     <h1>Responsive: using breakpoint</h1>
-    <p>Using new v10 <code>GridStackOptions.responsive: { breakpoints: [] }</code></p>
+    <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.responsive.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>
@@ -53,7 +53,7 @@ <h1>Responsive: using breakpoint</h1>
     let grid = GridStack.init({
       cellHeight: 80,
       animate: false, // show immediate (animate: true is nice for user dragging though)
-      responsive: {
+      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}]
       },
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
@@ -106,7 +106,7 @@ Change log
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
 ## 10.0.0 (TBD)
-* feat [#2542](https://github.com/gridstack/gridstack.js/pull/2542) we now support much richer responsive behavior with `GridStackOptions.responsive` including any breakpoint width:column pairs, or automatic column sizing. 
+* feat [#2542](https://github.com/gridstack/gridstack.js/pull/2542) we now support much richer responsive behavior with `GridStackOptions.columnOpts` 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)
diff --git a/doc/README.md b/doc/README.md
@@ -7,7 +7,7 @@ gridstack.js API
 
 - [Grid Options](#grid-options)
   - [Responsive](#responsive)
-    - [ResponsiveBreakpoint](#responsivebreakpoint)
+    - [Breakpoint](#breakpoint)
   - [DDDragOpt](#dddragopt)
   - [DDDragInOpt extends DDDragOpt](#dddraginopt-extends-dddragopt)
 - [Grid attributes](#grid-attributes)
@@ -95,6 +95,7 @@ gridstack.js API
    * A value of 0 will make it instant at a cost of re-creating the CSS file at ever window resize event!
 - `children`?: GridStackWidget[] - list of children item to create when calling load() or addGrid()
 - `column` - Integer > 0 (default 12) which can change on the fly with `column(N)` API, or `'auto'` for nested grids to size themselves to the parent grid container (to make sub-items are the same size). See [column](http://gridstackjs.com/demo/column.html) and [nested](http://gridstackjs.com/demo/nested.html)
+- `columnOpts`?:Responsive - describes the responsive nature of the column grid. see `Responsive` interface.
 - `class`?: string - additional class on top of '.grid-stack' (which is required for our CSS) to differentiate this instance
 - `disableDrag` - disallows dragging of widgets (default: `false`).
 - `disableResize` - disallows resizing of widgets (default: `false`).
@@ -122,7 +123,6 @@ GridStack will add it to the `<style>` elements it creates.
 - `resizable` - allows to override resizable options. (default: `{handles: 'se'}`). `handles` can be any combo of `n,ne,e,se,s,sw,w,nw` or `all`.
 - `removable` - if `true` widgets could be removed by dragging outside of the grid. It could also be a selector string, in this case widgets will be removed by dropping them there (default: `false`) See [example](http://gridstackjs.com/demo/two.html)
 - `removeTimeout` - time in milliseconds before widget is being removed while dragging outside of the grid. (default: `2000`)
-- `responsive` - describes the responsive nature of the grid. see `Responsive` interface.
 - `row` - fix grid number of rows. This is a shortcut of writing `minRow:N, maxRow:N`. (default `0` no constrain)
 - `rtl` - if `true` turns grid to RTL. Possible values are `true`, `false`, `'auto'` (default: `'auto'`) See [example](https://gridstackjs.com/demo/right-to-left(rtl).html)
 - `staticGrid` - removes drag|drop|resize (default `false`). If `true` widgets are not movable/resizable by the user, but code can still move and oneColumnMode will still work. You can use the smaller gridstack-static.js lib. A CSS class `grid-stack-static` is also added to the container.
@@ -134,9 +134,9 @@ v10.x supports a much richer responsive behavior, you can have breakpoints of wi
 - `columnMax`?: number - maximum number of columns allowed (default: 12). Note: make sure to have correct CSS to support this.
 - `layout`?: ColumnOptions - global re-layout mode when changing columns
 - `breakpointForWindow`?: boolean - specify if breakpoints are for window size or grid size (default:false = grid)
-- `breakpoints`?: ResponsiveBreakpoint[] - explicit width:column breakpoints instead of automatic 'columnWidth'. Note: make sure to have correct CSS to support this.
+- `breakpoints`?: Breakpoint[] - explicit width:column breakpoints instead of automatic 'columnWidth'. Note: make sure to have correct CSS to support this.
 
-#### ResponsiveBreakpoint
+#### Breakpoint
 - `w`?: number - width
 - `c`: number - column
 - `layout`?: ColumnOptions - re-layout mode if different from global one
diff --git a/src/gridstack.ts b/src/gridstack.ts
@@ -289,19 +289,19 @@ export class GridStack {
     if (opts.alwaysShowResizeHandle !== undefined) {
       (opts as InternalGridStackOptions)._alwaysShowResizeHandle = opts.alwaysShowResizeHandle;
     }
-    let bk = opts.responsive?.breakpoints;
+    let bk = opts.columnOpts?.breakpoints;
     // LEGACY: oneColumnMode stuff changed in v10.x - check if user explicitly set something to convert over
     const oldOpts: OldOneColumnOpts = opts;
     if (oldOpts.oneColumnModeDomSort) {
       delete oldOpts.oneColumnModeDomSort;
-      console.log('Error: Gridstack oneColumnModeDomSort no longer supported. Check GridStackOptions.responsive instead.')
+      console.log('Error: Gridstack oneColumnModeDomSort no longer supported. Check GridStackOptions.columnOpts instead.')
     }
     if (oldOpts.oneColumnSize || oldOpts.disableOneColumnMode === false) {
       const oneSize = oldOpts.oneColumnSize || 768;
       delete oldOpts.oneColumnSize;
       delete oldOpts.disableOneColumnMode;
-      opts.responsive = opts.responsive || {};
-      bk = opts.responsive.breakpoints = opts.responsive.breakpoints || [];
+      opts.columnOpts = opts.columnOpts || {};
+      bk = opts.columnOpts.breakpoints = opts.columnOpts.breakpoints || [];
       let oneColumn = bk.find(b => b.c === 1);
       if (!oneColumn) {
         oneColumn = {c: 1, w: oneSize};
@@ -310,10 +310,10 @@ export class GridStack {
     }
     //...end LEGACY
     // cleanup responsive opts (must have columnWidth | breakpoints) then sort breakpoints by size (so we can match during resize)
-    const resp = opts.responsive;
+    const resp = opts.columnOpts;
     if (resp) {
       if (!resp.columnWidth && !resp.breakpoints?.length) {
-        delete opts.responsive;
+        delete opts.columnOpts;
         bk = undefined;
       } else {
         resp.columnMax = resp.columnMax || 12;
@@ -534,7 +534,7 @@ export class GridStack {
     if (ops.column === 'auto') {
       autoColumn = true;
       ops.column = Math.max(node.w || 1, nodeToAdd?.w || 1);
-      delete ops.responsive; // driven by parent
+      delete ops.columnOpts; // driven by parent
     }
 
     // if we're converting an existing full item, move over the content to be the first sub item in the new grid
@@ -871,11 +871,11 @@ export class GridStack {
   protected _widthOrContainer(forBreakpoint = false): number {
     // use `offsetWidth` or `clientWidth` (no scrollbar) ?
     // https://stackoverflow.com/questions/21064101/understanding-offsetwidth-clientwidth-scrollwidth-and-height-respectively
-    return forBreakpoint && this.opts.responsive?.breakpointForWindow ? window.innerWidth : (this.el.clientWidth || this.el.parentElement.clientWidth || window.innerWidth);
+    return forBreakpoint && this.opts.columnOpts?.breakpointForWindow ? window.innerWidth : (this.el.clientWidth || this.el.parentElement.clientWidth || window.innerWidth);
   }
   /** checks for dynamic column count for our current size, returning true if changed */
   protected checkDynamicColumn(): boolean {
-    const resp = this.opts.responsive;
+    const resp = this.opts.columnOpts;
     if (!resp || (!resp.columnWidth && !resp.breakpoints?.length)) return false;
     const column = this.getColumn();
     let newColumn = column;
@@ -932,7 +932,7 @@ export class GridStack {
     this.el.classList.add('gs-' + column);
 
     // update the items now, checking if we have a custom children layout
-    /*const newChildren = this.opts.responsive?.breakpoints?.find(r => r.c === column)?.children;
+    /*const newChildren = this.opts.columnOpts?.breakpoints?.find(r => r.c === column)?.children;
     if (newChildren) this.load(newChildren);
     else*/ this.engine.columnChanged(oldColumn, column, undefined, layout);
     if (this._isAutoCellHeight) this.cellHeight();
@@ -1761,7 +1761,7 @@ export class GridStack {
   protected _updateResizeEvent(forceRemove = false): GridStack {
     // only add event if we're not nested (parent will call us) and we're auto sizing cells or supporting dynamic column (i.e. doing work)
     // or supporting new sizeToContent option.
-    const trackSize = !this.parentGridItem && (this._isAutoCellHeight || this.opts.sizeToContent || this.opts.responsive
+    const trackSize = !this.parentGridItem && (this._isAutoCellHeight || this.opts.sizeToContent || this.opts.columnOpts
       || this.engine.nodes.find(n => n.sizeToContent));
 
     if (!forceRemove && trackSize && !this.resizeObserver) {
diff --git a/src/types.ts b/src/types.ts
@@ -89,20 +89,20 @@ export type ResizeToContentFcn = (el: GridItemHTMLElement, useAttr?: boolean) =>
 export interface Responsive {
   /** wanted width to maintain (+-50%) to dynamically pick a column count */
   columnWidth?: number;
-  /** maximum number of columns allowed (default: 12). Note: make sure to have correct CSS to support this.*/
+  /** maximum number of columns allowed (default: 12). Note: make sure to have correct extra CSS to support this.*/
   columnMax?: number;
   /** global re-layout mode when changing columns */
   layout?: ColumnOptions;
   /** specify if breakpoints are for window size or grid size (default:false = grid) */
   breakpointForWindow?: boolean;
-  /** explicit width:column breakpoints instead of automatic 'columnWidth'. Note: make sure to have correct CSS to support this.*/
-  breakpoints?: ResponsiveBreakpoint[];
+  /** explicit width:column breakpoints instead of automatic 'columnWidth'. Note: make sure to have correct extra CSS to support this.*/
+  breakpoints?: Breakpoint[];
 }
 
-export interface ResponsiveBreakpoint {
-  /** width */
+export interface Breakpoint {
+  /** <= width for the breakpoint to trigger */
   w?: number;
-  /** column */
+  /** column count */
   c: number;
   /** re-layout mode if different from global one */
   layout?: ColumnOptions;
@@ -162,6 +162,9 @@ export interface GridStackOptions {
    */
   column?: number | 'auto';
 
+  /** responsive column layout for width:column behavior */
+  columnOpts?: Responsive;
+
   /** additional class on top of '.grid-stack' (which is required for our CSS) to differentiate this instance.
   Note: only used by addGrid(), else your element should have the needed class */
   class?: string;
@@ -232,9 +235,6 @@ export interface GridStackOptions {
   /** allows to override UI resizable options. (default?: { handles: 'se' }) */
   resizable?: DDResizeOpt;
 
-  /** responsive layout for width->column behavior */
-  responsive?: Responsive;
-
   /**
    * if true widgets could be removed by dragging outside of the grid. It could also be a selector string (ex: ".trash"),
    * in this case widgets will be removed by dropping them there (default?: false)
diff --git a/webpack.config.js b/webpack.config.js
@@ -5,8 +5,8 @@ module.exports = {
     'gridstack-all': './src/gridstack.ts',
   },
   mode: 'production', // production vs development
-  devtool: 'source-map',
-  // devtool: 'eval-source-map', // for best (large .js) debugging. see https://survivejs.com/webpack/building/source-maps/
+  // devtool: 'source-map',
+  devtool: 'eval-source-map', // for best (large .js) debugging. see https://survivejs.com/webpack/building/source-maps/
   module: {
     rules: [
       {
