gridstack 9.0.2 → 9.1.1

package/dist/es5/gridstack.js

@@ -36,7 +36,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridStack = void 0;
 /*!
- * GridStack 9.0.2
+ * GridStack 9.1.1
  * https://gridstackjs.com/
  *
  * Copyright (c) 2021-2022 Alain Dumesny
@@ -730,7 +730,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         }
         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
         }
@@ -928,7 +928,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         this._prepareElement(el, true, options);
         var 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
@@ -1189,58 +1189,71 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         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 */
-    GridStack.prototype.resizeToContent = function (els) {
-        var _this = this;
-        GridStack.getElements(els).forEach(function (el) {
-            var n = el === null || el === void 0 ? void 0 : el.gridstackNode;
-            if (!n)
-                return;
-            var grid = n.grid;
-            if (grid !== _this)
-                return grid === null || grid === void 0 ? void 0 : grid.resizeToContent(el);
-            if (el.parentElement !== _this.el)
-                return; // skip if we are not inside a grid
-            var cell = _this.getCellHeight();
-            if (!cell)
-                return;
-            var height = n.h ? n.h * cell : el.clientHeight; // getBoundingClientRect().height seem to flicker back and forth
-            if (!height)
-                return; // 0 when hidden, skip
-            var item = el.querySelector(GridStack.resizeToContentParent);
-            if (!item)
-                return;
-            var child = item.firstElementChild;
-            // NOTE: clientHeight & getBoundingClientRect() is undefined for text and other leaf nodes. use <div> container!
-            if (!child) {
-                console.log("Error: resizeToContent() '".concat(GridStack.resizeToContentParent, "'.firstElementChild is null, make sure to have a div like container. Skipping sizing."));
-                return;
-            }
-            var padding = el.clientHeight - item.clientHeight; // full - available height to our child (minus border, padding...)
-            var 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)
-            var wantedH = child.getBoundingClientRect().height || itemH;
-            if (itemH === wantedH)
-                return;
-            height += wantedH - itemH;
-            var h = Math.ceil(height / cell);
-            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: h });
-                delete _this._ignoreLayoutsNodeChange;
-            }
-        });
+    /**
+     * 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
+     **/
+    GridStack.prototype.resizeToContent = function (el, useAttrSize) {
+        if (useAttrSize === void 0) { useAttrSize = false; }
+        el === null || el === void 0 ? void 0 : el.classList.remove('size-to-content-max');
+        if (!(el === null || el === void 0 ? void 0 : el.clientHeight))
+            return; // 0 when hidden, skip
+        var n = el.gridstackNode;
+        if (!n)
+            return;
+        var grid = n.grid;
+        if (!grid)
+            return;
+        if (el.parentElement !== grid.el)
+            return; // skip if we are not inside a grid
+        var cell = grid.getCellHeight();
+        if (!cell)
+            return;
+        var height = useAttrSize && n.h ? n.h * cell : el.clientHeight; // getBoundingClientRect().height seem to flicker back and forth
+        var item;
+        if (n.resizeToContentParent)
+            item = el.querySelector(n.resizeToContentParent);
+        if (!item)
+            item = el.querySelector(GridStack.resizeToContentParent);
+        if (!item)
+            return;
+        var child = item.firstElementChild;
+        // NOTE: clientHeight & getBoundingClientRect() is undefined for text and other leaf nodes. use <div> container!
+        if (!child) {
+            console.log("Error: resizeToContent() '".concat(GridStack.resizeToContentParent, "'.firstElementChild is null, make sure to have a div like container. Skipping sizing."));
+            return;
+        }
+        var padding = el.clientHeight - item.clientHeight; // full - available height to our child (minus border, padding...)
+        var 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)
+        var wantedH = child.getBoundingClientRect().height || itemH;
+        if (itemH === wantedH)
+            return;
+        height += wantedH - itemH;
+        var h = Math.ceil(height / cell);
+        // check for min/max and special sizing
+        var 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: h });
+            delete grid._ignoreLayoutsNodeChange;
+        }
     };
     /** call the user resize (so we can do extra work) else our build in version */
-    GridStack.prototype.resizeToContentCheck = function (el) {
+    GridStack.prototype.resizeToContentCheck = function (el, useAttr) {
+        if (useAttr === void 0) { 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).
@@ -1439,8 +1452,8 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         if (!utils_1.Utils.same(node, copy)) {
             this._writeAttr(el, node);
         }
-        if (utils_1.Utils.shouldFitToContent(node))
-            el.classList.add('fit-to-content');
+        if (utils_1.Utils.shouldSizeToContent(node))
+            el.classList.add('size-to-content');
         this._prepareDragDropByNode(node);
         return this;
     };
@@ -1538,7 +1551,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
     /**
      * 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.
      */
     GridStack.prototype.onResize = function () {
         var _a;
@@ -1562,7 +1575,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             var 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;
@@ -1576,27 +1589,28 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             if (n.subGrid)
                 n.subGrid.onResize();
         });
-        this.doContentResize(columnChanged);
+        this.doContentResize(columnChanged); // wait for anim of column changed (DOM reflow before we can size correctly)
         this.batchUpdate(false);
         return this;
     };
-    GridStack.prototype.doContentResize = function (delay, n) {
+    GridStack.prototype.doContentResize = function (delay, useAttr, n) {
         var _this = this;
         if (delay === void 0) { delay = true; }
+        if (useAttr === void 0) { useAttr = false; }
         if (n === void 0) { n = 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(function () {
             if (n) {
-                if (utils_1.Utils.shouldFitToContent(n))
-                    _this.resizeToContentCheck(n.el);
+                if (utils_1.Utils.shouldSizeToContent(n))
+                    _this.resizeToContentCheck(n.el, useAttr);
             }
             else {
                 var nodes = __spreadArray([], _this.engine.nodes, true); // in case order changes while resizing one
                 _this.batchUpdate();
                 nodes.forEach(function (n) {
-                    if (utils_1.Utils.shouldFitToContent(n))
-                        _this.resizeToContentCheck(n.el);
+                    if (utils_1.Utils.shouldSizeToContent(n))
+                        _this.resizeToContentCheck(n.el, useAttr);
                 });
                 _this.batchUpdate(false);
             }
@@ -1609,8 +1623,8 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         var _this = this;
         if (forceRemove === void 0) { 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 fitToContent option.
-        var trackSize = !this.parentGridItem && (this._isAutoCellHeight || this.opts.fitToContent || !this.opts.disableOneColumnMode || this.engine.nodes.find(function (n) { return n.fitToContent; }));
+        // or supporting new sizeToContent option.
+        var trackSize = !this.parentGridItem && (this._isAutoCellHeight || this.opts.sizeToContent || !this.opts.disableOneColumnMode || this.engine.nodes.find(function (n) { return n.sizeToContent; }));
         if (!forceRemove && trackSize && !this.resizeObserver) {
             this._sizeThrottle = utils_1.Utils.throttle(function () { return _this.onResize(); }, this.opts.cellHeightThrottle);
             this.resizeObserver = new ResizeObserver(function (entries) { return _this._sizeThrottle(); });
@@ -2179,8 +2193,11 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                 _this._updateContainerHeight(); // @ts-ignore
                 _this._triggerChangeEvent();
                 _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, true, node); // no amin wait as will use the actual sized coordinate attr
+                }
             };
             dd.draggable(el, {
                 start: onStartMoving,
@@ -2355,7 +2372,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
     GridStack.Utils = utils_1.Utils;
     /** scoping so users can call new GridStack.Engine(12) for example */
     GridStack.Engine = gridstack_engine_1.GridStackEngine;
-    GridStack.GDRev = '9.0.2';
+    GridStack.GDRev = '9.1.1';
     return GridStack;
 }());
 //# sourceMappingURL=gridstack.js.map