gridstack 9.1.1 → 9.2.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.1.1
+ * GridStack 9.2.1
  * https://gridstackjs.com/
  *
  * Copyright (c) 2021-2022 Alain Dumesny
@@ -590,7 +590,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
      *
      * @example
      * see http://gridstackjs.com/demo/serialization.html
-     **/
+     */
     GridStack.prototype.load = function (layout, addRemove) {
         var _this = this;
         if (addRemove === void 0) { addRemove = GridStack.addRemoveCB || true; }
@@ -752,7 +752,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
      * '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)
-     **/
+     */
     GridStack.prototype.compact = function (layout, doSort) {
         if (layout === void 0) { layout = 'compact'; }
         if (doSort === void 0) { doSort = true; }
@@ -1193,11 +1193,13 @@ var GridStack = exports.GridStack = /** @class */ (function () {
      * 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))
+        if (!el)
+            return;
+        el.classList.remove('size-to-content-max');
+        if (!el.clientHeight)
             return; // 0 when hidden, skip
         var n = el.gridstackNode;
         if (!n)
@@ -1218,15 +1220,22 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             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;
+        var 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!
+            var child = item.firstElementChild;
+            if (!child) {
+                console.log("Error: resizeToContent() '".concat(GridStack.resizeToContentParent, "'.firstElementChild is null, make sure to have a div like container. Skipping sizing."));
+                return;
+            }
+            wantedH = child.getBoundingClientRect().height || itemH;
+        }
         if (itemH === wantedH)
             return;
         height += wantedH - itemH;
@@ -1247,11 +1256,11 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             delete grid._ignoreLayoutsNodeChange;
         }
     };
-    /** call the user resize (so we can do extra work) else our build in version */
+    /** call the user resize (so they can do extra work) else our build in version */
     GridStack.prototype.resizeToContentCheck = function (el, useAttr) {
         if (useAttr === void 0) { useAttr = false; }
         if (GridStack.resizeToContentCB)
-            GridStack.resizeToContentCB(el);
+            GridStack.resizeToContentCB(el, useAttr);
         else
             this.resizeToContent(el, useAttr);
     };
@@ -1415,27 +1424,33 @@ var GridStack = exports.GridStack = /** @class */ (function () {
     GridStack.prototype._updateContainerHeight = function () {
         if (!this.engine || this.engine.batchMode)
             return this;
-        var row = this.getRow() + this._extraDragRow; // checks for minRow already
-        // check for css min height
-        // Note: we don't handle %,rem correctly so comment out, beside we don't need need to create un-necessary
-        // rows as the CSS will make us bigger than our set height if needed... not sure why we had this.
-        // let cssMinHeight = parseInt(getComputedStyle(this.el)['min-height']);
-        // if (cssMinHeight > 0) {
-        //   let minRow = Math.round(cssMinHeight / this.getCellHeight(true));
-        //   if (row < minRow) {
-        //     row = minRow;
-        //   }
-        // }
-        this.el.setAttribute('gs-current-row', String(row));
-        if (row === 0) {
-            this.el.style.removeProperty('min-height');
-            return this;
-        }
+        var parent = this.parentGridItem;
+        var row = this.getRow() + this._extraDragRow; // this checks for minRow already
         var cellHeight = this.opts.cellHeight;
         var unit = this.opts.cellHeightUnit;
         if (!cellHeight)
             return this;
-        this.el.style.minHeight = row * cellHeight + unit;
+        // check for css min height (non nested grid). TODO: support mismatch, say: min % while unit is px.
+        if (!parent) {
+            var cssMinHeight = utils_1.Utils.parseHeight(getComputedStyle(this.el)['minHeight']);
+            if (cssMinHeight.h > 0 && cssMinHeight.unit === unit) {
+                var minRow = Math.floor(cssMinHeight.h / cellHeight);
+                if (row < minRow) {
+                    row = minRow;
+                }
+            }
+        }
+        this.el.setAttribute('gs-current-row', String(row));
+        this.el.style.removeProperty('min-height');
+        this.el.style.removeProperty('height');
+        if (row) {
+            // nested grids have 'insert:0' to fill the space of parent by default, but we may be taller so use min-height for possible scrollbars
+            this.el.style[parent ? 'minHeight' : 'height'] = row * cellHeight + unit;
+        }
+        // if we're a nested grid inside an sizeToContent item, tell it to resize itself too
+        if (parent && !parent.grid.engine.batchMode && utils_1.Utils.shouldSizeToContent(parent)) {
+            parent.grid.resizeToContentCheck(parent.el);
+        }
         return this;
     };
     /** @internal */
@@ -1589,7 +1604,9 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             if (n.subGrid)
                 n.subGrid.onResize();
         });
-        this.doContentResize(columnChanged); // wait for anim of column changed (DOM reflow before we can size correctly)
+        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;
     };
@@ -1605,7 +1622,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                 if (utils_1.Utils.shouldSizeToContent(n))
                     _this.resizeToContentCheck(n.el, useAttr);
             }
-            else {
+            else if (_this.engine.nodes.some(function (n) { return utils_1.Utils.shouldSizeToContent(n); })) {
                 var nodes = __spreadArray([], _this.engine.nodes, true); // in case order changes while resizing one
                 _this.batchUpdate();
                 nodes.forEach(function (n) {
@@ -1614,6 +1631,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                 });
                 _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);
@@ -1624,11 +1642,13 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         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 sizeToContent option.
-        var trackSize = !this.parentGridItem && (this._isAutoCellHeight || this.opts.sizeToContent || !this.opts.disableOneColumnMode || this.engine.nodes.find(function (n) { return n.sizeToContent; }));
+        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(); });
             this.resizeObserver.observe(this.el);
+            this._skipInitialResize = true; // makeWidget will originally have called on startup
         }
         else if ((forceRemove || !trackSize) && this.resizeObserver) {
             this.resizeObserver.disconnect();
@@ -1730,7 +1750,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
      * @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)
-     **/
+     */
     GridStack.setupDragIn = function (dragIn, dragInOptions, root) {
         if (root === void 0) { root = document; }
         if ((dragInOptions === null || dragInOptions === void 0 ? void 0 : dragInOptions.pause) !== undefined) {
@@ -2120,7 +2140,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         }
         return this;
     };
-    /** @internal prepares the element for drag&drop **/
+    /** @internal prepares the element for drag&drop */
     GridStack.prototype._prepareDragDropByNode = function (node) {
         var _this = this;
         var el = node.el;
@@ -2215,7 +2235,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             .resizable(el, noResize ? 'disable' : 'enable');
         return this;
     };
-    /** @internal handles actual drag/resize start **/
+    /** @internal handles actual drag/resize start */
     GridStack.prototype._onStartMoving = function (el, event, ui, node, cellWidth, cellHeight) {
         this.engine.cleanNodes()
             .beginUpdate(node);
@@ -2246,7 +2266,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             }
         }
     };
-    /** @internal handles actual drag/resize **/
+    /** @internal handles actual drag/resize */
     GridStack.prototype._dragOrResize = function (el, event, ui, node, cellWidth, cellHeight) {
         var p = __assign({}, node._orig); // could be undefined (_isExternal) which is ok (drag only set x,y and w,h will default to node value)
         var resizing;
@@ -2334,7 +2354,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
     /** @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.
-     **/
+     */
     GridStack.prototype._leave = function (el, helper) {
         var node = el.gridstackNode;
         if (!node)
@@ -2372,7 +2392,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.1.1';
+    GridStack.GDRev = '9.2.1';
     return GridStack;
 }());
 //# sourceMappingURL=gridstack.js.map