gridstack 11.3.0 → 11.5.0

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.3.0
+ * GridStack 11.5.0
  * https://gridstackjs.com/
  *
  * Copyright (c) 2021-2024  Alain Dumesny
@@ -395,7 +395,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             el = GridStack.addRemoveCB(this.el, w, true, false);
         }
         else {
-            el = utils_1.Utils.createWidgetDivs(this.opts.itemClass, node);
+            el = this.createWidgetDivs(node);
         }
         if (!el)
             return;
@@ -414,6 +414,29 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         this.makeWidget(el, w);
         return el;
     };
+    /** create the default grid item divs, and content (possibly lazy loaded) by using GridStack.renderCB() */
+    GridStack.prototype.createWidgetDivs = function (n) {
+        var el = utils_1.Utils.createDiv(['grid-stack-item', this.opts.itemClass]);
+        var cont = utils_1.Utils.createDiv(['grid-stack-item-content'], el);
+        if (utils_1.Utils.lazyLoad(n)) {
+            if (!n.visibleObservable) {
+                n.visibleObservable = new IntersectionObserver(function (_a) {
+                    var _b, _c;
+                    var entry = _a[0];
+                    if (entry.isIntersecting) {
+                        (_b = n.visibleObservable) === null || _b === void 0 ? void 0 : _b.disconnect();
+                        delete n.visibleObservable;
+                        GridStack.renderCB(cont, n);
+                        (_c = n.grid) === null || _c === void 0 ? void 0 : _c.prepareDragDrop(n.el);
+                    }
+                });
+                window.setTimeout(function () { var _a; return (_a = n.visibleObservable) === null || _a === void 0 ? void 0 : _a.observe(el); }); // wait until callee sets position attributes
+            }
+        }
+        else
+            GridStack.renderCB(cont, n);
+        return el;
+    };
     /**
      * Convert an existing gridItem element into a sub-grid with the given (optional) options, else inherit them
      * from the parent's subGrid options.
@@ -470,7 +493,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                 newItem.appendChild(content);
                 content = utils_1.Utils.createDiv(['grid-stack-item-content'], node.el);
             }
-            this._prepareDragDropByNode(node); // ... and restore original D&D
+            this.prepareDragDrop(node.el); // ... and restore original D&D
         }
         // if we're adding an additional item, make the container large enough to have them both
         if (nodeToAdd) {
@@ -605,8 +628,8 @@ var GridStack = exports.GridStack = /** @class */ (function () {
     /**
      * load the widgets from a list. This will call update() on each (matching by id) or add/remove widgets that are not there.
      *
-     * @param layout list of widgets definition to update/create
-     * @param addAndRemove boolean (default true) or callback method can be passed to control if and how missing widgets can be added/removed, giving
+     * @param items list of widgets definition to update/create
+     * @param addRemove boolean (default true) or callback method can be passed to control if and how missing widgets can be added/removed, giving
      * the user control of insertion.
      *
      * @example
@@ -1191,7 +1214,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         this._setupRemoveDrop();
         this._setupAcceptWidget();
         this.engine.nodes.forEach(function (n) {
-            _this._prepareDragDropByNode(n); // either delete or init Drag&drop
+            _this.prepareDragDrop(n.el); // either delete or init Drag&drop
             if (n.subGrid && recurse)
                 n.subGrid.setStatic(val, updateClass, recurse);
         });
@@ -1200,6 +1223,54 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         }
         return this;
     };
+    /**
+     * Updates the passed in options on the grid (similar to update(widget) for for the grid options).
+     * @param options PARTIAL grid options to update - only items specified will be updated.
+     * NOTE: not all options updating are currently supported (lot of code, unlikely to change)
+     */
+    GridStack.prototype.updateOptions = function (o) {
+        var _a;
+        var opts = this.opts;
+        if (o.acceptWidgets !== undefined)
+            this._setupAcceptWidget();
+        if (o.animate !== undefined)
+            this.setAnimation();
+        if (o.cellHeight) {
+            this.cellHeight(o.cellHeight, true);
+            delete o.cellHeight;
+        }
+        if (o.class && o.class !== opts.class) {
+            if (opts.class)
+                this.el.classList.remove(opts.class);
+            this.el.classList.add(o.class);
+        }
+        if (typeof (o.column) === 'number' && !o.columnOpts) {
+            this.column(o.column);
+            delete o.column;
+        } // responsive column take over actual count
+        if (o.margin !== undefined)
+            this.margin(o.margin);
+        if (o.staticGrid !== undefined)
+            this.setStatic(o.staticGrid);
+        if (o.disableDrag !== undefined && !o.staticGrid)
+            this.enableMove(!o.disableDrag);
+        if (o.disableResize !== undefined && !o.staticGrid)
+            this.enableResize(!o.disableResize);
+        if (o.float !== undefined)
+            this.float(o.float);
+        if (o.row !== undefined) {
+            opts.minRow = opts.maxRow = o.row;
+        }
+        if ((_a = o.children) === null || _a === void 0 ? void 0 : _a.length) {
+            this.load(o.children);
+            delete o.children;
+        }
+        // TBD if we have a real need for these (more complex code)
+        // alwaysShowResizeHandle, draggable, handle, handleClass, itemClass, layout, placeholderClass, placeholderText, resizable, removable, row,...
+        // rest are just copied over...
+        this.opts = __assign(__assign({}, this.opts), o);
+        return this;
+    };
     /**
      * Updates widget position/size and other info. Note: if you need to call this on all nodes, use load() instead which will update what changed.
      * @param els  widget or selector of objects to modify (note: setting the same x,y for multiple items will be indeterministic and likely unwanted)
@@ -1207,21 +1278,12 @@ var GridStack = exports.GridStack = /** @class */ (function () {
      */
     GridStack.prototype.update = function (els, opt) {
         var _this = this;
-        // support legacy call for now ?
-        if (arguments.length > 2) {
-            console.warn('gridstack.ts: `update(el, x, y, w, h)` is deprecated. Use `update(el, {x, w, content, ...})`. It will be removed soon');
-            // eslint-disable-next-line prefer-rest-params
-            var a = arguments;
-            var i = 1;
-            opt = { x: a[i++], y: a[i++], w: a[i++], h: a[i++] };
-            return this.update(els, opt);
-        }
         GridStack.getElements(els).forEach(function (el) {
             var _a;
             var n = el === null || el === void 0 ? void 0 : el.gridstackNode;
             if (!n)
                 return;
-            var w = utils_1.Utils.cloneDeep(opt); // make a copy we can modify in case they re-use it or multiple items
+            var w = __assign(__assign({}, utils_1.Utils.copyPos({}, n)), 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;
             // move/resize widget if anything changed
@@ -1281,7 +1343,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                 _this._writeAttr(el, n);
             }
             if (ddChanged) {
-                _this._prepareDragDropByNode(n);
+                _this.prepareDragDrop(n.el);
             }
         });
         return this;
@@ -1613,7 +1675,8 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         sizeToContent ? el.classList.add('size-to-content') : el.classList.remove('size-to-content');
         if (sizeToContent)
             this.resizeToContentCheck(false, node);
-        this._prepareDragDropByNode(node);
+        if (!utils_1.Utils.lazyLoad(node))
+            this.prepareDragDrop(node.el);
         return this;
     };
     /** @internal call to write position x,y,w,h attributes back to element */
@@ -1663,7 +1726,13 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         n.noResize = utils_1.Utils.toBool(el.getAttribute('gs-no-resize'));
         n.noMove = utils_1.Utils.toBool(el.getAttribute('gs-no-move'));
         n.locked = utils_1.Utils.toBool(el.getAttribute('gs-locked'));
-        n.sizeToContent = utils_1.Utils.toBool(el.getAttribute('gs-size-to-content'));
+        var attr = el.getAttribute('gs-size-to-content');
+        if (attr) {
+            if (attr === 'true' || attr === 'false')
+                n.sizeToContent = utils_1.Utils.toBool(attr);
+            else
+                n.sizeToContent = parseInt(attr, 10);
+        }
         n.id = el.getAttribute('gs-id');
         // read but never written out
         n.maxW = utils_1.Utils.toNumber(el.getAttribute('gs-max-w'));
@@ -1685,11 +1754,11 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             if (n.minH)
                 el.removeAttribute('gs-min-h');
         }
-        // remove any key not found (null or false which is default)
+        // remove any key not found (null or false which is default, unless sizeToContent=false override)
         for (var key in n) {
             if (!n.hasOwnProperty(key))
                 return;
-            if (!n[key] && n[key] !== 0) { // 0 can be valid value (x,y only really)
+            if (!n[key] && n[key] !== 0 && key !== 'gs-size-to-content') { // 0 can be valid value (x,y only really)
                 delete n[key];
             }
         }
@@ -1923,7 +1992,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             if (!n)
                 return;
             val ? delete n.noMove : n.noMove = true;
-            _this._prepareDragDropByNode(n); // init DD if need be, and adjust
+            _this.prepareDragDrop(n.el); // init DD if need be, and adjust
         });
         return this;
     };
@@ -1941,7 +2010,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             if (!n)
                 return;
             val ? delete n.noResize : n.noResize = true;
-            _this._prepareDragDropByNode(n); // init DD if need be, and adjust
+            _this.prepareDragDrop(n.el); // init DD if need be, and adjust
         });
         return this;
     };
@@ -1993,7 +2062,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             return this; // can't move a static grid!
         doEnable ? delete this.opts.disableDrag : this.opts.disableDrag = true; // FIRST before we update children as grid overrides #1658
         this.engine.nodes.forEach(function (n) {
-            _this._prepareDragDropByNode(n);
+            _this.prepareDragDrop(n.el);
             if (n.subGrid && recurse)
                 n.subGrid.enableMove(doEnable, recurse);
         });
@@ -2010,7 +2079,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             return this; // can't size a static grid!
         doEnable ? delete this.opts.disableResize : this.opts.disableResize = true; // FIRST before we update children as grid overrides #1658
         this.engine.nodes.forEach(function (n) {
-            _this._prepareDragDropByNode(n);
+            _this.prepareDragDrop(n.el);
             if (n.subGrid && recurse)
                 n.subGrid.enableResize(doEnable, recurse);
         });
@@ -2141,6 +2210,11 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                 // delete node._added; // reset this to track placeholder again in case we were over other grid #1484 (dropout doesn't always clear)
                 return false; // prevent parent from receiving msg (which may be a grid as well)
             }
+            // If sidebar item, restore the sidebar node size to ensure consistent behavior when dragging between grids
+            if (node === null || node === void 0 ? void 0 : node._sidebarOrig) {
+                node.w = node._sidebarOrig.w;
+                node.h = node._sidebarOrig.h;
+            }
             // fix #1578 when dragging fast, we may not get a leave on the previous grid so force one now
             if ((node === null || node === void 0 ? void 0 : node.grid) && node.grid !== _this && !node._temporaryRemoved) {
                 // console.log('dropover without leave'); // TEST
@@ -2151,7 +2225,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             // cache cell dimensions (which don't change), position can animate if we removed an item in otherGrid that affects us...
             cellWidth = _this.cellWidth();
             cellHeight = _this.getCellHeight(true);
-            // sidebar items: load any element attributes if we don't have a node
+            // sidebar items: load any element attributes if we don't have a node on first enter from the sidebar
             if (!node) {
                 var attr = helper.getAttribute('data-gs-widget') || helper.getAttribute('gridstacknode'); // TBD: temp support for old V11.0.0 attribute
                 if (attr) {
@@ -2166,6 +2240,8 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                 }
                 if (!node)
                     node = _this._readAttr(helper); // used to pass false for #2354, but now we clone top level node
+                // On first grid enter from sidebar, set the initial sidebar item size properties for the node
+                node._sidebarOrig = { w: node.w, h: node.h };
             }
             if (!node.grid) { // sidebar item
                 if (!node.el)
@@ -2335,20 +2411,30 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         }
         return this;
     };
-    /** @internal prepares the element for drag&drop */
-    GridStack.prototype._prepareDragDropByNode = function (node) {
+    /**
+     * prepares the element for drag&drop - this is normally called by makeWidget() unless are are delay loading
+     * @param el GridItemHTMLElement of the widget
+     * @param [force=false]
+     * */
+    GridStack.prototype.prepareDragDrop = function (el, force) {
         var _this = this;
-        var el = node.el;
+        if (force === void 0) { force = false; }
+        var node = el === null || el === void 0 ? void 0 : el.gridstackNode;
+        if (!node)
+            return;
         var noMove = node.noMove || this.opts.disableDrag;
         var noResize = node.noResize || this.opts.disableResize;
         // check for disabled grid first
-        if (this.opts.staticGrid || (noMove && noResize)) {
+        var disable = node.locked || this.opts.staticGrid || (noMove && noResize);
+        if (force || disable) {
             if (node._initDD) {
                 this._removeDD(el); // nukes everything instead of just disable, will add some styles back next
                 delete node._initDD;
             }
-            el.classList.add('ui-draggable-disabled', 'ui-resizable-disabled'); // add styles one might depend on #1435
-            return this;
+            if (disable) {
+                el.classList.add('ui-draggable-disabled', 'ui-resizable-disabled'); // add styles one might depend on #1435
+                return this;
+            }
         }
         if (!node._initDD) {
             // variables used/cashed between the 3 start/move/end methods, in addition to node passed above
@@ -2564,7 +2650,10 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             this._extraDragRow = 0; // @ts-ignore
             this._updateContainerHeight();
             var target = event.target; // @ts-ignore
-            this._writePosAttr(target, node);
+            // Do not write sidebar item attributes back to the original sidebar el
+            if (!node._sidebarOrig) {
+                this._writePosAttr(target, node);
+            }
             if (this._gsEventHandler[event.type]) {
                 this._gsEventHandler[event.type](event, target);
             }
@@ -2588,8 +2677,11 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         node._temporaryRemoved = true;
         this.engine.removeNode(node); // remove placeholder as well, otherwise it's a sign node is not in our list, which is a bigger issue
         node.el = node._isExternal && helper ? helper : el; // point back to real item being dragged
+        var sidebarOrig = node._sidebarOrig;
         if (node._isExternal)
             this.engine.cleanupNode(node);
+        // Restore sidebar item initial size info to stay consistent when dragging between multiple grids
+        node._sidebarOrig = sidebarOrig;
         if (this.opts.removable === true) { // boolean vs a class string
             // item leaving us and we are supposed to remove on leave (no need to drag onto trash) mark it so
             GridStack._itemRemoving(el, true);
@@ -2619,7 +2711,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.3.0';
+    GridStack.GDRev = '11.5.0';
     return GridStack;
 }());
 //# sourceMappingURL=gridstack.js.map