From 1bd5764d4f315a2f5f32226748361f2e0be61897 Mon Sep 17 00:00:00 2001 From: Alain Dumesny Date: Wed, 30 Aug 2023 16:45:33 -0700 Subject: [PATCH] sizeToContent number support * `sizeToContent` now supports being `boolean|number` to limit the height but user can resize past that, unlike maxH. * more #404 fixes --- demo/sizeToContent.html | 17 ++++++++++++++++- doc/CHANGES.md | 1 + doc/README.md | 5 +++-- src/gridstack.scss | 2 +- src/gridstack.ts | 14 ++++++++++++-- src/types.ts | 5 +++-- src/utils.ts | 2 +- 7 files changed, 37 insertions(+), 9 deletions(-) diff --git a/demo/sizeToContent.html b/demo/sizeToContent.html index d7c912411..b60c2245f 100644 --- a/demo/sizeToContent.html +++ b/demo/sizeToContent.html @@ -51,7 +51,7 @@

Cell sizeToContent options demo

{x:2, y:0, w:1, h:2, content: '
B: shrink h=2
'}, // make taller than needed upfront {x:3, y:0, w:2, sizeToContent: false, content: `
C: WILL SCROLL. ${text}
`}, // prevent this from fitting testing {x:0, y:1, w:3, content: `
D no h: ${text} ${text}
`}, - ]; + {x:3, y:1, w:2, sizeToContent:3, content: `
E sizeToContent=3
${text} ${text} ${text}
`} ]; grid.load(items); function column(n) { @@ -70,6 +70,21 @@

Cell sizeToContent options demo

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); + } diff --git a/doc/CHANGES.md b/doc/CHANGES.md index e46a76fd0..beace557a 100644 --- a/doc/CHANGES.md +++ b/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. diff --git a/doc/README.md b/doc/README.md index bc1bb8283..9ba59b6c9 100644 --- a/doc/README.md +++ b/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. diff --git a/src/gridstack.scss b/src/gridstack.scss index 780e06c23..41bd887f7 100644 --- a/src/gridstack.scss +++ b/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; } } diff --git a/src/gridstack.ts b/src/gridstack.ts index 1e52f643b..f9204f4ff 100644 --- a/src/gridstack.ts +++ b/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, { diff --git a/src/types.ts b/src/types.ts index 49070b88e..51e6e00a8 100644 --- a/src/types.ts +++ b/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; } diff --git a/src/utils.ts b/src/utils.ts index 20d9b3b80..e3c571a30 100644 --- a/src/utils.ts +++ b/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 */