gridstack 9.1.0 → 9.2.0

package/dist/gridstack.js

@@ -1,5 +1,5 @@
 /*!
- * GridStack 9.1.0
+ * GridStack 9.2.0
  * https://gridstackjs.com/
  *
  * Copyright (c) 2021-2022 Alain Dumesny
@@ -540,7 +540,7 @@ class GridStack {
      *
      * @example
      * see http://gridstackjs.com/demo/serialization.html
-     **/
+     */
     load(layout, addRemove = GridStack.addRemoveCB || true) {
         // if passed list has coordinates, use them (insert from end to beginning for conflict resolution) else force widget same order
         const haveCoord = layout.some(w => w.x !== undefined || w.y !== undefined);
@@ -674,7 +674,7 @@ class GridStack {
         }
         this.opts.cellHeightUnit = data.unit;
         this.opts.cellHeight = data.h;
-        this.doContentResize(false);
+        this.doContentResize(false, true); // no anim wait, but use attributes since we only change row height
         if (update) {
             this._updateStyles(true); // true = force re-create for current # of rows
         }
@@ -696,7 +696,7 @@ class GridStack {
      * 'compact' might re-order items to fill any empty space
      *
      * doSort - 'false' to let you do your own sorting ahead in case you need to control a different order. (default to sort)
-     **/
+     */
     compact(layout = 'compact', doSort = true) {
         this.engine.compact(layout, doSort);
         this._triggerChangeEvent();
@@ -866,7 +866,7 @@ class GridStack {
         this._prepareElement(el, true, options);
         const node = el.gridstackNode;
         this._updateContainerHeight();
-        this.doContentResize(false, node);
+        this.doContentResize(false, false, node);
         // see if there is a sub-grid to create
         if (node.subGridOpts) {
             this.makeSubGrid(el, node.subGridOpts, undefined, false); // node.subGrid will be used as option in method, no need to pass
@@ -1114,71 +1114,76 @@ class GridStack {
         this._triggerChangeEvent();
         this.engine.endUpdate();
     }
-    /** Updates widget height to match the content height to avoid v-scrollbar or dead space.
-     Note: this assumes only 1 child under '.grid-stack-item-content' (sized to gridItem minus padding) that is at the entire content size wanted */
-    resizeToContent(els) {
-        GridStack.getElements(els).forEach(el => {
-            if (!el.clientHeight)
-                return; // 0 when hidden, skip
-            let n = el?.gridstackNode;
-            if (!n)
-                return;
-            const grid = n.grid;
-            if (grid !== this)
-                return grid?.resizeToContent(el);
-            if (el.parentElement !== this.el)
-                return; // skip if we are not inside a grid
-            const cell = this.getCellHeight();
-            if (!cell)
-                return;
-            let height = n.h ? n.h * cell : el.clientHeight; // getBoundingClientRect().height seem to flicker back and forth
-            let item;
-            if (n.resizeToContentParent)
-                item = el.querySelector(n.resizeToContentParent);
-            if (!item)
-                item = el.querySelector(GridStack.resizeToContentParent);
-            if (!item)
-                return;
-            const child = item.firstElementChild;
+    /**
+     * Updates widget height to match the content height to avoid v-scrollbar or dead space.
+     * Note: this assumes only 1 child under resizeToContentParent='.grid-stack-item-content' (sized to gridItem minus padding) that is at the entire content size wanted.
+     * useAttrSize set to true if GridStackNode.h should be used instead of actual container height when we don't need to wait for animation to finish to get actual DOM heights
+     */
+    resizeToContent(el, useAttrSize = false) {
+        el?.classList.remove('size-to-content-max');
+        if (!el?.clientHeight)
+            return; // 0 when hidden, skip
+        let n = el.gridstackNode;
+        if (!n)
+            return;
+        const grid = n.grid;
+        if (!grid)
+            return;
+        if (el.parentElement !== grid.el)
+            return; // skip if we are not inside a grid
+        const cell = grid.getCellHeight();
+        if (!cell)
+            return;
+        let height = useAttrSize && n.h ? n.h * cell : el.clientHeight; // getBoundingClientRect().height seem to flicker back and forth
+        let item;
+        if (n.resizeToContentParent)
+            item = el.querySelector(n.resizeToContentParent);
+        if (!item)
+            item = el.querySelector(GridStack.resizeToContentParent);
+        if (!item)
+            return;
+        const padding = el.clientHeight - item.clientHeight; // full - available height to our child (minus border, padding...)
+        const itemH = useAttrSize && n.h ? n.h * cell - padding : item.clientHeight; // calculated to what cellHeight is or will become (rather than actual to prevent waiting for animation to finish)
+        let wantedH;
+        if (n.subGrid) {
+            // sub-grid - use their actual row count * their cell height
+            wantedH = n.subGrid.getRow() * n.subGrid.getCellHeight();
+        }
+        else {
             // NOTE: clientHeight & getBoundingClientRect() is undefined for text and other leaf nodes. use <div> container!
+            const child = item.firstElementChild;
             if (!child) {
                 console.log(`Error: resizeToContent() '${GridStack.resizeToContentParent}'.firstElementChild is null, make sure to have a div like container. Skipping sizing.`);
                 return;
             }
-            const padding = el.clientHeight - item.clientHeight; // full - available height to our child (minus border, padding...)
-            const itemH = n.h ? n.h * cell - padding : item.clientHeight; // calculated to what cellHeight is or will become (rather than actual to prevent waiting for animation to finish)
-            const wantedH = child.getBoundingClientRect().height || itemH;
-            if (itemH === wantedH)
-                return;
-            height += wantedH - itemH;
-            let h = Math.ceil(height / cell);
-            // check for min/max and special sizing
-            const softMax = Number.isInteger(n.sizeToContent) ? n.sizeToContent : 0;
-            if (softMax) {
-                if (h > softMax) {
-                    h = softMax;
-                    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) {
-                this._ignoreLayoutsNodeChange = true;
-                this.moveNode(n, { h });
-                delete this._ignoreLayoutsNodeChange;
-            }
-        });
+            wantedH = child.getBoundingClientRect().height || itemH;
+        }
+        if (itemH === wantedH)
+            return;
+        height += wantedH - itemH;
+        let h = Math.ceil(height / cell);
+        // check for min/max and special sizing
+        const softMax = Number.isInteger(n.sizeToContent) ? n.sizeToContent : 0;
+        if (softMax && h > softMax) {
+            h = softMax;
+            el.classList.add('size-to-content-max'); // get v-scroll back
+        }
+        if (n.minH && h < n.minH)
+            h = n.minH;
+        else if (n.maxH && h > n.maxH)
+            h = n.maxH;
+        if (h !== n.h) {
+            grid._ignoreLayoutsNodeChange = true;
+            grid.moveNode(n, { h });
+            delete grid._ignoreLayoutsNodeChange;
+        }
     }
     /** call the user resize (so we can do extra work) else our build in version */
-    resizeToContentCheck(el) {
+    resizeToContentCheck(el, useAttr = false) {
         if (GridStack.resizeToContentCB)
             GridStack.resizeToContentCB(el);
         else
-            this.resizeToContent(el);
+            this.resizeToContent(el, useAttr);
     }
     /**
      * Updates the margins which will set all 4 sides at once - see `GridStackOptions.margin` for format options (CSS string format of 1,2,4 values or single number).
@@ -1351,13 +1356,18 @@ class GridStack {
         this.el.setAttribute('gs-current-row', String(row));
         if (row === 0) {
             this.el.style.removeProperty('min-height');
-            return this;
         }
-        let cellHeight = this.opts.cellHeight;
-        let unit = this.opts.cellHeightUnit;
-        if (!cellHeight)
-            return this;
-        this.el.style.minHeight = row * cellHeight + unit;
+        else {
+            let cellHeight = this.opts.cellHeight;
+            let unit = this.opts.cellHeightUnit;
+            if (!cellHeight)
+                return this;
+            this.el.style.minHeight = row * cellHeight + unit;
+        }
+        // if we're a nested grid inside an sizeToContent item, tell it to resize itself too
+        if (this.parentGridItem && !this.parentGridItem.grid.engine.batchMode && Utils.shouldSizeToContent(this.parentGridItem)) {
+            this.parentGridItem.grid.resizeToContentCheck(this.parentGridItem.el);
+        }
         return this;
     }
     /** @internal */
@@ -1507,27 +1517,30 @@ class GridStack {
             if (n.subGrid)
                 n.subGrid.onResize();
         });
-        this.doContentResize(columnChanged);
+        if (!this._skipInitialResize)
+            this.doContentResize(columnChanged); // wait for anim of column changed (DOM reflow before we can size correctly)
+        delete this._skipInitialResize;
         this.batchUpdate(false);
         return this;
     }
-    doContentResize(delay = true, n = undefined) {
+    doContentResize(delay = true, useAttr = false, n = undefined) {
         // 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.shouldSizeToContent(n))
-                    this.resizeToContentCheck(n.el);
+                    this.resizeToContentCheck(n.el, useAttr);
             }
-            else {
+            else if (this.engine.nodes.some(n => Utils.shouldSizeToContent(n))) {
                 const nodes = [...this.engine.nodes]; // in case order changes while resizing one
                 this.batchUpdate();
                 nodes.forEach(n => {
                     if (Utils.shouldSizeToContent(n))
-                        this.resizeToContentCheck(n.el);
+                        this.resizeToContentCheck(n.el, useAttr);
                 });
                 this.batchUpdate(false);
             }
+            // call this regardless of shouldSizeToContent because widget might need to stretch to take available space after a resize
             if (this._gsEventHandler['resizecontent'])
                 this._gsEventHandler['resizecontent'](null, n ? [n] : this.engine.nodes);
         }, delay ? 300 + 10 : 0);
@@ -1536,11 +1549,13 @@ class GridStack {
     _updateResizeEvent(forceRemove = false) {
         // 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 sizeToContent option.
-        const trackSize = !this.parentGridItem && (this._isAutoCellHeight || this.opts.sizeToContent || !this.opts.disableOneColumnMode || this.engine.nodes.find(n => n.sizeToContent));
+        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);
             this.resizeObserver = new ResizeObserver(entries => this._sizeThrottle());
             this.resizeObserver.observe(this.el);
+            this._skipInitialResize = true; // makeWidget will originally have called on startup
         }
         else if ((forceRemove || !trackSize) && this.resizeObserver) {
             this.resizeObserver.disconnect();
@@ -1636,7 +1651,7 @@ class GridStack {
      * @param dragIn string selector (ex: '.sidebar .grid-stack-item') or list of dom elements
      * @param dragInOptions options - see DDDragInOpt. (default: {handle: '.grid-stack-item-content', appendTo: 'body'}
      * @param root optional root which defaults to document (for shadow dom pas the parent HTMLDocument)
-     **/
+     */
     static setupDragIn(dragIn, dragInOptions, root = document) {
         if (dragInOptions?.pause !== undefined) {
             DDManager.pauseDrag = dragInOptions.pause;
@@ -2013,7 +2028,7 @@ class GridStack {
         }
         return this;
     }
-    /** @internal prepares the element for drag&drop **/
+    /** @internal prepares the element for drag&drop */
     _prepareDragDropByNode(node) {
         let el = node.el;
         const noMove = node.noMove || this.opts.disableDrag;
@@ -2088,7 +2103,7 @@ class GridStack {
                 if (event.type === 'resizestop') {
                     if (Number.isInteger(node.sizeToContent))
                         node.sizeToContent = node.h; // new soft limit
-                    this.doContentResize(false, node);
+                    this.doContentResize(false, true, node); // no amin wait as will use the actual sized coordinate attr
                 }
             };
             dd.draggable(el, {
@@ -2107,7 +2122,7 @@ class GridStack {
             .resizable(el, noResize ? 'disable' : 'enable');
         return this;
     }
-    /** @internal handles actual drag/resize start **/
+    /** @internal handles actual drag/resize start */
     _onStartMoving(el, event, ui, node, cellWidth, cellHeight) {
         this.engine.cleanNodes()
             .beginUpdate(node);
@@ -2138,7 +2153,7 @@ class GridStack {
             }
         }
     }
-    /** @internal handles actual drag/resize **/
+    /** @internal handles actual drag/resize */
     _dragOrResize(el, event, ui, node, cellWidth, cellHeight) {
         let p = { ...node._orig }; // could be undefined (_isExternal) which is ok (drag only set x,y and w,h will default to node value)
         let resizing;
@@ -2226,7 +2241,7 @@ class GridStack {
     /** @internal called when item leaving our area by either cursor dropout event
      * or shape is outside our boundaries. remove it from us, and mark temporary if this was
      * our item to start with else restore prev node values from prev grid it came from.
-     **/
+     */
     _leave(el, helper) {
         let node = el.gridstackNode;
         if (!node)
@@ -2265,6 +2280,6 @@ GridStack.resizeToContentParent = '.grid-stack-item-content';
 GridStack.Utils = Utils;
 /** scoping so users can call new GridStack.Engine(12) for example */
 GridStack.Engine = GridStackEngine;
-GridStack.GDRev = '9.1.0';
+GridStack.GDRev = '9.2.0';
 export { GridStack };
 //# sourceMappingURL=gridstack.js.map