gridstack 11.2.0 → 11.4.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.2.0
+ * GridStack 11.4.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
@@ -622,16 +645,15 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         items.forEach(function (n) { n.w = n.w || 1; n.h = n.h || 1; });
         // sort items. those without coord will be appended last
         items = utils_1.Utils.sort(items);
+        this.engine.skipCacheUpdate = this._ignoreLayoutsNodeChange = true; // skip layout update
         // if we're loading a layout into for example 1 column and items don't fit, make sure to save
         // 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
+        if (maxColumn > column)
             this.engine.cacheLayout(items, maxColumn, true);
-        }
         // if given a different callback, temporally set it as global option so creating will use it
         var prevCB = GridStack.addRemoveCB;
         if (typeof (addRemove) === 'function')
@@ -705,6 +727,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         this.batchUpdate(false);
         // after commit, clear that flag
         delete this._ignoreLayoutsNodeChange;
+        delete this.engine.skipCacheUpdate;
         prevCB ? GridStack.addRemoveCB = prevCB : delete GridStack.addRemoveCB;
         // delay adding animation back
         if (blank && ((_a = this.opts) === null || _a === void 0 ? void 0 : _a.animate))
@@ -899,6 +922,8 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         return Array.from(this.el.children)
             .filter(function (el) { return el.matches('.' + _this.opts.itemClass) && !el.matches('.' + _this.opts.placeholderClass); });
     };
+    /** true if changeCB should be ignored due to column change, sizeToContent, loading, etc... which caller can ignore for dirty flag case */
+    GridStack.prototype.isIgnoreChangeCB = function () { return this._ignoreLayoutsNodeChange; };
     /**
      * Destroys a grid instance. DO NOT CALL any methods or access any vars after this as it will free up members.
      * @param removeDOM if `false` grid and items HTML elements will not be removed from the DOM (Optional. Default `true`).
@@ -1017,12 +1042,14 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         }
         // if we're adding an item into 1 column make sure
         // we don't override the larger 12 column layout that was already saved. #1985
-        if (this.opts.column === 1) {
-            this._ignoreLayoutsNodeChange = true;
+        var resetIgnoreLayoutsNodeChange;
+        if (this.opts.column === 1 && !this._ignoreLayoutsNodeChange) {
+            resetIgnoreLayoutsNodeChange = this._ignoreLayoutsNodeChange = true;
         }
         this._triggerAddEvent();
         this._triggerChangeEvent();
-        delete this._ignoreLayoutsNodeChange;
+        if (resetIgnoreLayoutsNodeChange)
+            delete this._ignoreLayoutsNodeChange;
         return el;
     };
     GridStack.prototype.on = function (name, callback) {
@@ -1187,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);
         });
@@ -1203,21 +1230,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
@@ -1277,7 +1295,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                 _this._writeAttr(el, n);
             }
             if (ddChanged) {
-                _this._prepareDragDropByNode(n);
+                _this.prepareDragDrop(n.el);
             }
         });
         return this;
@@ -1609,7 +1627,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 */
@@ -1919,7 +1938,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;
     };
@@ -1937,7 +1956,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;
     };
@@ -1989,7 +2008,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);
         });
@@ -2006,7 +2025,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);
         });
@@ -2331,10 +2350,10 @@ 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 makeWiget() unless are are delay loading */
+    GridStack.prototype.prepareDragDrop = function (el) {
         var _this = this;
-        var el = node.el;
+        var node = el.gridstackNode;
         var noMove = node.noMove || this.opts.disableDrag;
         var noResize = node.noResize || this.opts.disableResize;
         // check for disabled grid first
@@ -2615,7 +2634,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.2.0';
+    GridStack.GDRev = '11.4.0';
     return GridStack;
 }());
 //# sourceMappingURL=gridstack.js.map