fitToContent -> sizeToContent rename

* better long term naming (with upcoming size number option as ell)
gridstack · Aug 30, 2023 · 452854b · 452854b
1 parent 5032b8f
commit 452854b
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 25 deletions.
diff --git a/README.md b/README.md
@@ -446,7 +446,7 @@ Possible breaking change if you use nested grid JSON format, or original Angular
 
 ## Migrating to v9
 
-New addition - see release notes about `fitToContent` feature.
+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.
 

diff --git a/demo/index.html b/demo/index.html
@@ -12,7 +12,6 @@ <h1>Demos</h1>
     <li><a href="anijs.html">AniJS</a></li>
     <li><a href="cell-height.html">Cell Height</a></li>
     <li><a href="column.html">Column</a></li>
-    <li><a href="fitToContent.html">Fit To Content</a></li>
     <li><a href="float.html">Float grid</a></li>
     <li><a href="knockout.html">Knockout.js</a></li>
     <li><a href="mobile.html">Mobile touch</a></li>
@@ -26,6 +25,7 @@ <h1>Demos</h1>
     <li><a href="responsive.html">Responsive</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>
     <li><a href="static.html">Static</a></li>
     <li><a href="title_drag.html">Title drag</a></li>
     <li><a href="two.html">Two grids</a></li>

diff --git a/demo/fitToContent.html → demo/sizeToContent.html b/demo/fitToContent.html → demo/sizeToContent.html
@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>FitToContent demo</title>
+  <title>sizeToContent demo</title>
 
   <link rel="stylesheet" href="demo.css"/>
   <link rel="stylesheet" href="../dist/gridstack-extra.css"/>
@@ -17,9 +17,9 @@
 </head>
 <body>
   <div class="container">
-    <h1>Cell FitToContent options demo</h1>
+    <h1>Cell sizeToContent options demo</h1>
     <p>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.</p>
+      (unless `sizeToContent:false` in C: case). Defaulting to different initial size (see code) to show grow/shrink behavior.</p>
     <div>
       column:
       <a onClick="column(8)" class="btn btn-primary" href="#">8</a>
@@ -39,17 +39,17 @@ <h1>Cell FitToContent options demo</h1>
     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.'
     text = text + text;
     let items = [
       {x:0, y:0, w:2, content: `<div>A no h: ${text}</div>`},
       {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, fitToContent: false, content: `<div>C: WILL SCROLL. ${text}</div>`}, // prevent this from fitting testing
+      {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>`},
     ];
     grid.load(items);

diff --git a/doc/CHANGES.md b/doc/CHANGES.md
@@ -97,17 +97,18 @@ Change log
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
 ## 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
@@ -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
@@ -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
@@ -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
@@ -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 */