new 9.x feature that size the items to fit their content height as to not have scroll bars
- (unless `fitToContent:false` in C: case). Defaulting to different initial size (see code) to show grow/shrink behavior.
+ (unless `sizeToContent:false` in C: case). Defaulting to different initial size (see code) to show grow/shrink behavior.
column:
8
@@ -39,9 +39,9 @@
Cell FitToContent options demo
let opts = {
margin: 5,
cellHeight: 50,
- fitToContent: true, // default to make them all fit
+ sizeToContent: true, // default to make them all fit
resizable: { handles: 'all'} // do all sides for testing
- // cellHeightThrottle: 100, // ms before fitToContent happens
+ // cellHeightThrottle: 100, // ms before sizeToContent happens
}
let grid = GridStack.init(opts);
let text ='some very large content that will normally not fit in the window.'
@@ -49,7 +49,7 @@
Cell FitToContent options demo
let items = [
{x:0, y:0, w:2, content: `
A no h: ${text}
`},
{x:2, y:0, w:1, h:2, content: '
B: shrink h=2
'}, // make taller than needed upfront
- {x:3, y:0, w:2, fitToContent: false, content: `
C: WILL SCROLL. ${text}
`}, // prevent this from fitting testing
+ {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}
`},
];
grid.load(items);
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
index 33bddf0fb..e46a76fd0 100644
--- a/doc/CHANGES.md
+++ b/doc/CHANGES.md
@@ -97,17 +97,18 @@ Change log
## 9.0.2-dev (TBD)
+* renamed fitToContent to sizeToContent (API BREAK)
## 9.0.2 (2023-08-29)
* fix 'resizecontent' event fix not called.
-* partial fix [#2427](https://github.com/gridstack/gridstack.js/issues/2427) fitToContent when calling cellHeight()/addWidget()/MakeWidget()
+* partial fix [#2427](https://github.com/gridstack/gridstack.js/issues/2427) sizeToContent when calling cellHeight()/addWidget()/MakeWidget()
## 9.0.1 (2023-08-27)
* fix [#2413](https://github.com/gridstack/gridstack.js/issues/2413) support touchscreen+mouse devices. Thank you [@Ruslan207](https://github.com/Ruslan207)
-* tweak to `fitToContent` from [#2412](https://github.com/gridstack/gridstack.js/pull/2412#issuecomment-1690219018). Thank you [@JonSohn](https://github.com/JonSohn)
+* tweak to `sizeToContent` from [#2412](https://github.com/gridstack/gridstack.js/pull/2412#issuecomment-1690219018). Thank you [@JonSohn](https://github.com/JonSohn)
## 9.0.0 (2023-08-23)
-- feat [#404](https://github.com/gridstack/gridstack.js/issues/404) added `GridStackOptions.fitToContent` and `GridStackWidget.fitToContent` to make gridItems size themselves to their content (no scroll bar), calling `GridStack.resizeToContent(el)` whenever the grid or item is resized.
+- feat [#404](https://github.com/gridstack/gridstack.js/issues/404) added `GridStackOptions.sizeToContent` and `GridStackWidget.sizeToContent` to make gridItems size themselves to their content (no scroll bar), calling `GridStack.resizeToContent(el)` whenever the grid or item is resized.
- also added new `'resizecontent'` event, and `resizeToContentCB` and `resizeToContentParent` vars.
- fix [#2406](https://github.com/gridstack/gridstack.js/issues/2406) inf loop when autoPosition after loading into 1 column, then 2.
diff --git a/doc/README.md b/doc/README.md
index 07778d763..bc1bb8283 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
-- `fitToContent` - make gridItems size themselves to their content, calling `resizeToContent(el)` whenever the grid or item is resized.
+- `sizeToContent` - 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,7 @@ 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
-- `fitToContent` - make gridItem size itself to the content, calling `GridStack.resizeToContent(el)` whenever the grid or item is resized.
+- `sizeToContent` - make gridItem size itself to the content, calling `GridStack.resizeToContent(el)` whenever the grid or item is resized.
- `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.ts b/src/gridstack.ts
index fa8923f70..1e52f643b 100644
--- a/src/gridstack.ts
+++ b/src/gridstack.ts
@@ -1507,7 +1507,7 @@ export class GridStack {
if (!Utils.same(node, copy)) {
this._writeAttr(el, node);
}
- if (Utils.shouldFitToContent(node)) el.classList.add('fit-to-content');
+ if (Utils.shouldSizeToContent(node)) el.classList.add('fit-to-content');
this._prepareDragDropByNode(node);
return this;
}
@@ -1601,7 +1601,7 @@ export class GridStack {
/**
* called when we are being resized - check if the one Column Mode needs to be turned on/off
* and remember the prev columns we used, or get our count from parent, as well as check for cellHeight==='auto' (square)
- * or `fitToContent` gridItem options.
+ * or `sizeToContent` gridItem options.
*/
public onResize(): GridStack {
if (!this.el?.clientWidth) return; // return if we're gone or no size yet (will get called again)
@@ -1623,7 +1623,7 @@ export class GridStack {
let oneColumn = !this.opts.disableOneColumnMode && this.el.clientWidth <= this.opts.oneColumnSize ||
(this.opts.column === 1 && !this._prevColumn);
if ((this.opts.column === 1) !== oneColumn) {
- // if (this.opts.animate) this.setAnimation(false); // 1 <-> 12 is too radical, turn off animation and we need it for fitToContent
+ // if (this.opts.animate) this.setAnimation(false); // 1 <-> 12 is too radical, turn off animation and we need it for sizeToContent
this.column(oneColumn ? 1 : this._prevColumn);
// if (this.opts.animate) setTimeout(() => this.setAnimation(true));
columnChanged = true;
@@ -1645,16 +1645,16 @@ export class GridStack {
}
private doContentResize(delay = true, n: GridStackNode = undefined) {
- // update any gridItem height with fitToContent, but wait for DOM $animation_speed to settle if we changed column count
+ // update any gridItem height with sizeToContent, but wait for DOM $animation_speed to settle if we changed column count
// TODO: is there a way to know what the final (post animation) size of the content will be so we can animate the column width and height together rather than sequentially ?
setTimeout(() => {
if (n) {
- if (Utils.shouldFitToContent(n)) this.resizeToContentCheck(n.el);
+ if (Utils.shouldSizeToContent(n)) this.resizeToContentCheck(n.el);
} else {
const nodes = [...this.engine.nodes]; // in case order changes while resizing one
this.batchUpdate();
nodes.forEach(n => {
- if (Utils.shouldFitToContent(n)) this.resizeToContentCheck(n.el);
+ if (Utils.shouldSizeToContent(n)) this.resizeToContentCheck(n.el);
});
this.batchUpdate(false);
}
@@ -1665,8 +1665,8 @@ export class GridStack {
/** add or remove the grid element size event handler */
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 oneColumn (i.e. doing work)
- // or supporting new fitToContent option.
- const trackSize = !this.parentGridItem && (this._isAutoCellHeight || this.opts.fitToContent || !this.opts.disableOneColumnMode || this.engine.nodes.find(n => n.fitToContent));
+ // or supporting new sizeToContent option.
+ const trackSize = !this.parentGridItem && (this._isAutoCellHeight || this.opts.sizeToContent || !this.opts.disableOneColumnMode || this.engine.nodes.find(n => n.sizeToContent));
if (!forceRemove && trackSize && !this.resizeObserver) {
this._sizeThrottle = Utils.throttle(() => this.onResize(), this.opts.cellHeightThrottle);
diff --git a/src/types.ts b/src/types.ts
index 20477239f..49070b88e 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -164,7 +164,7 @@ export interface GridStackOptions {
/** set to true if all grid items (by default, but item can also override) height should be based on content size instead of WidgetItem.h to avoid v-scrollbars.
Note: this is still row based, not pixels, so it will use ceil(getBoundingClientRect().height / getCellHeight()) */
- fitToContent?: boolean;
+ sizeToContent?: boolean;
/** enable floating widgets (default?: false) See example (http://gridstack.github.io/gridstack.js/demo/float.html) */
float?: boolean;
@@ -322,7 +322,7 @@ export interface GridStackWidget extends GridStackPosition {
/** html to append inside as content */
content?: string;
/** local (grid) override - see GridStackOptions */
- fitToContent?: boolean;
+ sizeToContent?: boolean;
/** 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 c82f234cb..20d9b3b80 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -103,8 +103,8 @@ export class Utils {
}
/** true if we should resize to content */
- static shouldFitToContent(n: GridStackNode | undefined): boolean {
- return n?.grid && (n.fitToContent || (n.grid.opts.fitToContent && n.fitToContent !== false));
+ static shouldSizeToContent(n: GridStackNode | undefined): boolean {
+ return n?.grid && (n.sizeToContent || (n.grid.opts.sizeToContent && n.sizeToContent !== false));
}
/** returns true if a and b overlap */