gridstack 11.0.1 → 11.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 11.0.1
+ * GridStack 11.1.1
  * https://gridstackjs.com/
  *
  * Copyright (c) 2021-2024  Alain Dumesny
@@ -82,6 +82,8 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         var _a, _b, _c;
         this.el = el;
         this.opts = opts;
+        /** time to wait for animation (if enabled) to be done so content sizing can happen */
+        this.animationDelay = 300 + 10;
         /** @internal */
         this._gsEventHandler = {};
         /** @internal extra row added when dragging at the bottom of the grid */
@@ -89,7 +91,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         /** @internal meant to store the scale of the active grid */
         this.dragTransform = { xScale: 1, yScale: 1, xOffset: 0, yOffset: 0 };
         el.gridstack = this;
-        opts = opts || {}; // handles null/undefined/0
+        this.opts = opts = opts || {}; // handles null/undefined/0
         if (!el.classList.contains('grid-stack')) {
             this.el.classList.add('grid-stack');
         }
@@ -411,7 +413,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         var domAttr = this._readAttr(el);
         utils_1.Utils.defaults(w, domAttr);
         this.engine.prepareNode(w);
-        this._writeAttr(el, w);
+        // this._writeAttr(el, w); why write possibly incorrect values back when makeWidget() will ?
         this.el.appendChild(el);
         this.makeWidget(el, w);
         return el;
@@ -442,7 +444,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             grid = (_c = grid.parentGridNode) === null || _c === void 0 ? void 0 : _c.grid;
         }
         //... and set the create options
-        ops = utils_1.Utils.cloneDeep(__assign(__assign(__assign({}, (subGridTemplate || {})), { children: undefined }), (ops || node.subGridOpts || {})));
+        ops = utils_1.Utils.cloneDeep(__assign(__assign(__assign(__assign({}, this.opts), { id: undefined, children: undefined, column: 'auto', columnOpts: undefined, layout: 'list', subGridOpts: undefined }), (subGridTemplate || {})), (ops || node.subGridOpts || {})));
         node.subGridOpts = ops;
         // if column special case it set, remember that flag and set default
         var autoColumn;
@@ -502,6 +504,8 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                 subGrid.makeWidget(node.el, node);
             }
         }
+        // if sizedToContent, we need to re-calc the size of ourself
+        this.resizeToContentCheck(false, node);
         return subGrid;
     };
     /**
@@ -626,6 +630,8 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         // the original wanted layout so we can scale back up correctly #1471
         var maxColumn = 0;
         items.forEach(function (n) { maxColumn = Math.max(maxColumn, (n.x || 0) + n.w); });
+        if (maxColumn > this.engine.defaultColumn)
+            this.engine.defaultColumn = maxColumn;
         if (maxColumn > column) {
             this._ignoreLayoutsNodeChange = true; // skip layout update
             this.engine.cacheLayout(items, maxColumn, true);
@@ -682,8 +688,9 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                 }
                 // add back to current list BUT force a collision check if it 'appears' we didn't change to make sure we don't overlap others now
                 _this.engine.nodes.push(item);
-                if (utils_1.Utils.samePos(item, w)) {
+                if (utils_1.Utils.samePos(item, w) && _this.engine.nodes.length > 1) {
                     _this.moveNode(item, __assign(__assign({}, w), { forceCollide: true }));
+                    utils_1.Utils.copyPos(w, item); // use possily updated values before update() is called next (no-op since already moved)
                 }
                 _this.update(item.el, w);
                 if ((_a = w.subGridOpts) === null || _a === void 0 ? void 0 : _a.children) { // update any sub grid as well
@@ -994,8 +1001,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
      *
      * @example
      * const grid = GridStack.init();
-     * grid.el.appendChild('<div id="1" gs-w="3"></div>');
-     * grid.el.appendChild('<div id="2"></div>');
+     * grid.el.innerHtml = '<div id="1" gs-w="3"></div><div id="2"></div>';
      * grid.makeWidget('1');
      * grid.makeWidget('2', {w:2, content: 'hello'});
      */
@@ -1217,7 +1223,6 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             var w = utils_1.Utils.cloneDeep(opt); // make a copy we can modify in case they re-use it or multiple items
             _this.engine.nodeBoundFix(w);
             delete w.autoPosition;
-            delete w.id;
             // move/resize widget if anything changed
             var keys = ['x', 'y', 'w', 'h'];
             var m;
@@ -1236,6 +1241,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             if (w.content !== undefined) {
                 var itemContent = el.querySelector('.grid-stack-item-content');
                 if (itemContent && itemContent.textContent !== w.content) {
+                    n.content = w.content;
                     GridStack.renderCB(itemContent, w);
                     // restore any sub-grid back
                     if ((_a = n.subGrid) === null || _a === void 0 ? void 0 : _a.el) {
@@ -1261,7 +1267,13 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             if (m) {
                 var widthChanged = (m.w !== undefined && m.w !== n.w);
                 _this.moveNode(n, m);
-                _this.resizeToContentCheck(widthChanged, n); // wait for animation if we changed width
+                if (widthChanged && n.subGrid) {
+                    // if we're animating the client size hasn't changed yet, so force a change (not exact size)
+                    n.subGrid.onResize(_this.hasAnimationCSS() ? n.w : undefined);
+                }
+                else {
+                    _this.resizeToContentCheck(widthChanged, n);
+                }
                 delete n._orig; // clear out original position now that we moved #2669
             }
             if (m || changed) {
@@ -1318,8 +1330,11 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         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;
         if (n.subGrid) {
-            // sub-grid - use their actual row count * their cell height
+            // sub-grid - use their actual row count * their cell height, BUT append any content outside of the grid (eg: above text)
             wantedH = n.subGrid.getRow() * n.subGrid.getCellHeight(true);
+            var subRec = n.subGrid.el.getBoundingClientRect();
+            var parentRec = n.subGrid.el.parentElement.getBoundingClientRect();
+            wantedH += subRec.top - parentRec.top;
         }
         else if ((_b = (_a = n.subGridOpts) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.length) {
             // not sub-grid just yet (case above) wait until we do
@@ -1696,20 +1711,21 @@ var GridStack = exports.GridStack = /** @class */ (function () {
      * and remember the prev columns we used, or get our count from parent, as well as check for cellHeight==='auto' (square)
      * or `sizeToContent` gridItem options.
      */
-    GridStack.prototype.onResize = function () {
+    GridStack.prototype.onResize = function (clientWidth) {
         var _a;
-        if (!((_a = this.el) === null || _a === void 0 ? void 0 : _a.clientWidth))
+        if (clientWidth === void 0) { clientWidth = (_a = this.el) === null || _a === void 0 ? void 0 : _a.clientWidth; }
+        if (!clientWidth)
             return; // return if we're gone or no size yet (will get called again)
-        if (this.prevWidth === this.el.clientWidth)
+        if (this.prevWidth === clientWidth)
             return; // no-op
-        this.prevWidth = this.el.clientWidth;
-        // console.log('onResize ', this.el.clientWidth);
+        this.prevWidth = clientWidth;
+        // console.log('onResize ', clientWidth);
         this.batchUpdate();
         // see if we're nested and take our column count from our parent....
         var columnChanged = false;
         if (this._autoColumn && this.parentGridNode) {
             if (this.opts.column !== this.parentGridNode.w) {
-                this.column(this.parentGridNode.w, 'none');
+                this.column(this.parentGridNode.w, this.opts.layout || 'list');
                 columnChanged = true;
             }
         }
@@ -1741,7 +1757,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         // 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 ?
         if (delay && this.hasAnimationCSS())
-            return setTimeout(function () { return _this.resizeToContentCheck(false, n); }, 300 + 10);
+            return setTimeout(function () { return _this.resizeToContentCheck(false, n); }, this.animationDelay);
         if (n) {
             if (utils_1.Utils.shouldSizeToContent(n))
                 this.resizeToContentCBCheck(n.el);
@@ -2579,7 +2595,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 = '11.0.1';
+    GridStack.GDRev = '11.1.1';
     return GridStack;
 }());
 //# sourceMappingURL=gridstack.js.map