Merge pull request #2433 from adumesny/master

sizeToContent number support

Author: Alain Dumesny

demo/sizeToContent.html

@@ -51,7 +51,7 @@ <h1>Cell sizeToContent options demo</h1>
       {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>`}    ];
     grid.load(items);
 
     function column(n) {
@@ -70,6 +70,21 @@ <h1>Cell sizeToContent options demo</h1>
       grid.el.appendChild(el);
       grid.makeWidget(el);
     }
+    function more() {
+      let cont = document.getElementById('dynContent');
+      if (!cont) return;
+      cont.innerHTML += cont.innerHTML;
+      let el = cont.parentElement.parentElement.parentElement;
+      grid.resizeToContent(el)
+    }
+    function less() {
+      let cont = document.getElementById('dynContent');
+      if (!cont) return;
+      let content = cont.innerHTML;
+      cont.innerHTML = content.substring(0, content.length/2);
+      let el = cont.parentElement.parentElement.parentElement;
+      grid.resizeToContent(el);
+    }
   </script>
 </body>
 </html>

doc/CHANGES.md

@@ -98,6 +98,7 @@ Change log
 
 ## 9.0.2-dev (TBD)
 * renamed fitToContent to sizeToContent (API BREAK)
+* feat: `sizeToContent` now supports being `boolean|number` to limit the height but user can resize past that, unlike maxH.
 
 ## 9.0.2 (2023-08-29)
 * fix 'resizecontent' event fix not called.

doc/README.md

@@ -99,7 +99,7 @@ gridstack.js API
 - `draggable` - allows to override draggable options - see `DDDragOpt`. (default: `{handle: '.grid-stack-item-content', appendTo: 'body', scroll: true}`)
 - `dragOut` to let user drag nested grid items out of a parent or not (default false) See [example](http://gridstackjs.com/demo/nested.html)
 - `engineClass` - the type of engine to create (so you can subclass) default to GridStackEngine
-- `sizeToContent` - make gridItems size themselves to their content, calling `resizeToContent(el)` whenever the grid or item is resized.
+- `sizeToContent`: boolean - make gridItems size themselves to their content, calling `resizeToContent(el)` whenever the grid or item is resized.
 - `float` - enable floating widgets (default: `false`) See [example](http://gridstackjs.com/demo/float.html)
 - `handle` - draggable handle selector (default: `'.grid-stack-item-content'`)
 - `handleClass` - draggable handle class (e.g. `'grid-stack-item-content'`). If set `handle` is ignored (default: `null`)
@@ -159,7 +159,8 @@ You need to add `noResize` and `noMove` attributes to completely lock the widget
 - `noMove` - disable element moving
 - `id`- (number | string) good for quick identification (for example in change event)
 - `content` - (string) html content to be added when calling `grid.load()/addWidget()` as content inside the item
-- `sizeToContent` - make gridItem size itself to the content, calling `GridStack.resizeToContent(el)` whenever the grid or item is resized.
+- `sizeToContent`?: boolean | number - make gridItem size itself to the content, calling `GridStack.resizeToContent(el)` whenever the grid or item is resized.
+Note: This also allow you to set a maximum h value (but user changeable during normal resizing) to prevent unlimited content from taking too much space (get scrollbar)
 - `subGrid`?: GridStackOptions - optional nested grid options and list of children
 - `subGridDynamic`?: boolean - enable/disable the creation of sub-grids on the fly by dragging items completely over others (nest) vs partially (push). Forces `DDDragOpt.pause=true` to accomplish that.
 

src/gridstack.scss

@@ -51,7 +51,7 @@ $animation_speed: .3s !default;
     overflow-x: hidden;
     overflow-y: auto;
   }
-  &.fit-to-content > .grid-stack-item-content {
+  &.size-to-content > .grid-stack-item-content {
     overflow-y: hidden;
   }
 }

src/gridstack.ts

@@ -1286,6 +1286,13 @@ export class GridStack {
       if (itemH === wantedH) return;
       height += wantedH - itemH;
       let h = Math.ceil(height / cell);
+      // check for min/max and special sizing
+      if (Number.isInteger(n.sizeToContent)) {
+        if (h > (n.sizeToContent as number)) {
+          h = n.sizeToContent as number;
+          el.classList.remove('size-to-content');  // get v-scroll back
+        } else el.classList.add('size-to-content');
+      }
       if (n.minH && h < n.minH) h = n.minH;
       else if (n.maxH && h > n.maxH) h = n.maxH;
       if (h !== n.h) {
@@ -1507,7 +1514,7 @@ export class GridStack {
     if (!Utils.same(node, copy)) {
       this._writeAttr(el, node);
     }
-    if (Utils.shouldSizeToContent(node)) el.classList.add('fit-to-content');
+    if (Utils.shouldSizeToContent(node)) el.classList.add('size-to-content');
     this._prepareDragDropByNode(node);
     return this;
   }
@@ -2235,7 +2242,10 @@ export class GridStack {
 
         this.engine.endUpdate();
 
-        if (event.type === 'resizestop') this.doContentResize(false, node);
+        if (event.type === 'resizestop') {
+          if (Number.isInteger(node.sizeToContent)) node.sizeToContent = node.h; // new soft limit
+          this.doContentResize(false, node);
+        }
       }
 
       dd.draggable(el, {

src/types.ts

@@ -321,8 +321,9 @@ export interface GridStackWidget extends GridStackPosition {
   id?: string;
   /** html to append inside as content */
   content?: string;
-  /** local (grid) override - see GridStackOptions */
-  sizeToContent?: boolean;
+  /** local (vs grid) override - see GridStackOptions. 
+   * Note: This also allow you to set a maximum h value (but user changeable during normal resizing) to prevent unlimited content from taking too much space (get scrollbar) */
+  sizeToContent?: boolean | number;
   /** optional nested grid options and list of children, which then turns into actual instance at runtime to get options from */
   subGridOpts?: GridStackOptions;
 }

src/utils.ts

@@ -104,7 +104,7 @@ export class Utils {
 
   /** true if we should resize to content */
   static shouldSizeToContent(n: GridStackNode | undefined): boolean {
-    return n?.grid && (n.sizeToContent || (n.grid.opts.sizeToContent && n.sizeToContent !== false));
+    return n?.grid && (!!n.sizeToContent || (n.grid.opts.sizeToContent && n.sizeToContent !== false));
   }
 
   /** returns true if a and b overlap */