gridstack 11.3.0 → 11.4.0

package/dist/gridstack.js

@@ -1,5 +1,5 @@
 /*!
- * GridStack 11.3.0
+ * GridStack 11.4.0
  * https://gridstackjs.com/
  *
  * Copyright (c) 2021-2024  Alain Dumesny
@@ -355,7 +355,7 @@ class GridStack {
             el = GridStack.addRemoveCB(this.el, w, true, false);
         }
         else {
-            el = Utils.createWidgetDivs(this.opts.itemClass, node);
+            el = this.createWidgetDivs(node);
         }
         if (!el)
             return;
@@ -374,6 +374,27 @@ class GridStack {
         this.makeWidget(el, w);
         return el;
     }
+    /** create the default grid item divs, and content (possibly lazy loaded) by using GridStack.renderCB() */
+    createWidgetDivs(n) {
+        const el = Utils.createDiv(['grid-stack-item', this.opts.itemClass]);
+        const cont = Utils.createDiv(['grid-stack-item-content'], el);
+        if (Utils.lazyLoad(n)) {
+            if (!n.visibleObservable) {
+                n.visibleObservable = new IntersectionObserver(([entry]) => {
+                    if (entry.isIntersecting) {
+                        n.visibleObservable?.disconnect();
+                        delete n.visibleObservable;
+                        GridStack.renderCB(cont, n);
+                        n.grid?.prepareDragDrop(n.el);
+                    }
+                });
+                window.setTimeout(() => n.visibleObservable?.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.
@@ -433,7 +454,7 @@ class GridStack {
                 newItem.appendChild(content);
                 content = 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) {
@@ -562,8 +583,8 @@ class GridStack {
     /**
      * 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
@@ -1117,7 +1138,7 @@ class GridStack {
         this._setupRemoveDrop();
         this._setupAcceptWidget();
         this.engine.nodes.forEach(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);
         });
@@ -1132,20 +1153,11 @@ class GridStack {
      * @param opt new widget options (x,y,w,h, etc..). Only those set will be updated.
      */
     update(els, opt) {
-        // 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
-            const a = arguments;
-            let i = 1;
-            opt = { x: a[i++], y: a[i++], w: a[i++], h: a[i++] };
-            return this.update(els, opt);
-        }
         GridStack.getElements(els).forEach(el => {
             const n = el?.gridstackNode;
             if (!n)
                 return;
-            const w = Utils.cloneDeep(opt); // make a copy we can modify in case they re-use it or multiple items
+            const w = { ...Utils.copyPos({}, n), ...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
@@ -1205,7 +1217,7 @@ class GridStack {
                 this._writeAttr(el, n);
             }
             if (ddChanged) {
-                this._prepareDragDropByNode(n);
+                this.prepareDragDrop(n.el);
             }
         });
         return this;
@@ -1531,7 +1543,8 @@ class GridStack {
         sizeToContent ? el.classList.add('size-to-content') : el.classList.remove('size-to-content');
         if (sizeToContent)
             this.resizeToContentCheck(false, node);
-        this._prepareDragDropByNode(node);
+        if (!Utils.lazyLoad(node))
+            this.prepareDragDrop(node.el);
         return this;
     }
     /** @internal call to write position x,y,w,h attributes back to element */
@@ -1824,7 +1837,7 @@ class GridStack {
             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;
     }
@@ -1841,7 +1854,7 @@ class GridStack {
             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;
     }
@@ -1889,7 +1902,7 @@ class GridStack {
             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(n => {
-            this._prepareDragDropByNode(n);
+            this.prepareDragDrop(n.el);
             if (n.subGrid && recurse)
                 n.subGrid.enableMove(doEnable, recurse);
         });
@@ -1904,7 +1917,7 @@ class GridStack {
             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(n => {
-            this._prepareDragDropByNode(n);
+            this.prepareDragDrop(n.el);
             if (n.subGrid && recurse)
                 n.subGrid.enableResize(doEnable, recurse);
         });
@@ -2225,9 +2238,9 @@ class GridStack {
         }
         return this;
     }
-    /** @internal prepares the element for drag&drop */
-    _prepareDragDropByNode(node) {
-        const el = node.el;
+    /** prepares the element for drag&drop - this is normally called by makeWiget() unless are are delay loading */
+    prepareDragDrop(el) {
+        const node = el.gridstackNode;
         const noMove = node.noMove || this.opts.disableDrag;
         const noResize = node.noResize || this.opts.disableResize;
         // check for disabled grid first
@@ -2508,6 +2521,6 @@ GridStack.resizeToContentParent = '.grid-stack-item-content';
 GridStack.Utils = Utils;
 /** scoping so users can call new GridStack.Engine(12) for example */
 GridStack.Engine = GridStackEngine;
-GridStack.GDRev = '11.3.0';
+GridStack.GDRev = '11.4.0';
 export { GridStack };
 //# sourceMappingURL=gridstack.js.map