Merge pull request gridstack#2969 from adumesny/master

adumesny · web-flow · commit 998ad91fd32c · 2025-02-27T07:20:38.000-08:00
this.createWidgetDivs() instead of static
diff --git a/demo/sizeToContent.html b/demo/sizeToContent.html
@@ -109,7 +109,7 @@ <h1>sizeToContent options demo</h1>
       grid.addWidget({content: `<div>New: ${text}</div>`});
     }
     function makeWidget() {
-      let el = GridStack.createWidgetDivs(undefined, {content: `<div>New Make: ${text}</div>`}, grid.el)
+      let el = grid.createWidgetDivs({content: `<div>New Make: ${text}</div>`}, grid.el)
       grid.makeWidget(el, {w:2});
     }
     function more() {
diff --git a/demo/two.html b/demo/two.html
@@ -107,7 +107,7 @@ <h1>Two grids demo</h1>
     // clone the sidepanel item so we drag a copy, and in some case ('manual') create the final widget, else sidebarContent will be used.
     function myClone(el) {
       if (el.getAttribute('gs-id') === 'manual') {
-        return GridStack.createWidgetDivs(undefined, {w:2, content:'manual'}); // RenderCB() will be called
+        return grids[0].createWidgetDivs({w:2, content:'manual'}); // RenderCB() will be called
       }
       el = el.cloneNode(true);
       // el.setAttribute('gs-id', 'foo'); // help debug #2231
diff --git a/src/gridstack.ts b/src/gridstack.ts
@@ -173,26 +173,6 @@ export class GridStack {
     return grid;
   }
 
-  /** create the default grid item divs, and content possibly lazy loaded calling GridStack.renderCB */
-  static createWidgetDivs(itemClass: string, n: GridStackNode): HTMLElement {
-    const el = Utils.createDiv(['grid-stack-item', 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;
-  }
-
   /** call this method to register your engine instead of the default one.
    * See instead `GridStackOptions.engineClass` if you only need to
    * replace just one instance.
@@ -487,7 +467,7 @@ export class GridStack {
     } else if (GridStack.addRemoveCB) {
       el = GridStack.addRemoveCB(this.el, w, true, false);
     } else {
-      el = GridStack.createWidgetDivs(this.opts.itemClass, node);
+      el = this.createWidgetDivs(node);
     }
 
     if (!el) return;
@@ -511,6 +491,26 @@ export class GridStack {
     return el;
   }
 
+  /** create the default grid item divs, and content (possibly lazy loaded) by using GridStack.renderCB() */
+  public createWidgetDivs(n: GridStackNode): HTMLElement {
+    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.

Original file line number	Diff line number	Diff line change
`@@ -109,7 +109,7 @@ <h1>sizeToContent options demo</h1>`
`109`	`109`	grid.addWidget({content: `<div>New: ${text}</div>`});
`110`	`110`	`}`
`111`	`111`	`function makeWidget() {`
`112`		- let el = GridStack.createWidgetDivs(undefined, {content: `<div>New Make: ${text}</div>`}, grid.el)
	`112`	+ let el = grid.createWidgetDivs({content: `<div>New Make: ${text}</div>`}, grid.el)
`113`	`113`	`grid.makeWidget(el, {w:2});`
`114`	`114`	`}`
`115`	`115`	`function more() {`
Original file line number	Diff line number	Diff line change
`@@ -107,7 +107,7 @@ <h1>Two grids demo</h1>`
`107`	`107`	`// clone the sidepanel item so we drag a copy, and in some case ('manual') create the final widget, else sidebarContent will be used.`
`108`	`108`	`function myClone(el) {`
`109`	`109`	`if (el.getAttribute('gs-id') === 'manual') {`
`110`		`- return GridStack.createWidgetDivs(undefined, {w:2, content:'manual'}); // RenderCB() will be called`
	`110`	`+ return grids[0].createWidgetDivs({w:2, content:'manual'}); // RenderCB() will be called`
`111`	`111`	`}`
`112`	`112`	`el = el.cloneNode(true);`
`113`	`113`	`// el.setAttribute('gs-id', 'foo'); // help debug #2231`